@cloudparker/moldex.js 0.0.124 → 4.1.0

package/dist/views/core/button/components/button-list-item/button-list-item.svelte

@@ -1,56 +1,102 @@
-<script module lang="ts"></script>
+<script module lang="ts">
+	export type ButtonListItemProps = {
+		appearance?: ButtonAppearance;
+		size?: ButtonSize;
+		index?: number;
+		id?: string;
+		className?: string;
+		checkboxIconPath?: string;
+		uncheckboxIconPath?: string;
+		checkboxIconClassName?: string;
+		uncheckboxIconClassName?: string;
+		hasIcon?: boolean;
+		iconClassName?: string;
+		hasImg?: boolean;
+		imgClassName?: string;
+		hasArrow?: boolean;
+		arrowIconPath?: string;
+		arrowClassName?: string;
+		title?: string;
+		subtitle?: string;
+		titleClassName?: string;
+		subtitleClassName?: string;
+		url?: string;
+		disabled?: boolean;
+		iconPath?: string;
+		isCircularIcon?: boolean;
+		circularIconClassName?: string;
+		imgSrc?: string;
+		hasCheckbox?: boolean;
+		checkboxClassName?: string;
+		isChecked?: boolean;
+		hasMenu?: boolean;
+		menus?: Menu[] | string[];
+		menuIconPath?: string;
+		menuIconClassName?: string;
+		menuButtonClassName?: string;
+		menuButtonLabel?: string;
+		hasDivider?: boolean;
+		dividerClassName?: string;
+		onMenu?: (ev: Event, menu: Menu | string) => void;
+		onClick?: (ev: MouseEvent) => void;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import {
+		Icon,
+		mdiCheckCircle,
+		mdiCheckCircleOutline,
+		mdiChevronRight
+	} from '../../../icon';
+	import type { Snippet } from 'svelte';
+	import Button, { type ButtonAppearance, type ButtonSize } from '../button/button.svelte';
+	import type { Menu } from '../button-menu/button-menu.svelte';
+	import ButtonMenu from '../button-menu/button-menu.svelte';
+	import IconCircle from '../../../icon/components/icon-circle/icon-circle.svelte';
 
-<script lang="ts">import {
-  Icon,
-  mdiCheckCircle,
-  mdiCheckCircleOutline,
-  mdiChevronRight
-} from "../../../icon";
-import Button, {} from "../button/button.svelte";
-import ButtonMenu from "../button-menu/button-menu.svelte";
-import IconCircle from "../../../icon/components/icon-circle/icon-circle.svelte";
-let {
-  appearance,
-  size,
-  index,
-  id = "",
-  className,
-  checkboxIconPath = mdiCheckCircle,
-  uncheckboxIconPath = mdiCheckCircleOutline,
-  checkboxIconClassName = "",
-  uncheckboxIconClassName = "",
-  hasIcon = false,
-  iconClassName = "",
-  hasImg = false,
-  imgClassName = "",
-  iconPath,
-  isCircularIcon,
-  circularIconClassName = "",
-  imgSrc,
-  hasArrow = false,
-  arrowIconPath = mdiChevronRight,
-  arrowClassName = "",
-  title = "",
-  subtitle = "",
-  titleClassName = "",
-  subtitleClassName = "",
-  disabled = false,
-  hasCheckbox,
-  checkboxClassName = "",
-  isChecked = false,
-  hasMenu,
-  menus,
-  menuIconPath,
-  menuIconClassName,
-  menuButtonClassName,
-  menuButtonLabel,
-  hasDivider,
-  dividerClassName,
-  onMenu,
-  onClick = (ev) => {
-  },
-  children
-} = $props();
+	let {
+		appearance,
+		size,
+		index,
+		id = '',
+		className,
+		checkboxIconPath = mdiCheckCircle,
+		uncheckboxIconPath = mdiCheckCircleOutline,
+		checkboxIconClassName = '',
+		uncheckboxIconClassName = '',
+		hasIcon = false,
+		iconClassName = '',
+		hasImg = false,
+		imgClassName = '',
+		iconPath,
+		isCircularIcon,
+		circularIconClassName = '',
+		imgSrc,
+		hasArrow = false,
+		arrowIconPath = mdiChevronRight,
+		arrowClassName = '',
+		title = '',
+		subtitle = '',
+		titleClassName = '',
+		subtitleClassName = '',
+		disabled = false,
+		hasCheckbox,
+		checkboxClassName = '',
+		isChecked = false,
+		hasMenu,
+		menus,
+		menuIconPath,
+		menuIconClassName,
+		menuButtonClassName,
+		menuButtonLabel,
+		hasDivider,
+		dividerClassName,
+		onMenu,
+		onClick = (ev: MouseEvent) => {},
+		children
+	}: ButtonListItemProps = $props();
 </script>
 
 {#snippet itemInternal()}

package/dist/views/core/button/components/button-menu/button-menu.svelte

@@ -1,47 +1,83 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+	export type Menu = {
+		_id?: string;
+		title?: string;
+		subtitle?: string;
+		hasIcon?: boolean;
+		iconPath?: string;
+		iconClassName?: string;
+		hasCheckbox?: boolean;
+		checkboxClassName?: string;
+		isChecked?: boolean;
+	};
+</script>
+
+<script lang="ts">
+	import {
+		mdiDotsHorizontal,
+		type ButtonAppearance,
+		type ButtonProps,
+		type ButtonSize
+	} from '../../../../..';
+	import ButtonDropdown, {
+		type ButtonDropdownProps
+	} from '../button-dropdown/button-dropdown.svelte';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import type { Snippet } from 'svelte';
+	import ButtonListItem from '../button-list-item/button-list-item.svelte';
+	type Props = {
+		label?: string;
+		className?: string;
+		appearance?: ButtonAppearance;
+		size?: ButtonSize;
+		children?: Snippet;
+		iconPath?: string;
+		iconClassName?: string;
+		menus?: string[] | Menu[];
+		onMenu?: (ev: MouseEvent, menu: string | Menu) => void;
+		dropdownClassName?: string;
+		menuIconClassName?: string;
+		disabled?: boolean;
+	};
+
+	let {
+		label,
+		className,
+		appearance,
+		size,
+		children,
+		iconPath = mdiDotsHorizontal,
+		iconClassName,
+		menus,
+		onMenu,
+		dropdownClassName,
+		menuIconClassName,
+		disabled,
+		...others
+	}: ButtonDropdownProps & ButtonProps & Props = $props();
+
+	let buttonDropdownRef: ButtonDropdown;
+
+	let items: Menu[] = $derived.by(() => {
+		if (menus && typeof menus[0] == 'string') {
+			let array = (menus as string[]).map((name: string) => {
+				return {
+					_id: name,
+					title: name
+				} as Menu;
+			});
+			return array;
+		}
+		return (menus || []) as Menu[];
+	});
 
-<script lang="ts">import {
-  mdiDotsHorizontal
-} from "../../../../..";
-import ButtonDropdown, {
-} from "../button-dropdown/button-dropdown.svelte";
-import Icon from "../../../icon/components/icon/icon.svelte";
-import ButtonListItem from "../button-list-item/button-list-item.svelte";
-let {
-  label,
-  className,
-  appearance,
-  size,
-  children,
-  iconPath = mdiDotsHorizontal,
-  iconClassName,
-  menus,
-  onMenu,
-  dropdownClassName,
-  menuIconClassName,
-  disabled,
-  ...others
-} = $props();
-let buttonDropdownRef;
-let items = $derived.by(() => {
-  if (menus && typeof menus[0] == "string") {
-    let array = menus.map((name) => {
-      return {
-        _id: name,
-        title: name
-      };
-    });
-    return array;
-  }
-  return menus || [];
-});
-function handleItemClick(ev, menuItem, index) {
-  let menu = (menus || [])[index];
-  if (menu) {
-    onMenu && onMenu(ev, menu);
-    buttonDropdownRef && buttonDropdownRef.toggleDropdown(ev);
-  }
-}
+	function handleItemClick(ev: MouseEvent, menuItem: Menu, index: number) {
+		let menu = (menus || [])[index];
+		if (menu) {
+			onMenu && onMenu(ev, menu);
+			buttonDropdownRef && buttonDropdownRef.toggleDropdown(ev);
+		}
+	}
 </script>
 
 {#snippet dropdownView()}

package/dist/views/core/button/components/button-ok/button-ok.svelte

@@ -1,5 +1,7 @@
-<script lang="ts">import Button, {} from "../button/button.svelte";
-let { className, ...props } = $props();
+<script lang="ts">
+	import Button, { type ButtonProps } from '../button/button.svelte';
+
+	let { className, ...props }: ButtonProps = $props();
 </script>
 
 <Button {...props} className="bg-indigo-600 focus:bg-indigo-700 text-white p-2 px-4 {className}" />

package/dist/views/core/button/components/button-search/button-search.svelte

@@ -1,24 +1,48 @@
-<script lang="ts">import {
-  mdiMagnify
-} from "../../../../..";
-import ButtonDropdown from "../button-dropdown/button-dropdown.svelte";
-import Icon from "../../../icon/components/icon/icon.svelte";
-import SearchField from "../../../input/components/search-field/search-field.svelte";
-let {
-  searchText = $bindable(""),
-  searchClassName,
-  searchAppearance,
-  searchSize,
-  onSearch,
-  className,
-  appearance,
-  size,
-  children,
-  iconClassName,
-  dropdownClassName,
-  placeholder,
-  ...others
-} = $props();
+<script lang="ts">
+	import {
+		mdiMagnify,
+		type ButtonAppearance,
+		type ButtonProps,
+		type ButtonSize,
+		type InputFieldAppearance,
+		type InputFieldSize
+	} from '../../../../..';
+	import ButtonDropdown from '../button-dropdown/button-dropdown.svelte';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import SearchField from '../../../input/components/search-field/search-field.svelte';
+	import type { Snippet } from 'svelte';
+	type Props = {
+		searchAppearance?: InputFieldAppearance;
+		searchClassName?: string;
+		searchSize?: InputFieldSize;
+		onSearch?: (searchText: string) => void;
+
+		className?: string;
+		appearance?: ButtonAppearance;
+		size?: ButtonSize;
+		children?: Snippet;
+		iconClassName?: string;
+
+		dropdownClassName?: string;
+		searchText?: string;
+		placeholder?: string;
+	};
+
+	let {
+		searchText = $bindable(''),
+		searchClassName,
+		searchAppearance,
+		searchSize,
+		onSearch,
+		className,
+		appearance,
+		size,
+		children,
+		iconClassName,
+		dropdownClassName,
+		placeholder,
+		...others
+	}: ButtonProps & Props = $props();
 </script>
 
 {#snippet dropdownSearch()}

package/dist/views/core/button/components/switch/switch.svelte

@@ -1,41 +1,54 @@
-<script module lang="ts"></script>
+<script module lang="ts">
+	export type SwitchProps = {
+		id?: string;
+		checked?: boolean;
+		disabled?: boolean;
+		className?: string;
+		size?: 'sm' | 'md' | 'lg';
+		onChange?: (checked: boolean) => void;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		id = '',
+		checked = false,
+		disabled = false,
+		className = '',
+		size = 'md',
+		onChange
+	}: SwitchProps = $props();
+
+	function toggle() {
+		if (disabled) return;
+		checked = !checked;
+		onChange?.(checked);
+	}
 
-<script lang="ts">let {
-  id = "",
-  checked = false,
-  disabled = false,
-  className = "",
-  size = "md",
-  onChange
-} = $props();
-function toggle() {
-  if (disabled) return;
-  checked = !checked;
-  onChange?.(checked);
-}
-let sizeClass = $derived.by(() => {
-  switch (size) {
-    case "sm":
-      return {
-        wrapper: "h-4 w-8",
-        circle: "h-3 w-3 translate-x-1",
-        circleChecked: "translate-x-5"
-      };
-    case "lg":
-      return {
-        wrapper: "h-8 w-16",
-        circle: "h-6 w-6 translate-x-1",
-        circleChecked: "translate-x-8"
-      };
-    case "md":
-    default:
-      return {
-        wrapper: "h-6 w-11",
-        circle: "h-4 w-4 translate-x-1",
-        circleChecked: "translate-x-6"
-      };
-  }
-});
+	// Size mapping
+	let sizeClass = $derived.by(() => {
+		switch (size) {
+			case 'sm':
+				return {
+					wrapper: 'h-4 w-8',
+					circle: 'h-3 w-3 translate-x-1',
+					circleChecked: 'translate-x-5'
+				};
+			case 'lg':
+				return {
+					wrapper: 'h-8 w-16',
+					circle: 'h-6 w-6 translate-x-1',
+					circleChecked: 'translate-x-8'
+				};
+			case 'md':
+			default:
+				return {
+					wrapper: 'h-6 w-11',
+					circle: 'h-4 w-4 translate-x-1',
+					circleChecked: 'translate-x-6'
+				};
+		}
+	});
 </script>
 
 <button

package/dist/views/core/common/components/content-area/content-area.svelte

@@ -1,30 +1,43 @@
-<script lang="ts">let {
-  children,
-  className,
-  id,
-  responsiveBreakpoint = "md",
-  sidebarPosition = "none"
-} = $props();
-let responsiveClassName = $derived.by(() => {
-  if (sidebarPosition === "none") {
-    return "";
-  } else {
-    switch (responsiveBreakpoint) {
-      case "xs":
-        return sidebarPosition === "left" ? "xs:pl-72" : "xs:pr-72";
-      case "sm":
-        return sidebarPosition === "left" ? "sm:pl-72" : "sm:pr-72";
-      case "md":
-        return sidebarPosition === "left" ? "md:pl-72" : "md:pr-72";
-      case "lg":
-        return sidebarPosition === "left" ? "lg:pl-72" : "lg:pr-72";
-      case "xl":
-        return sidebarPosition === "left" ? "xl:pl-72" : "xl:pr-72";
-      case "2xl":
-        return sidebarPosition === "left" ? "2xl:pl-72" : "2xl:pr-72";
-    }
-  }
-});
+<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;
+		sidebarPosition?: 'none' | 'left' | 'right';
+	};
+	let {
+		children,
+		className,
+		id,
+		responsiveBreakpoint = 'md',
+		sidebarPosition = 'none'
+	}: PropsType = $props();
+
+	let responsiveClassName = $derived.by(() => {
+		if (sidebarPosition === 'none') {
+			return '';
+		} else {
+			switch (responsiveBreakpoint) {
+				case 'xs':
+					return sidebarPosition === 'left' ? 'xs:pl-72' : 'xs:pr-72';
+				case 'sm':
+					return sidebarPosition === 'left' ? 'sm:pl-72' : 'sm:pr-72';
+				case 'md':
+					return sidebarPosition === 'left' ? 'md:pl-72' : 'md:pr-72';
+				case 'lg':
+					return sidebarPosition === 'left' ? 'lg:pl-72' : 'lg:pr-72';
+				case 'xl':
+					return sidebarPosition === 'left' ? 'xl:pl-72' : 'xl:pr-72';
+				case '2xl':
+					return sidebarPosition === 'left' ? '2xl:pl-72' : '2xl:pr-72';
+			}
+		}
+	});
 </script>
 
 <div {id} class="{responsiveClassName} {className}">

package/dist/views/core/common/components/loading/loading.svelte

@@ -1,5 +1,12 @@
-<script lang="ts">import Spinner from "../../../spinner/components/spinner/spinner.svelte";
-let { className = "", spinnerClassName = "text-primary" } = $props();
+<script lang="ts">
+	import Spinner from '../../../spinner/components/spinner/spinner.svelte';
+
+	type Props = {
+		spinnerClassName?: string;
+		className?: string;
+	};
+
+	let { className = '', spinnerClassName = 'text-primary' }: Props = $props();
 </script>
 
 <div class="flex items-center justify-center p-6 {className}">

package/dist/views/core/common/components/virtual-scrolling/virtual-scrolling-list.svelte

@@ -1,23 +1,40 @@
-<script lang="ts">let {
-  items = [],
-  itemHeight,
-  containerHeight,
-  buffer = 2,
-  itemSnippet,
-  ...rest
-} = $props();
-let scrollTop = $state(0);
-let totalHeight = $derived.by(() => items.length * itemHeight);
-let visibleStart = $derived.by(() => Math.max(Math.floor(scrollTop / itemHeight) - buffer, 0));
-let visibleEnd = $derived.by(
-  () => Math.min(Math.ceil((scrollTop + containerHeight) / itemHeight) + buffer, items.length)
-);
-let paddingTop = $derived.by(() => visibleStart * itemHeight);
-let paddingBottom = $derived.by(() => (items.length - visibleEnd) * itemHeight);
-let visibleItems = $derived.by(() => items.slice(visibleStart, visibleEnd));
-function handleScroll(event) {
-  scrollTop = event.currentTarget.scrollTop;
-}
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		items: any[];
+		itemHeight: number;
+		containerHeight: number;
+		itemSnippet: Snippet<[item: any, index: number]>;
+		buffer?: number;
+	};
+
+	let {
+		items = [],
+		itemHeight,
+		containerHeight,
+		buffer = 2,
+		itemSnippet,
+		...rest
+	}: Props = $props();
+
+	let scrollTop = $state(0);
+
+	let totalHeight = $derived.by(() => items.length * itemHeight);
+
+	let visibleStart = $derived.by(() => Math.max(Math.floor(scrollTop / itemHeight) - buffer, 0));
+	let visibleEnd = $derived.by(() =>
+		Math.min(Math.ceil((scrollTop + containerHeight) / itemHeight) + buffer, items.length)
+	);
+
+	let paddingTop = $derived.by(() => visibleStart * itemHeight);
+	let paddingBottom = $derived.by(() => (items.length - visibleEnd) * itemHeight);
+
+	let visibleItems = $derived.by(() => items.slice(visibleStart, visibleEnd));
+
+	function handleScroll(event: Event) {
+		scrollTop = (event.currentTarget as HTMLElement).scrollTop;
+	}
 </script>
 
 <div