fuma 2.1.5 → 2.2.7

package/dist/input/InputSelect.svelte

@@ -1,109 +1,251 @@
 <script lang="ts" generics="Item">
-	import { ChevronsUpDownIcon } from '@lucide/svelte'
+	import { ChevronsUpDownIcon, SearchIcon, XIcon } from '@lucide/svelte'
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import type { Snippet } from 'svelte'
-	import { useCommand } from '../command/command.svelte.js'
-	import { usePopover } from '../popover/popover.svelte.js'
+	import type { ClassValue, HTMLLiAttributes } from 'svelte/elements'
+	import { tip } from '../action/tip.js'
+	import { useCommand } from '../command/useCommand.svelte.js'
+	import Loading from '../loading/Loading.svelte'
+	import { type PopoverType, usePopover } from '../popover/usePopover.svelte.js'
 	import Issues from './Issues.svelte'
+	import {
+		defaultGetLabel,
+		defaultGetValue,
+		type ItemsSource,
+		useItems
+	} from './useItems.svelte.js'
 
 	let {
 		label,
 		items,
-		getValue,
-		selected,
-		proposal,
+		getValue = defaultGetValue,
+		getLabel = (item) => defaultGetLabel(item, getValue),
+		filter,
+		searchable,
+		debounceMs,
+		selected = defaultSnippet,
+		proposal = defaultSnippet,
 		field,
-		value = $bindable()
+		value = $bindable(),
+		placeholder = 'Selectionner une valeur',
+		class: klass,
+		nullable,
+		hint,
+		append,
+		header,
+		proposalAppend,
+		onSelect,
+		hotKey,
+		variant = 'block',
+		propsLi
 	}: {
-		label: string
-		items: Item[]
-		getValue: (item: Item) => string
+		/** Un tableau déjà chargé, une fonction (synchrone ou non), ou une remote query. */
+		items: ItemsSource<Item>
+		label?: string
+		getValue?: (item: NoInfer<Item>) => string
+		/** Libellé affiché à défaut de snippet, et base du filtre d'une source tableau. */
+		getLabel?: (item: NoInfer<Item>) => string
+		/** Ne s'applique qu'à une source tableau: une fonction porte son propre filtre. */
+		filter?: (item: NoInfer<Item>, search: string) => boolean
+		/** Par défaut: toujours pour une fonction, au-delà de 7 entrées pour un tableau. */
+		searchable?: boolean
+		debounceMs?: number
 		selected?: Snippet<[Item]>
-		proposal?: Snippet<[Item, { isSelected: boolean; isFocus: boolean }]>
+		proposal?: Snippet<[Item, { popover: PopoverType; isSelected: boolean; isFocus: boolean }]>
+		proposalAppend?: Snippet<
+			[Item, { popover: PopoverType; isSelected: boolean; isFocus: boolean }]
+		>
 		field?: RemoteFormField<string>
-		value?: string
+		/**
+		 * L'item, pas sa valeur soumise. Un parent qui le repilote après coup — remise à
+		 * zéro, changement de jeu d'options — doit le lier par `bind:`: passé en simple
+		 * prop, un `$bindable` cesse de suivre le parent dès que le composant y a écrit.
+		 */
+		value?: NoInfer<Item>
+		placeholder?: string
+		class?: ClassValue
+		nullable?: boolean
+		hint?: Snippet<[Item | undefined]>
+		/** Rendu à droite du champ de recherche: une action « créer », typiquement. */
+		append?: Snippet<[PopoverType]>
+		header?: Snippet<[PopoverType]>
+		onSelect?: (item: NoInfer<Item> | undefined, popover: PopoverType) => void
+		hotKey?: string
+		variant?: 'floating' | 'block'
+		propsLi?: HTMLLiAttributes
 	} = $props()
 
-	let selectedItem = $state<Item | undefined>(undefined)
+	const inputId = $props.id()
 
