fuma 2.0.49 → 2.1.0

package/dist/ui/table/TableViewSelect.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import { onMount } from 'svelte'
-	import { mdiChevronDown, mdiContentSaveEditOutline, mdiPlus } from '@mdi/js'
-	import { page } from '$app/stores'
+	import { ChevronDownIcon, PlusIcon, SaveIcon } from '@lucide/svelte'
 	import { enhance } from '$app/forms'
+	import { page } from '$app/state'
 
-	import { Icon } from '../icon/index.js'
 	import { Dialog } from '../dialog/index.js'
 	import { DropDown } from '../menu/index.js'
-	import { InputText } from '../input/index.js'
-	import { useForm } from '../../validation/form.js'
+
+	// import { InputText } from '../input/index.js';
+	// import { useForm } from '../../validation/form.jss';
 
 	type View = {
 		id: string
@@ -16,70 +15,71 @@
 		query: string
 	}
 
-	export let key: string
-	export let views: View[]
-	export let action = ''
-	export let actionCreate = '?/view_create'
-	export let actionUpdate = '?/view_update'
-	export let actionDelete = '?/view_delete'
-
-	let dialog: HTMLDialogElement
-	const form = useForm({
-		onSuccess() {
-			dialog.close()
-		}
-	})
-
-	let query = getQuery($page.url)
-	let selectedView = views.find((v) => v.query === query)
-	let isNewView = !!query && !selectedView
-
-	onMount(() =>
-		page.subscribe(({ url }) => {
-			query = getQuery(url)
-			selectedView = views.find((v) => v.query === query)
-			isNewView = !!query && !selectedView
-		})
-	)
-
-	function getQuery({ searchParams }: URL) {
-		const searchParam = new URLSearchParams(searchParams)
+	let {
+		key,
+		views,
+		action = '',
+		actionCreate = '?/view_create',
+		actionUpdate = '?/view_update',
+		actionDelete = '?/view_delete'
+	}: {
+		key: string
+		views: View[]
+		action?: string
+		actionCreate?: string
+		actionUpdate?: string
+		actionDelete?: string
+	} = $props()
+
+	let dialog = $state<HTMLDialogElement>()
+	// const form = useForm({
+	// 	onSuccess() {
+	// 		dialog?.close();
+	// 	}
+	// });
+
+	let query = $derived.by(() => {
+		const searchParam = new URLSearchParams(page.url.searchParams)
 		searchParam.delete('skip')
 		searchParam.delete('take')
 		return searchParam.toString()
-	}
+	})
+
+	let selectedView = $derived(views.find((v) => v.query === query))
+	let isNewView = $derived(!!query && !selectedView)
 </script>
 
 <DropDown>
