fuma 2.1.5 → 2.2.7

package/dist/ui/table/head/TableHeadNumber.svelte

@@ -4,14 +4,16 @@
 	import z from 'zod'
 	import { goto } from '$app/navigation'
 	import { page } from '$app/state'
-	import { urlParam } from '../../../state/param.svelte.js'
-	import { DropDown } from '../../menu/index.js'
+	import { Popover } from '../../../popover/index.js'
+	import { urlParam } from '../../../state/param.js'
 	import { zodCoerceJsonRecord } from '../../../validation/zod.js'
 	import type { ItemBase, TableField } from '../field.js'
 	import OrderButtons from './OrderButtons.svelte'
 
 	let { field }: { field: TableField<Item> } = $props()
 
+	// `.catch`: le paramètre vient de l'URL, donc de l'utilisateur. Un contenu illisible retombe
+	// sur un filtre vide au lieu de faire échouer le rendu de toute la table.
 	const paramModel = zodCoerceJsonRecord
 		.pipe(
 			z.object({
@@ -21,14 +23,24 @@
 			})
 		)
 		.default({})
+		.catch({})
 
-	let { min, max, order } = $derived(paramModel.parse(page.url.searchParams.get(field.key)))
+	// `?? undefined`: `searchParams.get` rend `null` quand le filtre est absent, et un
+	// `.default()` de zod ne couvre que `undefined`.
+	let { min, max, order } = $derived(
+		paramModel.parse(page.url.searchParams.get(field.key) ?? undefined)
+	)
+
+	/** Un `<input type="number">` vidé lie `null`: une borne effacée, pas une borne à zéro. */
+	function isSet(bound: number | null | undefined): bound is number {
+		return bound !== null && bound !== undefined
+	}
 
 	const updateUrl = debounce(() => {
 		const query: Record<string, string | number> = {}
 		if (order) query.order = order
-		if (min !== undefined) query.min = min
-		if (max !== undefined) query.max = max
+		if (isSet(min)) query.min = min
+		if (isSet(max)) query.max = max
 		if (!Object.keys(query).length) return resetFilter()
 		goto(urlParam.with({ [field.key]: JSON.stringify(query) }, 'skip', 'take'), {
 			noScroll: true,
@@ -37,6 +49,8 @@
 	}, 250)
 
 	function resetFilter() {
+		// Une frappe encore en attente réécrirait le filtre qu'on vient d'effacer.
+		updateUrl.clear()
 		return goto(urlParam.without(field.key, 'skip', 'take'), {
 			replaceState: true,
 			noScroll: true,
@@ -46,23 +60,23 @@
 </script>
 
 <th class="p-1">
-	<DropDown hideOnBlur hideOnNav={false} autofocus tippyProps={{ appendTo: () => document.body }}>
-		{#snippet activator()}
-			<button class="menu-item min-h-8 w-full flex-wrap gap-y-1">
+	<Popover class="p-1">
+		{#snippet trigger(popover)}
+			<button class="menu-item min-h-8 w-full flex-wrap gap-y-1" {...popover.trigger}>
 				<div class="flex gap-2">
 					<span>{field.label}</span>
-					{#if min === undefined && max === undefined}
+					{#if !isSet(min) && !isSet(max)}
 						<FunnelIcon size={15} class="opacity-50" />
 					{/if}
 				</div>
 
-				{#if min !== undefined || max !== undefined}
+				{#if isSet(min) || isSet(max)}
 					<span class="badge badge-xs text-[0.7rem] font-normal text-white badge-primary">
-						{#if min !== undefined}
+						{#if isSet(min)}
 							{min} ≤
 						{/if}
 						x
-						{#if max !== undefined}
+						{#if isSet(max)}
 							≤ {max}
 						{/if}
 					</span>
@@ -75,13 +89,13 @@
 			</button>
 		{/snippet}
 
-		{#snippet children({ tip })}
+		{#snippet children(popover)}
 			{#if field.sortable !== false}
 				<OrderButtons
 					bind:order
 					onChange={() => {
 						updateUrl()
-						tip?.hide()
+						popover.hide()
 					}}
 				/>
 				<div class="divider"></div>
@@ -91,11 +105,33 @@
 				class="grid grid-cols-2 gap-2 p-1"
 				onsubmit={(e) => {
 					e.preventDefault()
-					tip?.hide()
+					// Fermer sans purger la temporisation perdrait la dernière frappe.
+					updateUrl.flush()
+					popover.hide()
 				}}
 			>
-				<input bind:value={min} oninput={updateUrl} placeholder="Min" />
-				<input bind:value={max} oninput={updateUrl} placeholder="Max" />
+				<!-- `type="number"`: sans lui `bind:value` lie une chaîne, que ni le paramètre
+				     d'URL ni le filtre serveur ne savent relire. -->
+				<!-- `autofocus`: le popover natif donne le focus à cet élément à l'ouverture. -->
+				<!-- svelte-ignore a11y_autofocus -->
+				<input
+					bind:value={min}
+					oninput={updateUrl}
+					type="number"
+					class="input w-full"
+					placeholder="Min"
+					aria-label="Minimum"
+					autofocus
+					onfocus={(e) => e.currentTarget.select()}
+				/>
+				<input
+					bind:value={max}
+					oninput={updateUrl}
+					type="number"
+					class="input w-full"
+					placeholder="Max"
+					aria-label="Maximum"
+				/>
 
 				<div class="col-span-full flex justify-end gap-2">
 					<button
@@ -104,7 +140,7 @@
 						onclick={() => {
 							min = undefined
 							max = undefined
-							tip?.hide()
+							popover.hide()
 							resetFilter()
 						}}
 					>
@@ -114,5 +150,5 @@
 				</div>
 			</form>
 		{/snippet}
-	</DropDown>
+	</Popover>
 </th>

package/dist/ui/table/head/TableHeadSelect.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" generics="Item extends ItemBase">
 	import { ListFilterIcon } from '@lucide/svelte'
 	import { page } from '$app/state'
-	import { param, urlParam } from '../../../state/param.svelte.js'
-	import { DropDown } from '../../menu/index.js'
+	import { Popover } from '../../../popover/index.js'
+	import { param, urlParam } from '../../../state/param.js'
 	import type { ItemBase, TableField } from '../index.js'
 	import { jsonParse } from '../../../utils/jsonParse.js'
 	import { type Options, parseOptions } from '../../../utils/options.js'
@@ -49,10 +49,10 @@
 </script>
 
 <th class="p-1">
-	<DropDown hideOnBlur hideOnNav={!multiSelect} tippyProps={{ appendTo: () => document.body }}>
-		{#snippet activator()}
-			<button class="menu-item min-h-8 w-full flex-wrap gap-y-1">
-				<div class="flex gap-2">
+	<Popover class="p-1">
+		{#snippet trigger(popover)}
+			<button class="menu-item min-h-8 w-full flex-wrap gap-y-1" {...popover.trigger}>
+				<div class="flex items-center gap-2">
 					{field.label}
 					{#if !optionsActive.length}
 						<ListFilterIcon size={15} class="opacity-50" />
@@ -74,25 +74,28 @@
 			</button>
 		{/snippet}
 
-		<div class="flex flex-col gap-1">
-			{#each options as { isActive, icon: Icon, label, value } (value)}
-				<a
-					href={getHref(value)}
-					class="menu-item px-3 py-2"
-					class:active={isActive}
-					data-sveltekit-noscroll
-					data-sveltekit-replacestate
-				>
-					{#if Icon}
-						<Icon size={18} class="opacity-60" />
-					{/if}
-					<span class="font-normal whitespace-nowrap">{label}</span>
-				</a>
-			{:else}
-				<div class="menu-item disabled px-10">
-					<span class="opacity-40">{placeholder}</span>
-				</div>
-			{/each}
-		</div>
-	</DropDown>
+		{#snippet children(popover)}
+			<div class="flex flex-col gap-1">
+				{#each options as { isActive, icon: Icon, label, value } (value)}
+					<a
+						href={getHref(value)}
+						class="menu-item px-3 py-2"
+						class:active={isActive}
+						data-sveltekit-noscroll
+						data-sveltekit-replacestate
+						onclick={multiSelect ? undefined : popover.hide}
+					>
+						{#if Icon}
+							<Icon size={18} class="opacity-60" />
+						{/if}
+						<span class="font-normal whitespace-nowrap">{label}</span>
+					</a>
+				{:else}
+					<div class="menu-item disabled px-10">
+						<span class="opacity-40">{placeholder}</span>
+					</div>
+				{/each}
+			</div>
+		{/snippet}
+	</Popover>
 </th>

package/dist/ui/table/head/TableHeadString.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="Item extends ItemBase">
 	import { SearchIcon } from '@lucide/svelte'
 	import { page } from '$app/state'
-	import { DropDown } from '../../menu/index.js'
+	import { Popover } from '../../../popover/index.js'
 	import type { ItemBase, TableField } from '../index.js'
 
 	let { field }: { field: TableField<Item> } = $props()
@@ -10,9 +10,9 @@
 </script>
 
 <th class="p-1">
-	<DropDown hideOnBlur hideOnNav={false} autofocus tippyProps={{ appendTo: () => document.body }}>
-		{#snippet activator()}
-			<button class="menu-item min-h-8 w-full flex-wrap gap-y-1">
+	<Popover class="p-1">
+		{#snippet trigger(popover)}
+			<button class="menu-item min-h-8 w-full flex-wrap gap-y-1" {...popover.trigger}>
 				<div class="flex items-center gap-2">
 					<span>{field.label}</span>
 					{#if !searchValue}
@@ -29,14 +29,18 @@
 			</button>
 		{/snippet}
 
-		{#snippet children({ tip })}
+		{#snippet children(popover)}
+			<!-- `autofocus`: le popover natif donne le focus à cet élément à l'ouverture. -->
+			<!-- svelte-ignore a11y_autofocus -->
 			<input
 				name={field.key}
 				type="search"
 				class="m-1"
 				value={searchValue}
-				onkeydown={(e) => e.key === 'Enter' && tip?.hide()}
+				autofocus
+				onfocus={(e) => e.currentTarget.select()}
+				onkeydown={(e) => e.key === 'Enter' && popover.hide()}
 			/>
 		{/snippet}
-	</DropDown>
+	</Popover>
 </th>

package/dist/ui/table/index.d.ts

@@ -1,3 +1,4 @@
+export * from './cell/index.js';
 export * from './context.js';
 export type { TableField } from './field.js';
 export * from './field.js';

package/dist/ui/table/index.js

@@ -1,3 +1,4 @@
+export * from './cell/index.js';
 export * from './context.js';
 export * from './field.js';
 export * from './head/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fuma",
-	"version": "2.1.5",
+	"version": "2.2.7",
 	"description": "My fullstack material build with sveltekit, daisyui, zod, prisma, lucia",
 	"author": {
 		"name": "Jonas Voisard",
@@ -11,6 +11,7 @@
 		"build": "vite build && bun run package",
 		"preview": "vite preview --host",
 		"package": "svelte-kit sync && svelte-package && publint",
+		"package:watch": "svelte-package --watch",
 		"prepublishOnly": "bun run package",
 		"sync": "svelte-kit sync",
 		"svelte-check": "svelte-check --tsconfig ./tsconfig.json",
@@ -44,7 +45,9 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
+		"@sveltejs/kit": "^2.70.2",
 		"daisyui": "^5.5.17",
+		"svelte": "^5.55.5",
 		"tailwindcss": "^4.1.18",
 		"zod": "^4.3.6"
 	},
@@ -52,12 +55,12 @@
 		"@biomejs/biome": "2.4.2",
 		"@eslint/compat": "^2.0.5",
 		"@sveltejs/adapter-auto": "^7.0.1",
-		"@sveltejs/kit": "^2.58.0",
+		"@sveltejs/kit": "^2.70.2",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/vite": "^4.2.4",
 		"@types/node": "^25.6.0",
-		"daisyui": "^5.5.19",
+		"daisyui": "^5.7.4",
 		"eslint": "^9.39.4",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.17.1",
@@ -67,6 +70,7 @@
 		"prettier-plugin-tailwindcss": "^0.7.4",
 		"publint": "^0.1.16",
 		"shiki": "^4.0.2",
+		"svelte": "^5.55.5",
 		"svelte-check": "^4.4.6",
 		"tailwindcss": "^4.2.4",
 		"typescript": "^5.9.3",
@@ -86,7 +90,6 @@
 		"litepicker": "^2.0.12",
 		"perod": "^1.4.1",
 		"runed": "^0.37.1",
-		"svelte": "^5.55.5",
 		"svelte-easy-crop": "^5.0.1",
 		"svelte-sonner": "^1.1.1",
 		"tippy.js": "^6.3.7",

package/dist/input/InputRelation.svelte

@@ -1,200 +0,0 @@
-<script lang="ts" generics="Item">
-	import { ChevronsUpDownIcon, SearchIcon, XIcon } from '@lucide/svelte'
-	import type { RemoteFormField, RemoteQueryFunction } from '@sveltejs/kit'
-	import type { Snippet } from 'svelte'
-	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 = defaultGetValue,
-		selected = defaultSnippet,
-		proposal = defaultSnippet,
-		field,
-		value = $bindable(),
-		placeholder = 'Selectionner une valeur',
-		class: klass,
-		nullable,
-		hint,
-		onSelect,
-		hotKey
-	}: {
-		searchItems: RemoteQueryFunction<{ search: string }, Item[]>
-		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 query = $derived.by(() => searchItems({ search }))
-	const items = $derived(query.current || [])
-
-	let selectedItem = $state<Item | undefined>(undefined)
-	$effect(() => {
-		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)
-	})
-
-	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[index]
-			onSelect?.(item, popover)
-			if (!item) return
-			selectedItem = 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>
-
-{#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>
-	{#if label}
-		<label class="floating-label">
-			<span>{label}</span>
-			{@render triggerButton()}
-		</label>
-	{:else}
-		{@render triggerButton()}
-	{/if}
-
-	<div
-		{...popover.content}
-		class={['my-2 rounded-box border bg-base-100 shadow-xl']}
-		style="min-width: anchor-size(width);"
-		tabindex="-1"
-	>
-		<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 as item, index (item)}
-				{@const isSelected = index === command.selectedIndex}
-				{@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"
-					>
-						{@render proposal(item, { isSelected, isFocus })}
-					</button>
-				</li>
-			{/each}
-		</ul>
-
-		<Loading {query} />
-	</div>
-	<Issues {field} />
-	{@render hint?.(selectedItem)}
-</div>
-
-<style>
-	div[popover] {
-		border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
-	}
-</style>

package/dist/popover/popover.svelte.js

@@ -1,106 +0,0 @@
-import debounce from 'debounce';
-import { createAttachmentKey } from 'svelte/attachments';
-import { on } from 'svelte/events';
-const placements = {
-    top: 'top',
-    'top-end': 'top span-left',
-    'top-start': 'top span-right',
-    bottom: 'bottom',
-    'bottom-end': 'bottom span-left',
-    'bottom-start': 'bottom span-right',
-    left: 'left',
-    'left-end': 'left span-top',
-    'left-start': 'left span-bottom',
-    right: 'right',
-    'right-end': 'right span-top',
-    'right-start': 'right span-bottom'
-};
-let popoverInstanceCount = 0;
-export function usePopover({ mode = 'auto', placement = 'bottom-start', listenClick = true, listenFocus = true, listenHover = false, hideDelay = 400, onShow, onHide, hotKey } = {}) {
-    const uid = popoverInstanceCount++;
-    const anchorName = `--anchor-${uid}`;
-    let popover = $state();
-    let isOpen = $state(!!popover?.matches(':popover-open'));
-    const hideDebounced = debounce(hide, hideDelay);
-    function show() {
-        popover?.showPopover();
-        onShow?.();
-    }
-    function hide() {
-        popover?.hidePopover();
-        onHide?.();
-    }
-    function onMouseEnter() {
-        hideDebounced.clear();
-        show();
-    }
-    function onToggle(event) {
-        isOpen = event.newState === 'open';
-    }
-    function attachTriggerListeners(activator) {
-        const cleanups = [];
-        if (listenClick) {
-            cleanups.push(on(activator, 'click', show));
-        }
-        if (listenFocus) {
-            cleanups.push(on(activator, 'focusin', show));
-            // TODO: handle focusout ???
-        }
-        if (listenHover) {
-            cleanups.push(on(activator, 'mouseenter', onMouseEnter));
-            cleanups.push(on(activator, 'mouseleave', hideDebounced));
-        }
-        if (hotKey) {
-            cleanups.push(on(window, 'keydown', handleHotKey));
-        }
-        return () => {
-            for (const cleanup of cleanups)
-                cleanup();
-        };
-    }
-    function attachPopoverListeners(node) {
-        const cleanups = [];
-        cleanups.push(on(node, 'toggle', onToggle));
-        if (listenHover) {
-            cleanups.push(on(node, 'mouseenter', onMouseEnter));
-            cleanups.push(on(node, 'mouseleave', hideDebounced));
-        }
-        return () => {
-            for (const cleanup of cleanups)
-                cleanup();
-        };
-    }
-    async function handleHotKey(event) {
-        const { metaKey, ctrlKey, key } = event;
-        if ((metaKey || ctrlKey) && key === hotKey) {
-            event.preventDefault();
-            show();
-            return;
-        }
-    }
-    return {
-        show,
-        hide,
-        get isOpen() {
-            return isOpen;
-        },
-        content: {
-            popover: mode,
-            [createAttachmentKey()]: (node) => {
-                popover = node;
-                popover.style.positionAnchor = anchorName;
-                popover.style.positionArea = placements[placement];
-                popover.style.inset = 'auto';
-                popover.style.positionTry = 'flip-x, flip-y';
-                popover.style.position = 'relative';
-                return attachPopoverListeners(node);
-            }
-        },
-        trigger: {
-            [createAttachmentKey()]: (node) => {
-                node.style.anchorName = anchorName;
-                return attachTriggerListeners(node);
-            }
-        }
-    };
-}