@isoftdata/svelte-context-menu 2.0.1 → 2.0.2

package/README.md

@@ -4,8 +4,8 @@ A Context/Dropdown menu component, filled with [DropdownItem](DropdownItem.md)s
 
 ## Install
 
-```bash
-npm i @isoftdata/svelte-context-menu
+```sh
+pnpm i @isoftdata/svelte-context-menu
 ```
 
 ## Breaking changes

package/dist/ContextMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { Snippet } from "svelte"
-	import { computePosition, flip, type Placement } from "@floating-ui/dom"
+	import type { Snippet } from 'svelte'
+	import { computePosition, flip, type Placement } from '@floating-ui/dom'
 
 	interface Props {
 		id?: string
@@ -17,7 +17,7 @@
 		//
 		id = `dropdown-menu-${uniqueId}`,
 		menuItemClickCloses = true,
-		placement = "bottom-start",
+		placement = 'bottom-start',
 		children,
 		open: openCb,
 		close: closeCb,
@@ -26,11 +26,11 @@
 	let show = $state(false)
 	let positionLeft = $state(0)
 	let positionTop = $state(0)
-	let strategy = $state("absolute")
+	let strategy = $state('absolute')
 
 	let menu: HTMLElement | undefined = $state()
 
-	export async function open(event: MouseEvent, targetId: string = "") {
+	export async function open(event: MouseEvent, targetId: string = '') {
 		event.stopPropagation()
 		if (menu) {
 			show = true
@@ -71,17 +71,17 @@
 		event.stopPropagation()
 		const target = event.target as HTMLElement
 		console.log(event.key, event.currentTarget, event.target)
-		if ((event.key === " " || event.key === "Enter") && target.tagName === "BUTTON") {
+		if ((event.key === ' ' || event.key === 'Enter') && target.tagName === 'BUTTON') {
 			target.click()
-		} else if (target === event.currentTarget && event.key === "Tab") {
-			target.querySelector("button")?.focus()
+		} else if (target === event.currentTarget && event.key === 'Tab') {
+			target.querySelector('button')?.focus()
 		}
 	}
 </script>
 
 <svelte:window
 	onclick={close}
-	onkeydown={event => event.key === "Escape" && close()}
+	onkeydown={event => event.key === 'Escape' && close()}
 />
 
 <div

package/dist/ContextMenu.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from "svelte";
-import { type Placement } from "@floating-ui/dom";
+import type { Snippet } from 'svelte';
+import { type Placement } from '@floating-ui/dom';
 interface Props {
     id?: string;
     menuItemClickCloses?: boolean;

package/dist/DropdownCheckboxItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { ComponentProps, Snippet } from "svelte"
-	import DropdownItem from "./DropdownItem.svelte"
-	interface Props extends Omit<ComponentProps<typeof DropdownItem>, "children"> {
+	import type { ComponentProps, Snippet } from 'svelte'
+	import DropdownItem from './DropdownItem.svelte'
+	interface Props extends Omit<ComponentProps<typeof DropdownItem>, 'children'> {
 		checked?: boolean
 		children?: Snippet<[{ checked: boolean }]>
 	}
@@ -16,8 +16,8 @@
 
 <DropdownItem
 	icon={{
-		icon: checked ? "check-square" : "square",
-		prefix: "far",
+		icon: checked ? 'check-square' : 'square',
+		prefix: 'far',
 	}}
 	onclick={event => {
 		checked = !checked

package/dist/DropdownCheckboxItem.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentProps, Snippet } from "svelte";
-import DropdownItem from "./DropdownItem.svelte";
-interface Props extends Omit<ComponentProps<typeof DropdownItem>, "children"> {
+import type { ComponentProps, Snippet } from 'svelte';
+import DropdownItem from './DropdownItem.svelte';
+interface Props extends Omit<ComponentProps<typeof DropdownItem>, 'children'> {
     checked?: boolean;
     children?: Snippet<[{
         checked: boolean;

package/dist/DropdownItem.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { ComponentProps, Snippet } from "svelte"
-	import type { HTMLButtonAttributes } from "svelte/elements"
-	import Icon, { getIconProps } from "@isoftdata/svelte-icon"
+	import type { ComponentProps, Snippet } from 'svelte'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
+	import Icon, { getIconProps } from '@isoftdata/svelte-icon'
 
 	interface Props extends Omit<HTMLButtonAttributes, `on:${string}` | `bind:${string}` | `aria-${string}`> {
-		icon?: ComponentProps<Icon>["icon"] | ComponentProps<Icon>
+		icon?: ComponentProps<Icon>['icon'] | ComponentProps<Icon>
 		children?: Snippet
 	}
 
@@ -22,7 +22,7 @@
 	class="dropdown-item"
 	type="button"
 	{...rest}
-	>{#if icon}<span class="mr-1"
+	>{#if icon}<span class="mr-1 me-1"
 			><Icon
 				fixedWidth
 				{...iconProps}

package/dist/DropdownItem.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentProps, Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
-import Icon from "@isoftdata/svelte-icon";
+import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import Icon from '@isoftdata/svelte-icon';
 interface Props extends Omit<HTMLButtonAttributes, `on:${string}` | `bind:${string}` | `aria-${string}`> {
-    icon?: ComponentProps<Icon>["icon"] | ComponentProps<Icon>;
+    icon?: ComponentProps<Icon>['icon'] | ComponentProps<Icon>;
     children?: Snippet;
 }
 declare const DropdownItem: import("svelte").Component<Props, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isoftdata/svelte-context-menu",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",