fuma 0.3.60 → 0.4.1

package/dist/ui/form/Form.svelte

@@ -81,7 +81,7 @@ function getActionPadding() {
   if (container === "drawer")
     return "bottom-0 -ml-8 -mr-4 pl-8 pr-4";
   if (container === "card")
-    return "-bottom-4 -mx-2 sm:-mx-8 px-2 sm:px-8";
+    return "bottom-0 -mx-2 sm:-mx-8 px-2 sm:px-8";
   if (container === "dialog")
     return "-bottom-4 -mx-4 px-4";
   return "bottom-0";

package/dist/ui/index.d.ts

@@ -3,7 +3,7 @@ export * from './drawer/index.js';
 export * from './input/index.js';
 export * from './form/index.js';
 export * from './menu/index.js';
-export * from './period/index.js';
+export * from './range/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './button/index.js';

package/dist/ui/index.js

@@ -3,7 +3,7 @@ export * from './drawer/index.js';
 export * from './input/index.js';
 export * from './form/index.js';
 export * from './menu/index.js';
-export * from './period/index.js';
+export * from './range/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './button/index.js';

package/dist/ui/{period/PeriodPicker.svelte → range/RangePicker.svelte}

@@ -1,8 +1,11 @@
 <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;
+export let range = void 0;
+export let minDate = void 0;
+export let maxDate = void 0;
 let startElement;
 let endElement;
 let picker;
@@ -29,20 +32,21 @@ async function initTimePicker() {
     numberOfMonths,
     numberOfColumns,
     showWeekNumbers,
-    startDate: period?.start ?? void 0,
-    endDate: period?.end ?? void 0,
+    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) => {
-        const start = `${getAbsoluteDate(date1.dateInstance)}T${getAbsoluteTime(period?.start)}`;
-        period = {
+        range = {
           start: /* @__PURE__ */ new Date(
-            `${getAbsoluteDate(date1.dateInstance)}T${getAbsoluteTime(period?.start)}`
+            `${getAbsoluteDate(date1.dateInstance)}T${getAbsoluteTime(range?.start)}`
           ),
           end: /* @__PURE__ */ new Date(
-            `${getAbsoluteDate(date2.dateInstance)}T${getAbsoluteTime(period?.end, "23:59:00")}`
+            `${getAbsoluteDate(date2.dateInstance)}T${getAbsoluteTime(range?.end, "23:59:00")}`
           )
         };
-        dispatch("change", period);
+        dispatch("change", range);
       });
     }
   });
