@cloudparker/moldex.js 0.0.29 → 0.0.30

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

@@ -1,51 +1,62 @@
-<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,
-  ...props
-} = $props();
-let btnRoundedClassName = $state("");
-let btnIconSizeClassName = $state("");
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-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 InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let {
+		type = 'password',
+		size,
+		appearance,
+		buttonClassName,
+		iconClassName,
+		...props
+	}: InputFieldPropsType & {
+		buttonClassName?: string;
+		iconClassName?: string;
+	} = $props();
+
+	let btnRoundedClassName = $state('');
+	let btnIconSizeClassName = $state('');
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	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()}

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

@@ -1,51 +1,65 @@
-<script lang="ts">import { ripple } from "../../../../../actions";
-import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
-import InputField, {} from "../input-field/input-field.svelte";
-import { isMobileScreen, openListPickerDialog } from "../../../../../services";
-import { DialogSizeEnum } from "../../../dialog";
-let {
-  value,
-  size,
-  appearance,
-  buttonClassName,
-  className,
-  dialCode = $bindable("+1"),
-  ...props
-} = $props();
-let btnRoundedClassName = $state("");
-let EasyCountryData;
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-async function hanleDialCodePicker() {
-  if (EasyCountryData) {
-    let items = EasyCountryData.getCountries();
-    let size2 = isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM;
-    let res = await openListPickerDialog({
-      items,
-      itemTitle: "dialCode",
-      itemSubtitle: "name",
-      size: size2,
-      hasCheck: true,
-      identity: "dialCode"
-    });
-    console.log(res);
-    if (res) {
-      dialCode = res;
-      inputFieldRef && inputFieldRef.focus();
-    }
-  }
-}
-function handleScriptLoad(lib) {
-  console.log(lib);
-  EasyCountryData = lib;
-}
-$effect(() => {
-  if (!appearance || appearance == "normal") {
-    btnRoundedClassName = "rounded-tl-lg rounded-bl-lg";
-  }
-});
+<script lang="ts">
+	import { ripple } from '../../../../../actions';
+	import EasyScriptLoader from '@cloudparker/easy-script-loader-svelte';
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+	import { isMobileScreen, openListPickerDialog } from '../../../../../services';
+	import type { DialogSizeType } from '../../../dialog';
+
+	let {
+		value,
+		size,
+		appearance,
+		buttonClassName,
+		className,
+		dialCode = $bindable('+1'),
+		...props
+	}: InputFieldPropsType & {
+		buttonClassName?: string;
+		dialCode?: string;
+	} = $props();
+
+	let btnRoundedClassName = $state('');
+
+	let EasyCountryData: any;
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	async function hanleDialCodePicker() {
+		if (EasyCountryData) {
+			let items = EasyCountryData.getCountries();
+			// console.log('Countries', items);
+			let size: DialogSizeType = isMobileScreen() ? 'full' : 'sm';
+			let res: string = await openListPickerDialog<string>({
+				items,
+				itemTitle: 'dialCode',
+				itemSubtitle: 'name',
+				size,
+				hasCheck: true,
+				identity: 'dialCode'
+			});
+
+			console.log(res);
+			if (res) {
+				dialCode = res;
+				inputFieldRef && inputFieldRef.focus();
+			}
+		}
+	}
+
+	function handleScriptLoad(lib: any) {
+		console.log(lib);
+		EasyCountryData = lib;
+	}
+
+	$effect(() => {
+		if (!appearance || appearance == 'normal') {
+			btnRoundedClassName = 'rounded-tl-lg rounded-bl-lg';
+		}
+	});
 </script>
 
 {#snippet showPasswordButton()}

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

@@ -1,35 +1,54 @@
-<script lang="ts">import InputField, {
-} from "../input-field/input-field.svelte";
-let {
-  id,
-  value = $bindable(50),
-  size = "md",
-  min = 0,
-  max = 100,
-  name,
-  step,
-  className,
-  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;
-  }
-});
+<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;
+		oninput?: (ev: any) => void;
+		onfocus?: (ev: any) => void;
+		onblur?: (ev: any) => void;
+	};
+
+	let {
+		id,
+		value = $bindable(50),
+		size = 'md',
+		min = 0,
+		max = 100,
+		name,
+		step,
+		className,
+		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;
+		}
+	});
 </script>
 
 <input

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

