fuma 2.1.6 → 2.5.0

package/dist/ui/range/RangePickerButton.svelte

@@ -2,36 +2,49 @@
 	import { CalendarRangeIcon } from '@lucide/svelte'
 	import { slide } from 'svelte/transition'
 	import { goto } from '$app/navigation'
-	import { param, urlParam } from '../../state/param.svelte.js'
-	import { DropDown } from '../menu/index.js'
+	import { InputDateTime } from '../../input/index.js'
+	import { usePopover } from '../../popover/index.js'
+	import { param, urlParam } from '../../state/param.js'
 	import { formatRangeShort } from './format.js'
 	import { type RangeAsDate, RangePicker } from './index.js'
 	import { jsonParse } from '../../utils/jsonParse.js'
 
-	let dropDown: DropDown
 	let rangePicker: RangePicker
 
 	let {
 		key = 'range',
-		range = $bindable(
-			jsonParse<RangeAsDate>(param.get(key), {
-				start: null,
-				end: null
-			})
-		),
+		range = $bindable(parseRange(param.get(key))),
 		minDate,
 		maxDate,
 		class: klass = '',
 		classLabel = ''
 	}: {
 		key?: string
-		range: RangeAsDate
+		range?: RangeAsDate
 		minDate?: Date | number | string
 		maxDate?: Date | number | string
 		class?: string
 		classLabel?: string
 	} = $props()
 
+	const popover = usePopover()
+
+	// Le paramètre d'URL porte des chaînes ISO: sans cette reprise, `range` contiendrait des
+	// chaînes là où tout le reste — `updateURL`, `InputDateTime` — attend des `Date`.
+	function parseRange(value?: string | null): RangeAsDate {
+		const { start, end } = jsonParse<{ start?: string; end?: string }>(value, {})
+		return { start: start ? new Date(start) : null, end: end ? new Date(end) : null }
+	}
+
+	// Le light-dismiss (clic à l'extérieur) ne passe pas par `hide()`, donc pas par
+	// `onHide`: on suit `isOpen` pour que l'URL soit à jour à chaque fermeture.
+	let wasOpen = false
+	$effect(() => {
+		const { isOpen } = popover
+		if (wasOpen && !isOpen) updateURL()
+		wasOpen = isOpen
+	})
+
 	let isValidPeriod = $derived(!!range.start && !!range.end)
 
 	function getLabel(_range?: Partial<RangeAsDate>) {
@@ -53,29 +66,27 @@
 	}
 </script>
 
