fuma 1.0.16 → 1.0.18

package/dist/ui/table/TableViewSelect.svelte

@@ -1,53 +1,40 @@
-<script lang="ts">
-	import { onMount } from 'svelte'
-	import { mdiChevronDown, mdiContentSaveEditOutline, mdiPlus } from '@mdi/js'
-	import { page } from '$app/stores'
-	import { enhance } from '$app/forms'
-
-	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'
-
-	type View = {
-		id: string
-		name: string
-		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)
-		searchParam.delete('skip')
-		searchParam.delete('take')
-		return searchParam.toString()
-	}
+<script>import { onMount } from "svelte";
+import { mdiChevronDown, mdiContentSaveEditOutline, mdiPlus } from "@mdi/js";
+import { page } from "$app/stores";
+import { enhance } from "$app/forms";
+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";
+export let key;
+export let views;
+export let action = "";
+export let actionCreate = "?/view_create";
+export let actionUpdate = "?/view_update";
+export let actionDelete = "?/view_delete";
+let dialog;
+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 }) {
+  const searchParam = new URLSearchParams(searchParams);
+  searchParam.delete("skip");
+  searchParam.delete("take");
+  return searchParam.toString();
+}
 </script>
 
 <DropDown>

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

@@ -1,8 +1,6 @@
-<script lang="ts">
-	import { Badge } from '../../badge/index.js'
-	import { component, type ComponentAndProps } from '../../../utils/component.js'
-
-	export let value: (ComponentAndProps | string | number | boolean)[]
+<script>import { Badge } from "../../badge/index.js";
+import { component } from "../../../utils/component.js";
+export let value;
 </script>
 
 <td>

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

@@ -1,7 +1,6 @@
-<script lang="ts">
-	import { mdiCheck, mdiClose } from '@mdi/js'
-	import { Icon } from '../../icon/index.js'
-	export let value: boolean
+<script>import { mdiCheck, mdiClose } from "@mdi/js";
+import { Icon } from "../../icon/index.js";
+export let value;
 </script>
 
 <td>

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

@@ -1,5 +1,4 @@
-<script lang="ts">
-	export let value: number
+<script>export let value;
 </script>
 
 <td>

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

@@ -1,8 +1,5 @@
-<script lang="ts">
-	import type { TableField } from '../index.js'
-
-	export let value: string
-	export let field: TableField
+<script generics="Item extends {id: string}">export let value;
+export let field;
 </script>
 
 <td data-field-key={field.key} data-field-type={field.type === 'textarea' ? 'textarea' : 'string'}>

package/dist/ui/table/cell/TableCellString.svelte.d.ts

@@ -1,18 +1,28 @@
 import { SvelteComponent } from "svelte";
 import type { TableField } from '../index.js';
