fuma 0.0.1

package/dist/ui/menu/dropdown.css

@@ -0,0 +1,33 @@
+.tippy-box[data-theme~='dropdown'] {
+	background: none;
+	color: initial;
+}
+
+.tippy-box[data-theme~='dropdown'] > .tippy-content {
+	padding: 0;
+}
+
+.tippy-box[data-theme~='dropdown'] > .tippy-arrow {
+	color: #e5e7eb;
+}
+
+.tippy-box[data-theme~='dropdown-border'] {
+	background: #fff;
+	color: initial;
+	border-width: 1px;
+	padding: 0.25rem;
+	border-radius: 0.5rem;
+	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+		0 4px 6px -4px var(--tw-shadow-color);
+	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+		var(--tw-shadow);
+}
+
+.tippy-box[data-theme~='dropdown-border'] > .tippy-content {
+	padding: 0;
+}
+
+.tippy-box[data-theme~='dropdown-border'] > .tippy-arrow {
+	color: #e5e7eb;
+}

package/dist/ui/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DropDown } from './DropDown.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';

package/dist/ui/menu/index.js

@@ -0,0 +1,2 @@
+export { default as DropDown } from './DropDown.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';

package/dist/ui/period/PeriodPicker.svelte

@@ -0,0 +1,53 @@
+<script>import { onMount, onDestroy, createEventDispatcher } from "svelte";
+import dayjs from "dayjs";
+export let numberOfMonths = 3;
+export let numberOfColumns = numberOfMonths;
+export let showWeekNumbers = true;
+export let period = void 0;
+let startElement;
+let endElement;
+let picker;
+let parentEl;
+const dispatch = createEventDispatcher();
+onMount(() => {
+  initTimePicker();
+});
+onDestroy(() => {
+  picker?.destroy();
+});
+async function initTimePicker() {
+  const _Litepicker = (await import("litepicker")).Litepicker;
+  picker?.destroy();
+  picker = new _Litepicker({
+    element: startElement,
+    elementEnd: endElement,
+    // Nécéssaire pour traquer le theme
+    parentEl,
+    inlineMode: true,
+    singleMode: false,
+    allowRepick: false,
+    lang: navigator.language,
+    numberOfMonths,
+    numberOfColumns,
+    showWeekNumbers,
+    startDate: period?.start ? new Date(period.start) : "",
+    endDate: period?.end ? new Date(period.end) : "",
+    setup: (picker2) => {
+      picker2.on("selected", (date1, date2) => {
+        const start = dayjs(date1.dateInstance).format("YYYY-MM-DD");
+        const end = dayjs(date2.dateInstance).format("YYYY-MM-DD");
+        period = {
+          start,
+          end
+        };
+        dispatch("change", period);
+      });
+    }
+  });
+}
+</script>
+
+<input type="hidden" bind:this={startElement} />
+<input type="hidden" bind:this={endElement} />
+
+<div bind:this={parentEl} />

