fuma 2.0.50 → 2.1.1

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

@@ -1,133 +1,118 @@
 <script lang="ts" generics="Item extends ItemBase">
-	import { onMount } from 'svelte'
-	import type { TippyInstance } from '../../../utils/tippy.js'
+	import { ArrowDownNarrowWideIcon, ArrowDownWideNarrowIcon, FunnelIcon } from '@lucide/svelte'
 	import debounce from 'debounce'
+	import z from 'zod'
 	import { goto } from '$app/navigation'
-	import { page } from '$app/stores'
-
+	import { page } from '$app/state'
+	import { urlParam } from '../../../state/param.svelte.ts'
 	import { DropDown } from '../../menu/index.js'
-	import { InputNumber } from '../../input/index.js'
-	import { urlParam } from '../../../store/param.js'
-	import { jsonParse } from '../../../utils/jsonParse.js'
+	import { zodCoerceJsonRecord } from '../../../validation/zod.js'
 	import type { ItemBase, TableField } from '../field.js'
-	import { mdiFilterMultipleOutline, mdiSortAscending, mdiSortDescending } from '@mdi/js'
-	import { Icon } from '../../icon/index.js'
 	import OrderButtons from './OrderButtons.svelte'
 
-	export let field: TableField<Item>
-
-	let tip: TippyInstance
-	type Range = { min: number | undefined; max: number | undefined }
+	let { field }: { field: TableField<Item> } = $props()
 
-	let { min, max, order } = initRange($page.url)
-	onMount(() => page.subscribe(({ url }) => ({ min, max, order } = initRange(url))))
+	const paramModel = zodCoerceJsonRecord
+		.pipe(
+			z.object({
+				min: z.number().optional(),
+				max: z.number().optional(),
+				order: z.enum(['asc', 'desc']).optional()
+			})
+		)
+		.default({})
 
-	function initRange({ searchParams }: URL) {
-		return jsonParse<Range & { order?: 'asc' | 'desc' }>(searchParams.get(field.key), {
-			min: undefined,
-			max: undefined,
-			order: undefined
-		})
-	}
+	let { min, max, order } = $derived(paramModel.parse(page.url.searchParams.get(field.key)))
 
 	const updateUrl = debounce(() => {
-		if (isDefined(min) || isDefined(max) || order) {
-			goto(
-				$urlParam.with(
-					{
-						[field.key]: JSON.stringify({
-							...(isDefined(min) ? { min } : {}),
-							...(isDefined(max) ? { max } : {}),
-							...(order ? { order } : {})
-						})
-					},
-					'skip',
-					'take'
-				),
-				{
-					noScroll: true,
-					keepFocus: true
-				}
-			)
-			return
-		}
-		goto($urlParam.without(field.key, 'skip', 'take'), { noScroll: true, keepFocus: true })
+		const query: Record<string, string | number> = {}
+		if (order) query.order = order
+		if (min !== undefined) query.min = min
+		if (max !== undefined) query.max = max
+		if (!Object.keys(query).length) return resetFilter()
+		goto(urlParam.with({ [field.key]: JSON.stringify(query) }, 'skip', 'take'), {
+			noScroll: true,
+			keepFocus: true
+		})
 	}, 250)
 
