fuma 0.5.1 → 1.0.1

package/dist/ui/menu/DropDownMenu.svelte

@@ -1,21 +1,28 @@
-<script>import { createEventDispatcher } from "svelte";
-import { mdiUnfoldMoreHorizontal } from "@mdi/js";
-import { Icon } from "../icon/index.js";
-import { DropDown } from "./index.js";
-import { SelectorList } from "../input/index.js";
-import { parseOptions } from "../../utils/options.js";
-export let options;
-export let tippyProps = {};
-$:
-  _options = parseOptions(options);
-let trigger;
-let dropDown;
-const dispatch = createEventDispatcher();
-function onSelect(index) {
-  const option = _options[index];
-  dispatch("select", option.value);
-  dropDown.hide();
-}
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+	import { mdiUnfoldMoreHorizontal } from '@mdi/js'
+
+	import { Icon } from '../icon/index.js'
+	import { DropDown } from './index.js'
+	import { SelectorList } from '../input/index.js'
+	import { type Options, parseOptions } from '../../utils/options.js'
+	import type { TippyProps } from '../../utils/tippy.js'
+
+	export let options: Options
+	export let tippyProps: Partial<TippyProps> = {}
+
+	$: _options = parseOptions(options)
+
+	let trigger: HTMLDivElement
+
+	let dropDown: DropDown
+	const dispatch = createEventDispatcher<{ select: string }>()
+
+	function onSelect(index: number) {
+		const option = _options[index]
+		dispatch('select', option.value)
+		dropDown.hide()
+	}
 </script>
 
 <DropDown bind:this={dropDown} {tippyProps}>

