fuma 0.0.1

package/dist/ui/table/TableViewSelect.svelte

@@ -0,0 +1,127 @@
+<script>import { onMount } from "svelte";
+import { mdiChevronDown, mdiContentSaveEditOutline, mdiPlus } from "@mdi/js";
+import { page } from "$app/stores";
+import { enhance } from "$app/forms";
+import { Dialog, DropDown, Icon, InputText } from "../index.js";
+import { useForm } from "../../validation/form.js";
+export let key;
+export let views;
+export let actionCreate = "?/create_view";
+export let actionUpdate = "?/create_view";
+export let actionDelete = "?/delete_view";
+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>
+	<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-[1px] opacity-90" />
+	</button>
+
+	<ul class="flex flex-col gap-1">
+		{#if isNewView}
+			<li>
+				<button
+					type="button"
+					class="menu-item w-full pr-[6px]"
+					on:click={() => {
+						selectedView = undefined
+						dialog.showModal()
+					}}
+				>
+					<span>Ajouter la nouvelle vue</span>
+					<Icon path={mdiPlus} 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}>
+				<span class="grow">Vue simple</span>
+			</a>
+		</li>
+
+		{#each views as view (view.id)}
+			<li>
+				<a
+					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={() => {
+							selectedView = view
+							dialog.showModal()
+						}}
+					>
+						<Icon
+							path={mdiContentSaveEditOutline}
+							class="opacity-50 group-hover:opacity-80"
+							size={18}
+							title="Modifier la vue '{view.name}'"
+						/>
+					</button>
+				</a>
+			</li>
+		{/each}
+	</ul>
+</DropDown>
+
+<Dialog bind:dialog>
+	<h2 slot="header" class="title">
+		{#if selectedView}
+			Modifier la vue
+		{:else}
+			Ajouter la nouvelle vue
+		{/if}
+	</h2>
+
+	<form action={selectedView ? actionUpdate : actionCreate} method="post" use:enhance={form.submit}>
+		{#if selectedView}
+			<input type="hidden" name="id" value={selectedView.id} />
+		{/if}
+		<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 || ''}
+		/>
+
+		<div class="mt-2 flex flex-row-reverse gap-2">
+			<button class="btn"> Valider </button>
+
+			<button formaction={actionDelete} class="btn btn-ghost text-error"> Supprimer </button>
+		</div>
+	</form>
+</Dialog>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        key: string;
+        views: {
+            id: string;
+            name: string;
+            query: string;
+        }[];
+        actionCreate?: string | undefined;
+        actionUpdate?: string | undefined;
+        actionDelete?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableViewSelectProps = typeof __propDef.props;
+export type TableViewSelectEvents = typeof __propDef.events;
+export type TableViewSelectSlots = typeof __propDef.slots;
+export default class TableViewSelect extends SvelteComponent<TableViewSelectProps, TableViewSelectEvents, TableViewSelectSlots> {
+}
+export {};

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

@@ -0,0 +1,10 @@
+<script>export let value;
+</script>
+
+<td>
+	{#each value as v}
+		<span class="badge mr-1 whitespace-nowrap">
+			{v}
+		</span>
+	{/each}
+</td>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: (string | number | boolean)[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableCellArrayProps = typeof __propDef.props;
+export type TableCellArrayEvents = typeof __propDef.events;
+export type TableCellArraySlots = typeof __propDef.slots;
+export default class TableCellArray extends SvelteComponent<TableCellArrayProps, TableCellArrayEvents, TableCellArraySlots> {
+}
+export {};

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

@@ -0,0 +1,12 @@
+<script>import { mdiCheck, mdiClose } from "@mdi/js";
+import { Icon } from "../../index.js";
+export let value;
+</script>
+
+<td>
+	{#if value}
+		<Icon path={mdiCheck} class="fill-success" />
+	{:else}
+		<Icon path={mdiClose} class="fill-error" />
+	{/if}
+</td>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableCellBooleanProps = typeof __propDef.props;
+export type TableCellBooleanEvents = typeof __propDef.events;
+export type TableCellBooleanSlots = typeof __propDef.slots;
+export default class TableCellBoolean extends SvelteComponent<TableCellBooleanProps, TableCellBooleanEvents, TableCellBooleanSlots> {
+}
+export {};

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

@@ -0,0 +1,6 @@
+<script>export let value;
+</script>
+
+<td>
+	<span class="badge">{value}</span>
+</td>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableCellNumberProps = typeof __propDef.props;
+export type TableCellNumberEvents = typeof __propDef.events;
+export type TableCellNumberSlots = typeof __propDef.slots;
+export default class TableCellNumber extends SvelteComponent<TableCellNumberProps, TableCellNumberEvents, TableCellNumberSlots> {
+}
+export {};

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

@@ -0,0 +1,7 @@
+<script>export let value;
+export let field;
+</script>
+
+<td data-field-key={field.key} data-field-type={field.type === 'textarea' ? 'textarea' : 'string'}>
+	<span>{@html value}</span>
+</td>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { TableField } from '../index.js';
+declare const __propDef: {
+    props: {
+        value: string;
+        field: TableField;
+    };
+    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> {
+}
+export {};

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

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

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

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

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

@@ -0,0 +1,14 @@
+export type TableContext = {
+    KEY_FIELDS_VISIBLE: string;
+    KEY_FIELDS_HIDDEN: string;
+    KEY_FIELDS_ORDER: string;
+};
+export declare const createKeys: (key: string) => {
+    KEY_FIELDS_VISIBLE: string;
+    KEY_FIELDS_HIDDEN: string;
+    KEY_FIELDS_ORDER: string;
+};
+export declare const context: {
+    set: (key: any, context: TableContext) => TableContext;
+    get: (key: any) => TableContext;
+};

package/dist/ui/table/context.js

@@ -0,0 +1,10 @@
+import { getContext, setContext } from 'svelte';
+export const createKeys = (key) => ({
+    KEY_FIELDS_VISIBLE: `${key}_fields_visible`,
+    KEY_FIELDS_HIDDEN: `${key}_fields_hidden`,
+    KEY_FIELDS_ORDER: `${key}_fields_order`
+});
+export const context = {
+    set: (setContext),
+    get: (getContext)
+};

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

@@ -0,0 +1,79 @@
+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 = {
+    key: string;
+    label: string;
+    type?: TableFieldType;
+    options?: Options;
+    hint?: string;
+    locked?: boolean;
+    visible?: boolean;
+    /** Internal usage */
+    $visible?: boolean;
+};
+type TableFieldUntyped<Item = any> = {
+    getCell: (item: Item) => ComponentAndProps | Primitive[] | Primitive | undefined;
+    head?: ComponentAndProps | ((field: TableField) => ComponentAndProps);
+};
+type TableFieldPrimitive<Item = any> = {
+    type: Exclude<TableFieldType, 'select' | 'multiselect'>;
+    getCell: (item: Item) => ComponentAndProps | Primitive | undefined;
+};
+type TableFieldSelect<Item = any> = {
+    type: 'select';
+    getCell: (item: Item) => Primitive;
+    options: Options;
+};
+type TableFieldMultiselect<Item = any> = {
+    type: 'multiselect';
+    getCell: (item: Item) => Primitive[];
+    options: Options;
+};
+/**
+ * Initialise fields from url query
+ */
+export declare function syncFieldsWithParams(tablekey: string, fields: TableField[]): ({
+    $visible: boolean;
+    key: string;
+    label: string;
+    type?: TableFieldType | undefined;
+    options?: Options | undefined;
+    hint?: string | undefined;
+    locked?: boolean | undefined;
+    visible?: boolean | undefined;
+    getCell: (item: any) => Primitive | ComponentAndProps | Primitive[] | undefined;
+    head?: ComponentAndProps | ((field: TableField<any>) => ComponentAndProps) | undefined;
+} | {
+    $visible: boolean;
+    key: string;
+    label: string;
+    type: "string" | "number" | "boolean" | "textarea" | "date";
+    options?: Options | undefined;
+    hint?: string | undefined;
+    locked?: boolean | undefined;
+    visible?: boolean | undefined;
+    getCell: (item: any) => Primitive | ComponentAndProps | undefined;
+} | {
+    $visible: boolean;
+    key: string;
+    label: string;
+    type: "select";
+    options: (Options | undefined) & Options;
+    hint?: string | undefined;
+    locked?: boolean | undefined;
+    visible?: boolean | undefined;
+    getCell: (item: any) => Primitive;
+} | {
+    $visible: boolean;
+    key: string;
+    label: string;
+    type: "multiselect";
+    options: (Options | undefined) & Options;
+    hint?: string | undefined;
+    locked?: boolean | undefined;
+    visible?: boolean | undefined;
+    getCell: (item: any) => Primitive[];
+})[];
+export {};

package/dist/ui/table/field.js

@@ -0,0 +1,29 @@
+import { page } from '$app/stores';
+import { get } from 'svelte/store';
+import { jsonParse } from '../../utils/jsonParse.js';
+import { createKeys } from './context.js';
+/**
+ * Initialise fields from url query
+ */
+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), []);
+    // Init correct visible prop
+    const _fields = fields.map((field) => ({
+        ...field,
+        $visible: field.locked ||
+            (field.visible ? !fieldsHidden.includes(field.key) : fieldsVisible.includes(field.key))
+    }));
+    // Init correct order fields
+    if (fieldsOrder.length === fields.length) {
+        return _fields.map((f, index, self) => {
+            const key = fieldsOrder[index];
+            const field = self.find((_) => _.key === key);
+            return field ? field : f;
+        });
+    }
+    return _fields;
+}

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

@@ -0,0 +1,12 @@
+<script>import { mdiCheck, mdiClose } from "@mdi/js";
+import TableHeadSelect from "./TableHeadSelect.svelte";
+export let field;
+</script>
+
+<TableHeadSelect
+	{field}
+	options={[
+		{ value: 'true', label: 'Oui', icon: mdiCheck },
+		{ value: 'false', label: 'Non', icon: mdiClose }
+	]}
+/>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { TableField } from '../index.js';
+declare const __propDef: {
+    props: {
+        field: TableField;
+    };
+    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> {
+}
+export {};

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

@@ -0,0 +1,100 @@
+<script>import { goto } from "$app/navigation";
+import { page } from "$app/stores";
+import { DropDown, InputTime } from "../../index.js";
+import { formatRange } from "../../../utils/formatRange.js";
+import { PeriodPicker } from "../../period/index.js";
+import { urlParam } from "../../../store/param.js";
+import { jsonParse } from "../../../utils/jsonParse.js";
+export let field;
+let dropDown;
+const initialValue = jsonParse(
+  $page.url.searchParams.get(field.key),
+  {}
+);
+const start = initialValue.start?.split("T") || [];
+const end = initialValue.end?.split("T") || [];
+let period = {
+  start: start[0] || "",
+  end: end[0] || ""
+};
+let time = {
+  start: start[1] || "00:00",
+  end: end[1] || "23:59"
+};
+$:
+  isValidPeriod = period.start && period.end && time.start && time.start;
+function getLabel(_period, _time) {
+  return formatRange({
+    start: /* @__PURE__ */ new Date(`${_period.start}T${_time.start}`),
+    end: /* @__PURE__ */ new Date(`${_period.end}T${_time.end}`)
+  });
+}
+function handleSubmit() {
+  dropDown.hide();
+  if (!isValidPeriod)
+    return;
+  goto(
+    $urlParam.with(
+      {
+        [field.key]: JSON.stringify({
+          start: `${period.start}T${time.start || "00:00"}`,
+          end: `${period.end}T${time.end || "23:59"}`
+        })
+      },
+      "skip",
+      "take"
+    ),
+    { replaceState: true, noScroll: true }
+  );
+}
+function handleReset() {
+  dropDown.hide();
+  period = { start: "", end: "" };
+  time = { start: "00:00", end: "23:59" };
+  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 }}
+		class="max-h-none"
+	>
+		<button slot="activator" class="menu-item min-h-8 w-full flex-wrap gap-y-1">
+			<span>{field.label}</span>
+			{#if isValidPeriod}
+				<span class="badge badge-primary badge-xs text-[0.7rem] font-normal text-white">
+					{getLabel(period, time)}
+				</span>
+			{/if}
+		</button>
+
+		<form
+			class="flex flex-col font-normal"
+			on:submit|preventDefault={handleSubmit}
+			data-sveltekit-replacestate
+		>
+			<PeriodPicker numberOfMonths={1} bind:period />
+
+			<input
+				class="hidden"
+				type="text"
+				name="start"
+				value="{period.start}T{time.start || '00:00'}"
+			/>
+			<input class="hidden" type="text" name="end" value="{period.end}T{time.end || '23:59'}" />
+
+			<div class="m-2 flex gap-2">
+				<InputTime label="A partir de" bind:value={time.start} enhanceDisabled class="grow" />
+				<InputTime label="Jusqu'à" bind:value={time.end} enhanceDisabled class="grow" />
+			</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>
+			</div>
+		</form>
+	</DropDown>
+</th>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type TableField } from '../../index.js';
+declare const __propDef: {
+    props: {
+        field: TableField;
+    };
+    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> {
+}
+export {};

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

@@ -0,0 +1,7 @@
+<script>import { tip } from "../../../action/tip.js";
+export let field;
+</script>
+
+<th use:tip={{ disable: !field.hint, content: field.hint }}>
+	{field.label}
+</th>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { TableField } from '../../index.js';
+declare const __propDef: {
+    props: {
+        field: TableField;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableHeadDefaultProps = typeof __propDef.props;
+export type TableHeadDefaultEvents = typeof __propDef.events;
+export type TableHeadDefaultSlots = typeof __propDef.slots;
+export default class TableHeadDefault extends SvelteComponent<TableHeadDefaultProps, TableHeadDefaultEvents, TableHeadDefaultSlots> {
+}
+export {};

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

@@ -0,0 +1,80 @@
+<script>import { onMount } from "svelte";
+import debounce from "debounce";
+import { goto } from "$app/navigation";
+import { page } from "$app/stores";
+import { DropDown, InputNumber } from "../../index.js";
+import { urlParam } from "../../../store/param.js";
+import { jsonParse } from "../../../utils/jsonParse.js";
+export let field;
+let tip;
+let { min, max } = initRange($page.url);
+onMount(() => page.subscribe(({ url }) => ({ min, max } = initRange(url))));
+function initRange({ searchParams }) {
+  return jsonParse(searchParams.get(field.key), {
+    min: void 0,
+    max: void 0
+  });
+}
+const udpateUrl = debounce(() => {
+  if (isDefined(min) || isDefined(max)) {
+    goto($urlParam.with({ [field.key]: JSON.stringify({ min, max }) }, "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 v !== void 0 && v !== null;
+}
+$:
+  isNegatifRange = isDefined(min) && isDefined(max) && max < min;
+</script>
+
+<th class="p-1">
+	<DropDown
+		bind:tip
+		hideOnBlur
+		hideOnNav={false}
+		autofocus
+		tippyProps={{ appendTo: () => document.body }}
+	>
+		<button slot="activator" class="menu-item min-h-8 w-full flex-wrap gap-y-1">
+			<span>{field.label}</span>
+
+			{#if isDefined(min) || isDefined(max)}
+				<span class="badge badge-primary badge-xs text-[0.7rem] font-normal text-white">
+					{#if isDefined(min)}
+						{min} ≤
+					{/if}
+					x
+					{#if isDefined(max)}
+						≤ {max}
+					{/if}
+				</span>
+			{/if}
+		</button>
+
+		<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={max}
+				on:input={udpateUrl}
+				hint={isNegatifRange ? 'Doit être plus grand' : ''}
+				input={{ placeholder: 'Max' }}
+			/>
+
+			<div class="col-span-full flex justify-end gap-2">
+				<button class="btn btn-ghost" type="button" on:click={handleReset}>Effacer</button>
+				<button class="btn">Ok</button>
+			</div>
+		</form>
+	</DropDown>
+</th>