@delightstack/components 0.1.0

package/dist/actions/CommandPalette.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Component } from 'svelte';
+/** An option/command in the command palette */
+export interface CommandOption {
+    /** Unique identifier for the command */
+    id: string;
+    /** Display title of the command */
+    title: string;
+    /** Optional description shown below the title */
+    description?: string;
+    /** Category for grouping commands */
+    category?: string;
+    /** Optional icon component */
+    icon?: Component;
+    /** Keyboard shortcut keys to display (e.g. ['Ctrl', 'K']) */
+    shortcut?: string[];
+    /** Additional search keywords */
+    keywords?: string[];
+    /** Whether the command is disabled */
+    disabled?: boolean;
+    /** Called when the command is selected */
+    onselect: () => void | Promise<void>;
+}
+declare const CommandPalette: Component<{
+    open?: boolean;
+    commands?: CommandOption[];
+    placeholder?: string;
+    recent_limit?: number;
+    group_by?: "category" | "none";
+    dense?: boolean;
+    comfortable?: boolean;
+    onselect?: ((command: CommandOption) => void) | undefined;
+    id?: string;
+    class?: string;
+}, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;
+//# sourceMappingURL=CommandPalette.svelte.d.ts.map

package/dist/actions/CommandPalette.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.svelte.d.ts","sourceRoot":"","sources":["../../src/actions/CommandPalette.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,+CAA+C;AAC/C,MAAM,WAAW,aAAa;IAC7B,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IAEX,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IAEd,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IAEpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IAEpB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AA0hBF,QAAA,MAAM,cAAc;WAzU4D,OAAO;eAAa,aAAa,EAAE;kBAAgB,MAAM;mBAAiB,MAAM;eAAa,UAAU,GAAG,MAAM;YAAU,OAAO;kBAAgB,OAAO;eAAa,CAAC,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC,GAAG,SAAS;;YAA8B,MAAM;cAyU3Q,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/actions/ContextMenu.svelte

