@isoftdata/svelte-context-menu 0.0.4 → 1.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/README.md +3 -2
- package/dist/ContextMenu.svelte +13 -15
- package/dist/ContextMenu.svelte.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,8 +9,9 @@ npm i @isoftdata/svelte-context-menu
|
|
|
9
9
|
## Props
|
|
10
10
|
| Name | Type | Description | Default Value |
|
|
11
11
|
| --- | --- | --- | --- |
|
|
12
|
-
|
|
|
13
|
-
|
|
|
12
|
+
| id | `string` | The id of the context menu element. | "menu" |
|
|
13
|
+
| menuItemClickCloses | `boolean` | Whether clicking a menu item will close the menu. | `true` |
|
|
14
|
+
| placement | `string` | The placement of the context menu relative to the reference element. | "bottom-start" |
|
|
14
15
|
|
|
15
16
|
## Usage
|
|
16
17
|
|
package/dist/ContextMenu.svelte
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script>import { onMount } from "svelte";
|
|
2
2
|
import { computePosition, flip } from "@floating-ui/dom";
|
|
3
3
|
export let id = "menu";
|
|
4
|
+
export let menuItemClickCloses = true;
|
|
4
5
|
export let placement = "bottom-start";
|
|
5
6
|
let show = false;
|
|
6
7
|
let positionLeft = 0;
|
|
@@ -8,14 +9,6 @@ let positionTop = 0;
|
|
|
8
9
|
let strategy = "absolute";
|
|
9
10
|
let mounted = false;
|
|
10
11
|
let menu;
|
|
11
|
-
function handleMenuClick(event) {
|
|
12
|
-
if (id && mounted) {
|
|
13
|
-
const element = document.getElementById(id);
|
|
14
|
-
if (element && !element.contains(event.target)) {
|
|
15
|
-
show = false;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
12
|
export async function open(event, targetId = "") {
|
|
20
13
|
if (menu) {
|
|
21
14
|
show = true;
|
|
@@ -47,9 +40,18 @@ export async function open(event, targetId = "") {
|
|
|
47
40
|
export function close() {
|
|
48
41
|
show = false;
|
|
49
42
|
}
|
|
43
|
+
function menuKeydownHandler(event) {
|
|
44
|
+
const target = event.target;
|
|
45
|
+
console.log(event.key, event.currentTarget, event.target);
|
|
46
|
+
if ((event.key === " " || event.key === "Enter") && target.tagName === "BUTTON") {
|
|
47
|
+
target.click();
|
|
48
|
+
} else if (target === event.currentTarget && event.key === "Tab") {
|
|
49
|
+
target.querySelector("button")?.focus();
|
|
50
|
+
}
|
|
51
|
+
}
|
|
50
52
|
</script>
|
|
51
53
|
|
|
52
|
-
<svelte:window on:
|
|
54
|
+
<svelte:window on:keydown={event => event.key === "Escape" && (show = false)} />
|
|
53
55
|
|
|
54
56
|
<div
|
|
55
57
|
{id}
|
|
@@ -58,12 +60,8 @@ export function close() {
|
|
|
58
60
|
style="position: {strategy}; left:{positionLeft}px; top:{positionTop}px;"
|
|
59
61
|
role="menu"
|
|
60
62
|
tabindex="0"
|
|
61
|
-
on:click|stopPropagation={() => (show = false)}
|
|
62
|
-
on:keydown|preventDefault|stopPropagation={
|
|
63
|
-
if (e.key === "Escape") {
|
|
64
|
-
show = false
|
|
65
|
-
}
|
|
66
|
-
}}
|
|
63
|
+
on:click|stopPropagation={() => menuItemClickCloses && (show = false)}
|
|
64
|
+
on:keydown|preventDefault|stopPropagation={menuKeydownHandler}
|
|
67
65
|
bind:this={menu}
|
|
68
66
|
>
|
|
69
67
|
<slot />
|
|
@@ -3,6 +3,7 @@ import { type Placement } from "@floating-ui/dom";
|
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
id?: string | undefined;
|
|
6
|
+
menuItemClickCloses?: boolean | undefined;
|
|
6
7
|
placement?: Placement | undefined;
|
|
7
8
|
open?: ((event: MouseEvent, targetId?: string) => Promise<void>) | undefined;
|
|
8
9
|
close?: (() => void) | undefined;
|