@cloudparker/moldex.js 0.0.124 → 4.1.0

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

@@ -1,28 +1,47 @@
-<script lang="ts">let {
-  className,
-  containerClassName,
-  desc,
-  descClassName,
-  id,
-  label,
-  labelClassName,
-  name,
-  onChange,
-  position = "left",
-  value = $bindable(false)
-} = $props();
-let inputRef = $state(null);
-export function getElement() {
-  return inputRef;
-}
-export function select() {
-  return inputRef && inputRef.select();
-}
-function handleChange(ev) {
-  if (onChange) {
-    onChange(value);
-  }
-}
+<script lang="ts">
+	type CheckboxPropsType = {
+		className?: string;
+		containerClassName?: string;
+		desc?: string;
+		descClassName?: string;
+		id?: string;
+		label?: string;
+		labelClassName?: string;
+		name?: string;
+		onChange?: (value: boolean) => void;
+		position?: 'left' | 'right';
+		value?: boolean;
+	};
+
+	let {
+		className,
+		containerClassName,
+		desc,
+		descClassName,
+		id,
+		label,
+		labelClassName,
+		name,
+		onChange,
+		position = 'left',
+		value = $bindable(false)
+	}: CheckboxPropsType = $props();
+
+	let inputRef: HTMLInputElement | null = $state(null);
+
+	export function getElement() {
+		return inputRef;
+	}
+
+	export function select() {
+		return inputRef && (inputRef as HTMLInputElement).select();
+	}
+
+	function handleChange(ev: Event) {
+		if (onChange) {
+			onChange(value);
+		}
+	}
 </script>
 
 {#snippet labelSnippet()}

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

@@ -1,72 +1,84 @@
-<script lang="ts">import { ripple } from "../../../../../actions";
-import { colorToHex, isValidHexColor } from "../../../../../services";
-import { mdiSquare } from "../../../icon";
-import Icon from "../../../icon/components/icon/icon.svelte";
-import InputField, {} from "../input-field/input-field.svelte";
-let {
-  id,
-  name,
-  size,
-  appearance,
-  value = $bindable("#000000"),
-  ...props
-} = $props();
-let colorRef;
-let btnIconSizeClassName = $state("");
-let btnRoundedClassName = $state("");
-let colorValue = $state("#000000");
-let inputRef = $state(null);
-export function focus() {
-  inputRef?.focus();
-}
-export function getElement() {
-  return inputRef;
-}
-export function select() {
-  return inputRef && inputRef.select();
-}
-function handleColorBtnClick() {
-  if (colorRef) {
-    colorRef.click();
-  }
-}
-function handleColorPickerChange(ev) {
-  let input = ev?.target;
-  if (input) {
-    value = input.value;
-  }
-}
-$effect(() => {
-  if (isValidHexColor(value)) {
-    colorValue = value;
-    if (colorRef) {
-      colorRef.value = colorToHex(value);
-    }
-  }
-});
-$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 { colorToHex, isValidHexColor } from '../../../../../services';
+	import { mdiSquare } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+
+	let {
+		id,
+		name,
+		size,
+		appearance,
+		value = $bindable('#000000'),
+		...props
+	}: InputFieldProps & { value?: string } = $props();
+
+	let colorRef: HTMLInputElement;
+	let btnIconSizeClassName: string = $state('');
+	let btnRoundedClassName: string = $state('');
+	let colorValue: string = $state('#000000');
+
+	let inputRef: any | null = $state(null);
+
+	export function focus() {
+		inputRef?.focus();
+	}
+
+	export function getElement() {
+		return inputRef;
+	}
+
+	export function select() {
+		return inputRef && inputRef.select();
+	}
+
+	function handleColorBtnClick() {
+		if (colorRef) {
+			colorRef.click();
+		}
+	}
+
+	function handleColorPickerChange(ev: any) {
+		let input: HTMLInputElement = ev?.target;
+		if (input) {
+			value = input.value;
+		}
+	}
+
+	$effect(() => {
+		if (isValidHexColor(value)) {
+			colorValue = value;
+			if (colorRef) {
+				colorRef.value = colorToHex(value);
+			}
+		}
+	});
+
+	$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 colorButton()}