package/dist/ui/period/PeriodPicker.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { Period } from './index.js';
+declare const __propDef: {
+    props: {
+        numberOfMonths?: number | undefined;
+        numberOfColumns?: number | undefined;
+        showWeekNumbers?: boolean | undefined;
+        period?: Period | undefined;
+    };
+    events: {
+        change: CustomEvent<Period>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PeriodPickerProps = typeof __propDef.props;
+export type PeriodPickerEvents = typeof __propDef.events;
+export type PeriodPickerSlots = typeof __propDef.slots;
+export default class PeriodPicker extends SvelteComponent<PeriodPickerProps, PeriodPickerEvents, PeriodPickerSlots> {
+}
+export {};

package/dist/ui/period/PeriodPickerButton.svelte

@@ -0,0 +1,73 @@
+<script>import { mdiCalendarMonthOutline, mdiClose } from "@mdi/js";
+import { goto } from "$app/navigation";
+import { page } from "$app/stores";
+import { Icon, DropDown, InputTime, PeriodPicker } from "../index.js";
+import { formatRange } from "../../utils/formatRange.js";
+import { urlParam } from "../../store/param.js";
+let dropDown;
+const start = $page.url.searchParams.get("start")?.split("T") || [];
+const end = $page.url.searchParams.get("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) {
+  if (!_period || !_period.start || !_period.end)
+    return "P\xE9riodes";
+  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({
+      start: `${period.start}T${time.start || "00:00"}`,
+      end: `${period.end}T${time.end || "23:59"}`
+    }),
+    { replaceState: true, noScroll: true }
+  );
+}
+function handleReset() {
+  dropDown.hide();
+  period = { start: "", end: "" };
+  time = { start: "00:00", end: "23:59" };
+  goto($urlParam.without("start", "end"), { replaceState: true, noScroll: true });
+}
+</script>
+
+<DropDown bind:this={dropDown} on:mouseLeave={handleSubmit} class="max-h-full">
+	<div slot="activator" class="join">
+		<button class="btn join-item btn-sm shrink flex-nowrap">
+			<Icon path={mdiCalendarMonthOutline} class="opacity-60" size={20} />
+			{getLabel(period, time)}
+		</button>
+		{#if isValidPeriod}
+			<button class="btn btn-square join-item btn-sm" on:click|preventDefault={handleReset}>
+				<Icon path={mdiClose} class="fill-base-content" />
+			</button>
+		{/if}
+	</div>
+
+	<form class="flex flex-col" 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="flex gap-2 p-2">
+			<InputTime label="A partir de" bind:value={time.start} enhanceDisabled class="grow" />
+			<InputTime label="Jusqu'à" bind:value={time.end} enhanceDisabled class="grow" />
+		</div>
+		<button class="btn m-2"> Valider </button>
+	</form>
+</DropDown>

package/dist/ui/period/PeriodPickerButton.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PeriodPickerButtonProps = typeof __propDef.props;
+export type PeriodPickerButtonEvents = typeof __propDef.events;
+export type PeriodPickerButtonSlots = typeof __propDef.slots;
+export default class PeriodPickerButton extends SvelteComponent<PeriodPickerButtonProps, PeriodPickerButtonEvents, PeriodPickerButtonSlots> {
+}
+export {};

package/dist/ui/period/index.d.ts

@@ -0,0 +1,6 @@
+export type Period = {
+    start: string;
+    end: string;
+};
+export { default as PeriodPicker } from './PeriodPicker.svelte';
+export { default as PeriodPickerButton } from './PeriodPickerButton.svelte';

package/dist/ui/period/index.js

@@ -0,0 +1,2 @@
+export { default as PeriodPicker } from './PeriodPicker.svelte';
+export { default as PeriodPickerButton } from './PeriodPickerButton.svelte';

package/dist/ui/table/Table.svelte

@@ -0,0 +1,42 @@
+<script>import { afterNavigate } from "$app/navigation";
+import { Placeholder } from "../index.js";
+import {
+  TableHead,
+  TableBody,
+  context,
+  createKeys,
+  syncFieldsWithParams
+} from "./index.js";
+export let key = "table";
+export let fields;
+export let items;
+export let action = void 0;
+export let placholder = "Aucun \xE9l\xE9ment trouv\xE9";
+export let classRow = "";
+export let hideBody = false;
+export let onCreateField = void 0;
+const { KEY_FIELDS_VISIBLE, KEY_FIELDS_HIDDEN, KEY_FIELDS_ORDER } = createKeys(key);
+context.set(key, {
+  KEY_FIELDS_VISIBLE,
+  KEY_FIELDS_HIDDEN,
+  KEY_FIELDS_ORDER
+});
+const initFields = () => fields = syncFieldsWithParams(key, fields);
+initFields();
+afterNavigate(initFields);
+</script>
+
+<div class="overflow-x-auto rounded-lg border bg-base-100" class:min-h-[320px]={!hideBody}>
+	<table class="table relative">
+		<TableHead {fields} {key} {onCreateField} />
+		{#if !hideBody && items.length}
+			<TableBody {fields} {items} {action} {classRow} on:click />
+		{/if}
+	</table>
+
+	{#if hideBody && !items.length}
+		<Placeholder class="rounded-t-none">
+			{placholder}
+		</Placeholder>
+	{/if}
+</div>

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

@@ -0,0 +1,39 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentAndProps } from '../../utils/component.js';
+import { type TableField } from './index.js';
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        key?: string | undefined;
+        fields: TableField<Item>[];
+        items: Item[];
+        action?: ((item: Item) => ComponentAndProps) | undefined;
+        placholder?: string | undefined;
+        classRow?: string | undefined;
+        hideBody?: boolean | undefined;
+        onCreateField?: (() => void) | undefined;
+    };
+    events(): {
+        click: CustomEvent<{
+            id: string;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TableProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type TableEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type TableSlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class Table<Item extends {
+    id: string;
+}> extends SvelteComponent<TableProps<Item>, TableEvents<Item>, TableSlots<Item>> {
+}
+export {};

package/dist/ui/table/TableBody.svelte

@@ -0,0 +1,29 @@
+<script>import { createEventDispatcher } from "svelte";
+import { TableCell } from "../index.js";
+export let items;
+export let fields;
+export let action = void 0;
+export let classRow = "";
+const dispatch = createEventDispatcher();
+$:
+  _fields = fields.filter((f) => f.$visible);
+function handleClickRow(event, item) {
+  dispatch("click", item);
+}
+</script>
+
+<tbody>
+	{#each items as item (item.id)}
+		<tr class={classRow} on:click={(event) => handleClickRow(event, item)}>
+			{#each _fields as field (field.key)}
+				<TableCell {item} {field} />
+			{/each}
+			<td align="right">
+				{#if action}
+					{@const { component, props } = action(item)}
+					<svelte:component this={component} {...props} />
+				{/if}
+			</td>
+		</tr>
+	{/each}
+</tbody>

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import { type TableField } from '../index.js';
+import type { ComponentAndProps } from '../../utils/component.js';
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        items: Item[];
+        fields: TableField<Item>[];
+        action?: ((item: Item) => ComponentAndProps) | undefined;
+        classRow?: string | undefined;
+    };
+    events(): {
+        click: CustomEvent<Item>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TableBodyProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type TableBodyEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type TableBodySlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class TableBody<Item extends {
+    id: string;
+}> extends SvelteComponent<TableBodyProps<Item>, TableBodyEvents<Item>, TableBodySlots<Item>> {
+}
+export {};

package/dist/ui/table/TableCell.svelte

@@ -0,0 +1,27 @@
+<script>import {
+  TableCellArray,
+  TableCellBoolean,
+  TableCellNumber,
+  TableCellString
+} from "./cell/index.js";
+export let item;
+export let field;
+$:
+  value = field.getCell(item);
+</script>
+
+{#if Array.isArray(value)}
+	<TableCellArray {value} />
+{:else if typeof value === 'number'}
+	<TableCellNumber {value} />
+{:else if typeof value === 'boolean'}
+	<TableCellBoolean {value} />
+{:else if typeof value === 'string'}
+	<TableCellString {value} {field} />
+{:else if value === undefined}
+	<td>-</td>
+{:else}
+	<td>
+		<svelte:component this={value.component} {...value.props} />
+	</td>
+{/if}

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { TableField } from './index.js';
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        item: Item;
+        field: TableField<Item>;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TableCellProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type TableCellEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type TableCellSlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class TableCell<Item extends {
+    id: string;
+}> extends SvelteComponent<TableCellProps<Item>, TableCellEvents<Item>, TableCellSlots<Item>> {
+}
+export {};

package/dist/ui/table/TableFieldsEdition.svelte

@@ -0,0 +1,122 @@
+<script>import {
+  mdiCheck,
+  mdiCheckCircleOutline,
+  mdiCircleSmall,
+  mdiDotsHorizontal,
+  mdiDrag,
+  mdiPlus
+} from "@mdi/js";
+import { goto } from "$app/navigation";
+import { page } from "$app/stores";
+import { urlParam } from "../../store/param.js";
+import { listEditable } from "../../action/list/index.js";
+import { jsonParse } from "../../utils/jsonParse.js";
+import { Icon, DropDown } from "../index.js";
+import { context } from "./context.js";
+export let fields;
+export let key;
+export let onCreateField = void 0;
+let tip;
+const { KEY_FIELDS_VISIBLE, KEY_FIELDS_HIDDEN, KEY_FIELDS_ORDER } = context.get(key);
+function getFieldHref(field) {
+  if (field.locked)
+    return;
+  const url = toggleParam(field.visible ? KEY_FIELDS_HIDDEN : KEY_FIELDS_VISIBLE, field.key);
+  if (url.searchParams.has(field.key)) {
+    url.searchParams.delete(field.key);
+    url.searchParams.delete("skip");
+    url.searchParams.delete("take");
+  }
+  return url.pathname + url.search;
+}
+function toggleParam(paramKey, fieldKey) {
+  const url = new URL($page.url);
+  const fieldsKeys = jsonParse($page.url.searchParams.get(paramKey), []);
+  if (!fieldsKeys.includes(fieldKey))
+    fieldsKeys.push(fieldKey);
+  else
+    fieldsKeys.splice(fieldsKeys.indexOf(fieldKey), 1);
+  if (fieldsKeys.length)
+    url.searchParams.set(paramKey, JSON.stringify(fieldsKeys));
+  else
+    url.searchParams.delete(paramKey);
+  return url;
+}
+function handleReorder(newFieldsOrder) {
+  fields = newFieldsOrder;
+  const fieldsOrder = fields.map((f) => f.key);
+  const newUrl = $urlParam.with({ [KEY_FIELDS_ORDER]: JSON.stringify(fieldsOrder) });
+  goto(newUrl, { replaceState: true, noScroll: true, keepFocus: true });
+}
+</script>
+
+<th class="sticky right-0 z-10 p-0 px-1" align="right">
+	<DropDown
+		bind:tip
+		hideOnNav={false}
+		class="max-h-none px-0"
+		tippyProps={{ appendTo: () => document.body, placement: 'bottom-end' }}
+	>
+		<button slot="activator" type="button" class="btn btn-square btn-ghost btn-sm backdrop-blur">
+			<Icon path={mdiDotsHorizontal} title="Définir les champs" />
+		</button>
+
+		{#if onCreateField}
+			<div class="bordered flex items-center gap-2 border-b pb-1 pl-2 pr-1">
+				<span class=" font-semibold opacity-70">Champs</span>
+				<button
+					type="button"
+					class="btn btn-square btn-sm ml-auto"
+					on:click={() => {
+						if (onCreateField) onCreateField()
+						tip.hide()
+					}}
+				>
+					<Icon path={mdiPlus} title="Ajouter un champ" />
+				</button>
+			</div>
+		{/if}
+
+		<div class="max-h-[500px] overflow-auto px-1 pt-1">
+			<div
+				use:listEditable={{
+					items: fields,
+					onChange: handleReorder,
+					dragElementsSelector: '.drag-button'
+				}}
+			>
+				{#each fields as field (field.key)}
+					<a
+						draggable="false"
+						href={getFieldHref(field)}
+						class="menu-item w-full"
+						class:disabled={field.locked}
+						data-sveltekit-keepfocus
+						data-sveltekit-replacestate
+						data-sveltekit-noscroll
+					>
+						{#if field.locked}
+							<Icon path={mdiCheck} class="fill-base-content/50" size={21} />
+						{:else if $urlParam.has(field.key)}
+							<Icon path={mdiCheckCircleOutline} class="fill-primary" size={21} />
+						{:else if field.$visible}
+							<Icon path={mdiCheck} class="fill-success" size={21} />
+						{:else}
+							<Icon path={mdiCircleSmall} class="fill-base-content/50" size={21} />
+						{/if}
+
+						<span>{field.label}</span>
+
+						<span
+							class="drag-button btn btn-square btn-ghost btn-xs ml-auto"
+							on:click|preventDefault
+							role="none"
+						>
+							<Icon path={mdiDrag} size={18} class="fill-base-content/80" />
+						</span>
+					</a>
+				{/each}
+			</div>
+		</div>
+	</DropDown>
+</th>

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import { type TableField } from '../index.js';
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        fields: TableField<Item>[];
+        key: string;
+        onCreateField?: (() => void) | undefined;
+    };
+    events(): {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TableFieldsEditionProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type TableFieldsEditionEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type TableFieldsEditionSlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class TableFieldsEdition<Item extends {
+    id: string;
+}> extends SvelteComponent<TableFieldsEditionProps<Item>, TableFieldsEditionEvents<Item>, TableFieldsEditionSlots<Item>> {
+}
+export {};

package/dist/ui/table/TableHead.svelte

@@ -0,0 +1,31 @@
+<script>import { component } from "../../utils/component.js";
+import { TableFieldsEdition } from "./index.js";
+import { tableHeadComponent } from "./head/index.js";
+import TableHeadDefault from "./head/TableHeadDefault.svelte";
+export let fields;
+export let key;
+export let onCreateField = void 0;
+function getComponent(field) {
+  if (field.type === "select" || field.type === "multiselect")
+    return tableHeadComponent(field.type, { options: field.options || [] })(field);
+  if (field.type)
+    return tableHeadComponent(field.type, {})(field);
+  if (!field.head)
+    return component(TableHeadDefault, { field });
+  if (typeof field.head === "function")
+    return field.head(field);
+  if (typeof field.head === "string")
+    return tableHeadComponent(field.head, {})(field);
+  return field.head;
+}
+</script>
+
+<thead>
+	<tr class="shadow">
+		{#each fields.filter((f) => f.$visible) as field (field.key)}
+			{@const { component, props } = getComponent(field)}
+			<svelte:component this={component} {...props} />
+		{/each}
+		<TableFieldsEdition {fields} {key} {onCreateField} />
+	</tr>
+</thead>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import { type TableField } from './index.js';
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        fields: TableField<Item>[];
+        key: string;
+        onCreateField?: (() => void) | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TableHeadProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type TableHeadEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type TableHeadSlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class TableHead<Item extends {
+    id: string;
+}> extends SvelteComponent<TableHeadProps<Item>, TableHeadEvents<Item>, TableHeadSlots<Item>> {
+}
+export {};