-<DropDown bind:this={dropDown} tippyProps={{ onHidden: updateURL }} class="max-h-full">
-	{#snippet activator()}
-		<button class="min-width-0 btn flex-nowrap btn-sm {klass}">
-			<CalendarRangeIcon class="opacity-60" size={20} />
-			{#if isValidPeriod}
-				<span
-					transition:slide={{ axis: 'x', duration: 200 }}
-					class="text-xs font-medium whitespace-nowrap opacity-80 {classLabel}"
-				>
-					{getLabel(range)}
-				</span>
-			{/if}
-		</button>
-	{/snippet}
+<button
+	class={['min-width-0 btn flex-nowrap btn-sm', !isValidPeriod && 'btn-square', klass]}
+	{...popover.trigger}
+>
+	<CalendarRangeIcon class="opacity-70" size={20} />
+	{#if isValidPeriod}
+		<span
+			transition:slide={{ axis: 'x', duration: 200 }}
+			class="text-xs font-medium whitespace-nowrap opacity-80 {classLabel}"
+		>
+			{getLabel(range)}
+		</span>
+	{/if}
+</button>
 
+<div {...popover.content} class="rounded-box border bg-base-100 p-1 shadow-xl">
 	<RangePicker bind:this={rangePicker} numberOfMonths={1} bind:range {minDate} {maxDate} />
 
 	<div class="flex gap-2 p-2">
-		<!--
-		<InputString label="A partir de" bind:value={range.start} class="grow" />
-		<InputString label="Jusqu'à" bind:value={range.end} class="grow" />
-		-->
-		<span>TODO: same problème with input...</span>
+		<InputDateTime label="À partir de" bind:value={range.start} class="grow" />
+		<InputDateTime label="Jusqu'à" bind:value={range.end} class="grow" />
 	</div>
 
 	<div class="m-2 flex justify-end gap-2">
@@ -86,12 +97,18 @@
 				onclick={() => {
 					range = { start: null, end: null }
 					rangePicker.clear()
-					dropDown.hide()
+					popover.hide()
 				}}
 			>
 				Effacer
 			</button>
 		{/if}
-		<button class="btn" onclick={() => dropDown.hide()}> Valider </button>
+		<button class="btn" onclick={() => popover.hide()}> Valider </button>
 	</div>
-</DropDown>
+</div>
+
+<style>
+	div[popover] {
+		border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+	}
+</style>

package/dist/ui/range/RangePickerButton.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type RangeAsDate } from './index.js';
 type $$ComponentProps = {
     key?: string;
-    range: RangeAsDate;
+    range?: RangeAsDate;
     minDate?: Date | number | string;
     maxDate?: Date | number | string;
     class?: string;

package/dist/ui/table/Table.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" generics="Item extends ItemBase">
-	import type { Snippet } from 'svelte'
-	import { afterNavigate } from '$app/navigation'
+	import { type Snippet, untrack } from 'svelte'
 	import {
 		context,
 		createKeys,
@@ -35,25 +34,26 @@
 		onclick?: (item?: Item) => void
 	} = $props()
 
-	$effect(() => {
-		const { KEY_FIELDS_VISIBLE, KEY_FIELDS_HIDDEN, KEY_FIELDS_ORDER } = createKeys(key)
-		context.set(key, {
-			KEY_FIELDS_VISIBLE,
-			KEY_FIELDS_HIDDEN,
-			KEY_FIELDS_ORDER
-		})
-	})
+	// Posé à l'initialisation et non dans un `$effect`: un effet ne tourne pas au rendu
+	// serveur, et `TableFieldsEdition` lirait un contexte vide. `key` identifie la table
+	// pour toute sa durée de vie.
+	const tableKey = untrack(() => key)
+	context.set(tableKey, createKeys(tableKey))
 
-	const initFields = () => (fields = syncFieldsWithParams(key, fields))
-	initFields()
-	afterNavigate(initFields)
+	// Dérivé, et non écrit dans la prop `fields`: Svelte annule l'écriture locale d'une prop
+	// non liée dès que le parent en recalcule la valeur. Un parent qui déclare ses colonnes
+	// dans un `$derived` les reproduit à chaque rafraîchissement de `load` — celui que
+	// déclenche une remote function, sans navigation — et la table repartait alors sans
+	// `_visible`, donc sans une seule colonne. `syncFieldsWithParams` lit `page.url`: le
+	// dérivé suit aussi les changements de paramètres, ce dont `afterNavigate` se chargeait.
+	const fieldsSynced = $derived(syncFieldsWithParams(tableKey, fields))
 </script>
 
-<div class="{klass} overflow-x-auto rounded-lg border bg-base-100" class:min-h-[320px]={!hideBody}>
+<div class="{klass} overflow-x-auto rounded-box border bg-base-100" class:min-h-[320px]={!hideBody}>
 	<table class="table relative">
-		<TableHead {fields} {key} {onCreateField} />
+		<TableHead fields={fieldsSynced} {key} {onCreateField} />
 		{#if !hideBody && items.length}
-			<TableBody {fields} {items} {actions} {classRow} {onclick} />
+			<TableBody fields={fieldsSynced} {items} {actions} {classRow} {onclick} />
 		{/if}
 	</table>
 

package/dist/ui/table/Table.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import { type ItemBase, type TableField } from './index.js';
 declare function $$render<Item extends ItemBase>(): {
     props: {

package/dist/ui/table/TableFieldsEdition.svelte

@@ -1,18 +1,20 @@
 <script lang="ts" generics="Item extends ItemBase">
 	import {
 		CheckIcon,
-		CircleCheckIcon,
-		CircleIcon,
+		DotIcon,
 		EllipsisIcon,
+		FunnelIcon,
 		GripIcon,
+		LockKeyholeIcon,
+		MoveVerticalIcon,
 		PlusIcon
 	} from '@lucide/svelte'
 	import { goto } from '$app/navigation'
 	import { page } from '$app/state'
 	import { listEditable } from '../../action/list/index.js'
 	import { tip } from '../../action/tip.js'
-	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 { context } from './context.js'
 	import type { ItemBase, TableField } from './index.js'
 	import { jsonParse } from '../../utils/jsonParse.js'
@@ -64,31 +66,28 @@
 </script>
 
 <th class="sticky right-0 z-10 p-0 px-1" align="right">
-	<DropDown
-		hideOnNav={false}
-		class="max-h-none px-0"
-		tippyProps={{ appendTo: () => document.body, placement: 'bottom-end' }}
-	>
-		{#snippet activator()}
+	<Popover placement="bottom-end" class="px-0 py-1">
+		{#snippet trigger(popover)}
 			<button
 				type="button"
 				class="btn btn-square btn-ghost backdrop-blur btn-sm"
-				use:tip={{ content: 'Dénfinir les champs' }}
+				use:tip={{ content: 'Modifier les colonnes' }}
+				{...popover.trigger}
 			>
 				<EllipsisIcon />
 			</button>
 		{/snippet}
 
-		{#snippet children({ tip })}
+		{#snippet children(popover)}
 			{#if onCreateField}
-				<div class="bordered flex items-center gap-2 border-b pr-1 pb-1 pl-2">
+				<div class="flex items-center gap-2 border-b pr-1 pb-1 pl-2">
 					<span class=" font-semibold opacity-70">Champs</span>
 					<button
 						type="button"
 						class="btn ml-auto btn-square btn-sm"
 						onclick={() => {
 							if (onCreateField) onCreateField()
-							tip?.hide()
+							popover.hide()
 						}}
 					>
 						<PlusIcon title="Ajouter un champ" />
@@ -108,35 +107,38 @@
 						<a
 							draggable="false"
 							href={getFieldHref(field)}
-							class="menu-item w-full"
+							class="menu-item group w-full pr-1"
 							class:disabled={field.locked}
 							data-sveltekit-keepfocus
 							data-sveltekit-replacestate
 							data-sveltekit-noscroll
 						>
 							{#if field.locked}
-								<CheckIcon class="fill-base-content/50" size={21} />
+								<LockKeyholeIcon class="mx-0.5 text-primary" size={17} />
 							{:else if param.has(field.key)}
-								<CircleCheckIcon class="fill-primary" size={21} />
+								<FunnelIcon class="mx-0.5 text-primary" size={17} />
 							{:else if field._visible}
-								<CheckIcon class="fill-success" size={21} />
+								<CheckIcon class="text-success" size={21} />
 							{:else}
-								<CircleIcon class="fill-base-content/50" size={21} />
+								<DotIcon class="text-base-content/50" size={21} />
 							{/if}
 
-							<span>{field.label}</span>
+							<span class=" font-normal">{field.label}</span>
 
 							<span
-								class="drag-button btn ml-auto btn-square btn-ghost btn-xs"
+								class={[
+									'drag-button btn ml-auto btn-square btn-soft btn-xs',
+									'opacity-0 group-hover:opacity-100'
+								]}
 								onclick={(e) => e.preventDefault()}
 								role="none"
 							>
-								<GripIcon size={18} class="fill-base-content/80" />
+								<MoveVerticalIcon size={18} class="text-base-content/70" />
 							</span>
 						</a>
 					{/each}
 				</div>
 			</div>
 		{/snippet}
-	</DropDown>
+	</Popover>
 </th>

package/dist/ui/table/TableHead.svelte

@@ -34,7 +34,11 @@
 			{:else if field.type === 'date'}
 				<TableHeadDate {field} />
 			{:else if field.options}
-				<TableHeadSelect {field} options={field.options} />
+				<TableHeadSelect
+					{field}
+					options={field.options}
+					multiSelect={field.type === 'multiselect'}
+				/>
 			{/if}
 		{/each}
 		<TableFieldsEdition {fields} {key} {onCreateField} />

package/dist/ui/table/cell/TableCellBoolean.svelte

@@ -6,8 +6,8 @@
 
 <td>
 	{#if cell}
-		<CheckIcon class="fill-success" />
+		<CheckIcon class="text-success" />
 	{:else}
-		<XIcon class="fill-error" />
+		<XIcon class="text-error" />
 	{/if}
 </td>

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

@@ -7,11 +7,15 @@
 		order = $bindable(),
 		IconAsc = ArrowDownNarrowWideIcon,
 		IconDesc = ArrowDownWideNarrowIcon,
+		labelAsc = 'Ascendant',
+		labelDesc = 'Descendant',
 		onChange
 	}: {
 		order: Order
 		IconAsc?: Component<IconProps>
 		IconDesc?: Component<IconProps>
+		labelAsc?: string
+		labelDesc?: string
 		onChange?: (order: Order) => void
 	} = $props()
 
@@ -22,24 +26,21 @@
 	}
 </script>
 
-<div class="p-1 pt-2">
-	<span class="text-sm font-semibold opacity-70">Ordre:</span>
-	<div class="grid grid-cols-2 gap-2 pt-2">
-		<button
-			class="btn ring-primary"
-			class:ring-2={order === 'asc'}
-			onclick={handleOrderClick('asc')}
-		>
-			<IconAsc />
-			<span>Ascendant</span>
-		</button>
-		<button
-			class="btn ring-primary"
-			class:ring-2={order === 'desc'}
-			onclick={handleOrderClick('desc')}
-		>
-			<IconDesc />
-			<span>Descendant</span>
-		</button>
-	</div>
+<div class="m-2 grid grid-cols-2 gap-1">
+	<button
+		class="btn ring-primary btn-sm"
+		class:ring-2={order === 'asc'}
+		onclick={handleOrderClick('asc')}
+	>
+		<IconAsc size={16} />
+		<span>{labelAsc}</span>
+	</button>
+	<button
+		class="btn ring-primary btn-sm"
+		class:ring-2={order === 'desc'}
+		onclick={handleOrderClick('desc')}
+	>
+		<IconDesc size={16} />
+		<span>{labelDesc}</span>
+	</button>
 </div>

package/dist/ui/table/head/OrderButtons.svelte.d.ts

@@ -5,6 +5,8 @@ type $$ComponentProps = {
     order: Order;
     IconAsc?: Component<IconProps>;
     IconDesc?: Component<IconProps>;
+    labelAsc?: string;
+    labelDesc?: string;
     onChange?: (order: Order) => void;
 };
 declare const OrderButtons: Component<$$ComponentProps, {}, "order">;

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

@@ -2,8 +2,9 @@
 	import { CalendarArrowDownIcon, CalendarArrowUpIcon, CalendarSearchIcon } from '@lucide/svelte'
 	import { goto } from '$app/navigation'
 	import { page } from '$app/state'
-	import { urlParam } from '../../../state/param.svelte.js'
-	import { DropDown } from '../../menu/index.js'
+	import { InputDateTime } from '../../../input/index.js'
+	import { Popover, type PopoverType } from '../../../popover/index.js'
+	import { urlParam } from '../../../state/param.js'
 	import { formatRange } from '../../range/format.js'
 	import { type RangeAsDate, RangePicker } from '../../range/index.js'
 	import type { ItemBase, TableField } from '../index.js'
@@ -12,7 +13,6 @@
 
 	let { field }: { field: Omit<TableField<Item>, 'cell'> } = $props()
 
-	let dropDown: DropDown
 	let rangePicker: RangePicker
 
 	let initialValue = jsonParse<{
@@ -59,11 +59,11 @@
 		)
 	}
 
-	function handleReset() {
+	function handleReset(popover: PopoverType) {
 		isValidPeriod = false
 		range.start = null
 		range = { start: null, end: null }
-		dropDown.hide()
+		popover.hide()
 		rangePicker.clear()
 		goto(urlParam.without(field.key, 'skip', 'take'), {
 			replaceState: true,
@@ -74,15 +74,10 @@
 </script>
 
 <th class="p-1">
-	<DropDown
-		bind:this={dropDown}
-		tippyProps={{ appendTo: () => document.body }}
-		hideOnNav={false}
-		class="max-h-none"
-	>
-		{#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">
 					<span>{field.label}</span>
 					{#if !isValidPeriod}
 						<CalendarSearchIcon size={15} class="opacity-50" />
@@ -95,56 +90,70 @@
 					</span>
 				{/if}
 				{#if order === 'asc'}
-					<CalendarArrowDownIcon size={18} class="fill-primary" />
+					<CalendarArrowDownIcon size={15} class="text-primary" />
 				{:else if order === 'desc'}
-					<CalendarArrowUpIcon size={18} class="fill-primary" />
+					<CalendarArrowUpIcon size={15} class="text-primary" />
 				{/if}
 			</button>
 		{/snippet}
 
-		{#if field.sortable !== false}
-			<OrderButtons
-				bind:order
-				onChange={() => {
-					updateUrl()
-					dropDown.hide()
-				}}
-				IconAsc={CalendarArrowDownIcon}
-				IconDesc={CalendarArrowUpIcon}
-			/>
-		{/if}
+		{#snippet children(popover)}
+			{#if field.sortable !== false}
+				<OrderButtons
+					bind:order
+					onChange={() => {
+						updateUrl()
+						popover.hide()
+					}}
+					IconAsc={CalendarArrowDownIcon}
+					IconDesc={CalendarArrowUpIcon}
+					labelAsc="Ancien d'abord"
+					labelDesc="Récent d'abord"
+				/>
+			{/if}
 
-		<form
-			onsubmit={(e) => {
-				e.preventDefault()
-				dropDown.hide()
-			}}
-			data-sveltekit-replacestate
-			class="flex flex-col font-normal"
-			class:mt-6={field.sortable !== false}
-		>
-			<RangePicker
-				bind:this={rangePicker}
-				numberOfMonths={1}
-				on:change={({ detail: newRange }) => {
-					range = newRange
-					updateUrl()
+			<form
+				onsubmit={(e) => {
+					e.preventDefault()
+					popover.hide()
 				}}
-			/>
-
-			<input class="hidden" type="text" name="start" value={range.start?.toJSON()} />
-			<input class="hidden" type="text" name="end" value={range.end?.toJSON()} />
+				data-sveltekit-replacestate
+				class="flex flex-col font-normal"
+				class:mt-6={field.sortable !== false}
+			>
+				<RangePicker
+					bind:this={rangePicker}
+					numberOfMonths={1}
+					onchange={(newRange) => {
+						range = newRange
+						updateUrl()
+					}}
+				/>
 
-			<div class="m-2 flex gap-2">
-				<!-- <InputTime label="A partir de" bind:value={range.start} class="grow" on:input={updateUrl} />
-				<InputTime label="Jusqu'à" bind:value={range.end} class="grow" on:input={updateUrl} /> -->
-				<span>TODO: same problème with input...</span>
-			</div>
+				<div class="m-2 flex gap-2">
+					<InputDateTime
+						label="À partir de"
+						name="start"
+						bind:value={range.start}
+						class="grow"
+						onchange={updateUrl}
+					/>
+					<InputDateTime
+						label="Jusqu'à"
+						name="end"
+						bind:value={range.end}
+						class="grow"
+						onchange={updateUrl}
+					/>
+				</div>
 
-			<div class="m-2 flex flex-row-reverse gap-2">
-				<button class="btn">Ok</button>
-				<button class="btn btn-ghost" type="button" onclick={handleReset}>Effacer</button>
-			</div>
-		</form>
-	</DropDown>
+				<div class="m-2 flex flex-row-reverse gap-2">
+					<button class="btn">Ok</button>
+					<button class="btn btn-ghost" type="button" onclick={() => handleReset(popover)}>
+						Effacer
+					</button>
+				</div>
+			</form>
+		{/snippet}
+	</Popover>
 </th>