fuma 2.0.50 → 2.1.0

package/dist/ui/range/RangePicker.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte'
+	import dayjs from 'dayjs'
 	import type { Litepicker } from 'litepicker'
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 	import type { RangeAsDate, RangeDate } from './types.js'
-	import dayjs from 'dayjs'
 
 	export let numberOfMonths = 3
 	export let numberOfColumns = numberOfMonths
@@ -49,6 +49,7 @@
 			startDate: range?.start ? dayjs(range.start).toDate() : undefined,
 			endDate: range?.end ? dayjs(range.end).toDate() : undefined,
 			setup: (picker: Litepicker) => {
+				// biome-ignore lint/suspicious/noExplicitAny: Litepicker external type
 				picker.on('selected', (date1: any, date2: any) => {
 					range = {
 						start: new Date(

package/dist/ui/range/RangePickerButton.svelte

@@ -1,42 +1,49 @@
 <script lang="ts">
-	import { mdiCalendarMonthOutline } from '@mdi/js'
-	import { goto } from '$app/navigation'
+	import { CalendarRangeIcon } from '@lucide/svelte'
 	import { slide } from 'svelte/transition'
-
-	import { urlParam } from '../../store/param.js'
-	import { formatRangeShort } from './format.js'
-	import { Icon } from '../icon/index.js'
+	import { goto } from '$app/navigation'
+	import { param, urlParam } from '../../state/param.svelte.ts'
 	import { DropDown } from '../menu/index.js'
-	import { InputTime } from '../input/index.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 klass = ''
 
-	export let key = 'range'
-	export let range: RangeAsDate = jsonParse<RangeAsDate>($urlParam.get(key), {
-		start: null,
-		end: null
-	})
-	export let minDate: Date | number | string | undefined = undefined
-	export let maxDate: Date | number | string | undefined = undefined
-	export { klass as class }
-	export let classLabel = ''
+	let {
+		key = 'range',
+		range = $bindable(
+			jsonParse<RangeAsDate>(param.get(key), {
+				start: null,
+				end: null
+			})
+		),
+		minDate,
+		maxDate,
+		class: klass = '',
+		classLabel = ''
+	}: {
+		key?: string
+		range: RangeAsDate
+		minDate?: Date | number | string
+		maxDate?: Date | number | string
+		class?: string
+		classLabel?: string
+	} = $props()
 
-	$: isValidPeriod = !!range.start && !!range.end
+	let isValidPeriod = $derived(!!range.start && !!range.end)
 
 	function getLabel(_range?: Partial<RangeAsDate>) {
 		if (!_range || !_range.start || !_range.end) return ''
 		return formatRangeShort(_range as RangeAsDate)
 	}
 
-	async function writeURL() {
+	async function updateURL() {
 		const url =
 			!range.start && !range.end
-				? $urlParam.without(key)
-				: $urlParam.with({
+				? urlParam.without(key)
+				: urlParam.with({
 						[key]: JSON.stringify({
 							start: range.start?.toJSON(),
 							end: range.end?.toJSON()
@@ -46,24 +53,29 @@
 	}
 </script>
 
-<DropDown bind:this={dropDown} tippyProps={{ onHidden: writeURL }} class="max-h-full">
-	<button slot="activator" class="min-width-0 btn btn-sm flex-nowrap {klass}">
-		<Icon path={mdiCalendarMonthOutline} class="opacity-60" size={20} />
-		{#if isValidPeriod}
-			<span
-				transition:slide={{ axis: 'x', duration: 200 }}
-				class="whitespace-nowrap text-xs font-medium opacity-80 {classLabel}"
-			>
-				{getLabel(range)}
-			</span>
-		{/if}
-	</button>
+<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}
 
 	<RangePicker bind:this={rangePicker} numberOfMonths={1} bind:range {minDate} {maxDate} />
 
 	<div class="flex gap-2 p-2">
-		<InputTime label="A partir de" bind:value={range.start} enhanceDisabled class="grow" />
-		<InputTime label="Jusqu'à" bind:value={range.end} enhanceDisabled class="grow" />
+		<!--
+		<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>
 	</div>
 
 	<div class="m-2 flex justify-end gap-2">
@@ -71,7 +83,7 @@
 			<button
 				transition:slide
 				class="btn btn-ghost"
-				on:click={() => {
+				onclick={() => {
 					range = { start: null, end: null }
 					rangePicker.clear()
 					dropDown.hide()
@@ -80,6 +92,6 @@
 				Effacer
 			</button>
 		{/if}
-		<button class="btn" on:click={() => dropDown.hide()}> Valider </button>
+		<button class="btn" onclick={() => dropDown.hide()}> Valider </button>
 	</div>
 </DropDown>

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

@@ -1,26 +1,12 @@
 import { type RangeAsDate } from './index.js';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const RangePickerButton: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     key?: string;
-    range?: RangeAsDate;
-    minDate?: Date | number | string | undefined;
-    maxDate?: Date | number | string | undefined;
+    range: RangeAsDate;
+    minDate?: Date | number | string;
+    maxDate?: Date | number | string;
     class?: string;
     classLabel?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RangePickerButton = InstanceType<typeof RangePickerButton>;
+};
+declare const RangePickerButton: import("svelte").Component<$$ComponentProps, {}, "range">;
+type RangePickerButton = ReturnType<typeof RangePickerButton>;
 export default RangePickerButton;

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

@@ -1,4 +1,4 @@
+export * from './format.js';
 export { default as RangePicker } from './RangePicker.svelte';
 export { default as RangePickerButton } from './RangePickerButton.svelte';
-export * from './format.js';
 export * from './types.js';

package/dist/ui/range/index.js

@@ -1,4 +1,4 @@
+export * from './format.js';
 export { default as RangePicker } from './RangePicker.svelte';
 export { default as RangePickerButton } from './RangePickerButton.svelte';
-export * from './format.js';
 export * from './types.js';

package/dist/ui/table/Table.svelte

@@ -1,16 +1,14 @@
 <script lang="ts" generics="Item extends ItemBase">
 	import { afterNavigate } from '$app/navigation'
-	import { maxHeightScreen } from '../../action/heightScreen.js'
-	import { Placeholder } from '../placeholder/index.js'
 
 	import {
-		type TableField,
-		type ItemBase,
-		TableHead,
-		TableBody,
 		context,
 		createKeys,
-		syncFieldsWithParams
+		type ItemBase,
+		syncFieldsWithParams,
+		TableBody,
+		type TableField,
+		TableHead
 	} from './index.js'
 	import type { SnippetLike } from './type.js'
 
@@ -40,11 +38,13 @@
 		screenPadding?: number
 	} = $props()
 
-	const { KEY_FIELDS_VISIBLE, KEY_FIELDS_HIDDEN, KEY_FIELDS_ORDER } = createKeys(key)
-	context.set(key, {
-		KEY_FIELDS_VISIBLE,
-		KEY_FIELDS_HIDDEN,
-		KEY_FIELDS_ORDER
+	$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
+		})
 	})
 
 	const initFields = () => (fields = syncFieldsWithParams(key, fields))
@@ -52,12 +52,8 @@
 	afterNavigate(initFields)
 </script>
 
-<div
-	class="{klass} bg-base-100 overflow-x-auto rounded-lg border"
-	class:min-h-[320px]={!hideBody}
-	use:maxHeightScreen={{ padding: screenPadding }}
->
-	<table class="relative table">
+<div class="{klass} overflow-x-auto rounded-lg border bg-base-100" class:min-h-[320px]={!hideBody}>
+	<table class="table relative">
 		<TableHead {fields} {key} {onCreateField} />
 		{#if !hideBody && items.length}
 			<TableBody {fields} {items} {actions} {classRow} {onclick} />
@@ -65,8 +61,6 @@
 	</table>
 
 	{#if hideBody && !items.length}
-		<Placeholder class="rounded-t-none">
-			{placholder}
-		</Placeholder>
+		{placholder}
 	{/if}
 </div>

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

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

package/dist/ui/table/TableBody.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="Item extends ItemBase">
-	import { TableCell, type ItemBase, type TableField } from './index.js'
 	import type { Snippet } from 'svelte'
+	import { type ItemBase, TableCell, type TableField } from './index.js'
 
 	let {
 		items,

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

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

package/dist/ui/table/TableFieldsEdition.svelte

@@ -1,30 +1,33 @@
 <script lang="ts" generics="Item extends ItemBase">
 	import {
-		mdiCheck,
-		mdiCheckCircleOutline,
-		mdiCircleSmall,
-		mdiDotsHorizontal,
-		mdiDrag,
-		mdiPlus
-	} from '@mdi/js'
-	import type { TippyInstance } from '../../utils/tippy.js'
+		CheckIcon,
+		CircleCheckIcon,
+		CircleIcon,
+		EllipsisIcon,
+		GripIcon,
+		PlusIcon
+	} from '@lucide/svelte'
 	import { goto } from '$app/navigation'
-	import { page } from '$app/stores'
-	import { urlParam } from '../../store/param.js'
+	import { page } from '$app/state'
 	import { listEditable } from '../../action/list/index.js'
-	import { jsonParse } from '../../utils/jsonParse.js'
-	import { context } from './context.js'
-	import { Icon } from '../icon/index.js'
+	import { tip } from '../../action/tip.js'
+	import { param, urlParam } from '../../state/param.svelte.ts'
 	import { DropDown } from '../menu/index.js'
+	import { context } from './context.js'
 	import type { ItemBase, TableField } from './index.js'
+	import { jsonParse } from '../../utils/jsonParse.js'
 
-	export let fields: TableField<Item>[]
-	export let key: string
-	export let onCreateField: (() => void) | undefined = undefined
-
-	let tip: TippyInstance
+	let {
+		fields,
+		key,
+		onCreateField
+	}: {
+		fields: TableField<Item>[]
+		key: string
+		onCreateField?: () => void
+	} = $props()
 
-	const { KEY_FIELDS_VISIBLE, KEY_FIELDS_HIDDEN, KEY_FIELDS_ORDER } = context.get(key)
+	let { KEY_FIELDS_VISIBLE, KEY_FIELDS_HIDDEN, KEY_FIELDS_ORDER } = $derived(context.get(key))
 
 	function getFieldHref(field: TableField<Item>) {
 		if (field.locked) return
@@ -38,8 +41,8 @@
 	}
 
 	function toggleParam(paramKey: string, fieldKey: string): URL {
-		const url = new URL($page.url)
-		const fieldsKeys = jsonParse<string[]>($page.url.searchParams.get(paramKey), [])
+		const url = new URL(page.url)
+		const fieldsKeys = jsonParse<string[]>(page.url.searchParams.get(paramKey), [])
 		if (!fieldsKeys.includes(fieldKey)) fieldsKeys.push(fieldKey)
 		else fieldsKeys.splice(fieldsKeys.indexOf(fieldKey), 1)
 
@@ -52,78 +55,87 @@
 	function handleReorder(newFieldsOrder: TableField<Item>[]) {
 		fields = newFieldsOrder
 		const fieldsOrder = fields.map((f) => f.key)
-		const newUrl = $urlParam.with({ [KEY_FIELDS_ORDER]: JSON.stringify(fieldsOrder) })
+		const newUrl = urlParam.with({
+			[KEY_FIELDS_ORDER]: JSON.stringify(fieldsOrder)
+		})
 		goto(newUrl, { replaceState: true, noScroll: true, keepFocus: true })
 	}
 </script>
 
 <th class="sticky right-0 z-10 p-0 px-1" align="right">
 	<DropDown
-		bind:tip
 		hideOnNav={false}
 		class="max-h-none px-0"
 		tippyProps={{ appendTo: () => document.body, placement: 'bottom-end' }}
 	>
-		<button slot="activator" type="button" class="btn btn-square btn-ghost btn-sm backdrop-blur">
-			<Icon path={mdiDotsHorizontal} title="Définir les champs" />
-		</button>
+		{#snippet activator()}
+			<button
+				type="button"
+				class="btn btn-square btn-ghost backdrop-blur btn-sm"
+				use:tip={{ content: 'Dénfinir les champs' }}
+			>
+				<EllipsisIcon />
+			</button>
+		{/snippet}
+
+		{#snippet children({ tip })}
+			{#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>
+					<button
+						type="button"
+						class="btn ml-auto btn-square btn-sm"
+						onclick={() => {
+							if (onCreateField) onCreateField()
+							tip?.hide()
+						}}
+					>
+						<PlusIcon title="Ajouter un champ" />
+					</button>
+				</div>
+			{/if}
 
-		{#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>
-				<button
-					type="button"
-					class="btn btn-square btn-sm ml-auto"
-					on:click={() => {
-						if (onCreateField) onCreateField()
-						tip.hide()
+			<div class="max-h-125 overflow-auto px-1 pt-1">
+				<div
+					use:listEditable={{
+						items: fields,
+						onChange: handleReorder,
+						dragElementsSelector: '.drag-button'
 					}}
 				>
-					<Icon path={mdiPlus} title="Ajouter un champ" />
-				</button>
-			</div>
-		{/if}
-
-		<div class="max-h-[500px] overflow-auto px-1 pt-1">
-			<div
-				use:listEditable={{
-					items: fields,
-					onChange: handleReorder,
-					dragElementsSelector: '.drag-button'
-				}}
-			>
-				{#each fields as field (field.key)}
-					<a
-						draggable="false"
-						href={getFieldHref(field)}
-						class="menu-item w-full"
-						class:disabled={field.locked}
-						data-sveltekit-keepfocus
-						data-sveltekit-replacestate
-						data-sveltekit-noscroll
-					>
-						{#if field.locked}
-							<Icon path={mdiCheck} class="fill-base-content/50" size={21} />
-						{:else if $urlParam.has(field.key)}
-							<Icon path={mdiCheckCircleOutline} class="fill-primary" size={21} />
-						{:else if field._visible}
-							<Icon path={mdiCheck} class="fill-success" size={21} />
-						{:else}
-							<Icon path={mdiCircleSmall} class="fill-base-content/50" size={21} />
-						{/if}
+					{#each fields as field (field.key)}
+						<a
+							draggable="false"
+							href={getFieldHref(field)}
+							class="menu-item w-full"
+							class:disabled={field.locked}
+							data-sveltekit-keepfocus
+							data-sveltekit-replacestate
+							data-sveltekit-noscroll
+						>
+							{#if field.locked}
+								<CheckIcon class="fill-base-content/50" size={21} />
+							{:else if param.has(field.key)}
+								<CircleCheckIcon class="fill-primary" size={21} />
+							{:else if field._visible}
+								<CheckIcon class="fill-success" size={21} />
+							{:else}
+								<CircleIcon class="fill-base-content/50" size={21} />
+							{/if}
 
-						<span>{field.label}</span>
+							<span>{field.label}</span>
 
-						<span
-							class="drag-button btn btn-square btn-ghost btn-xs ml-auto"
-							on:click|preventDefault
-							role="none"
-						>
-							<Icon path={mdiDrag} size={18} class="fill-base-content/80" />
-						</span>
-					</a>
-				{/each}
+							<span
+								class="drag-button btn ml-auto btn-square btn-ghost btn-xs"
+								onclick={(e) => e.preventDefault()}
+								role="none"
+							>
+								<GripIcon size={18} class="fill-base-content/80" />
+							</span>
+						</a>
+					{/each}
+				</div>
 			</div>
-		</div>
+		{/snippet}
 	</DropDown>
 </th>

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

@@ -1,26 +1,27 @@
 import type { ItemBase, TableField } from './index.js';
-declare class __sveltets_Render<Item extends ItemBase> {
-    props(): {
+declare function $$render<Item extends ItemBase>(): {
+    props: {
         fields: TableField<Item>[];
         key: string;
-        onCreateField?: (() => void) | undefined;
-    };
-    events(): {
-        click: PointerEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
+        onCreateField?: () => void;
     };
-    slots(): {};
-    bindings(): string;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends ItemBase> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
     new <Item extends ItemBase>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
     } & ReturnType<__sveltets_Render<Item>['exports']>;
-    <Item extends ItemBase>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<Item>['events']>;
-    }): ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item extends ItemBase>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const TableFieldsEdition: $$IsomorphicComponent;

package/dist/ui/table/TableHead.svelte

@@ -20,7 +20,7 @@
 	} = $props()
 </script>
 
-<thead class="bg-base-100 sticky top-0 z-10">
+<thead class="sticky top-0 z-10 bg-base-100">
 	<tr class="shadow">
 		{#each fields.filter((f) => f._visible) as field (field.key)}
 			{#if !field.type}