fuma 0.2.6 → 0.3.3

package/dist/ui/form/Form.svelte

@@ -2,7 +2,11 @@
 
 <script
 
-	generics="Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormData<Shape>"
+	generics="
+		Shape extends z.ZodRawShape,
+		ReturnData extends Record<string, unknown> = FormDataInput<Shape>,
+		Data extends FormDataInput<Shape> = FormDataInput<Shape>
+	"
 >import { createEventDispatcher, onMount } from "svelte";
 import { fade } from "svelte/transition";
 import { page } from "$app/stores";
@@ -12,8 +16,9 @@ import {
   getFieldType,
   useHandleInput
 } from "./form.js";
+import ButtonDelete from "../button/ButtonDelete.svelte";
 import { useForm } from "../../validation/form.js";
-import Input from "./FormInput.svelte";
+import FormInput from "./FormInput.svelte";
 import FormSection from "./FormSection.svelte";
 let klass = "";
 export { klass as class };
@@ -22,32 +27,50 @@ export let classAction = "";
 export let model = void 0;
 export let fields = [];
 export let sections = [{}];
-export let data = initData(fields);
 export let action = "";
-export let actionDelete = "";
-export let actionPrefix = "";
+export let actionCreate = "_create";
+export let actionDelete = "_delete";
+export let actionUpdate = "_update";
 export let options = {};
+let dataInput = initData(fields);
+export { dataInput as data };
+let data = dataInput;
+$:
+  $isDirty ? dataInput = data : data = dataInput;
 export function set(key, value) {
+  isDirty.set(true);
   data[key] = value;
 }