-	<button
-		type="button"
-		slot="activator"
-		class="menu-item bordered btn-sm gap-1 rounded-lg border font-semibold opacity-90"
-	>
-		<span>{isNewView ? 'Nouvelle vue' : selectedView?.name || 'Vue simple'}</span>
-		<Icon path={mdiChevronDown} size={20} class="translate-x-1 translate-y-px opacity-90" />
-	</button>
+	{#snippet activator()}
+		<button
+			type="button"
+			class="menu-item bordered gap-1 rounded-lg border font-semibold opacity-90 btn-sm"
+		>
+			<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-[6px]"
-					on:click={() => {
+					class="menu-item w-full pr-1.5"
+					onclick={() => {
 						selectedView = undefined
-						dialog.showModal()
+						dialog?.showModal()
 					}}
 				>
 					<span>Ajouter la nouvelle vue</span>
-					<Icon path={mdiPlus} class="ml-auto opacity-80" size={21} />
+					<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}>
+			<a href={page.url.pathname} class="menu-item" class:active={!query}>
 				<span class="grow">Vue simple</span>
 			</a>
 		</li>
@@ -87,21 +87,21 @@
 		{#each views as view (view.id)}
 			<li>
 				<a
-					href="{$page.url.pathname}?{view.query}"
+					href="{page.url.pathname}?{view.query}"
 					class="menu-item group pr-1"
 					class:active={view.id === selectedView?.id}
 				>
 					<span class="grow">{view.name}</span>
 					<button
 						type="button"
-						class="btn btn-square btn-ghost btn-xs rounded"
-						on:click|preventDefault={() => {
+						class="btn btn-square rounded btn-ghost btn-xs"
+						onclick={(e) => {
+							e.preventDefault()
 							selectedView = view
-							dialog.showModal()
+							dialog?.showModal()
 						}}
 					>
-						<Icon
-							path={mdiContentSaveEditOutline}
+						<SaveIcon
 							class="opacity-50 group-hover:opacity-80"
 							size={18}
 							title="Modifier la vue '{view.name}'"
@@ -114,14 +114,18 @@
 </DropDown>
 
 <Dialog bind:dialog>
-	<h2 slot="header" class="title">
-		{#if selectedView}
-			Modifier la vue
-		{:else}
-			Ajouter la nouvelle vue
-		{/if}
-	</h2>
-
+	{#snippet header()}
+		<h2 class="title">
+			{#if selectedView}
+				Modifier la vue
+			{:else}
+				Ajouter la nouvelle vue
+			{/if}
+		</h2>
+	{/snippet}
+
+	<span>TODO: how to build basic form (create update) with new system ?</span>
+	<!-- 
 	<form
 		action="{action}{selectedView ? actionUpdate : actionCreate}"
 		method="post"
@@ -133,18 +137,14 @@
 		<input type="hidden" name="key" value={key} />
 		<input type="hidden" name="query" value={query} />
 
-		<InputText
-			key="name"
-			input={{ placeholder: 'Nom de la vue' }}
-			value={selectedView?.name || ''}
-		/>
+		<Input key="name" input={{ placeholder: 'Nom de la vue' }} value={selectedView?.name || ''} />
 
 		<div class="mt-2 flex flex-row-reverse gap-2">
 			<button class="btn"> Valider </button>
 
-			<button formaction="{action}{actionDelete}" class="btn btn-ghost text-error">
+			<button formaction="{action}{actionDelete}" class="btn text-error btn-ghost">
 				Supprimer
 			</button>
 		</div>
-	</form>
+	</form> -->
 </Dialog>

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

@@ -1,29 +1,16 @@
-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 TableViewSelect: $$__sveltets_2_IsomorphicComponent<{
+type View = {
+    id: string;
+    name: string;
+    query: string;
+};
+type $$ComponentProps = {
     key: string;
-    views: {
-        id: string;
-        name: string;
-        query: string;
-    }[];
+    views: View[];
     action?: string;
     actionCreate?: string;
     actionUpdate?: string;
     actionDelete?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TableViewSelect = InstanceType<typeof TableViewSelect>;
+};
+declare const TableViewSelect: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableViewSelect = ReturnType<typeof TableViewSelect>;
 export default TableViewSelect;

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

@@ -4,7 +4,7 @@
 
 <td>
 	{#each cell as content}
-		<span class="badge mr-1 whitespace-nowrap">
+		<span class="mr-1 badge whitespace-nowrap">
 			{content}
 		</span>
 	{/each}

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

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import { mdiCheck, mdiClose } from '@mdi/js'
-	import { Icon } from '../../icon/index.js'
+	import { CheckIcon, XIcon } from '@lucide/svelte'
 
 	let { cell }: { cell: boolean } = $props()
 </script>
 
 <td>
 	{#if cell}
-		<Icon path={mdiCheck} class="fill-success" />
+		<CheckIcon class="fill-success" />
 	{:else}
-		<Icon path={mdiClose} class="fill-error" />
+		<XIcon class="fill-error" />
 	{/if}
 </td>

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

@@ -1,5 +1,5 @@
 export { default as TableCellArray } from './TableCellArray.svelte';
 export { default as TableCellBoolean } from './TableCellBoolean.svelte';
+export { default as TableCellDate } from './TableCellDate.svelte';
 export { default as TableCellNumber } from './TableCellNumber.svelte';
 export { default as TableCellString } from './TableCellString.svelte';
-export { default as TableCellDate } from './TableCellDate.svelte';

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

@@ -1,5 +1,5 @@
 export { default as TableCellArray } from './TableCellArray.svelte';
 export { default as TableCellBoolean } from './TableCellBoolean.svelte';
+export { default as TableCellDate } from './TableCellDate.svelte';
 export { default as TableCellNumber } from './TableCellNumber.svelte';
 export { default as TableCellString } from './TableCellString.svelte';
-export { default as TableCellDate } from './TableCellDate.svelte';

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

@@ -1,19 +1,24 @@
 <script lang="ts">
-	import { Icon } from '../../icon/index.js'
-	import { mdiSortAscending, mdiSortDescending } from '@mdi/js'
-	import { createEventDispatcher } from 'svelte'
+	import { ArrowDownNarrowWideIcon, ArrowDownWideNarrowIcon, type IconProps } from '@lucide/svelte'
+	import type { Component } from 'svelte'
 
 	type Order = 'asc' | 'desc' | undefined
-	export let order: Order
-	export let iconAsc = mdiSortAscending
-	export let iconDesc = mdiSortDescending
-
-	const dispatch = createEventDispatcher<{ change: Order }>()
+	let {
+		order = $bindable(),
+		IconAsc = ArrowDownNarrowWideIcon,
+		IconDesc = ArrowDownWideNarrowIcon,
+		onChange
+	}: {
+		order: Order
+		IconAsc?: Component<IconProps>
+		IconDesc?: Component<IconProps>
+		onChange?: (order: Order) => void
+	} = $props()
 
 	const handleOrderClick = (orderBy: 'asc' | 'desc') => () => {
 		if (order === orderBy) order = undefined
 		else order = orderBy
-		dispatch('change', order)
+		onChange?.(order)
 	}
 </script>
 
@@ -23,17 +28,17 @@
 		<button
 			class="btn ring-primary"
 			class:ring-2={order === 'asc'}
-			on:click={handleOrderClick('asc')}
+			onclick={handleOrderClick('asc')}
 		>
-			<Icon path={iconAsc} />
+			<IconAsc />
 			<span>Ascendant</span>
 		</button>
 		<button
 			class="btn ring-primary"
 			class:ring-2={order === 'desc'}
-			on:click={handleOrderClick('desc')}
+			onclick={handleOrderClick('desc')}
 		>
-			<Icon path={iconDesc} />
+			<IconDesc />
 			<span>Descendant</span>
 		</button>
 	</div>

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

@@ -1,24 +1,12 @@
-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>;
+import { type IconProps } from '@lucide/svelte';
+import type { Component } from 'svelte';
+type Order = 'asc' | 'desc' | undefined;
+type $$ComponentProps = {
+    order: Order;
+    IconAsc?: Component<IconProps>;
+    IconDesc?: Component<IconProps>;
+    onChange?: (order: Order) => void;
+};
+declare const OrderButtons: Component<$$ComponentProps, {}, "order">;
+type OrderButtons = ReturnType<typeof OrderButtons>;
 export default OrderButtons;

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="Item extends ItemBase">
-	import { mdiCheck, mdiClose } from '@mdi/js'
+	import { CheckIcon, XIcon } from '@lucide/svelte'
 	import type { ItemBase, TableField } from '../index.js'
 	import TableHeadSelect from './TableHeadSelect.svelte'
 
@@ -9,7 +9,7 @@
 <TableHeadSelect
 	{field}
 	options={[
-		{ value: 'true', label: 'Oui', icon: mdiCheck },
-		{ value: 'false', label: 'Non', icon: mdiClose }
+		{ value: 'true', label: 'Oui', icon: CheckIcon },
+		{ value: 'false', label: 'Non', icon: XIcon }
 	]}
 />

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

@@ -1,27 +1,26 @@
 <script lang="ts" generics="Item extends ItemBase">
+	import { CalendarArrowDownIcon, CalendarArrowUpIcon, CalendarSearchIcon } from '@lucide/svelte'
 	import { goto } from '$app/navigation'
 	import { page } from '$app/state'
-	import {
-		mdiCalendarFilterOutline,
-		mdiSortClockAscendingOutline,
-		mdiSortClockDescendingOutline
-	} from '@mdi/js'
-
+	import { urlParam } from '../../../state/param.svelte.ts'
 	import { DropDown } from '../../menu/index.js'
-	import { InputTime } from '../../input/index.js'
-	import type { ItemBase, TableField } from '../index.js'
 	import { formatRange } from '../../range/format.js'
-	import { RangePicker, type RangeAsDate } from '../../range/index.js'
-	import { urlParam } from '../../../store/param.js'
+	import { type RangeAsDate, RangePicker } from '../../range/index.js'
+	import type { ItemBase, TableField } from '../index.js'
 	import { jsonParse } from '../../../utils/jsonParse.js'
-	import { Icon } from '../../icon/index.js'
 	import OrderButtons from './OrderButtons.svelte'
 
-	let { field }: { field: TableField<Item> } = $props()
+	let { field }: { field: Omit<TableField<Item>, 'cell'> } = $props()
 
 	let dropDown: DropDown
 	let rangePicker: RangePicker
-	let initialValue = jsonParse<{ start?: string; end?: string; order?: 'asc' | 'desc' }>(
+
+	let initialValue = jsonParse<{
+		start?: string
+		end?: string
+		order?: 'asc' | 'desc'
+	}>(
+		// svelte-ignore state_referenced_locally
 		page.url.searchParams.get(field.key),
 		{}
 	)
@@ -37,7 +36,7 @@
 	function updateUrl() {
 		isValidPeriod = !!range.start && !!range.end
 		if (!isValidPeriod && !order) {
-			goto($urlParam.without(field.key, 'skip', 'take'), {
+			goto(urlParam.without(field.key, 'skip', 'take'), {
 				replaceState: true,
 				noScroll: true,
 				keepFocus: true
@@ -45,7 +44,7 @@
 			return
 		}
 		goto(
-			$urlParam.with(
+			urlParam.with(
 				{
 					[field.key]: JSON.stringify({
 						...(isValidPeriod
@@ -70,7 +69,7 @@
 		range = { start: null, end: null }
 		dropDown.hide()
 		rangePicker.clear()
-		goto($urlParam.without(field.key, 'skip', 'take'), {
+		goto(urlParam.without(field.key, 'skip', 'take'), {
 			replaceState: true,
 			noScroll: true,
 			keepFocus: true
@@ -85,37 +84,37 @@
 		hideOnNav={false}
 		class="max-h-none"
 	>
-		<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 !isValidPeriod}
-					<Icon path={mdiCalendarFilterOutline} size={15} class="opacity-50" />
-				{/if}
-			</div>
+		{#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 !isValidPeriod}
+						<CalendarSearchIcon size={15} class="opacity-50" />
+					{/if}
+				</div>
 
-			{#if isValidPeriod}
-				<span class="badge badge-primary badge-xs text-[0.7rem] font-normal text-white">
-					{formatRange(range)}
-				</span>
-			{/if}
-			{#if order}
-				<Icon
-					path={order === 'asc' ? mdiSortClockAscendingOutline : mdiSortClockDescendingOutline}
-					size={18}
-					class="fill-primary"
-				/>
-			{/if}
-		</button>
+				{#if isValidPeriod}
+					<span class="badge badge-xs text-[0.7rem] font-normal text-white badge-primary">
+						{formatRange(range)}
+					</span>
+				{/if}
+				{#if order === 'asc'}
+					<CalendarArrowDownIcon size={18} class="fill-primary" />
+				{:else if order === 'desc'}
+					<CalendarArrowUpIcon size={18} class="fill-primary" />
+				{/if}
+			</button>
+		{/snippet}
 
 		{#if field.sortable !== false}
 			<OrderButtons
 				bind:order
-				on:change={() => {
+				onChange={() => {
 					updateUrl()
 					dropDown.hide()
 				}}
-				iconAsc={mdiSortClockAscendingOutline}
-				iconDesc={mdiSortClockDescendingOutline}
+				IconAsc={CalendarArrowDownIcon}
+				IconDesc={CalendarArrowUpIcon}
 			/>
 		{/if}
 
@@ -141,20 +140,9 @@
 			<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"
-					on:input={updateUrl}
-				/>
-				<InputTime
-					label="Jusqu'à"
-					bind:value={range.end}
-					enhanceDisabled
-					class="grow"
-					on:input={updateUrl}
-				/>
+				<!-- <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 flex-row-reverse gap-2">

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

@@ -1,7 +1,7 @@
 import type { ItemBase, TableField } from '../index.js';
 declare function $$render<Item extends ItemBase>(): {
     props: {
-        field: TableField<Item>;
+        field: Omit<TableField<Item>, "cell">;
     };
     exports: {};
     bindings: "";

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

@@ -1,6 +1,7 @@
 <script lang="ts" generics="Item extends ItemBase">
-	import type { ItemBase, TableField } from '../index.js'
 	import { tip } from '../../../action/tip.js'
+	import type { ItemBase, TableField } from '../index.js'
+
 	let { field }: { field: TableField<Item> } = $props()
 </script>