fuma 0.4.4 → 0.4.6

package/dist/action/autoSubmit.d.ts

@@ -0,0 +1,7 @@
+type AutoSubmitOption = {
+    debounceMs?: number;
+};
+export declare function autoSubmit(form: HTMLFormElement, options?: AutoSubmitOption): {
+    destroy: () => void;
+};
+export {};

package/dist/action/autoSubmit.js

@@ -0,0 +1,16 @@
+import debounce from 'debounce';
+export function autoSubmit(form, options) {
+    const { debounceMs = 0 } = options || {};
+    const btn = document.createElement('button');
+    btn.type = 'submit';
+    btn.style.display = 'none';
+    const onChange = debounce(() => btn.click(), debounceMs);
+    form.appendChild(btn);
+    form.addEventListener('change', onChange);
+    function destroy() {
+        btn.remove();
+        onChange.flush();
+        form.removeEventListener('change', onChange);
+    }
+    return { destroy };
+}

package/dist/action/index.d.ts

@@ -2,3 +2,4 @@ export * from './selector.js';
 export * from './tip.js';
 export * from './portal.js';
 export * from './list/index.js';
+export * from './autoSubmit.js';

package/dist/action/index.js

@@ -2,3 +2,4 @@ export * from './selector.js';
 export * from './tip.js';
 export * from './portal.js';
 export * from './list/index.js';
+export * from './autoSubmit.js';

package/dist/ui/drawer/Drawer.svelte

@@ -7,7 +7,6 @@ import { Icon } from "../icon/index.js";
 import { subscibeDrawerLayers } from "./layers.js";
 import { contextContainer } from "../context.js";
 import { drawerFly } from "./drawerFly.js";
-import { writable } from "svelte/store";
 export let title = "";
 export let key;
 let klass = "";
@@ -18,6 +17,7 @@ export let classBody = "";
 export let duration = 180;
 export let noOverlay = false;
 export let transitionX = 0;
