@isoftdata/svelte-context-menu 2.0.4 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ContextMenu.svelte +29 -19
- package/package.json +6 -8
package/dist/ContextMenu.svelte
CHANGED
|
@@ -34,6 +34,8 @@
|
|
|
34
34
|
event.stopPropagation()
|
|
35
35
|
if (menu) {
|
|
36
36
|
show = true
|
|
37
|
+
menu.showPopover()
|
|
38
|
+
|
|
37
39
|
const virtualEl = {
|
|
38
40
|
getBoundingClientRect() {
|
|
39
41
|
return {
|
|
@@ -56,6 +58,8 @@
|
|
|
56
58
|
positionTop = pos.y
|
|
57
59
|
strategy = pos.strategy
|
|
58
60
|
}
|
|
61
|
+
// Focus menu so that the next tab will focus a DropdownItem
|
|
62
|
+
menu.focus()
|
|
59
63
|
openCb?.()
|
|
60
64
|
} else {
|
|
61
65
|
show = false
|
|
@@ -64,39 +68,45 @@
|
|
|
64
68
|
|
|
65
69
|
export function close() {
|
|
66
70
|
show = false
|
|
71
|
+
menu?.hidePopover()
|
|
67
72
|
closeCb?.()
|
|
68
73
|
}
|
|
69
|
-
|
|
70
|
-
function menuKeydownHandler(event: KeyboardEvent) {
|
|
71
|
-
event.stopPropagation()
|
|
72
|
-
const target = event.target as HTMLElement
|
|
73
|
-
console.log(event.key, event.currentTarget, event.target)
|
|
74
|
-
if ((event.key === ' ' || event.key === 'Enter') && target.tagName === 'BUTTON') {
|
|
75
|
-
target.click()
|
|
76
|
-
} else if (target === event.currentTarget && event.key === 'Tab') {
|
|
77
|
-
target.querySelector('button')?.focus()
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
74
|
</script>
|
|
81
75
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
76
|
+
<!-- svelte-ignore a11y_interactive_supports_focus -->
|
|
77
|
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
78
|
+
<!--
|
|
79
|
+
The click handler on this div is just to capture clicks from child buttons
|
|
80
|
+
so I don't think we have to handle these svelte a11y warnings here
|
|
81
|
+
-->
|
|
87
82
|
<div
|
|
88
83
|
{id}
|
|
84
|
+
popover="auto"
|
|
89
85
|
class="dropdown-menu shadow rounded"
|
|
90
86
|
class:show
|
|
91
87
|
style="position: {strategy}; left:{positionLeft}px; top:{positionTop}px;"
|
|
92
88
|
role="menu"
|
|
93
|
-
tabindex="
|
|
89
|
+
tabindex="-1"
|
|
94
90
|
onclick={event => {
|
|
95
91
|
event.stopPropagation()
|
|
96
|
-
|
|
92
|
+
if (menuItemClickCloses) {
|
|
93
|
+
close()
|
|
94
|
+
}
|
|
95
|
+
}}
|
|
96
|
+
ontoggle={event => {
|
|
97
|
+
// Update state when the popover is closed automatically
|
|
98
|
+
if (show && event.newState === 'closed') {
|
|
99
|
+
close()
|
|
100
|
+
}
|
|
97
101
|
}}
|
|
98
|
-
onkeydown={event => menuKeydownHandler(event)}
|
|
99
102
|
bind:this={menu}
|
|
100
103
|
>
|
|
101
104
|
{@render children?.()}
|
|
102
105
|
</div>
|
|
106
|
+
|
|
107
|
+
<style>
|
|
108
|
+
/* This is technically default, but I need to specify it here to override BS's styles */
|
|
109
|
+
[popover]:not(:popover-open):not(dialog[open]) {
|
|
110
|
+
display: none;
|
|
111
|
+
}
|
|
112
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@isoftdata/svelte-context-menu",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"exports": {
|
|
5
5
|
".": {
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -16,7 +16,9 @@
|
|
|
16
16
|
"svelte": "^5.23.2"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
-
"@isoftdata/
|
|
19
|
+
"@isoftdata/checkbox": "^4.1.1",
|
|
20
|
+
"@isoftdata/eslint-config-svelte": "^1.1.0",
|
|
21
|
+
"@isoftdata/prettier-config": "^2.0.9",
|
|
20
22
|
"@isoftdata/svelte-bootstrap-version-switcher": "^1.1.2",
|
|
21
23
|
"@isoftdata/svelte-button": "^2.1.1",
|
|
22
24
|
"@isoftdata/svelte-checkbox": "^2.1.1",
|
|
@@ -24,11 +26,7 @@
|
|
|
24
26
|
"@sveltejs/kit": "^2.5.27",
|
|
25
27
|
"@sveltejs/package": "^2.3.7",
|
|
26
28
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
27
|
-
"
|
|
28
|
-
"@typescript-eslint/parser": "^6.0.0",
|
|
29
|
-
"eslint": "^8.28.0",
|
|
30
|
-
"eslint-config-prettier": "^8.5.0",
|
|
31
|
-
"eslint-plugin-svelte": "^2.45.1",
|
|
29
|
+
"eslint": "^10.3.0",
|
|
32
30
|
"prettier": "^3.1.0",
|
|
33
31
|
"prettier-plugin-svelte": "^3.2.6",
|
|
34
32
|
"publint": "^0.1.9",
|
|
@@ -46,7 +44,7 @@
|
|
|
46
44
|
"@floating-ui/dom": "^1.5.3",
|
|
47
45
|
"@isoftdata/svelte-icon": "^2.0.4",
|
|
48
46
|
"@isoftdata/utility-bootstrap": "^2.2.1",
|
|
49
|
-
"svelte": "^5.
|
|
47
|
+
"svelte": "^5.55.5"
|
|
50
48
|
},
|
|
51
49
|
"engines": {
|
|
52
50
|
"pnpm": "10.x"
|