@cloudparker/moldex.js 0.0.36 → 0.0.38

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;

package/dist/views/core/input/components/datetime-field/datetime-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(), ...props }: InputFieldPropsType = $props();
 
 	let inputFieldRef: InputField | null = $state(null);
 
@@ -10,4 +10,4 @@
 	}
 </script>
 
-<InputField bind:this={inputFieldRef} {...props} type="datetime-local"  />
+<InputField bind:this={inputFieldRef} {...props} type="datetime-local" bind:value />

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

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

package/dist/views/core/input/components/email-field/email-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(''), ...props }: InputFieldPropsType = $props();
 	let inputFieldRef: InputField | null = $state(null);
 
 	export function focus() {
@@ -9,4 +9,10 @@
 	}
 </script>
 
-<InputField bind:this={inputFieldRef} {...props} type="email" maxlength={props?.maxlength || 80} />
+<InputField
+	bind:this={inputFieldRef}
+	{...props}
+	type="email"
+	maxlength={props?.maxlength || 80}
+	bind:value
+/>

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

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

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

@@ -11,12 +11,12 @@
 		className,
 		accept = '',
 		multiple = false,
-		value,
+		value = $bindable(null),
 		...props
 	}: InputFieldPropsType & {
 		accept?: string;
 		multiple?: boolean;
-		value?: File | File[];
+		value?: File | File[] | null;
 	} = $props();
 
 	let btnRoundedClassName = $state('');

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

@@ -15,11 +15,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const FileField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
     accept?: string;
     multiple?: boolean;
-    value?: File | File[];
+    value?: File | File[] | null;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, "">;
+}, "value">;
 type FileField = InstanceType<typeof FileField>;
 export default FileField;

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

@@ -135,7 +135,7 @@
 		size = 'md',
 		step,
 		type = 'text',
-		value = $bindable('')
+		value = $bindable()
 	}: InputFieldPropsType = $props();
 
 	let inputRef: HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement | null = $state(null);

package/dist/views/core/input/components/number-field/number-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(), ...props }: InputFieldPropsType = $props();
 
 	let inputFieldRef: InputField | null = $state(null);
 
@@ -10,4 +10,4 @@
 	}
 </script>
 
-<InputField bind:this={inputFieldRef} {...props} type="number" />
+<InputField bind:this={inputFieldRef} {...props} type="number" bind:value />

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

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

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

@@ -10,6 +10,7 @@
 		appearance,
 		buttonClassName,
 		iconClassName,
+		value = $bindable(),
 		...props
 	}: InputFieldPropsType & {
 		buttonClassName?: string;
@@ -80,4 +81,5 @@
 	rightSnippet={showPasswordButton}
 	{size}
 	{appearance}
+	bind:value
 />

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

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

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

@@ -19,7 +19,7 @@
 
 	let {
 		id,
-		value = $bindable(50),
+		value = $bindable(0),
 		size = 'md',
 		min = 0,
 		max = 100,

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

@@ -7,10 +7,10 @@
 		className,
 		placeholder,
 		iconClassName,
+value=$bindable(''),
 		onSearch,
 		...props
-	}: InputFieldPropsType & { iconClassName?: string; onSearch?: (value: string) => void } =
-		$props();
+	}: InputFieldPropsType & { iconClassName?: string; onSearch?: (value: string) => void } = $props();
 
 	const debouncedSearch = debounce(search, 300);
 	let lastQuery: string;
@@ -64,4 +64,5 @@
 	className=" pl-12 {className}"
 	{placeholder}
 	oninput={handleInput}
+	bind:value
 />

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

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

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

@@ -1,14 +1,9 @@
 <script lang="ts">
 	import InputField, {
 		type InputFieldPropsType,
-		type InputValueType
 	} from '../input-field/input-field.svelte';
 
-	let {
-		maxlength,
-		value = $bindable<InputValueType>(''),
-		...props
-	}: InputFieldPropsType = $props();
+	let { maxlength, value = $bindable(''), ...props }: InputFieldPropsType = $props();
 	let inputFieldRef: InputField | null = $state(null);
 
 	export function focus() {

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

@@ -14,4 +14,5 @@
 	{...props}
 	type="textarea"
 	maxlength={props?.maxlength || 300}
+	bind:value
 />

package/dist/views/core/input/components/time-field/time-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(), ...props }: InputFieldPropsType = $props();
 	let inputFieldRef: InputField | null = $state(null);
 
 	export function focus() {
@@ -9,4 +9,4 @@
 	}
 </script>
 
-<InputField bind:this={inputFieldRef} {...props} type="time" />
+<InputField bind:this={inputFieldRef} {...props} type="time" bind:value />

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "0.0.36",
+    "version": "0.0.38",
     "author": "cloudparker.com",
     "license": "MIT",
     "keywords": [