+export let zIndex = 50;
 export function open(value = 1, options = {}) {
   return goto($urlParam.with({ [key]: value }), {
     ...options,
@@ -43,7 +43,7 @@ onMount(() => {
 		on:click={() => close()}
 		on:keyup={() => close()}
 		transition:fade={{ duration }}
-		style="z-index: {10 + $index};"
+		style="z-index: {zIndex + $index};"
 		class="fixed inset-0 bg-black/15 backdrop-blur-[1.5px] dark:bg-white/15"
 	/>
 {/if}
@@ -60,7 +60,7 @@ onMount(() => {
 			}
 		}}
 		style="
-			z-index: {10 + $index};
+			z-index: {zIndex + $index};
 			max-width: min(100%, {maxWidth});
 			transform: translateX({-$offset * 4}rem);
 			transition-duration: {duration}ms;

package/dist/ui/drawer/Drawer.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         duration?: number | undefined;
         noOverlay?: boolean | undefined;
         transitionX?: number | undefined;
+        zIndex?: number | undefined;
         open?: ((value?: number, options?: {
             replaceState?: boolean | undefined;
             noScroll?: boolean | undefined;

package/dist/ui/range/RangePicker.svelte

@@ -17,6 +17,9 @@ onMount(() => {
 onDestroy(() => {
   picker?.destroy();
 });
+export function clear() {
+  picker?.clearSelection();
+}
 async function initTimePicker() {
   const _Litepicker = (await import("litepicker")).Litepicker;
   picker?.destroy();

package/dist/ui/range/RangePicker.svelte.d.ts

@@ -1,13 +1,14 @@
 import { SvelteComponent } from "svelte";
-import type { Range } from './types.js';
+import type { Range, RangeAsDate } from './types.js';
 declare const __propDef: {
     props: {
         numberOfMonths?: number | undefined;
         numberOfColumns?: number | undefined;
         showWeekNumbers?: boolean | undefined;
-        range?: Range | undefined;
+        range?: RangeAsDate | undefined;
         minDate?: Date | number | string | undefined;
         maxDate?: Date | number | string | undefined;
+        clear?: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<Range>;
@@ -20,5 +21,6 @@ export type RangePickerProps = typeof __propDef.props;
 export type RangePickerEvents = typeof __propDef.events;
 export type RangePickerSlots = typeof __propDef.slots;
 export default class RangePicker extends SvelteComponent<RangePickerProps, RangePickerEvents, RangePickerSlots> {
+    get clear(): () => void;
 }
 export {};

package/dist/ui/range/RangePickerButton.svelte

@@ -1,8 +1,8 @@
-<script>import { mdiCalendarMonthOutline, mdiClose } from "@mdi/js";
-import dayjs from "dayjs";
+<script>import { mdiCalendarMonthOutline } from "@mdi/js";
 import { goto } from "$app/navigation";
+import { slide } from "svelte/transition";
 import { urlParam } from "../../store/param.js";
-import { formatRange } from "./format.js";
+import { formatRangeShort } from "./format.js";
 import { Icon } from "../icon/index.js";
 import { DropDown } from "../menu/index.js";
 import { InputTime } from "../input/index.js";
@@ -11,68 +11,64 @@ 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 });
+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 "P\xE9riodes";
-  return formatRange(_range);
+    return "";
+  return formatRangeShort(_range);
 }
-function handleSubmit() {
-  dropDown.hide();
-  if (!isValidPeriod)
-    return;
-  goto(
-    $urlParam.with({
-      [key]: JSON.stringify({
-        start: range.start?.toJSON(),
-        end: range.end?.toJSON()
-      })
-    }),
-    { replaceState: true, noScroll: true }
-  );
-}
-function handleReset() {
-  dropDown.hide();
-  range = { start: null, end: null };
-  goto($urlParam.without(key), { replaceState: true, noScroll: true });
+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} 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(range)}
-		</button>
+<DropDown bind:this={dropDown} tippyProps={{ onHidden: writeURL }} class="max-h-full">
+	<button slot="activator" class="btn btn-sm">
+		<Icon path={mdiCalendarMonthOutline} class="opacity-60" size={20} />
 		{#if isValidPeriod}
-			<button class="btn btn-square join-item btn-sm" on:click|preventDefault={handleReset}>
-				<Icon path={mdiClose} class="fill-base-content" />
-			</button>
+			<span
+				transition:slide={{ axis: 'x', duration: 200 }}
+				class="whitespace-nowrap text-xs font-medium opacity-80"
+			>
+				{getLabel(range)}
+			</span>
 		{/if}
-	</div>
+	</button>
+
+	<RangePicker bind:this={rangePicker} numberOfMonths={1} bind:range {minDate} {maxDate} />
 
-	<form class="flex flex-col" on:submit|preventDefault={handleSubmit}>
-		<RangePicker numberOfMonths={1} bind:range {minDate} {maxDate} />
+	<div class="flex gap-2 p-2">
+		<InputTime label="A partir de" bind:value={range.start} enhanceDisabled class="grow" />
+		<InputTime label="Jusqu'à" bind:value={range.end} enhanceDisabled class="grow" />
+	</div>
 
-		<div class="flex gap-2 p-2">
-			<InputTime
-				label="A partir de"
-				value={dayjs(range.start).toDate()}
-				on:input={({ detail: newDate }) => (range.start = newDate)}
-				enhanceDisabled
-				class="grow"
-			/>
-			<InputTime
-				label="Jusqu'à"
-				value={dayjs(range.end).toDate()}
-				on:input={({ detail: newDate }) => (range.end = newDate)}
-				enhanceDisabled
-				class="grow"
-			/>
-		</div>
-		<button class="btn m-2"> Valider </button>
-	</form>
+	<div class="m-2 flex justify-end gap-2">
+		{#if range.start || range.end}
+			<button
+				transition:slide
+				class="btn btn-ghost"
+				on:click={() => {
+					range = { start: null, end: null }
+					rangePicker.clear()
+					dropDown.hide()
+				}}
+			>
+				Effacer
+			</button>
+		{/if}
+		<button class="btn" on:click={() => dropDown.hide()}> Valider </button>
+	</div>
 </DropDown>

package/dist/ui/range/RangePickerButton.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
-import { type Range } from './index.js';
+import { type RangeAsDate } from './index.js';
 declare const __propDef: {
     props: {
         minDate?: Date | number | string | undefined;
         maxDate?: Date | number | string | undefined;
         key?: string | undefined;
-        range?: Range | undefined;
+        range?: RangeAsDate | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/range/format.d.ts

@@ -1,4 +1,4 @@
 import type { Range } from './types.js';
 export declare const formatRange: (range?: Range, placeholder?: string) => string;
-export declare const formatRangeShort: (range: Range, placeholder?: string) => string | undefined;
+export declare const formatRangeShort: (range: Range, placeholder?: string) => string;
 export declare const formatRangeHour: (range: Range, placeholder?: string) => string;

package/dist/ui/range/format.js

@@ -10,6 +10,7 @@ const formater = new Intl.DateTimeFormat('fr-ch', {
 });
 const formaterShort = new Intl.DateTimeFormat('fr-ch', {
     weekday: 'short',
+    month: 'long',
     hour: 'numeric',
     minute: 'numeric',
     timeZone: 'Europe/Zurich'
@@ -35,7 +36,7 @@ export const formatRangeShort = (range, placeholder = '') => {
         return placeholder;
     const start = dayjs(range.start).toDate();
     const end = dayjs(range.end).toDate();
-    formaterShort.formatRange(start, end);
+    return formaterShort.formatRange(start, end);
 };
 export const formatRangeHour = (range, placeholder = '') => {
     if (!isRequiredRange(range))

package/dist/ui/range/types.d.ts

@@ -4,6 +4,10 @@ export type Range = {
     start: RangeDate;
     end: RangeDate;
 };
+export type RangeAsDate = {
+    start: Date | null | undefined;
+    end: Date | null | undefined;
+};
 export type RangeRequired = {
     start: Date | Dayjs;
     end: Date | Dayjs;

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

@@ -10,6 +10,7 @@ import { jsonParse } from "../../../utils/jsonParse.js";
 import { Icon } from "../../icon/index.js";
 export let field;
 let dropDown;
+let rangePicker;
 const initialValue = jsonParse(
   $page.url.searchParams.get(field.key),
   {}
@@ -41,6 +42,7 @@ function handleSubmit() {
 function handleReset() {
   dropDown.hide();
   range = { start: null, end: null };
+  rangePicker.clear();
   goto($urlParam.without(field.key, "skip", "take"), { replaceState: true, noScroll: true });
 }
 </script>
@@ -72,7 +74,7 @@ function handleReset() {
 			on:submit|preventDefault={handleSubmit}
 			data-sveltekit-replacestate
 		>
-			<RangePicker numberOfMonths={1} bind:range />
+			<RangePicker bind:this={rangePicker} numberOfMonths={1} bind:range />
 
 			<input class="hidden" type="text" name="start" value={range.start?.toJSON()} />
 			<input class="hidden" type="text" name="end" value={range.end?.toJSON()} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuma",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "My fullstack material build with sveltekit, daisyui, zod, prisma, lucia",
   "author": {
     "name": "Jonas Voisard",