@isoftdata/svelte-context-menu 1.1.0 → 1.2.0

package/README.md

@@ -1,52 +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" |
-| 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.
-### 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,5 +1,6 @@
-<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";
@@ -7,7 +8,6 @@ let show = false;
 let positionLeft = 0;
 let positionTop = 0;
 let strategy = "absolute";
-let mounted = false;
 let menu;
 export async function open(event, targetId = "") {
   if (menu) {
@@ -33,12 +33,14 @@ 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;
@@ -51,7 +53,7 @@ function menuKeydownHandler(event) {
 }
 </script>
 
-<svelte:window on:keydown={event => event.key === "Escape" && (show = false)} />
+<svelte:window on:keydown={event => event.key === "Escape" && close()} />
 
 <div
 	{id}
@@ -60,7 +62,7 @@ function menuKeydownHandler(event) {
 	style="position: {strategy}; left:{positionLeft}px; top:{positionTop}px;"
 	role="menu"
 	tabindex="0"
-	on:click|stopPropagation={() => menuItemClickCloses && (show = false)}
+	on:click|stopPropagation={() => menuItemClickCloses && close()}
 	on:keydown|preventDefault|stopPropagation={menuKeydownHandler}
 	bind:this={menu}
 >

package/dist/ContextMenu.svelte.d.ts

@@ -9,6 +9,9 @@ declare const __propDef: {
         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.1.0",
+	"version": "1.2.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",