@cloudparker/moldex.js 0.0.123 → 4.1.0

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

@@ -1,168 +1,271 @@
-<script module lang="ts"></script>
+<script module lang="ts">
+	export type InputFieldSize = 'lg' | 'md' | 'sm' | 'xs';
+	export type InputFieldAppearance =
+		| '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();
-}
-export function getElement() {
-  return inputRef;
-}
-export function select() {
-  return inputRef && inputRef.select();
-}
-export function getBoundingClientRect() {
-  if (inputRef) {
-    return inputRef.getBoundingClientRect();
-  }
-}
-$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-focus:bg-white dark:bg-base-700 peer-focus:bg-base-800 peer-placeholder-shown:bg-transparent  start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
-  }
-});
-$effect(() => {
-  if (appearance) {
-    switch (appearance) {
-      case "normal":
-        appearanceClassName = "border rounded-lg bg-base-100 dark:bg-base-700 border-base-300 dark:border-base-500 text-base-950 dark:text-base-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-base-50 dark:focus:bg-base-800 ";
-        break;
-      case "box":
-        appearanceClassName = "border bg-base-100 dark:bg-base-700 border-base-300 dark:border-base-500 text-base-950 dark:text-base-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-base-50 dark:focus:bg-base-800 ";
-        break;
-      case "fill":
-        appearanceClassName = " border-0 appearance-none  focus:ring-0 bg-base-100 dark:bg-base-700 text-base-950 dark:text-base-50 focus:bg-base-50 dark:focus:bg-base-800 ";
-        break;
-      case "underline":
-        appearanceClassName = "bg-transparent border-0 border-b-2 appearance-none focus:ring-0 text-base-950 dark:text-base-50 border-base-300 dark:border-base-700 focus:border-primary-500 dark:focus:border-primary-500";
-        break;
-      case "fill-underline":
-        appearanceClassName = "border-0 border-b-2 appearance-none ring-0 text-base-950 dark:text-base-50 bg-base-100 dark:bg-base-700 border-base-300 dark:border-base-500 focus:border-primary-500 dark:focus:border-primary-500 ";
-        break;
-      case "none":
-        appearanceClassName = "border-0 focus:ring-0 appearance-none text-base-950 dark:text-base-50 bg-transparent dark:bg-transparent focus:bg-base-100 dark:focus:bg-base-800 hover:bg-base-100 dark:hover:bg-base-800";
-        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(() => {
-  setTimeout(() => {
-    if (inputRef && autofocus) {
-      inputRef.focus();
-    }
-  }, 10);
-});
+	export type InputValue =
+		| any
+		| string
+		| string[]
+		| number
+		| number[]
+		| Date
+		| Date[]
+		| File
+		| File[]
+		| null
+		| undefined;
+
+	export type InputFieldProps = {
+		appearance?: InputFieldAppearance;
+		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 | string;
+		maxlength?: number;
+		min?: number | string;
+		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?: InputFieldSize;
+		step?: number;
+		type?: HTMLInputTypeAttribute | 'textarea';
+		value?: InputValue;
+	};
+</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()
+	}: InputFieldProps = $props();
+
+	let inputRef: HTMLInputElement | HTMLTextAreaElement | null = $state(null);
+
+	let sizeClassName = $state('');
+	let appearanceClassName = $state('');
+	let floatingLabelClassName = $state('');
+	let floatingLabelPaddingClassName = $state('');
+	let floatingLabelTextClassName = $state('');
+
+	export function focus() {
+		inputRef && inputRef.focus();
+	}
+
+	export function getElement() {
+		return inputRef;
+	}
+
+	export function select() {
+		return inputRef && (inputRef as HTMLInputElement).select();
+	}
+
+	export function getBoundingClientRect() {
+		if (inputRef) {
+			return inputRef.getBoundingClientRect();
+		}
+	}
+
+	$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-focus:bg-white dark:bg-base-700 peer-focus:bg-base-800 peer-placeholder-shown:bg-transparent  start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
+		}
+	});
+
+	$effect(() => {
+		if (appearance) {
+			switch (appearance) {
+				case 'normal':
+					appearanceClassName =
+						'border rounded-lg bg-base-100 dark:bg-base-700 border-base-300 dark:border-base-500 text-base-950 dark:text-base-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-base-50 dark:focus:bg-base-800 ';
+					break;
+				case 'box':
+					appearanceClassName =
+						'border bg-base-100 dark:bg-base-700 border-base-300 dark:border-base-500 text-base-950 dark:text-base-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-base-50 dark:focus:bg-base-800 ';
+					break;
+				case 'fill':
+					appearanceClassName =
+						' border-0 appearance-none  focus:ring-0 bg-base-100 dark:bg-base-700 text-base-950 dark:text-base-50 focus:bg-base-50 dark:focus:bg-base-800 ';
+					break;
+				case 'underline':
+					appearanceClassName =
+						'bg-transparent border-0 border-b-2 appearance-none focus:ring-0 text-base-950 dark:text-base-50 border-base-300 dark:border-base-700 focus:border-primary-500 dark:focus:border-primary-500';
+					break;
+				case 'fill-underline':
+					appearanceClassName =
+						'border-0 border-b-2 appearance-none ring-0 text-base-950 dark:text-base-50 bg-base-100 dark:bg-base-700 border-base-300 dark:border-base-500 focus:border-primary-500 dark:focus:border-primary-500 ';
+					break;
+				case 'none':
+					appearanceClassName =
+						'border-0 focus:ring-0 appearance-none text-base-950 dark:text-base-50 bg-transparent dark:bg-transparent focus:bg-base-100 dark:focus:bg-base-800 hover:bg-base-100 dark:hover:bg-base-800';
+					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(() => {
+		setTimeout(() => {
+			if (inputRef && autofocus) {
+				inputRef.focus();
+			}
+		}, 10);
+	});
 </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,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="number" bind:value />

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

@@ -1,60 +1,73 @@
-<script lang="ts">import { ripple } from "../../../../../actions";
-import { mdiEyeOffOutline, mdiEyeOutline } from "../../../icon";
-import Icon from "../../../icon/components/icon/icon.svelte";
-import InputField, {} from "../input-field/input-field.svelte";
-let {
-  type = "password",
-  size,
-  appearance,
-  buttonClassName,
-  iconClassName,
-  name,
-  id,
-  value = $bindable(),
-  ...props
-} = $props();
-let btnRoundedClassName = $state("");
-let btnIconSizeClassName = $state("");
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-export function getElement() {
-  return inputFieldRef;
-}
-export function select() {
-  inputFieldRef && inputFieldRef.select();
-}
-function handleTogglePassword() {
-  if (type == "password") {
-    type = "text";
-  } else {
-    type = "password";
-  }
-}
-$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 { mdiEyeOffOutline, mdiEyeOutline } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+
+	let {
+		type = 'password',
+		size,
+		appearance,
+		buttonClassName,
+		iconClassName,
+		name,
+		id,
+		value = $bindable(),
+		...props
+	}: InputFieldProps & {
+		buttonClassName?: string;
+		iconClassName?: string;
+	} = $props();
+
+	let btnRoundedClassName = $state('');
+	let btnIconSizeClassName = $state('');
+
+	let inputFieldRef: any | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	export function getElement() {
+		return inputFieldRef;
+	}
+
+	export function select() {
+		inputFieldRef && inputFieldRef.select();
+	}
+
+	function handleTogglePassword() {
+		if (type == 'password') {
+			type = 'text';
+		} else {
+			type = 'password';
+		}
+	}
+
+	$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 showPasswordButton()}