@cloudparker/moldex.js 0.0.124 → 4.1.1

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

@@ -1,33 +1,42 @@
-<script lang="ts">import { dateFormat, toDate } from "../../../../../services";
-import InputField, {} from "../input-field/input-field.svelte";
-let {
-  value = $bindable(null),
-  ...props
-} = $props();
-let _value = $state(void 0);
-$effect(() => {
-  if (value) {
-    _value = dateFormat(toDate(value), "YYYY-MM-DD");
-    console.log("_value", _value);
-  }
-});
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-export function getElement() {
-  return inputFieldRef;
-}
-export function select() {
-  inputFieldRef && inputFieldRef.select();
-}
-function handleInput(ev) {
-  let target = ev?.target;
-  if (target?.value) {
-    value = toDate(target?.value);
-    console.log("handleInput value", value);
-  }
-}
+<script lang="ts">
+	import { dateFormat, toDate } from '../../../../../services';
+	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+
+	let {
+		value = $bindable(null),
+		...props
+	}: InputFieldProps & { value?: Date | string | number | null | undefined } = $props();
+
+	let _value: string | undefined = $state(undefined);
+
+	$effect(() => {
+		if (value) {
+			_value = dateFormat(toDate(value)!, 'YYYY-MM-DD') as string;
+			console.log('_value', _value);
+		}
+	});
+
+	let inputFieldRef: any | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	export function getElement() {
+		return inputFieldRef;
+	}
+
+	export function select() {
+		inputFieldRef && inputFieldRef.select();
+	}
+
+	function handleInput(ev: Event) {
+		let target: HTMLInputElement = ev?.target as HTMLInputElement;
+		if (target?.value) {
+			value = toDate(target?.value) as Date;
+			console.log('handleInput value', value);
+		}
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="date" value={_value} onInput={handleInput} />

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

@@ -1,15 +1,21 @@
-<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
-let { value = $bindable(), ...props } = $props();
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-export function getElement() {
-  return inputFieldRef;
-}
-export function select() {
-  inputFieldRef && inputFieldRef.select();
-}
+<script lang="ts">
+	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+
+	let { value = $bindable(), ...props }: InputFieldProps = $props();
+
+	let inputFieldRef: any | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	export function getElement() {
+		return inputFieldRef;
+	}
+
+	export function select() {
+		inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="datetime-local" bind:value />

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

@@ -1,15 +1,20 @@
-<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
-let { value = $bindable(""), ...props } = $props();
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-export function getElement() {
-  return inputFieldRef;
-}
-export function select() {
-  inputFieldRef && inputFieldRef.select();
-}
+<script lang="ts">
+	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+
+	let { value = $bindable(''), ...props }: InputFieldProps = $props();
+	let inputFieldRef: any | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	export function getElement() {
+		return inputFieldRef;
+	}
+
+	export function select() {
+		inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField

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

@@ -1,67 +1,81 @@
-<script lang="ts">import { ripple } from "../../../../../actions";
-import { openFilePickerDialog } from "../../../../../services";
-import { mdiAttachment } from "../../../icon";
-import Icon from "../../../icon/components/icon/icon.svelte";
-import InputField, {} from "../input-field/input-field.svelte";
-let {
-  appearance,
-  size,
-  className,
-  accepts = "",
-  multiple = false,
-  value = $bindable(null),
-  ...props
-} = $props();
-let btnRoundedClassName = $state("");
-let btnIconSizeClassName = $state("");
-let fileNameDisplay = $state("");
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-export function getElement() {
-  return inputFieldRef;
-}
-export function select() {
-  inputFieldRef && inputFieldRef.select();
-}
-async function handleFileAttachment() {
-  let res = null;
-  res = await openFilePickerDialog(accepts, { multiple: multiple || false });
-  if (res) {
-    value = res;
-    if (multiple) {
-      let files = value;
-      fileNameDisplay = files.map((file) => file.name).join(", ");
-    } else {
-      let file = value;
-      fileNameDisplay = file.name;
-    }
-  }
-}
-$effect(() => {
-  if (size) {
-    switch (size) {
-      case "lg":
-        btnIconSizeClassName = "!h-7 !w-7";
-        break;
-      case "md":
-        btnIconSizeClassName = "!h-6 !w-6";
-        break;
-      case "sm":
-        btnIconSizeClassName = "!h-5 !w-5";
-        break;
-      case "xs":
-        btnIconSizeClassName = "!h-4 !w-4";
-        break;
-    }
-  }
-});
-$effect(() => {
-  if (!appearance || appearance == "normal") {
-    btnRoundedClassName = "rounded-tr-lg rounded-br-lg";
-  }
-});
+<script lang="ts">
+	import { ripple } from '../../../../../actions';
+	import { openFilePickerDialog } from '../../../../../services';
+	import { mdiAttachment } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+
+	let {
+		appearance,
+		size,
+		className,
+		accepts = '',
+		multiple = false,
+		value = $bindable(null),
+		...props
+	}: InputFieldProps & {
+		accepts?: string;
+		multiple?: boolean;
+		value?: File | File[] | null;
+	} = $props();
+
+	let btnRoundedClassName = $state('');
+	let btnIconSizeClassName = $state('');
+	let fileNameDisplay = $state('');
+
+	let inputFieldRef: any | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	export function getElement() {
+		return inputFieldRef;
+	}
+
+	export function select() {
+		inputFieldRef && inputFieldRef.select();
+	}
+
+	async function handleFileAttachment<T extends File | File[]>() {
+		let res: File | File[] | null = null;
+		res = await openFilePickerDialog<T>(accepts, { multiple: multiple || false });
+		if (res) {
+			value = res;
+			if (multiple) {
+				let files: File[] = value as File[];
+				fileNameDisplay = files.map((file) => file.name).join(', ');
+			} else {
+				let file: File = value as File;
+				fileNameDisplay = file.name;
+			}
+		}
+	}
+
+	$effect(() => {
+		if (size) {
+			switch (size) {
+				case 'lg':
+					btnIconSizeClassName = '!h-7 !w-7';
+					break;
+				case 'md':
+					btnIconSizeClassName = '!h-6 !w-6';
+					break;
+				case 'sm':
+					btnIconSizeClassName = '!h-5 !w-5';
+					break;
+				case 'xs':
+					btnIconSizeClassName = '!h-4 !w-4';
+					break;
+			}
+		}
+	});
+
+	$effect(() => {
+		if (!appearance || appearance == 'normal') {
+			btnRoundedClassName = 'rounded-tr-lg rounded-br-lg';
+		}
+	});
 </script>
 
 {#snippet fileButton()}