@isoftdata/svelte-context-menu 1.2.0 → 1.3.1

package/README.md

@@ -1,5 +1,7 @@
 # Svelte ContextMenu
 
+A Context/Dropdown menu component, filled with [DropdownItem](DropdownItem.md)s
+
 ## Install
 
 ```bash
@@ -45,12 +47,12 @@ The main way you'll interact with this component is through calling the methods
 	Right Click to Open Menu
 </button>
 <ContextMenu bind:this={cm}>
-	<button
-		class="dropdown-item"
-		type="button"
-		on:click={() => cmClicks++}
-		>Click Me!
-	</button>
+		<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

@@ -53,7 +53,10 @@ function menuKeydownHandler(event) {
 }
 </script>
 
-<svelte:window on:keydown={event => event.key === "Escape" && close()} />
+<svelte:window
+	on:click={close}
+	on:keydown={event => event.key === "Escape" && close()}
+/>
 
 <div
 	{id}

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/dist/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./ContextMenu.svelte";
+export { default as DropdownItem } from "./DropdownItem.svelte";

package/dist/index.js

@@ -1 +1,2 @@
-export {default as default} from './ContextMenu.svelte'
+export { default as default } from './ContextMenu.svelte'
+export { default as DropdownItem } from './DropdownItem.svelte'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@isoftdata/svelte-context-menu",
-	"version": "1.2.0",
+	"version": "1.3.1",
 	"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"
 	}
 }