fuma 2.1.3 → 2.1.5

package/dist/_doc/DocExample.svelte

@@ -2,7 +2,7 @@
 	import { type Snippet } from 'svelte'
 	import { ButtonCopy } from '../ui/copy/index.js'
 	import { useMode } from '../ui/mode/useMode.svelte.js'
-	import { highlight, transformPackageImports } from './highlight.ts'
+	import { highlight, transformPackageImports } from './highlight.js'
 
 	let {
 		code,

package/dist/command/command.svelte.d.ts

@@ -2,13 +2,15 @@ type CommandOptions = {
     isEnable?: () => boolean;
     onSelect?: (index: number) => unknown;
     onFocus?: (index: number) => unknown;
+    hotKey?: string;
 };
-export declare function useCommand({ onSelect, onFocus, isEnable }?: CommandOptions): {
+export declare function useCommand({ onSelect, onFocus, isEnable, hotKey }?: CommandOptions): {
     readonly focusIndex: number;
-    readonly selectedIndex: number;
+    selectedIndex: number;
     trigger: {
         [x: symbol]: (node: HTMLElement) => () => void;
     };
+    focusTrigger: () => void;
     item: (index: number, scrollMargin?: string) => {
         [x: symbol]: (node: HTMLElement) => () => void;
     };

package/dist/command/command.svelte.js

@@ -1,8 +1,9 @@
 import { createAttachmentKey } from 'svelte/attachments';
 import { on } from 'svelte/events';
-export function useCommand({ onSelect, onFocus, isEnable = () => true } = {}) {
+export function useCommand({ onSelect, onFocus, isEnable = () => true, hotKey } = {}) {
     let focusIndex = $state(0);
     let selectedIndex = $state(-1);
+    let triggerElement = $state();
     const items = [];
     function onKeydown(event) {
         if (!isEnable())
@@ -35,6 +36,20 @@ export function useCommand({ onSelect, onFocus, isEnable = () => true } = {}) {
     function scrollFocusIntoView() {
         items.at(focusIndex)?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
+    async function handleHotKey(event) {
+        const { metaKey, ctrlKey, key } = event;
+        if ((metaKey || ctrlKey) && key === hotKey) {
+            event.preventDefault();
+            focusTrigger();
+            return;
+        }
+    }
+    function focusTrigger() {
+        if (triggerElement instanceof HTMLInputElement ||
+            triggerElement instanceof HTMLTextAreaElement) {
+            triggerElement.select();
+        }
+    }
     return {
         get focusIndex() {
             return focusIndex;
@@ -42,11 +57,23 @@ export function useCommand({ onSelect, onFocus, isEnable = () => true } = {}) {
         get selectedIndex() {
             return selectedIndex;
         },
+        set selectedIndex(index) {
+            selectedIndex = index;
+        },
         trigger: {
             [createAttachmentKey()]: (node) => {
-                return on(node, 'keydown', onKeydown);
+                triggerElement = node;
+                const cleanups = [];
+                cleanups.push(on(node, 'keydown', onKeydown));
+                if (hotKey)
+                    cleanups.push(on(window, 'keydown', handleHotKey));
+                return () => {
+                    for (const cleanup of cleanups)
+                        cleanup();
+                };
             }
         },
+        focusTrigger,
         item: (index, scrollMargin = '8px') => ({
             [createAttachmentKey()]: (node) => {
                 node.style.scrollMargin = scrollMargin;

package/dist/command/index.d.ts

@@ -1 +1 @@
-export * from './command.svelte.ts';
+export * from './command.svelte.js';

package/dist/command/index.js

@@ -1 +1 @@
-export * from './command.svelte.ts';
+export * from './command.svelte.js';

package/dist/index.d.ts

@@ -1,10 +1,11 @@
-export * from './action/index.ts';
-export * from './command/index.ts';
-export * from './input/index.ts';
-export * from './popover/index.ts';
-export * from './remote/index.ts';
-export * from './search/index.ts';
-export * from './state/index.ts';
-export * from './ui/index.ts';
-export * from './utils/index.ts';
-export * from './validation/index.ts';
+export * from './action/index.js';
+export * from './command/index.js';
+export * from './input/index.js';
+export * from './loading/index.js';
+export * from './popover/index.js';
+export * from './remote/index.js';
+export * from './search/index.js';
+export * from './state/index.js';
+export * from './ui/index.js';
+export * from './utils/index.js';
+export * from './validation/index.js';

package/dist/index.js

@@ -1,10 +1,11 @@
-export * from './action/index.ts';
-export * from './command/index.ts';
-export * from './input/index.ts';
-export * from './popover/index.ts';
-export * from './remote/index.ts';
-export * from './search/index.ts';
-export * from './state/index.ts';
-export * from './ui/index.ts';
-export * from './utils/index.ts';
-export * from './validation/index.ts';
+export * from './action/index.js';
+export * from './command/index.js';
+export * from './input/index.js';
+export * from './loading/index.js';
+export * from './popover/index.js';
+export * from './remote/index.js';
+export * from './search/index.js';
+export * from './state/index.js';
+export * from './ui/index.js';
+export * from './utils/index.js';
+export * from './validation/index.js';

package/dist/input/InputBoolean.svelte

@@ -2,7 +2,7 @@
 	import { CheckIcon } from '@lucide/svelte'
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import Issues from './Issues.svelte'
-	import type { InputProps } from './type.ts'
+	import type { InputProps } from './type.js'
 
 	let {
 		field,

package/dist/input/InputBoolean.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { RemoteFormField } from '@sveltejs/kit';
-import type { InputProps } from './type.ts';
+import type { InputProps } from './type.js';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<boolean>;

package/dist/input/InputNumber.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import Issues from './Issues.svelte'
-	import type { InputProps } from './type.ts'
+	import type { InputProps } from './type.js'
 
 	let {
 		label,

package/dist/input/InputNumber.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { RemoteFormField } from '@sveltejs/kit';
-import type { InputProps } from './type.ts';
+import type { InputProps } from './type.js';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<number>;

package/dist/input/InputRadio.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { RemoteFormField } from '@sveltejs/kit'
-	import { type Options, parseOptions } from '../utils/index.ts'
+	import { type Options, parseOptions } from '../utils/index.js'
 	import Issues from './Issues.svelte'
 
 	let {

package/dist/input/InputRadio.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { RemoteFormField } from '@sveltejs/kit';
-import { type Options } from '../utils/index.ts';
+import { type Options } from '../utils/index.js';
 type $$ComponentProps = {
     field?: RemoteFormField<string>;
     label: string;

package/dist/input/InputRange.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import Issues from './Issues.svelte'
-	import type { InputProps } from './type.ts'
+	import type { InputProps } from './type.js'
 
 	let {
 		label,

package/dist/input/InputRange.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { RemoteFormField } from '@sveltejs/kit';
-import type { InputProps } from './type.ts';
+import type { InputProps } from './type.js';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<number>;

package/dist/input/InputRelation.svelte

@@ -1,81 +1,139 @@
 <script lang="ts" generics="Item">
-	import { ChevronsUpDownIcon } from '@lucide/svelte'
+	import { ChevronsUpDownIcon, SearchIcon, XIcon } from '@lucide/svelte'
 	import type { RemoteFormField, RemoteQueryFunction } from '@sveltejs/kit'
 	import type { Snippet } from 'svelte'
-	import { useCommand } from '../command/command.svelte.ts'
-	import { usePopover } from '../popover/popover.svelte.ts'
+	import type { ClassValue } from 'svelte/elements'
+	import { tip } from '../action/tip.js'
+	import { useCommand } from '../command/command.svelte.js'
+	import Loading from '../loading/Loading.svelte'
+	import { type PopoverType, usePopover } from '../popover/popover.svelte.js'
 	import Issues from './Issues.svelte'
 
 	let {
 		label,
 		searchItems,
-		getValue,
-		selected,
-		proposal,
+		getValue = defaultGetValue,
+		selected = defaultSnippet,
+		proposal = defaultSnippet,
 		field,
-		value = $bindable()
+		value = $bindable(),
+		placeholder = 'Selectionner une valeur',
+		class: klass,
+		nullable,
+		hint,
+		onSelect,
+		hotKey
 	}: {
-		label: string
 		searchItems: RemoteQueryFunction<{ search: string }, Item[]>
-		getValue: (item: Item) => string
+		label?: string
+		getValue?: (item: NoInfer<Item>) => string
 		selected?: Snippet<[Item]>
 		proposal?: Snippet<[Item, { isSelected: boolean; isFocus: boolean }]>
 		field?: RemoteFormField<string>
 		value?: string
+		placeholder?: string
+		class?: ClassValue
+		nullable?: boolean
+		hint?: Snippet<[Item | undefined]>
+		onSelect?: (item: NoInfer<Item> | undefined, popover: PopoverType) => void
+		hotKey?: string
 	} = $props()
 
 	let search = $state('')
-	const items = $derived.by(() => searchItems({ search }))
+	const query = $derived.by(() => searchItems({ search }))
+	const items = $derived(query.current || [])
 
 	let selectedItem = $state<Item | undefined>(undefined)
-
 	$effect(() => {
-		const targetValue = field?.value() ?? value
-		selectedItem = items.current?.find((item) => getValue(item) === targetValue)
+		const targetValue = (field?.value() ?? value)?.toString()
+		if (!targetValue) {
+			selectedItem = undefined
+			command.selectedIndex = -1
+			return
+		}
+		// TODO: Quelle est la meilleur facon de récupérer l'item initial ?
+		command.selectedIndex = items.findIndex((item) => getValue(item) === targetValue)
 	})
 
-	const popover = usePopover({ listenFocus: false })
-	const command = useCommand({
+	export const popover = usePopover({
+		listenFocus: false,
+		onShow: () => command.focusTrigger(),
+		hotKey: (() => hotKey)()
+	})
+	export const command = useCommand({
 		isEnable: () => popover.isOpen,
 		onSelect: (index) => {
 			popover.hide()
-			const item = items.current?.[index]
+			const item = items[index]
+			onSelect?.(item, popover)
 			if (!item) return
 			selectedItem = item
-			if (field) {
-				field.set(getValue(item))
-			} else {
-				value = getValue(item)
-			}
+			setValue(item)
 		}
 	})
+
+	function setValue(item: Item | undefined) {
+		const newValue = item && getValue(item)
+		if (field) {
+			field.set(newValue)
+		} else {
+			value = newValue
+		}
+	}
+
+	function defaultGetValue(item: Item): string {
+		if (item && typeof item === 'object') {
+			if ('value' in item && typeof item.value === 'string') return item.value
+			if ('rowid' in item && typeof item.rowid === 'string') return item.rowid
+		}
+		return JSON.stringify(item)
+	}
+
+	function getDefaultLabel(item: Item) {
+		if (item && typeof item === 'object' && 'label' in item) {
+			if (typeof item.label === 'string') return item.label
+		}
+		return getValue(item)
+	}
+
+	const isButtonSetNullVisible = $derived(nullable && (field?.value() || value))
 </script>
 
-{#if field?.value() !== undefined}
-	<input {...field.as('hidden', field.value() as string)} />
+{#snippet defaultSnippet(item: Item)}
+	<span>{getDefaultLabel(item)}</span>
+{/snippet}
+
+{#snippet triggerButton()}
+	<button
+		type="button"
+		class={['input', field?.issues.length && 'input-error', klass]}
+		{...popover.trigger}
+	>
+		<div class="grow text-left">
+			{#if !selectedItem}
+				<span class="opacity-60">{placeholder}</span>
+			{:else}
+				<!-- item.icon not rerender if not wrapped in #key -->
+				{#key selectedItem}{@render selected(selectedItem)}{/key}
+			{/if}
+		</div>
+		<ChevronsUpDownIcon size={14} opacity={0.7} />
+	</button>
+{/snippet}
+
+{#if field}
+	<input {...field.as('hidden', field.value() || '')} />
 {/if}
 
 <div>
-	<label class="floating-label">
-		<span>{label}</span>
-		<button
-			class={['input', field?.issues.length && 'input-error']}
-			{...popover.trigger}
-			type="button"
-		>
-			<div class="grow text-left">
-				{#if !selectedItem}
-					<span class="opacity-60">Select a value</span>
-				{:else if selected}
-					<!-- item.icon not rerender if not wrapped in #key -->
-					{#key selectedItem}{@render selected(selectedItem)}{/key}
-				{:else}
-					{getValue(selectedItem)}
-				{/if}
-			</div>
-			<ChevronsUpDownIcon size={14} />
-		</button>
-	</label>
+	{#if label}
+		<label class="floating-label">
+			<span>{label}</span>
+			{@render triggerButton()}
+		</label>
+	{:else}
+		{@render triggerButton()}
+	{/if}
 
 	<div
 		{...popover.content}
@@ -83,33 +141,56 @@
 		style="min-width: anchor-size(width);"
 		tabindex="-1"
 	>
-		<div class="sticky top-0 z-10 bg-base-100 p-2">
-			<input type="search" {...command.trigger} class="input input-sm" bind:value={search} />
+		<div class="sticky top-0 z-10 flex gap-2 bg-base-100/10 p-2 backdrop-blur-md">
+			<label class="input input-sm grow input-ghost">
+				<SearchIcon opacity={0.6} size={20} />
+				<input
+					type="search"
+					placeholder="Recherche"
+					autocomplete="off"
+					bind:value={search}
+					{...command.trigger}
+				/>
+			</label>
+			{#if isButtonSetNullVisible}
+				<button
+					class="btn btn-square btn-soft btn-sm"
+					type="button"
+					onclick={() => {
+						selectedItem = undefined
+						setValue(undefined)
+						onSelect?.(undefined, popover)
+						popover.hide()
+					}}
+					use:tip={{ content: 'Pas de sélection' }}
+				>
+					<XIcon />
+				</button>
+			{/if}
 		</div>
 
 		<ul class="menu max-h-80 w-full flex-nowrap pt-0">
-			{#each items.current as item, index (item)}
+			{#each items as item, index (item)}
 				{@const isSelected = index === command.selectedIndex}
 				{@const isFocus = index === command.focusIndex}
 				<li>
 					<button
 						{...command.item(index, '')}
-						class={[isFocus && 'menu-focus', 'scroll-mt-13 scroll-mb-2']}
+						class={[isSelected && 'border', isFocus && 'menu-focus', 'scroll-mt-13 scroll-mb-2']}
 						type="button"
 						tabindex="-1"
 						role="option"
 					>
-						{#if proposal}
-							{@render proposal(item, { isSelected, isFocus })}
-						{:else}
-							{getValue(item)}
-						{/if}
+						{@render proposal(item, { isSelected, isFocus })}
 					</button>
 				</li>
 			{/each}
 		</ul>
+
+		<Loading {query} />
 	</div>
 	<Issues {field} />
+	{@render hint?.(selectedItem)}
 </div>
 
 <style>

package/dist/input/InputRelation.svelte.d.ts

@@ -1,12 +1,14 @@
 import type { RemoteFormField, RemoteQueryFunction } from '@sveltejs/kit';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+import { type PopoverType } from '../popover/popover.svelte.js';
 declare function $$render<Item>(): {
     props: {
-        label: string;
         searchItems: RemoteQueryFunction<{
             search: string;
         }, Item[]>;
-        getValue: (item: Item) => string;
+        label?: string;
+        getValue?: (item: NoInfer<Item>) => string;
         selected?: Snippet<[Item]>;
         proposal?: Snippet<[Item, {
             isSelected: boolean;
@@ -14,8 +16,38 @@ declare function $$render<Item>(): {
         }]>;
         field?: RemoteFormField<string>;
         value?: string;
+        placeholder?: string;
+        class?: ClassValue;
+        nullable?: boolean;
+        hint?: Snippet<[Item | undefined]>;
+        onSelect?: (item: NoInfer<Item> | undefined, popover: PopoverType) => void;
+        hotKey?: string;
+    };
+    exports: {
+        popover: {
+            show: () => void;
+            hide: () => void;
+            readonly isOpen: boolean;
+            content: {
+                [x: symbol]: (node: HTMLElement) => () => void;
+                popover: "auto" | "hint" | "manual";
+            };
+            trigger: {
+                [x: symbol]: (node: HTMLElement) => () => void;
+            };
+        };
+        command: {
+            readonly focusIndex: number;
+            selectedIndex: number;
+            trigger: {
+                [x: symbol]: (node: HTMLElement) => () => void;
+            };
+            focusTrigger: () => void;
+            item: (index: number, scrollMargin?: string) => {
+                [x: symbol]: (node: HTMLElement) => () => void;
+            };
+        };
     };
-    exports: {};
     bindings: "value";
     slots: {};
     events: {};
@@ -25,7 +57,31 @@ declare class __sveltets_Render<Item> {
     events(): ReturnType<typeof $$render<Item>>['events'];
     slots(): ReturnType<typeof $$render<Item>>['slots'];
     bindings(): "value";
-    exports(): {};
+    exports(): {
+        popover: {
+            show: () => void;
+            hide: () => void;
+            readonly isOpen: boolean;
+            content: {
+                [x: symbol]: (node: HTMLElement) => () => void;
+                popover: "auto" | "hint" | "manual";
+            };
+            trigger: {
+                [x: symbol]: (node: HTMLElement) => () => void;
+            };
+        };
+        command: {
+            readonly focusIndex: number;
+            selectedIndex: number;
+            trigger: {
+                [x: symbol]: (node: HTMLElement) => () => void;
+            };
+            focusTrigger: () => void;
+            item: (index: number, scrollMargin?: string) => {
+                [x: symbol]: (node: HTMLElement) => () => void;
+            };
+        };
+    };
 }
 interface $$IsomorphicComponent {
     new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {

package/dist/input/InputSelect.svelte

@@ -2,8 +2,8 @@
 	import { ChevronsUpDownIcon } from '@lucide/svelte'
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import type { Snippet } from 'svelte'
-	import { useCommand } from '../command/command.svelte.ts'
-	import { usePopover } from '../popover/popover.svelte.ts'
+	import { useCommand } from '../command/command.svelte.js'
+	import { usePopover } from '../popover/popover.svelte.js'
 	import Issues from './Issues.svelte'
 
 	let {

package/dist/input/InputSelectNative.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { RemoteFormField } from '@sveltejs/kit'
-	import { type Options, parseOptions } from '../index.ts'
+	import { type Options, parseOptions } from '../index.js'
 	import Issues from './Issues.svelte'
-	import type { SelectProps } from './type.ts'
+	import type { SelectProps } from './type.js'
 
 	let {
 		label,

package/dist/input/InputSelectNative.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { RemoteFormField } from '@sveltejs/kit';
-import { type Options } from '../index.ts';
-import type { SelectProps } from './type.ts';
+import { type Options } from '../index.js';
+import type { SelectProps } from './type.js';
 type $$ComponentProps = {
     label: string;
     options: Options;

package/dist/input/InputString.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import Issues from './Issues.svelte'
-	import type { InputProps } from './type.ts'
+	import type { InputProps } from './type.js'
 
 	let {
 		label,

package/dist/input/InputString.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { RemoteFormField } from '@sveltejs/kit';
-import type { InputProps } from './type.ts';
+import type { InputProps } from './type.js';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<string>;

package/dist/input/InputTextarea.svelte

@@ -2,7 +2,7 @@
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import { TextareaAutosize } from 'runed'
 	import Issues from './Issues.svelte'
-	import type { TextareaProps } from './type.ts'
+	import type { TextareaProps } from './type.js'
 
 	let {
 		label,

package/dist/input/InputTextarea.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { RemoteFormField } from '@sveltejs/kit';
-import type { TextareaProps } from './type.ts';
+import type { TextareaProps } from './type.js';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<string>;

package/dist/input/index.d.ts

@@ -8,4 +8,4 @@ export { default as InputSelectNative } from './InputSelectNative.svelte';
 export { default as InputString } from './InputString.svelte';
 export { default as InputTextarea } from './InputTextarea.svelte';
 export { default as Issues } from './Issues.svelte';
-export type * from './type.ts';
+export type * from './type.js';

package/dist/loading/Loading.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { GhostIcon, LoaderCircleIcon, TriangleAlertIcon } from '@lucide/svelte'
+	import type { RemoteQuery } from '@sveltejs/kit'
+	import type { ClassValue } from 'svelte/elements'
+	import { fade } from 'svelte/transition'
+
+	let {
+		query,
+		empty = 'Aucun résultat',
+		error = 'Une erreur est survenue',
+		class: klass
+	}: {
+		query: RemoteQuery<unknown>
+		empty?: string
+		error?: string
+		class?: ClassValue
+	} = $props()
+
+	const isEmpty = $derived.by(() => {
+		if (!query.ready) return true
+		if (!query.current) return true
+		if (Array.isArray(query.current) && !query.current.length) return true
+		return false
+	})
+
+	const box = 'm-2 flex flex-col items-center gap-1 rounded border border-dashed p-2 text-sm'
+</script>
+
+{#if query.loading}
+	<div class={['grid h-12 place-content-center', klass]} in:fade={{ duration: 200 }}>
+		<LoaderCircleIcon class="animate-spin" opacity={0.7} />
+	</div>
+{:else if query.error}
+	<div class={[box, 'border-error/50 text-error', klass]} in:fade={{ duration: 200 }}>
+		<TriangleAlertIcon size={18} />
+		<span>{error}</span>
+	</div>
+{:else if isEmpty}
+	<div class={[box, 'border-base-content/50 opacity-70', klass]} in:fade={{ duration: 200 }}>
+		<GhostIcon size={18} />
+		<span>{empty}</span>
+	</div>
+{/if}

package/dist/loading/Loading.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { RemoteQuery } from '@sveltejs/kit';
+import type { ClassValue } from 'svelte/elements';
+type $$ComponentProps = {
+    query: RemoteQuery<unknown>;
+    empty?: string;
+    error?: string;
+    class?: ClassValue;
+};
+declare const Loading: import("svelte").Component<$$ComponentProps, {}, "">;
+type Loading = ReturnType<typeof Loading>;
+export default Loading;

package/dist/loading/index.d.ts

@@ -0,0 +1 @@
+export { default as Loading } from './Loading.svelte';

package/dist/loading/index.js

@@ -0,0 +1 @@
+export { default as Loading } from './Loading.svelte';

package/dist/popover/Popover.svelte

@@ -6,7 +6,7 @@
 		type PopoverOptions,
 		type PopoverType,
 		usePopover
-	} from './popover.svelte.ts'
+	} from './popover.svelte.js'
 
 	let {
 		children,

package/dist/popover/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Popover } from './Popover.svelte';
-export * from './popover.svelte.ts';
+export * from './popover.svelte.js';

package/dist/popover/index.js

@@ -1,2 +1,2 @@
 export { default as Popover } from './Popover.svelte';
-export * from './popover.svelte.ts';
+export * from './popover.svelte.js';

package/dist/popover/popover.svelte.d.ts

@@ -10,8 +10,11 @@ export type PopoverOptions = {
     listenHover?: boolean;
     /** Only when listenHover={true} */
     hideDelay?: number;
+    onShow?: () => void;
+    onHide?: () => void;
+    hotKey?: string;
 };
-export declare function usePopover({ mode, placement, listenClick, listenFocus, listenHover, hideDelay }?: PopoverOptions): {
+export declare function usePopover({ mode, placement, listenClick, listenFocus, listenHover, hideDelay, onShow, onHide, hotKey }?: PopoverOptions): {
     show: () => void;
     hide: () => void;
     readonly isOpen: boolean;

package/dist/popover/popover.svelte.js

@@ -16,7 +16,7 @@ const placements = {
     'right-start': 'right span-bottom'
 };
 let popoverInstanceCount = 0;
-export function usePopover({ mode = 'auto', placement = 'bottom-start', listenClick = true, listenFocus = true, listenHover = false, hideDelay = 400 } = {}) {
+export function usePopover({ mode = 'auto', placement = 'bottom-start', listenClick = true, listenFocus = true, listenHover = false, hideDelay = 400, onShow, onHide, hotKey } = {}) {
     const uid = popoverInstanceCount++;
     const anchorName = `--anchor-${uid}`;
     let popover = $state();
@@ -24,9 +24,11 @@ export function usePopover({ mode = 'auto', placement = 'bottom-start', listenCl
     const hideDebounced = debounce(hide, hideDelay);
     function show() {
         popover?.showPopover();
+        onShow?.();
     }
     function hide() {
         popover?.hidePopover();
+        onHide?.();
     }
     function onMouseEnter() {
         hideDebounced.clear();
@@ -48,6 +50,9 @@ export function usePopover({ mode = 'auto', placement = 'bottom-start', listenCl
             cleanups.push(on(activator, 'mouseenter', onMouseEnter));
             cleanups.push(on(activator, 'mouseleave', hideDebounced));
         }
+        if (hotKey) {
+            cleanups.push(on(window, 'keydown', handleHotKey));
+        }
         return () => {
             for (const cleanup of cleanups)
                 cleanup();
@@ -65,6 +70,14 @@ export function usePopover({ mode = 'auto', placement = 'bottom-start', listenCl
                 cleanup();
         };
     }
+    async function handleHotKey(event) {
+        const { metaKey, ctrlKey, key } = event;
+        if ((metaKey || ctrlKey) && key === hotKey) {
+            event.preventDefault();
+            show();
+            return;
+        }
+    }
     return {
         show,
         hide,

package/dist/remote/index.d.ts

@@ -1 +1 @@
-export * from './useForm.ts';
+export * from './useForm.js';

package/dist/remote/index.js

@@ -1 +1 @@
-export * from './useForm.ts';
+export * from './useForm.js';

package/dist/remote/useForm.d.ts

@@ -1,6 +1,16 @@
 import type { RemoteForm, RemoteFormInput } from '@sveltejs/kit';
 import type { StandardSchemaV1 } from 'runed/kit';
+import { type Attachment } from 'svelte/attachments';
 /**
  * Enable preflight and run validation on input
+ * @deprecated
  */
 export declare function useForm<Input extends RemoteFormInput | undefined, Output>(remoteForm: RemoteForm<Input, Output>, schema: StandardSchemaV1<Input>, debounceMs?: number): RemoteForm<Input, Output>;
+export declare function validationOnInput<Input extends RemoteFormInput | undefined, Output>(remoteForm: RemoteForm<Input, Output>, debounceMs?: number): Attachment<HTMLFormElement>;
+type UseEnhanceCallbackOptions<Input extends RemoteFormInput | void> = {
+    onSuccess?: (data: Input, form: HTMLFormElement) => void;
+    onError?: (err: unknown) => void;
+};
+type EnhanceCallback<Input extends RemoteFormInput | void> = Parameters<RemoteForm<Input, unknown>['enhance']>[0];
+export declare function useEnhanceCallback<Input extends RemoteFormInput | void>({ onSuccess, onError }: UseEnhanceCallbackOptions<Input>): EnhanceCallback<Input>;
+export {};

package/dist/remote/useForm.js

@@ -3,8 +3,14 @@ import { createAttachmentKey } from 'svelte/attachments';
 import { on } from 'svelte/events';
 /**
  * Enable preflight and run validation on input
+ * @deprecated
  */
 export function useForm(remoteForm, schema, debounceMs = 1000) {
+    const validation = validationOnInput(remoteForm, debounceMs);
+    Object.assign(remoteForm, { [createAttachmentKey()]: validation });
+    return remoteForm.preflight(schema);
+}
+export function validationOnInput(remoteForm, debounceMs = 1000) {
     const validation = (formElement) => {
         const debouncedValidate = debounce(() => remoteForm.validate(), debounceMs);
         return on(formElement, 'input', ({ target }) => {
@@ -20,6 +26,17 @@ export function useForm(remoteForm, schema, debounceMs = 1000) {
             }
         });
     };
-    Object.assign(remoteForm, { [createAttachmentKey()]: validation });
-    return remoteForm.preflight(schema);
+    return validation;
+}
+export function useEnhanceCallback({ onSuccess, onError }) {
+    return ({ submit, data, form }) => {
+        submit()
+            .then(() => {
+            onSuccess?.(data, form);
+        })
+            .catch((err) => {
+            console.error(err);
+            onError?.(err);
+        });
+    };
 }

package/dist/search/Spans.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { SearchQueryResultSpan } from './search.ts'
+	import type { SearchQueryResultSpan } from './search.js'
 
 	let { spans }: { spans: SearchQueryResultSpan[] } = $props()
 </script>

package/dist/search/Spans.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SearchQueryResultSpan } from './search.ts';
+import type { SearchQueryResultSpan } from './search.js';
 type $$ComponentProps = {
     spans: SearchQueryResultSpan[];
 };

package/dist/search/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Spans } from './Spans.svelte';
-export * from './search.ts';
+export * from './search.js';

package/dist/search/index.js

@@ -1,2 +1,2 @@
 export { default as Spans } from './Spans.svelte';
-export * from './search.ts';
+export * from './search.js';

package/dist/search/search.d.ts

@@ -0,0 +1,38 @@
+import type { FuseResultMatch, IFuseOptions } from 'fuse.js';
+import Fuse from 'fuse.js';
+export type CombinedFuseResult<T> = {
+    item: T;
+    score: number;
+    matches: FuseResultMatch[];
+};
+type Keys<Item> = Partial<Record<keyof Item, Partial<{
+    weight: number;
+    getFn: (item: Item) => string;
+}>>>;
+export type SearchOptions<Item, K extends Keys<Item> = Keys<Item>> = {
+    items?: Item[];
+    keys: K;
+} & Omit<IFuseOptions<Item>, 'includeMatches' | 'keys'>;
+export type SearchQueryOptions = {
+    tokensSeparator?: string;
+    tokensMaxCount?: number;
+};
+export type SearchQueryResult<Item, K extends Keys<Item> = Keys<Item>> = {
+    item: Item;
+    spans: Record<keyof K, SearchQueryResultSpan[]>;
+    score: number;
+};
+export type SearchQueryResultSpan = {
+    value: string;
+    isMatch: boolean;
+};
+export declare function useSearch<Item extends object, K extends Keys<Item>>({ items, keys, ...fuseOptions }: SearchOptions<Item, K>): {
+    fuse: Fuse<Item>;
+    query: (value: string, { tokensSeparator, tokensMaxCount }?: SearchQueryOptions) => SearchQueryResult<Item, K>[];
+    prismaWhereTokens: (value: string, { tokensSeparator, tokensMaxCount }?: SearchQueryOptions) => {
+        OR: { [P in keyof K]?: {
+            contains: string;
+        } | undefined; }[];
+    }[];
+};
+export {};

package/dist/search/search.js

@@ -3,6 +3,8 @@ import { mergeRanges } from 'perod';
 export function useSearch({ items = [], keys, ...fuseOptions }) {
     const fuse = new Fuse(items, {
         includeMatches: true,
+        ignoreLocation: true,
+        ignoreDiacritics: true,
         keys: Object.entries(keys).map(([name, param]) => ({
             name,
             ...(param || {})
@@ -28,9 +30,20 @@ export function useSearch({ items = [], keys, ...fuseOptions }) {
         }
         return queryResults;
     }
+    function prismaWhereTokens(value, { tokensSeparator = ' ', tokensMaxCount = 4 } = {}) {
+        const tokens = value.split(tokensSeparator).slice(0, tokensMaxCount);
+        const whereTokens = [];
+        for (const token of tokens) {
+            whereTokens.push({
+                OR: Object.keys(keys).map((k) => ({ [k]: { contains: token } }))
+            });
+        }
+        return whereTokens;
+    }
     return {
-        ...fuse,
-        query
+        fuse,
+        query,
+        prismaWhereTokens
     };
 }
 function getSpans(key, matches) {

package/dist/ui/copy/ButtonCopy.svelte

@@ -3,7 +3,7 @@
 	import type { Component } from 'svelte'
 	import type { ClassValue } from 'svelte/elements'
 	import { tip } from '../../action/tip.js'
-	import { type UseCopyOptions, useCopy } from './useCopy.svelte.ts'
+	import { type UseCopyOptions, useCopy } from './useCopy.svelte.js'
 
 	let {
 		title = '',

package/dist/ui/copy/ButtonCopy.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type IconProps } from '@lucide/svelte';
 import type { Component } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
-import { type UseCopyOptions } from './useCopy.svelte.ts';
+import { type UseCopyOptions } from './useCopy.svelte.js';
 type $$ComponentProps = {
     /** Tooltip text */
     title?: string;

package/dist/ui/copy/index.d.ts

@@ -1,2 +1,2 @@
 export { default as ButtonCopy } from './ButtonCopy.svelte';
-export * from './useCopy.svelte.ts';
+export * from './useCopy.svelte.js';

package/dist/ui/copy/index.js

@@ -1,2 +1,2 @@
 export { default as ButtonCopy } from './ButtonCopy.svelte';
-export * from './useCopy.svelte.ts';
+export * from './useCopy.svelte.js';

package/dist/ui/drawer/Drawer.svelte

@@ -8,7 +8,7 @@
 	import { XIcon } from '@lucide/svelte'
 
 	import { goto } from '$app/navigation'
-	import { urlParam } from '../../state/param.svelte.ts'
+	import { urlParam } from '../../state/param.svelte.js'
 	import { drawerFly } from './drawerFly.js'
 	import { writable } from 'svelte/store'
 	import { useLayer } from './useLayer.svelte.js'

package/dist/ui/drawer/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Drawer } from './Drawer.svelte';
+export { default as Drawer, transitionX } from './Drawer.svelte';
 export * from './drawerFly.js';

package/dist/ui/drawer/index.js

@@ -1,2 +1,2 @@
-export { default as Drawer } from './Drawer.svelte';
+export { default as Drawer, transitionX } from './Drawer.svelte';
 export * from './drawerFly.js';

package/dist/ui/pagination/Pagination.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ChevronLeftIcon, ChevronRightIcon } from '@lucide/svelte'
 	import { tip } from '../../action/tip.js'
-	import { param, urlParam } from '../../state/index.ts'
+	import { param, urlParam } from '../../state/index.js'
 
 	let { take = 20 }: { take?: number } = $props()
 

package/dist/ui/range/RangePickerButton.svelte

@@ -2,7 +2,7 @@
 	import { CalendarRangeIcon } from '@lucide/svelte'
 	import { slide } from 'svelte/transition'
 	import { goto } from '$app/navigation'
-	import { param, urlParam } from '../../state/param.svelte.ts'
+	import { param, urlParam } from '../../state/param.svelte.js'
 	import { DropDown } from '../menu/index.js'
 	import { formatRangeShort } from './format.js'
 	import { type RangeAsDate, RangePicker } from './index.js'

package/dist/ui/table/TableFieldsEdition.svelte

@@ -11,7 +11,7 @@
 	import { page } from '$app/state'
 	import { listEditable } from '../../action/list/index.js'
 	import { tip } from '../../action/tip.js'
-	import { param, urlParam } from '../../state/param.svelte.ts'
+	import { param, urlParam } from '../../state/param.svelte.js'
 	import { DropDown } from '../menu/index.js'
 	import { context } from './context.js'
 	import type { ItemBase, TableField } from './index.js'

package/dist/ui/table/head/TableHeadDate.svelte

@@ -2,7 +2,7 @@
 	import { CalendarArrowDownIcon, CalendarArrowUpIcon, CalendarSearchIcon } from '@lucide/svelte'
 	import { goto } from '$app/navigation'
 	import { page } from '$app/state'
-	import { urlParam } from '../../../state/param.svelte.ts'
+	import { urlParam } from '../../../state/param.svelte.js'
 	import { DropDown } from '../../menu/index.js'
 	import { formatRange } from '../../range/format.js'
 	import { type RangeAsDate, RangePicker } from '../../range/index.js'

package/dist/ui/table/head/TableHeadNumber.svelte

@@ -4,7 +4,7 @@
 	import z from 'zod'
 	import { goto } from '$app/navigation'
 	import { page } from '$app/state'
-	import { urlParam } from '../../../state/param.svelte.ts'
+	import { urlParam } from '../../../state/param.svelte.js'
 	import { DropDown } from '../../menu/index.js'
 	import { zodCoerceJsonRecord } from '../../../validation/zod.js'
 	import type { ItemBase, TableField } from '../field.js'

package/dist/ui/table/head/TableHeadSelect.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="Item extends ItemBase">
 	import { ListFilterIcon } from '@lucide/svelte'
 	import { page } from '$app/state'
-	import { param, urlParam } from '../../../state/param.svelte.ts'
+	import { param, urlParam } from '../../../state/param.svelte.js'
 	import { DropDown } from '../../menu/index.js'
 	import type { ItemBase, TableField } from '../index.js'
 	import { jsonParse } from '../../../utils/jsonParse.js'

package/dist/utils/options.d.ts

@@ -1,6 +1,6 @@
 import type { IconProps } from '@lucide/svelte';
 import type { Component } from 'svelte';
-import type { InputProps } from '../input/type.ts';
+import type { InputProps } from '../input/type.js';
 export type Option = {
     value: string;
     label: string;

package/dist/utils/options.js

@@ -1,5 +1,5 @@
 import z from 'zod';
-import { zodCoerceJsonValue } from '../validation/zod.ts';
+import { zodCoerceJsonValue } from '../validation/zod.js';
 export function parseOptions(options) {
     if (typeof options === 'string') {
         options = zodCoerceJsonValue.pipe(z.array(z.string())).default([]).parse(options);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fuma",
-	"version": "2.1.3",
+	"version": "2.1.5",
 	"description": "My fullstack material build with sveltekit, daisyui, zod, prisma, lucia",
 	"author": {
 		"name": "Jonas Voisard",
@@ -8,10 +8,10 @@
 	},
 	"scripts": {
 		"dev": "vite dev --host",
-		"build": "vite build && npm run package",
+		"build": "vite build && bun run package",
 		"preview": "vite preview --host",
 		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
+		"prepublishOnly": "bun run package",
 		"sync": "svelte-kit sync",
 		"svelte-check": "svelte-check --tsconfig ./tsconfig.json",
 		"check": "run-p sync svelte-check lint",