fuma 2.1.1 → 2.1.4

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,
@@ -10,7 +10,6 @@
 		checked = $bindable(),
 		hint,
 		variant = 'checkbox',
-		class: klass,
 		...props
 	}: {
 		label: string
@@ -58,7 +57,8 @@
 </div>
 
 {#snippet variantCheckbox()}
-	<div class={['squircle h-5 w-5 outline', 'bg-base-100']}>
+	<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape  -->
+	<div class={['h-5 w-5 rounded-full outline', 'bg-base-100']} style="corner-shape: squircle;">
 		<div
 			class={[
 				'squircle grid h-5 w-5 place-content-center',
@@ -66,6 +66,7 @@
 				'ease scale-0 opacity-0',
 				isChecked && 'scale-[80%] opacity-100'
 			]}
+			style="corner-shape: squircle"
 		>
 			<CheckIcon size={18} class={['stroke-base-100']} strokeWidth={4} />
 		</div>
@@ -92,10 +93,6 @@
 		transition-timing-function: cubic-bezier(0.275, 0.485, 0.515, 1.45);
 		transition-duration: 200ms;
 	}
-	.squircle {
-		corner-shape: squircle;
-		border-radius: 100%;
-	}
 
 	label:has(input[aria-invalid='true']) {
 		--input-color: var(--color-error);

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 {
@@ -21,7 +21,7 @@
 <div class="flex flex-col gap-1">
 	<span class="label px-3 text-sm">{label}</span>
 	<div class="join join-vertical">
-		{#each options as option}
+		{#each options as option (option.value)}
 			{@const { class: klass, ...props } = option}
 			<label class="input join-item not-disabled:cursor-pointer not-disabled:hover:bg-base-200">
 				{#if option.icon}

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,
@@ -31,7 +31,7 @@
 			bind:value
 			{...props}
 		>
-			{#each options as option}
+			{#each options as option (option.value)}
 				<option value={option.value} class={['', option.class]} disabled={option.disabled}>
 					{#if option.icon}
 						<option.icon size={18} opacity={0.8} />

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,
@@ -22,8 +22,7 @@
 	new TextareaAutosize({
 		element: () => textarea,
 		input: () => field?.value() || value || '',
-		// svelte-ignore state_referenced_locally
-		maxHeight
+		maxHeight: (() => maxHeight)()
 	})
 </script>
 

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/Issues.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
-	import type { RemoteFormField } from '@sveltejs/kit'
+	import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit'
 	import { slide } from 'svelte/transition'
 
 	let {
 		field
 	}: {
-		// biome-ignore lint/suspicious/noExplicitAny: Wathever then value type... we use just field.issues()
-		field: RemoteFormField<any> | undefined
+		field: RemoteFormField<RemoteFormFieldValue> | undefined
 	} = $props()
 </script>
 
 {#if field?.issues()?.length}
 	<div class="my-1 flex flex-col text-xs text-error" transition:slide={{ duration: 200 }}>
-		{#each field.issues() as issue}
+		{#each field.issues() as issue (issue.path)}
 			<span>
 				{issue.message}
 			</span>

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

@@ -1,6 +1,6 @@
-import type { RemoteFormField } from '@sveltejs/kit';
+import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
 type $$ComponentProps = {
-    field: RemoteFormField<any> | undefined;
+    field: RemoteFormField<RemoteFormFieldValue> | undefined;
 };
 declare const Issues: import("svelte").Component<$$ComponentProps, {}, "">;
 type Issues = ReturnType<typeof Issues>;

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';