@cloudparker/moldex.js 0.0.64 → 0.0.66

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

@@ -1,69 +1,45 @@
-<script lang="ts">
-	import InputField, { type InputFieldSizeType } from '../input-field/input-field.svelte';
-
-	type RangeFieldPropsType = {
-		id?: string;
-		name?: string;
-		className?: string;
-		size?: InputFieldSizeType;
-		value?: number;
-		min?: number;
-		max?: number;
-		step?: number;
-		thumbSize?: string;
-		thumbColor?: string;
-		oninput?: (ev: any) => void;
-		onfocus?: (ev: any) => void;
-		onblur?: (ev: any) => void;
-	};
-
-	let {
-		id,
-		value = $bindable(0),
-		size = 'md',
-		min = 0,
-		max = 100,
-		name,
-		step,
-		className,
-		thumbSize = '16px',
-		oninput,
-		onblur,
-		onfocus
-	}: RangeFieldPropsType = $props();
-
-	let rangeSizeClassName = $state('');
-
-	$effect(() => {
-		switch (size) {
-			case 'lg':
-				rangeSizeClassName = 'h-3 ';
-				break;
-			case 'md':
-				rangeSizeClassName = 'h-2 ';
-				break;
-			case 'sm':
-				rangeSizeClassName = 'h-1 ';
-				break;
-			case 'xs':
-				rangeSizeClassName = 'h-2-px ';
-				break;
-		}
-	});
-
-	let inputRef: HTMLInputElement | null = $state(null);
-
-	export function getElement() {
-		return inputRef;
-	}
-
-	export function focus() {
-		return inputRef && inputRef.focus();
-	}
-
-	export function select() {
-		return inputRef && inputRef.select();
-	}
+<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
+let {
+  id,
+  value = $bindable(0),
+  size = "md",
+  min = 0,
+  max = 100,
+  name,
+  step,
+  className,
+  thumbSize = "16px",
+  oninput,
+  onblur,
+  onfocus
+} = $props();
+let rangeSizeClassName = $state("");
+$effect(() => {
+  switch (size) {
+    case "lg":
+      rangeSizeClassName = "h-3 ";
+      break;
+    case "md":
+      rangeSizeClassName = "h-2 ";
+      break;
+    case "sm":
+      rangeSizeClassName = "h-1 ";
+      break;
+    case "xs":
+      rangeSizeClassName = "h-2-px ";
+      break;
+  }
+});
+let inputRef = $state(null);
+export function getElement() {
+  return inputRef;
+}
+export function focus() {
+  return inputRef && inputRef.focus();
+}
+export function select() {
+  return inputRef && inputRef.select();
+}
 </script>
 
 <input

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