-	$effect(() => {
-		const targetValue = field?.value() ?? value
-		selectedItem = items.find((item) => getValue(item) === targetValue)
+	let search = $state('')
+	// Une énumération courte n'a que faire d'un champ de recherche; une fonction, elle, ne
+	// peut pas s'en passer, puisque le composant ne sait pas la filtrer.
+	const isSearchable = $derived(searchable ?? (Array.isArray(items) ? items.length > 7 : true))
+	const query = useItems({
+		source: () => items,
+		search: () => search,
+		getLabel: (item) => getLabel(item),
+		filter: () => filter,
+		debounceMs: (() => debounceMs)()
 	})
+	const options = $derived(query.current ?? [])
+
+	// `value` porte l'item et non sa valeur soumise: celle-ci s'en dérive par `getValue`,
+	// alors que l'inverse demanderait une requête. C'est aussi ce qui rend l'état initial
+	// gratuit — pas de `defaultValue` à réconcilier avec la valeur du champ.
+	const submittedValue = $derived(value ? getValue(value) : undefined)
 
-	const popover = usePopover({ listenFocus: false })
-	const command = useCommand({
+	export const popover = usePopover({
+		listenFocus: false,
+		listenFocusout: true,
+		onShow: () => command.focusTrigger(),
+		hotKey: (() => hotKey)()
+	})
+	export const command = useCommand({
 		isEnable: () => popover.isOpen,
 		onSelect: (index) => {
 			popover.hide()
-			const item = items[index]
+			const item = options[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) {
+		value = item
+		// L'input caché suffit à soumettre; `set` garde la validation du formulaire à jour.
+		field?.set(item && getValue(item))
+	}
+
+	const isButtonSetNullVisible = $derived(nullable && value)
 </script>
 
-{#if field?.value() !== undefined}
-	<input {...field.as('hidden', field.value() as string)} />
+{#snippet defaultSnippet(item: Item)}
+	<span>{getLabel(item)}</span>
+{/snippet}
+
+{#snippet triggerButton()}
+	<button
+		id={inputId}
+		type="button"
+		class={['input', field?.issues()?.length && 'input-error', klass]}
+		{...popover.trigger}
+		{...isSearchable ? {} : command.trigger}
+	>
+		<div class="grow text-left">
+			{#if !value}
+				<span class="opacity-60">{placeholder}</span>
+			{:else}
+				<!-- item.icon not rerender if not wrapped in #key -->
+				{#key value}{@render selected(value)}{/key}
+			{/if}
+		</div>
+		<ChevronsUpDownIcon size={14} opacity={0.7} />
+	</button>
+{/snippet}
+
+<!-- Rien à soumettre tant qu'aucune valeur n'est choisie: `as('hidden')` refuse une
+     valeur vide. -->
+{#if field && submittedValue}
+	<input {...field.as('hidden', submittedValue)} />
 {/if}
 
-<div>
-	<label class="floating-label">
-		<span>{label}</span>
-		<button
-			type="button"
-			class={['input', field?.issues.length && 'input-error']}
-			{...popover.trigger}
-			{...command.trigger}
-		>
-			<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>
+<div class="contents">
+	{#if !label}
+		{@render triggerButton()}
+		<Issues {field} />
+		{@render hint?.(value)}
+	{:else if variant === 'floating'}
+		<label class="floating-label">
+			<span>{label}</span>
+			{@render triggerButton()}
+			<Issues {field} />
+			{@render hint?.(value)}
+		</label>
+	{:else}
+		<fieldset class="fieldset">
+			<label class="label text-wrap" for={inputId}>{label}</label>
+			{@render triggerButton()}
+			<Issues {field} />
+			{@render hint?.(value)}
+		</fieldset>
+	{/if}
 
 	<div
 		{...popover.content}
 		class={['my-2 rounded-box border bg-base-100 shadow-xl']}
-		style="width: anchor-size(width);"
+		style="min-width: anchor-size(width);"
 		tabindex="-1"
 	>
-		<ul class="menu max-h-80 w-full flex-nowrap">
-			{#each items as item, index (item)}
-				{@const isSelected = index === command.selectedIndex}
+		{#if isSearchable || isButtonSetNullVisible || append || header}
+			<div class="sticky top-0 z-10 flex gap-2 bg-base-100/10 p-1 backdrop-blur-md">
+				{#if header}
+					{@render header(popover)}
+				{:else}
+					{#if isSearchable}
+						<label class="input grow input-ghost input-sm">
+							<SearchIcon opacity={0.6} size={20} />
+							<input
+								type="search"
+								placeholder="Recherche"
+								autocomplete="off"
+								bind:value={search}
+								{...command.trigger}
+							/>
+						</label>
+					{:else}
+						<div class="grow"></div>
+					{/if}
+					{#if isButtonSetNullVisible}
+						<button
+							class="btn btn-square btn-soft btn-sm"
+							type="button"
+							onclick={() => {
+								setValue(undefined)
+								onSelect?.(undefined, popover)
+								popover.hide()
+							}}
+							use:tip={{ content: 'Pas de sélection' }}
+						>
+							<XIcon />
+						</button>
+					{/if}
+					{@render append?.(popover)}
+				{/if}
+			</div>
+		{/if}
+
+		<ul
+			class={[
+				'menu max-h-80 w-full flex-nowrap gap-1 p-1',
+				(isSearchable || append || header) && 'pt-0'
+			]}
+		>
+			{#each options as item, index (item)}
+				{@const isSelected = submittedValue === getValue(item)}
 				{@const isFocus = index === command.focusIndex}
-				<li>
+				<li {...propsLi}>
 					<button
-						{...command.item(index)}
-						class={[isFocus && 'menu-focus']}
+						{...command.item(index, '')}
+						class={[
+							isSelected && 'border-hard border',
+							isFocus && 'menu-focus',
+							'grow 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, { popover, isSelected, isFocus })}
 					</button>
+					{@render proposalAppend?.(item, { popover, isSelected, isFocus })}
 				</li>
 			{/each}
 		</ul>
+
+		<Loading {query} />
 	</div>
-	<Issues {field} />
 </div>
 
 <style>

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

@@ -1,19 +1,76 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import type { Snippet } from 'svelte';
+import type { ClassValue, HTMLLiAttributes } from 'svelte/elements';
+import { type PopoverType } from '../popover/usePopover.svelte.js';
+import { type ItemsSource } from './useItems.svelte.js';
 declare function $$render<Item>(): {
     props: {
-        label: string;
-        items: Item[];
-        getValue: (item: Item) => string;
+        /** Un tableau déjà chargé, une fonction (synchrone ou non), ou une remote query. */
+        items: ItemsSource<Item>;
+        label?: string;
+        getValue?: (item: NoInfer<Item>) => string;
+        /** Libellé affiché à défaut de snippet, et base du filtre d'une source tableau. */
+        getLabel?: (item: NoInfer<Item>) => string;
+        /** Ne s'applique qu'à une source tableau: une fonction porte son propre filtre. */
+        filter?: (item: NoInfer<Item>, search: string) => boolean;
+        /** Par défaut: toujours pour une fonction, au-delà de 7 entrées pour un tableau. */
+        searchable?: boolean;
+        debounceMs?: number;
         selected?: Snippet<[Item]>;
         proposal?: Snippet<[Item, {
+            popover: PopoverType;
+            isSelected: boolean;
+            isFocus: boolean;
+        }]>;
+        proposalAppend?: Snippet<[Item, {
+            popover: PopoverType;
             isSelected: boolean;
             isFocus: boolean;
         }]>;
         field?: RemoteFormField<string>;
-        value?: string;
+        /**
+         * L'item, pas sa valeur soumise. Un parent qui le repilote après coup — remise à
+         * zéro, changement de jeu d'options — doit le lier par `bind:`: passé en simple
+         * prop, un `$bindable` cesse de suivre le parent dès que le composant y a écrit.
+         */
+        value?: NoInfer<Item>;
+        placeholder?: string;
+        class?: ClassValue;
+        nullable?: boolean;
+        hint?: Snippet<[Item | undefined]>;
+        /** Rendu à droite du champ de recherche: une action « créer », typiquement. */
+        append?: Snippet<[PopoverType]>;
+        header?: Snippet<[PopoverType]>;
+        onSelect?: (item: NoInfer<Item> | undefined, popover: PopoverType) => void;
+        hotKey?: string;
+        variant?: "floating" | "block";
+        propsLi?: HTMLLiAttributes;
+    };
+    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: {};
@@ -23,7 +80,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/InputSelectNative.svelte

@@ -11,38 +11,63 @@
 		options: optionsProp,
 		class: klass,
 		multiple,
+		variant = 'block',
 		...props
 	}: {
 		label: string
 		options: Options
 		field?: RemoteFormField<string | string[]>
+		/**
+		 * Sans `field`, la valeur liée. Avec, la valeur initiale du champ — celui-ci prend
+		 * ensuite le relais et devient la source de vérité.
+		 */
 		value?: string | string[]
+		variant?: 'floating' | 'block'
 	} & SelectProps = $props()
 
 	const options = $derived(parseOptions(optionsProp))
+	const inputId = $props.id()
+
+	// Sans valeur initiale, `as()` rend `value: undefined` tant que le champ n'a rien reçu: le
+	// moindre re-rendu du spread — l'`aria-invalid` d'une soumission refusée, typiquement —
+	// désélectionne alors tout. La liaison, elle, ne rattrape rien: sa source n'a pas bougé.
+	const fieldProps = $derived.by(() => {
+		if (!field) return undefined
+		if (multiple === true) {
+			const initial = Array.isArray(value) ? value : undefined
+			return initial ? field.as('select multiple', initial) : field.as('select multiple')
+		}
+		const initial = typeof value === 'string' ? value : undefined
+		return initial === undefined ? field.as('select') : field.as('select', initial)
+	})
 </script>
 
-<div>
-	<label class="floating-label">
+{#snippet snippetSelect()}
+	<select id={inputId} class="select w-full" {...fieldProps} bind:value {...props}>
+		{#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} />
+				{/if}
+				<span class="grow">{option.label}</span>
+			</option>
+		{/each}
+	</select>
+{/snippet}
+
+{#if variant === 'floating'}
+	<label class={['floating-label', klass]}>
 		<span>{label}</span>
-		<select
-			class={['select', klass]}
-			{...field?.as(multiple !== true ? 'select' : 'select multiple')}
-			bind:value
-			{...props}
-		>
-			{#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} />
-					{/if}
-					<span class="grow">{option.label}</span>
-				</option>
-			{/each}
-		</select>
+		{@render snippetSelect()}
+		<Issues {field} />
 	</label>
-	<Issues {field} />
-</div>
+{:else}
+	<fieldset class={['fieldset', klass]}>
+		<label class="label text-wrap" for={inputId}>{label}</label>
+		{@render snippetSelect()}
+		<Issues {field} />
+	</fieldset>
+{/if}
 
 <style>
 	option::checkmark {

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

@@ -5,7 +5,12 @@ type $$ComponentProps = {
     label: string;
     options: Options;
     field?: RemoteFormField<string | string[]>;
+    /**
+     * Sans `field`, la valeur liée. Avec, la valeur initiale du champ — celui-ci prend
+     * ensuite le relais et devient la source de vérité.
+     */
     value?: string | string[];
+    variant?: 'floating' | 'block';
 } & SelectProps;
 declare const InputSelectNative: import("svelte").Component<$$ComponentProps, {}, "value">;
 type InputSelectNative = ReturnType<typeof InputSelectNative>;

package/dist/input/InputString.svelte

@@ -9,11 +9,17 @@
 		value = $bindable(),
 		type = 'text',
 		class: klass,
+		variant = 'block',
 		...props
 	}: {
 		label: string
 		field?: RemoteFormField<string>
+		/**
+		 * Sans `field`, la valeur liée. Avec, la valeur initiale du champ — celui-ci prend
+		 * ensuite le relais et devient la source de vérité.
+		 */
 		value?: string
+		variant?: 'floating' | 'block'
 		type?:
 			| 'text'
 			| 'email'
@@ -29,17 +35,41 @@
 			| 'color'
 			| 'select'
 	} & InputProps = $props()
+
+	const inputId = $props.id()
+	const inputProps = $derived({
+		id: inputId,
+		class: 'input w-full',
+		placeholder: variant === 'floating' ? label : '',
+		...props
+	})
 </script>
 
-<label class="floating-label">
-	<span>{label}</span>
+{#snippet snippetInput()}
 	{#if field}
-		<input placeholder={label} class={['input', klass]} {...field.as(type)} {...props} />
+		{#if value === undefined}
+			<input {...inputProps} {...field.as(type)} />
+		{:else}
+			<input {...inputProps} {...field.as(type, value)} />
+		{/if}
 	{:else}
-		<input placeholder={label} class={['input', klass]} {type} bind:value {...props} />
+		<input {...inputProps} {type} bind:value />
 	{/if}
-	<Issues {field} />
-</label>
+{/snippet}
+
+{#if variant === 'floating'}
+	<label class={['floating-label', klass]}>
+		<span>{label}</span>
+		{@render snippetInput()}
+		<Issues {field} />
+	</label>
+{:else}
+	<fieldset class={['fieldset', klass]}>
+		<label class="label text-wrap" for={inputId}>{label}</label>
+		{@render snippetInput()}
+		<Issues {field} />
+	</fieldset>
+{/if}
 
 <style>
 	input[aria-invalid='true'] {

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

@@ -3,7 +3,12 @@ import type { InputProps } from './type.js';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<string>;
+    /**
+     * Sans `field`, la valeur liée. Avec, la valeur initiale du champ — celui-ci prend
+     * ensuite le relais et devient la source de vérité.
+     */
     value?: string;
+    variant?: 'floating' | 'block';
     type?: 'text' | 'email' | 'password' | 'url' | 'tel' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'select';
 } & InputProps;
 declare const InputString: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/input/InputTextarea.svelte

@@ -10,12 +10,18 @@
 		value = $bindable(),
 		class: klass,
 		maxHeight = 200,
+		variant = 'block',
 		...props
 	}: {
 		label: string
 		field?: RemoteFormField<string>
+		/**
+		 * Sans `field`, la valeur liée. Avec, la valeur initiale du champ — celui-ci prend
+		 * ensuite le relais et devient la source de vérité.
+		 */
 		value?: string
 		maxHeight?: number
+		variant?: 'floating' | 'block'
 	} & TextareaProps = $props()
 
 	let textarea = $state<HTMLTextAreaElement>()
@@ -24,20 +30,43 @@
 		input: () => field?.value() || value || '',
 		maxHeight: (() => maxHeight)()
 	})
+
+	const inputId = $props.id()
+	const textareaProps = $derived({
+		id: inputId,
+		class: 'textarea w-full',
+		placeholder: variant === 'floating' ? label : '',
+		...props
+	})
 </script>
 
-<label class="floating-label">
-	<span>{label}</span>
-	<textarea
-		placeholder={label}
-		class={['textarea', klass]}
-		bind:this={textarea}
-		{...field?.as('text')}
-		bind:value
-		{...props}
-	></textarea>
-	<Issues {field} />
-</label>
+{#snippet snippetInput()}
+	{#if field}
+		<!-- Pas de `bind:value` ici: avec un `field`, `value` n'est que la valeur initiale,
+		     comme dans InputString et InputNumber. -->
+		<textarea
+			bind:this={textarea}
+			{...textareaProps}
+			{...value === undefined ? field.as('text') : field.as('text', value)}
+		></textarea>
+	{:else}
+		<textarea bind:this={textarea} {...textareaProps} bind:value></textarea>
+	{/if}
+{/snippet}
+
+{#if variant === 'floating'}
+	<label class={['floating-label', klass]}>
+		<span>{label}</span>
+		{@render snippetInput()}
+		<Issues {field} />
+	</label>
+{:else}
+	<fieldset class={['fieldset', klass]}>
+		<label class="label text-wrap" for={inputId}>{label}</label>
+		{@render snippetInput()}
+		<Issues {field} />
+	</fieldset>
+{/if}
 
 <style>
 	textarea[aria-invalid='true'] {