package/dist/ui/menu/DropDownMenu.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
     props: {
         options: Options;
         tippyProps?: Partial<TippyProps> | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         select: CustomEvent<string>;

package/dist/ui/mode/ToggleMode.svelte

@@ -1,23 +1,27 @@
-<script>import { browser } from "$app/environment";
-import { ModeWatcher, toggleMode, mode } from "mode-watcher";
-import { Icon } from "../icon/index.js";
-import { mdiWeatherNight, mdiWhiteBalanceSunny } from "@mdi/js";
-mode.subscribe((_mode) => {
-  if (!browser)
-    return;
-  const [html] = document.getElementsByTagName("html");
-  if (!html || !_mode)
-    return;
-  html.setAttribute("data-theme", _mode);
-});
-$:
-  path = $mode === "light" ? mdiWhiteBalanceSunny : mdiWeatherNight;
+<script lang="ts">
+	import { browser } from '$app/environment'
+	import { ModeWatcher, toggleMode, mode } from 'mode-watcher'
+
+	import { Icon } from '../icon/index.js'
+	import { mdiWeatherNight, mdiWhiteBalanceSunny } from '@mdi/js'
+
+	let klass = ''
+	export { klass as class }
+
+	mode.subscribe((_mode) => {
+		if (!browser) return
+		const [html] = document.getElementsByTagName('html')
+		if (!html || !_mode) return
+		html.setAttribute('data-theme', _mode)
+	})
+
+	$: path = $mode === 'light' ? mdiWhiteBalanceSunny : mdiWeatherNight
 </script>
 
 <ModeWatcher />
 
 <slot {toggleMode} {path}>
-	<button class="btn btn-square btn-sm" on:click={toggleMode}>
+	<button class="btn btn-square btn-sm {klass}" on:click={toggleMode}>
 		<Icon {path} />
 	</button>
 </slot>

package/dist/ui/mode/ToggleMode.svelte.d.ts

@@ -1,7 +1,13 @@
 import { SvelteComponent } from "svelte";
 import { toggleMode } from 'mode-watcher';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        class?: string | undefined;
+        children?: import("svelte").Snippet<[{
+            toggleMode: typeof toggleMode;
+            path: string;
+        }]> | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/ui/pagination/Pagination.svelte

@@ -1,11 +1,12 @@
-<script>import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
-import { Icon } from "../icon/index.js";
-import { urlParam } from "../../store/index.js";
-export let take = 20;
-$:
-  skip = +($urlParam.get("skip") || 0);
-$:
-  _take = +($urlParam.get("take") || take);
+<script lang="ts">
+	import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
+	import { Icon } from '../icon/index.js'
+	import { urlParam } from '../../store/index.js'
+
+	export let take = 20
+
+	$: skip = +($urlParam.get('skip') || 0)
+	$: _take = +($urlParam.get('take') || take)
 </script>
 
 <div class="join">

package/dist/ui/placeholder/Placeholder.svelte

@@ -1,6 +1,7 @@
-<script>let klass = "";
-export { klass as class };
-export let style = "";
+<script lang="ts">
+	let klass = ''
+	export { klass as class }
+	export let style = ''
 </script>
 
 <div

package/dist/ui/placeholder/Placeholder.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         class?: string | undefined;
         style?: string | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/placeholder/PlaceholderImage.svelte

@@ -1,7 +1,9 @@
-<script>import { mdiPlus } from "@mdi/js";
-import { Icon } from "../icon/index.js";
-export let x;
-export let y;
+<script lang="ts">
+	import { mdiPlus } from '@mdi/js'
+	import { Icon } from '../icon/index.js'
+
+	export let x: number
+	export let y: number
 </script>
 
 <div style:width="{x}px" style:height="{y}px" class="rounded-lg bg-base-200 p-2">

package/dist/ui/placeholder/PlaceholderImage.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         x: number;
         y: number;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/range/RangePicker.svelte

@@ -1,68 +1,81 @@
-<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 range = void 0;
-export let minDate = void 0;
-export let maxDate = void 0;
-let startElement;
-let endElement;
-let picker;
-let parentEl;
-const dispatch = createEventDispatcher();
-onMount(() => {
-  initTimePicker();
-});
-onDestroy(() => {
-  picker?.destroy();
-});
-export function clear() {
-  picker?.clearSelection();
-}
-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,
-    minDate,
-    maxDate,
-    startDate: range?.start ? dayjs(range.start).toDate() : void 0,
-    endDate: range?.end ? dayjs(range.end).toDate() : void 0,
-    setup: (picker2) => {
-      picker2.on("selected", (date1, date2) => {
-        range = {
-          start: /* @__PURE__ */ new Date(
-            `${getAbsoluteDate(date1.dateInstance)}T${getAbsoluteTime(range?.start)}`
-          ),
-          end: /* @__PURE__ */ new Date(
-            `${getAbsoluteDate(date2.dateInstance)}T${getAbsoluteTime(range?.end, "23:59:00")}`
-          )
-        };
-        dispatch("change", range);
-      });
-    }
-  });
-}
-const getAbsoluteDate = (date) => [date.getFullYear(), date.getMonth() + 1, date.getDate()].map((n) => n.toString().padStart(2, "0")).join("-");
-const getAbsoluteTime = (date, defaultTime = "00:00:00") => {
-  if (!date)
-    return defaultTime;
-  return dayjs(date).format("HH:mm:ss");
-};
+<script lang="ts">
+	import { onMount, onDestroy, createEventDispatcher } from 'svelte'
+	import type { Litepicker } from 'litepicker'
+	import type { Range, RangeAsDate, RangeDate } from './types.js'
+	import dayjs from 'dayjs'
+
+	export let numberOfMonths = 3
+	export let numberOfColumns = numberOfMonths
+	export let showWeekNumbers = true
+	export let range: RangeAsDate | undefined = undefined
+	export let minDate: Date | number | string | undefined = undefined
+	export let maxDate: Date | number | string | undefined = undefined
+
+	let startElement: HTMLInputElement
+	let endElement: HTMLInputElement
+	let picker: Litepicker
+	let parentEl: HTMLDivElement
+	const dispatch = createEventDispatcher<{ change: Range }>()
+
+	onMount(() => {
+		initTimePicker()
+	})
+
+	onDestroy(() => {
+		picker?.destroy()
+	})
+
+	export function clear() {
+		picker?.clearSelection()
+	}
+
+	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: parentEl,
+			inlineMode: true,
+			singleMode: false,
+			allowRepick: false,
+			lang: navigator.language,
+			numberOfMonths,
+			numberOfColumns,
+			showWeekNumbers,
+			minDate,
+			maxDate,
+			startDate: range?.start ? dayjs(range.start).toDate() : undefined,
+			endDate: range?.end ? dayjs(range.end).toDate() : undefined,
+			setup: (picker: Litepicker) => {
+				picker.on('selected', (date1: any, date2: any) => {
+					range = {
+						start: new Date(
+							`${getAbsoluteDate(date1.dateInstance)}T${getAbsoluteTime(range?.start)}`
+						),
+						end: new Date(
+							`${getAbsoluteDate(date2.dateInstance)}T${getAbsoluteTime(range?.end, '23:59:00')}`
+						)
+					}
+					dispatch('change', range)
+				})
+			}
+		})
+	}
+
+	const getAbsoluteDate = (date: Date) =>
+		[date.getFullYear(), date.getMonth() + 1, date.getDate()]
+			.map((n) => n.toString().padStart(2, '0'))
+			.join('-')
+
+	const getAbsoluteTime = (date?: RangeDate, defaultTime = '00:00:00') => {
+		if (!date) return defaultTime
+		return dayjs(date).format('HH:mm:ss')
+	}
 </script>
 
 <input type="hidden" bind:this={startElement} />
 <input type="hidden" bind:this={endElement} />
 
