fuma 2.5.1 → 2.5.4

package/dist/input/InputMultiSelect.svelte

@@ -1,7 +1,7 @@
 <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 { untrack, type Snippet } from 'svelte'
 	import type { ClassValue } from 'svelte/elements'
 	import { slide } from 'svelte/transition'
 	import { tip } from '../action/tip.js'
@@ -122,16 +122,25 @@
 		value = selectedValues.includes(itemValue)
 			? value.filter((selectedItem) => getValue(selectedItem) !== itemValue)
 			: [...value, item]
-		commit()
+		onSelect?.(value, popover)
 	}
 
 	function remove(item: Item) {
 		const itemValue = getValue(item)
 		value = value.filter((selectedItem) => getValue(selectedItem) !== itemValue)
-		commit()
+		onSelect?.(value, popover)
 	}
 
-	function commit() {
+	// L'annonce suit la valeur et non le geste: le parent peut l'écrire lui-même par `bind:`
+	// — un item créé dans un tiroir — et `toggle` n'est alors jamais appelé.
+	//
+	// La ligne de base est prise au montage: annoncer la sélection initiale l'écrirait dans
+	// l'état du champ, qui cesserait dès lors de consulter la valeur passée à `as()`.
+	let announced = untrack(() => selectedValues.join('\n'))
+	$effect(() => {
+		const signature = selectedValues.join('\n')
+		if (signature === announced) return
+		announced = signature
 		// 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,
@@ -139,8 +148,7 @@
 		// 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)}
@@ -262,7 +270,7 @@
 						type="button"
 						onclick={() => {
 							value = []
-							commit()
+							onSelect?.(value, popover)
 							popover.hide()
 						}}
 						use:tip={{ content: 'Tout désélectionner' }}

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

@@ -1,5 +1,5 @@
 import type { RemoteFormField } from '@sveltejs/kit';
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
 import { type PopoverType } from '../popover/usePopover.svelte.js';
 import { type ItemsSource } from './useItems.svelte.js';

package/dist/input/InputRadio.svelte

@@ -2,6 +2,7 @@
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import { type Options, parseOptions } from '../utils/index.js'
 	import Issues from './Issues.svelte'
+	import type { InputProps } from './type.js'
 	import type { Snippet } from 'svelte'
 
 	let {
@@ -9,15 +10,20 @@
 		label,
 		value = $bindable(),
 		options: optionsProp,
-		labelAppend
+		labelAppend,
+		...props
 	}: {
 		field?: RemoteFormField<string>
 		label: string
+		/**
+		 * Sans `field`, la valeur liée. Avec, la valeur initiale: `as('radio', …)` prend la
+		 * valeur de l'option et ne sait donc pas amorcer la sélection.
+		 */
 		value?: string
 		options: Options
 		/** Rendu à droite du libellé. */
 		labelAppend?: Snippet
-	} = $props()
+	} & InputProps = $props()
 
 	const options = $derived(parseOptions(optionsProp))
 </script>
@@ -29,8 +35,14 @@
 	</span>
 	<div class="join join-vertical">
 		{#each options as option (option.value)}
-			{@const { class: klass, ...props } = option}
-			{@const checked = field?.value() === option.value || value === option.value}
+			{@const {
+				class: klass,
+				value: optionValue,
+				label: optionLabel,
+				icon: Icon,
+				...optionProps
+			} = option}
+			{@const checked = (field ? (field.value() ?? value) : value) === optionValue}
 			<label
 				class={[
 					'input join-item not-disabled:cursor-pointer not-disabled:hover:bg-base-200',
@@ -38,21 +50,22 @@
 				]}
 			>
 				<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 Icon}
+						<Icon size={18} opacity={0.8} />
 					{/if}
+					<span class="grow">{optionLabel}</span>
+					<!-- Le `checked` explicite prime sur celui de `as()`, qui lit `field.value()`:
+					     sans lui la valeur initiale ne cocherait rien, et un groupe décoché ne
+					     part pas dans le `FormData`. -->
+					<input
+						{...field?.as('radio', optionValue)}
+						type="radio"
+						{checked}
+						onchange={() => (value = optionValue)}
+						class={['w-0']}
+						{...props}
+						{...optionProps}
+					/>
 					<div
 						class={[
 							'ml-auto h-5 w-5 rounded-full outline',

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

@@ -1,14 +1,19 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import { type Options } from '../utils/index.js';
+import type { InputProps } from './type.js';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     field?: RemoteFormField<string>;
     label: string;
+    /**
+     * Sans `field`, la valeur liée. Avec, la valeur initiale: `as('radio', …)` prend la
+     * valeur de l'option et ne sait donc pas amorcer la sélection.
+     */
     value?: string;
     options: Options;
     /** Rendu à droite du libellé. */
     labelAppend?: Snippet;
-};
+} & InputProps;
 declare const InputRadio: import("svelte").Component<$$ComponentProps, {}, "value">;
 type InputRadio = ReturnType<typeof InputRadio>;
 export default InputRadio;

package/dist/input/InputSelect.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="Item">
 	import { ChevronsUpDownIcon, SearchIcon, XIcon } from '@lucide/svelte'
 	import type { RemoteFormField } from '@sveltejs/kit'
-	import type { Snippet } from 'svelte'
+	import { untrack, type Snippet } from 'svelte'
 	import type { ClassValue, HTMLLiAttributes } from 'svelte/elements'
 	import { tip } from '../action/tip.js'
 	import { useCommand } from '../command/useCommand.svelte.js'
@@ -82,6 +82,7 @@
 	} = $props()
 
 	const inputId = $props.id()
+	let trigger = $state<HTMLButtonElement>()
 
 	let search = $state('')
 	// Une énumération courte n'a que faire d'un champ de recherche; une fonction, elle, ne
@@ -116,15 +117,26 @@
 			const item = options[index]
 			onSelect?.(item, popover)
 			if (!item) return
-			setValue(item)
+			value = item
 		}
 	})
 
