Skip to content

Commit bfc9d39

Browse files
marta-komarta-ko
committed
v2.0.1
1 parent 41079e4 commit bfc9d39

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+2919
-1259
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ package-lock.json
77
*.log
88
.vscode
99
.idea
10+
.env.local

‎.prettierrc

+14-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,21 @@
77
"bracketSpacing": true,
88
"arrowParens": "avoid",
99
"svelteSortOrder": "options-scripts-markup-styles",
10-
"vueIndentScriptAndStyle": true,
1110
"plugins": [
1211
"prettier-plugin-svelte"
1312
],
14-
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
13+
"overrides": [
14+
{
15+
"files": "*.svelte",
16+
"options": {
17+
"parser": "svelte"
18+
}
19+
},
20+
{
21+
"files": "*.ts",
22+
"options": {
23+
"parser": "typescript"
24+
}
25+
}
26+
]
1527
}

‎eslint.config.mjs

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import eslintConfigPrettier from "eslint-config-prettier";
2+
import eslintPluginSvelte from 'eslint-plugin-svelte';
3+
import tsLint from "typescript-eslint";
4+
import jsLint from "@eslint/js";
5+
import vitest from "eslint-plugin-vitest";
6+
import globals from "globals";
7+
8+
export default [{
9+
ignores: ["node_modules/", "dist/", "build/", "coverage/", "public/", "svelte/vite.config.js"],
10+
},
11+
jsLint.configs.recommended,
12+
...tsLint.configs.recommended,
13+
...eslintPluginSvelte.configs['flat/recommended'],
14+
eslintConfigPrettier,
15+
vitest.configs.recommended,
16+
...eslintPluginSvelte.configs["flat/prettier"],
17+
{
18+
rules: {
19+
"no-bitwise": ["error"],
20+
// there is a misconception between esLint and svelte compiler
21+
// rules that are necessary for compiler, throw errors in esLint
22+
// need to be revised with next version of toolchain
23+
"svelte/no-unused-svelte-ignore": "off",
24+
"svelte/valid-compile": "off",
25+
// Ignore unused vars starting with _
26+
// "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
27+
// // Turn off the need for explicit function return types
28+
// "@typescript-eslint/explicit-function-return-type": "off",
29+
// // Warn when "any" type is used
30+
"@typescript-eslint/no-explicit-any": "off",
31+
// // Warn on @ts-ignore comments
32+
// "@typescript-eslint/ban-ts-comment": "warn",
33+
// // Public methods should have return types
34+
// "@typescript-eslint/explicit-module-boundary-types": "error",
35+
},
36+
},
37+
{
38+
languageOptions: {
39+
globals: { ...globals.browser, ...globals.es2022 },
40+
ecmaVersion: 2022,
41+
sourceType: "module",
42+
parserOptions: {
43+
extraFileExtensions: [".svelte"],
44+
warnOnUnsupportedTypeScriptVersion: false,
45+
tsconfigRootDir: import.meta.dirname,
46+
},
47+
},
48+
49+
},
50+
{
51+
52+
files: ["**/*.svelte"],
53+
rules: {
54+
"@typescript-eslint/no-unused-expressions": "off"
55+
}
56+
}
57+
];

‎license.txt

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2024 XB Software Sp. z o.o.
3+
Copyright (c) 2023 XB Software Sp. z o.o.
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21-
SOFTWARE.
21+
SOFTWARE.

‎package.json

