@cloudparker/moldex.js 0.0.123 → 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

@@ -0,0 +1,70 @@
+<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);
+	}
+
+	// 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
+	{id}
+	type="button"
+	{disabled}
+	onclick={toggle}
+	aria-label="Switch"
+	class="relative inline-flex items-center rounded-full transition-colors duration-300
+		{checked ? 'bg-primary-600' : 'bg-base-300'} 
+		{disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} 
+		{sizeClass.wrapper} {className}"
+>
+	<span
+		class="inline-block rounded-full bg-white shadow transform transition-transform duration-300
+			{sizeClass.circle} {checked ? sizeClass.circleChecked : ''}"
+	>
+	</span>
+</button>

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

@@ -0,0 +1,11 @@
+export type SwitchProps = {
+    id?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+    onChange?: (checked: boolean) => void;
+};
+declare const Switch: import("svelte").Component<SwitchProps, {}, "">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

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

@@ -7,8 +7,10 @@ import ButtonOk from './components/button-ok/button-ok.svelte';
 import Button from './components/button/button.svelte';
 import ButtonSearch from './components/button-search/button-search.svelte';
 import ButtonMenu from './components/button-menu/button-menu.svelte';
+import Switch from './components/switch/switch.svelte';
 import type { ButtonListItemProps } from './components/button-list-item/button-list-item.svelte';
 import type { ButtonDropdownProps } from './components/button-dropdown/button-dropdown.svelte';
 import type { ButtonAppearance, ButtonProps, ButtonSize } from './components/button/button.svelte';
-export type { ButtonDropdownProps, ButtonListItemProps, ButtonAppearance, ButtonProps, ButtonSize };
-export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonDropdown, ButtonOk, ButtonSearch, ButtonMenu, };
+import type { SwitchProps } from './components/switch/switch.svelte';
+export type { ButtonDropdownProps, ButtonListItemProps, ButtonAppearance, ButtonProps, ButtonSize, SwitchProps, };
+export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonDropdown, ButtonOk, ButtonSearch, ButtonMenu, Switch };

package/dist/views/core/button/index.js

@@ -7,4 +7,5 @@ import ButtonOk from './components/button-ok/button-ok.svelte';
 import Button from './components/button/button.svelte';
 import ButtonSearch from './components/button-search/button-search.svelte';
 import ButtonMenu from './components/button-menu/button-menu.svelte';
-export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonDropdown, ButtonOk, ButtonSearch, ButtonMenu, };
+import Switch from './components/switch/switch.svelte';
+export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonDropdown, ButtonOk, ButtonSearch, ButtonMenu, Switch };

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