@isoftdata/svelte-context-menu 1.1.0 → 1.3.0

package/README.md

@@ -1,52 +1,59 @@
-# 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
+
+A Context/Dropdown menu component, filled with [DropdownItem](DropdownItem.md)s
+
+## 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}>
+		<DropdownItem
+			icon="mouse"
+			on:click={() => alert("Dropdown Item Clicked!")}
+		>
+			Click Me!
+		</DropdownItem>
+	<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,10 @@ function menuKeydownHandler(event) {
 }
 </script>
 
-<svelte:window on:keydown={event => event.key === "Escape" && (show = false)} />
+<svelte:window
+	on:click={close}
+	on:keydown={event => event.key === "Escape" && close()}
+/>
 
 <div
 	{id}
@@ -60,7 +65,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/dist/DropdownItem.svelte

@@ -0,0 +1,23 @@
+<script>import Icon from "@isoftdata/svelte-icon";
+export let icon = null;
+function getIconProps(icon2) {
+  if (typeof icon2 === "string") {
+    return { icon: icon2, ...defaultIconProps };
+  } else {
+    return { ...icon2, ...defaultIconProps };
+  }
+}
+const defaultIconProps = {
+  prefix: "fas",
+  fixedWidth: true
+};
+$:
+  iconProps = getIconProps(icon);
+</script>
+
+<button
+	class="dropdown-item"
+	type="button"
+	on:click
+	>{#if $$props.icon}<span class="mr-1"><Icon {...iconProps} /> </span>{/if}<slot />
+</button>

package/dist/DropdownItem.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentProps } from "svelte";
+import Icon from "@isoftdata/svelte-icon";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        icon?: ComponentProps<Icon>["icon"] | ComponentProps<Icon>;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DropdownItemProps = typeof __propDef.props;
+export type DropdownItemEvents = typeof __propDef.events;
+export type DropdownItemSlots = typeof __propDef.slots;
+export default class DropdownItem extends SvelteComponent<DropdownItemProps, DropdownItemEvents, DropdownItemSlots> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@isoftdata/svelte-context-menu",
-	"version": "1.1.0",
+	"version": "1.3.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -50,6 +50,7 @@
 	"type": "module",
 	"prettier": "@isoftdata/prettier-config",
 	"dependencies": {
-		"@floating-ui/dom": "^1.5.3"
+		"@floating-ui/dom": "^1.5.3",
+		"@isoftdata/svelte-icon": "^1.1.0"
 	}
 }