+31-19
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,50 @@
55
"svelte"
66
],
77
"scripts": {
8-
"prepare": "husky",
9-
"build": "cd svelte && yarn build",
108
"build:deps": "true",
9+
"build:site": "cd site && yarn build",
1110
"build:tests": "cd svelte && yarn build:tests",
12-
"start": "cd svelte && yarn start",
11+
"build": "cd svelte && yarn build",
12+
"lint": "yarn eslint ./svelte/src ./svelte/demos",
13+
"prepare": "husky",
14+
"start:demos": "cd svelte && yarn start",
15+
"start:site": "cd site && yarn start",
1316
"start:tests": "cd svelte && yarn start:tests",
14-
"lint": "yarn eslint ./svelte/src ./svelte/demos --ext .svelte,.js",
15-
"test": "true",
16-
"test:cypress": "cd svelte && yarn test:cypress"
17+
"start": "cd svelte && yarn start",
18+
"test:cypress": "cd svelte && yarn test:cypress",
19+
"test": "true"
1720
},
1821
"devDependencies": {
19-
"@sveltejs/vite-plugin-svelte": "3.0.2",
20-
"autoprefixer": "10.4.13",
22+
"@sveltejs/vite-plugin-svelte": "4.0.0",
23+
"@vitest/coverage-v8": "1.6.0",
24+
"wx-vite-tools": "1.0.5",
25+
"autoprefixer": "10.4.20",
2126
"cypress": "13.6.4",
22-
"eslint": "8.33.0",
27+
"eslint": "9.14.0",
2328
"eslint-config-prettier": "9.1.0",
24-
"eslint-plugin-cypress": "2.12.1",
25-
"eslint-plugin-svelte3": "4.0.0",
26-
"husky": "9.0.10",
27-
"lint-staged": "15.2.2",
29+
"eslint-plugin-cypress": "4.1.0",
30+
"eslint-plugin-svelte": "2.46.0",
31+
"eslint-plugin-vitest": "0.5.4",
32+
"husky": "9.1.6",
33+
"lint-staged": "15.2.10",
2834
"npm-run-all": "4.1.5",
29-
"postcss": "8.4.35",
30-
"prettier": "3.2.5",
31-
"prettier-plugin-svelte": "3.2.0",
35+
"postcss": "8.4.47",
36+
"prettier": "3.3.3",
37+
"prettier-plugin-svelte": "3.2.7",
3238
"rollup-plugin-visualizer": "5.12.0",
33-
"svelte": "4.2.9",
39+
"shx": "0.3.4",
40+
"svelte": "5.1.9",
3441
"svelte-spa-router": "4.0.1",
35-
"vite": "5.1.1"
42+
"typescript-eslint": "8.13.0",
43+
"typescript": "5.6.3",
44+
"vite-plugin-conditional-compile": "1.4.5",
45+
"vite-plugin-dts": "3.7.2",
46+
"vite": "5.4.10",
47+
"vitest": "1.5.0"
3648
},
3749
"lint-staged": {
3850
"*.{ts,js,svelte}": [
39-
"eslint --fix",
51+
"eslint --fix --no-warn-ignored",
4052
"prettier --write"
4153
],
4254
"*.{css,md,json}": [

‎readme.md

+5-14
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,19 @@
88

99
</div>
1010

11-
<div align="center">
12-
13-
[Documentation](https://docs.svar.dev/svelte/core/category/menu) • [Demos](https://docs.svar.dev/svelte/core/samples-menu/#/bar/willow)
14-
15-
</div>
16-
17-
18-
SVAR Menu is a ready to use Svelte component for creating context and popup menus. Easily customize each menu item with text, icons, and sub-items, and control the menu's position relative to its parent element.
11+
SVAR Menu is a ready-to-use Svelte component for creating context and popup menus. Easily customize each menu item with text, icons, and sub-items, and control the menu's position relative to its parent element.
1912

20-
### Versions for Svelte 4 and 5
13+
### Svelte 4 and Svelte 5 versions
2114

22-
There are two versions of the Menu component:
23-
- version **1.x** was designed to work with Svelte 4
24-
- version **2.x** is created for Svelte 5 (please note that this version is in beta and may contain some instabilities)
15+
There are two versions of the library: the 1.x version, designed to work with Svelte 4, and the 2.x version, created for Svelte 5. Please note that the 2.x version is in beta and may contain some instabilities.
2516

26-
To use SVAR Menu v.2.0 beta for Svelte 5, install it as follows:
17+
To use the SVAR Menu beta for Svelte 5, install it as follows:
2718

2819
```
2920
npm install wx-svelte-menu
3021
```
3122

32-
To use SVAR Menu for Svelte 4:
23+
To use the SVAR Menu for Svelte 4:
3324

3425
```
3526
npm install [email protected]

‎svelte/demos/cases/ActionHandler.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
55
const options = getOptions();
66
7-
let message = "";
7+
let message = $state("");
88
function clicked(ev) {
9-
const { context, action } = ev.detail;
9+
const { context, action } = ev;
1010
message = action
1111
? `${action.id} for ${context.type} ${context.id}`
1212
: "closed";
@@ -47,7 +47,7 @@
4747
{options}
4848
resolver={getItem}
4949
filter={filterMenu}
50-
on:click={clicked}
50+
onclick={clicked}
5151
>
5252
{#each items as item (item.id)}
5353
<div

‎svelte/demos/cases/ActionMenu.svelte

+7-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import { getProjects } from "../data";
55
66
const options = getProjects();
7-
let active = ["a", "b", "c", "d"];
7+
let active = $state(["a", "b", "c", "d"]);
88
const byId = id => options.find(a => a.id === id);
99
1010
function filterMenu(v, item) {
@@ -17,11 +17,11 @@
1717
}
1818
1919
function clicked(ev) {
20-
const { context, action } = ev.detail;
20+
const { context, action } = ev;
2121
if (action) active[context] = action.id;
2222
}
2323
24-
let showMenu;
24+
let menu = $state();
2525
</script>
2626

2727
<div class="demo-box">
@@ -30,12 +30,13 @@
3030
<ActionMenu
3131
{options}
3232
filter={filterMenu}
33-
on:click={clicked}
34-
bind:handler={showMenu}
33+
onclick={clicked}
34+
bind:this={menu}
3535
/>
3636
{#each active as item, i}
37-
<Button click={ev => showMenu(ev, i)} value={active[i]}>
37+
<Button onclick={ev => menu.show(ev, i)} value={active[i]}>
3838
{byId(item).text}
3939
</Button>
40+
&nbsp;
4041
{/each}
4142
</div>

‎svelte/demos/cases/BasicInit.svelte

+13-12
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
77
const options = getOptions();
88
9-
let menu1 = null,
10-
menu2 = null,
11-
menu3 = null;
9+
let menu1 = $state(null),
10+
menu2 = $state(null),
11+
menu3 = $state(null);
1212
13-
let message = "";
13+
let message = $state("");
1414
function clicked(ev) {
15-
const action = ev.detail.action;
15+
const action = ev.action;
1616
message = action ? `clicked on ${action.id}` : "closed";
1717
menu1 = menu2 = menu3 = null;
1818
}
@@ -22,30 +22,31 @@
2222

2323
<div class="demo-box">
2424
<h3>Bottom menu</h3>
25-
<Button type="primary" click={ev => (menu1 = ev.target)}>Click me</Button>
25+
<Button type="primary" onclick={ev => (menu1 = ev.target)}>Click me</Button>
2626
{#if menu1}
27-
<Menu {options} parent={menu1} on:click={clicked} />
27+
<Menu {options} parent={menu1} onclick={clicked} />
2828
{/if}
2929
</div>
3030

3131
<div class="demo-box">
3232
<h3>Right-side menu</h3>
33-
<Button type="primary" click={ev => (menu2 = ev.target)}>Click me</Button>
33+
<Button type="primary" onclick={ev => (menu2 = ev.target)}>Click me</Button>
3434
{#if menu2}
35-
<Menu {options} parent={menu2} on:click={clicked} at={"right"} />
35+
<Menu {options} parent={menu2} onclick={clicked} at={"right"} />
3636
{/if}
3737
</div>
3838

3939
<div class="demo-box">
4040
<h3>Menu at cursor</h3>
41-
<!-- svelte-ignore a11y-click-events-have-key-events -->
42-
<div class="box" on:click={ev => (menu3 = ev)}>Click me</div>
41+
<!-- svelte-ignore a11y_click_events_have_key_events -->
42+
<!-- svelte-ignore a11y_no_static_element_interactions -->
43+
<div class="box" onclick={ev => (menu3 = ev)}>Click me</div>
4344
{#if menu3}
4445
<Menu
4546
{options}
4647
left={menu3.clientX + 5}
4748
top={menu3.clientY + 5}
48-
on:click={clicked}
49+
onclick={clicked}
4950
at={"right"}
5051
/>
5152
{/if}

‎svelte/demos/cases/Context.svelte

+9-5
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
55
const options = getOptions();
66
7-
let message = "";
7+
let message = $state("");
88
function clicked(ev) {
9-
const action = ev.detail.action;
9+
const action = ev.action;
1010
message = action ? `clicked on ${action.id}` : "closed";
1111
}
1212
</script>
@@ -15,18 +15,22 @@
1515

1616
<div class="demo-box">
1717
<h3>Right click menu</h3>
18-
<ContextMenu {options} on:click={clicked} at="point">
18+
<ContextMenu {options} onclick={clicked} at="point">
1919
<div class="box">Click me (menu at cursor)</div>
2020
</ContextMenu>
2121
</div>
2222

2323
<div class="demo-box">
2424
<h3>Nested context menus</h3>
25-
<ContextMenu {options} on:click={clicked} at="point">
25+
<ContextMenu {options} onclick={clicked} at="point">
2626
<div class="double-box" style="padding:20px; background: #ddd">
2727
Click me (outer menu)
2828
<br />
29-
<ContextMenu options={[{ id: 1, text: "inner menu" }]} at="right">
29+
<ContextMenu
30+
options={[{ id: "inner", text: "inner menu" }]}
31+
onclick={clicked}
32+
at="right"
33+
>
3034
<span
3135
style="display: inline-block; width: 150px; padding:10px; background: #fff;"
3236
>(inner menu)</span

‎svelte/demos/cases/ContextData.svelte

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
55
const options = getOptions();
66
7-
let message = "";
7+
let message = $state("");
88
function clicked(ev) {
9-
const { context, action } = ev.detail;
9+
const { context, action } = ev;
1010
message = action
11-
? `${action.id} for ${context.type} ${context.id}`
11+
? `${action.id} for ${context.type || "task"} ${context.id}`
1212
: "closed";
1313
}
1414
@@ -33,7 +33,7 @@
3333
<div class="demo-box">
3434
<h3>Context menu can be limited to specific HTML elements</h3>
3535
<p>Some items are disabled</p>
36-
<ContextMenu {options} at="point" resolver={getItem} on:click={clicked}>
36+
<ContextMenu {options} at="point" resolver={getItem} onclick={clicked}>
3737
{#each items as item (item.id)}
3838
<div
3939
data-context-id={item.id}

0 commit comments

Comments
 (0)