@cloudparker/moldex.js 0.0.29 → 0.0.30

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

@@ -1,37 +1,58 @@
-<script module lang="ts"></script>
+<script module lang="ts">
+	export type ButtonPropsType = {
+		id?: string;
+		type?: 'button' | 'submit' | 'reset';
+		form?: string | null;
+		className?: string;
+		iconPath?: string;
+		iconClassName?: string;
+		label?: string;
+		rightIconPath?: string;
+		rightIconClassName?: string;
+		spinner?: boolean;
+		disabled?: boolean;
+		spinnerClassName?: string;
+		onlySpinner?: boolean;
+		children?: Snippet;
+		useRipple?: boolean;
+		onClick?: (ev: MouseEvent) => void;
+	};
+</script>
+
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	import { ripple, type RipplePropsType } from '../../../../../actions/ripple.js';
+	import type { Snippet } from 'svelte';
+	import { Spinner } from '../../../spinner';
+	import { Icon } from '../../../icon';
+
+	let {
+		id = '',
+		form = undefined,
+		type = 'button',
+		label = '',
+		className = '',
+		iconPath = '',
+		iconClassName = '',
+		rightIconPath = '',
+		rightIconClassName = '',
+		spinner = false,
+		disabled = false,
+		spinnerClassName = '',
+		onlySpinner = false,
+		children,
+		useRipple = true,
+		onClick = (ev: MouseEvent) => {}
+	}: ButtonPropsType = $props();
 