@@ -0,0 +1,138 @@
+<script lang="ts" module>
+	import { tick, untrack, type Component, type Snippet } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
+	import Popover from './Popover.svelte';
+	import List from './../display/List.svelte';
+	import ListItem from './../display/ListItem.svelte';
+
+	export interface ContextMenuOptions {
+		/** The list of action menu items to show in the context menu */
+		actions: Array<{
+			/** A callback that will be called when this action is clicked */
+			onclick?: (event: PointerEvent) => void | Promise<void>;
+			/** An optional href to navigate to when this action is clicked */
+			href?: string;
+			/** The target for the href, if any */
+			target?: '_blank' | '_self' | '_parent' | '_top';
+			/** Whether the action item should have an "active" look to it (highlighed) */
+			active?: boolean;
+			/** The label text to show for this action */
+			label?: string;
+			/** Whether this action is disabled or not */
+			disabled?: boolean;
+			/** The icon component to display before the label text */
+			icon?: Component<Record<string, unknown>>;
+			/** An optional snippet that will be used to render the content of the action (instead of using 'label') */
+			snippet?: Snippet<[ContextMenuOptions & { el: HTMLElement }]>;
+		}>;
+	}
+
+	/** The currently displayed context mneu */
+	let activeContextMenu = $state<(ContextMenuOptions & { el: HTMLElement }) | undefined>(
+		undefined,
+	);
+
+	/** The X location of the context menu, used to position it */
+	let contextMenuLocationX = $state<number | undefined>(undefined);
+
+	/** The Y location of the context menu, used to position it */
+	let contextMenuLocationY = $state<number | undefined>(undefined);
+
+	/** A record of context menu targets that will be chosen from when the user right clicks the window */
+	const contextMenuTargets = new WeakMap<
+		HTMLElement,
+		ContextMenuOptions & {
+			/** The element listening for context menu events */
+			el: HTMLElement;
+		}
+	>();
+
+	/**
+	 * A svelte attachment for adding a context menu when a user right clicks the attached element.
+	 * If multiple context menus are attached to the same element, the most recently attached one will be used.
+	 * If a parent element has a context menu, the child element's context menu will take precedence.
+	 * @example
+	 * ```svelte
+	 * <div {@attach contextMenu({ actions: [{ label: 'Help', onclick: () => {} }] })}>
+	 * ```
+	 */
+	export function contextMenu(options: ContextMenuOptions): Attachment<HTMLElement> {
+		return (el: HTMLElement) => {
+			if (contextMenuTargets.has(el)) contextMenuTargets.delete(el);
+			contextMenuTargets.set(el, { ...options, el });
+			return () => {
+				contextMenuTargets.delete(el);
+				untrack(() => {
+					if (activeContextMenu?.el === el) activeContextMenu = undefined;
+				});
+			};
+		};
+	}
+</script>
+
+<script lang="ts">
+</script>
+
+<svelte:window
+	oncontextmenu={(event) => {
+		let target = event.target as HTMLElement;
+		while (target && !contextMenuTargets.has(target)) {
+			target = target.parentElement as HTMLElement;
+		}
+		const contextMenu = contextMenuTargets.get(target);
+		if (!contextMenu) return;
+		event.preventDefault();
+		activeContextMenu = undefined;
+		contextMenuLocationX = event.clientX;
+		contextMenuLocationY = event.clientY;
+		tick().then(() => (activeContextMenu = contextMenu));
+	}}
+	onscroll={() => {
+		if (activeContextMenu) activeContextMenu = undefined;
+	}} />
+
+<Popover
+	bind:opened={
+		() => !!activeContextMenu?.actions?.length,
+		(open) => {
+			// The Popover closes itself on outside click / escape / scroll. Funnel
+			// that back into clearing the active menu so it fully dismisses (a
+			// one-way `opened` prop would leave the menu state stale and re-open it).
+			if (!open) activeContextMenu = undefined;
+		}
+	}
+	strategy="fixed"
+	close_on_escape_key
+	close_on_outside_click
+	arrow={false}
+	radius="var(--radius-lg)"
+	x={contextMenuLocationX}
+	y={contextMenuLocationY}>
+	{#if !!activeContextMenu?.actions?.length}
+		<List>
+			{#each activeContextMenu?.actions as action}
+				<ListItem
+					onclick={async (event) => {
+						if (action.onclick) await action.onclick(event as PointerEvent);
+						activeContextMenu = undefined;
+					}}
+					active={action.active}
+					href={action.href}
+					target={action.target}
+					disabled={action.disabled}>
+					{#if action.snippet}
+						{@render action.snippet(activeContextMenu)}
+					{:else}
+						{#if action.icon}
+							<span
+								style="display:inline-flex; align-items: center; padding-right: 0.5rem; font-size: 1.1rem;">
+								<action.icon></action.icon>
+							</span>
+						{/if}
+						{action.label}
+					{/if}
+				</ListItem>
+			{/each}
+		</List>
+	{/if}
+</Popover>

package/dist/actions/ContextMenu.svelte.d.ts

@@ -0,0 +1,54 @@
+import { type Component, type Snippet } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+export interface ContextMenuOptions {
+    /** The list of action menu items to show in the context menu */
+    actions: Array<{
+        /** A callback that will be called when this action is clicked */
+        onclick?: (event: PointerEvent) => void | Promise<void>;
+        /** An optional href to navigate to when this action is clicked */
+        href?: string;
+        /** The target for the href, if any */
+        target?: '_blank' | '_self' | '_parent' | '_top';
+        /** Whether the action item should have an "active" look to it (highlighed) */
+        active?: boolean;
+        /** The label text to show for this action */
+        label?: string;
+        /** Whether this action is disabled or not */
+        disabled?: boolean;
+        /** The icon component to display before the label text */
+        icon?: Component<Record<string, unknown>>;
+        /** An optional snippet that will be used to render the content of the action (instead of using 'label') */
+        snippet?: Snippet<[ContextMenuOptions & {
+            el: HTMLElement;
+        }]>;
+    }>;
+}
+/**
+ * A svelte attachment for adding a context menu when a user right clicks the attached element.
+ * If multiple context menus are attached to the same element, the most recently attached one will be used.
+ * If a parent element has a context menu, the child element's context menu will take precedence.
+ * @example
+ * ```svelte
+ * <div {@attach contextMenu({ actions: [{ label: 'Help', onclick: () => {} }] })}>
+ * ```
+ */
+export declare function contextMenu(options: ContextMenuOptions): Attachment<HTMLElement>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ContextMenu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ContextMenu = InstanceType<typeof ContextMenu>;
+export default ContextMenu;
+//# sourceMappingURL=ContextMenu.svelte.d.ts.map

package/dist/actions/ContextMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/actions/ContextMenu.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKrD,MAAM,WAAW,kBAAkB;IAClC,gEAAgE;IAChE,OAAO,EAAE,KAAK,CAAC;QACd,iEAAiE;QACjE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QACxD,kEAAkE;QAClE,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,sCAAsC;QACtC,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;QACjD,8EAA8E;QAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,6CAA6C;QAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,6CAA6C;QAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,0DAA0D;QAC1D,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;QAC1C,2GAA2G;QAC3G,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,kBAAkB,GAAG;YAAE,EAAE,EAAE,WAAW,CAAA;SAAE,CAAC,CAAC,CAAC;KAC9D,CAAC,CAAC;CACH;AAsBD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,UAAU,CAAC,WAAW,CAAC,CAWhF;AAsDF,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;;kBAA+E,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}