fuma 2.1.6 → 2.5.0

package/dist/input/InputMultiSelect.svelte

@@ -0,0 +1,324 @@
+<script lang="ts" generics="Item">
+	import { CheckIcon, ChevronsUpDownIcon, SearchIcon, XIcon } from '@lucide/svelte'
+	import type { RemoteFormField } from '@sveltejs/kit'
+	import type { Snippet } from 'svelte'
+	import type { ClassValue } from 'svelte/elements'
+	import { slide } from 'svelte/transition'
+	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 = defaultGetValue,
+		getLabel = (item) => defaultGetLabel(item, getValue),
+		filter,
+		searchable,
+		debounceMs,
+		selected = defaultSnippet,
+		proposal = defaultSnippet,
+		field,
+		value = $bindable([]),
+		placeholder = 'Selectionner des valeurs',
+		canReset = false,
+		class: klass,
+		disabled = false,
+		hint,
+		append,
+		labelAppend,
+		onSelect,
+		hotKey,
+		variant = 'block'
+	}: {
+		/** 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 }]>
+		field?: RemoteFormField<string[]>
+		/**
+		 * Les items, pas leurs valeurs soumises. Un parent qui les repilote après coup doit
+		 * les 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
+		canReset?: boolean
+		class?: ClassValue
+		/** Les valeurs restent soumises, mais la sélection ne peut plus changer. */
+		disabled?: boolean
+		hint?: Snippet<[Item[]]>
+		/** Rendu à droite du champ de recherche: une action « créer », typiquement. */
+		append?: Snippet<[PopoverType]>
+		/** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+		labelAppend?: Snippet
+		onSelect?: (items: NoInfer<Item>[], popover: PopoverType) => void
+		hotKey?: string
+		variant?: 'floating' | 'block'
+	} = $props()
+
+	const inputId = $props.id()
+	const listId = `${inputId}-list`
+	// `<label for>` ne nomme que les éléments étiquetables, ce qu'un `div` n'est pas: sans
+	// cette référence explicite, le combobox reste sans nom accessible.
+	const labelId = `${inputId}-label`
+	let trigger = $state<HTMLDivElement>()
+
+	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 les items et non les valeurs soumises: celles-ci s'en dérivent 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 le champ.
+	const selectedValues = $derived(value.map(getValue))
+
+	export const popover = usePopover({
+		listenFocus: false,
+		listenFocusout: true,
+		onShow: () => command.focusTrigger(),
+		// Le déclencheur est un `div`: `disabled` ne le neutralise pas comme un bouton, et
+		// le raccourci ouvrirait un popover qu'aucun geste ne peut plus atteindre.
+		hotKey: (() => (disabled ? undefined : hotKey))()
+	})
+	// Un multi-select ne se referme pas à chaque choix: `popover.hide()` n'est appelé
+	// que par le bouton de fermeture.
+	export const command = useCommand({
+		isEnable: () => popover.isOpen,
+		onSelect: (index) => {
+			const item = options[index]
+			if (item) toggle(item)
+		}
+	})
+
+	function toggle(item: Item) {
+		const itemValue = getValue(item)
+		value = selectedValues.includes(itemValue)
+			? value.filter((selectedItem) => getValue(selectedItem) !== itemValue)
+			: [...value, item]
+		commit()
+	}
+
+	function remove(item: Item) {
+		const itemValue = getValue(item)
+		value = value.filter((selectedItem) => getValue(selectedItem) !== itemValue)
+		commit()
+	}
+
+	function commit() {
+		// Les cases cachées suffisent à soumettre; `set` garde la validation à jour.
+		field?.set(selectedValues)
+		// Un choix n'émet aucun évènement de formulaire: les cases sont écrites par le code,
+		// et le popover reste ouvert — rien ne rend donc la main au déclencheur, contrairement
+		// au select simple. Sans cette annonce, ce qui surveille le formulaire (une barre de
+		// sauvegarde) ne voit la sélection qu'au choix suivant.
+		trigger?.dispatchEvent(new Event('change', { bubbles: true }))
+		onSelect?.(value, popover)
+	}
+</script>
+
+{#snippet defaultSnippet(item: Item)}
+	<span>{getLabel(item)}</span>
+{/snippet}
+
+{#snippet triggerCombobox()}
+	<!-- Un `div` et non un `button`: les puces portent leur propre bouton de retrait, et
+	     un bouton ne peut pas en contenir un autre. -->
+	<div
+		bind:this={trigger}
+		id={inputId}
+		role="combobox"
+		aria-controls={listId}
+		aria-labelledby={label ? labelId : undefined}
+		aria-expanded={popover.isOpen}
+		aria-haspopup="listbox"
+		aria-disabled={disabled}
+		tabindex={disabled ? -1 : 0}
+		class={[
+			'input h-auto min-h-(--size) w-full flex-wrap items-center gap-1 py-1',
+			!disabled && 'cursor-pointer',
+			field?.issues()?.length && 'input-error',
+			klass
+		]}
+		onkeydown={(event) => {
+			if (disabled) return
+			if (event.key !== 'Enter' && event.key !== ' ') return
+			event.preventDefault()
+			popover.show()
+		}}
+		{...disabled ? {} : popover.trigger}
+		{...isSearchable || disabled ? {} : command.trigger}
+	>
+		{#if !value.length}
+			<span class="opacity-60">{placeholder}</span>
+		{:else}
+			{#each value as item (getValue(item))}
+				<span
+					class="badge items-center gap-1 badge-sm"
+					transition:slide={{ axis: 'x', duration: 150 }}
+				>
+					<!-- item.icon not rerender if not wrapped in #key -->
+					{#key item}{@render selected(item)}{/key}
+					{#if !disabled}
+						<button
+							type="button"
+							class="btn btn-circle btn-ghost btn-xs"
+							aria-label="Retirer"
+							use:tip={{ content: 'Retirer' }}
+							onclick={(event) => {
+								// Sans quoi le clic remonte au combobox et rouvre le popover.
+								event.stopPropagation()
+								remove(item)
+							}}
+						>
+							<XIcon size={12} />
+						</button>
+					{/if}
+				</span>
+			{/each}
+		{/if}
+		<ChevronsUpDownIcon class="ml-auto shrink-0" size={14} opacity={0.7} />
+	</div>
+{/snippet}
+
+{#if field}
+	<!-- Une case cochée par valeur: c'est ainsi qu'un champ `string[]` se soumet. Le
+	     `checked` explicite prime sur celui de `as()`, qui lit `field.value()` — sans lui
+	     la sélection initiale ne partirait pas tant que rien n'a été cliqué. -->
+	{#each selectedValues as selectedValue (selectedValue)}
+		<input {...field.as('checkbox', selectedValue)} checked class="hidden" />
+	{/each}
+{/if}
+
+<div class="contents">
+	{#if !label}
+		{@render triggerCombobox()}
+	{:else if variant === 'floating'}
+		<label class="floating-label">
+			<span id={labelId}>{label}</span>
+			{@render triggerCombobox()}
+		</label>
+	{:else}
+		<fieldset class="fieldset">
+			<label id={labelId} class="label text-wrap" for={inputId}>
+				<span>{label}</span>
+				{@render labelAppend?.()}
+			</label>
+			{@render triggerCombobox()}
+		</fieldset>
+	{/if}
+
+	<div
+		{...popover.content}
+		class={['my-2 rounded-box border bg-base-100 shadow-xl']}
+		style="min-width: anchor-size(width);"
+		tabindex="-1"
+	>
+		{#if isSearchable || (canReset && value.length) || append}
+			<div class="sticky top-0 z-10 flex gap-2 bg-base-100/10 p-2 backdrop-blur-md">
+				{#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 canReset && value.length}
+					<button
+						class="btn btn-square btn-soft btn-sm"
+						type="button"
+						onclick={() => {
+							value = []
+							commit()
+							popover.hide()
+						}}
+						use:tip={{ content: 'Tout désélectionner' }}
+					>
+						<XIcon />
+					</button>
+				{/if}
+				{@render append?.(popover)}
+			</div>
+		{/if}
+
+		<ul
+			id={listId}
+			role="listbox"
+			aria-multiselectable="true"
+			class={['menu max-h-80 w-full flex-nowrap', (isSearchable || append) && 'pt-0']}
+		>
+			{#each options as item, index (item)}
+				{@const isSelected = selectedValues.includes(getValue(item))}
+				{@const isFocus = index === command.focusIndex}
+				<li>
+					<button
+						{...command.item(index, '')}
+						class={[isSelected && 'border', isFocus && 'menu-focus', 'scroll-mt-13 scroll-mb-2']}
+						type="button"
+						tabindex="-1"
+						role="option"
+						aria-selected={isSelected}
+					>
+						{@render proposal(item, { isSelected, isFocus })}
+						{#if proposal === defaultSnippet && isSelected}
+							<CheckIcon class="ml-auto" size={18} />
+						{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+
+		<Loading {query} />
+	</div>
+	<Issues {field} />
+	{@render hint?.(value)}
+</div>
+
+<style>
+	div[popover] {
+		border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+	}
+
+	/* Le déclencheur est un `div`: ni `:disabled` ni `[disabled]` ne s'y appliquent, et le
+	   style désactivé de daisyUI passe à côté. Reproduit ici sur `aria-disabled`, le seul
+	   marqueur valide sur un `role="combobox"`. */
+	div[aria-disabled='true'] {
+		cursor: not-allowed;
+		background-color: var(--color-base-200);
+		border-color: var(--color-base-200);
+		box-shadow: none;
+	}
+</style>

package/dist/input/{InputRelation.svelte.d.ts → InputMultiSelect.svelte.d.ts}

@@ -1,27 +1,46 @@
-import type { RemoteFormField, RemoteQueryFunction } from '@sveltejs/kit';
+import type { RemoteFormField } from '@sveltejs/kit';
 import type { Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
-import { type PopoverType } from '../popover/popover.svelte.js';
+import { type PopoverType } from '../popover/usePopover.svelte.js';
+import { type ItemsSource } from './useItems.svelte.js';
 declare function $$render<Item>(): {
     props: {
-        searchItems: RemoteQueryFunction<{
-            search: string;
-        }, Item[]>;
+        /** 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;
         }]>;
-        field?: RemoteFormField<string>;
-        value?: string;
+        field?: RemoteFormField<string[]>;
+        /**
+         * Les items, pas leurs valeurs soumises. Un parent qui les repilote après coup doit
+         * les 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;
+        canReset?: boolean;
         class?: ClassValue;
-        nullable?: boolean;
-        hint?: Snippet<[Item | undefined]>;
-        onSelect?: (item: NoInfer<Item> | undefined, popover: PopoverType) => void;
+        /** Les valeurs restent soumises, mais la sélection ne peut plus changer. */
+        disabled?: boolean;
+        hint?: Snippet<[Item[]]>;
+        /** Rendu à droite du champ de recherche: une action « créer », typiquement. */
+        append?: Snippet<[PopoverType]>;
+        /** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+        labelAppend?: Snippet;
+        onSelect?: (items: NoInfer<Item>[], popover: PopoverType) => void;
         hotKey?: string;
+        variant?: "floating" | "block";
     };
     exports: {
         popover: {
@@ -90,6 +109,6 @@ interface $$IsomorphicComponent {
     <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const InputRelation: $$IsomorphicComponent;
-type InputRelation<Item> = InstanceType<typeof InputRelation<Item>>;
-export default InputRelation;
+declare const InputMultiSelect: $$IsomorphicComponent;
+type InputMultiSelect<Item> = InstanceType<typeof InputMultiSelect<Item>>;
+export default InputMultiSelect;

package/dist/input/InputNumber.svelte

@@ -2,29 +2,66 @@
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import Issues from './Issues.svelte'
 	import type { InputProps } from './type.js'
+	import type { Snippet } from 'svelte'
 
 	let {
 		label,
 		field,
 		value = $bindable(),
 		class: klass,
+		variant = 'block',
+		labelAppend,
 		...props
 	}: {
 		label: string
 		field?: RemoteFormField<number>
+		/**
+		 * 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?: number
+		variant?: 'floating' | 'block'
+		/** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+		labelAppend?: Snippet
 	} & 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 class="label">{label}</span>
+{#snippet snippetInput()}
 	{#if field}
-		<input placeholder={label} class={['input', klass]} {...field.as('number')} {...props} />
+		{#if value === undefined}
+			<input {...inputProps} {...field.as('number')} />
+		{:else}
+			<input {...inputProps} {...field.as('number', value)} />
+		{/if}
 	{:else}
-		<input placeholder={label} class={['input', klass]} type="number" bind:value {...props} />
+		<input {...inputProps} type="number" 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}>
+			<span>{label}</span>
+			{@render labelAppend?.()}
+		</label>
+		{@render snippetInput()}
+		<Issues {field} />
+	</fieldset>
+{/if}
 
 <style>
 	input[aria-invalid='true'] {

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

@@ -1,9 +1,17 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import type { InputProps } from './type.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<number>;
+    /**
+     * 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?: number;
+    variant?: 'floating' | 'block';
+    /** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+    labelAppend?: Snippet;
 } & InputProps;
 declare const InputNumber: import("svelte").Component<$$ComponentProps, {}, "value">;
 type InputNumber = ReturnType<typeof InputNumber>;

package/dist/input/InputRadio.svelte

@@ -2,47 +2,75 @@
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import { type Options, parseOptions } from '../utils/index.js'
 	import Issues from './Issues.svelte'
+	import type { Snippet } from 'svelte'
 
 	let {
 		field,
 		label,
 		value = $bindable(),
-		options: optionsProp
+		options: optionsProp,
+		labelAppend
 	}: {
 		field?: RemoteFormField<string>
 		label: string
 		value?: string
 		options: Options
+		/** Rendu à droite du libellé. */
+		labelAppend?: Snippet
 	} = $props()
 
 	const options = $derived(parseOptions(optionsProp))
 </script>
 
 <div class="flex flex-col gap-1">
-	<span class="label px-3 text-sm">{label}</span>
+	<span class="label text-xs text-wrap">
+		<span>{label}</span>
+		{@render labelAppend?.()}
+	</span>
 	<div class="join join-vertical">
 		{#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}
-					<option.icon size={18} opacity={0.8} />
-				{/if}
-				<span>{option.label}</span>
-				{#if field}
-					<input
-						{...field.as('radio', option.value)}
-						class={['radio ml-auto radio-sm', klass]}
-						{...props}
-					/>
-				{:else}
-					<input
-						type="radio"
-						checked={value === option.value}
-						onchange={() => (value = option.value)}
-						class={['radio ml-auto radio-sm', klass]}
-						{...props}
-					/>
-				{/if}
+			{@const checked = field?.value() === option.value || value === option.value}
+			<label
+				class={[
+					'input join-item not-disabled:cursor-pointer not-disabled:hover:bg-base-200',
+					'group h-auto min-h-10'
+				]}
+			>
+				<div class="flex h-(--size) grow items-center gap-2">
+					{#if option.icon}
+						<option.icon size={18} opacity={0.8} />
+					{/if}
+					<span class="grow">{option.label}</span>
+					{#if field}
+						<input {...field.as('radio', option.value)} class={['w-0']} {...props} />
+					{:else}
+						<input
+							type="radio"
+							{checked}
+							onchange={() => (value = option.value)}
+							class={['w-0']}
+							{...props}
+						/>
+					{/if}
+					<div
+						class={[
+							'ml-auto h-5 w-5 rounded-full outline',
+							'bg-base-100',
+							!checked && 'outline-base-content/20',
+							klass
+						]}
+					>
+						<div
+							class={[
+								'grid h-5 w-5 place-content-center rounded-full',
+								'bg-base-content',
+								'ease scale-0 opacity-0',
+								checked && 'scale-[80%] opacity-100'
+							]}
+						></div>
+					</div>
+				</div>
 			</label>
 		{/each}
 	</div>
@@ -50,7 +78,17 @@
 </div>
 
 <style>
-	input {
-		--input-color: var(--color-base-content);
+	.ease {
+		transition-property: translate background-color opacity;
+		transition-timing-function: cubic-bezier(0.275, 0.485, 0.515, 1.45);
+		transition-duration: 200ms;
+	}
+
+	label:has(input[aria-invalid='true']) {
+		--input-color: var(--color-error);
+	}
+	label:has(input:disabled) {
+		cursor: not-allowed;
+		border-color: var(--input-color);
 	}
 </style>

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

@@ -1,10 +1,13 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import { type Options } from '../utils/index.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     field?: RemoteFormField<string>;
     label: string;
     value?: string;
     options: Options;
+    /** Rendu à droite du libellé. */
+    labelAppend?: Snippet;
 };
 declare const InputRadio: import("svelte").Component<$$ComponentProps, {}, "value">;
 type InputRadio = ReturnType<typeof InputRadio>;

package/dist/input/InputRange.svelte

@@ -2,29 +2,49 @@
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import Issues from './Issues.svelte'
 	import type { InputProps } from './type.js'
+	import type { Snippet } from 'svelte'
 
 	let {
 		label,
 		field,
 		value = $bindable(),
+		name,
+		labelAppend,
 		class: klass,
 		...props
 	}: {
 		label: string
 		field?: RemoteFormField<number>
+		/**
+		 * 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?: number
+		/** Sans `field`, ce qui nomme la valeur soumise. Avec, `field.as()` s'en charge. */
+		name?: string
+		/** Rendu à droite du libellé, avant la valeur courante. */
+		labelAppend?: Snippet
 	} & InputProps = $props()
 </script>
 
 <label>
 	<div class="flex gap-2 px-3 text-sm">
-		<span class="label">{label}</span>
-		<span class="ml-auto">{field?.value() ?? value}</span>
+		<span class="label text-wrap">{label}</span>
+		{@render labelAppend?.()}
+		<span class="label ml-auto">{field?.value() ?? value}</span>
 	</div>
 	{#if field}
-		<input class={['range range-sm', klass]} {...field.as('range')} {...props} />
+		<!-- `props` avant `field.as()`: le navigateur ramène la valeur d'un `range` sur la grille
+		     `min`/`max`/`step` à chaque écriture. Posée en premier, elle est arrondie selon les
+		     bornes par défaut (0–100, pas de 1), et poser les vraies bornes ensuite l'y recale une
+		     seconde fois — au montage côté client, 0.75 finissait sur le minimum. -->
+		<input
+			class={['range w-full range-sm', klass]}
+			{...props}
+			{...value === undefined ? field.as('range') : field.as('range', value)}
+		/>
 	{:else}
-		<input class={['range range-sm', klass]} type="range" bind:value {...props} />
+		<input class={['range w-full range-sm', klass]} type="range" {name} bind:value {...props} />
 	{/if}
 	<Issues {field} />
 </label>