@@ -51,7 +55,7 @@ const getAbsoluteDate = (date) => [date.getFullYear(), date.getMonth() + 1, date
 const getAbsoluteTime = (date, defaultTime = "00:00:00") => {
   if (!date)
     return defaultTime;
-  return [date.getHours(), date.getMinutes(), date.getSeconds()].map((n) => n.toString().padStart(2, "0")).join(":");
+  return dayjs(date).format("HH:mm:ss");
 };
 </script>
 

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { Range } from './types.js';
+declare const __propDef: {
+    props: {
+        numberOfMonths?: number | undefined;
+        numberOfColumns?: number | undefined;
+        showWeekNumbers?: boolean | undefined;
+        range?: Range | undefined;
+        minDate?: Date | number | string | undefined;
+        maxDate?: Date | number | string | undefined;
+    };
+    events: {
+        change: CustomEvent<Range>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/ui/{period/PeriodPickerButton.svelte → range/RangePickerButton.svelte}

@@ -1,26 +1,28 @@
 <script>import { mdiCalendarMonthOutline, mdiClose } from "@mdi/js";
+import dayjs from "dayjs";
 import { goto } from "$app/navigation";
 import { page } from "$app/stores";
 import { urlParam } from "../../store/param.js";
-import { formatRange } from "../../utils/formatRange.js";
+import { formatRange } from "./format.js";
 import { Icon } from "../icon/index.js";
 import { DropDown } from "../menu/index.js";
 import { InputTime } from "../input/index.js";
-import { PeriodPicker } from "./index.js";
-import dayjs from "dayjs";
+import { RangePicker } from "./index.js";
+export let minDate = void 0;
+export let maxDate = void 0;
 let dropDown;
 const start = $page.url.searchParams.get("start");
 const end = $page.url.searchParams.get("end");
-let period = {
+export let range = {
   start: start ? new Date(start) : null,
   end: end ? new Date(end) : null
 };
 $:
-  isValidPeriod = !!period.start && !!period.end;
-function getLabel(_period) {
-  if (!_period || !_period.start || !_period.end)
+  isValidPeriod = !!range.start && !!range.end;
+function getLabel(_range) {
+  if (!_range || !_range.start || !_range.end)
     return "P\xE9riodes";
-  return formatRange(_period);
+  return formatRange(_range);
 }
 function handleSubmit() {
   dropDown.hide();
@@ -28,15 +30,15 @@ function handleSubmit() {
     return;
   goto(
     $urlParam.with({
-      start: dayjs(period.start).format("HH:mm"),
-      end: dayjs(period.end).format("HH:mm")
+      start: dayjs(range.start).format("HH:mm"),
+      end: dayjs(range.end).format("HH:mm")
     }),
     { replaceState: true, noScroll: true }
   );
 }
 function handleReset() {
   dropDown.hide();
-  period = { start: null, end: null };
+  range = { start: null, end: null };
   goto($urlParam.without("start", "end"), { replaceState: true, noScroll: true });
 }
 </script>
@@ -45,7 +47,7 @@ function handleReset() {
 	<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)}
+			{getLabel(range)}
 		</button>
 		{#if isValidPeriod}
 			<button class="btn btn-square join-item btn-sm" on:click|preventDefault={handleReset}>
@@ -55,14 +57,14 @@ function handleReset() {
 	</div>
 
 	<form class="flex flex-col" on:submit|preventDefault={handleSubmit} data-sveltekit-replacestate>
-		<PeriodPicker numberOfMonths={1} bind:period />
+		<RangePicker numberOfMonths={1} bind:range {minDate} {maxDate} />
 
-		<input class="hidden" type="text" name="start" value={period.start?.toJSON()} />
-		<input class="hidden" type="text" name="end" value={period.end?.toJSON()} />
+		<input class="hidden" type="text" name="start" value={range.start?.toJSON()} />
+		<input class="hidden" type="text" name="end" value={range.end?.toJSON()} />
 
 		<div class="flex gap-2 p-2">
-			<InputTime label="A partir de" bind:value={period.start} enhanceDisabled class="grow" />
-			<InputTime label="Jusqu'à" bind:value={period.end} enhanceDisabled class="grow" />
+			<InputTime label="A partir de" bind:value={range.start} enhanceDisabled class="grow" />
+			<InputTime label="Jusqu'à" bind:value={range.end} enhanceDisabled class="grow" />
 		</div>
 		<button class="btn m-2"> Valider </button>
 	</form>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        minDate?: Date | number | string | undefined;
+        maxDate?: Date | number | string | undefined;
+        range?: {
+            start: Date | null;
+            end: Date | null;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RangePickerButtonProps = typeof __propDef.props;
+export type RangePickerButtonEvents = typeof __propDef.events;
+export type RangePickerButtonSlots = typeof __propDef.slots;
+export default class RangePickerButton extends SvelteComponent<RangePickerButtonProps, RangePickerButtonEvents, RangePickerButtonSlots> {
+}
+export {};

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

@@ -0,0 +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 formatRangeHour: (range: Range, placeholder?: string) => string;

package/dist/ui/range/format.js

@@ -0,0 +1,48 @@
+import dayjs from 'dayjs';
+const formater = new Intl.DateTimeFormat('fr-ch', {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'numeric',
+    year: '2-digit',
+    hour: 'numeric',
+    minute: 'numeric',
+    timeZone: 'Europe/Zurich'
+});
+const formaterShort = new Intl.DateTimeFormat('fr-ch', {
+    weekday: 'short',
+    hour: 'numeric',
+    minute: 'numeric',
+    timeZone: 'Europe/Zurich'
+});
+function isRequiredRange(range) {
+    if (!range)
+        return false;
+    return (range.start !== null &&
+        range.start !== undefined &&
+        range.end !== null &&
+        range.end !== undefined);
+}
+export const formatRange = (range, placeholder = '') => {
+    dayjs();
+    if (!isRequiredRange(range))
+        return placeholder;
+    const start = dayjs(range.start).toDate();
+    const end = dayjs(range.end).toDate();
+    return formater.formatRange(start, end);
+};
+export const formatRangeShort = (range, placeholder = '') => {
+    if (!isRequiredRange(range))
+        return placeholder;
+    const start = dayjs(range.start).toDate();
+    const end = dayjs(range.end).toDate();
+    formaterShort.formatRange(start, end);
+};
+export const formatRangeHour = (range, placeholder = '') => {
+    if (!isRequiredRange(range))
+        return placeholder;
+    const start = dayjs(range.start);
+    const end = dayjs(range.end);
+    if (start.isSame(end))
+        return start.format('HH:mm');
+    return [start.format('HH:mm'), end.format('HH:mm')].join(' – ');
+};

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

@@ -0,0 +1,4 @@
+export { default as RangePicker } from './RangePicker.svelte';
+export { default as RangePickerButton } from './RangePickerButton.svelte';
+export * from './format.js';
+export * from './types.js';

package/dist/ui/range/index.js

@@ -0,0 +1,4 @@
+export { default as RangePicker } from './RangePicker.svelte';
+export { default as RangePickerButton } from './RangePickerButton.svelte';
+export * from './format.js';
+export * from './types.js';

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

@@ -0,0 +1,10 @@
+import dayjs, { type ConfigType } from 'dayjs';
+export type RangeDate = ConfigType;
+export type Range = {
+    start: RangeDate;
+    end: RangeDate;
+};
+export type RangeRequired = {
+    start: string | number | Date | dayjs.Dayjs;
+    end: string | number | Date | dayjs.Dayjs;
+};

package/dist/ui/range/types.js

@@ -0,0 +1 @@
+import dayjs, {} from 'dayjs';

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

@@ -3,24 +3,23 @@ import { page } from "$app/stores";
 import { mdiCalendarFilterOutline } from "@mdi/js";
 import { DropDown } from "../../menu/index.js";
 import { InputTime } from "../../input/index.js";
-import { formatRange } from "../../../utils/formatRange.js";
-import { PeriodPicker } from "../../period/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 dayjs from "dayjs";
 export let field;
 let dropDown;
 const initialValue = jsonParse(
   $page.url.searchParams.get(field.key),
   {}
 );
-let period = {
+let range = {
   start: initialValue.start ? new Date(initialValue.start) : null,
   end: initialValue.end ? new Date(initialValue.end) : null
 };
 $:
-  isValidPeriod = !!period.start && !!period.end;
+  isValidPeriod = !!range.start && !!range.end;
 function handleSubmit() {
   dropDown.hide();
   if (!isValidPeriod)
@@ -29,8 +28,8 @@ function handleSubmit() {
     $urlParam.with(
       {
         [field.key]: JSON.stringify({
-          start: period.start?.toJSON(),
-          end: period.end?.toJSON()
+          start: range.start?.toJSON(),
+          end: range.end?.toJSON()
         })
       },
       "skip",
@@ -41,7 +40,7 @@ function handleSubmit() {
 }
 function handleReset() {
   dropDown.hide();
-  period = { start: null, end: null };
+  range = { start: null, end: null };
   goto($urlParam.without(field.key, "skip", "take"), { replaceState: true, noScroll: true });
 }
 </script>
@@ -63,7 +62,7 @@ function handleReset() {
 
 			{#if isValidPeriod}
 				<span class="badge badge-primary badge-xs text-[0.7rem] font-normal text-white">
-					{formatRange(period)}
+					{formatRange(range)}
 				</span>
 			{/if}
 		</button>
@@ -73,14 +72,14 @@ function handleReset() {
 			on:submit|preventDefault={handleSubmit}
 			data-sveltekit-replacestate
 		>
-			<PeriodPicker numberOfMonths={1} bind:period />
+			<RangePicker numberOfMonths={1} bind:range />
 
-			<input class="hidden" type="text" name="start" value={period.start?.toJSON()} />
-			<input class="hidden" type="text" name="end" value={period.end?.toJSON()} />
+			<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={period.start} enhanceDisabled class="grow" />
-				<InputTime label="Jusqu'à" bind:value={period.end} enhanceDisabled class="grow" />
+				<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="m-2 flex flex-row-reverse gap-2">

package/dist/utils/index.d.ts

@@ -1,7 +1,6 @@
 export * from './component.js';
 export * from './jsonParse.js';
 export * from './normalizePath.js';
-export * from './formatRange.js';
 export * from './options.js';
 export * from './avatar.js';
 export * from './tippy.js';

package/dist/utils/index.js

@@ -1,7 +1,6 @@
 export * from './component.js';
 export * from './jsonParse.js';
 export * from './normalizePath.js';
-export * from './formatRange.js';
 export * from './options.js';
 export * from './avatar.js';
 export * from './tippy.js';

package/dist/validation/form.d.ts

@@ -21,6 +21,7 @@ export type UseFormOptions<ReturnData> = {
     successUpdate?: BooleanOrFunction;
     successReset?: BooleanOrFunction;
     successMessage?: SuccessMessage;
+    submitOnChange?: boolean;
 };
 export declare function useForm<ReturnData extends Record<string, unknown>>({ onSubmit, onSuccess, onResetError, onError, onFail, successUpdate, successReset, successMessage }?: UseFormOptions<ReturnData>): {
     enhance: (form: HTMLFormElement) => {

package/package.json

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

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

@@ -1,22 +0,0 @@
-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.d.ts

@@ -1,14 +0,0 @@
-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

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

package/dist/ui/period/index.js

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

package/dist/utils/formatRange.d.ts

@@ -1,8 +0,0 @@
-type Range = {
-    start?: Date | number | null;
-    end?: Date | number | null;
-};
-export declare const formatRange: (range: Range) => string;
-export declare const formatRangeShort: (range: Range) => "" | undefined;
-export declare const formatRangeHour: (range: Range) => string;
-export {};

package/dist/utils/formatRange.js

@@ -1,41 +0,0 @@
-import dayjs from 'dayjs';
-const formater = new Intl.DateTimeFormat('fr-ch', {
-    weekday: 'long',
-    day: 'numeric',
-    month: 'numeric',
-    year: '2-digit',
-    hour: 'numeric',
-    minute: 'numeric',
-    timeZone: 'Europe/Zurich'
-});
-const formaterShort = new Intl.DateTimeFormat('fr-ch', {
-    weekday: 'short',
-    hour: 'numeric',
-    minute: 'numeric',
-    timeZone: 'Europe/Zurich'
-});
-function isRequiredRange(range) {
-    return (range.start !== null &&
-        range.start !== undefined &&
-        range.end !== null &&
-        range.end !== undefined);
-}
-export const formatRange = (range) => {
-    if (!isRequiredRange(range))
-        return '';
-    return formater.formatRange(range.start, range.end);
-};
-export const formatRangeShort = (range) => {
-    if (!isRequiredRange(range))
-        return '';
-    formaterShort.formatRange(range.start, range.end);
-};
-export const formatRangeHour = (range) => {
-    if (!isRequiredRange(range))
-        return '';
-    const _start = dayjs(range.start);
-    const _end = dayjs(range.end);
-    if (_start.isSame(_end))
-        return _start.format('HH:mm');
-    return [_start.format('HH:mm'), _end.format('HH:mm')].join(' – ');
-};