fuma 1.0.20 → 2.0.0

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

@@ -1,77 +1,64 @@
-<script generics="Item extends {id: string}">import { goto } from "$app/navigation";
-import { page } from "$app/stores";
-import {
-  mdiCalendarFilterOutline,
-  mdiSortClockAscendingOutline,
-  mdiSortClockDescendingOutline
-} from "@mdi/js";
-import { DropDown } from "../../menu/index.js";
-import { InputTime } from "../../input/index.js";
-import { formatRange } from "../../range/format.js";
-import { RangePicker } 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;
-let dropDown;
-let rangePicker;
-const initialValue = jsonParse(
-  $page.url.searchParams.get(field.key),
-  {}
-);
-let { order } = jsonParse($page.url.searchParams.get(field.key), {});
-let range = {
-  start: initialValue.start ? new Date(initialValue.start) : null,
-  end: initialValue.end ? new Date(initialValue.end) : null
-};
-let isValidPeriod = !!range.start && !!range.end;
-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({
-          ...isValidPeriod ? {
-            start: range.start?.toJSON(),
-            end: range.end?.toJSON()
-          } : {},
-          ...order ? { order } : {}
-        })
-      },
-      "skip",
-      "take"
-    ),
-    { replaceState: true, noScroll: true, keepFocus: true }
-  );
-}
-function handleReset() {
-  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,
-    keepFocus: true
-  });
-}
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import { page } from '$app/stores'
+	import { mdiCalendarFilterOutline } 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 { urlParam } from '../../../store/param.js'
+	import { jsonParse } from '../../../utils/jsonParse.js'
+	import { Icon } from '../../icon/index.js'
+
+	export let field: Omit<TableField, 'getCell' | 'type'>
+
+	let dropDown: DropDown
+	let rangePicker: RangePicker
+	const initialValue = jsonParse<{ start?: string; end?: string }>(
+		$page.url.searchParams.get(field.key),
+		{}
+	)
+
+	let range = {
+		start: initialValue.start ? new Date(initialValue.start) : null,
+		end: initialValue.end ? new Date(initialValue.end) : null
+	}
+
+	$: isValidPeriod = !!range.start && !!range.end
+
+	function handleSubmit() {
+		dropDown.hide()
+		if (!isValidPeriod) return
+		goto(
+			$urlParam.with(
+				{
+					[field.key]: JSON.stringify({
+						start: range.start?.toJSON(),
+						end: range.end?.toJSON()
+					})
+				},
+				'skip',
+				'take'
+			),
+			{ replaceState: true, noScroll: true }
+		)
+	}
+
+	function handleReset() {
+		dropDown.hide()
+		range = { start: null, end: null }
+		rangePicker.clear()
+		goto($urlParam.without(field.key, 'skip', 'take'), { replaceState: true, noScroll: 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">
@@ -87,64 +74,25 @@ function handleReset() {
 					{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
-			on:submit|preventDefault={() => dropDown.hide()}
-			data-sveltekit-replacestate
 			class="flex flex-col font-normal"
-			class:mt-6={field.sortable !== false}
+			on:submit|preventDefault={handleSubmit}
+			data-sveltekit-replacestate
 		>
-			<RangePicker
-				bind:this={rangePicker}
-				numberOfMonths={1}
-				on:change={({ detail: newRange }) => {
-					range = newRange
-					updateUrl()
-				}}
-			/>
+			<RangePicker bind:this={rangePicker} numberOfMonths={1} bind:range />
 
 			<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"
-					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} enhanceDisabled class="grow" />
+				<InputTime label="Jusqu'à" bind:value={range.end} enhanceDisabled class="grow" />
 			</div>
 
 			<div class="m-2 flex flex-row-reverse gap-2">
-				<button class="btn">Ok</button>
+				<button class="btn"> Valider </button>
 				<button class="btn btn-ghost" type="button" on:click={handleReset}>Effacer</button>
 			</div>
 		</form>

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

@@ -1,27 +1,21 @@
-import { SvelteComponent } from "svelte";
 import type { TableField } from '../index.js';
-declare class __sveltets_Render<Item extends {
-    id: string;
-}> {
-    props(): {
-        field: Omit<TableField<Item>, "type" | "getCell">;
+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;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-}
-export type TableHeadDateProps<Item extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<Item>['props']>;
-export type TableHeadDateEvents<Item extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<Item>['events']>;
-export type TableHeadDateSlots<Item extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<Item>['slots']>;
-export default class TableHeadDate<Item extends {
-    id: string;
-}> extends SvelteComponent<TableHeadDateProps<Item>, TableHeadDateEvents<Item>, TableHeadDateSlots<Item>> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const TableHeadDate: $$__sveltets_2_IsomorphicComponent<{
+    field: Omit<TableField, "getCell" | "type">;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TableHeadDate = InstanceType<typeof TableHeadDate>;
+export default TableHeadDate;

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

@@ -1,5 +1,8 @@
-<script generics="Item extends {id: string}">import { tip } from "../../../action/tip.js";
-export let field;
+<script lang="ts">
+	import type { TableField } from '../index.js'
+	import { tip } from '../../../action/tip.js'
+
+	export let field: TableField
 </script>
 
 <th use:tip={{ disable: !field.hint, content: field.hint }}>

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

@@ -1,27 +1,21 @@
-import { SvelteComponent } from "svelte";
 import type { TableField } from '../index.js';
-declare class __sveltets_Render<Item extends {
-    id: string;
-}> {
-    props(): {
-        field: TableField<Item>;
+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;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-}
-export type TableHeadDefaultProps<Item extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<Item>['props']>;
-export type TableHeadDefaultEvents<Item extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<Item>['events']>;
-export type TableHeadDefaultSlots<Item extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<Item>['slots']>;
-export default class TableHeadDefault<Item extends {
-    id: string;
-}> extends SvelteComponent<TableHeadDefaultProps<Item>, TableHeadDefaultEvents<Item>, TableHeadDefaultSlots<Item>> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const TableHeadDefault: $$__sveltets_2_IsomorphicComponent<{
+    field: TableField;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TableHeadDefault = InstanceType<typeof TableHeadDefault>;
+export default TableHeadDefault;

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

@@ -1,59 +1,68 @@
-<script generics="Item extends {id: string}">import { onMount } from "svelte";
-import debounce from "debounce";
-import { goto } from "$app/navigation";
-import { page } from "$app/stores";
-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 { mdiFilterMultipleOutline, mdiSortAscending, mdiSortDescending } from "@mdi/js";
-import { Icon } from "../../icon/index.js";
-import OrderButtons from "./OrderButtons.svelte";
-export let field;
-let tip;
-let { min, max, order } = initRange($page.url);
-onMount(() => page.subscribe(({ url }) => ({ min, max, order } = initRange(url))));
-function initRange({ searchParams }) {
-  return jsonParse(searchParams.get(field.key), {
-    min: void 0,
-    max: void 0,
-    order: void 0
-  });
-}
-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 });
-}, 250);
-function handleReset() {
-  min = void 0;
-  max = void 0;
-  tip.hide();
-  goto($urlParam.without(field.key, "skip", "take"), { noScroll: true, keepFocus: true });
-}
-function isDefined(v) {
-  return typeof v === "number";
-}
-$:
-  isNegatifRange = isDefined(min) && isDefined(max) && max < min;
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import type { TippyInstance } from '../../../utils/tippy.js'
+	import debounce from 'debounce'
+	import { goto } from '$app/navigation'
+	import { page } from '$app/stores'
+
+	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 type { TableField } from '../field.js'
+	import { mdiFilterMultipleOutline } from '@mdi/js'
+	import { Icon } from '../../icon/index.js'
+
+	export let field: TableField
+
+	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))))
+
+	function initRange({ searchParams }: URL) {
+		return jsonParse<Range>(searchParams.get(field.key), {
+			min: undefined,
+			max: undefined
+		})
+	}
+
+	const udpateUrl = debounce(() => {
+		if (isDefined(min) || isDefined(max)) {
+			goto(
+				$urlParam.with(
+					{
+						[field.key]: JSON.stringify({
+							...(isDefined(min) ? { min } : {}),
+							...(isDefined(max) ? { max } : {})
+						})
+					},
+					'skip',
+					'take'
+				),
+				{
+					noScroll: true,
+					keepFocus: true
+				}
+			)
+			return
+		}
+		goto($urlParam.without(field.key, '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'
+	}
+
+	$: isNegatifRange = isDefined(min) && isDefined(max) && max < min
 </script>
 
 <th class="p-1">
@@ -83,31 +92,13 @@ $:
 					{/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={updateUrl} input={{ placeholder: 'Min' }} />
+			<InputNumber bind:value={min} on:input={udpateUrl} input={{ placeholder: 'Min' }} />
 			<InputNumber
 				bind:value={max}
-				on:input={updateUrl}
+				on:input={udpateUrl}
 				hint={isNegatifRange ? 'Doit être plus grand' : ''}
 				input={{ placeholder: 'Max' }}
 			/>

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

@@ -1,27 +1,21 @@
-import { SvelteComponent } from "svelte";
 import type { TableField } from '../field.js';
-declare class __sveltets_Render<Item extends {
-    id: string;
-}> {
-    props(): {
-        field: TableField<Item>;
+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;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-}
-export type TableHeadNumberProps<Item extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<Item>['props']>;
-export type TableHeadNumberEvents<Item extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<Item>['events']>;
-export type TableHeadNumberSlots<Item extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<Item>['slots']>;
-export default class TableHeadNumber<Item extends {
-    id: string;
-}> extends SvelteComponent<TableHeadNumberProps<Item>, TableHeadNumberEvents<Item>, TableHeadNumberSlots<Item>> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const TableHeadNumber: $$__sveltets_2_IsomorphicComponent<{
+    field: TableField;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TableHeadNumber = InstanceType<typeof TableHeadNumber>;
+export default TableHeadNumber;

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

@@ -1,44 +1,50 @@
-<script generics="Item extends {id: string}">import { derived } from "svelte/store";
-import { page } from "$app/stores";
-import { jsonParse } from "../../../utils/jsonParse.js";
-import { DropDown } from "../../menu/index.js";
-import { Icon } from "../../icon/index.js";
-import { parseOptions } from "../../../utils/options.js";
-import { urlParam } from "../../../store/param.js";
-import { mdiOrderBoolAscendingVariant } from "@mdi/js";
-export let field;
-export let 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);
-function initOptions({ searchParams }) {
-  const selection = searchParams.get(field.key);
-  const selections = jsonParse(searchParams.get(field.key), []);
-  function getActive(value) {
-    if (!multiSelect)
-      return selection === value;
-    return selections.includes(value);
-  }
-  return parseOptions(options).map((option) => ({
-    ...option,
-    isActive: getActive(option.value)
-  }));
-}
-const getHref = derived(urlParam, (params) => (value) => {
-  const selections = jsonParse(params.get(field.key), []);
-  if (!multiSelect)
-    return params.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");
-  }
-  return params.with({ [field.key]: JSON.stringify([...selections, value]) }, "skip", "take");
-});
+<script lang="ts">
+	import { derived } from 'svelte/store'
+	import { page } from '$app/stores'
+
+	import { jsonParse } from '../../../utils/jsonParse.js'
+	import type { TableField } from '../index.js'
+	import { DropDown } from '../../menu/index.js'
+	import { Icon } from '../../icon/index.js'
+	import { type Options, parseOptions } from '../../../utils/options.js'
+	import { urlParam } from '../../../store/param.js'
+	import { mdiOrderBoolAscendingVariant } from '@mdi/js'
+
+	export let field: TableField
+	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)
+
+	function initOptions({ searchParams }: URL) {
+		const selection = searchParams.get(field.key)
+		const selections = jsonParse<string[]>(searchParams.get(field.key), [])
+
+		function getActive(value: string) {
+			if (!multiSelect) return selection === value
+			return selections.includes(value)
+		}
+
+		return parseOptions(options).map((option) => ({
+			...option,
+			isActive: getActive(option.value)
+		}))
+	}
+
+	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')
+		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')
+		}
+		return params.with({ [field.key]: JSON.stringify([...selections, value]) }, 'skip', 'take')
+	})
 </script>
 
 <th class="p-1">