-	function setValue(item: Item | undefined) {
-		value = item
+	// L'annonce suit la valeur et non le geste: le parent peut l'écrire lui-même par `bind:`
+	// — un item créé dans un tiroir — sans passer par la liste.
+	//
+	// La ligne de base est prise au montage: annoncer la valeur initiale l'écrirait dans
+	// l'état du champ, qui cesserait dès lors de consulter la valeur passée à `as()`.
+	let announced = untrack(() => submittedValue)
+	$effect(() => {
+		if (submittedValue === announced) return
+		announced = submittedValue
 		// L'input caché suffit à soumettre; `set` garde la validation du formulaire à jour.
-		field?.set(item && getValue(item))
-	}
+		field?.set(submittedValue)
+		// Un choix n'émet aucun évènement de formulaire: l'input caché est écrit par le code.
+		// Sans cette annonce, ce qui surveille le formulaire (une barre de sauvegarde) ne voit
+		// pas une valeur que le parent a posée lui-même.
+		trigger?.dispatchEvent(new Event('change', { bubbles: true }))
+	})
 
 	const isButtonSetNullVisible = $derived(nullable && value)
 </script>
@@ -135,6 +147,7 @@
 
 {#snippet triggerButton()}
 	<button
+		bind:this={trigger}
 		id={inputId}
 		type="button"
 		{disabled}
@@ -214,7 +227,7 @@
 							class="btn btn-square btn-soft btn-sm"
 							type="button"
 							onclick={() => {
-								setValue(undefined)
+								value = undefined
 								onSelect?.(undefined, popover)
 								popover.hide()
 							}}

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

@@ -1,5 +1,5 @@
 import type { RemoteFormField } from '@sveltejs/kit';
-import type { Snippet } from 'svelte';
+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';

package/dist/ui/drawer/Drawer.svelte

@@ -120,7 +120,7 @@
 		"
 		class={[
 			'fixed top-0 right-0 bottom-0 z-10 flex',
-			'w-full flex-col overflow-y-scroll overscroll-contain bg-base-100',
+			'w-full flex-col overflow-y-auto overscroll-contain bg-base-100',
 			'transition-transform',
 			klass
 		]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fuma",
-	"version": "2.5.1",
+	"version": "2.5.4",
 	"description": "My fullstack material build with sveltekit, daisyui, zod, prisma, lucia",
 	"author": {
 		"name": "Jonas Voisard",