-<div bind:this={parentEl} />
+<div bind:this={parentEl}></div>

package/dist/ui/range/RangePickerButton.svelte

@@ -1,38 +1,46 @@
-<script>import { mdiCalendarMonthOutline } from "@mdi/js";
-import { goto } from "$app/navigation";
-import { slide } from "svelte/transition";
-import { urlParam } from "../../store/param.js";
-import { formatRangeShort } from "./format.js";
-import { Icon } from "../icon/index.js";
-import { DropDown } from "../menu/index.js";
-import { InputTime } from "../input/index.js";
-import { RangePicker } from "./index.js";
-import { jsonParse } from "../../utils/jsonParse.js";
-export let minDate = void 0;
-export let maxDate = void 0;
-let dropDown;
-let rangePicker;
-export let key = "range";
-export let range = jsonParse($urlParam.get(key), {
-  start: null,
-  end: null
-});
-$:
-  isValidPeriod = !!range.start && !!range.end;
-function getLabel(_range) {
-  if (!_range || !_range.start || !_range.end)
-    return "";
-  return formatRangeShort(_range);
-}
-async function writeURL() {
-  const url = !range.start && !range.end ? $urlParam.without(key) : $urlParam.with({
-    [key]: JSON.stringify({
-      start: range.start?.toJSON(),
-      end: range.end?.toJSON()
-    })
-  });
-  return goto(url, { replaceState: true, noScroll: true });
-}
+<script lang="ts">
+	import { mdiCalendarMonthOutline } from '@mdi/js'
+	import { goto } from '$app/navigation'
+	import { slide } from 'svelte/transition'
+
+	import { urlParam } from '../../store/param.js'
+	import { formatRangeShort } from './format.js'
+	import { Icon } from '../icon/index.js'
+	import { DropDown } from '../menu/index.js'
+	import { InputTime } from '../input/index.js'
+	import { type RangeAsDate, RangePicker } from './index.js'
+	import { jsonParse } from '../../utils/jsonParse.js'
+	export let minDate: Date | number | string | undefined = undefined
+	export let maxDate: Date | number | string | undefined = undefined
+
+	let dropDown: DropDown
+	let rangePicker: RangePicker
+
+	export let key = 'range'
+	export let range: RangeAsDate = jsonParse<RangeAsDate>($urlParam.get(key), {
+		start: null,
+		end: null
+	})
+
+	$: isValidPeriod = !!range.start && !!range.end
+
+	function getLabel(_range?: Partial<RangeAsDate>) {
+		if (!_range || !_range.start || !_range.end) return ''
+		return formatRangeShort(_range as RangeAsDate)
+	}
+
+	async function writeURL() {
+		const url =
+			!range.start && !range.end
+				? $urlParam.without(key)
+				: $urlParam.with({
+						[key]: JSON.stringify({
+							start: range.start?.toJSON(),
+							end: range.end?.toJSON()
+						})
+					})
+		return goto(url, { replaceState: true, noScroll: true })
+	}
 </script>
 
 <DropDown bind:this={dropDown} tippyProps={{ onHidden: writeURL }} class="max-h-full">

