fuma 1.0.15 → 1.0.17

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>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/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>import { mdiCheck, mdiClose } from "@mdi/js";
+import TableHeadSelect from "./TableHeadSelect.svelte";
+export let field;
 </script>
 
 <TableHeadSelect

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>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,61 @@
 					{formatRange(range)}
 				</span>
 			{/if}
+			{#if order}
+				<Icon
+					path={order === 'asc' ? mdiSortClockAscendingOutline : mdiSortClockDescendingOutline}
+					size={18}
+					class="fill-primary"
+				/>
+			{/if}
 		</button>
 
+		<OrderButtons
+			bind:order
+			on:change={() => {
+				updateUrl()
+				dropDown.hide()
+			}}
+			iconAsc={mdiSortClockAscendingOutline}
+			iconDesc={mdiSortClockDescendingOutline}
+		/>
+
 		<form
-			class="flex flex-col font-normal"
-			on:submit|preventDefault={handleSubmit}
+			class="mt-6 flex flex-col font-normal"
+			on:submit|preventDefault={() => dropDown.hide()}
 			data-sveltekit-replacestate
 		>
-			<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/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>import { tip } from "../../../action/tip.js";
+export let field;
 </script>
 
 <th use:tip={{ disable: !field.hint, content: field.hint }}>

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

@@ -1,68 +1,59 @@
-<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>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>
 
 <th class="p-1">
@@ -92,13 +83,31 @@
 					{/if}
 				</span>
 			{/if}
+			{#if order}
+				<Icon
+					path={order === 'asc' ? mdiSortAscending : mdiSortDescending}
+					size={18}
+					class="fill-primary"
+				/>
+			{/if}
 		</button>
 
+		<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>
 		<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' }}
 			/>