@cloudparker/moldex.js 0.0.35 → 0.0.38

package/dist/views/core/dialog/components/dialog/dialog.svelte

@@ -9,57 +9,58 @@
 	 */
 	export type DialogCloseButtonClickType = (ev: MouseEvent | TouchEvent) => Promise<boolean>;
 
-	export type DialogSizeType = 'sm' | 'md' | 'lg' | 'full';
+	export type DialogSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
 	export type DialogPropsType = {
-		id?: string;
+		backdropClassName?: string;
+		bodyClassName?: string;
+		bodyComponent?: any;
+		bodySnippet?: Snippet<[dialogExports: DialogExportsType]>;
 		cancelable?: boolean;
+		children?: Snippet;
 		className?: string;
+		component?: any;
 		containerClassName?: string;
-		backdropClassName?: string;
-		hasTitle?: boolean;
-		hasSubtitle?: boolean;
-		title?: string;
-		subtitle?: string;
-		titleClassName?: string;
-		subtitleClassName?: string;
+		footerClassName?: string;
+		footerCloseButtonClassName?: string;
+		footerCloseButtonLabel?: string;
+		footerOkButtonClassName?: string;
+		footerOkButtonDisabled?: boolean;
+		footerOkButtonSpinner?: boolean;
+		footerOkButtonType?: 'button' | 'submit' | 'reset';
+		footerOkButtonLable?: string;
+		footerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
+		hasFooter?: boolean;
+		hasFooterCloseButton?: boolean;
+		hasFooterOkButton?: boolean;
+		hasFooterShadow?: boolean;
 		hasHeader?: boolean;
+		hasHeaderBack?: boolean;
+		hasHeaderClose?: boolean;
 		hasHeaderShadow?: boolean;
+		hasSubtitle?: boolean;
+		hasTitle?: boolean;
+		headerBackButtonClassName?: string;
+		headerBackIconClassName?: string;
+		headerBackIconPath?: string;
 		headerClassName?: string;
-		hasHeaderClose?: boolean;
 		headerCloseButtonClassName?: string;
-		headerCloseIconPath?: string;
 		headerCloseIconClassName?: string;
-		hasHeaderBack?: boolean;
-		headerBackButtonClassName?: string;
-		headerBackIconPath?: string;
-		headerBackIconClassName?: string;
-		hasFooter?: boolean;
-		hasFooterShadow?: boolean;
-		hasFooterCloseButton?: boolean;
-		hasFooterOkButton?: boolean;
-		footerClassName?: string;
-		footerCloseLabel?: string;
-		footerCloseButtonClassName?: string;
-		footerOkLable?: string;
-		footerOkButtonClassName?: string;
-		footerOkButtonType?: 'button' | 'submit' | 'reset';
-		footerOkButtonSpinner?: boolean;
-		footerOkButtonDisabled?: boolean;
-		submitButtonFormId?: string;
-		bodyClassName?: string;
-		bodyComponent?: any;
-		component?: any;
-		props?: any;
-		size?: DialogSizeType;
-		children?: Snippet;
+		headerCloseIconPath?: string;
 		headerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
-		bodySnippet?: Snippet<[dialogExports: DialogExportsType]>;
-		footerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
+		id?: string;
 		onClose?: () => void;
-		onResult?: (value: any) => void;
-		onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;
 		onCloseClick?: DialogCloseButtonClickType;
+		onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;
+		onResult?: (value: any) => void;
+		onData?: (data: any) => void;
+		props?: any;
+		size?: DialogSizeType;
+		submitButtonFormId?: string;
+		subtitle?: string;
+		subtitleClassName?: string;
+		title?: string;
+		titleClassName?: string;
 	};
 
 	export type DialogExportsType = {
@@ -69,6 +70,7 @@
 		setOkDisabled: (value: boolean) => void;
 		setOnOkClick: (onclick: (ev: MouseEvent | TouchEvent) => void) => void;
 		setOnCloseClick: (onclick: DialogCloseButtonClickType) => void;
+		setOnData: (listener: (data: any) => void) => void;
 	};
 </script>
 