-<script lang="ts">import "../../../../../tailwind.css";
-import { ripple } from "../../../../../actions/ripple.js";
-import { Spinner } from "../../../spinner";
-import { Icon } from "../../../icon";
-let {
-  id = "",
-  form = void 0,
-  type = "button",
-  label = "",
-  className = "",
-  iconPath = "",
-  iconClassName = "",
-  rightIconPath = "",
-  rightIconClassName = "",
-  spinner = false,
-  disabled = false,
-  spinnerClassName = "",
-  onlySpinner = false,
-  children,
-  useRipple = true,
-  onClick = (ev) => {
-  }
-} = $props();
-function maybeRipple(node, options) {
-  if (useRipple) {
-    return ripple(node, options);
-  }
-  return {
-    destroy() {
-    }
-  };
-}
+	function maybeRipple(node: HTMLElement, options?: RipplePropsType) {
+		if (useRipple) {
+			return ripple(node, options);
+		}
+		return {
+			destroy() {}
+		};
+	}
 </script>
 
 {#snippet buttonContent()}

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

@@ -1,17 +1,29 @@
-<script lang="ts">import { isSmallScreen } from "../../../../../services";
-import { mdiArrowLeft, mdiChevronRight } from "../../../icon";
-import Button from "../button/button.svelte";
-let {
-  iconPath = mdiArrowLeft,
-  iconClassName = "",
-  className = "",
-  onlyMobile,
-  onClick
-} = $props();
-let isMobileScreen = $state(false);
-$effect(() => {
-  isMobileScreen = isSmallScreen();
-});
+<script lang="ts">
+	import { isSmallScreen } from '../../../../../services';
+	import { mdiArrowLeft, mdiChevronRight } from '../../../icon';
+	import Button from '../button/button.svelte';
+
+	type PropsType = {
+		iconPath?: string;
+		iconClassName?: string;
+		className?: string;
+		onlyMobile?: boolean;
+		onClick?: (ev: MouseEvent) => void;
+	};
+
+	let {
+		iconPath = mdiArrowLeft,
+		iconClassName = '',
+		className = '',
+		onlyMobile,
+		onClick
+	}: PropsType = $props();
+
+	let isMobileScreen = $state(false);
+
+	$effect(() => {
+		isMobileScreen = isSmallScreen();
+	});
 </script>
 
 {#snippet button()}

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

@@ -1,5 +1,7 @@
-<script lang="ts">import Button, {} from "../button/button.svelte";
-let { className, ...props } = $props();
+<script lang="ts">
+	import Button, { type ButtonPropsType } from '../button/button.svelte';
+
+	let { className, ...props }: ButtonPropsType = $props();
 </script>
 
 <Button {...props} className="bg-gray-100 focus:bg-gray-200 p-2 px-4  {className}" />

package/dist/views/core/button/components/button-close-icon/button-close-icon.svelte

@@ -1,18 +1,32 @@
-<script lang="ts">import { isSmallScreen } from "../../../../../services";
-import { mdiArrowLeft, mdiChevronRight, mdiClose } from "../../../icon";
-import Button from "../button/button.svelte";
-let {
-  label = "Close",
-  iconPath = mdiClose,
-  iconClassName = "",
-  className = "",
-  onlyWeb,
-  onClick
-} = $props();
-let isMobileScreen = $state(false);
-$effect(() => {
-  isMobileScreen = isSmallScreen();
-});
+<script lang="ts">
+	import { isSmallScreen } from '../../../../../services';
+	import { mdiArrowLeft, mdiChevronRight, mdiClose } from '../../../icon';
+	import Button from '../button/button.svelte';
+
+	type PropsType = {
+		label?: string;
+		iconPath?: string;
+		iconClassName?: string;
+		className?: string;
+		onlyWeb?: boolean;
+
+		onClick?: (ev: MouseEvent) => void;
+	};
+
+	let {
+		label = 'Close',
+		iconPath = mdiClose,
+		iconClassName = '',
+		className = '',
+		onlyWeb,
+		onClick
+	}: PropsType = $props();
+
+	let isMobileScreen = $state(false);
+
+	$effect(() => {
+		isMobileScreen = isSmallScreen();
+	});
 </script>
 
 {#snippet button()}

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

@@ -1,34 +1,82 @@
-<script module lang="ts"></script>
+<script module lang="ts">
+	export type ListItemType = {
+		id?: string;
+		title?: string;
+		subtitle?: string;
+		titleClassName?: string;
+		subtitleClassName?: string;
+		url?: string;
+		disabled?: boolean;
+		iconPath?: string;
+		iconClassName?: string;
+		imgSrc?: string;
+		imgClassName?: string;
+		className?: string;
+		openInNewWindow?: boolean;
+		divider?: boolean;
+		hasArrow?: boolean;
+		arrowIconPath?: string;
+		arrowClassName?: string;
+		isChecked?: boolean;
+		onclick?: (ev: MouseEvent, item: ListItemType) => void;
+	};
+</script>
+
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	import { ripple } from '../../../../../actions/ripple.js';
+
+	import type { Snippet } from 'svelte';
+	import {
+		Icon,
+		mdiCheckCircle,
+		mdiCheckCircleOutline,
+		mdiChevronRight
+	} from '../../../icon';
+
+	type PropsType = {
+		item: ListItemType;
+		index: number;
+		id?: string;
+		className?: string;
+		hasCheckbox?: boolean;
+		checkIconPath?: string;
+		uncheckIconPath?: string;
+		checkIconClassName?: string;
+		uncheckIconClassName?: string;
+		checkClassName?: string;
+		iconClassName?: string;
+		imgClassName?: string;
+		titleClassName?: string;
+		subtitleClassName?: string;
+		hasArrow?: boolean;
+		arrowIconPath?: string;
+		arrowClassName?: string;
+		onClick?: (ev: MouseEvent, item: ListItemType, index: number) => void;
+		children?: Snippet<[ListItemType, number]>;
+	};
 
-<script lang="ts">import "../../../../../tailwind.css";
-import { ripple } from "../../../../../actions/ripple.js";
-import {
-  Icon,
-  mdiCheckCircle,
-  mdiCheckCircleOutline,
-  mdiChevronRight
-} from "../../../icon";
-let {
-  item,
-  index,
-  id = "",
-  className = "",
-  hasCheckbox = false,
-  uncheckIconPath = mdiCheckCircleOutline,
-  checkIconPath = mdiCheckCircle,
-  checkIconClassName = "",
-  uncheckIconClassName = "",
-  iconClassName = "",
-  imgClassName = "",
-  titleClassName = "",
-  subtitleClassName = "",
-  checkClassName = "",
-  hasArrow = false,
-  arrowIconPath = mdiChevronRight,
-  arrowClassName = "",
-  onClick,
-  children
-} = $props();
+	let {
+		item,
+		index,
+		id = '',
+		className = '',
+		hasCheckbox = false,
+		uncheckIconPath = mdiCheckCircleOutline,
+		checkIconPath = mdiCheckCircle,
+		checkIconClassName = '',
+		uncheckIconClassName = '',
+		iconClassName = '',
+		imgClassName = '',
+		titleClassName = '',
+		subtitleClassName = '',
+		checkClassName = '',
+		hasArrow = false,
+		arrowIconPath = mdiChevronRight,
+		arrowClassName = '',
+		onClick,
+		children
+	}: PropsType = $props();
 </script>
 
 {#snippet itemInternal()}

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

@@ -1,93 +1,146 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import { ripple } from "../../../../../actions/ripple.js";
-import { Icon, mdiCheckCircle, mdiCheckCircleOutline, mdiChevronDown } from "../../../icon";
-import ButtonListItem from "../button-list-item/button-list-item.svelte";
-var MenuStateEnum = /* @__PURE__ */ ((MenuStateEnum2) => {
-  MenuStateEnum2[MenuStateEnum2["OPENED"] = 0] = "OPENED";
-  MenuStateEnum2[MenuStateEnum2["CLOSED"] = 1] = "CLOSED";
-  return MenuStateEnum2;
-})(MenuStateEnum || {});
-let {
-  id = "menu",
-  className = "",
-  screenOnlyDesc = "Menu",
-  style = "",
-  imgSrc = "",
-  imgClassName = "",
-  imgAlt = "Menu",
-  leftIconPath = "",
-  leftIconClassName = "",
-  rightIconPath = "",
-  rightIconClassName = "",
-  dropIconPath = mdiChevronDown,
-  dropIconClassName = "",
-  titleClassName = "",
-  title = "Button",
-  dropdownStyle = "",
-  dropdownClassName = "",
-  hasCheck = false,
-  uncheckIconPath = mdiCheckCircleOutline,
-  checkIconPath = mdiCheckCircle,
-  checkIconClassName = "",
-  containerClassName = "",
-  backgropClassName = "",
-  menus = [],
-  menuItemClassName = "",
-  uncheckIconClassName = "",
-  dropdownOpenClassName = "",
-  dropdownCloseClassName = "",
-  checkClassName = "",
-  listIconClassName = "",
-  listImgClassName = "",
-  listTitleClassName = "",
-  listSubtitleClassName = "",
-  dividerClassName = "",
-  onmenuclick = (ev, item, index) => {
-  },
-  children,
-  buttonSnippet,
-  menuItemSnippet,
-  menuItemInnerSnippet
-} = $props();
-let expanded = $state(false);
-let dropdownState = $state(1 /* CLOSED */);
-let options = $state([]);
-let selectedMenu = $state(null);
-function hendleToggleDropdown(ev) {
-  ev && ev.stopPropagation();
-  if (dropdownState == 1 /* CLOSED */) {
-    dropdownState = 0 /* OPENED */;
-  } else {
-    dropdownState = 1 /* CLOSED */;
-  }
-}
-function handlemenuItemClick(ev, menu, index) {
-  hendleToggleDropdown(ev);
-  if (onmenuclick) {
-    let item = menus[index];
-    if (item) {
-      onmenuclick(ev, item, index);
-    }
-    selectedMenu = menu;
-  }
-}
-$effect(() => {
-  if (menus?.length) {
-    let item = menus[0];
-    if (typeof item == "string") {
-      options = menus.map((str) => {
-        if (str == "-" || str == "") {
-          return { divider: true };
-        } else {
-          return { label: str };
-        }
-      });
-    } else {
-    }
-  } else {
-    options = [];
-  }
-});
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	 
+	import { ripple } from '../../../../../actions/ripple.js';
+	 
+	import { Icon, mdiCheckCircle, mdiCheckCircleOutline, mdiChevronDown } from '../../../icon';
+	import type { Snippet } from 'svelte';
+	import type { ListItemType } from '../button-list-item/button-list-item.svelte';
+	import ButtonListItem from '../button-list-item/button-list-item.svelte';
+
+	enum MenuStateEnum {
+		OPENED,
+		CLOSED
+	}
+
+	type PropsType = {
+		id?: string;
+		className?: string;
+		screenOnlyDesc?: string;
+		style?: string;
+		disabled?: boolean | undefined | null;
+		imgSrc?:string;
+		imgClassName?: string;
+		imgAlt?: string;
+		leftIconPath?: string;
+		leftIconClassName?: string;
+		rightIconPath?: string;
+		rightIconClassName?: string;
+		title?: string | any;
+		titleClassName?: string;
+		dropdownClassName?: string;
+		dropdownStyle?: string;
+		hasCheck?: boolean;
+		checkIconPath?: string;
+		checkIconClassName?: string;
+		menus?: string[] | ListItemType[];
+		containerClassName?: string;
+		backgropClassName?: string;
+		menuItemClassName?: string;
+		uncheckIconPath?: string;
+		uncheckIconClassName?: string;
+		dropdownOpenClassName?: string;
+		dropdownCloseClassName?: string;
+		checkClassName?: string;
+		listIconClassName?: string;
+		listImgClassName?: string;
+		listTitleClassName?: string;
+		listSubtitleClassName?: string;
+		dividerClassName?: string;
+		dropIconPath?: string;
+		dropIconClassName?: string;
+		onmenuclick?: (ev: MouseEvent, item: string | ListItemType, index: number) => void;
+		children?: Snippet;
+		buttonSnippet?: Snippet;
+		menuItemSnippet?: Snippet<[ListItemType, number]>;
+		menuItemInnerSnippet?: Snippet<[ListItemType, number]>;
+	};
+
+	let {
+		id = 'menu',
+		className = '',
+		screenOnlyDesc = 'Menu',
+		style = '',
+		imgSrc = '',
+		imgClassName = '',
+		imgAlt = 'Menu',
+		leftIconPath = '',
+		leftIconClassName = '',
+		rightIconPath = '',
+		rightIconClassName = '',
+		dropIconPath = mdiChevronDown,
+		dropIconClassName = '',
+		titleClassName = '',
+		title = 'Button',
+		dropdownStyle = '',
+		dropdownClassName = '',
+		hasCheck = false,
+		uncheckIconPath = mdiCheckCircleOutline,
+		checkIconPath = mdiCheckCircle,
+		checkIconClassName = '',
+		containerClassName = '',
+		backgropClassName = '',
+		menus = [],
+		menuItemClassName = '',
+		uncheckIconClassName = '',
+		dropdownOpenClassName = '',
+		dropdownCloseClassName = '',
+		checkClassName = '',
+		listIconClassName = '',
+		listImgClassName = '',
+		listTitleClassName = '',
+		listSubtitleClassName = '',
+		dividerClassName = '',
+		onmenuclick = (ev: MouseEvent, item: string | ListItemType, index: number) => {},
+		children,
+		buttonSnippet,
+		menuItemSnippet,
+		menuItemInnerSnippet
+	}: PropsType = $props();
+
+	let expanded = $state(false);
+	let dropdownState: MenuStateEnum = $state(MenuStateEnum.CLOSED);
+	let options: ListItemType[] = $state([]);
+	let selectedMenu: ListItemType | null | undefined = $state(null);
+
+	function hendleToggleDropdown(ev: MouseEvent) {
+		ev && ev.stopPropagation();
+		if (dropdownState == MenuStateEnum.CLOSED) {
+			dropdownState = MenuStateEnum.OPENED;
+		} else {
+			dropdownState = MenuStateEnum.CLOSED;
+		}
+	}
+
+	function handlemenuItemClick(ev: MouseEvent, menu: ListItemType, index: number) {
+		hendleToggleDropdown(ev);
+		if (onmenuclick) {
+			let item = menus[index];
+
+			if (item) {
+				onmenuclick(ev, item, index);
+			}
+			selectedMenu = menu;
+		}
+	}
+
+	$effect(() => {
+		if (menus?.length) {
+			let item = menus[0];
+			if (typeof item == 'string') {
+				options = menus.map((str) => {
+					if (str == '-' || str == '') {
+						return { divider: true } as ListItemType;
+					} else {
+						return { label: str } as ListItemType;
+					}
+				});
+			} else {
+			}
+		} else {
+			options = [];
+		}
+	});
 </script>
 
 <div class="relative min-h-max {containerClassName}">

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 ButtonPropsType } from '../button/button.svelte';
+
+	let { className, ...props }: ButtonPropsType = $props();
 </script>
 
 <Button {...props} className="bg-indigo-600 focus:bg-indigo-700 text-white p-2 px-4 {className}" />