-declare const __propDef: {
-    props: {
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
         value: string;
-        field: TableField;
+        field: TableField<Item>;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
-};
-export type TableCellStringProps = typeof __propDef.props;
-export type TableCellStringEvents = typeof __propDef.events;
-export type TableCellStringSlots = typeof __propDef.slots;
-export default class TableCellString extends SvelteComponent<TableCellStringProps, TableCellStringEvents, TableCellStringSlots> {
+    slots(): {};
+}
+export type TableCellStringProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type TableCellStringEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type TableCellStringSlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class TableCellString<Item extends {
+    id: string;
+}> extends SvelteComponent<TableCellStringProps<Item>, TableCellStringEvents<Item>, TableCellStringSlots<Item>> {
 }
 export {};

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

@@ -1,7 +1,10 @@
 import type { ComponentAndProps, Primitive } from '../../utils/component.js';
 import type { Options } from '../../utils/options.js';
+export type ItemBase = {
+    id: string;
+};
 export type TableFieldType = 'string' | 'textarea' | 'number' | 'boolean' | 'select' | 'multiselect' | 'date';
-export type TableField<Item = any> = TableFieldCommon & (TableFieldUntyped<Item> | TableFieldPrimitive<Item> | TableFieldSelect<Item> | TableFieldMultiselect<Item>);
+export type TableField<Item extends ItemBase> = TableFieldCommon & (TableFieldUntyped<Item> | TableFieldPrimitive<Item> | TableFieldSelect<Item> | TableFieldMultiselect<Item>);
 type TableFieldCommon = {
     key: string;
     label: string;
@@ -10,23 +13,24 @@ type TableFieldCommon = {
     hint?: string;
     locked?: boolean;
     visible?: boolean;
+    sortable?: boolean;
     /** Internal usage */
-    $visible?: boolean;
+    _visible?: boolean;
 };
-type TableFieldUntyped<Item = any> = {
+type TableFieldUntyped<Item extends ItemBase> = {
     getCell: (item: Item) => ComponentAndProps[] | ComponentAndProps | Primitive[] | Primitive | undefined | null;
-    head?: ComponentAndProps | ((field: TableField) => ComponentAndProps);
+    head?: ComponentAndProps | ((field: TableField<Item>) => ComponentAndProps);
 };
-type TableFieldPrimitive<Item = any> = {
+type TableFieldPrimitive<Item extends ItemBase> = {
     type: Exclude<TableFieldType, 'select' | 'multiselect'>;
     getCell: (item: Item) => ComponentAndProps[] | ComponentAndProps | Primitive | undefined | null;
 };
-type TableFieldSelect<Item = any> = {
+type TableFieldSelect<Item extends ItemBase> = {
     type: 'select';
     getCell: (item: Item) => Primitive | undefined | null;
     options: Options;
 };
-type TableFieldMultiselect<Item = any> = {
+type TableFieldMultiselect<Item extends ItemBase> = {
     type: 'multiselect';
     getCell: (item: Item) => Primitive[] | undefined | null;
     options: Options;
@@ -34,8 +38,8 @@ type TableFieldMultiselect<Item = any> = {
 /**
  * Initialise fields from url query
  */
-export declare function syncFieldsWithParams(tablekey: string, fields: TableField[]): ({
-    $visible: boolean;
+export declare function syncFieldsWithParams<Item extends ItemBase>(tablekey: string, fields: TableField<Item>[]): ({
+    _visible: boolean;
     key: string;
     label: string;
     type?: TableFieldType | undefined;
@@ -43,10 +47,11 @@ export declare function syncFieldsWithParams(tablekey: string, fields: TableFiel
     hint?: string | undefined;
     locked?: boolean | undefined;
     visible?: boolean | undefined;
-    getCell: (item: any) => Primitive | ComponentAndProps | ComponentAndProps[] | Primitive[] | null | undefined;
-    head?: ComponentAndProps | ((field: TableField<any>) => ComponentAndProps) | undefined;
+    sortable?: boolean | undefined;
+    getCell: (item: Item) => Primitive | ComponentAndProps | ComponentAndProps[] | Primitive[] | null | undefined;
+    head?: ComponentAndProps | ((field: TableField<Item>) => ComponentAndProps) | undefined;
 } | {
-    $visible: boolean;
+    _visible: boolean;
     key: string;
     label: string;
     type: "string" | "number" | "boolean" | "textarea" | "date";
@@ -54,9 +59,10 @@ export declare function syncFieldsWithParams(tablekey: string, fields: TableFiel
     hint?: string | undefined;
     locked?: boolean | undefined;
     visible?: boolean | undefined;
-    getCell: (item: any) => Primitive | ComponentAndProps | ComponentAndProps[] | null | undefined;
+    sortable?: boolean | undefined;
+    getCell: (item: Item) => Primitive | ComponentAndProps | ComponentAndProps[] | null | undefined;
 } | {
-    $visible: boolean;
+    _visible: boolean;
     key: string;
     label: string;
     type: "select";
@@ -64,9 +70,10 @@ export declare function syncFieldsWithParams(tablekey: string, fields: TableFiel
     hint?: string | undefined;
     locked?: boolean | undefined;
     visible?: boolean | undefined;
-    getCell: (item: any) => Primitive | null | undefined;
+    sortable?: boolean | undefined;
+    getCell: (item: Item) => Primitive | null | undefined;
 } | {
-    $visible: boolean;
+    _visible: boolean;
     key: string;
     label: string;
     type: "multiselect";
@@ -74,6 +81,7 @@ export declare function syncFieldsWithParams(tablekey: string, fields: TableFiel
     hint?: string | undefined;
     locked?: boolean | undefined;
     visible?: boolean | undefined;
-    getCell: (item: any) => Primitive[] | null | undefined;
+    sortable?: boolean | undefined;
+    getCell: (item: Item) => Primitive[] | null | undefined;
 })[];
 export {};

package/dist/ui/table/field.js

@@ -14,7 +14,7 @@ export function syncFieldsWithParams(tablekey, fields) {
     // 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,37 @@
+<script>import { Icon } from "../../icon/index.js";
+import { mdiSortAscending, mdiSortDescending } from "@mdi/js";
+import { createEventDispatcher } from "svelte";
+export let order;
+export let iconAsc = mdiSortAscending;
+export let iconDesc = mdiSortDescending;
+const dispatch = createEventDispatcher();
+const handleOrderClick = (orderBy) => () => {
+  if (order === orderBy)
+    order = void 0;
+  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,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        order: "desc" | "asc" | undefined;
+        iconAsc?: string | undefined;
+        iconDesc?: string | undefined;
+    };
+    events: {
+        change: CustomEvent<"desc" | "asc" | undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OrderButtonsProps = typeof __propDef.props;
+export type OrderButtonsEvents = typeof __propDef.events;
+export type OrderButtonsSlots = typeof __propDef.slots;
+export default class OrderButtons extends SvelteComponent<OrderButtonsProps, OrderButtonsEvents, OrderButtonsSlots> {
+}
+export {};

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

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

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

@@ -1,17 +1,27 @@
 import { SvelteComponent } from "svelte";
 import type { TableField } from '../index.js';
-declare const __propDef: {
-    props: {
-        field: TableField;
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        field: TableField<Item>;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
-};
-export type TableHeadBooleanProps = typeof __propDef.props;
-export type TableHeadBooleanEvents = typeof __propDef.events;
-export type TableHeadBooleanSlots = typeof __propDef.slots;
-export default class TableHeadBoolean extends SvelteComponent<TableHeadBooleanProps, TableHeadBooleanEvents, TableHeadBooleanSlots> {
+    slots(): {};
+}
+export type TableHeadBooleanProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type TableHeadBooleanEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type TableHeadBooleanSlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class TableHeadBoolean<Item extends {
+    id: string;
+}> extends SvelteComponent<TableHeadBooleanProps<Item>, TableHeadBooleanEvents<Item>, TableHeadBooleanSlots<Item>> {
 }
 export {};

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

@@ -1,64 +1,77 @@
-<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 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>
 
 <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,25 +87,64 @@
 					{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}
+			on:submit|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">Ok</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,17 +1,27 @@
 import { SvelteComponent } from "svelte";
 import type { TableField } from '../index.js';
-declare const __propDef: {
-    props: {
-        field: Omit<TableField, 'getCell' | 'type'>;
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        field: Omit<TableField<Item>, "type" | "getCell">;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
-};
-export type TableHeadDateProps = typeof __propDef.props;
-export type TableHeadDateEvents = typeof __propDef.events;
-export type TableHeadDateSlots = typeof __propDef.slots;
-export default class TableHeadDate extends SvelteComponent<TableHeadDateProps, TableHeadDateEvents, TableHeadDateSlots> {
+    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>> {
 }
 export {};

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

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