@@ -79,54 +81,55 @@
 	import { mdiArrowLeft, mdiClose } from '../../../icon';
 
 	let {
-		id = '',
+		backdropClassName = '',
+		bodyClassName = '',
+		bodyComponent,
+		bodySnippet,
 		cancelable = true,
+		children,
 		className = '',
+		component,
 		containerClassName = '',
-		backdropClassName = '',
+		footerClassName = '',
+		footerCloseButtonClassName = '',
+		footerCloseButtonLabel = 'Close',
+		footerOkButtonClassName = '',
+		footerOkButtonDisabled = false,
+		footerOkButtonSpinner = false,
+		footerOkButtonType = 'button',
+		footerOkButtonLable = 'Save',
+		footerSnippet,
+		hasFooter = false,
+		hasFooterCloseButton = false,
+		hasFooterOkButton = false,
+		hasFooterShadow = false,
+		hasHeader = false,
+		hasHeaderBack = false,
+		hasHeaderClose = false,
 		hasHeaderShadow = false,
-		hasTitle = false,
 		hasSubtitle = false,
-		title = '',
-		subtitle = '',
-		titleClassName = '',
-		subtitleClassName = '',
-		hasHeader = false,
+		hasTitle = false,
+		headerBackButtonClassName = '',
+		headerBackIconClassName = '',
+		headerBackIconPath = mdiArrowLeft,
 		headerClassName = '',
-		hasHeaderClose = false,
 		headerCloseButtonClassName = '',
-		headerCloseIconPath = mdiClose,
 		headerCloseIconClassName = '',
-		hasHeaderBack = false,
-		headerBackButtonClassName = '',
-		headerBackIconPath = mdiArrowLeft,
-		headerBackIconClassName = '',
-		hasFooter = false,
-		hasFooterShadow = false,
-		hasFooterCloseButton = false,
-		hasFooterOkButton = false,
-		footerClassName = '',
-		footerCloseLabel = 'Close',
-		footerCloseButtonClassName = '',
-		footerOkLable = 'Save',
-		footerOkButtonClassName = '',
-		footerOkButtonType = 'button',
-		footerOkButtonSpinner = false,
-		footerOkButtonDisabled = false,
-		submitButtonFormId = undefined,
-		size = 'sm',
-		bodyClassName = '',
-		bodyComponent,
-		component,
-		props = {},
-		children,
+		headerCloseIconPath = mdiClose,
 		headerSnippet,
-		bodySnippet,
-		footerSnippet,
+		id = '',
 		onClose,
-		onResult,
+		onCloseClick,
 		onOkClick,
-		onCloseClick
+		onResult,
+		onData,
+		props = {},
+		size = 'sm',
+		submitButtonFormId = undefined,
+		subtitle = '',
+		subtitleClassName = '',
+		title = '',
+		titleClassName = ''
 	}: DialogPropsType = $props();
 
 	let dialogExports: DialogExportsType = {
@@ -135,7 +138,8 @@
 		setOkSpinner,
 		setOkDisabled,
 		setOnCloseClick,
-		setOnOkClick
+		setOnOkClick,
+		setOnData
 	};
 
 	let isPlaced: boolean = $state(false);
@@ -147,15 +151,19 @@
 
 	let result: any;
 
-	let smSizeClassName = 'w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 xl:w-1/4';
-	let mdSizeClassName = 'w-11/12 sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-1/3';
-	let lgSizeClassName = 'w-11/12 sm:w-3/4 md:w-3/4 lg:w-2/3 xl:w-1/2';
+	let xsSizeClassName = 'w-64';
+	let smSizeClassName = 'w-96';
+	let mdSizeClassName = 'w-1/3';
+	let lgSizeClassName = 'w-1/2';
+	let xlSizeClassName = 'w-7/10';
 	let fullSizeClassName = 'fixed inset-0 w-screen h-screen ';
 
 	let screenSizeClassNameMap: { [key: string]: string } = {
+		xs: xsSizeClassName,
 		sm: smSizeClassName,
 		md: mdSizeClassName,
 		lg: lgSizeClassName,
+		xl: xlSizeClassName,
 		full: fullSizeClassName
 	};
 
@@ -198,6 +206,10 @@
 		footerOkButtonSpinner = value;
 	}
 
+	export function setOnData(listener: (data: any) => void) {
+		onData = listener;
+	}
+
 	export function setOnOkClick(
 		onclick: (event: MouseEvent | TouchEvent, options: DialogExportsType) => void
 	) {
@@ -208,6 +220,10 @@
 		onCloseClick = onclick;
 	}
 