package/dist/ui/table/Table.svelte

@@ -1,31 +1,38 @@
-<script generics="Item extends {id: string}">import { afterNavigate } from "$app/navigation";
-import { Placeholder } from "../placeholder/index.js";
-import {
-  TableHead,
-  TableBody,
-  context,
-  createKeys,
-  syncFieldsWithParams
-} from "./index.js";
-export let key = "table";
-export let fields;
-export let items;
-export let slotAction = void 0;
-export let placholder = "Aucun \xE9l\xE9ment trouv\xE9";
-let klass = "";
-export { klass as class };
-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 lang="ts" generics="Item extends {id: string}">
+	import { afterNavigate } from '$app/navigation'
+	import { Placeholder } from '../placeholder/index.js'
+	import type { ComponentAndProps } from '../../utils/component.js'
+
+	import {
+		type TableField,
+		TableHead,
+		TableBody,
+		context,
+		createKeys,
+		syncFieldsWithParams
+	} from './index.js'
+
+	export let key = 'table'
+	export let fields: TableField<Item>[]
+	export let items: Item[]
+	export let slotAction: ((item: Item) => ComponentAndProps) | undefined = undefined
+	export let placholder = 'Aucun élément trouvé'
+	let klass = ''
+	export {klass as class}
+	export let classRow = ''
+	export let hideBody = false
+	export let onCreateField: (() => void) | undefined = undefined
+
+	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="{klass} overflow-x-auto rounded-lg border bg-base-100" class:min-h-[320px]={!hideBody}>

package/dist/ui/table/TableBody.svelte

@@ -1,15 +1,21 @@
-<script generics="Item extends {id: string}">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 lang="ts" generics="Item extends {id: string}">
+	import { createEventDispatcher } from 'svelte'
+
+	import { TableCell, type TableField } from './index.js'
+	import type { ComponentAndProps } from '../../utils/component.js'
+
+	export let items: Item[]
+	export let fields: TableField<Item>[]
+	export let action: ((item: Item) => ComponentAndProps) | undefined = undefined
+	export let classRow = ''
+
+	const dispatch = createEventDispatcher<{ click: Item }>()
+
+	$: _fields = fields.filter((f) => f.$visible)
+
+	function handleClickRow(event: MouseEvent, item: Item) {
+		dispatch('click', item)
+	}
 </script>
 
 <tbody>

package/dist/ui/table/TableCell.svelte

@@ -1,13 +1,16 @@
-<script generics="Item extends {id: string}">import {
-  TableCellArray,
-  TableCellBoolean,
-  TableCellNumber,
-  TableCellString
-} from "./cell/index.js";
-export let item;
-export let field;
-$:
-  value = field.getCell(item);
+<script lang="ts" generics="Item extends {id: string}">
+	import {
+		TableCellArray,
+		TableCellBoolean,
+		TableCellNumber,
+		TableCellString
+	} from './cell/index.js'
+	import type { TableField } from './index.js'
+
+	export let item: Item
+	export let field: TableField<Item>
+
+	$: value = field.getCell(item)
 </script>
 
 {#if Array.isArray(value)}