fuma 2.5.3 → 2.6.0

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

@@ -11,7 +11,11 @@ export declare function useCommand({ onSelect, onFocus, isEnable, hotKey }?: Com
         [x: symbol]: (node: HTMLElement) => () => void;
     };
     focusTrigger: () => void;
-    item: (index: number, scrollMargin?: string) => {
+    /**
+     * Le dégagement du défilement appartient à l'appelant: `scroll-mt-*` / `scroll-mb-*`
+     * sur l'item, puisque lui seul connaît la hauteur de son en-tête collant.
+     */
+    item: (index: number) => {
         [x: symbol]: (node: HTMLElement) => () => void;
     };
 };

package/dist/command/useCommand.svelte.js

@@ -74,9 +74,12 @@ export function useCommand({ onSelect, onFocus, isEnable = () => true, hotKey }
             }
         },
         focusTrigger,
-        item: (index, scrollMargin = '8px') => ({
+        /**
+         * Le dégagement du défilement appartient à l'appelant: `scroll-mt-*` / `scroll-mb-*`
+         * sur l'item, puisque lui seul connaît la hauteur de son en-tête collant.
+         */
+        item: (index) => ({
             [createAttachmentKey()]: (node) => {
-                node.style.scrollMargin = scrollMargin;
                 if (!items.includes(node))
                     items.splice(index, 0, node);
                 const cleanup = on(node, 'click', () => {

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' }}
@@ -285,7 +293,7 @@
 				{@const isFocus = index === command.focusIndex}
 				<li>
 					<button
-						{...command.item(index, '')}
+						{...command.item(index)}
 						class={[isSelected && 'border', isFocus && 'menu-focus', 'scroll-mt-13 scroll-mb-2']}
 						type="button"
 						tabindex="-1"

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';
@@ -62,7 +62,7 @@ declare function $$render<Item>(): {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
             focusTrigger: () => void;
-            item: (index: number, scrollMargin?: string) => {
+            item: (index: number) => {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
         };
@@ -96,7 +96,7 @@ declare class __sveltets_Render<Item> {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
             focusTrigger: () => void;
-            item: (index: number, scrollMargin?: string) => {
+            item: (index: number) => {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
         };

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()
 							}}
@@ -239,7 +252,7 @@
 				{@const isFocus = index === command.focusIndex}
 				<li {...propsLi}>
 					<button
-						{...command.item(index, '')}
+						{...command.item(index)}
 						class={[
 							isSelected && 'border-hard border',
 							isFocus && 'menu-focus',

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';
@@ -70,7 +70,7 @@ declare function $$render<Item>(): {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
             focusTrigger: () => void;
-            item: (index: number, scrollMargin?: string) => {
+            item: (index: number) => {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
         };
@@ -104,7 +104,7 @@ declare class __sveltets_Render<Item> {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
             focusTrigger: () => void;
-            item: (index: number, scrollMargin?: string) => {
+            item: (index: number) => {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
         };

package/package.json

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