+	export function postData(data: any) {
+		onData && onData(data);
+	}
+
 	function handleBackdropClick() {
 		if (cancelable) {
 			closeDialog();
@@ -333,7 +349,7 @@
 							form={submitButtonFormId}
 							type={submitButtonFormId ? 'submit' : footerOkButtonType}
 							className="p-2 px-5 rounded bg-indigo-600 hover:bg-indigo-700 focus:bg-indigo-700 text-white {footerOkButtonClassName}"
-							label={footerOkLable}
+							label={footerOkButtonLable}
 							disabled={footerOkButtonDisabled}
 							spinner={footerOkButtonSpinner}
 							spinnerClassName="text-white w-4 h-4"
@@ -345,7 +361,7 @@
 							id="btn-close"
 							type="button"
 							className="p-2 px-5 rounded bg-gray-100 hover:bg-gray-200 {footerCloseButtonClassName}"
-							label={footerCloseLabel}
+							label={footerCloseButtonLabel}
 							onClick={handleClose}
 						/>
 					{/if}

package/dist/views/core/dialog/components/dialog/dialog.svelte.d.ts

@@ -4,56 +4,57 @@
  * true -> Close dialog
  */
 export type DialogCloseButtonClickType = (ev: MouseEvent | TouchEvent) => Promise<boolean>;
-export type DialogSizeType = 'sm' | 'md' | 'lg' | 'full';
+export type DialogSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export type DialogPropsType = {
-    id?: string;
+    backdropClassName?: string;
+    bodyClassName?: string;
+    bodyComponent?: any;
+    bodySnippet?: Snippet<[dialogExports: DialogExportsType]>;
     cancelable?: boolean;
+    children?: Snippet;
     className?: string;
+    component?: any;
     containerClassName?: string;
-    backdropClassName?: string;
-    hasTitle?: boolean;
-    hasSubtitle?: boolean;
-    title?: string;
-    subtitle?: string;
-    titleClassName?: string;
-    subtitleClassName?: string;
+    footerClassName?: string;
+    footerCloseButtonClassName?: string;
+    footerCloseButtonLabel?: string;
+    footerOkButtonClassName?: string;
+    footerOkButtonDisabled?: boolean;
+    footerOkButtonSpinner?: boolean;
+    footerOkButtonType?: 'button' | 'submit' | 'reset';
+    footerOkButtonLable?: string;
+    footerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
+    hasFooter?: boolean;
+    hasFooterCloseButton?: boolean;
+    hasFooterOkButton?: boolean;
+    hasFooterShadow?: boolean;
     hasHeader?: boolean;
+    hasHeaderBack?: boolean;
+    hasHeaderClose?: boolean;
     hasHeaderShadow?: boolean;
+    hasSubtitle?: boolean;
+    hasTitle?: boolean;
+    headerBackButtonClassName?: string;
+    headerBackIconClassName?: string;
+    headerBackIconPath?: string;
     headerClassName?: string;
-    hasHeaderClose?: boolean;
     headerCloseButtonClassName?: string;
-    headerCloseIconPath?: string;
     headerCloseIconClassName?: string;
-    hasHeaderBack?: boolean;
-    headerBackButtonClassName?: string;
-    headerBackIconPath?: string;
-    headerBackIconClassName?: string;
-    hasFooter?: boolean;
-    hasFooterShadow?: boolean;
-    hasFooterCloseButton?: boolean;
-    hasFooterOkButton?: boolean;
-    footerClassName?: string;
-    footerCloseLabel?: string;
-    footerCloseButtonClassName?: string;
-    footerOkLable?: string;
-    footerOkButtonClassName?: string;
-    footerOkButtonType?: 'button' | 'submit' | 'reset';
-    footerOkButtonSpinner?: boolean;
-    footerOkButtonDisabled?: boolean;
-    submitButtonFormId?: string;
-    bodyClassName?: string;
-    bodyComponent?: any;
-    component?: any;
-    props?: any;
-    size?: DialogSizeType;
-    children?: Snippet;
+    headerCloseIconPath?: string;
     headerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
-    bodySnippet?: Snippet<[dialogExports: DialogExportsType]>;
-    footerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
+    id?: string;
     onClose?: () => void;
-    onResult?: (value: any) => void;
-    onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;
     onCloseClick?: DialogCloseButtonClickType;
+    onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;
+    onResult?: (value: any) => void;
+    onData?: (data: any) => void;
+    props?: any;
+    size?: DialogSizeType;
+    submitButtonFormId?: string;
+    subtitle?: string;
+    subtitleClassName?: string;
+    title?: string;
+    titleClassName?: string;
 };
 export type DialogExportsType = {
     closeDialog: () => void;
@@ -62,6 +63,7 @@ export type DialogExportsType = {
     setOkDisabled: (value: boolean) => void;
     setOnOkClick: (onclick: (ev: MouseEvent | TouchEvent) => void) => void;
     setOnCloseClick: (onclick: DialogCloseButtonClickType) => void;
+    setOnData: (listener: (data: any) => void) => void;
 };
 import { type Snippet } from 'svelte';
 import '../../../../../tailwind.css';
@@ -87,8 +89,10 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<DialogPropsType, {
     setResult: (value: any) => void;
     setOkDisabled: (value: boolean) => void;
     setOkSpinner: (value: boolean) => void;
+    setOnData: (listener: (data: any) => void) => void;
     setOnOkClick: (onclick: (event: MouseEvent | TouchEvent, options: DialogExportsType) => void) => void;
     setOnCloseClick: (onclick: DialogCloseButtonClickType) => void;
+    postData: (data: any) => void;
 }, "">;
 type Dialog = InstanceType<typeof Dialog>;
 export default Dialog;

package/dist/views/core/dialog/components/loading-dialog/loading-dialog.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Spinner } from '../../../spinner';
+	import type { DialogExportsType } from '../dialog/dialog.svelte';
+
+	type PropsType = {
+		msg?: string;
+		msgClassName?: string;
+		spinnerClassName?: string;
+		containerClassName?: string;
+		className?: string;
+	};
+
+	let {
+		msg = 'Please wait...',
+		msgClassName,
+		spinnerClassName,
+		containerClassName,
+		className,
+		setOnOkClick,
+		setResult,
+		closeDialog,
+		setOnData,
+		...props
+	}: PropsType & DialogExportsType = $props();
+
+	setOnData((data: any) => {
+		if (data?.msg) {
+			msg = data?.msg || '';
+		}
+	});
+</script>
+
+<div class="p-6 {containerClassName}">
+	<div class="flex items-center gap-4 {className}">
+		<div>
+			<Spinner className={spinnerClassName} />
+		</div>
+		<div class="text-gray-400 {msgClassName}">
+			{@html msg || ''}
+		</div>
+	</div>
+</div>

package/dist/views/core/dialog/components/loading-dialog/loading-dialog.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { DialogExportsType } from '../dialog/dialog.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const LoadingDialog: $$__sveltets_2_IsomorphicComponent<{
+    msg?: string;
+    msgClassName?: string;
+    spinnerClassName?: string;
+    containerClassName?: string;
+    className?: string;
+} & DialogExportsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type LoadingDialog = InstanceType<typeof LoadingDialog>;
+export default LoadingDialog;

package/dist/views/core/dialog/components/msg-dialog/msg-dialog.svelte

@@ -23,5 +23,5 @@
 </script>
 
 <div class="p-6 {className}">
-	<div>{@html msg}</div>
+	<div>{@html (msg ||'')}</div>
 </div>

package/dist/views/core/dialog/components/text-field-dialog/text-field-dialog.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { showToast } from '../../../../../services';
+	import { TextField } from '../../../input';
+	import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
+	import type { DialogExportsType } from '../dialog/dialog.svelte';
+
+	type PropsType = {
+		value?: InputValueType;
+		label?: string;
+		name?: string;
+		maxlength?: number;
+		className?: string;
+		autofocus?: boolean;
+		required?: boolean;
+	};
+
+	let {
+		value = $bindable(''),
+		label,
+		name,
+		maxlength,
+		className,
+		autofocus,
+		required,
+		setOnOkClick,
+		setResult,
+		closeDialog,
+		...props
+	}: PropsType & DialogExportsType = $props();
+
+	function handleSubmit(ev: SubmitEvent) {
+		ev?.preventDefault();
+		value = ((value as string) || '').trim();
+		if (required && !value) {
+			showToast({ msg: 'This is a required field!' });
+		} else {
+			setResult(value);
+			closeDialog();
+		}
+	}
+</script>
+
+<div class="p-6">
+	<form id="text-field-dialog-form" onsubmit={handleSubmit}>
+		<TextField {...props} {label} {name} {maxlength} {className} {autofocus} {required} bind:value />
+	</form>
+</div>

package/dist/views/core/dialog/components/text-field-dialog/text-field-dialog.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
+import type { DialogExportsType } from '../dialog/dialog.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TextFieldDialog: $$__sveltets_2_IsomorphicComponent<{
+    value?: InputValueType;
+    label?: string;
+    name?: string;
+    maxlength?: number;
+    className?: string;
+    autofocus?: boolean;
+    required?: boolean;
+} & DialogExportsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type TextFieldDialog = InstanceType<typeof TextFieldDialog>;
+export default TextFieldDialog;