+export function update(updater) {
+  isDirty.set(true);
+  data = updater(data);
+}
 const dispatch = createEventDispatcher();
 const { enhance, setError } = useForm({
   ...options,
-  onSuccess(action2, data2) {
-    dispatch("success", { action: action2, data: data2 });
+  async onSuccess(url, data2) {
     if (options.onSuccess)
-      options.onSuccess(action2, data2);
+      await options.onSuccess(url, data2);
+    dispatch("success", { action: url, data: data2 });
+    const actionPath = url.pathname + url.search;
+    if (actionPath.includes(action + actionDelete))
+      dispatch("deleted");
+    if (!data2)
+      return;
+    if (actionPath.includes(action + actionCreate))
+      dispatch("created", data2);
+    if (actionPath.includes(action + actionUpdate))
+      dispatch("updated", data2);
   }
 });
-const handleInput = model ? useHandleInput(model, { setError }) : () => {
-};
+const { handleInput, isDirty } = useHandleInput({ model, setError });
 onMount(lookupValueFromParams);
 function lookupValueFromParams() {
   fields.flat().forEach(({ key }) => {
     if (data[key])
       return;
     const value = $page.url.searchParams.get(key);
-    if (value)
+    if (value && key in data)
       data[key] = value;
   });
 }
@@ -65,12 +88,14 @@ const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === vo
 
 <form
 	method="post"
-	action="{actionPrefix}{action}"
+	action="{action}{data.id ? actionUpdate : actionCreate}"
 	enctype="multipart/form-data"
 	class="{klass} flex flex-col gap-4"
 	use:enhance
 	on:input={handleInput}
 >
+	<slot />
+
 	{#if data.id}
 		<input type="hidden" name="id" value={data.id} />
 	{/if}
@@ -88,7 +113,7 @@ const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === vo
 									style={`grid-column: span ${field.colSpan || 2};`}
 									in:fade|local={{ duration: 200 }}
 								>
-									<Input
+									<FormInput
 										key={field.key}
 										type={inputType}
 										bind:value={data[field.key]}
@@ -106,19 +131,13 @@ const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === vo
 	<div
 		class="
 			{classAction} {actionPadding}
-			sticky bottom-0 col-span-full mt-2 flex gap-2 border-t py-4 backdrop-blur-sm
+			sticky bottom-0 col-span-full mt-2 flex flex-row-reverse gap-2 border-t py-4 backdrop-blur-sm
 		"
 	>
-		{#if actionDelete}
-			<button
-				class="btn-ghos btn text-error"
-				type="button"
-				formaction="{actionPrefix}{actionDelete}"
-			>
-				Supprimer
-			</button>
-		{/if}
-		<div class="grow" />
 		<button class="btn btn-primary"> Valider </button>
+		<div class="grow" />
+		{#if data.id && actionDelete}
+			<ButtonDelete formaction="{action}{actionDelete}">Supprimer</ButtonDelete>
+		{/if}
 	</div>
 </form>

package/dist/ui/form/Form.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
 import type { z } from 'zod';
-import type { FormData } from './form.js';
-import { type FormField, type FormSectionProps } from './form.js';
+import type { FormDataInput } from './form.js';
+import { type FormField, type FormSectionProps, type Nullable } from './form.js';
 import { type UseFormOptions } from '../../validation/form.js';
-declare class __sveltets_Render<Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormData<Shape>> {
+declare class __sveltets_Render<Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormDataInput<Shape>, Data extends FormDataInput<Shape> = FormDataInput<Shape>> {
     props(): {
         class?: string | undefined;
         classSection?: string | undefined;
@@ -11,27 +11,35 @@ declare class __sveltets_Render<Shape extends z.ZodRawShape, ReturnData extends
         model?: Shape | undefined;
         fields?: FormField<Shape>[][] | undefined;
         sections?: FormSectionProps<Shape>[] | undefined;
-        data?: Partial<z.objectUtil.addQuestionMarks<z.baseObjectOutputType<Shape>, { [k_1 in keyof z.baseObjectOutputType<Shape>]: undefined extends z.baseObjectOutputType<Shape>[k_1] ? never : k_1; }[keyof Shape]> extends infer T ? { [k in keyof T]: z.objectUtil.addQuestionMarks<z.baseObjectOutputType<Shape>, { [k_1 in keyof z.baseObjectOutputType<Shape>]: undefined extends z.baseObjectOutputType<Shape>[k_1] ? never : k_1; }[keyof Shape]>[k]; } : never> | undefined;
         action?: string | undefined;
+        actionCreate?: string | undefined;
         actionDelete?: string | undefined;
-        actionPrefix?: string | undefined;
+        actionUpdate?: string | undefined;
         options?: UseFormOptions<ReturnData> | undefined;
-        set?: (<K extends keyof Shape>(key: K, value: Partial<z.objectUtil.addQuestionMarks<z.baseObjectOutputType<Shape>, { [k_1 in keyof z.baseObjectOutputType<Shape>]: undefined extends z.baseObjectOutputType<Shape>[k_1] ? never : k_1; }[keyof Shape]> extends infer T_1 ? { [k in keyof T_1]: z.objectUtil.addQuestionMarks<z.baseObjectOutputType<Shape>, { [k_1 in keyof z.baseObjectOutputType<Shape>]: undefined extends z.baseObjectOutputType<Shape>[k_1] ? never : k_1; }[keyof Shape]>[k]; } : never>[K]) => void) | undefined;
+        data?: Nullable<Data> | undefined;
+        set?: (<K extends keyof Shape>(key: K, value: Nullable<Data>[K]) => void) | undefined;
+        update?: ((updater: (currentData: Nullable<Data>) => Nullable<Data>) => void) | undefined;
     };
     events(): {
         success: CustomEvent<{
             action: URL;
             data?: ReturnData | undefined;
         }>;
+        created: CustomEvent<ReturnData>;
+        updated: CustomEvent<ReturnData>;
+        deleted: CustomEvent<void>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {};
+    slots(): {
+        default: {};
+    };
 }
-export type FormProps<Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormData<Shape>> = ReturnType<__sveltets_Render<Shape, ReturnData>['props']>;
-export type FormEvents<Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormData<Shape>> = ReturnType<__sveltets_Render<Shape, ReturnData>['events']>;
-export type FormSlots<Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormData<Shape>> = ReturnType<__sveltets_Render<Shape, ReturnData>['slots']>;
-export default class Form<Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormData<Shape>> extends SvelteComponent<FormProps<Shape, ReturnData>, FormEvents<Shape, ReturnData>, FormSlots<Shape, ReturnData>> {
-    get set(): <K extends keyof Shape>(key: K, value: Partial<z.objectUtil.addQuestionMarks<z.baseObjectOutputType<Shape>, { [k_1 in keyof z.baseObjectOutputType<Shape>]: undefined extends z.baseObjectOutputType<Shape>[k_1] ? never : k_1; }[keyof Shape]> extends infer T ? { [k in keyof T]: z.objectUtil.addQuestionMarks<z.baseObjectOutputType<Shape>, { [k_1 in keyof z.baseObjectOutputType<Shape>]: undefined extends z.baseObjectOutputType<Shape>[k_1] ? never : k_1; }[keyof Shape]>[k]; } : never>[K]) => void;
+export type FormProps<Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormDataInput<Shape>, Data extends FormDataInput<Shape> = FormDataInput<Shape>> = ReturnType<__sveltets_Render<Shape, ReturnData, Data>['props']>;
+export type FormEvents<Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormDataInput<Shape>, Data extends FormDataInput<Shape> = FormDataInput<Shape>> = ReturnType<__sveltets_Render<Shape, ReturnData, Data>['events']>;
+export type FormSlots<Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormDataInput<Shape>, Data extends FormDataInput<Shape> = FormDataInput<Shape>> = ReturnType<__sveltets_Render<Shape, ReturnData, Data>['slots']>;
+export default class Form<Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormDataInput<Shape>, Data extends FormDataInput<Shape> = FormDataInput<Shape>> extends SvelteComponent<FormProps<Shape, ReturnData, Data>, FormEvents<Shape, ReturnData, Data>, FormSlots<Shape, ReturnData, Data>> {
+    get set(): <K extends keyof Shape>(key: K, value: Nullable<Data>[K]) => void;
+    get update(): (updater: (currentData: Nullable<Data>) => Nullable<Data>) => void;
 }
 export {};

package/dist/ui/form/FormInput.svelte.d.ts

@@ -27,6 +27,7 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                 flatMode?: boolean | undefined;
                 slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
                 slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
                 class?: string | undefined;
                 classList?: string | undefined;
                 clear?: (() => Promise<void>) | undefined;
@@ -45,6 +46,7 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                 flatMode?: boolean | undefined;
                 slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
                 slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
                 class?: string | undefined;
                 classList?: string | undefined;
                 value?: any[] | null | undefined;
@@ -78,6 +80,7 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                     flatMode?: boolean | undefined;
                     slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
                     slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                    input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
                     class?: string | undefined;
                     classList?: string | undefined;
                     clear?: (() => Promise<void>) | undefined;
@@ -96,6 +99,7 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                     flatMode?: boolean | undefined;
                     slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
                     slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                    input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
                     class?: string | undefined;
                     classList?: string | undefined;
                     value?: any[] | null | undefined;

package/dist/ui/form/form.d.ts

@@ -1,29 +1,37 @@
 import type { z } from 'zod';
 import type { ComponentProps } from 'svelte';
+import { type Writable } from 'svelte/store';
+import type { FormEventHandler } from 'svelte/elements';
 import { type FormInputsProps, type FormInputsType } from './formInput.js';
 import type FormSection from './FormSection.svelte';
-import type { FormEventHandler } from 'svelte/elements';
 type Shape = z.ZodRawShape;
 type PickOne<T> = {
     [P in keyof T]: Record<P, T[P]> & Partial<Record<Exclude<keyof T, P>, undefined>>;
 }[keyof T];
-export type BoolOrFunction<M extends Shape> = boolean | ((data: Partial<FormData<M>>) => unknown);
-export type FormData<M extends Shape> = z.infer<z.ZodObject<M>>;
-export type FormField<M extends Shape> = {
-    key: string & keyof M;
+export type Nullable<T> = {
+    [P in keyof T]?: T[P] | null;
+};
+export type BoolOrFunction<S extends Shape> = boolean | ((data: Nullable<FormDataInput<S>>) => unknown);
+export type FormDataInput<S extends Shape> = z.ZodObject<S>['_input'];
+export type FormField<S extends Shape> = {
+    key: string & keyof S;
     /** number col used by field */
     colSpan?: number;
     /** hide field if true */
-    hide?: BoolOrFunction<M>;
+    hide?: BoolOrFunction<S>;
 } & PickOne<FormInputsProps>;
-export type FormSectionProps<M extends Shape> = ComponentProps<FormSection> & {
+export type FormSectionProps<S extends Shape> = ComponentProps<FormSection> & {
     /** hide group if true */
-    hide?: BoolOrFunction<M>;
+    hide?: BoolOrFunction<S>;
 };
-export declare function initData<M extends Shape>(fields: FormField<M>[][]): Partial<FormData<M>>;
-export declare function getFieldType<M extends Shape>(field: FormField<M>): FormInputsType;
-type HandleInputOptions = {
+export declare function initData<S extends Shape, Data extends FormDataInput<S> = FormDataInput<S>>(fields: FormField<S>[][]): Data;
+export declare function getFieldType<S extends Shape>(field: FormField<S>): FormInputsType;
+type HandleInputOptions<S extends Shape> = {
+    model?: S;
     setError: (key: string, value: string) => void;
 };
-export declare function useHandleInput(model: Shape, { setError }: HandleInputOptions): FormEventHandler<HTMLFormElement>;
+export declare function useHandleInput<S extends Shape>({ model, setError }: HandleInputOptions<S>): {
+    isDirty: Writable<boolean>;
+    handleInput: FormEventHandler<HTMLFormElement>;
+};
 export {};

package/dist/ui/form/form.js

@@ -1,5 +1,6 @@
-import { formInputsType } from './formInput.js';
 import debounce from 'debounce';
+import { writable } from 'svelte/store';
+import { formInputsType } from './formInput.js';
 export function initData(fields) {
     // @ts-ignore
     return fields.flat().reduce((acc, cur) => {
@@ -14,32 +15,39 @@ export function getFieldType(field) {
         return 'text';
     return inputType;
 }
-export function useHandleInput(model, { setError }) {
+export function useHandleInput({ model, setError }) {
+    const isDirty = writable(false);
     const setErrorDebounced = debounce(setError, 1500);
-    return ({ target }) => {
-        if (!target)
-            return;
-        const { name, type, value, valueAsNumber, valueAsDate, checked } = target;
-        const typeMapValue = {
-            number: valueAsNumber,
-            date: valueAsDate,
-            text: value,
-            checkbox: checked
-        };
-        const v = typeMapValue[type] ?? value;
-        if (v === undefined || name === undefined)
-            return;
-        if (name === undefined)
-            return;
-        if (!model[name])
-            return;
-        const res = model[name].safeParse(v);
-        if (res.success) {
-            setErrorDebounced.clear();
-            setError(name, '');
-        }
-        else {
-            setErrorDebounced(name, res.error.issues[0].message);
+    return {
+        isDirty,
+        handleInput: ({ target }) => {
+            if (!target)
+                return;
+            isDirty.set(true);
+            if (!model)
+                return;
+            const { name, type, value, valueAsNumber, valueAsDate, checked } = target;
+            const typeMapValue = {
+                number: valueAsNumber,
+                date: valueAsDate,
+                text: value,
+                checkbox: checked
+            };
+            const v = typeMapValue[type] ?? value;
+            if (v === undefined || name === undefined)
+                return;
+            if (name === undefined)
+                return;
+            if (!model[name])
+                return;
+            const res = model[name].safeParse(v);
+            if (res.success) {
+                setErrorDebounced.clear();
+                setError(name, '');
+            }
+            else {
+                setErrorDebounced(name, res.error.issues[0].message);
+            }
         }
     };
 }

package/dist/ui/form/formInput.d.ts

@@ -31,7 +31,7 @@ export type FormInputProps<T extends FormInputsType> = ComponentProps<InstanceTy
 export type FormInputsProps = {
     [T in FormInputsType]: FormInputProps<T>;
 };
-export declare const formInputsType: ("number" | "boolean" | "select" | "textarea" | "date" | "text" | "password" | "radio" | "textrich" | "datetime" | "relation" | "relations")[];
+export declare const formInputsType: ("number" | "boolean" | "select" | "date" | "textarea" | "text" | "password" | "radio" | "textrich" | "datetime" | "relation" | "relations")[];
 export declare function relationProps<Item extends {
     id: string;
 }>(props: ComponentProps<InstanceType<typeof InputRelation<Item>>>): {
@@ -48,6 +48,7 @@ export declare function relationProps<Item extends {
     flatMode?: boolean | undefined;
     slotItem?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
     slotSuggestion?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
+    input?: import("svelte/elements").HTMLInputAttributes | undefined;
     class?: string | undefined;
     classList?: string | undefined;
     clear?: (() => Promise<void>) | undefined;
@@ -66,6 +67,7 @@ export declare function relationsProps<Item extends {
     flatMode?: boolean | undefined;
     slotItem?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
     slotSuggestion?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
+    input?: import("svelte/elements").HTMLInputAttributes | undefined;
     class?: string | undefined;
     classList?: string | undefined;
     value?: Item[] | null | undefined;

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

@@ -12,7 +12,7 @@ declare const __propDef: {
         prefix?: string | number | undefined;
         prefixFor?: string | number | undefined;
         enhanceDisabled?: boolean | undefined;
-        labelPosition?: ("top" | "right" | "left") | undefined;
+        labelPosition?: ("top" | "left" | "right") | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/input/InputBoolean.svelte

@@ -1,5 +1,6 @@
 <script>import { createEventDispatcher } from "svelte";
 import { FormControl, bindCheckedWithParams } from "./index.js";
+import { USE_COERCE_BOOLEAN } from "../../utils/constant.js";
 export let value = false;
 export let input = {};
 export let inputElement = void 0;
@@ -20,6 +21,7 @@ const dispatch = createEventDispatcher();
 		class="checkbox ml-1"
 		{...input}
 	/>
-
-	<input type="hidden" name={key} value={value ? 'true' : ''} />
+	{#if value !== undefined}
+		<input type="hidden" name={key} value="{USE_COERCE_BOOLEAN}{value}" />
+	{/if}
 </FormControl>

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

@@ -11,12 +11,12 @@ declare const __propDef: {
         prefix?: string | number | undefined;
         prefixFor?: string | number | undefined;
         enhanceDisabled?: boolean | undefined;
-        labelPosition?: ("top" | "right" | "left") | undefined;
+        labelPosition?: ("top" | "left" | "right") | undefined;
     } & {
         input?: HTMLInputAttributes | undefined;
         inputElement?: HTMLInputElement | undefined;
         wrapperClass?: string | undefined;
-        value?: boolean | undefined;
+        value?: boolean | null | undefined;
         bindWithParams?: boolean | undefined;
     } & {
         isRow?: boolean | undefined;

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

@@ -11,12 +11,12 @@ declare const __propDef: {
         prefix?: string | number | undefined;
         prefixFor?: string | number | undefined;
         enhanceDisabled?: boolean | undefined;
-        labelPosition?: ("top" | "right" | "left") | undefined;
+        labelPosition?: ("top" | "left" | "right") | undefined;
     } & {
         input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
         inputElement?: HTMLInputElement | undefined;
         wrapperClass?: string | undefined;
-        value?: string[] | undefined;
+        value?: string[] | null | undefined;
         bindWithParams?: boolean | undefined;
     } & {
         options: Options;

package/dist/ui/input/InputCheckboxsMenu.svelte

@@ -27,7 +27,7 @@ $:
 function handleSubmit() {
   if (!dropdown)
     return;
-  if (!value.length) {
+  if (!value?.length) {
     goto($urlParam.without(key), { replaceState: true, noScroll: true });
     return;
   }
@@ -43,23 +43,23 @@ function handleReset() {
 <input type="hidden" name={key} value={JSON.stringify(value)} />
 
 <DropDown bind:this={dropdown} tippyProps={{ onHide: handleSubmit }} wrapperClass="mb-[-2px]">
-	<div class="join" class:ml-2={value.length} slot="activator">
+	<div class="join" class:ml-2={value?.length} slot="activator">
 		<button class="btn indicator join-item btn-sm {btnClass || ''}">
 			<slot name="label">
 				<span>{label}</span>
 			</slot>
-			{#if value.length > 0}
+			{#if !!value?.length}
 				<span
 					class="
 						badge indicator-item badge-sm indicator-start
 						{badgePrimary ? 'badge-primary' : 'badge-outline bg-base-100'}
 					"
 				>
-					{value.length}
+					{value?.length}
 				</span>
 			{/if}
 		</button>
-		{#if value.length}
+		{#if !!value?.length}
 			<button class="btn btn-square join-item btn-sm" on:click={handleReset}>
 				<Icon path={mdiClose} class="fill-base-content" />
 			</button>

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

@@ -11,12 +11,12 @@ declare const __propDef: {
         prefix?: string | number | undefined;
         prefixFor?: string | number | undefined;
         enhanceDisabled?: boolean | undefined;
-        labelPosition?: ("top" | "right" | "left") | undefined;
+        labelPosition?: ("top" | "left" | "right") | undefined;
     } & {
         input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
         inputElement?: HTMLInputElement | undefined;
         wrapperClass?: string | undefined;
-        value?: string[] | undefined;
+        value?: string[] | null | undefined;
         bindWithParams?: boolean | undefined;
     } & {
         key: string;

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

@@ -14,12 +14,12 @@ declare const __propDef: {
         prefix?: string | number | undefined;
         prefixFor?: string | number | undefined;
         enhanceDisabled?: boolean | undefined;
-        labelPosition?: ("top" | "right" | "left") | undefined;
+        labelPosition?: ("top" | "left" | "right") | undefined;
     } & {
         input?: import("svelte/elements").HTMLInputAttributes | undefined;
         inputElement?: HTMLInputElement | undefined;
         wrapperClass?: string | undefined;
-        value?: string | undefined;
+        value?: string | null | undefined;
         bindWithParams?: boolean | undefined;
     } & {
         options: Options;

package/dist/ui/input/InputDate.svelte

@@ -1,11 +1,11 @@
 <script>import { createEventDispatcher } from "svelte";
 import dayjs from "dayjs";
 import { FormControl } from "./index.js";
+import { USE_COERCE_DATE } from "../../utils/constant.js";
+export let value = void 0;
+export let input = {};
 $:
-  ({ input, value: _value, ...props } = $$props);
-$:
-  ({ class: inputClass, ...inputProps } = input || {});
-export let value = _value;
+  ({ class: inputClass = "", ...inputProps } = input);
 const dispatch = createEventDispatcher();
 const handleInput = ({ currentTarget }) => {
   value = currentTarget.valueAsDate || null;
@@ -13,16 +13,19 @@ const handleInput = ({ currentTarget }) => {
 };
 </script>
 
-<FormControl {...props} let:key>
+<FormControl {...$$restProps} let:key>
 	<input
 		value={value && dayjs(value).format('YYYY-MM-DD')}
 		on:input={handleInput}
 		on:focus
 		on:blur
 		type="date"
-		name={key}
 		id={key}
-		class="input input-bordered {inputClass || {}}"
+		class="input input-bordered {inputClass}"
 		{...inputProps}
 	/>
+
+	{#if value !== undefined}
+		<input type="hidden" name={key} value="{USE_COERCE_DATE}{value?.toJSON()}" />
+	{/if}
 </FormControl>

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import { type InputProps } from './index.js';
 declare const __propDef: {
-    props: InputProps<Date | null>;
+    props: InputProps<Date | null | undefined>;
     events: {
         focus: FocusEvent;
         blur: FocusEvent;

package/dist/ui/input/InputDatetime.svelte

@@ -1,23 +1,35 @@
-<script>import { FormControl } from "./index.js";
+<script>import { USE_COERCE_DATE } from "../../utils/constant.js";
+import { FormControl } from "./index.js";
+import { createEventDispatcher } from "svelte";
+import dayjs from "dayjs";
+export let value = void 0;
+export let input = {};
 $:
-  ({ input, value: _value, ...props } = $$props);
-$:
-  ({ class: inputClass, ...inputProps } = input || {});
-export let value = _value;
+  ({ class: inputClass = "", ...inputProps } = input);
+const dispatch = createEventDispatcher();
+const handleInput = ({ currentTarget }) => {
+  value = getDateTime(currentTarget.value);
+  dispatch("input", value);
+};
+function getDateTime(v) {
+  if (typeof v !== "string")
+    return null;
+  return new Date(v);
+}
 </script>
 
-<FormControl {...props} let:key>
-	{#if value}
-		<input type="hidden" name={key} value={new Date(value).toJSON()} />
-	{/if}
+<FormControl {...$$restProps} let:key>
 	<input
-		bind:value
-		on:input
+		value={value && dayjs(value).format('YYYY-MM-DDThh:mm')}
+		on:input={handleInput}
 		on:focus
 		on:blur
 		type="datetime-local"
 		id={key}
-		class="input input-bordered {inputClass || {}}"
+		class="input input-bordered {inputClass}"
 		{...inputProps}
 	/>
+	{#if value !== undefined}
+		<input type="hidden" name={key} value="{USE_COERCE_DATE}{value?.toJSON()}" />
+	{/if}
 </FormControl>

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

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