fuma 0.2.3 → 0.3.0

package/dist/ui/drawer/layers.js

@@ -1,4 +1,4 @@
-import { derived, get, writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 import { page } from '$app/stores';
 import { browser } from '$app/environment';
 const layers = writable([]);
@@ -6,14 +6,13 @@ const layersOffset = derived(layers, ($layers) => {
     const nbDrawer = $layers.length;
     return $layers.reduce((acc, layer, index) => {
         const drawerOffset = nbDrawer - index - 1;
-        console.log({ drawerOffset });
         return { ...acc, [layer]: drawerOffset };
     }, {});
 });
-export function subscibeDrawerLayers(key, value) {
+export function subscibeDrawerLayers(key) {
     const layerId = Math.random().toString().slice(2, 12);
     let isInitialized = false;
-    const isActive = derived(page, ({ url }) => url.searchParams.get(key) === value, false);
+    const isActive = derived(page, ({ url }) => url.searchParams.has(key), false);
     const isActiveUnsubscribe = isActive.subscribe(($isActive) => {
         if ($isActive)
             addLayer();
@@ -42,7 +41,8 @@ export function subscibeDrawerLayers(key, value) {
     }
     return {
         isActive,
-        offset: derived(layersOffset, (drawers) => drawers[layerId]),
+        index: derived(layers, ($layers) => $layers.indexOf(layerId)),
+        offset: derived(layersOffset, (offsets) => offsets[layerId]),
         destroy() {
             removeLayer();
             isActiveUnsubscribe();

package/dist/ui/form/Form.svelte

@@ -1,44 +1,72 @@
-<script>import { contextContainer } from "../context.js";
-import { createEventDispatcher, onMount } from "svelte";
+<script context="module"></script>
+
+<script
+
+	generics="Shape extends z.ZodRawShape, Data extends FormDataInput<Shape> = FormDataInput<Shape>"
+>import { createEventDispatcher, onMount } from "svelte";
 import { fade } from "svelte/transition";
 import { page } from "$app/stores";
+import { contextContainer } from "../context.js";
 import {
   initData,
-  getFieldType
+  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 };
 export let classSection = "";
 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 } = useForm({
+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, 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;
   });
 }
@@ -56,11 +84,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}
@@ -78,7 +109,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]}
@@ -96,19 +127,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,35 +1,45 @@
 import { SvelteComponent } from "svelte";
 import type { z } from 'zod';
-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> {
+declare class __sveltets_Render<Shape extends z.ZodRawShape, Data extends FormDataInput<Shape> = FormDataInput<Shape>> {
     props(): {
         class?: string | undefined;
         classSection?: string | undefined;
         classAction?: string | undefined;
+        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;
-        options?: UseFormOptions<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;
-        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;
+        actionUpdate?: string | undefined;
+        options?: UseFormOptions<Data> | 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?: 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;
+            data?: Data | undefined;
         }>;
+        created: CustomEvent<Data>;
+        updated: CustomEvent<Data>;
+        deleted: CustomEvent<void>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {};
+    slots(): {
+        default: {};
+    };
 }
-export type FormProps<Shape extends z.ZodRawShape> = ReturnType<__sveltets_Render<Shape>['props']>;
-export type FormEvents<Shape extends z.ZodRawShape> = ReturnType<__sveltets_Render<Shape>['events']>;
-export type FormSlots<Shape extends z.ZodRawShape> = ReturnType<__sveltets_Render<Shape>['slots']>;
-export default class Form<Shape extends z.ZodRawShape> extends SvelteComponent<FormProps<Shape>, FormEvents<Shape>, FormSlots<Shape>> {
-    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, Data extends FormDataInput<Shape> = FormDataInput<Shape>> = ReturnType<__sveltets_Render<Shape, Data>['props']>;
+export type FormEvents<Shape extends z.ZodRawShape, Data extends FormDataInput<Shape> = FormDataInput<Shape>> = ReturnType<__sveltets_Render<Shape, Data>['events']>;
+export type FormSlots<Shape extends z.ZodRawShape, Data extends FormDataInput<Shape> = FormDataInput<Shape>> = ReturnType<__sveltets_Render<Shape, Data>['slots']>;
+export default class Form<Shape extends z.ZodRawShape, Data extends FormDataInput<Shape> = FormDataInput<Shape>> extends SvelteComponent<FormProps<Shape, Data>, FormEvents<Shape, Data>, FormSlots<Shape, 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

@@ -1,7 +1,9 @@
-<script>import { formInputs } from "./formInput.js";
+<script generics="InputType extends FormInputsType">import { formInputs } from "./formInput.js";
 let inputType;
 export { inputType as type };
 export let value;
+$:
+  component = formInputs[inputType];
 </script>
 
-<svelte:component this={formInputs[inputType]} bind:value {...$$restProps} />
+<svelte:component this={component} bind:value {...$$restProps} />

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

@@ -0,0 +1,116 @@
+import { SvelteComponent } from "svelte";
+import { type FormInputsType } from './formInput.js';
+declare class __sveltets_Render<InputType extends FormInputsType> {
+    props(): import("svelte").ComponentProps<InstanceType<{
+        readonly text: typeof import("../index.js").InputText;
+        readonly textarea: typeof import("../index.js").InputTextarea;
+        readonly textrich: typeof import("../index.js").InputTextRich;
+        readonly boolean: typeof import("../index.js").InputBoolean;
+        readonly date: typeof import("../index.js").InputDate;
+        readonly datetime: typeof import("../index.js").InputDatetime;
+        readonly number: typeof import("../index.js").InputNumber;
+        readonly password: typeof import("../index.js").InputPassword;
+        readonly select: typeof import("../index.js").InputSelect;
+        readonly radio: typeof import("../index.js").InputRadio;
+        readonly relation: {
+            new (options: import("svelte").ComponentConstructorOptions<{
+                key?: string | undefined;
+                label?: string | undefined;
+                search: (q: string) => Promise<any[]>;
+                createUrl?: string | undefined;
+                createTitle?: string | undefined;
+                createIcon?: string | undefined;
+                value?: any;
+                error?: string | undefined;
+                placeholder?: string | undefined;
+                tippyProps?: Partial<import("tippy.js").Props> | undefined;
+                flatMode?: boolean | undefined;
+                slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                class?: string | undefined;
+                classList?: string | undefined;
+                clear?: (() => Promise<void>) | undefined;
+            }>): import("../index.js").InputRelation<any>;
+        };
+        readonly relations: {
+            new (options: import("svelte").ComponentConstructorOptions<{
+                key?: string | undefined;
+                label?: string | undefined;
+                search: (q: string) => Promise<any[]>;
+                createUrl?: string | undefined;
+                createTitle?: string | undefined;
+                createIcon?: string | undefined;
+                error?: string | undefined;
+                placeholder?: string | undefined;
+                flatMode?: boolean | undefined;
+                slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                class?: string | undefined;
+                classList?: string | undefined;
+                value?: any[] | null | undefined;
+            }>): import("../index.js").InputRelations<any>;
+        };
+    }[InputType]>> & {
+        type: InputType;
+        value: import("svelte").ComponentProps<InstanceType<{
+            readonly text: typeof import("../index.js").InputText;
+            readonly textarea: typeof import("../index.js").InputTextarea;
+            readonly textrich: typeof import("../index.js").InputTextRich;
+            readonly boolean: typeof import("../index.js").InputBoolean;
+            readonly date: typeof import("../index.js").InputDate;
+            readonly datetime: typeof import("../index.js").InputDatetime;
+            readonly number: typeof import("../index.js").InputNumber;
+            readonly password: typeof import("../index.js").InputPassword;
+            readonly select: typeof import("../index.js").InputSelect;
+            readonly radio: typeof import("../index.js").InputRadio;
+            readonly relation: {
+                new (options: import("svelte").ComponentConstructorOptions<{
+                    key?: string | undefined;
+                    label?: string | undefined;
+                    search: (q: string) => Promise<any[]>;
+                    createUrl?: string | undefined;
+                    createTitle?: string | undefined;
+                    createIcon?: string | undefined;
+                    value?: any;
+                    error?: string | undefined;
+                    placeholder?: string | undefined;
+                    tippyProps?: Partial<import("tippy.js").Props> | undefined;
+                    flatMode?: boolean | undefined;
+                    slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                    slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                    class?: string | undefined;
+                    classList?: string | undefined;
+                    clear?: (() => Promise<void>) | undefined;
+                }>): import("../index.js").InputRelation<any>;
+            };
+            readonly relations: {
+                new (options: import("svelte").ComponentConstructorOptions<{
+                    key?: string | undefined;
+                    label?: string | undefined;
+                    search: (q: string) => Promise<any[]>;
+                    createUrl?: string | undefined;
+                    createTitle?: string | undefined;
+                    createIcon?: string | undefined;
+                    error?: string | undefined;
+                    placeholder?: string | undefined;
+                    flatMode?: boolean | undefined;
+                    slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                    slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                    class?: string | undefined;
+                    classList?: string | undefined;
+                    value?: any[] | null | undefined;
+                }>): import("../index.js").InputRelations<any>;
+            };
+        }[InputType]>>["value"];
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type FormInputProps_<InputType extends FormInputsType> = ReturnType<__sveltets_Render<InputType>['props']>;
+export type FormInputEvents<InputType extends FormInputsType> = ReturnType<__sveltets_Render<InputType>['events']>;
+export type FormInputSlots<InputType extends FormInputsType> = ReturnType<__sveltets_Render<InputType>['slots']>;
+export default class FormInput<InputType extends FormInputsType> extends SvelteComponent<FormInputProps_<InputType>, FormInputEvents<InputType>, FormInputSlots<InputType>> {
+}
+export {};

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

@@ -1,24 +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';
 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: FormData<M>) => unknown);
-export type FormData<M extends Shape> = Partial<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<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<S extends Shape>({ model, setError }: HandleInputOptions<S>): {
+    isDirty: Writable<boolean>;
+    handleInput: FormEventHandler<HTMLFormElement>;
 };
-export declare function initData<M extends Shape>(fields: FormField<M>[][]): FormData<M>;
-export declare function getFieldType<M extends Shape>(field: FormField<M>): FormInputsType;
 export {};

package/dist/ui/form/form.js

@@ -1,3 +1,5 @@
+import debounce from 'debounce';
+import { writable } from 'svelte/store';
 import { formInputsType } from './formInput.js';
 export function initData(fields) {
     // @ts-ignore
@@ -13,3 +15,39 @@ export function getFieldType(field) {
         return 'text';
     return inputType;
 }
+export function useHandleInput({ model, setError }) {
+    const isDirty = writable(false);
+    const setErrorDebounced = debounce(setError, 1500);
+    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>>>): {

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.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/InputNumber.svelte.d.ts

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

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

@@ -10,12 +10,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;
     } & {
         autocomplete?: string | undefined;

package/dist/ui/input/InputRadio.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/InputRelation.svelte

@@ -2,6 +2,7 @@
 import debounce from "debounce";
 import { toast } from "svelte-sonner";
 import { mdiClose } from "@mdi/js";
+import { USE_JSON_PARSER } from "../../utils/constant.js";
 import { Icon } from "../icon/index.js";
 import { Slot } from "../slot/index.js";
 import { DropDown } from "../menu/index.js";
@@ -101,7 +102,11 @@ async function handleBlur() {
 						<Icon path={mdiClose} />
 					</button>
 				</div>
-				<input type="hidden" name={key} value={item.id} />
+				<input
+					type="hidden"
+					name={key}
+					value="{USE_JSON_PARSER}{JSON.stringify({ id: item.id })}"
+				/>
 			{/if}
 		</FormControl>
 	</div>
@@ -113,7 +118,7 @@ async function handleBlur() {
 		{isLoading}
 		{focusIndex}
 		let:index
-		class="w-full {classList}"
+		class="w-full min-w-40 {classList}"
 		on:select={({ detail }) => select(detail)}
 	>
 		<slot name="suggestion" item={proposedItems[index]}>