@cloudparker/moldex.js 0.0.64 → 0.0.66

package/dist/views/core/icon/components/icon/icon.svelte

@@ -1,29 +1,17 @@
-<script lang="ts">
-	import ColorField from '../../../input/components/color-field/color-field.svelte';
-	import '../../../../../tailwind.css';
-	type IconPropsType = {
-		path: string;
-		className?: string;
-		sizeClassName?: string;
-		size?: number;
-		fill?: string;
-		viewBox?: string;
-		color?: string;
-	};
-
-	let {
-		path,
-		className = '',
-		size = 24,
-		fill = 'currentColor',
-		viewBox = '',
-		color,
-		sizeClassName = 'w-6 h-6'
-	}: IconPropsType = $props();
-
-	$effect(() => {
-		viewBox = viewBox || `0 0 ${size} ${size}`;
-	});
+<script lang="ts">import ColorField from "../../../input/components/color-field/color-field.svelte";
+import "../../../../../tailwind.css";
+let {
+  path,
+  className = "",
+  size = 24,
+  fill = "currentColor",
+  viewBox = "",
+  color,
+  sizeClassName = "w-6 h-6"
+} = $props();
+$effect(() => {
+  viewBox = viewBox || `0 0 ${size} ${size}`;
+});
 </script>
 
 <svg class="align-middle {sizeClassName} {className}" {viewBox} fill={color || fill}>

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

@@ -1,47 +1,28 @@
-<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 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>
 
 {#snippet labelSnippet()}

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

@@ -1,84 +1,72 @@
-<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 InputFieldPropsType } from '../input-field/input-field.svelte';
-
-	let {
-		id,
-		name,
-		size,
-		appearance,
-		value = $bindable('#000000'),
-		...props
-	}: InputFieldPropsType & { 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 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>
 
 {#snippet colorButton()}

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

@@ -1,4 +1,4 @@
-import { type InputFieldPropsType } from '../input-field/input-field.svelte';
+import { type InputFieldProps } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ColorField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+declare const ColorField: $$__sveltets_2_IsomorphicComponent<InputFieldProps & {
     value?: string;
 }, {
     [evt: string]: CustomEvent<any>;