├── .eslintignore
├── .eslintrc.cjs
├── .github
└── workflows
│ ├── lint.yml
│ ├── playwright.yml
│ └── vitest.yml
├── .gitignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── examples
└── svelte
│ ├── README.md
│ ├── index.html
│ ├── jsconfig.json
│ ├── package.json
│ ├── pnpm-lock.yaml
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.svelte
│ ├── app.css
│ ├── assets
│ │ └── svelte.svg
│ ├── lib
│ │ └── Counter.svelte
│ ├── main.js
│ └── vite-env.d.ts
│ ├── svelte.config.js
│ └── vite.config.js
├── mdsvex.config.js
├── package.json
├── playwright.config.ts
├── pnpm-lock.yaml
├── src
├── app.d.ts
├── app.html
├── index.test.ts
├── internal
│ └── Toggle.svelte
├── lib
│ ├── ContextMenu.svelte
│ ├── ContextMenuParentNode.svelte
│ ├── ContextMenuSchema.ts
│ ├── index.js
│ ├── types.ts
│ └── utils.ts
└── routes
│ ├── +layout.svelte
│ ├── +page.svelte
│ ├── Hero.svelte
│ ├── Install.svelte
│ └── docs
│ ├── +layout.svelte
│ ├── basic-usage
│ ├── +page.svelte
│ └── PageContent.svelte.md
│ ├── browser-builtins
│ ├── +page.svelte
│ └── PageContent.svelte.md
│ ├── getting-started
│ ├── +page.svelte
│ └── PageContent.svelte.md
│ ├── install
│ ├── +page.svelte
│ └── PageContent.svelte.md
│ ├── lang.ts
│ ├── philosophy
│ ├── +page.svelte
│ └── PageContent.svelte.md
│ ├── props
│ ├── +page.svelte
│ └── PageContent.svelte.md
│ ├── schemas
│ ├── +page.svelte
│ └── PageContent.svelte.md
│ └── style
│ ├── +page.svelte
│ └── PageContent.svelte.md
├── static
├── base.css
├── favicon.png
├── gruvbox.css
└── images
│ ├── github.svg
│ └── npm.svg
├── svelte.config.js
├── tests
├── e2e
│ └── docs.test.ts
└── unit
│ └── utils.test.ts
├── tsconfig.json
└── vite.config.ts
/.eslintignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 |
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parser: '@typescript-eslint/parser',
4 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
5 | plugins: ['svelte3', '@typescript-eslint'],
6 | ignorePatterns: ['*.cjs', '/dist/**'],
7 | overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
8 | settings: {
9 | 'svelte3/typescript': () => require('typescript')
10 | },
11 | parserOptions: {
12 | sourceType: 'module',
13 | ecmaVersion: 2020
14 | },
15 | env: {
16 | browser: true,
17 | es2017: true,
18 | node: true
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/.github/workflows/lint.yml:
--------------------------------------------------------------------------------
1 | name: Lint
2 |
3 | on:
4 | push:
5 | branches: [main]
6 | pull_request:
7 | branches: [main]
8 |
9 | jobs:
10 | build:
11 | runs-on: ubuntu-latest
12 |
13 | strategy:
14 | matrix:
15 | node-version: [16.x]
16 |
17 | steps:
18 | - uses: actions/checkout@v3
19 | - name: Use Node.js ${{ matrix.node-version }}
20 | uses: actions/setup-node@v3
21 | with:
22 | node-version: ${{ matrix.node-version }}
23 | - run: npm i -g pnpm@latest-7
24 | - run: pnpm install
25 | - run: pnpm run lint
26 | # - run: pnpm run check
27 |
--------------------------------------------------------------------------------
/.github/workflows/playwright.yml:
--------------------------------------------------------------------------------
1 | name: Playwright
2 | on:
3 | push:
4 | branches: [main]
5 | pull_request:
6 | branches: [main]
7 | jobs:
8 | test:
9 | timeout-minutes: 60
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v3
13 | - uses: actions/setup-node@v3
14 | with:
15 | node-version: 18
16 | - name: Install pnpm
17 | run: npm i -g pnpm@latest-7
18 | - name: Install dependencies
19 | run: pnpm install
20 | - name: Install Playwright Browsers
21 | run: pnpx playwright install --with-deps
22 | - name: Run Playwright tests
23 | run: npx playwright test
24 |
--------------------------------------------------------------------------------
/.github/workflows/vitest.yml:
--------------------------------------------------------------------------------
1 | name: Vitest
2 |
3 | on:
4 | push:
5 | branches: [main]
6 | pull_request:
7 | branches: [main]
8 |
9 | jobs:
10 | build:
11 | runs-on: ubuntu-latest
12 |
13 | strategy:
14 | matrix:
15 | node-version: [16.x]
16 |
17 | steps:
18 | - uses: actions/checkout@v3
19 | - name: Use Node.js ${{ matrix.node-version }}
20 | uses: actions/setup-node@v3
21 | with:
22 | node-version: ${{ matrix.node-version }}
23 | - run: npm i -g pnpm@latest-7
24 | - run: pnpm install
25 | - run: pnpm run test:unit
26 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /dist
5 | /.svelte-kit
6 | /package
7 | .env
8 | .env.*
9 | !.env.example
10 | vite.config.js.timestamp-*
11 | vite.config.ts.timestamp-*
12 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | /dist
7 | .env
8 | .env.*
9 | !.env.example
10 |
11 | # Ignore files for PNPM, NPM and YARN
12 | pnpm-lock.yaml
13 | package-lock.json
14 | yarn.lock
15 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "useTabs": true,
3 | "singleQuote": true,
4 | "trailingComma": "none",
5 | "printWidth": 100,
6 | "plugins": ["prettier-plugin-svelte"],
7 | "pluginSearchDirs": ["."],
8 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
9 | }
10 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Jacob Størdahl
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # svelte-right-click
2 |
3 | A custom context menu for your Svelte application.
4 |
5 | [](https://github.com/stordahl/svelte-right-click/actions/workflows/vitest.yml)
6 |
7 | [](https://github.com/stordahl/svelte-right-click/actions/workflows/playwright.yml)
8 |
9 | > Currently in Active Development
10 |
11 | ### [Svelte REPL demo](https://svelte.dev/repl/ccf8cf5e39f64955ba0317fc29d9b2b5?version=3.57.0)
12 |
13 | ## Features
14 |
15 | - Schema Driven ✏️
16 | - TypeScript Support ✅
17 | - Stylable via Style Props 🎨
18 | - Support for browser built-in context menu functions 💻
19 |
20 | ## Installation
21 |
22 | ```shell
23 | npm install --save-dev svelte-right-click
24 | # yarn add svelte-right-click
25 | # pnpm add svelte-right-click
26 | ```
27 |
28 | ## Docs
29 |
30 | Read the full documentation [here](https://svelte-right-click.vercel.app)
31 |
32 | ## Contributing
33 |
34 | Contribution docs, issues templates, and more coming soon!
35 |
--------------------------------------------------------------------------------
/examples/svelte/README.md:
--------------------------------------------------------------------------------
1 | # Svelte + Vite
2 |
3 | This template should help get you started developing with Svelte in Vite.
4 |
5 | ## Recommended IDE Setup
6 |
7 | [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
8 |
9 | ## Need an official Svelte framework?
10 |
11 | Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
12 |
13 | ## Technical considerations
14 |
15 | **Why use this over SvelteKit?**
16 |
17 | - It brings its own routing solution which might not be preferable for some users.
18 | - It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
19 |
20 | This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
21 |
22 | Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
23 |
24 | **Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
25 |
26 | Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
27 |
28 | **Why include `.vscode/extensions.json`?**
29 |
30 | Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
31 |
32 | **Why enable `checkJs` in the JS template?**
33 |
34 | It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration.
35 |
36 | **Why is HMR not preserving my local component state?**
37 |
38 | HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
39 |
40 | If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
41 |
42 | ```js
43 | // store.js
44 | // An extremely simple external store
45 | import { writable } from 'svelte/store';
46 | export default writable(0);
47 | ```
48 |
--------------------------------------------------------------------------------
/examples/svelte/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vite + Svelte
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/examples/svelte/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "moduleResolution": "Node",
4 | "target": "ESNext",
5 | "module": "ESNext",
6 | /**
7 | * svelte-preprocess cannot figure out whether you have
8 | * a value or a type, so tell TypeScript to enforce using
9 | * `import type` instead of `import` for Types.
10 | */
11 | "importsNotUsedAsValues": "error",
12 | "isolatedModules": true,
13 | "resolveJsonModule": true,
14 | /**
15 | * To have warnings / errors of the Svelte compiler at the
16 | * correct position, enable source maps by default.
17 | */
18 | "sourceMap": true,
19 | "esModuleInterop": true,
20 | "skipLibCheck": true,
21 | "forceConsistentCasingInFileNames": true,
22 | /**
23 | * Typecheck JS in `.svelte` and `.js` files by default.
24 | * Disable this if you'd like to use dynamic types.
25 | */
26 | "checkJs": true
27 | },
28 | /**
29 | * Use global.d.ts instead of compilerOptions.types
30 | * to avoid limiting type declarations.
31 | */
32 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
33 | }
34 |
--------------------------------------------------------------------------------
/examples/svelte/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-right-click-example",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "devDependencies": {
12 | "@sveltejs/vite-plugin-svelte": "^2.0.3",
13 | "svelte": "^3.55.1",
14 | "vite": "^4.2.0"
15 | },
16 | "dependencies": {
17 | "svelte-right-click": "latest"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/examples/svelte/pnpm-lock.yaml:
--------------------------------------------------------------------------------
1 | lockfileVersion: 5.4
2 |
3 | specifiers:
4 | '@sveltejs/vite-plugin-svelte': ^2.0.3
5 | svelte: ^3.55.1
6 | svelte-right-click: ^0.0.2
7 | vite: ^4.2.0
8 |
9 | dependencies:
10 | svelte-right-click: 0.0.2_svelte@3.57.0
11 |
12 | devDependencies:
13 | '@sveltejs/vite-plugin-svelte': 2.0.3_svelte@3.57.0+vite@4.2.1
14 | svelte: 3.57.0
15 | vite: 4.2.1
16 |
17 | packages:
18 |
19 | /@esbuild/android-arm/0.17.13:
20 | resolution: {integrity: sha512-5tZZ/hLIfBmt7E8JsE5KbsknoAFmoElkg+A/gjyPtmSQvJjPf+9GsSJihid8VMa08lrsYyaEXOT9RLh3xXQONw==}
21 | engines: {node: '>=12'}
22 | cpu: [arm]
23 | os: [android]
24 | requiresBuild: true
25 | dev: true
26 | optional: true
27 |
28 | /@esbuild/android-arm64/0.17.13:
29 | resolution: {integrity: sha512-F5DgvJMV2ZEpLNpPCO7FEk1wy8O5tg6cikWSB6uvvncsgE1xgbPlm+Boio/4820C2/mj713X83X1h01v0qoeHg==}
30 | engines: {node: '>=12'}
31 | cpu: [arm64]
32 | os: [android]
33 | requiresBuild: true
34 | dev: true
35 | optional: true
36 |
37 | /@esbuild/android-x64/0.17.13:
38 | resolution: {integrity: sha512-5m1UUslzpfVrumG3m3Zv2x9VNAcvMOQWJy009y6jt10tcHpzIq2/b0I0k4fz0QYqGSNS1GteRIhVPN4H7OyCXg==}
39 | engines: {node: '>=12'}
40 | cpu: [x64]
41 | os: [android]
42 | requiresBuild: true
43 | dev: true
44 | optional: true
45 |
46 | /@esbuild/darwin-arm64/0.17.13:
47 | resolution: {integrity: sha512-TXbXp/05r7heRsG8yWwbHw9diay+wXIyRNcIHFoNARRIGahYbTW/qwJzE37zkfxLIUPHgR/SyLTUlnTICg14ag==}
48 | engines: {node: '>=12'}
49 | cpu: [arm64]
50 | os: [darwin]
51 | requiresBuild: true
52 | dev: true
53 | optional: true
54 |
55 | /@esbuild/darwin-x64/0.17.13:
56 | resolution: {integrity: sha512-Ku9Db2sblCxFvQdEO7X9nBaLR/S81uch81e2Q2+Os5z1NcnsFjuqhIYH0Gm6KNNpIKaEbC7gCLbiIPbLLMX4Pg==}
57 | engines: {node: '>=12'}
58 | cpu: [x64]
59 | os: [darwin]
60 | requiresBuild: true
61 | dev: true
62 | optional: true
63 |
64 | /@esbuild/freebsd-arm64/0.17.13:
65 | resolution: {integrity: sha512-t1T5/nIf2j+FdSf1Fa3dcU0cXycr0nK4xJe52qjWa+1I249mM5NBY1ODjiabZxZ0x3CG05y4fd9bxfDLy9kQtA==}
66 | engines: {node: '>=12'}
67 | cpu: [arm64]
68 | os: [freebsd]
69 | requiresBuild: true
70 | dev: true
71 | optional: true
72 |
73 | /@esbuild/freebsd-x64/0.17.13:
74 | resolution: {integrity: sha512-/zbkgEO4gY2qGZr9UNAGI38w/FwUY4bx4EC88k9VeiCKNr3ukNgwH/oIgB5Z9/OqpkNLlcS4w9e2d/MIiy5fbw==}
75 | engines: {node: '>=12'}
76 | cpu: [x64]
77 | os: [freebsd]
78 | requiresBuild: true
79 | dev: true
80 | optional: true
81 |
82 | /@esbuild/linux-arm/0.17.13:
83 | resolution: {integrity: sha512-RrhjzrCF6aCDH248nUAQoldnRmN7nHMxv85GOj5AH+qkxxYvcig7fnUmgANngntRu4btXhN9WKHMgQ5seERDMw==}
84 | engines: {node: '>=12'}
85 | cpu: [arm]
86 | os: [linux]
87 | requiresBuild: true
88 | dev: true
89 | optional: true
90 |
91 | /@esbuild/linux-arm64/0.17.13:
92 | resolution: {integrity: sha512-siu3QZrQ7eGrSttvFaRKyjT7kNRbUuHEKzCCyqRh19MbpGokGY13jbIsBEjx6JmH3T50hds325oweS9Ey2ihAQ==}
93 | engines: {node: '>=12'}
94 | cpu: [arm64]
95 | os: [linux]
96 | requiresBuild: true
97 | dev: true
98 | optional: true
99 |
100 | /@esbuild/linux-ia32/0.17.13:
101 | resolution: {integrity: sha512-ADHA1PqP5gIegehVP0RvxMmNPxpLgetI8QCwYOjUheGXKIKWSdUN8ZS3rusQv3NGZmFCpYdMZzFoI0QtzzGAdw==}
102 | engines: {node: '>=12'}
103 | cpu: [ia32]
104 | os: [linux]
105 | requiresBuild: true
106 | dev: true
107 | optional: true
108 |
109 | /@esbuild/linux-loong64/0.17.13:
110 | resolution: {integrity: sha512-n1JQPxETmR0brkpWlJHeohReEPLH+m00bnJdNnFyHN3zLBt1QypevuZSmnmFWsC+7r7HTwWILj3lBDjtPH3ydg==}
111 | engines: {node: '>=12'}
112 | cpu: [loong64]
113 | os: [linux]
114 | requiresBuild: true
115 | dev: true
116 | optional: true
117 |
118 | /@esbuild/linux-mips64el/0.17.13:
119 | resolution: {integrity: sha512-d0pnD/j5KKQ43xtSIvOD+wNIy6D/Vh9GbXVRa3u4zCyiJMYWjxkPkbBzlEgNjdDmUM+5gBFen9k7B8Xscy+Myg==}
120 | engines: {node: '>=12'}
121 | cpu: [mips64el]
122 | os: [linux]
123 | requiresBuild: true
124 | dev: true
125 | optional: true
126 |
127 | /@esbuild/linux-ppc64/0.17.13:
128 | resolution: {integrity: sha512-C9sMpa/VcGLjVtsT01sXtzZNS7bAZ+icUclkKkiUwBQ9hzT+J+/Xpj+EykI5hB3KgtxQVo4XUahanFoZNxbQ1g==}
129 | engines: {node: '>=12'}
130 | cpu: [ppc64]
131 | os: [linux]
132 | requiresBuild: true
133 | dev: true
134 | optional: true
135 |
136 | /@esbuild/linux-riscv64/0.17.13:
137 | resolution: {integrity: sha512-jYkc5EpNpvjccAHNYekiAtklusVGWftR0VVLtng7dJzDyy+5adAsf1fOG3LllP0WALxS55/w6boLE/728J/bXw==}
138 | engines: {node: '>=12'}
139 | cpu: [riscv64]
140 | os: [linux]
141 | requiresBuild: true
142 | dev: true
143 | optional: true
144 |
145 | /@esbuild/linux-s390x/0.17.13:
146 | resolution: {integrity: sha512-4jAJI5O6E/hATL4lsrG2A+noDjZ377KlATVFKwV3SWaNHj+OvoXe/T84ScQIXEtPI7ndJyLkMYruXj8RR5Ilyw==}
147 | engines: {node: '>=12'}
148 | cpu: [s390x]
149 | os: [linux]
150 | requiresBuild: true
151 | dev: true
152 | optional: true
153 |
154 | /@esbuild/linux-x64/0.17.13:
155 | resolution: {integrity: sha512-eFLQhJq98qijGRcv9je/9M4Mz1suZ+pOtj62ArsLd0gubNGhhQDz6T30X2X3f1KZ8lkKkr+zN5vtZzx1GAMoFw==}
156 | engines: {node: '>=12'}
157 | cpu: [x64]
158 | os: [linux]
159 | requiresBuild: true
160 | dev: true
161 | optional: true
162 |
163 | /@esbuild/netbsd-x64/0.17.13:
164 | resolution: {integrity: sha512-F8PXDeT+3eQpPjf4bmNJapPLu0SKKlWRGPQvBQqVS+YDGoMKnyyYp2UENLFMV8zT7kS39zKxZRZvUL3fMz/7Ww==}
165 | engines: {node: '>=12'}
166 | cpu: [x64]
167 | os: [netbsd]
168 | requiresBuild: true
169 | dev: true
170 | optional: true
171 |
172 | /@esbuild/openbsd-x64/0.17.13:
173 | resolution: {integrity: sha512-9jWfzbFCnIZdHjNs+00KQHArUbp7kjQDNmiuqkwGOQFs67m4/dKNupBv2DP5hTqVlQY4tW4RG3qpb6Y3zOHJeA==}
174 | engines: {node: '>=12'}
175 | cpu: [x64]
176 | os: [openbsd]
177 | requiresBuild: true
178 | dev: true
179 | optional: true
180 |
181 | /@esbuild/sunos-x64/0.17.13:
182 | resolution: {integrity: sha512-ALbOMlTIBkAVi6KqYjONa7u2oH95RN7OpetFqMtjufFLBiSaayRuwUzhs2yuR9CfGT4qi0jv6HQDav+EG314TQ==}
183 | engines: {node: '>=12'}
184 | cpu: [x64]
185 | os: [sunos]
186 | requiresBuild: true
187 | dev: true
188 | optional: true
189 |
190 | /@esbuild/win32-arm64/0.17.13:
191 | resolution: {integrity: sha512-FJBLYL4PkrZGeuHzEqme+0DjNetxkJ+XbB+Aoeow7aQ53JCwsA0/mo8sS5aPkDHgCnMkN4A5GLoFTlDj3BKDrQ==}
192 | engines: {node: '>=12'}
193 | cpu: [arm64]
194 | os: [win32]
195 | requiresBuild: true
196 | dev: true
197 | optional: true
198 |
199 | /@esbuild/win32-ia32/0.17.13:
200 | resolution: {integrity: sha512-Qrvst9RkLz4qgi3hqswNliYuKW92/HGJnd7xLWkGaGPa8S4qsONf81FW0ebDc5iUHb0I7QJwQATutvghTabnFA==}
201 | engines: {node: '>=12'}
202 | cpu: [ia32]
203 | os: [win32]
204 | requiresBuild: true
205 | dev: true
206 | optional: true
207 |
208 | /@esbuild/win32-x64/0.17.13:
209 | resolution: {integrity: sha512-pZ/NIgz861XaUPlIkPFjP55nJ4PJa0o/CD4zgeRb1Q9FVE+8GvdB6ifJcK05jRhny5hKExhnRFIdgHmmCYH8vg==}
210 | engines: {node: '>=12'}
211 | cpu: [x64]
212 | os: [win32]
213 | requiresBuild: true
214 | dev: true
215 | optional: true
216 |
217 | /@jridgewell/sourcemap-codec/1.4.14:
218 | resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
219 | dev: true
220 |
221 | /@sveltejs/vite-plugin-svelte/2.0.3_svelte@3.57.0+vite@4.2.1:
222 | resolution: {integrity: sha512-o+cguBFdwIGtRbNkYOyqTM7KvRUffxh5bfK4oJsWKG2obu+v/cbpT03tJrGl58C7tRXo/aEC0/axN5FVHBj0nA==}
223 | engines: {node: ^14.18.0 || >= 16}
224 | peerDependencies:
225 | svelte: ^3.54.0
226 | vite: ^4.0.0
227 | dependencies:
228 | debug: 4.3.4
229 | deepmerge: 4.3.1
230 | kleur: 4.1.5
231 | magic-string: 0.29.0
232 | svelte: 3.57.0
233 | svelte-hmr: 0.15.1_svelte@3.57.0
234 | vite: 4.2.1
235 | vitefu: 0.2.4_vite@4.2.1
236 | transitivePeerDependencies:
237 | - supports-color
238 | dev: true
239 |
240 | /debug/4.3.4:
241 | resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
242 | engines: {node: '>=6.0'}
243 | peerDependencies:
244 | supports-color: '*'
245 | peerDependenciesMeta:
246 | supports-color:
247 | optional: true
248 | dependencies:
249 | ms: 2.1.2
250 | dev: true
251 |
252 | /deepmerge/4.3.1:
253 | resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
254 | engines: {node: '>=0.10.0'}
255 | dev: true
256 |
257 | /esbuild/0.17.13:
258 | resolution: {integrity: sha512-4ixMwdErBcQHgTBeoxnowENCPKWFAGxgTyKHMK8gqn9sZaC7ZNWFKtim16g2rzQ2b/FYyy3lIUUJboFtjolhqg==}
259 | engines: {node: '>=12'}
260 | hasBin: true
261 | requiresBuild: true
262 | optionalDependencies:
263 | '@esbuild/android-arm': 0.17.13
264 | '@esbuild/android-arm64': 0.17.13
265 | '@esbuild/android-x64': 0.17.13
266 | '@esbuild/darwin-arm64': 0.17.13
267 | '@esbuild/darwin-x64': 0.17.13
268 | '@esbuild/freebsd-arm64': 0.17.13
269 | '@esbuild/freebsd-x64': 0.17.13
270 | '@esbuild/linux-arm': 0.17.13
271 | '@esbuild/linux-arm64': 0.17.13
272 | '@esbuild/linux-ia32': 0.17.13
273 | '@esbuild/linux-loong64': 0.17.13
274 | '@esbuild/linux-mips64el': 0.17.13
275 | '@esbuild/linux-ppc64': 0.17.13
276 | '@esbuild/linux-riscv64': 0.17.13
277 | '@esbuild/linux-s390x': 0.17.13
278 | '@esbuild/linux-x64': 0.17.13
279 | '@esbuild/netbsd-x64': 0.17.13
280 | '@esbuild/openbsd-x64': 0.17.13
281 | '@esbuild/sunos-x64': 0.17.13
282 | '@esbuild/win32-arm64': 0.17.13
283 | '@esbuild/win32-ia32': 0.17.13
284 | '@esbuild/win32-x64': 0.17.13
285 | dev: true
286 |
287 | /fsevents/2.3.2:
288 | resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
289 | engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
290 | os: [darwin]
291 | requiresBuild: true
292 | dev: true
293 | optional: true
294 |
295 | /function-bind/1.1.1:
296 | resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
297 | dev: true
298 |
299 | /has/1.0.3:
300 | resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
301 | engines: {node: '>= 0.4.0'}
302 | dependencies:
303 | function-bind: 1.1.1
304 | dev: true
305 |
306 | /is-core-module/2.11.0:
307 | resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
308 | dependencies:
309 | has: 1.0.3
310 | dev: true
311 |
312 | /kleur/4.1.5:
313 | resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
314 | engines: {node: '>=6'}
315 | dev: true
316 |
317 | /magic-string/0.29.0:
318 | resolution: {integrity: sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==}
319 | engines: {node: '>=12'}
320 | dependencies:
321 | '@jridgewell/sourcemap-codec': 1.4.14
322 | dev: true
323 |
324 | /ms/2.1.2:
325 | resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
326 | dev: true
327 |
328 | /nanoid/3.3.4:
329 | resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
330 | engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
331 | hasBin: true
332 | dev: true
333 |
334 | /path-parse/1.0.7:
335 | resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
336 | dev: true
337 |
338 | /picocolors/1.0.0:
339 | resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
340 | dev: true
341 |
342 | /postcss/8.4.21:
343 | resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
344 | engines: {node: ^10 || ^12 || >=14}
345 | dependencies:
346 | nanoid: 3.3.4
347 | picocolors: 1.0.0
348 | source-map-js: 1.0.2
349 | dev: true
350 |
351 | /resolve/1.22.1:
352 | resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
353 | hasBin: true
354 | dependencies:
355 | is-core-module: 2.11.0
356 | path-parse: 1.0.7
357 | supports-preserve-symlinks-flag: 1.0.0
358 | dev: true
359 |
360 | /rollup/3.20.2:
361 | resolution: {integrity: sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==}
362 | engines: {node: '>=14.18.0', npm: '>=8.0.0'}
363 | hasBin: true
364 | optionalDependencies:
365 | fsevents: 2.3.2
366 | dev: true
367 |
368 | /source-map-js/1.0.2:
369 | resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
370 | engines: {node: '>=0.10.0'}
371 | dev: true
372 |
373 | /supports-preserve-symlinks-flag/1.0.0:
374 | resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
375 | engines: {node: '>= 0.4'}
376 | dev: true
377 |
378 | /svelte-hmr/0.15.1_svelte@3.57.0:
379 | resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==}
380 | engines: {node: ^12.20 || ^14.13.1 || >= 16}
381 | peerDependencies:
382 | svelte: '>=3.19.0'
383 | dependencies:
384 | svelte: 3.57.0
385 | dev: true
386 |
387 | /svelte-right-click/0.0.2_svelte@3.57.0:
388 | resolution: {integrity: sha512-lLwPsdu6+4hV2e8evwRo5+ec1elMATkdaLQ3zhtygO0iE6fKoLcPX8q9XpOkzS54kpaQnRNbIOnXASj3k8veOQ==}
389 | peerDependencies:
390 | svelte: ^3.54.0
391 | dependencies:
392 | svelte: 3.57.0
393 | dev: false
394 |
395 | /svelte/3.57.0:
396 | resolution: {integrity: sha512-WMXEvF+RtAaclw0t3bPDTUe19pplMlfyKDsixbHQYgCWi9+O9VN0kXU1OppzrB9gPAvz4NALuoca2LfW2bOjTQ==}
397 | engines: {node: '>= 8'}
398 |
399 | /vite/4.2.1:
400 | resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
401 | engines: {node: ^14.18.0 || >=16.0.0}
402 | hasBin: true
403 | peerDependencies:
404 | '@types/node': '>= 14'
405 | less: '*'
406 | sass: '*'
407 | stylus: '*'
408 | sugarss: '*'
409 | terser: ^5.4.0
410 | peerDependenciesMeta:
411 | '@types/node':
412 | optional: true
413 | less:
414 | optional: true
415 | sass:
416 | optional: true
417 | stylus:
418 | optional: true
419 | sugarss:
420 | optional: true
421 | terser:
422 | optional: true
423 | dependencies:
424 | esbuild: 0.17.13
425 | postcss: 8.4.21
426 | resolve: 1.22.1
427 | rollup: 3.20.2
428 | optionalDependencies:
429 | fsevents: 2.3.2
430 | dev: true
431 |
432 | /vitefu/0.2.4_vite@4.2.1:
433 | resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
434 | peerDependencies:
435 | vite: ^3.0.0 || ^4.0.0
436 | peerDependenciesMeta:
437 | vite:
438 | optional: true
439 | dependencies:
440 | vite: 4.2.1
441 | dev: true
442 |
--------------------------------------------------------------------------------
/examples/svelte/public/vite.svg:
--------------------------------------------------------------------------------
1 |
20 |
28 | Vite + Svelte
29 |
30 |
31 |
33 |
34 |
35 | Check out SvelteKit , the official Svelte app framework powered by Vite!
38 |
39 |
40 | Click on the Vite and Svelte logos to learn more
41 |
42 |
43 |
60 |
--------------------------------------------------------------------------------
/examples/svelte/src/app.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | -webkit-text-size-adjust: 100%;
15 | }
16 |
17 | a {
18 | font-weight: 500;
19 | color: #646cff;
20 | text-decoration: inherit;
21 | }
22 | a:hover {
23 | color: #535bf2;
24 | }
25 |
26 | body {
27 | margin: 0;
28 | display: flex;
29 | place-items: center;
30 | min-width: 320px;
31 | min-height: 100vh;
32 | }
33 |
34 | h1 {
35 | font-size: 3.2em;
36 | line-height: 1.1;
37 | }
38 |
39 | .card {
40 | padding: 2em;
41 | }
42 |
43 | #app {
44 | max-width: 1280px;
45 | margin: 0 auto;
46 | padding: 2rem;
47 | text-align: center;
48 | }
49 |
50 | button {
51 | border-radius: 8px;
52 | border: 1px solid transparent;
53 | padding: 0.6em 1.2em;
54 | font-size: 1em;
55 | font-weight: 500;
56 | font-family: inherit;
57 | background-color: #1a1a1a;
58 | cursor: pointer;
59 | transition: border-color 0.25s;
60 | }
61 | button:hover {
62 | border-color: #646cff;
63 | }
64 | button:focus,
65 | button:focus-visible {
66 | outline: 4px auto -webkit-focus-ring-color;
67 | }
68 |
69 | @media (prefers-color-scheme: light) {
70 | :root {
71 | color: #213547;
72 | background-color: #ffffff;
73 | }
74 | a:hover {
75 | color: #747bff;
76 | }
77 | button {
78 | background-color: #f9f9f9;
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/examples/svelte/src/assets/svelte.svg:
--------------------------------------------------------------------------------
1 |
9 | count is {count}
10 |
11 |
--------------------------------------------------------------------------------
/examples/svelte/src/main.js:
--------------------------------------------------------------------------------
1 | import './app.css';
2 | import App from './App.svelte';
3 |
4 | const app = new App({
5 | target: document.getElementById('app')
6 | });
7 |
8 | export default app;
9 |
--------------------------------------------------------------------------------
/examples/svelte/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// %sveltekit.body%
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/index.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest';
2 |
3 | describe('sum test', () => {
4 | it('adds 1 + 2 to equal 3', () => {
5 | expect(1 + 2).toBe(3);
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/src/internal/Toggle.svelte:
--------------------------------------------------------------------------------
1 |
21 |
22 |
23 | {offLabel}
24 | {onLabel}
31 |
32 |
33 |
85 |
--------------------------------------------------------------------------------
/src/lib/ContextMenu.svelte:
--------------------------------------------------------------------------------
1 |
53 |
54 | {
58 | setTimeout(() => open.set(false), 300);
59 | }}
60 | />
61 |
62 | {#if $open}
63 |
68 |
69 | {#each $contextMenuSchema.nodes as item}
70 | {#if item.node_type == 'action'}
71 | {@const cb = item.callback}
72 |
73 | callbackWrapper(cb, open)}>{item.node_content}
74 |
75 | {:else if item.node_type == 'parent'}
76 |
85 | callbackWrapper(cb, open)}>{item.node_content}
86 |
87 | {:else if item.node_type == 'parent'}
88 |
93 |
($open = true)}
19 | on:mouseleave={() => ($open = false)}
20 | >
21 | {item.node_content}
22 | {#if $open}
23 |
28 | {#each item.children as child}
29 |
30 | {#if child.node_type == 'action'}
31 | {@const cb = child.callback}
32 | callbackWrapper(cb, open)}>{child.node_content}
33 | {/if}
34 |
35 | {/each}
36 |
37 | {/if}
38 |
39 |
40 |
84 |
--------------------------------------------------------------------------------
/src/lib/ContextMenuSchema.ts:
--------------------------------------------------------------------------------
1 | import { writable, readable } from 'svelte/store';
2 | import type { ContextMenuSchema } from './types';
3 | import { pageBack, pageReload, pagePrint } from './utils';
4 |
5 | const defaultSchema: ContextMenuSchema = {
6 | nodes: [
7 | {
8 | node_type: 'parent',
9 | node_content: 'A Parent Node',
10 | node_is_open: false,
11 | children: [
12 | {
13 | node_type: 'action',
14 | node_content: 'Send Message to the Console',
15 | callback: () => console.log('Hello from the Context Menu!')
16 | }
17 | ]
18 | },
19 | {
20 | node_type: 'action',
21 | node_content: 'Fire an Alert!',
22 | callback: () => alert('Clicked the Custom Context Menu!')
23 | }
24 | ]
25 | };
26 |
27 | /*
28 | default browser actions
29 | - [x] back
30 | - [x] reload
31 | - [x] print
32 | - [ ] save as
33 | - [ ] view source
34 | - [wont do] inspect
35 | */
36 | const defaultBrowserSchema: ContextMenuSchema = {
37 | nodes: [
38 | {
39 | node_type: 'parent',
40 | node_content: 'Browser Actions',
41 | node_is_open: false,
42 | children: [
43 | {
44 | node_type: 'action',
45 | node_content: 'Back',
46 | callback: pageBack
47 | },
48 | {
49 | node_type: 'action',
50 | node_content: 'Reload',
51 | callback: pageReload
52 | },
53 | {
54 | node_type: 'action',
55 | node_content: 'Print',
56 | callback: pagePrint
57 | }
58 | /*{
59 | node_type: "action",
60 | node_content: "Save",
61 | callback: pageSave,
62 | },*/
63 | ]
64 | }
65 | ]
66 | };
67 |
68 | export const contextMenuSchema = writable(defaultSchema);
69 | export const browserSchema = readable(defaultBrowserSchema);
70 |
--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | // components
2 | export { default as ContextMenu } from './ContextMenu.svelte';
3 |
4 | // stores
5 | export { contextMenuSchema } from './ContextMenuSchema';
6 |
--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
1 | import type { Writable } from 'svelte/store';
2 |
3 | export type ContextMenuSchema = {
4 | container?: HTMLElement;
5 | nodes: ContextMenuSchemaNode[];
6 | };
7 |
8 | export type ContextMenuSchemaNode = ContextMenuSchemaParentNode | ContextMenuSchemaActionNode;
9 |
10 | export type ContextMenuSchemaParentNode = {
11 | node_type: 'parent';
12 | node_content: string;
13 | node_is_open: boolean;
14 | children: ContextMenuSchemaActionNode[];
15 | };
16 |
17 | export type ContextMenuSchemaActionNode = {
18 | node_type: 'action';
19 | node_content: string;
20 | callback: (openState?: Writable) => void;
21 | };
22 |
23 | // internal
24 | export type CalculateCoordsFromChildArg = {
25 | eventX: number;
26 | eventY: number;
27 | childX: number;
28 | childY: number;
29 | container: HTMLElement;
30 | };
31 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import type { Writable } from 'svelte/store';
2 | import type { CalculateCoordsFromChildArg } from './types';
3 |
4 | /*
5 | * @name callbackWrapper
6 | * @description calls the given callback, passing the openState store as an argument */
7 | export function callbackWrapper(
8 | cb: (openState: Writable) => void,
9 | openState: Writable
10 | ) {
11 | cb(openState);
12 | }
13 |
14 | /**
15 | * @name pageBack
16 | * @description A generic wrapper around history.back() with error handling */
17 | export function pageBack() {
18 | if (!history) throw new Error('svelte-right-click(pageBack): History Object not found.');
19 | history.back();
20 | }
21 |
22 | /**
23 | * @name pageReload
24 | * @description A generic wrapper around location.reload() with error handling */
25 | export function pageReload() {
26 | if (!location) throw new Error('svelte-right-click(pageReload): Location Object not found.');
27 | location.reload();
28 | }
29 |
30 | /**
31 | * @name pagePrint
32 | * @description A generic wrapper around window.print() with error handling */
33 | export function pagePrint(state: Writable) {
34 | window.addEventListener('beforeprint', () => state.set(false));
35 | if (!window || !window.print)
36 | throw new Error('svelte-right-click(pagePrint): window.print Method not found.');
37 | window.print();
38 | }
39 |
40 | /**
41 | * @name pageSave
42 | * @description A progressively enhanced pageSave function */
43 | /*export async function pageSave() {
44 | //await window.showSaveFilePicker()
45 | }*/
46 |
47 | /**
48 | * @name calculateCoordsFromChild
49 | * @description re-calculate offsetX and offsetY based on the given container, not the target
50 | * @param eventX {number} - offsetX value from a mouse event
51 | * @param eventY {number} - offsetY value from a mouse event
52 | * @param childX {number} - child elements X position value
53 | * @param childY {number} - child elements Y position value
54 | * @param container {HTMLElement} - Container element
55 | */
56 | export function calculateCoordsFromChild({
57 | eventX,
58 | eventY,
59 | childX,
60 | childY,
61 | container
62 | }: CalculateCoordsFromChildArg) {
63 | const { left, top } = container.getBoundingClientRect();
64 | const diffX = childX - left;
65 | const diffY = childY - top;
66 | return {
67 | x: eventX + diffX,
68 | y: eventY + diffY
69 | };
70 | }
71 |
--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
17 |
22 |
23 |
68 |
--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Right Click here!
18 |
20 |
2 | a custom context menu for your Svelte application
3 | Read the docs
4 |
5 |
6 |
22 |
--------------------------------------------------------------------------------
/src/routes/Install.svelte:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 |
22 | {selection.cmd}
23 |
24 |
25 |
26 |
27 | {#each managers as m}
28 |
29 | {m.name}
30 |
31 | {/each}
32 |
33 |
34 |
35 |
36 |
37 |
53 |
54 |
55 |
94 |
--------------------------------------------------------------------------------
/src/routes/docs/+layout.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
31 |
32 |
59 |
--------------------------------------------------------------------------------
/src/routes/docs/basic-usage/+page.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | ## Basic Usage
8 |
9 | {#if $lang === "TS"}
10 |
11 | ```svelte
12 |
13 |
39 | ```
40 |
41 | {:else}
42 |
43 | ```svelte
44 |
45 |
70 | ```
71 |
72 | {/if}
73 |
74 |
75 |
--------------------------------------------------------------------------------
/src/routes/docs/browser-builtins/+page.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | ## Getting Started
8 |
9 | To get started with svelte-right-click, first install the package in your project.
10 |
11 | ```shell
12 | npm install --save-dev svelte-right-click
13 | # pnpm add svelte-right-click
14 | # yarn add svelte-right-click
15 | ```
16 |
17 | Initialize the component, create a basic schema, and pass the schema to the `contextMenuSchema` store.
18 |
19 | {#if $lang === "TS"}
20 |
21 | ```svelte
22 |
38 |
39 |
67 |
--------------------------------------------------------------------------------
/src/routes/docs/install/+page.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
2 |
3 | ## Installation
4 |
5 | Install with your favorite package manager
6 |
7 | ```sh
8 | npm install --save-dev svelte-right-click
9 | # pnpm add svelte-right-click
10 | # yarn add svelte-right-click
11 | ```
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/routes/docs/lang.ts:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store';
2 | import type { Writable } from 'svelte/store';
3 |
4 | export const lang: Writable<'JS' | 'TS'> = writable('JS');
5 |
--------------------------------------------------------------------------------
/src/routes/docs/philosophy/+page.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | ## Philosophy
8 |
9 | Although there are existing libaries in the Svelte ecosystem for custom context menus, their mental model often doesn't make sense to me. That's why I'm building svelte-right-click. svelte-right-click is designed to exist at the very top level of your component tree, with it's state being managed by a Svelte store. This design pattern limits the amount of code needed to achieve this functionality.
10 |
11 | Due to this design philosophy, it's recommended to place the `
16 |
--------------------------------------------------------------------------------
/src/routes/docs/props/+page.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | ## Props
8 |
9 | svelte-right-click purposefully has limited props, but there are a few for global configuration.
10 |
11 | | Name | Description | Type | Default |
12 | | -------------- | --------------------------------------------------------------------- | ------------------- | ------- |
13 | | open | Toggle the context menus open state from the parent componenet | `Writable` | false |
14 | | renderDefaults | Render the included browser default functions inside the context menu | boolean | true |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/routes/docs/schemas/+page.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | ## Schemas
8 |
9 | svelte-right-click is driven by a schema that defines the nodes to render inside a context menu including their text content, callback functions to run on click, and any child nodes.
10 |
11 | ```typescript
12 | type ContextMenuSchema = {
13 | container?: HTMLElement;
14 | nodes: ContextMenuSchemaNode[];
15 | };
16 | ```
17 |
18 | ### Container
19 |
20 | `container` is a an optional field in a schema, that "contains" the context menu within a given element, rather than globally on the page. Simply bind the element you want to enable ContextMenu within, then use the ref in your schema.
21 |
22 | {#if $lang == "TS"}
23 |
24 | ```svelte
25 |
38 |
39 |
40 |
41 |
42 | ```
43 |
44 | {:else}
45 |
46 | ```svelte
47 |
59 |
60 |
61 |
62 |
63 | ```
64 |
65 | {/if}
66 |
67 | ### Nodes
68 |
69 | `nodes` is an array field in a schema that represents the structure of the context menu. This arrays items can be one of two types: `ContextMenuParentNode` (parent node) & `ContextMenuSchemaActionNode` (action node).
70 |
71 | #### Parent Nodes
72 |
73 | Parent nodes define a sub tree of the context menu.
74 |
75 | ```typescript
76 | type ContextMenuSchemaParentNode = {
77 | node_type: 'parent';
78 | node_content: string; // text to display inside the node
79 | node_is_open: boolean; // open/close state
80 | children: ContextMenuSchemaActionNode[];
81 | };
82 | ```
83 |
84 | > Currently, parent nodes can not contain other parent nodes. This is to ensure the best UX for end users.
85 |
86 | #### Action Nodes
87 |
88 | Action nodes run a callback function provided in the schema. The callback recieves a Svelte store as an argument to allow for updating the context menus open state within the callback function.
89 |
90 | ```typescript
91 | type ContextMenuSchemaActionNode = {
92 | node_type: 'action';
93 | node_content: string;
94 | callback: (openState?: Writable) => void;
95 | };
96 | ```
97 |
98 |
99 |
--------------------------------------------------------------------------------
/src/routes/docs/style/+page.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
2 |
3 | ## Styling
4 |
5 | Override the context menu's default styles using Svelte Style Props. Available props include...
6 |
7 | | Name | Description | Default |
8 | | ----------------------- | --------------------------------------- | ---------------------- |
9 | | --background-color | Parent elements background color | #FFFFFF |
10 | | --border | Parent elements border | 1px solid lightgrey |
11 | | --border-radius | Parent elements border radius | 5px |
12 | | --box-shadow | Parent elements box shadow | 0px 0px 15px #163a6726 |
13 | | --color | Font color for all elements | #000000 |
14 | | --font-family | Font family for all elements | sans-serif |
15 | | --font-size | Font size for all elements | 1rem |
16 | | --node-background-hover | Node elements background color on hover | lightgray |
17 | | --node-border-radius | Node elements border radius | 3px |
18 | | --node-padding | Node elements padding | 4px |
19 | | --padding | Parent elements padding | 5px |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/static/base.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | html {
10 | max-width: 100vw;
11 | font-family: 'DM Mono', monospace;
12 | }
13 |
14 | body {
15 | max-width: 100vw;
16 | min-height: 100vh;
17 | overflow-x: hidden;
18 | font-size: 16px;
19 | background: var(--black);
20 | padding: 2.5rem;
21 | display: flex;
22 |
23 | --ochre: hsla(34, 79%, 42%, 1);
24 | --earth-yellow: hsla(34, 79%, 68%, 1);
25 | --seashell: hsla(12, 48%, 94%, 1);
26 | --jet: hsla(15, 3%, 26%, 1);
27 | --raisin-black: hsla(240, 9%, 13%, 1);
28 |
29 | --white: var(--seashell);
30 | --black: var(--raisin-black);
31 | --grey: var(--jet);
32 | --gray: var(--grey);
33 | --yellow: var(--ochre);
34 | --light-yellow: var(--earth-yellow);
35 |
36 | --blue: rgba(0, 95, 227, 1);
37 | --light-blue: #7d9dff;
38 |
39 | /* Dynamic Colors */
40 | --text-primary: var(--white);
41 | --text-secondary: var(--blue);
42 | }
43 |
44 | body > div {
45 | min-height: 100%;
46 | width: 100%;
47 | }
48 |
49 | h1,
50 | h2,
51 | h3,
52 | h4,
53 | h5,
54 | h6,
55 | p,
56 | span {
57 | color: var(--text-primary);
58 | }
59 |
60 | h1,
61 | h2,
62 | h3,
63 | h4,
64 | h5,
65 | h6 {
66 | margin-bottom: 20px;
67 | }
68 |
69 | p:not(blockquote p) {
70 | font-size: 1.1rem;
71 | margin-bottom: 15px;
72 | }
73 |
74 | blockquote {
75 | font-size: 1.2rem;
76 | border-left: 2px solid var(--yellow);
77 | padding-left: 15px;
78 | margin-bottom: 20px;
79 | }
80 |
81 | p code {
82 | background-color: var(--white);
83 | color: var(--black);
84 | padding: 3px;
85 | border-radius: 5px;
86 | white-space: nowrap;
87 | }
88 |
89 | pre,
90 | code {
91 | font-size: 13px;
92 | }
93 |
94 | :not(pre) > code[class*='language-'],
95 | pre[class*='language-'] {
96 | border-radius: 8px;
97 | }
98 |
99 | code span {
100 | color: unset;
101 | }
102 |
103 | .secondary {
104 | color: var(--text-secondary);
105 | }
106 |
107 | section {
108 | margin-bottom: 30px;
109 | }
110 |
111 | section > * {
112 | margin-bottom: 20px;
113 | }
114 |
115 | a:not(.button) {
116 | color: var(--light-yellow);
117 | }
118 |
119 | a:hover {
120 | text-decoration: underline;
121 | }
122 |
123 | a:visited:not(.button) {
124 | color: var(--light-yellow);
125 | }
126 |
127 | .button {
128 | background: var(--light-yellow);
129 | padding: 15px;
130 | border-radius: 8px;
131 | color: var(--black);
132 | text-decoration: none;
133 | }
134 |
135 | .button:hover {
136 | text-decoration: underline;
137 | }
138 |
139 | table {
140 | --table-border: 2px solid var(--light-yellow);
141 | border-collapse: collapse;
142 | margin-bottom: 1rem;
143 | color: var(--light-yellow);
144 | border: var(--table-border);
145 | }
146 |
147 | thead,
148 | tr {
149 | border-bottom: var(--table-border);
150 | }
151 |
152 | td,
153 | th {
154 | padding: 10px;
155 | border-right: var(--table-border);
156 | }
157 |
158 | th {
159 | font-size: 1.2rem;
160 | }
161 |
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stordahl/svelte-right-click/948098c1965849a09375fa5f4ece4f99c73390c5/static/favicon.png
--------------------------------------------------------------------------------
/static/gruvbox.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Gruvbox light theme
3 | *
4 | * Based on Gruvbox: https://github.com/morhetz/gruvbox
5 | * Adapted from PrismJS gruvbox-dark theme: https://github.com/schnerring/prism-themes/blob/master/themes/prism-gruvbox-dark.css
6 | *
7 | * @author Michael Schnerring (https://schnerring.net)
8 | * @version 1.0
9 | */
10 |
11 | code[class*='language-'],
12 | pre[class*='language-'] {
13 | color: #3c3836; /* fg1 / fg */
14 | font-family: Consolas, Monaco, 'Andale Mono', monospace;
15 | direction: ltr;
16 | text-align: left;
17 | white-space: pre;
18 | word-spacing: normal;
19 | word-break: normal;
20 | line-height: 1.5;
21 | font-size: 1em;
22 |
23 | -moz-tab-size: 4;
24 | -o-tab-size: 4;
25 | tab-size: 4;
26 |
27 | -webkit-hyphens: none;
28 | -moz-hyphens: none;
29 | -ms-hyphens: none;
30 | hyphens: none;
31 | }
32 |
33 | pre[class*='language-']::-moz-selection,
34 | pre[class*='language-'] ::-moz-selection,
35 | code[class*='language-']::-moz-selection,
36 | code[class*='language-'] ::-moz-selection {
37 | color: #282828; /* fg0 */
38 | background: #a89984; /* bg4 */
39 | }
40 |
41 | pre[class*='language-']::selection,
42 | pre[class*='language-'] ::selection,
43 | code[class*='language-']::selection,
44 | code[class*='language-'] ::selection {
45 | color: #282828; /* fg0 */
46 | background: #a89984; /* bg4 */
47 | }
48 |
49 | /* Code blocks */
50 | pre[class*='language-'] {
51 | padding: 1em;
52 | overflow: auto;
53 | }
54 |
55 | :not(pre) > code[class*='language-'],
56 | pre[class*='language-'] {
57 | background: #f9f5d7; /* bg0_h */
58 | }
59 |
60 | /* Inline code */
61 | :not(pre) > code[class*='language-'] {
62 | padding: 0.1em;
63 | border-radius: 0.3em;
64 | }
65 |
66 | .token.comment,
67 | .token.prolog,
68 | .token.cdata {
69 | color: #7c6f64; /* fg4 / gray1 */
70 | }
71 |
72 | .token.delimiter,
73 | .token.boolean,
74 | .token.keyword,
75 | .token.selector,
76 | .token.important,
77 | .token.atrule {
78 | color: #9d0006; /* red2 */
79 | }
80 |
81 | .token.operator,
82 | .token.punctuation,
83 | .token.attr-name {
84 | color: #7c6f64; /* fg4 / gray1 */
85 | }
86 |
87 | .token.tag,
88 | .token.tag .punctuation,
89 | .token.doctype,
90 | .token.builtin {
91 | color: #b57614; /* yellow2 */
92 | }
93 |
94 | .token.entity,
95 | .token.number,
96 | .token.symbol {
97 | color: #8f3f71; /* purple2 */
98 | }
99 |
100 | .token.property,
101 | .token.constant,
102 | .token.variable {
103 | color: #9d0006; /* red2 */
104 | }
105 |
106 | .token.string,
107 | .token.char {
108 | color: #797403; /* green2 */
109 | }
110 |
111 | .token.attr-value,
112 | .token.attr-value .punctuation {
113 | color: #7c6f64; /* fg4 / gray1 */
114 | }
115 |
116 | .token.url {
117 | color: #797403; /* green2 */
118 | text-decoration: underline;
119 | }
120 |
121 | .token.function {
122 | color: #b57614; /* yellow2 */
123 | }
124 |
125 | .token.regex {
126 | background: #797403; /* green2 */
127 | }
128 |
129 | .token.bold {
130 | font-weight: bold;
131 | }
132 |
133 | .token.italic {
134 | font-style: italic;
135 | }
136 |
137 | .token.inserted {
138 | background: #7c6f64; /* fg4 / gray1 */
139 | }
140 |
141 | .token.deleted {
142 | background: #9d0006; /* red2 */
143 | }
144 |
--------------------------------------------------------------------------------
/static/images/github.svg:
--------------------------------------------------------------------------------
1 | 
8 | 
11 |