package/dist/views/core/dialog/components/textarea-field-dialog/textarea-field-dialog.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { showToast } from '../../../../../services';
+	import { TextareaField, TextField } from '../../../input';
+	import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
+	import type { DialogExportsType } from '../dialog/dialog.svelte';
+
+	type PropsType = {
+		value?: InputValueType;
+		label?: string;
+		name?: string;
+		maxlength?: number;
+		className?: string;
+		autofocus?: boolean;
+		required?: boolean;
+	};
+
+	let {
+		value = $bindable(''),
+		label,
+		name,
+		maxlength,
+		className,
+		autofocus,
+		required,
+		setOnOkClick,
+		setResult,
+		closeDialog,
+		...props
+	}: PropsType & DialogExportsType = $props();
+
+	function handleSubmit(ev: SubmitEvent) {
+		ev?.preventDefault();
+		value = ((value as string) || '').trim();
+		if (required && !value) {
+			showToast({ msg: 'This is a required field!' });
+		} else {
+			setResult(value);
+			closeDialog();
+		}
+	}
+</script>
+
+<div class="p-6">
+	<form id="textarea-field-dialog-form" onsubmit={handleSubmit}>
+		<TextareaField
+			{...props}
+			{label}
+			{name}
+			{maxlength}
+			{className}
+			{autofocus}
+			{required}
+			bind:value
+		/>
+	</form>
+</div>

