@cloudparker/moldex.js 0.0.28 → 0.0.30

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

@@ -1,31 +1,82 @@
-<script context="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';
 
-<script lang="ts">import "../../../../../tailwind.css";
-import { ripple } from "../../../../../actions/ripple.js";
-import { Icon, mdiCheckCircle, mdiCheckCircleOutline, mdiChevronRight } from "../../../icon";
-let {
-  item,
-  index,
-  listId = "",
-  className = "",
-  hasCheck = false,
-  uncheckIconPath = mdiCheckCircleOutline,
-  checkIconPath = mdiCheckCircle,
-  checkIconClassName = "",
-  uncheckIconClassName = "",
-  iconClassName = "",
-  imgClassName = "",
-  labelClassName = "",
-  descClassName = "",
-  checkClassName = "",
-  checked = false,
-  hasArrow = false,
-  arrowIconPath = mdiChevronRight,
-  arrowClassName = "",
-  onclick = (ev, item2, index2) => {
-  },
-  children
-} = $props();
+	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]>;
+	};
+
+	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()}
@@ -44,26 +95,27 @@ let {
 				/>
 			</div>
 		{/if}
+
 		<div class="flex-grow">
-			{#if item?.label}
-				<div class="text-ellipsis overflow-hidden {labelClassName} {item?.labelClassName || ''}">
-					{item?.label || ''}
+			{#if item?.title}
+				<div class="text-ellipsis overflow-hidden {titleClassName} {item?.titleClassName || ''}">
+					{item?.title || ''}
 				</div>
 			{/if}
-			{#if item?.desc}
+			{#if item?.subtitle}
 				<div
-					class="text-ellipsis overflow-hidden text-gray-400 text-sm font-light {descClassName} {item?.descClassName ||
+					class="text-ellipsis overflow-hidden text-gray-400 text-sm font-light {subtitleClassName} {item?.subtitleClassName ||
 						''}"
 				>
-					{item?.desc || ''}
+					{item?.subtitle || ''}
 				</div>
 			{/if}
 		</div>
-		{#if hasCheck}
+		{#if hasCheckbox}
 			<div>
 				<Icon
-					path={checked ? checkIconPath : uncheckIconPath}
-					className="w-5 h-5 {checkClassName} {checked
+					path={item?.isChecked ? checkIconPath : uncheckIconPath}
+					className="w-5 h-5 {checkClassName} {item?.isChecked
 						? `text-primary ${checkIconClassName}`
 						: `text-gray-400 ${uncheckIconClassName}`}"
 				/>
@@ -80,11 +132,11 @@ let {
 
 {#snippet buttonSnippet()}
 	<button
-		id="{listId}-item-item-{index}"
+		id="{id}-item-item-{index}"
 		type="button"
-		class="w-full select-none block px-3 py-2 text-start leading-6 text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none {className} {item.className}"
+		class="w-full select-none block px-3 py-2 text-start leading-normal text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none {className} {item.className}"
 		role="menuitem"
-		onclick={(ev) => onclick(ev, item, index)}
+		onclick={(ev) => onClick && onClick(ev, item, index)}
 		disabled={item?.disabled}
 		use:ripple
 	>
@@ -94,12 +146,12 @@ let {
 
 {#snippet linkSnippet()}
 	<a
-		id="{listId}-item-item-{index}"
+		id="{id}-item-item-{index}"
 		href={item?.url}
-		class="block select-none px-3 py-1 w-full text-start leading-6 text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none {className} {item.className}"
+		class="block select-none px-3 py-1 w-full text-start leading-normal text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none {className} {item.className}"
 		role="menuitem"
 		target={item?.openInNewWindow ? '_blank' : ''}
-		onclick={(ev) => onclick(ev, item, index)}
+		onclick={(ev) => onClick && onClick(ev, item, index)}
 		use:ripple
 	>
 		{@render itemInternal()}

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

@@ -1,11 +1,10 @@
 export type ListItemType = {
     id?: string;
-    label?: string;
-    labelClassName?: string;
-    desc?: string;
-    descClassName?: string;
+    title?: string;
+    subtitle?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
     url?: string;
-    onclick?: (ev: MouseEvent, item: ListItemType) => void;
     disabled?: boolean;
     iconPath?: string;
     iconClassName?: string;
@@ -17,6 +16,8 @@ export type ListItemType = {
     hasArrow?: boolean;
     arrowIconPath?: string;
     arrowClassName?: string;
+    isChecked?: boolean;
+    onclick?: (ev: MouseEvent, item: ListItemType) => void;
 };
 import '../../../../../tailwind.css';
 import type { Snippet } from 'svelte';
@@ -36,9 +37,9 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const ButtonListItem: $$__sveltets_2_IsomorphicComponent<{
     item: ListItemType;
     index: number;
-    listId?: string;
+    id?: string;
     className?: string;
-    hasCheck?: boolean;
+    hasCheckbox?: boolean;
     checkIconPath?: string;
     uncheckIconPath?: string;
     checkIconClassName?: string;
@@ -46,13 +47,12 @@ declare const ButtonListItem: $$__sveltets_2_IsomorphicComponent<{
     checkClassName?: string;
     iconClassName?: string;
     imgClassName?: string;
-    labelClassName?: string;
-    descClassName?: string;
-    checked?: boolean;
+    titleClassName?: string;
+    subtitleClassName?: string;
     hasArrow?: boolean;
     arrowIconPath?: string;
     arrowClassName?: string;
-    onclick?: (ev: MouseEvent, item: ListItemType, index: number) => void;
+    onClick?: (ev: MouseEvent, item: ListItemType, index: number) => void;
     children?: Snippet<[ListItemType, number]>;
 }, {
     [evt: string]: CustomEvent<any>;

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 = "",
-  labelClassName = "",
-  label = "Button",
-  dropdownStyle = "",
-  dropdownClassName = "",
-  hasCheck = false,
-  uncheckIconPath = mdiCheckCircleOutline,
-  checkIconPath = mdiCheckCircle,
-  checkIconClassName = "",
-  containerClassName = "",
-  backgropClassName = "",
-  menus = [],
-  menuItemClassName = "",
-  uncheckIconClassName = "",
-  dropdownOpenClassName = "",
-  dropdownCloseClassName = "",
-  checkClassName = "",
-  listIconClassName = "",
-  listImgClassName = "",
-  listLabelClassName = "",
-  listDescClassName = "",
-  dividerClassName = "",
-  onmenuclick = (ev, item, index) => {
-  },
-  children,
-  buttonChildren,
-  menuItemChildren,
-  menuItemInnerChildren
-} = $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}">
@@ -103,8 +156,8 @@ $effect(() => {
 	>
 		<span class="sr-only">{screenOnlyDesc}</span>
 		<div class="flex items-center flex-nowrap gap-2">
-			{#if buttonChildren}
-				{@render buttonChildren()}
+			{#if buttonSnippet}
+				{@render buttonSnippet()}
 			{:else}
 				{#if imgSrc}
 					<img class="h-8 w-8 rounded-full bg-gray-50 {imgClassName}" src={imgSrc} alt={imgAlt} />
@@ -112,9 +165,9 @@ $effect(() => {
 				{#if leftIconPath}
 					<Icon path={leftIconPath} className={leftIconClassName} />
 				{/if}
-				{#if label}
-					<span class="text-nowrap {labelClassName}">
-						{@html label}
+				{#if title}
+					<span class="text-nowrap {titleClassName}">
+						{@html title}
 					</span>
 				{/if}
 				{#if rightIconPath}
@@ -152,15 +205,14 @@ $effect(() => {
 			{#each options as menu, index (menu.id || index)}
 				{#if menu?.divider}
 					<div class="border-t border-gray-200 {dividerClassName}"></div>
-				{:else if menuItemChildren}
-					{@render menuItemChildren(menu, index)}
+				{:else if menuItemSnippet}
+					{@render menuItemSnippet(menu, index)}
 				{:else}
 					<ButtonListItem
 						item={menu}
 						{index}
-						checked={selectedMenu == menu}
 						{hasCheck}
-						listId={id}
+						id={id}
 						className={menuItemClassName}
 						{uncheckIconPath}
 						{checkIconPath}
@@ -169,10 +221,10 @@ $effect(() => {
 						{checkClassName}
 						iconClassName={listIconClassName}
 						imgClassName={listImgClassName}
-						labelClassName={listLabelClassName}
-						descClassName={listDescClassName}
-						children={menuItemInnerChildren}
-						onclick={handlemenuItemClick}
+						titleClassName={listTitleClassName}
+						subtitleClassName={listSubtitleClassName}
+						children={menuItemInnerSnippet}
+						onClick={handlemenuItemClick}
 					/>
 				{/if}
 			{/each}

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

@@ -27,8 +27,8 @@ declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<{
     leftIconClassName?: string;
     rightIconPath?: string;
     rightIconClassName?: string;
-    label?: string | any;
-    labelClassName?: string;
+    title?: string | any;
+    titleClassName?: string;
     dropdownClassName?: string;
     dropdownStyle?: string;
     hasCheck?: boolean;
@@ -45,16 +45,16 @@ declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<{
     checkClassName?: string;
     listIconClassName?: string;
     listImgClassName?: string;
-    listLabelClassName?: string;
-    listDescClassName?: string;
+    listTitleClassName?: string;
+    listSubtitleClassName?: string;
     dividerClassName?: string;
     dropIconPath?: string;
     dropIconClassName?: string;
     onmenuclick?: (ev: MouseEvent, item: string | ListItemType, index: number) => void;
     children?: Snippet;
-    buttonChildren?: Snippet;
-    menuItemChildren?: Snippet<[ListItemType, number]>;
-    menuItemInnerChildren?: Snippet<[ListItemType, number]>;
+    buttonSnippet?: Snippet;
+    menuItemSnippet?: Snippet<[ListItemType, number]>;
+    menuItemInnerSnippet?: Snippet<[ListItemType, number]>;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;

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

@@ -0,0 +1,7 @@
+<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}" />

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

@@ -0,0 +1,19 @@
+import { type ButtonPropsType } from '../button/button.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ButtonOk: $$__sveltets_2_IsomorphicComponent<ButtonPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ButtonOk = InstanceType<typeof ButtonOk>;
+export default ButtonOk;

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

@@ -1,4 +1,8 @@
 import Button from './components/button/button.svelte';
+import ButtonBack from './components/button-back/button-back.svelte';
+import ButtonClose from './components/button-close/button-close.svelte';
+import ButtonCloseIcon from './components/button-close-icon/button-close-icon.svelte';
 import ButtonListItem from './components/button-list-item/button-list-item.svelte';
 import ButtonMenu from './components/button-menu/button-menu.svelte';
-export { Button, ButtonListItem, ButtonMenu };
+import ButtonOk from './components/button-ok/button-ok.svelte';
+export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonMenu, ButtonOk };

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

@@ -1,9 +1,18 @@
+import ButtonBack from './components/button-back/button-back.svelte';
+import ButtonCloseIcon from './components/button-close-icon/button-close-icon.svelte';
+import ButtonClose from './components/button-close/button-close.svelte';
 import ButtonListItem from './components/button-list-item/button-list-item.svelte';
 import ButtonMenu from './components/button-menu/button-menu.svelte';
+import ButtonOk from './components/button-ok/button-ok.svelte';
 import Button from './components/button/button.svelte';
 
 export {
     Button,
+    ButtonBack,
+    ButtonClose,
+    ButtonCloseIcon,
     ButtonListItem,
-    ButtonMenu
+    ButtonMenu,
+    ButtonOk
 };
+