fuma 0.4.0 → 0.4.2

package/dist/ui/range/RangePicker.svelte

@@ -4,6 +4,8 @@ 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;
@@ -30,6 +32,8 @@ async function initTimePicker() {
     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) => {

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

@@ -6,6 +6,8 @@ declare const __propDef: {
         numberOfColumns?: number | undefined;
         showWeekNumbers?: boolean | undefined;
         range?: Range | undefined;
+        minDate?: Date | number | string | undefined;
+        maxDate?: Date | number | string | undefined;
     };
     events: {
         change: CustomEvent<Range>;

package/dist/ui/range/RangePickerButton.svelte

@@ -1,4 +1,5 @@
 <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";
@@ -7,16 +8,17 @@ import { Icon } from "../icon/index.js";
 import { DropDown } from "../menu/index.js";
 import { InputTime } from "../input/index.js";
 import { RangePicker } from "./index.js";
-import dayjs from "dayjs";
+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 = {
-  start: start ? new Date(start) : null,
-  end: end ? new Date(end) : null
+export let range = {
+  start: start ? new Date(start) : void 0,
+  end: end ? new Date(end) : void 0
 };
 $:
-  isValidPeriod = !!period.start && !!period.end;
+  isValidPeriod = !!range.start && !!range.end;
 function getLabel(_range) {
   if (!_range || !_range.start || !_range.end)
     return "P\xE9riodes";
@@ -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: void 0, end: void 0 };
   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,36 @@ function handleReset() {
 	</div>
 
 	<form class="flex flex-col" on:submit|preventDefault={handleSubmit} data-sveltekit-replacestate>
-		<RangePicker numberOfMonths={1} bind:range={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 ? dayjs(range.start).toJSON() : ''}
+		/>
+		<input
+			class="hidden"
+			type="text"
+			name="end"
+			value={range.end ? dayjs(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"
+				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>

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

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

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

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

package/dist/ui/range/types.js

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

package/package.json

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