fuma 2.1.5 → 2.2.7

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,5 +1,5 @@
 <script lang="ts" generics="Item extends ItemBase">
-	import type { Snippet } from 'svelte'
+	import { type Snippet, untrack } from 'svelte'
 	import { afterNavigate } from '$app/navigation'
 	import {
 		context,
@@ -35,21 +35,18 @@
 		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)
 </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} />
 		{#if !hideBody && items.length}

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,22 +66,19 @@
 </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">
 					<span class=" font-semibold opacity-70">Champs</span>
@@ -88,7 +87,7 @@
 						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/TableViewSelect.svelte

@@ -2,8 +2,8 @@
 	import { ChevronDownIcon, PlusIcon, SaveIcon } from '@lucide/svelte'
 	import { page } from '$app/state'
 
+	import { Popover } from '../../popover/index.js'
 	import { Dialog } from '../dialog/index.js'
-	import { DropDown } from '../menu/index.js'
 	import { SvelteURLSearchParams } from 'svelte/reactivity'
 
 	// import { InputText } from '../input/index.js';
@@ -41,69 +41,74 @@
 
 /* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable
 @typescript-eslint/no-unused-vars */
-<DropDown>
-	{#snippet activator()}
+<Popover class="p-1">
+	{#snippet trigger(popover)}
 		<button
 			type="button"
 			class="menu-item bordered gap-1 rounded-lg border font-semibold opacity-90 btn-sm"
+			{...popover.trigger}
 		>
 			<span>{isNewView ? 'Nouvelle vue' : selectedView?.name || 'Vue simple'}</span>
 			<ChevronDownIcon size={20} class="translate-x-1 translate-y-px opacity-90" />
 		</button>
 	{/snippet}
 
-	<ul class="flex flex-col gap-1">
-		{#if isNewView}
-			<li>
-				<button
-					type="button"
-					class="menu-item w-full pr-1.5"
-					onclick={() => {
-						selectedView = undefined
-						dialog?.showModal()
-					}}
-				>
-					<span>Ajouter la nouvelle vue</span>
-					<PlusIcon class="ml-auto opacity-80" size={21} />
-				</button>
-				<hr class="my-1" />
-			</li>
-		{/if}
-
-		<li>
-			<a href={page.url.pathname} class="menu-item" class:active={!query}>
-				<span class="grow">Vue simple</span>
-			</a>
-		</li>
-
-		{#each views as view (view.id)}
-			<li>
-				<a
-					href="{page.url.pathname}?{view.query}"
-					class="menu-item group pr-1"
-					class:active={view.id === selectedView?.id}
-				>
-					<span class="grow">{view.name}</span>
+	{#snippet children(popover)}
+		<ul class="flex flex-col gap-1">
+			{#if isNewView}
+				<li>
 					<button
 						type="button"
-						class="btn btn-square rounded btn-ghost btn-xs"
-						onclick={(e) => {
-							e.preventDefault()
-							selectedView = view
+						class="menu-item w-full pr-1.5"
+						onclick={() => {
+							selectedView = undefined
 							dialog?.showModal()
+							popover.hide()
 						}}
 					>
-						<SaveIcon
-							class="opacity-50 group-hover:opacity-80"
-							size={18}
-							title="Modifier la vue '{view.name}'"
-						/>
+						<span>Ajouter la nouvelle vue</span>
+						<PlusIcon class="ml-auto opacity-80" size={21} />
 					</button>
+					<hr class="my-1" />
+				</li>
+			{/if}
+
+			<li>
+				<a href={page.url.pathname} class="menu-item" class:active={!query} onclick={popover.hide}>
+					<span class="grow">Vue simple</span>
 				</a>
 			</li>
-		{/each}
-	</ul>
-</DropDown>
+
+			{#each views as view (view.id)}
+				<li>
+					<a
+						href="{page.url.pathname}?{view.query}"
+						class="menu-item group pr-1"
+						class:active={view.id === selectedView?.id}
+						onclick={popover.hide}
+					>
+						<span class="grow">{view.name}</span>
+						<button
+							type="button"
+							class="btn btn-square rounded btn-ghost btn-xs"
+							onclick={(e) => {
+								e.preventDefault()
+								selectedView = view
+								dialog?.showModal()
+							}}
+						>
+							<SaveIcon
+								class="opacity-50 group-hover:opacity-80"
+								size={18}
+								title="Modifier la vue '{view.name}'"
+							/>
+						</button>
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{/snippet}
+</Popover>
 
 <Dialog bind:dialog>
 	{#snippet header()}

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/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" />
@@ -102,49 +97,61 @@
 			</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}
+				/>
+			{/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>