fuma 2.0.2 → 2.0.4

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

@@ -1,79 +1,56 @@
-import type { ComponentAndProps, Primitive } from '../../utils/component.js';
 import type { Options } from '../../utils/options.js';
-export type TableFieldType = 'string' | 'textarea' | 'number' | 'boolean' | 'select' | 'multiselect' | 'date';
-export type TableField<Item = any> = TableFieldCommon & (TableFieldUntyped<Item> | TableFieldPrimitive<Item> | TableFieldSelect<Item> | TableFieldMultiselect<Item>);
-type TableFieldCommon = {
+import type { Snippet } from 'svelte';
+import type { Primitive } from '../../utils/component.js';
+export type ItemBase = {
+    id: string | number;
+};
+export type TableField<Item = ItemBase> = (TableFieldCommon<Item> & TableFieldPrimitve) | (TableFieldCommon<Item> & TableFieldSelect);
+type TableFieldCommon<Item> = {
     key: string;
     label: string;
-    type?: TableFieldType;
     options?: Options;
     hint?: string;
     locked?: boolean;
     visible?: boolean;
+    sortable?: boolean;
     /** Internal usage */
-    $visible?: boolean;
-};
-type TableFieldUntyped<Item = any> = {
-    getCell: (item: Item) => ComponentAndProps[] | ComponentAndProps | Primitive[] | Primitive | undefined | null;
-    head?: ComponentAndProps | ((field: TableField) => ComponentAndProps);
+    _visible?: boolean;
+    cell: ((item: Item) => Snippet<[item: Item]>) | ((item: Item) => null | undefined | Primitive | Primitive[]);
+    head?: Snippet<[item: Item]>;
 };
-type TableFieldPrimitive<Item = any> = {
-    type: Exclude<TableFieldType, 'select' | 'multiselect'>;
-    getCell: (item: Item) => ComponentAndProps[] | ComponentAndProps | Primitive | undefined | null;
+type TableFieldPrimitve = {
+    type?: 'string' | 'textarea' | 'number' | 'boolean' | 'date';
 };
-type TableFieldSelect<Item = any> = {
-    type: 'select';
-    getCell: (item: Item) => Primitive | undefined | null;
-    options: Options;
-};
-type TableFieldMultiselect<Item = any> = {
-    type: 'multiselect';
-    getCell: (item: Item) => Primitive[] | undefined | null;
+type TableFieldSelect = {
+    type: 'select' | 'multiselect';
     options: Options;
 };
 /**
  * Initialise fields from url query
  */
-export declare function syncFieldsWithParams(tablekey: string, fields: TableField[]): ({
-    $visible: boolean;
-    key: string;
-    label: string;
-    type?: TableFieldType;
-    options?: Options;
-    hint?: string;
-    locked?: boolean;
-    visible?: boolean;
-    getCell: (item: any) => ComponentAndProps[] | ComponentAndProps | Primitive[] | Primitive | undefined | null;
-    head?: ComponentAndProps | ((field: TableField) => ComponentAndProps);
-} | {
-    $visible: boolean;
+export declare function syncFieldsWithParams<Item extends ItemBase>(tablekey: string, fields: TableField<Item>[]): ({
+    _visible: boolean;
     key: string;
     label: string;
-    type: "string" | "number" | "boolean" | "textarea" | "date";
     options?: Options;
     hint?: string;
     locked?: boolean;
     visible?: boolean;
-    getCell: (item: any) => ComponentAndProps[] | ComponentAndProps | Primitive | undefined | null;
-} | {
-    $visible: boolean;
-    key: string;
-    label: string;
-    type: "select";
-    options: (Options | undefined) & Options;
-    hint?: string;
-    locked?: boolean;
-    visible?: boolean;
-    getCell: (item: any) => Primitive | undefined | null;
+    sortable?: boolean;
+    cell: ((item: Item) => Snippet<[item: Item]>) | ((item: Item) => null | undefined | Primitive | Primitive[]);
+    head?: Snippet<[item: Item]> | undefined;
+    type?: "string" | "textarea" | "number" | "boolean" | "date";
 } | {
-    $visible: boolean;
+    _visible: boolean;
     key: string;
     label: string;
-    type: "multiselect";
     options: (Options | undefined) & Options;
     hint?: string;
     locked?: boolean;
     visible?: boolean;
-    getCell: (item: any) => Primitive[] | undefined | null;
+    sortable?: boolean;
+    cell: ((item: Item) => Snippet<[item: Item]>) | ((item: Item) => null | undefined | Primitive | Primitive[]);
+    head?: Snippet<[item: Item]> | undefined;
+    type: "select" | "multiselect";
 })[];
 export {};

package/dist/ui/table/field.js

@@ -1,5 +1,4 @@
-import { page } from '$app/stores';
-import { get } from 'svelte/store';
+import { page } from '$app/state';
 import { jsonParse } from '../../utils/jsonParse.js';
 import { createKeys } from './context.js';
 /**
@@ -7,14 +6,14 @@ import { createKeys } from './context.js';
  */
 export function syncFieldsWithParams(tablekey, fields) {
     const { KEY_FIELDS_VISIBLE, KEY_FIELDS_HIDDEN, KEY_FIELDS_ORDER } = createKeys(tablekey);
-    const { url: { searchParams } } = get(page);
-    const fieldsVisible = jsonParse(searchParams.get(KEY_FIELDS_VISIBLE), []);
-    const fieldsHidden = jsonParse(searchParams.get(KEY_FIELDS_HIDDEN), []);
-    const fieldsOrder = jsonParse(searchParams.get(KEY_FIELDS_ORDER), []);
+    const getParam = (key) => page.url.searchParams.get(key);
+    const fieldsVisible = jsonParse(getParam(KEY_FIELDS_VISIBLE), []);
+    const fieldsHidden = jsonParse(getParam(KEY_FIELDS_HIDDEN), []);
+    const fieldsOrder = jsonParse(getParam(KEY_FIELDS_ORDER), []);
     // Init correct visible prop
     const _fields = fields.map((field) => ({
         ...field,
-        $visible: field.locked ||
+        _visible: field.locked ||
             (field.visible ? !fieldsHidden.includes(field.key) : fieldsVisible.includes(field.key))
     }));
     // Init correct order fields

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Icon } from '../../icon/index.js'
+	import { mdiSortAscending, mdiSortDescending } from '@mdi/js'
+	import { createEventDispatcher } from 'svelte'
+
+	type Order = 'asc' | 'desc' | undefined
+	export let order: Order
+	export let iconAsc = mdiSortAscending
+	export let iconDesc = mdiSortDescending
+
+	const dispatch = createEventDispatcher<{ change: Order }>()
+
+	const handleOrderClick = (orderBy: 'asc' | 'desc') => () => {
+		if (order === orderBy) order = undefined
+		else order = orderBy
+		dispatch('change', order)
+	}
+</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'}
+			on:click={handleOrderClick('asc')}
+		>
+			<Icon path={iconAsc} />
+			<span>Ascendant</span>
+		</button>
+		<button
+			class="btn ring-primary"
+			class:ring-2={order === 'desc'}
+			on:click={handleOrderClick('desc')}
+		>
+			<Icon path={iconDesc} />
+			<span>Descendant</span>
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,24 @@
+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 OrderButtons: $$__sveltets_2_IsomorphicComponent<{
+    order: "desc" | "asc" | undefined;
+    iconAsc?: string;
+    iconDesc?: string;
+}, {
+    change: CustomEvent<"desc" | "asc" | undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type OrderButtons = InstanceType<typeof OrderButtons>;
+export default OrderButtons;

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

@@ -1,9 +1,9 @@
-<script lang="ts">
+<script lang="ts" generics="Item extends {id: string}">
 	import { mdiCheck, mdiClose } from '@mdi/js'
 	import type { TableField } from '../index.js'
 	import TableHeadSelect from './TableHeadSelect.svelte'
 
-	export let field: TableField
+	export let field: TableField<Item>
 </script>
 
 <TableHeadSelect

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

@@ -1,21 +1,32 @@
 import type { TableField } 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;
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        field: TableField<Item>;
     };
-    z_$$bindings?: Bindings;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): string;
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item extends {
+        id: string;
+    }>(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 {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<Item>['events']>;
+    }): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const TableHeadBoolean: $$__sveltets_2_IsomorphicComponent<{
-    field: TableField;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TableHeadBoolean = InstanceType<typeof TableHeadBoolean>;
+declare const TableHeadBoolean: $$IsomorphicComponent;
+type TableHeadBoolean<Item extends {
+    id: string;
+}> = InstanceType<typeof TableHeadBoolean<Item>>;
 export default TableHeadBoolean;

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

@@ -1,64 +1,88 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
-	import { page } from '$app/stores'
-	import { mdiCalendarFilterOutline } from '@mdi/js'
+	import { page } from '$app/state'
+	import {
+		mdiCalendarFilterOutline,
+		mdiSortClockAscendingOutline,
+		mdiSortClockDescendingOutline
+	} from '@mdi/js'
 
 	import { DropDown } from '../../menu/index.js'
 	import { InputTime } from '../../input/index.js'
 	import type { TableField } from '../index.js'
 	import { formatRange } from '../../range/format.js'
-	import { RangePicker } from '../../range/index.js'
+	import { RangePicker, type RangeAsDate } from '../../range/index.js'
 	import { urlParam } from '../../../store/param.js'
 	import { jsonParse } from '../../../utils/jsonParse.js'
 	import { Icon } from '../../icon/index.js'
+	import OrderButtons from './OrderButtons.svelte'
 
-	export let field: Omit<TableField, 'getCell' | 'type'>
+	let { field }: { field: TableField } = $props()
 
 	let dropDown: DropDown
 	let rangePicker: RangePicker
-	const initialValue = jsonParse<{ start?: string; end?: string }>(
-		$page.url.searchParams.get(field.key),
+	let initialValue = jsonParse<{ start?: string; end?: string; order?: 'asc' | 'desc' }>(
+		page.url.searchParams.get(field.key),
 		{}
 	)
 
-	let range = {
+	let range: RangeAsDate = $state({
 		start: initialValue.start ? new Date(initialValue.start) : null,
 		end: initialValue.end ? new Date(initialValue.end) : null
-	}
+	})
+	let order = $state(initialValue.order)
 
-	$: isValidPeriod = !!range.start && !!range.end
+	let isValidPeriod = $derived(!!range.start && !!range.end)
 
-	function handleSubmit() {
-		dropDown.hide()
-		if (!isValidPeriod) return
+	function updateUrl() {
+		isValidPeriod = !!range.start && !!range.end
+		if (!isValidPeriod && !order) {
+			goto($urlParam.without(field.key, 'skip', 'take'), {
+				replaceState: true,
+				noScroll: true,
+				keepFocus: true
+			})
+			return
+		}
 		goto(
 			$urlParam.with(
 				{
 					[field.key]: JSON.stringify({
-						start: range.start?.toJSON(),
-						end: range.end?.toJSON()
+						...(isValidPeriod
+							? {
+									start: range.start?.toJSON(),
+									end: range.end?.toJSON()
+								}
+							: {}),
+						...(order ? { order } : {})
 					})
 				},
 				'skip',
 				'take'
 			),
-			{ replaceState: true, noScroll: true }
+			{ replaceState: true, noScroll: true, keepFocus: true }
 		)
 	}
 
 	function handleReset() {
-		dropDown.hide()
+		isValidPeriod = false
+		range.start = null
 		range = { start: null, end: null }
+		dropDown.hide()
 		rangePicker.clear()
-		goto($urlParam.without(field.key, 'skip', 'take'), { replaceState: true, noScroll: true })
+		goto($urlParam.without(field.key, 'skip', 'take'), {
+			replaceState: true,
+			noScroll: true,
+			keepFocus: true
+		})
 	}
 </script>
 
 <th class="p-1">
 	<DropDown
 		bind:this={dropDown}
-		on:mouseLeave={handleSubmit}
 		tippyProps={{ appendTo: () => document.body }}
+		hideOnNav={false}
 		class="max-h-none"
 	>
 		<button slot="activator" class="menu-item min-h-8 w-full flex-wrap gap-y-1">
@@ -74,26 +98,68 @@
 					{formatRange(range)}
 				</span>
 			{/if}
+			{#if order}
+				<Icon
+					path={order === 'asc' ? mdiSortClockAscendingOutline : mdiSortClockDescendingOutline}
+					size={18}
+					class="fill-primary"
+				/>
+			{/if}
 		</button>
 
+		{#if field.sortable !== false}
+			<OrderButtons
+				bind:order
+				on:change={() => {
+					updateUrl()
+					dropDown.hide()
+				}}
+				iconAsc={mdiSortClockAscendingOutline}
+				iconDesc={mdiSortClockDescendingOutline}
+			/>
+		{/if}
+
 		<form
-			class="flex flex-col font-normal"
-			on:submit|preventDefault={handleSubmit}
+			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} bind:range />
+			<RangePicker
+				bind:this={rangePicker}
+				numberOfMonths={1}
+				on:change={({ detail: newRange }) => {
+					range = newRange
+					updateUrl()
+				}}
+			/>
 
 			<input class="hidden" type="text" name="start" value={range.start?.toJSON()} />
 			<input class="hidden" type="text" name="end" value={range.end?.toJSON()} />
 
 			<div class="m-2 flex gap-2">
-				<InputTime label="A partir de" bind:value={range.start} enhanceDisabled class="grow" />
-				<InputTime label="Jusqu'à" bind:value={range.end} enhanceDisabled class="grow" />
+				<InputTime
+					label="A partir de"
+					bind:value={range.start}
+					enhanceDisabled
+					class="grow"
+					on:input={updateUrl}
+				/>
+				<InputTime
+					label="Jusqu'à"
+					bind:value={range.end}
+					enhanceDisabled
+					class="grow"
+					on:input={updateUrl}
+				/>
 			</div>
 
 			<div class="m-2 flex flex-row-reverse gap-2">
-				<button class="btn"> Valider </button>
-				<button class="btn btn-ghost" type="button" on:click={handleReset}>Effacer</button>
+				<button class="btn">Ok</button>
+				<button class="btn btn-ghost" type="button" onclick={handleReset}>Effacer</button>
 			</div>
 		</form>
 	</DropDown>

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

@@ -1,21 +1,7 @@
 import type { TableField } 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 TableHeadDate: $$__sveltets_2_IsomorphicComponent<{
-    field: Omit<TableField, "getCell" | "type">;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TableHeadDate = InstanceType<typeof TableHeadDate>;
+type $$ComponentProps = {
+    field: TableField;
+};
+declare const TableHeadDate: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableHeadDate = ReturnType<typeof TableHeadDate>;
 export default TableHeadDate;

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

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import type { TableField } from '../index.js'
 	import { tip } from '../../../action/tip.js'
-
-	export let field: TableField
+	let { field }: { field: TableField } = $props()
 </script>
 
 <th use:tip={{ disable: !field.hint, content: field.hint }}>

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

@@ -1,21 +1,7 @@
 import type { TableField } 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 TableHeadDefault: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     field: TableField;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TableHeadDefault = InstanceType<typeof TableHeadDefault>;
+};
+declare const TableHeadDefault: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableHeadDefault = ReturnType<typeof TableHeadDefault>;
 export default TableHeadDefault;

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="Item extends {id: string}">
 	import { onMount } from 'svelte'
 	import type { TippyInstance } from '../../../utils/tippy.js'
 	import debounce from 'debounce'
@@ -10,32 +10,35 @@
 	import { urlParam } from '../../../store/param.js'
 	import { jsonParse } from '../../../utils/jsonParse.js'
 	import type { TableField } from '../field.js'
-	import { mdiFilterMultipleOutline } from '@mdi/js'
+	import { mdiFilterMultipleOutline, mdiSortAscending, mdiSortDescending } from '@mdi/js'
 	import { Icon } from '../../icon/index.js'
+	import OrderButtons from './OrderButtons.svelte'
 
-	export let field: TableField
+	export let field: TableField<Item>
 
 	let tip: TippyInstance
 	type Range = { min: number | undefined; max: number | undefined }
 
-	let { min, max } = initRange($page.url)
-	onMount(() => page.subscribe(({ url }) => ({ min, max } = initRange(url))))
+	let { min, max, order } = initRange($page.url)
+	onMount(() => page.subscribe(({ url }) => ({ min, max, order } = initRange(url))))
 
 	function initRange({ searchParams }: URL) {
-		return jsonParse<Range>(searchParams.get(field.key), {
+		return jsonParse<Range & { order?: 'asc' | 'desc' }>(searchParams.get(field.key), {
 			min: undefined,
-			max: undefined
+			max: undefined,
+			order: undefined
 		})
 	}
 
-	const udpateUrl = debounce(() => {
-		if (isDefined(min) || isDefined(max)) {
+	const updateUrl = debounce(() => {
+		if (isDefined(min) || isDefined(max) || order) {
 			goto(
 				$urlParam.with(
 					{
 						[field.key]: JSON.stringify({
 							...(isDefined(min) ? { min } : {}),
-							...(isDefined(max) ? { max } : {})
+							...(isDefined(max) ? { max } : {}),
+							...(order ? { order } : {})
 						})
 					},
 					'skip',
@@ -92,13 +95,31 @@
 					{/if}
 				</span>
 			{/if}
+			{#if order}
+				<Icon
+					path={order === 'asc' ? mdiSortAscending : mdiSortDescending}
+					size={18}
+					class="fill-primary"
+				/>
+			{/if}
 		</button>
 
+		{#if field.sortable !== false}
+			<OrderButtons
+				bind:order
+				on:change={() => {
+					updateUrl()
+					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={udpateUrl} input={{ placeholder: 'Min' }} />
+			<InputNumber bind:value={min} on:input={updateUrl} input={{ placeholder: 'Min' }} />
 			<InputNumber
 				bind:value={max}
-				on:input={udpateUrl}
+				on:input={updateUrl}
 				hint={isNegatifRange ? 'Doit être plus grand' : ''}
 				input={{ placeholder: 'Max' }}
 			/>

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

@@ -1,21 +1,32 @@
 import type { TableField } from '../field.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;
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        field: TableField<Item>;
     };
-    z_$$bindings?: Bindings;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): string;
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item extends {
+        id: string;
+    }>(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 {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<Item>['events']>;
+    }): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const TableHeadNumber: $$__sveltets_2_IsomorphicComponent<{
-    field: TableField;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TableHeadNumber = InstanceType<typeof TableHeadNumber>;
+declare const TableHeadNumber: $$IsomorphicComponent;
+type TableHeadNumber<Item extends {
+    id: string;
+}> = InstanceType<typeof TableHeadNumber<Item>>;
 export default TableHeadNumber;

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="Item extends {id: string}">
 	import { derived } from 'svelte/store'
 	import { page } from '$app/stores'
 
@@ -10,7 +10,7 @@
 	import { urlParam } from '../../../store/param.js'
 	import { mdiOrderBoolAscendingVariant } from '@mdi/js'
 
-	export let field: TableField
+	export let field: TableField<Item>
 	export let options: Options
 	export let multiSelect = false
 	export let placeholder = 'No option'