@@ -1,41 +1,55 @@
-<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,
-  onSearch,
-  ...props
-} = $props();
-const debouncedSearch = debounce(search, 300);
-let lastQuery;
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-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 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,
+		onSearch,
+		...props
+	}: InputFieldPropsType & { iconClassName?: string; onSearch?: (value: string) => void } =
+		$props();
+
+	const debouncedSearch = debounce(search, 300);
+	let lastQuery: string;
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	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>
 
 {#snippet searchIcon()}

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

@@ -1,9 +1,12 @@
-<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
-let { maxlength, ...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 { maxlength, ...props }: InputFieldPropsType = $props();
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="text" maxlength={maxlength || 200} />

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

@@ -1,9 +1,12 @@
-<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="textarea" maxlength={props?.maxlength || 200} />

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

@@ -1,9 +1,12 @@
-<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="time" />

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

@@ -1,34 +1,66 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import Button from "../../../button/components/button/button.svelte";
-import { Icon, mdiMenu } from "../../../icon";
-let {
-  id = "",
-  children,
-  leftSnippet,
-  centerSnippet,
-  rightSnippet,
-  className = "",
-  drawerIconPath = mdiMenu,
-  drawerButtonClassName = "",
-  hasDrawer = false,
-  hasLogo = false,
-  logoButtonClassName = "",
-  logoIconPath,
-  logoIconClassName = "text-indigo-600",
-  logoImgSrc,
-  logoImgClassName = "",
-  leftContainerClassName = "",
-  centerContainerClassName = "",
-  rightContainerClassName = "",
-  title = "",
-  subtitle = "",
-  titleClassName = "",
-  subtitleClassName = "",
-  hasTitle = false,
-  hasSubtitle = false,
-  ondrawer,
-  onlogo
-} = $props();
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	import Button from '../../../button/components/button/button.svelte';
+	import type { Snippet } from 'svelte';
+	import { Icon, mdiMenu } from '../../../icon';
+
+	type PropsType = {
+		id?: string;
+		className?: String;
+		hasDrawer?: boolean;
+		drawerIconPath?: string;
+		drawerButtonClassName?: string;
+		logoButtonClassName?: string;
+		hasLogo?: boolean;
+		logoIconPath?: string;
+		logoIconClassName?: string;
+		logoImgSrc?: string;
+		logoImgClassName?: string;
+		leftContainerClassName?: string;
+		centerContainerClassName?: string;
+		rightContainerClassName?: string;
+		title?: string;
+		subtitle?: string;
+		titleClassName?: string;
+		subtitleClassName?: string;
+		hasTitle?: boolean;
+		hasSubtitle?: boolean;
+		children?: Snippet;
+		leftSnippet?: Snippet;
+		centerSnippet?: Snippet;
+		rightSnippet?: Snippet;
+		ondrawer?: () => void;
+		onlogo?: () => void;
+	};
+
+	let {
+		id = '',
+		children,
+		leftSnippet,
+		centerSnippet,
+		rightSnippet,
+		className = '',
+		drawerIconPath = mdiMenu,
+		drawerButtonClassName = '',
+		hasDrawer = false,
+		hasLogo = false,
+		logoButtonClassName = '',
+		logoIconPath,
+		logoIconClassName = 'text-indigo-600',
+		logoImgSrc,
+		logoImgClassName = '',
+		leftContainerClassName = '',
+		centerContainerClassName = '',
+		rightContainerClassName = '',
+		title = '',
+		subtitle = '',
+		titleClassName = '',
+		subtitleClassName = '',
+		hasTitle = false,
+		hasSubtitle = false,
+		ondrawer,
+		onlogo
+	}: PropsType = $props();
 </script>
 
 <div

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

@@ -1,23 +1,40 @@
-<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 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>
 
 <div