fuma 0.3.43 → 0.3.45

package/dist/ui/input/InputDateTime.svelte

@@ -20,7 +20,7 @@ function getDateTime(v) {
 
 <FormControl {...$$restProps} let:key>
 	<input
-		value={value && dayjs(value).format('YYYY-MM-DDThh:mm')}
+		value={value && dayjs(value).format('YYYY-MM-DDTHH:mm')}
 		on:input={handleInput}
 		on:focus
 		on:blur

package/dist/ui/input/InputTime.svelte

@@ -1,34 +1,32 @@
-<script>import { FormControl } from "./index.js";
-import { createEventDispatcher } from "svelte";
+<script>import { createEventDispatcher } from "svelte";
+import { FormControl } from "./index.js";
+import dayjs from "dayjs";
 export let value = void 0;
 export let input = {};
 $:
   ({ class: inputClass = "", ...inputProps } = input);
-let valueAsNumber = value;
-let valueAsString = msToString(value);
-$:
-  if (value !== valueAsNumber)
-    valueAsString = msToString(value);
 const dispatch = createEventDispatcher();
-function msToString(ms) {
-  if (ms === null || ms === void 0)
-    return "";
-  const hours = Math.floor(ms / (1e3 * 60 * 60));
-  const minutes = Math.floor(ms / (1e3 * 60) - hours * 60);
-  const secondes = Math.floor(ms / 1e3 - minutes * 60);
-  const format = (n) => n.toString().padStart(2, "0");
-  return [format(hours), format(minutes), format(secondes)].join(":");
-}
-const onInput = (event) => {
-  valueAsNumber = event.currentTarget.valueAsNumber;
-  value = valueAsNumber;
-  dispatch("input", valueAsNumber);
+const onInput = ({ currentTarget }) => {
+  value = getDateTime(currentTarget.value);
+  dispatch("input", value);
 };
+function getDateTime(v) {
+  console.log({ v });
+  if (!v)
+    return value;
+  const date = new Date(value || 0);
+  const dateString = [
+    date.getFullYear().toString(),
+    (date.getMonth() + 1).toString().padStart(2, "0"),
+    date.getDate().toString().padStart(2, "0")
+  ].join("-");
+  return /* @__PURE__ */ new Date(`${dateString}T${v}`);
+}
 </script>
 
 <FormControl {...$$restProps} let:key>
 	<input
-		value={valueAsString}
+		value={value && dayjs(value).format('HH:mm')}
 		on:input={onInput}
 		on:focus
 		on:blur

package/dist/ui/input/InputTime.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
 import { type InputProps } from './index.js';
 declare const __propDef: {
-    props: InputProps<number>;
+    props: InputProps<Date>;
     events: {
         focus: FocusEvent;
         blur: FocusEvent;
-        input: CustomEvent<number>;
+        input: CustomEvent<Date | null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/ui/period/PeriodPicker.svelte

@@ -30,15 +30,13 @@ async function initTimePicker() {
     numberOfMonths,
     numberOfColumns,
     showWeekNumbers,
-    startDate: period?.start ? new Date(period.start) : "",
-    endDate: period?.end ? new Date(period.end) : "",
+    startDate: period?.start ?? void 0,
+    endDate: period?.end ?? void 0,
     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
+          start: date1.dateInstance,
+          end: date2.dateInstance
         };
         dispatch("change", period);
       });

package/dist/ui/period/PeriodPickerButton.svelte

@@ -7,26 +7,21 @@ import { Icon } from "../icon/index.js";
 import { DropDown } from "../menu/index.js";
 import { InputTime } from "../input/index.js";
 import { PeriodPicker } from "./index.js";
+import { msToTime, timeToMs } from "../../utils/time.js";
+import dayjs from "dayjs";
 let dropDown;
-const start = $page.url.searchParams.get("start")?.split("T") || [];
-const end = $page.url.searchParams.get("end")?.split("T") || [];
+const start = $page.url.searchParams.get("start");
+const end = $page.url.searchParams.get("end");
 let period = {
-  start: start[0] || "",
-  end: end[0] || ""
-};
-let time = {
-  start: start[1] || "00:00",
-  end: end[1] || "23:59"
+  start: start ? new Date(start) : null,
+  end: end ? new Date(end) : null
 };
 $:
-  isValidPeriod = period.start && period.end && time.start && time.start;
-function getLabel(_period, _time) {
+  isValidPeriod = !!period.start && !!period.end;
+function getLabel(_period) {
   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}`)
-  });
+  return formatRange(_period);
 }
 function handleSubmit() {
   dropDown.hide();
@@ -34,16 +29,15 @@ function handleSubmit() {
     return;
   goto(
     $urlParam.with({
-      start: `${period.start}T${time.start || "00:00"}`,
-      end: `${period.end}T${time.end || "23:59"}`
+      start: dayjs(period.start).format("HH:mm"),
+      end: dayjs(period.end).format("HH:mm")
     }),
     { replaceState: true, noScroll: true }
   );
 }
 function handleReset() {
   dropDown.hide();
-  period = { start: "", end: "" };
-  time = { start: "00:00", end: "23:59" };
+  period = { start: null, end: null };
   goto($urlParam.without("start", "end"), { replaceState: true, noScroll: true });
 }
 </script>
@@ -52,7 +46,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, time)}
+			{getLabel(period)}
 		</button>
 		{#if isValidPeriod}
 			<button class="btn btn-square join-item btn-sm" on:click|preventDefault={handleReset}>
@@ -64,12 +58,12 @@ function handleReset() {
 	<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'}" />
+		<input class="hidden" type="text" name="start" value={period.start?.toJSON()} />
+		<input class="hidden" type="text" name="end" value={period.end?.toJSON()} />
 
 		<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" />
+			<InputTime label="A partir de" bind:value={period.start} enhanceDisabled class="grow" />
+			<InputTime label="Jusqu'à" bind:value={period.end} enhanceDisabled class="grow" />
 		</div>
 		<button class="btn m-2"> Valider </button>
 	</form>

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

@@ -1,6 +1,6 @@
 export type Period = {
-    start: string;
-    end: string;
+    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/table/head/TableHeadDate.svelte

@@ -1,5 +1,6 @@
 <script>import { goto } from "$app/navigation";
 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";
@@ -7,31 +8,19 @@ import { PeriodPicker } from "../../period/index.js";
 import { urlParam } from "../../../store/param.js";
 import { jsonParse } from "../../../utils/jsonParse.js";
 import { Icon } from "../../icon/index.js";
-import { mdiCalendarFilterOutline } from "@mdi/js";
+import dayjs from "dayjs";
 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"
+  start: initialValue.start ? new Date(initialValue.start) : null,
+  end: initialValue.end ? new Date(initialValue.end) : null
 };
 $:
-  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}`)
-  });
-}
+  isValidPeriod = !!period.start && !!period.end;
 function handleSubmit() {
   dropDown.hide();
   if (!isValidPeriod)
@@ -40,8 +29,8 @@ function handleSubmit() {
     $urlParam.with(
       {
         [field.key]: JSON.stringify({
-          start: `${period.start}T${time.start || "00:00"}`,
-          end: `${period.end}T${time.end || "23:59"}`
+          start: dayjs(period.start).format("HH:mm"),
+          end: dayjs(period.end).format("HH:mm")
         })
       },
       "skip",
@@ -52,8 +41,7 @@ function handleSubmit() {
 }
 function handleReset() {
   dropDown.hide();
-  period = { start: "", end: "" };
-  time = { start: "00:00", end: "23:59" };
+  period = { start: null, end: null };
   goto($urlParam.without(field.key, "skip", "take"), { replaceState: true, noScroll: true });
 }
 </script>
@@ -75,7 +63,7 @@ function handleReset() {
 
 			{#if isValidPeriod}
 				<span class="badge badge-primary badge-xs text-[0.7rem] font-normal text-white">
-					{getLabel(period, time)}
+					{formatRange(period)}
 				</span>
 			{/if}
 		</button>
@@ -87,17 +75,12 @@ function handleReset() {
 		>
 			<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'}" />
+			<input class="hidden" type="text" name="start" value={period.start?.toJSON()} />
+			<input class="hidden" type="text" name="end" value={period.end?.toJSON()} />
 
 			<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" />
+				<InputTime label="A partir de" bind:value={period.start} enhanceDisabled class="grow" />
+				<InputTime label="Jusqu'à" bind:value={period.end} enhanceDisabled class="grow" />
 			</div>
 
 			<div class="m-2 flex flex-row-reverse gap-2">

package/dist/utils/formatRange.d.ts

@@ -1,8 +1,8 @@
 type Range = {
-    start: Date | number;
-    end: Date | number;
+    start?: Date | number | null;
+    end?: Date | number | null;
 };
-export declare const formatRange: ({ start, end }: Range) => string;
-export declare const formatRangeShort: ({ start, end }: Range) => string;
-export declare const formatRangeHour: ({ start, end }: Range) => string;
+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

@@ -6,19 +6,35 @@ const formater = new Intl.DateTimeFormat('fr-ch', {
     year: '2-digit',
     hour: 'numeric',
     minute: 'numeric',
-    timeZone: 'Europe/Zurich',
+    timeZone: 'Europe/Zurich'
 });
 const formaterShort = new Intl.DateTimeFormat('fr-ch', {
     weekday: 'short',
     hour: 'numeric',
     minute: 'numeric',
-    timeZone: 'Europe/Zurich',
+    timeZone: 'Europe/Zurich'
 });
-export const formatRange = ({ start, end }) => formater.formatRange(start, end);
-export const formatRangeShort = ({ start, end }) => formaterShort.formatRange(start, end);
-export const formatRangeHour = ({ start, end }) => {
-    const _start = dayjs(start);
-    const _end = dayjs(end);
+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(' – ');

package/dist/utils/index.d.ts

@@ -9,3 +9,4 @@ export * from './nestedPaths.js';
 export * from './constant.js';
 export * from './csv.js';
 export * from './eventEmitter.js';
+export * from './time.js';

package/dist/utils/index.js

@@ -9,3 +9,4 @@ export * from './nestedPaths.js';
 export * from './constant.js';
 export * from './csv.js';
 export * from './eventEmitter.js';
+export * from './time.js';

package/dist/utils/time.d.ts

@@ -0,0 +1,2 @@
+export declare function msToTime(ms: number | null | undefined): string;
+export declare function timeToMs(time: string): number;

package/dist/utils/time.js

@@ -0,0 +1,13 @@
+export function msToTime(ms) {
+    if (ms === null || ms === undefined)
+        return '';
+    const hours = Math.floor(ms / (1000 * 60 * 60));
+    const minutes = Math.floor(ms / (1000 * 60) - hours * 60);
+    const secondes = Math.floor(ms / 1000 - minutes * 60 - hours * 60 * 60);
+    const format = (n) => n.toString().padStart(2, '0');
+    return [format(hours % 24), format(minutes), format(secondes)].join(':');
+}
+export function timeToMs(time) {
+    const [h = 0, m = 0, s = 0] = time.split(':').map((s) => +s);
+    return (h * 60 * 60 + m * 60 + s) * 1000;
+}

package/package.json

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