@cloudparker/moldex.js 0.0.124 → 4.1.1

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

@@ -1,15 +1,20 @@
-<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 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() {
+		return inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField

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

@@ -1,15 +1,20 @@
-<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 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() {
+		return inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="time" bind:value />

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

@@ -1,42 +1,80 @@
-<script module lang="ts"></script>
+<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';
 
-<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";
-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();
+	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>
 
 <nav

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

@@ -1,22 +1,39 @@
-<script lang="ts">import Icon from "../../../icon/components/icon/icon.svelte";
-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';
+
+	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

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

@@ -1,69 +1,93 @@
-<script lang="ts">import ButtonMenu from "../../../button/components/button-menu/button-menu.svelte";
-import Button from "../../../button/components/button/button.svelte";
-import {
-  mdiChevronDown,
-  mdiChevronLeft,
-  mdiChevronRight,
-  mdiPageFirst,
-  mdiPageLast
-} from "../../../icon";
-let {
-  itemsCount = $bindable(0),
-  pageIndex = $bindable(0),
-  pageSize = $bindable(10),
-  pageSizeOptions = [5, 10, 25, 50, 100, 200],
-  itemsText = "Items",
-  pageSizeText = "Page Size",
-  pageText = "Page",
-  dropPosition = "bottom",
-  disableSizeMenuButton,
-  onPageSizeChange,
-  onPageIndexChange
-} = $props();
-let pageCount = $derived(Math.ceil(itemsCount / pageSize));
-let hasFirst = $derived(pageIndex > 0);
-let hasPrev = $derived(pageIndex > 0);
-let hasLast = $derived(pageIndex < pageCount - 1);
-let hasNext = $derived(pageIndex < pageCount - 1);
-const handlePageSize = (size) => {
-  pageIndex = 0;
-  if (pageSize != size) {
-    pageSize = size;
-    onPageSizeChange?.(pageSize);
-  }
-};
-const handlePage = (type) => {
-  let index = 0;
-  switch (type) {
-    case "first":
-      index = 0;
-      break;
-    case "last":
-      index = pageCount - 1;
-      break;
-    case "next":
-      index = pageIndex;
-      index++;
-      break;
-    case "prev":
-      index = pageIndex;
-      index--;
-      break;
-  }
-  if (index <= 0) index = 0;
-  if (index >= pageCount) index = pageCount - 1;
-  if (pageIndex != index) {
-    pageIndex = index;
-    onPageIndexChange?.(pageIndex);
-  }
-};
-function handlePageSizeMenu(ev, menu) {
-  try {
-    let size = parseInt(menu);
-    handlePageSize(size);
-  } catch (error) {
-  }
-}
+<script lang="ts">
+	import ButtonMenu from '../../../button/components/button-menu/button-menu.svelte';
+	import Button from '../../../button/components/button/button.svelte';
+	import {
+		mdiChevronDown,
+		mdiChevronLeft,
+		mdiChevronRight,
+		mdiPageFirst,
+		mdiPageLast
+	} from '../../../icon';
+
+	type PropsType = {
+		itemsCount?: number;
+		pageIndex?: number;
+		pageSize?: number;
+		pageSizeOptions?: number[];
+		itemsText?: string;
+		pageSizeText?: string;
+		pageText?: string;
+		dropPosition?: 'top' | 'bottom' | 'middle' | undefined;
+		disableSizeMenuButton?: boolean;
+		onPageSizeChange?: (size: number) => void;
+		onPageIndexChange?: (index: number) => void;
+	};
+
+	let {
+		itemsCount = $bindable(0),
+		pageIndex = $bindable(0),
+		pageSize = $bindable(10),
+		pageSizeOptions = [5, 10, 25, 50, 100, 200],
+		itemsText = 'Items',
+		pageSizeText = 'Page Size',
+		pageText = 'Page',
+		dropPosition = 'bottom',
+		disableSizeMenuButton,
+		onPageSizeChange,
+		onPageIndexChange
+	}: PropsType = $props();
+
+	let pageCount: number = $derived(Math.ceil(itemsCount / pageSize));
+
+	let hasFirst: boolean = $derived(pageIndex > 0);
+	let hasPrev: boolean = $derived(pageIndex > 0);
+
+	let hasLast: boolean = $derived(pageIndex < pageCount - 1);
+	let hasNext: boolean = $derived(pageIndex < pageCount - 1);
+
+	const handlePageSize = (size: any) => {
+		pageIndex = 0;
+		if (pageSize != size) {
+			pageSize = size;
+			onPageSizeChange?.(pageSize);
+		}
+	};
+
+	const handlePage = (type?: string) => {
+		// console.log('handlePage');
+		let index = 0;
+		switch (type) {
+			case 'first':
+				index = 0;
+				break;
+			case 'last':
+				index = pageCount - 1;
+				break;
+			case 'next':
+				index = pageIndex;
+				index++;
+				break;
+			case 'prev':
+				index = pageIndex;
+				index--;
+				break;
+		}
+
+		if (index <= 0) index = 0;
+		if (index >= pageCount) index = pageCount - 1;
+
+		if (pageIndex != index) {
+			pageIndex = index;
+			onPageIndexChange?.(pageIndex);
+		}
+	};
+
+	function handlePageSizeMenu(ev: Event, menu: string) {
+		try {
+			let size = parseInt(menu);
+			handlePageSize(size);
+		} catch (error) {}
+	}
 </script>
 
 {#snippet pageButton({ onClick, disabled, icon }: any)}

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

@@ -1,25 +1,39 @@
-<script lang="ts">let {
-  backgroundClassName = "",
-  className = "h-4",
-  value = 0,
-  showValue = false,
-  children
-} = $props();
-let progressValue = $state(0);
-$effect(() => {
-  if (!className) {
-    className = "h-4";
-  }
-});
-$effect(() => {
-  if (value < 0) {
-    progressValue = 0;
-  } else if (value >= 100) {
-    progressValue = 100;
-  } else {
-    progressValue = value;
-  }
-});
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type PropsType = {
+		className?: string;
+		backgroundClassName?: string;
+		value?: number;
+		showValue?: boolean;
+		children?: Snippet;
+	};
+
+	let {
+		backgroundClassName = '',
+		className = 'h-4',
+		value = 0,
+		showValue = false,
+		children
+	}: PropsType = $props();
+
+	let progressValue: number = $state(0);
+
+	$effect(() => {
+		if (!className) {
+			className = 'h-4';
+		}
+	});
+
+	$effect(() => {
+		if (value < 0) {
+			progressValue = 0;
+		} else if (value >= 100) {
+			progressValue = 100;
+		} else {
+			progressValue = value;
+		}
+	});
 </script>
 
 <div class="w-full bg-gray-200 rounded-full progressbar-container {backgroundClassName}" style="">

package/dist/views/core/ruler/components/vertical-ruler/verticcal-ruler.svelte

@@ -1,4 +1,8 @@
-<script lang="ts">let { className = "" } = $props();
+<script lang="ts">
+	type PropsType = {
+		className?: string;
+	};
+	let { className = '' }: PropsType = $props();
 </script>
 
 <div class="h-6 lg:w-px lg:bg-gray-200 {className}" aria-hidden="true"></div>

package/dist/views/core/screen-detector/components/screen-detector.svelte

@@ -1,12 +1,16 @@
-<script lang="ts">import { handleScreenSizeUpdate } from "../../../../services";
-import { BROWSER } from "esm-env";
-let innerWidth = $state(0);
-function screenSizeChanged(size) {
-  handleScreenSizeUpdate(size);
-}
-$effect(() => {
-  BROWSER && screenSizeChanged(innerWidth);
-});
+<script lang="ts">
+	import { handleScreenSizeUpdate } from '../../../../services';
+	import { BROWSER } from 'esm-env';
+
+	let innerWidth: number = $state(0);
+
+	function screenSizeChanged(size: number) {
+		handleScreenSizeUpdate(size);
+	}
+
+	$effect(() => {
+		BROWSER && screenSizeChanged(innerWidth);
+	});
 </script>
 
 <svelte:window bind:innerWidth />

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

@@ -1,26 +1,39 @@
-<script lang="ts">let {
-  children,
-  className,
-  id,
-  responsiveBreakpoint = "md",
-  position = "left"
-} = $props();
-let responsiveClassName = $derived.by(() => {
-  switch (responsiveBreakpoint) {
-    case "xs":
-      return "xs:fixed xs:inset-y-0 xs:flex xs:w-72 xs:flex-col";
-    case "sm":
-      return "sm:fixed sm:inset-y-0 sm:flex sm:w-72 sm:flex-col";
-    case "md":
-      return "md:fixed md:inset-y-0 md:flex md:w-72 md:flex-col";
-    case "lg":
-      return "lg:fixed lg:inset-y-0 lg:flex lg:w-72 lg:flex-col";
-    case "xl":
-      return "xl:fixed xl:inset-y-0 xl:flex xl:w-72 xl:flex-col";
-    case "2xl":
-      return "2xl:fixed 2xl:inset-y-0 2xl:flex 2xl:w-72 2xl:flex-col";
-  }
-});
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+	type PropsType = {
+		children?: Snippet;
+		className?: string;
+		id?: string;
+		responsiveBreakpoint?: BreakpointType;
+		position?: 'left' | 'right';
+	};
+	let {
+		children,
+		className,
+		id,
+		responsiveBreakpoint = 'md',
+		position = 'left'
+	}: PropsType = $props();
+
+	let responsiveClassName = $derived.by(() => {
+		switch (responsiveBreakpoint) {
+			case 'xs':
+				return 'xs:fixed xs:inset-y-0 xs:flex xs:w-72 xs:flex-col';
+			case 'sm':
+				return 'sm:fixed sm:inset-y-0 sm:flex sm:w-72 sm:flex-col';
+			case 'md':
+				return 'md:fixed md:inset-y-0 md:flex md:w-72 md:flex-col';
+			case 'lg':
+				return 'lg:fixed lg:inset-y-0 lg:flex lg:w-72 lg:flex-col';
+			case 'xl':
+				return 'xl:fixed xl:inset-y-0 xl:flex xl:w-72 xl:flex-col';
+			case '2xl':
+				return '2xl:fixed 2xl:inset-y-0 2xl:flex 2xl:w-72 2xl:flex-col';
+		}
+	});
 </script>
 
 <div

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

@@ -1,4 +1,9 @@
-<script lang="ts">let { className = "" } = $props();
+<script lang="ts">
+	type PropsType = {
+		className?: string;
+	};
+
+	let { className = '' }: PropsType = $props();
 </script>
 
 <svg

package/dist/views/core/text/components/text-await/text-await.svelte

@@ -1,4 +1,12 @@
-<script lang="ts">let { input, key, hasTitle, placeholder, emptyText = "-" } = $props();
+<script lang="ts">
+	type PropsType = {
+		input?: Promise<any | null> | undefined;
+		key?: string;
+		hasTitle?: string;
+		placeholder?: string;
+		emptyText?: string;
+	};
+	let { input, key, hasTitle, placeholder, emptyText = '-' }: PropsType = $props();
 </script>
 
 {#if input}

package/dist/views/core/text/components/text-copy/text-copy.svelte

@@ -1,19 +1,30 @@
-<script lang="ts">import Button from "../../../button/components/button/button.svelte";
-import { copyToClipboard, showToast } from "../../../../../services/index.js";
-import { mdiContentCopy } from "../../../icon";
-let {
-  input,
-  containerClassName = "",
-  buttonClassName = "",
-  iconClassName = "",
-  iconPath = mdiContentCopy
-} = $props();
-function handleCopy() {
-  if (input) {
-    copyToClipboard(input);
-    showToast("Copied!");
-  }
-}
+<script lang="ts">
+	import Button from '../../../button/components/button/button.svelte';
+	import {   copyToClipboard, showToast } from '../../../../../services/index.js';
+	import { mdiContentCopy } from '../../../icon';
+
+	type PropsType = {
+		input: string;
+		containerClassName?: string;
+		buttonClassName?: string;
+		iconClassName?: string;
+		iconPath?: string;
+	};
+
+	let {
+		input,
+		containerClassName = '',
+		buttonClassName = '',
+		iconClassName = '',
+		iconPath = mdiContentCopy
+	}: PropsType = $props();
+
+	function handleCopy() {
+		if (input) {
+			copyToClipboard(input);
+			showToast('Copied!');
+		}
+	}
 </script>
 
 <span class="flex items-center {containerClassName}">

package/dist/views/core/text/components/text-currency/text-currency.svelte

@@ -1,5 +1,16 @@
-<script lang="ts">let { input, symbol = "$", hasSymbol = true, empty = "-", decimal = 2 } = $props();
-let value = $derived(Math.abs(input || 0).toFixed(decimal));
+<script lang="ts">
+	import type { CurrencySymbols } from '../../../../../services';
+
+	type Props = {
+		input: number;
+		symbol?: CurrencySymbols | string;
+		hasSymbol?: boolean;
+		empty?: string;
+		decimal?: number;
+	};
+
+	let { input, symbol = '$', hasSymbol = true, empty = '-', decimal = 2 }: Props = $props();
+	let value: string = $derived(Math.abs(input || 0).toFixed(decimal));
 </script>
 
 <span class="text-nowrap">