@isoftdata/svelte-context-menu
Advanced tools
| <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' | ||
@@ -20,3 +20,3 @@ interface Props { | ||
| menuItemClickCloses = true, | ||
| placement = "bottom-start", | ||
| placement = 'bottom-start', | ||
| children, | ||
@@ -30,7 +30,7 @@ open: openCb, | ||
| 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() | ||
@@ -76,6 +76,6 @@ if (menu) { | ||
| 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() | ||
| } | ||
@@ -87,3 +87,3 @@ } | ||
| onclick={close} | ||
| onkeydown={event => event.key === "Escape" && close()} | ||
| onkeydown={event => event.key === 'Escape' && close()} | ||
| /> | ||
@@ -90,0 +90,0 @@ |
@@ -1,3 +0,3 @@ | ||
| 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 { | ||
@@ -4,0 +4,0 @@ id?: string; |
| <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 | ||
@@ -19,4 +19,4 @@ children?: Snippet<[{ checked: boolean }]> | ||
| icon={{ | ||
| icon: checked ? "check-square" : "square", | ||
| prefix: "far", | ||
| icon: checked ? 'check-square' : 'square', | ||
| prefix: 'far', | ||
| }} | ||
@@ -23,0 +23,0 @@ onclick={event => { |
@@ -1,4 +0,4 @@ | ||
| 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; | ||
@@ -5,0 +5,0 @@ children?: Snippet<[{ |
| <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 | ||
@@ -25,3 +25,3 @@ } | ||
| {...rest} | ||
| >{#if icon}<span class="mr-1" | ||
| >{#if icon}<span class="mr-1 me-1" | ||
| ><Icon | ||
@@ -28,0 +28,0 @@ fixedWidth |
@@ -1,6 +0,6 @@ | ||
| 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; | ||
@@ -7,0 +7,0 @@ } |
+1
-1
| { | ||
| "name": "@isoftdata/svelte-context-menu", | ||
| "version": "2.0.1", | ||
| "version": "2.0.2", | ||
| "exports": { | ||
@@ -5,0 +5,0 @@ ".": { |
+2
-2
@@ -7,4 +7,4 @@ # Svelte ContextMenu | ||
| ```bash | ||
| npm i @isoftdata/svelte-context-menu | ||
| ```sh | ||
| pnpm i @isoftdata/svelte-context-menu | ||
| ``` | ||
@@ -11,0 +11,0 @@ |
9628
0.04%