-	function handleReset() {
-		min = undefined
-		max = undefined
-		tip.hide()
-		goto($urlParam.without(field.key, 'skip', 'take'), { noScroll: true, keepFocus: true })
-	}
-
-	function isDefined(v: number | undefined | null): v is number {
-		return typeof v === 'number'
+	function resetFilter() {
+		return goto(urlParam.without(field.key, 'skip', 'take'), {
+			replaceState: true,
+			noScroll: true,
+			keepFocus: true
+		})
 	}
-
-	$: isNegatifRange = isDefined(min) && isDefined(max) && max < min
 </script>
 
 <th class="p-1">
-	<DropDown
-		bind:tip
-		hideOnBlur
-		hideOnNav={false}
-		autofocus
-		tippyProps={{ appendTo: () => document.body }}
-	>
-		<button slot="activator" class="menu-item min-h-8 w-full flex-wrap gap-y-1">
-			<div class="flex gap-2">
-				<span>{field.label}</span>
-				{#if !isDefined(min) && !isDefined(max)}
-					<Icon path={mdiFilterMultipleOutline} size={15} class="opacity-50" />
+	<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">
+				<div class="flex gap-2">
+					<span>{field.label}</span>
+					{#if min === undefined && max === undefined}
+						<FunnelIcon size={15} class="opacity-50" />
+					{/if}
+				</div>
+
+				{#if min !== undefined || max !== undefined}
+					<span class="badge badge-xs text-[0.7rem] font-normal text-white badge-primary">
+						{#if min !== undefined}
+							{min} ≤
+						{/if}
+						x
+						{#if max !== undefined}
+							≤ {max}
+						{/if}
+					</span>
+				{/if}
+				{#if order === 'asc'}
+					<ArrowDownNarrowWideIcon size={18} class="fill-primary" />
+				{:else if order === 'desc'}
+					<ArrowDownWideNarrowIcon size={18} class="fill-primary" />
 				{/if}
-			</div>
+			</button>
+		{/snippet}
 
-			{#if isDefined(min) || isDefined(max)}
-				<span class="badge badge-primary badge-xs text-[0.7rem] font-normal text-white">
-					{#if isDefined(min)}
-						{min} ≤
-					{/if}
-					x
-					{#if isDefined(max)}
-						≤ {max}
-					{/if}
-				</span>
-			{/if}
-			{#if order}
-				<Icon
-					path={order === 'asc' ? mdiSortAscending : mdiSortDescending}
-					size={18}
-					class="fill-primary"
+		{#snippet children({ tip })}
+			{#if field.sortable !== false}
+				<OrderButtons
+					bind:order
+					onChange={() => {
+						updateUrl()
+						tip?.hide()
+					}}
 				/>
+				<div class="divider"></div>
+				<span class="p-1 py-1 text-sm font-semibold opacity-70">Filtre:</span>
 			{/if}
-		</button>
-
-		{#if field.sortable !== false}
-			<OrderButtons
-				bind:order
-				on:change={() => {
-					updateUrl()
-					tip.hide()
+			<form
+				class="grid grid-cols-2 gap-2 p-1"
+				onsubmit={(e) => {
+					e.preventDefault()
+					tip?.hide()
 				}}
-			/>
-			<div class="divider"></div>
-			<span class="p-1 py-1 text-sm font-semibold opacity-70">Filtre:</span>
-		{/if}
-		<form class="grid grid-cols-2 gap-2 p-1" on:submit|preventDefault={() => tip.hide()}>
-			<InputNumber bind:value={min} on:input={updateUrl} input={{ placeholder: 'Min' }} />
-			<InputNumber
-				bind:value={max}
-				on:input={updateUrl}
-				hint={isNegatifRange ? 'Doit être plus grand' : ''}
-				input={{ placeholder: 'Max' }}
-			/>
+			>
+				<input bind:value={min} oninput={updateUrl} placeholder="Min" />
+				<input bind:value={max} oninput={updateUrl} placeholder="Max" />
 
-			<div class="col-span-full flex justify-end gap-2">
-				<button class="btn btn-ghost" type="button" on:click={handleReset}>Effacer</button>
-				<button class="btn">Ok</button>
-			</div>
-		</form>
+				<div class="col-span-full flex justify-end gap-2">
+					<button
+						class="btn btn-ghost"
+						type="button"
+						onclick={() => {
+							min = undefined
+							max = undefined
+							tip?.hide()
+							resetFilter()
+						}}
+					>
+						Effacer
+					</button>
+					<button class="btn">Ok</button>
+				</div>
+			</form>
+		{/snippet}
 	</DropDown>
 </th>

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

@@ -1,22 +1,25 @@
 import type { ItemBase, TableField } from '../field.js';
-declare class __sveltets_Render<Item extends ItemBase> {
-    props(): {
+declare function $$render<Item extends ItemBase>(): {
+    props: {
         field: TableField<Item>;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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 TableHeadNumber: $$IsomorphicComponent;

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

@@ -1,87 +1,90 @@
 <script lang="ts" generics="Item extends ItemBase">
-	import { derived } from 'svelte/store'
-	import { page } from '$app/stores'
-
-	import { jsonParse } from '../../../utils/jsonParse.js'
-	import type { ItemBase, TableField } from '../index.js'
+	import { ListFilterIcon } from '@lucide/svelte'
+	import { page } from '$app/state'
+	import { param, urlParam } from '../../../state/param.svelte.ts'
 	import { DropDown } from '../../menu/index.js'
-	import { Icon } from '../../icon/index.js'
+	import type { ItemBase, TableField } from '../index.js'
+	import { jsonParse } from '../../../utils/jsonParse.js'
 	import { type Options, parseOptions } from '../../../utils/options.js'
-	import { urlParam } from '../../../store/param.js'
-	import { mdiOrderBoolAscendingVariant } from '@mdi/js'
-
-	export let field: TableField<Item>
-	export let options: Options
-	export let multiSelect = false
-	export let placeholder = 'No option'
-
-	let _options = initOptions($page.url)
-	page.subscribe(({ url }) => (_options = initOptions(url)))
 
-	$: optionsActive = _options.filter((option) => option.isActive)
+	let {
+		field,
+		options: propOptions,
+		multiSelect = false,
+		placeholder = 'No option'
+	}: {
+		field: TableField<Item>
+		options: Options
+		multiSelect?: boolean
+		placeholder?: string
+	} = $props()
 
-	function initOptions({ searchParams }: URL) {
-		const selection = searchParams.get(field.key)
-		const selections = jsonParse<string[]>(searchParams.get(field.key), [])
+	let options = $derived.by(() => {
+		const selection = page.url.searchParams.get(field.key)
+		const selections = jsonParse<string[]>(page.url.searchParams.get(field.key), [])
 
 		function getActive(value: string) {
 			if (!multiSelect) return selection === value
 			return selections.includes(value)
 		}
 
-		return parseOptions(options).map((option) => ({
+		return parseOptions(propOptions).map((option) => ({
 			...option,
 			isActive: getActive(option.value)
 		}))
-	}
+	})
+
+	let optionsActive = $derived(options.filter((option) => option.isActive))
 
-	const getHref = derived(urlParam, (params) => (value: string) => {
-		const selections = jsonParse<string[]>(params.get(field.key), [])
-		if (!multiSelect) return params.toggle({ [field.key]: value }, 'skip', 'take')
+	const getHref = $derived((value: string) => {
+		const selections = jsonParse<string[]>(param.get(field.key), [])
+		if (!multiSelect) return urlParam.toggle({ [field.key]: value }, 'skip', 'take')
 		if (selections.includes(value)) {
 			const newSelections = selections.filter((v) => v !== value)
-			if (!newSelections.length) return params.without(field.key)
-			return params.with({ [field.key]: JSON.stringify(newSelections) }, 'skip', 'take')
+			if (!newSelections.length) return urlParam.without(field.key)
+			return urlParam.with({ [field.key]: JSON.stringify(newSelections) }, 'skip', 'take')
 		}
-		return params.with({ [field.key]: JSON.stringify([...selections, value]) }, 'skip', 'take')
+		return urlParam.with({ [field.key]: JSON.stringify([...selections, value]) }, 'skip', 'take')
 	})
 </script>
 
 <th class="p-1">
 	<DropDown hideOnBlur hideOnNav={!multiSelect} tippyProps={{ appendTo: () => document.body }}>
-		<button slot="activator" class="menu-item min-h-8 w-full flex-wrap gap-y-1">
-			<div class="flex gap-2">
-				{field.label}
-				{#if !optionsActive.length}
-					<Icon path={mdiOrderBoolAscendingVariant} size={15} class="opacity-50" />
-				{/if}
-			</div>
-
-			{#if optionsActive.length}
-				<div class="flex flex-wrap gap-1">
-					{#each optionsActive as option}
-						<span class="badge badge-primary badge-xs text-[0.7rem] font-normal text-white">
-							{#if option.icon}
-								<Icon path={option.icon} size={10} class="-translate-x-1 fill-white/80" />
-							{/if}
-							{option.label}
-						</span>
-					{/each}
+		{#snippet activator()}
+			<button class="menu-item min-h-8 w-full flex-wrap gap-y-1">
+				<div class="flex gap-2">
+					{field.label}
+					{#if !optionsActive.length}
+						<ListFilterIcon size={15} class="opacity-50" />
+					{/if}
 				</div>
-			{/if}
-		</button>
+
+				{#if optionsActive.length}
+					<div class="flex flex-wrap gap-1">
+						{#each optionsActive as option}
+							<span class="badge badge-xs text-[0.7rem] font-normal text-white badge-primary">
+								{#if option.icon}
+									<option.icon size={10} class="-translate-x-1 fill-white/80" />
+								{/if}
+								{option.label}
+							</span>
+						{/each}
+					</div>
+				{/if}
+			</button>
+		{/snippet}
 
 		<div class="flex flex-col gap-1">
-			{#each _options as { isActive, icon, label, value }}
+			{#each options as { isActive, icon: Icon, label, value }}
 				<a
-					href={$getHref(value)}
+					href={getHref(value)}
 					class="menu-item px-3 py-2"
 					class:active={isActive}
 					data-sveltekit-noscroll
 					data-sveltekit-replacestate
 				>
-					{#if icon}
-						<Icon path={icon} size={18} class="opacity-60" />
+					{#if Icon}
+						<Icon size={18} class="opacity-60" />
 					{/if}
 					<span class="font-normal whitespace-nowrap">{label}</span>
 				</a>

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

@@ -1,26 +1,29 @@
 import type { ItemBase, TableField } from '../index.js';
 import { type Options } from '../../../utils/options.js';
-declare class __sveltets_Render<Item extends ItemBase> {
-    props(): {
+declare function $$render<Item extends ItemBase>(): {
+    props: {
         field: TableField<Item>;
         options: Options;
         multiSelect?: boolean;
         placeholder?: string;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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 TableHeadSelect: $$IsomorphicComponent;

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

@@ -1,48 +1,42 @@
 <script lang="ts" generics="Item extends ItemBase">
-	import { mdiMagnify } from '@mdi/js'
+	import { SearchIcon } from '@lucide/svelte'
 	import { page } from '$app/state'
-
 	import { DropDown } from '../../menu/index.js'
-	import { Icon } from '../../icon/index.js'
-	import { InputSearch } from '../../input/index.js'
 	import type { ItemBase, TableField } from '../index.js'
-	import { goto } from '$app/navigation'
-	import { urlParam } from '../../../store/param.js'
+
 	let { field }: { field: TableField<Item> } = $props()
 
 	let searchValue = $derived(page.url.searchParams.get(field.key) || '')
 </script>
 
 <th class="p-1">
-	<DropDown
-		let:tip
-		hideOnBlur
-		hideOnNav={false}
-		autofocus
-		tippyProps={{ appendTo: () => document.body }}
-	>
-		<button slot="activator" class="menu-item min-h-8 w-full flex-wrap gap-y-1">
-			<div class="flex items-center gap-2">
-				<span>{field.label}</span>
-				{#if !searchValue}
-					<Icon path={mdiMagnify} size={15} class="opacity-50" />
-				{/if}
-			</div>
+	<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">
+				<div class="flex items-center gap-2">
+					<span>{field.label}</span>
+					{#if !searchValue}
+						<SearchIcon size={15} class="opacity-50" />
+					{/if}
+				</div>
 
-			{#if searchValue}
-				<span class="badge badge-primary badge-xs text-[0.7rem] font-normal text-white">
-					<Icon path={mdiMagnify} size={10} class="-translate-x-1 fill-white/80" />
-					<span>{searchValue}</span>
-				</span>
-			{/if}
-		</button>
+				{#if searchValue}
+					<span class="badge badge-xs text-[0.7rem] font-normal text-white badge-primary">
+						<SearchIcon size={10} class="-translate-x-1 fill-white/80" />
+						<span>{searchValue}</span>
+					</span>
+				{/if}
+			</button>
+		{/snippet}
 
-		<InputSearch
-			class="m-1"
-			key={field.key}
-			value={searchValue}
-			onkeydown={(e) => e.key === 'Enter' && tip?.hide()}
-			onclear={() => goto($urlParam.without(field.key))}
-		/>
+		{#snippet children({ tip })}
+			<input
+				name={field.key}
+				type="search"
+				class="m-1"
+				value={searchValue}
+				onkeydown={(e) => e.key === 'Enter' && tip?.hide()}
+			/>
+		{/snippet}
 	</DropDown>
 </th>

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

@@ -1,6 +1,6 @@
-export { default as TableHeadSelect } from './TableHeadSelect.svelte';
-export { default as TableHeadDate } from './TableHeadDate.svelte';
 export { default as TableHeadBoolean } from './TableHeadBoolean.svelte';
+export { default as TableHeadDate } from './TableHeadDate.svelte';
+export { default as TableHeadDefault } from './TableHeadDefault.svelte';
 export { default as TableHeadNumber } from './TableHeadNumber.svelte';
+export { default as TableHeadSelect } from './TableHeadSelect.svelte';
 export { default as TableHeadString } from './TableHeadString.svelte';
-export { default as TableHeadDefault } from './TableHeadDefault.svelte';

package/dist/ui/table/head/index.js

@@ -1,6 +1,6 @@
-export { default as TableHeadSelect } from './TableHeadSelect.svelte';
-export { default as TableHeadDate } from './TableHeadDate.svelte';
 export { default as TableHeadBoolean } from './TableHeadBoolean.svelte';
+export { default as TableHeadDate } from './TableHeadDate.svelte';
+export { default as TableHeadDefault } from './TableHeadDefault.svelte';
 export { default as TableHeadNumber } from './TableHeadNumber.svelte';
+export { default as TableHeadSelect } from './TableHeadSelect.svelte';
 export { default as TableHeadString } from './TableHeadString.svelte';
-export { default as TableHeadDefault } from './TableHeadDefault.svelte';

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

@@ -1,10 +1,10 @@
-export { type TableField } from './field.js';
+export * from './context.js';
+export type { TableField } from './field.js';
+export * from './field.js';
+export * from './head/index.js';
 export { default as Table } from './Table.svelte';
-export { default as TableHead } from './TableHead.svelte';
 export { default as TableBody } from './TableBody.svelte';
 export { default as TableCell } from './TableCell.svelte';
 export { default as TableFieldsEdition } from './TableFieldsEdition.svelte';
+export { default as TableHead } from './TableHead.svelte';
 export { default as TableViewSelect } from './TableViewSelect.svelte';
-export * from './head/index.js';
-export * from './field.js';
-export * from './context.js';

package/dist/ui/table/index.js

@@ -1,10 +1,9 @@
-export {} from './field.js';
+export * from './context.js';
+export * from './field.js';
+export * from './head/index.js';
 export { default as Table } from './Table.svelte';
-export { default as TableHead } from './TableHead.svelte';
 export { default as TableBody } from './TableBody.svelte';
 export { default as TableCell } from './TableCell.svelte';
 export { default as TableFieldsEdition } from './TableFieldsEdition.svelte';
+export { default as TableHead } from './TableHead.svelte';
 export { default as TableViewSelect } from './TableViewSelect.svelte';
-export * from './head/index.js';
-export * from './field.js';
-export * from './context.js';

package/dist/utils/csv.js

@@ -1,7 +1,7 @@
 export function getCSV(items, fields) {
     const headers = Object.keys(fields).join('\t');
     const rows = items.map((m) => Object.values(fields)
-        .map((getValue) => !!getValue ? getValue(m) : '')
+        .map((getValue) => (getValue ? getValue(m) : ''))
         .join('\t'));
     return [headers, rows.join('\r\n')].join('\r\n');
 }

package/dist/utils/eventEmitter.d.ts

@@ -1,4 +1,4 @@
-export declare function createEventEmitter<EventMap extends Record<string, any>>(): {
+export declare function createEventEmitter<EventMap extends Record<string, unknown>>(): {
     on<K extends keyof EventMap>(eventKey: K, callback: Callback<EventMap[K]>): () => void;
     once<K extends keyof EventMap>(eventKey: K, callback: Callback<EventMap[K]>): () => void;
     off<K extends keyof EventMap>(eventKey: K, callback: Callback<EventMap[K]>): void;
@@ -6,5 +6,5 @@ export declare function createEventEmitter<EventMap extends Record<string, any>>
     emit<K extends keyof EventMap>(...args: EventEmitterArgs<EventMap, K>): void;
 };
 type Callback<Arg> = (arg: Arg) => unknown;
-type EventEmitterArgs<EventMap extends Record<string, any>, K extends keyof EventMap> = undefined extends EventMap[K] ? [type: K, parameter?: EventMap[K]] : [type: K, parameter: EventMap[K]];
+type EventEmitterArgs<EventMap extends Record<string, unknown>, K extends keyof EventMap> = undefined extends EventMap[K] ? [type: K, parameter?: EventMap[K]] : [type: K, parameter: EventMap[K]];
 export {};