@isoftdata/svelte-context-menu 1.0.0 → 1.2.0

package/README.md

@@ -1,51 +1,57 @@
-# Svelte ContextMenu
-
-## Install
-
-```bash
-npm i @isoftdata/svelte-context-menu
-```
-
-## Props
-| Name | Type | Description | Default Value |
-| --- | --- | --- | --- |
-| `id` | string | The id of the context menu element. | "menu" |
-| `placement` | string | The placement of the context menu relative to the reference element. | "bottom-start" |
-
-## Usage
-
-The main way you'll interact with this component is through calling the methods below. To access these methods on the component instance, you will have to use the `bind:this` directive on the `ContextMenu` in your template, and assign it to a variable, which you can then call the methods on. See Example for more details.
-
-### Methods
-
-* open - Opens the context menu. Arguments below.
-  * `event` - the mouse event
-  * `targetId` (optional) the id of an element. If supplied, the menu will be positioned relative to this element. Otherwise, it will be positioned relative to the cursor.
-* close - Closes the context menu. Normally you'd close the context menu by clicking on an item within it, but this is also an option.
-### Example
-
-```html
-<script lang="ts">
-	import ContextMenu from '@isoftdata/svelte-context-menu'
-
-	let cm: ContextMenu
-</script>
-
-<button
-	id="target"
-	class="btn btn-primary btn-block"
-	on:contextmenu|preventDefault={e => cm.open(e, "target")}
->
-	Right Click to Open Menu
-</button>
-<ContextMenu bind:this={cm}>
-	<button
-		class="dropdown-item"
-		type="button"
-		on:click={() => cmClicks++}
-		>Click Me!
-	</button>
-	<div class="downdown-divider" />
-	<h6 class="dropdown-header">Clicked {cmClicks} time(s)</h6>
-</ContextMenu>
-```
+# Svelte ContextMenu
+
+## Install
+
+```bash
+npm i @isoftdata/svelte-context-menu
+```
+
+## Props
+| Name | Type | Description | Default Value |
+| --- | --- | --- | --- |
+| id | `string` | The id of the context menu element. | "menu" |
+| menuItemClickCloses | `boolean` | Whether clicking a menu item will close the menu. | `true` |
+| placement | `string` | The placement of the context menu relative to the reference element. | "bottom-start" |
+
+## Usage
+
+The main way you'll interact with this component is through calling the methods below. To access these methods on the component instance, you will have to use the `bind:this` directive on the `ContextMenu` in your template, and assign it to a variable, which you can then call the methods on. See Example for more details.
+
+### Methods
+
+* open - Opens the context menu. Arguments below.
+  * `event` - the mouse event
+  * `targetId` (optional) the id of an element. If supplied, the menu will be positioned relative to this element. Otherwise, it will be positioned relative to the cursor.
+* close - Closes the context menu. Normally you'd close the context menu by clicking on an item within it, but this is also an option.
+
+## Events
+* open - Fired when the menu is opened
+* close - Fired whe nthe menu is closed
+
+### Example
+
+```svelte
+<script lang="ts">
+	import ContextMenu from '@isoftdata/svelte-context-menu'
+
+	let cm: ContextMenu
+</script>
+
+<button
+	id="target"
+	class="btn btn-primary btn-block"
+	on:contextmenu|preventDefault={e => cm.open(e, "target")}
+>
+	Right Click to Open Menu
+</button>
+<ContextMenu bind:this={cm}>
+	<button
+		class="dropdown-item"
+		type="button"
+		on:click={() => cmClicks++}
+		>Click Me!
+	</button>
+	<div class="downdown-divider" />
+	<h6 class="dropdown-header">Clicked {cmClicks} time(s)</h6>
+</ContextMenu>
+```

package/dist/ContextMenu.svelte

@@ -1,21 +1,14 @@
-<script>import { onMount } from "svelte";
-import { computePosition, flip } from "@floating-ui/dom";
+<script>import { computePosition, flip } from "@floating-ui/dom";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
 export let id = "menu";
+export let menuItemClickCloses = true;
 export let placement = "bottom-start";
 let show = false;
 let positionLeft = 0;
 let positionTop = 0;
 let strategy = "absolute";
-let mounted = false;
 let menu;
-function handleMenuClick(event) {
-  if (id && mounted) {
-    const element = document.getElementById(id);
-    if (element && !element.contains(event.target)) {
-      show = false;
-    }
-  }
-}
 export async function open(event, targetId = "") {
   if (menu) {
     show = true;
@@ -40,16 +33,27 @@ export async function open(event, targetId = "") {
       positionTop = pos.y;
       strategy = pos.strategy;
     }
+    dispatch("open");
   } else {
     show = false;
   }
 }
 export function close() {
   show = false;
+  dispatch("close");
+}
+function menuKeydownHandler(event) {
+  const target = event.target;
+  console.log(event.key, event.currentTarget, event.target);
+  if ((event.key === " " || event.key === "Enter") && target.tagName === "BUTTON") {
+    target.click();
+  } else if (target === event.currentTarget && event.key === "Tab") {
+    target.querySelector("button")?.focus();
+  }
 }
 </script>
 
-<svelte:window on:click={event => handleMenuClick(event)} />
+<svelte:window on:keydown={event => event.key === "Escape" && close()} />
 
 <div
 	{id}
@@ -58,12 +62,8 @@ export function close() {
 	style="position: {strategy}; left:{positionLeft}px; top:{positionTop}px;"
 	role="menu"
 	tabindex="0"
-	on:click|stopPropagation={() => (show = false)}
-	on:keydown|preventDefault|stopPropagation={e => {
-		if (e.key === "Escape") {
-			show = false
-		}
-	}}
+	on:click|stopPropagation={() => menuItemClickCloses && close()}
+	on:keydown|preventDefault|stopPropagation={menuKeydownHandler}
 	bind:this={menu}
 >
 	<slot />

package/dist/ContextMenu.svelte.d.ts

@@ -3,11 +3,15 @@ import { type Placement } from "@floating-ui/dom";
 declare const __propDef: {
     props: {
         id?: string | undefined;
+        menuItemClickCloses?: boolean | undefined;
         placement?: Placement | undefined;
         open?: ((event: MouseEvent, targetId?: string) => Promise<void>) | undefined;
         close?: (() => void) | undefined;
     };
     events: {
+        open: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@isoftdata/svelte-context-menu",
-	"version": "1.0.0",
+	"version": "1.2.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",