package/dist/views/core/dialog/components/textarea-field-dialog/textarea-field-dialog.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
+import type { DialogExportsType } from '../dialog/dialog.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TextareaFieldDialog: $$__sveltets_2_IsomorphicComponent<{
+    value?: InputValueType;
+    label?: string;
+    name?: string;
+    maxlength?: number;
+    className?: string;
+    autofocus?: boolean;
+    required?: boolean;
+} & DialogExportsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type TextareaFieldDialog = InstanceType<typeof TextareaFieldDialog>;
+export default TextareaFieldDialog;

package/dist/views/core/dialog/index.d.ts

@@ -1,5 +1,4 @@
 import type { DialogExportsType, DialogPropsType, DialogSizeType } from './components/dialog/dialog.svelte';
 import Dialog from './components/dialog/dialog.svelte';
-import MsgDialog from "./components/msg-dialog/msg-dialog.svelte";
-export { Dialog, MsgDialog };
+export { Dialog, };
 export type { DialogExportsType, DialogPropsType, DialogSizeType };

package/dist/views/core/dialog/index.js

@@ -1,3 +1,2 @@
 import Dialog from './components/dialog/dialog.svelte';
-import MsgDialog from "./components/msg-dialog/msg-dialog.svelte";
-export { Dialog, MsgDialog };
+export { Dialog, };

package/dist/views/core/input/components/color-field/color-field.svelte

@@ -85,11 +85,11 @@
 	<InputField
 		{...props}
 		type="text"
-		bind:value
 		bind:this={inputFieldRef}
 		className="pr-8 {props?.className}"
 		rightSnippet={colorButton}
 		maxlength={9}
+		bind:value={value as string}
 	/>
 
 	<input

package/dist/views/core/input/components/date-field/date-field.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
 
-	let props: InputFieldPropsType = $props();
+	let { value = $bindable(null), ...props }: InputFieldPropsType = $props();
 
 	let inputFieldRef: InputField | null = $state(null);
 
@@ -10,4 +10,4 @@
 	}
 </script>
 
-<InputField bind:this={inputFieldRef} {...props} type="date" />
+<InputField bind:this={inputFieldRef} {...props} type="date" bind:value />

package/dist/views/core/input/components/date-field/date-field.svelte.d.ts

@@ -16,6 +16,6 @@ declare const DateField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType,
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, "">;
+}, "value">;
 type DateField = InstanceType<typeof DateField>;
 export default DateField;