@cloudparker/moldex.js 0.0.64 → 0.0.66

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

@@ -1,31 +1,18 @@
-<script lang="ts">
-	import { isSmallScreen } from '../../../../../services';
-	import { mdiArrowLeft } from '../../../icon';
-	import Button from '../button/button.svelte';
-
-	type PropsType = {
-		id?: string;
-		iconPath?: string;
-		iconClassName?: string;
-		className?: string;
-		onlyMobile?: boolean;
-		onClick?: (ev: MouseEvent) => void;
-	};
-
-	let {
-		id,
-		iconPath = mdiArrowLeft,
-		iconClassName = '',
-		className = '',
-		onlyMobile,
-		onClick
-	}: PropsType = $props();
-
-	let isMobileScreen = $state(false);
-
-	$effect(() => {
-		isMobileScreen = isSmallScreen();
-	});
+<script lang="ts">import { isSmallScreen } from "../../../../../services";
+import { mdiArrowLeft } from "../../../icon";
+import Button from "../button/button.svelte";
+let {
+  id,
+  iconPath = mdiArrowLeft,
+  iconClassName = "",
+  className = "",
+  onlyMobile,
+  onClick
+} = $props();
+let isMobileScreen = $state(false);
+$effect(() => {
+  isMobileScreen = isSmallScreen();
+});
 </script>
 
 {#snippet button()}
@@ -34,7 +21,7 @@
 		appearance="none"
 		size="none"
 		{iconPath}
-		className="w-12 h-12 rounded-full hover:bg-gray-50 dark:hover:bg-gray-900 {className}"
+		className="w-12 h-12 rounded-full hover:bg-base-50 dark:hover:bg-base-900 {className}"
 		{iconClassName}
 		{onClick}
 	/>

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

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

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

@@ -1,4 +1,4 @@
-import { type ButtonPropsType } from '../button/button.svelte';
+import { type ButtonProps } 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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ButtonClose: $$__sveltets_2_IsomorphicComponent<ButtonPropsType, {
+declare const ButtonClose: $$__sveltets_2_IsomorphicComponent<ButtonProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
 type ButtonClose = InstanceType<typeof ButtonClose>;

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

@@ -1,39 +1,25 @@
-<script lang="ts">
-	import { isSmallScreen } from '../../../../../services';
-	import { mdiArrowLeft, mdiChevronRight, mdiClose } from '../../../icon';
-	import Button from '../button/button.svelte';
-
-	type PropsType = {
-		id?: string;
-		iconPath?: string;
-		iconClassName?: string;
-		className?: string;
-		onlyWeb?: boolean;
-
-		onClick?: (ev: MouseEvent) => void;
-	};
-
-	let {
-		id,
-		iconPath = mdiClose,
-		iconClassName = '',
-		className = '',
-		onlyWeb,
-		onClick
-	}: PropsType = $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";
+let {
+  id,
+  iconPath = mdiClose,
+  iconClassName = "",
+  className = "",
+  onlyWeb,
+  onClick
+} = $props();
+let isMobileScreen = $state(false);
+$effect(() => {
+  isMobileScreen = isSmallScreen();
+});
 </script>
 
 {#snippet button()}
 	<Button
 		{id}
 		{iconPath}
-		className="w-12 h-12 rounded-full text-gray-500 hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-900 transition-all {className}"
+		className="w-12 h-12 rounded-full text-base-500 hover:text-base-600 hover:bg-base-50 dark:hover:bg-base-900 transition-all {className}"
 		{iconClassName}
 		{onClick}
 	/>

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

@@ -0,0 +1,80 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import "../../../../../tailwind.css";
+import Button, {
+} from "../button/button.svelte";
+var DropdownStateEnum = /* @__PURE__ */ ((DropdownStateEnum2) => {
+  DropdownStateEnum2[DropdownStateEnum2["OPEN"] = 0] = "OPEN";
+  DropdownStateEnum2[DropdownStateEnum2["OPENED"] = 1] = "OPENED";
+  DropdownStateEnum2[DropdownStateEnum2["CLOSE"] = 2] = "CLOSE";
+  DropdownStateEnum2[DropdownStateEnum2["CLOSED"] = 3] = "CLOSED";
+  return DropdownStateEnum2;
+})(DropdownStateEnum || {});
+let {
+  id,
+  appearance,
+  size,
+  label = "MY btn",
+  type,
+  children,
+  dropdownSnippet,
+  backgropClassName = "",
+  className = "",
+  containerClassName = "",
+  dropdownClassName = "",
+  dropdownCloseClassName = "",
+  dropdownOpenClassName = ""
+} = $props();
+let placement = $state(false);
+let dropdownState = $state(3 /* CLOSED */);
+export function toggleDropdown(ev) {
+  ev && ev.stopPropagation();
+  if (placement) {
+    dropdownState = 3 /* CLOSED */;
+    setTimeout(() => {
+      placement = false;
+    }, 100);
+  } else {
+    placement = true;
+    setTimeout(() => {
+      dropdownState = 1 /* OPENED */;
+    }, 1);
+  }
+}
+function handleToggleDropdown(ev) {
+  toggleDropdown(ev);
+}
+</script>
+
+<div class="relative max-w-min {containerClassName}">
+	<Button
+		{id}
+		{type}
+		{appearance}
+		{size}
+		className="flex items-center justify-center flex-nowrap text-start {className}"
+		onClick={handleToggleDropdown}
+		{label}
+		{children}
+	/>
+
+	{#if placement}
+		<button
+			aria-label="backdrop"
+			type="button"
+			id="{id}-dropdown-backdrop"
+			class="cursor-auto fixed inset-0 z-10 {backgropClassName}"
+			onclick={handleToggleDropdown}
+			tabindex="-1"
+		></button>
+		<div
+			class="absolute z-10 min-w-40 max-h-1/2vh overflow-y-auto origin-top right-0 rounded-md bg-white dark:bg-base-800 shadow-lg focus:outline-none transition ease-out duration-100 {dropdownClassName} {dropdownState ==
+			DropdownStateEnum.OPENED
+				? `transform opacity-100 scale-100  ${dropdownOpenClassName}`
+				: `transform opacity-0 scale-60 } ${dropdownCloseClassName}`}"
+			tabindex="-1"
+		>
+			{@render dropdownSnippet?.()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,38 @@
+export type ButtonDropdownProps = {
+    appearance?: ButtonAppearance;
+    size?: ButtonSize;
+    label?: string;
+    type?: ButtonType;
+    children?: Snippet;
+    dropdownSnippet?: Snippet;
+    id?: string;
+    backgropClassName?: string;
+    className?: string;
+    containerClassName?: string;
+    dropdownClassName?: string;
+    dropdownCloseClassName?: string;
+    dropdownOpenClassName?: string;
+};
+import '../../../../../tailwind.css';
+import type { Snippet } from 'svelte';
+import { type ButtonAppearance, type ButtonSize, type ButtonType } 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 ButtonDropdown: $$__sveltets_2_IsomorphicComponent<ButtonDropdownProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    toggleDropdown: (ev: MouseEvent) => void;
+}, "">;
+type ButtonDropdown = InstanceType<typeof ButtonDropdown>;
+export default ButtonDropdown;

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

@@ -1,123 +1,80 @@
-<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 module lang="ts"></script>
 
-	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 lang="ts">import "../../../../../tailwind.css";
+import {
+  Icon,
+  mdiCheckCircle,
+  mdiCheckCircleOutline,
+  mdiChevronRight
+} from "../../../icon";
+import Button, {} from "../button/button.svelte";
+let {
+  appearance,
+  size,
+  index,
+  id = "",
+  className = "",
+  checkboxIconPath = mdiCheckCircle,
+  uncheckboxIconPath = mdiCheckCircleOutline,
+  checkboxIconClassName = "",
+  uncheckboxIconClassName = "",
+  hasIcon = false,
+  iconClassName = "",
+  hasImg = false,
+  imgClassName = "",
+  iconPath,
+  imgSrc,
+  hasArrow = false,
+  arrowIconPath = mdiChevronRight,
+  arrowClassName = "",
+  title = "",
+  subtitle = "",
+  titleClassName = "",
+  subtitleClassName = "",
+  disabled = false,
+  hasCheckbox,
+  checkboxClassName = "",
+  isChecked = false,
+  onClick = (ev) => {
+  }
+} = $props();
 </script>
 
 {#snippet itemInternal()}
 	<div class="flex w-full items-center gap-4">
-		{#if item?.iconPath}
+		{#if hasIcon && iconPath}
 			<div>
-				<Icon path={item?.iconPath} className="{iconClassName} {item?.iconClassName}" />
+				<Icon path={iconPath} className="{iconClassName} {iconClassName}" />
 			</div>
 		{/if}
-		{#if item?.imgSrc}
+
+		{#if hasImg && imgSrc}
 			<div>
-				<img
-					src={item?.imgSrc}
-					class="w-6 h-6 {imgClassName} {item?.imgClassName}"
-					alt="item-img-{index}"
-				/>
+				<img src={imgSrc} class="w-6 h-6 {imgClassName} {imgClassName}" alt="item-img-{index}" />
 			</div>
 		{/if}
 
 		<div class="flex-grow">
-			{#if item?.title}
-				<div class="text-ellipsis overflow-hidden {titleClassName} {item?.titleClassName || ''}">
-					{item?.title || ''}
+			{#if title}
+				<div class="text-ellipsis overflow-hidden {titleClassName}  }">
+					{title || ''}
 				</div>
 			{/if}
-			{#if item?.subtitle}
+			{#if subtitle}
 				<div
-					class="text-ellipsis overflow-hidden text-base-400 dark:text-base-300 text-sm font-light {subtitleClassName} {item?.subtitleClassName ||
-						''}"
+					class="text-ellipsis overflow-hidden text-base-400 dark:text-base-300 text-sm font-light {subtitleClassName} }"
 				>
-					{item?.subtitle || ''}
+					{subtitle || ''}
 				</div>
 			{/if}
 		</div>
 		{#if hasCheckbox}
 			<div>
 				<Icon
-					path={item?.isChecked ? checkIconPath : uncheckIconPath}
-					className="w-5 h-5 {checkClassName} {item?.isChecked
-						? `text-primary ${checkIconClassName}`
-						: `text-base-400 ${uncheckIconClassName}`}"
+					path={isChecked ? checkboxIconPath : uncheckboxIconPath}
+					className="w-5 h-5 {checkboxClassName} {isChecked
+						? `text-primary ${checkboxIconClassName}`
+						: `text-base-400 ${uncheckboxIconClassName}`}"
 				/>
 			</div>
 		{/if}
@@ -130,38 +87,14 @@
 	</div>
 {/snippet}
 
-{#snippet buttonSnippet()}
-	<button
-		id="{id}-item-item-{index}"
-		type="button"
-		class="w-full select-none block px-3 py-2 text-start leading-normal text-base-900 dark:text-base-200 hover:bg-base-100 dark:hover:bg-base-700 focus:bg-base-50 dark:focus:bg-base-700 focus:outline-none {className} {item.className}"
-		role="menuitem"
-		onclick={(ev) => onClick && onClick(ev, item, index)}
-		disabled={item?.disabled}
-		use:ripple
-	>
-		{@render itemInternal()}
-	</button>
-{/snippet}
-
-{#snippet linkSnippet()}
-	<a
-		id="{id}-item-item-{index}"
-		href={item?.url}
-		class="block select-none px-3 py-1 w-full text-start leading-normal text-base-900 dark:text-base-200 hover:bg-base-100 dark:hover:bg-base-700 focus:bg-base-50 dark:focus:bg-base-700 focus:outline-none {className} {item.className}"
-		role="menuitem"
-		target={item?.openInNewWindow ? '_blank' : ''}
-		onclick={(ev) => onClick && onClick(ev, item, index)}
-		use:ripple
-	>
-		{@render itemInternal()}
-	</a>
-{/snippet}
-
-{#if children}
-	{@render children(item, index)}
-{:else if item?.url && !item?.disabled}
-	{@render linkSnippet()}
-{:else}
-	{@render buttonSnippet()}
-{/if}
+<Button
+	id="{id}-list-item-{index}"
+	type="button"
+	className=" w-full text-start justify-start rounded-none {className}"
+	{onClick}
+	{disabled}
+	{appearance}
+	{size}
+>
+	{@render itemInternal()}
+</Button>

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

@@ -1,5 +1,20 @@
-export type ListItemType = {
+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;
@@ -7,20 +22,16 @@ export type ListItemType = {
     url?: string;
     disabled?: boolean;
     iconPath?: string;
-    iconClassName?: string;
     imgSrc?: string;
-    imgClassName?: string;
-    className?: string;
-    openInNewWindow?: boolean;
-    divider?: boolean;
-    hasArrow?: boolean;
-    arrowIconPath?: string;
-    arrowClassName?: string;
+    hasCheckbox?: boolean;
+    checkboxClassName?: string;
     isChecked?: boolean;
-    onclick?: (ev: MouseEvent, item: ListItemType) => void;
+    onClick?: (ev: MouseEvent) => void;
+    children?: Snippet<[any, number]>;
 };
 import '../../../../../tailwind.css';
 import type { Snippet } from 'svelte';
+import { type ButtonAppearance, type ButtonSize } 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;
@@ -34,27 +45,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ButtonListItem: $$__sveltets_2_IsomorphicComponent<{
-    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]>;
-}, {
+declare const ButtonListItem: $$__sveltets_2_IsomorphicComponent<ButtonListItemProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
 type ButtonListItem = InstanceType<typeof ButtonListItem>;