@@ -1,4 +1,4 @@
-import { type InputFieldSizeType } from '../input-field/input-field.svelte';
+import { type InputFieldSize } 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;
@@ -16,7 +16,7 @@ declare const RangeField: $$__sveltets_2_IsomorphicComponent<{
     id?: string;
     name?: string;
     className?: string;
-    size?: InputFieldSizeType;
+    size?: InputFieldSize;
     value?: number;
     min?: number;
     max?: number;

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

@@ -1,65 +1,48 @@
-<script lang="ts">
-	import { mdiMagnify } from '../../../icon';
-	import Icon from '../../../icon/components/icon/icon.svelte';
-	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
-
-	let {
-		className,
-		placeholder,
-		iconClassName,
-		value = $bindable(''),
-		onSearch,
-		...props
-	}: InputFieldPropsType & {
-		iconClassName?: string;
-		onSearch?: (value: string) => void;
-	} = $props();
-
-	const debouncedSearch = debounce(search, 300);
-	let lastQuery: string;
-
-	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: any) {
-		// console.log(ev);
-		let input: HTMLInputElement = ev?.target;
-		if (input) {
-			let searchText = (input.value || '').toLowerCase().trim();
-			debouncedSearch(searchText);
-		}
-	}
-
-	function search(query: string) {
-		if (lastQuery != query) {
-			onSearch && onSearch(query);
-			lastQuery = query;
-		}
-	}
-
-	function debounce<T extends (...args: any[]) => void>(
-		func: T,
-		wait: number
-	): (...args: Parameters<T>) => void {
-		let timeout: ReturnType<typeof setTimeout>;
-
-		return function (...args: Parameters<T>) {
-			clearTimeout(timeout);
-			timeout = setTimeout(() => {
-				func(...args);
-			}, wait);
-		};
-	}
+<script lang="ts">import { mdiMagnify } from "../../../icon";
+import Icon from "../../../icon/components/icon/icon.svelte";
+import InputField, {} from "../input-field/input-field.svelte";
+let {
+  className,
+  placeholder,
+  iconClassName,
+  value = $bindable(""),
+  onSearch,
+  ...props
+} = $props();
+const debouncedSearch = debounce(search, 300);
+let lastQuery;
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+export function getElement() {
+  return inputFieldRef;
+}
+export function select() {
+  inputFieldRef && inputFieldRef.select();
+}
+function handleInput(ev) {
+  let input = ev?.target;
+  if (input) {
+    let searchText = (input.value || "").toLowerCase().trim();
+    debouncedSearch(searchText);
+  }
+}
+function search(query) {
+  if (lastQuery != query) {
+    onSearch && onSearch(query);
+    lastQuery = query;
+  }
+}
+function debounce(func, wait) {
+  let timeout;
+  return function(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+}
 </script>
 
 {#snippet searchIcon()}

package/dist/views/core/input/components/search-field/search-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 SearchField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+declare const SearchField: $$__sveltets_2_IsomorphicComponent<InputFieldProps & {
     iconClassName?: string;
     onSearch?: (value: string) => void;
 }, {

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

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

package/dist/views/core/input/components/text-field/text-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 TextField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+declare const TextField: $$__sveltets_2_IsomorphicComponent<InputFieldProps & {
     value?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;

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

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

package/dist/views/core/input/components/textarea-field/textarea-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 TextareaField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+declare const TextareaField: $$__sveltets_2_IsomorphicComponent<InputFieldProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;

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

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

package/dist/views/core/input/components/time-field/time-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 TimeField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+declare const TimeField: $$__sveltets_2_IsomorphicComponent<InputFieldProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;

package/dist/views/core/input/index.d.ts

@@ -1,5 +1,6 @@
-import { type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType } from "./components/input-field/input-field.svelte";
-import type { RadioDirationType, RadioItemsType, RadioItemType, RadioPositionType, RadioPropsType, RadioValuetype } from "./components/radio-field/radio-field.svelte";
+import { type InputFieldAppearance, type InputFieldProps, type InputFieldSize } from "./components/input-field/input-field.svelte";
+import type { RadioDiration, RadioItems, RadioItem, RadioPosition, RadioPropsType, RadioValuetype } from "./components/radio-field/radio-field.svelte";
+import type { ComboboxFieldProps } from './components/combobox-field/combobox-field.svelte';
 import CheckboxField from "./components/checkbox-field/checkbox-field.svelte";
 import ColorField from "./components/color-field/color-field.svelte";
 import ComboboxField from "./components/combobox-field/combobox-field.svelte";
@@ -18,5 +19,5 @@ import SearchField from "./components/search-field/search-field.svelte";
 import TextField from "./components/text-field/text-field.svelte";
 import TextareaField from "./components/textarea-field/textarea-field.svelte";
 import TimeField from "./components/time-field/time-field.svelte";
-export type { InputFieldAppearanceType, InputFieldPropsType, InputFieldSizeType, RadioDirationType, RadioItemsType, RadioItemType, RadioPositionType, RadioPropsType, RadioValuetype };
+export type { InputFieldAppearance, InputFieldProps, InputFieldSize, RadioDiration, RadioItems, RadioItem, RadioPosition, RadioPropsType, RadioValuetype, ComboboxFieldProps, };
 export { CheckboxField, ColorField, ComboboxField, DateField, DatetimeField, EmailField, FileField, InputField, Label, NumberField, PasswordField, PhoneField, RadioField, RangeField, SearchField, TextareaField, TextField, TimeField };

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

@@ -1,81 +1,43 @@
-<script module lang="ts">
-	export type NavbarProps = {
-		disabledLogo?: boolean;
-		backIconPath?: string;
-		backButtonClassName?: string;
-		centerContainerClassName?: string;
-		centerSnippet?: Snippet<[]>;
-		children?: Snippet;
-		className?: String;
-		drawerButtonClassName?: string;
-		hasBack?: boolean;
-		hasLogo?: boolean;
-		hasMore?: boolean;
-		hasSubtitle?: boolean;
-		hasTitle?: boolean;
-		id?: string;
-		leftContainerClassName?: string;
-		leftSnippet?: Snippet<[]>;
-		logoButtonClassName?: string;
-		logoIconClassName?: string;
-		logoIconPath?: string;
-		logoImgClassName?: string;
-		logoImgSrc?: string;
-		moreIconPath?: string;
-		morePosition?: 'left' | 'right';
-		onLogo?: () => void;
-		onMore?: () => void;
-		onBack?: () => void;
-		rightContainerClassName?: string;
-		rightSnippet?: Snippet<[]>;
-		subtitle?: string;
-		subtitleClassName?: string;
-		title?: string;
-		titleClassName?: string;
-	};
-</script>
-
-<script lang="ts">
-	import ButtonBack from '../../../button/components/button-back/button-back.svelte';
-	import Button from '../../../button/components/button/button.svelte';
-	import { Icon, mdiMenu } from '../../../icon';
-	import type { Snippet } from 'svelte';
-	import '../../../../../tailwind.css';
+<script module lang="ts"></script>
 
-	let {
-		disabledLogo,
-		backButtonClassName,
-		backIconPath,
-		centerContainerClassName = '',
-		centerSnippet,
-		children,
-		className = '',
-		drawerButtonClassName = '',
-		hasBack = false,
-		hasLogo = false,
-		hasMore = false,
-		hasSubtitle = false,
-		hasTitle = false,
-		id = '',
-		leftContainerClassName = '',
-		leftSnippet,
-		logoButtonClassName = '',
-		logoIconClassName = 'text-indigo-600',
-		logoIconPath,
-		logoImgClassName = '',
-		logoImgSrc,
-		moreIconPath = mdiMenu,
-		morePosition = 'left',
-		onLogo,
-		onMore,
-		onBack,
-		rightContainerClassName = '',
-		rightSnippet,
-		subtitle = '',
-		subtitleClassName = '',
-		title = '',
-		titleClassName = ''
-	}: NavbarProps = $props();
+<script lang="ts">import ButtonBack from "../../../button/components/button-back/button-back.svelte";
+import Button from "../../../button/components/button/button.svelte";
+import { Icon, mdiMenu } from "../../../icon";
+import "../../../../../tailwind.css";
+let {
+  disabledLogo,
+  backButtonClassName,
+  backIconPath,
+  centerContainerClassName = "",
+  centerSnippet,
+  children,
+  className = "",
+  drawerButtonClassName = "",
+  hasBack = false,
+  hasLogo = false,
+  hasMore = false,
+  hasSubtitle = false,
+  hasTitle = false,
+  id = "",
+  leftContainerClassName = "",
+  leftSnippet,
+  logoButtonClassName = "",
+  logoIconClassName = "text-indigo-600",
+  logoIconPath,
+  logoImgClassName = "",
+  logoImgSrc,
+  moreIconPath = mdiMenu,
+  morePosition = "left",
+  onLogo,
+  onMore,
+  onBack,
+  rightContainerClassName = "",
+  rightSnippet,
+  subtitle = "",
+  subtitleClassName = "",
+  title = "",
+  titleClassName = ""
+} = $props();
 </script>
 
 <nav

package/dist/views/core/no-data/components/no-data/no-data.svelte

@@ -1,40 +1,23 @@
-<script lang="ts">
-	import Icon from '../../../icon/components/icon/icon.svelte';
-	import type { Snippet } from 'svelte';
-	import '../../../../../tailwind.css';
-
-	type PlacementType = 'top' | 'bottom' | 'left' | 'right';
-
-	type PropsType = {
-		message?: string;
-		className?: string;
-		iconPath?: string;
-		iconClassName?: string;
-		iconPlacement?: PlacementType;
-		children?: Snippet;
-	};
-
-	let {
-		message = 'No data found!',
-		className = '',
-		iconPath = '',
-		iconClassName = '',
-		iconPlacement = 'top',
-		children
-	}: PropsType = $props();
-
-	const iconPlacementClassNameMap: any = {
-		top: 'flex-col',
-		bottom: 'flex-col-reverse',
-		left: 'flex-row',
-		right: 'flex-row-reverse'
-	};
-
-	let iconPlacementClassName: string = $state('');
-
-	$effect(() => {
-		iconPlacementClassName = iconPlacementClassNameMap[iconPlacement];
-	});
+<script lang="ts">import Icon from "../../../icon/components/icon/icon.svelte";
+import "../../../../../tailwind.css";
+let {
+  message = "No data found!",
+  className = "",
+  iconPath = "",
+  iconClassName = "",
+  iconPlacement = "top",
+  children
+} = $props();
+const iconPlacementClassNameMap = {
+  top: "flex-col",
+  bottom: "flex-col-reverse",
+  left: "flex-row",
+  right: "flex-row-reverse"
+};
+let iconPlacementClassName = $state("");
+$effect(() => {
+  iconPlacementClassName = iconPlacementClassNameMap[iconPlacement];
+});
 </script>
 
 <div