@cloudparker/moldex.js 0.0.29 → 0.0.31

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

@@ -1,60 +1,72 @@
-<script lang="ts">import { ripple } from "../../../../../actions";
-import { openFilePicker } 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,
-  accept = "",
-  multiple = false,
-  value,
-  ...props
-} = $props();
-let btnRoundedClassName = $state("");
-let btnIconSizeClassName = $state("");
-let fileNameDisplay = $state("");
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-async function handleFileAttachment() {
-  let res = await openFilePicker({ accept, multiple });
-  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 { openFilePicker } from '../../../../../services';
+	import { mdiAttachment } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let {
+		appearance,
+		size,
+		className,
+		accept = '',
+		multiple = false,
+		value,
+		...props
+	}: InputFieldPropsType & {
+		accept?: string;
+		multiple?: boolean;
+		value?: File | File[];
+	} = $props();
+
+	let btnRoundedClassName = $state('');
+	let btnIconSizeClassName = $state('');
+	let fileNameDisplay = $state('');
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	async function handleFileAttachment() {
+		let res: File | File[] = await openFilePicker({ accept, multiple });
+		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()}

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

@@ -1,155 +1,255 @@
-<script module lang="ts"></script>
+<script module lang="ts">
+	export type InputFieldSizeType = 'lg' | 'md' | 'sm' | 'xs';
+	export type InputFieldAppearanceType =
+		| 'normal'
+		| 'box'
+		| 'fill'
+		| 'underline'
+		| 'fill-underline'
+		| 'none';
 
-<script lang="ts">import Label from "../label/label.svelte";
-let {
-  appearance = "normal",
-  ariaControls,
-  ariaExpanded,
-  autofocus = false,
-  className = "",
-  cols,
-  containerClassName = "",
-  contentSnippet,
-  contentSnippetClassName,
-  disabled = false,
-  floatingLabel = false,
-  hasRequiredSymbol = true,
-  id = "",
-  label = "",
-  labelClassName = "",
-  leftSnippet,
-  leftSnippetContainerClassName = "",
-  max,
-  maxlength,
-  min,
-  minlength,
-  multiple = false,
-  name = "",
-  title,
-  onblur,
-  onchange,
-  onclick,
-  ondblclick,
-  ondrag,
-  ondragover,
-  ondrop,
-  onfocus,
-  oninput,
-  onkeydown,
-  onkeypress,
-  onkeyup,
-  onmousedown,
-  onmouseup,
-  pattern = "",
-  placeholder = "",
-  readonly = false,
-  required = false,
-  requiredSymbol = "*",
-  requiredSymbolColor = "red",
-  rightSnippet,
-  rightSnippetContainerClassName = "",
-  role,
-  rows = 5,
-  size = "md",
-  step,
-  type = "text",
-  value = $bindable("")
-} = $props();
-let inputRef = $state(null);
-let sizeClassName = $state("");
-let appearanceClassName = $state("");
-let floatingLabelClassName = $state("");
-let floatingLabelPaddingClassName = $state("");
-let floatingLabelTextClassName = $state("");
-export function focus() {
-  inputRef && inputRef.focus();
-}
-$effect(() => {
-  if (floatingLabel || leftSnippet != null || rightSnippet != null) {
-    containerClassName = (containerClassName || "") + " relative";
-  }
-});
-$effect(() => {
-  if (floatingLabel) {
-    if (size) {
-      let flpcn = "";
-      switch (size) {
-        case "lg":
-          flpcn = ` px-1 peer-focus:px-1 peer-placeholder-shown:px-4 `;
-          floatingLabelTextClassName = "text-base";
-          break;
-        case "md":
-          flpcn = " px-1 peer-focus:px-1 peer-placeholder-shown:px-2.5 ";
-          floatingLabelTextClassName = "text-sm";
-          break;
-        case "sm":
-          flpcn = " px-1 peer-focus:px-1 peer-placeholder-shown:px-2";
-          floatingLabelTextClassName = "text-xs";
-          break;
-        case "xs":
-          flpcn = " px-0 peer-focus:px-0 peer-placeholder-shown:px-1 ";
-          floatingLabelTextClassName = "text-xs";
-          break;
-      }
-      floatingLabelPaddingClassName = flpcn;
-    }
-    floatingLabelClassName = `absolute duration-300 transform top-0 rounded -translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-0 peer-placeholder-shown:start-0 peer-focus:start-1 bg-white peer-placeholder-shown:bg-transparent peer-focus:bg-white start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
-  }
-});
-$effect(() => {
-  if (appearance) {
-    switch (appearance) {
-      case "normal":
-        appearanceClassName = "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 ";
-        break;
-      case "box":
-        appearanceClassName = "bg-gray-50 border border-gray-300 text-gray-900 focus:ring-indigo-500 focus:border-indigo-500   ";
-        break;
-      case "fill":
-        appearanceClassName = "bg-gray-100 border-0 appearance-none focus:bg-gray-200 focus:outline-none focus:ring-0";
-        break;
-      case "underline":
-        appearanceClassName = "bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600";
-        break;
-      case "fill-underline":
-        appearanceClassName = "bg-gray-100 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600";
-        break;
-      case "none":
-        appearanceClassName = "hover:bg-gray-100 focus:bg-gray-100 border-0 focus:outline-none focus:ring-0 appearance-none";
-        break;
-    }
-  }
-});
-$effect(() => {
-  if (size) {
-    switch (size) {
-      case "lg":
-        sizeClassName = "p-4 text-base";
-        break;
-      case "md":
-        sizeClassName = "p-2.5 text-sm";
-        break;
-      case "sm":
-        sizeClassName = "p-2 text-xs";
-        break;
-      case "xs":
-        sizeClassName = "p-1 text-xs";
-        break;
-    }
-  }
-});
-$effect(() => {
-  if (name && !id) {
-    id = name;
-  } else if (id && !name) {
-    name = id;
-  }
-});
-$effect(() => {
-  if (inputRef && autofocus) {
-    inputRef.focus();
-  }
-});
+	export type InputValueType =
+		| string
+		| string[]
+		| number
+		| number[]
+		| Date
+		| Date[]
+		| File
+		| File[]
+		| null
+		| undefined;
+
+	export type InputFieldPropsType = {
+		appearance?: InputFieldAppearanceType;
+		ariaControls?: string;
+		ariaExpanded?: boolean;
+		autofocus?: boolean;
+		className?: string;
+		cols?: number;
+		containerClassName?: string;
+		contentSnippet?: Snippet;
+		contentSnippetClassName?: string;
+		disabled?: boolean;
+		floatingLabel?: boolean;
+		hasRequiredSymbol?: boolean;
+		iconClassName?: string;
+		iconPath?: string;
+		id?: string;
+		label?: string;
+		labelClassName?: string;
+		leftSnippet?: Snippet;
+		leftSnippetContainerClassName?: string;
+		max?: number;
+		maxlength?: number;
+		min?: number;
+		minlength?: number;
+		multiple?: boolean;
+		name?: string;
+		title?: string;
+		onblur?: (ev: any) => void;
+		onchange?: (ev: any) => void;
+		onclick?: (ev: MouseEvent) => void;
+		ondblclick?: (ev: MouseEvent) => void;
+		ondrag?: (ev: DragEvent) => void;
+		ondragover?: (ev: DragEvent) => void;
+		ondrop?: (ev: DragEvent) => void;
+		onfocus?: (ev: any) => void;
+		oninput?: (ev: any) => void;
+		onkeydown?: (ev: KeyboardEvent) => void;
+		onkeypress?: (ev: KeyboardEvent) => void;
+		onkeyup?: (ev: KeyboardEvent) => void;
+		onmousedown?: (ev: MouseEvent) => void;
+		onmouseup?: (ev: MouseEvent) => void;
+		pattern?: string;
+		placeholder?: string;
+		readonly?: boolean;
+		required?: boolean;
+		requiredSymbol?: string;
+		requiredSymbolColor?: string;
+		rightSnippet?: Snippet;
+		rightSnippetContainerClassName?: string;
+		role?: AriaRole;
+		rows?: number;
+		size?: InputFieldSizeType;
+		step?: number;
+		type?: HTMLInputTypeAttribute | 'textarea';
+		value?: InputValueType;
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputTypeAttribute, AriaRole } from 'svelte/elements';
+	import Label from '../label/label.svelte';
+
+	let {
+		appearance = 'normal',
+		ariaControls,
+		ariaExpanded,
+		autofocus = false,
+		className = '',
+		cols,
+		containerClassName = '',
+		contentSnippet,
+		contentSnippetClassName,
+		disabled = false,
+		floatingLabel = false,
+		hasRequiredSymbol = true,
+		id = '',
+		label = '',
+		labelClassName = '',
+		leftSnippet,
+		leftSnippetContainerClassName = '',
+		max,
+		maxlength,
+		min,
+		minlength,
+		multiple = false,
+		name = '',
+		title,
+		onblur,
+		onchange,
+		onclick,
+		ondblclick,
+		ondrag,
+		ondragover,
+		ondrop,
+		onfocus,
+		oninput,
+		onkeydown,
+		onkeypress,
+		onkeyup,
+		onmousedown,
+		onmouseup,
+		pattern = '',
+		placeholder = '',
+		readonly = false,
+		required = false,
+		requiredSymbol = '*',
+		requiredSymbolColor = 'red',
+		rightSnippet,
+		rightSnippetContainerClassName = '',
+		role,
+		rows = 5,
+		size = 'md',
+		step,
+		type = 'text',
+		value = $bindable('')
+	}: InputFieldPropsType = $props();
+
+	let inputRef: HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement | null = $state(null);
+
+	let sizeClassName = $state('');
+	let appearanceClassName = $state('');
+	let floatingLabelClassName = $state('');
+	let floatingLabelPaddingClassName = $state('');
+	let floatingLabelTextClassName = $state('');
+
+	export function focus() {
+		inputRef && inputRef.focus();
+	}
+
+	$effect(() => {
+		if (floatingLabel || leftSnippet != null || rightSnippet != null) {
+			containerClassName = (containerClassName || '') + ' relative';
+		}
+	});
+
+	$effect(() => {
+		if (floatingLabel) {
+			if (size) {
+				let flpcn = '';
+				switch (size) {
+					case 'lg':
+						flpcn = ` px-1 peer-focus:px-1 peer-placeholder-shown:px-4 `;
+						floatingLabelTextClassName = 'text-base';
+						break;
+					case 'md':
+						flpcn = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2.5 ';
+						floatingLabelTextClassName = 'text-sm';
+
+						break;
+					case 'sm':
+						flpcn = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2';
+						floatingLabelTextClassName = 'text-xs';
+						break;
+					case 'xs':
+						flpcn = ' px-0 peer-focus:px-0 peer-placeholder-shown:px-1 ';
+						floatingLabelTextClassName = 'text-xs';
+						break;
+				}
+				floatingLabelPaddingClassName = flpcn;
+			}
+
+			floatingLabelClassName = `absolute duration-300 transform top-0 rounded -translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-0 peer-placeholder-shown:start-0 peer-focus:start-1 bg-white peer-placeholder-shown:bg-transparent peer-focus:bg-white start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
+		}
+	});
+
+	$effect(() => {
+		if (appearance) {
+			switch (appearance) {
+				case 'normal':
+					appearanceClassName =
+						'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 ';
+					break;
+				case 'box':
+					appearanceClassName =
+						'bg-gray-50 border border-gray-300 text-gray-900 focus:ring-indigo-500 focus:border-indigo-500   ';
+					break;
+				case 'fill':
+					appearanceClassName =
+						'bg-gray-100 border-0 appearance-none focus:bg-gray-200 focus:outline-none focus:ring-0';
+					break;
+
+				case 'underline':
+					appearanceClassName =
+						'bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600';
+					break;
+				case 'fill-underline':
+					appearanceClassName =
+						'bg-gray-100 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600';
+					break;
+				case 'none':
+					appearanceClassName =
+						'hover:bg-gray-100 focus:bg-gray-100 border-0 focus:outline-none focus:ring-0 appearance-none';
+					break;
+			}
+		}
+	});
+
+	$effect(() => {
+		if (size) {
+			switch (size) {
+				case 'lg':
+					sizeClassName = 'p-4 text-base';
+					break;
+				case 'md':
+					sizeClassName = 'p-2.5 text-sm';
+					break;
+				case 'sm':
+					sizeClassName = 'p-2 text-xs';
+					break;
+				case 'xs':
+					sizeClassName = 'p-1 text-xs';
+					break;
+			}
+		}
+	});
+
+	$effect(() => {
+		if (name && !id) {
+			id = name;
+		} else if (id && !name) {
+			name = id;
+		}
+	});
+
+	$effect(() => {
+		if (inputRef && autofocus) {
+			inputRef.focus();
+		}
+	});
 </script>
 
 {#snippet labelSnippet()}

package/dist/views/core/input/components/label/label.svelte

@@ -1,13 +1,27 @@
-<script lang="ts">let {
-  forName,
-  label = "",
-  className = "",
-  required = false,
-  requiredSymbolColor = "red",
-  requiredSymbol = "*",
-  hasRequiredSymbol = true,
-  children
-} = $props();
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type PropsType = {
+		forName?: string;
+		label?: string;
+		className?: string;
+		required?: boolean;
+		children?: Snippet;
+		requiredSymbolColor?: string;
+		requiredSymbol?: string;
+		hasRequiredSymbol?: boolean;
+	};
+
+	let {
+		forName,
+		label = '',
+		className = '',
+		required = false,
+		requiredSymbolColor = 'red',
+		requiredSymbol = '*',
+		hasRequiredSymbol = true,
+		children
+	}: PropsType = $props();
 </script>
 
 <label

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

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