@cloudparker/moldex.js 0.0.123 → 4.1.0

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+export declare enum DropdownStateEnum {
+    OPEN = 0,
+    OPENED = 1,
+    CLOSE = 2,
+    CLOSED = 3
+}

package/dist/types.js

@@ -0,0 +1,7 @@
+export var DropdownStateEnum;
+(function (DropdownStateEnum) {
+    DropdownStateEnum[DropdownStateEnum["OPEN"] = 0] = "OPEN";
+    DropdownStateEnum[DropdownStateEnum["OPENED"] = 1] = "OPENED";
+    DropdownStateEnum[DropdownStateEnum["CLOSE"] = 2] = "CLOSE";
+    DropdownStateEnum[DropdownStateEnum["CLOSED"] = 3] = "CLOSED";
+})(DropdownStateEnum || (DropdownStateEnum = {}));

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

@@ -1,87 +1,139 @@
-<script module lang="ts"></script>
+<script module lang="ts">
+	export type ButtonAppearance =
+		| 'none'
+		| 'primary'
+		| 'base'
+		| 'border'
+		| 'border-base'
+		| 'border-primary';
 
-<script lang="ts">import { ripple } from "../../../../../actions/ripple.js";
-import { Icon, mdiOpenInNew } from "../../../icon";
-import { Spinner } from "../../../spinner";
-let {
-  title,
-  appearance = "none",
-  id = "",
-  form = void 0,
-  type = "button",
-  label = "",
-  className = "",
-  iconPath = "",
-  iconClassName = "",
-  rightIconPath = "",
-  rightIconClassName = "",
-  spinner = false,
-  disabled = false,
-  size = "md",
-  spinnerClassName = "",
-  onlySpinner = false,
-  children,
-  hasRipple = true,
-  rippleColor,
-  onClick = (ev) => {
-  },
-  url,
-  target,
-  hasOpenInNew,
-  openInNewIconClassName,
-  openInNewIcon = mdiOpenInNew,
-  onDblClick,
-  onContextMenu,
-  onDrop,
-  onDragStart,
-  onDragEnd,
-  onDragEnter,
-  onDragLeave,
-  onDragOver
-} = $props();
-let btnAppearanceClassName = $derived.by(() => {
-  switch (appearance) {
-    case "none":
-      return "text-base-800 dark:text-base-300 hover:text-base-900 disabled:text-base-400 dark:disabled:text-base-500 dark:hover:text-base-200";
-    case "base":
-      return "text-base-800 dark:text-base-300 hover:text-base-900 disabled:text-base-400 dark:disabled:text-base-500 dark:hover:text-base-200 bg-base-200 dark:bg-base-700 hover:bg-base-300 dark:hover:bg-base-600 disabled:hover:bg-base-200 dark:disabled:hover:bg-base-700 ";
-    case "primary":
-      return "text-primary-100 hover:text-primary-50 bg-primary-600 hover:bg-primary-500 disabled:text-base-400 dark:disabled:text-base-500 disabled:bg-base-200 dark:disabled:bg-base-700 disabled:hover:bg-base-200 dark:disabled:hover:bg-base-700  ";
-    case "border":
-    case "border-base":
-      return "border-2 text-base-800 dark:text-base-300 hover:text-base-900 disabled:text-base-400 dark:disabled:text-base-500 dark:hover:text-base-200 border-base-200 hover:border-base-300 dark:border-base-700 dark:hover:border-base-600 dark:disabled:border-base-200 dark:disabled:hover:border-base-200 dark:disabled:border-base-700 dark:disabled:hover:border-base-700  ";
-    case "border-primary":
-      return "border-2 text-primary hover:text-primary-500 disabled:text-base-400 dark:disabled:text-base-500 border-primary hover:border-primary-500 dark:border-primary-600 dark:hover:border-primary-500 dark:disabled:border-base-200 dark:disabled:hover:border-base-200 dark:disabled:border-base-700 dark:disabled:hover:border-base-700  ";
-  }
-});
-let btnSizeClassName = $derived.by(() => {
-  switch (size) {
-    case "none":
-      return "";
-    case "xs":
-      return "px-1 py-0 text-xs";
-    case "sm":
-      return "px-3 py-1 text-sm";
-    case "md":
-      return "px-4 py-2";
-    case "lg":
-      return "px-6 py-3 text-lg";
-    case "xl":
-      return "px-8 py-4 text-xl";
-    case "2xl":
-      return "px-10 py-6 text-2xl";
-  }
-});
-function handleRipple(node, options) {
-  if (hasRipple) {
-    options = options || { color: rippleColor };
-    return ripple(node, options);
-  }
-  return {
-    destroy() {
-    }
-  };
-}
+	export type ButtonSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+	export type ButtonType = 'button' | 'submit' | 'reset';
+
+	export type ButtonProps = {
+		title?: string;
+		id?: string;
+		type?: ButtonType;
+		appearance?: ButtonAppearance;
+		size?: ButtonSize;
+		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;
+		hasRipple?: boolean;
+		rippleColor?: string | 'light' | 'dark';
+		url?: string;
+		target?: string;
+		hasOpenInNew?: boolean;
+		openInNewIconClassName?: string;
+		openInNewIcon?: string;
+		onClick?: (ev: MouseEvent) => void;
+		onDblClick?: (ev: MouseEvent) => void;
+		onContextMenu?: (ev: MouseEvent) => void;
+		onDrop?: (ev: DragEvent) => void;
+		onDragStart?: (ev: DragEvent) => void;
+		onDragEnd?: (ev: DragEvent) => void;
+		onDragEnter?: (ev: DragEvent) => void;
+		onDragLeave?: (ev: DragEvent) => void;
+		onDragOver?: (ev: DragEvent) => void;
+	};
+</script>
+
+<script lang="ts">
+	import { ripple, type RipplePropsType } from '../../../../../actions/ripple.js';
+	import { Icon, mdiOpenInNew } from '../../../icon';
+	import { Spinner } from '../../../spinner';
+	import type { Snippet } from 'svelte';
+
+	let {
+		title,
+		appearance = 'none',
+		id = '',
+		form = undefined,
+		type = 'button',
+		label = '',
+		className = '',
+		iconPath = '',
+		iconClassName = '',
+		rightIconPath = '',
+		rightIconClassName = '',
+		spinner = false,
+		disabled = false,
+		size = 'md',
+		spinnerClassName = '',
+		onlySpinner = false,
+		children,
+		hasRipple = true,
+		rippleColor,
+		onClick = (ev: MouseEvent) => {},
+		url,
+		target,
+		hasOpenInNew,
+		openInNewIconClassName,
+		openInNewIcon = mdiOpenInNew,
+		onDblClick,
+		onContextMenu,
+		onDrop,
+		onDragStart,
+		onDragEnd,
+		onDragEnter,
+		onDragLeave,
+		onDragOver
+	}: ButtonProps = $props();
+
+	let btnAppearanceClassName = $derived.by(() => {
+		switch (appearance) {
+			case 'none':
+				return 'text-base-800 dark:text-base-300 hover:text-base-900 disabled:text-base-400 dark:disabled:text-base-500 dark:hover:text-base-200';
+			case 'base':
+				return 'text-base-800 dark:text-base-300 hover:text-base-900 disabled:text-base-400 dark:disabled:text-base-500 dark:hover:text-base-200 bg-base-200 dark:bg-base-700 hover:bg-base-300 dark:hover:bg-base-600 disabled:hover:bg-base-200 dark:disabled:hover:bg-base-700 ';
+			case 'primary':
+				return 'text-primary-100 hover:text-primary-50 bg-primary-600 hover:bg-primary-500 disabled:text-base-400 dark:disabled:text-base-500 disabled:bg-base-200 dark:disabled:bg-base-700 disabled:hover:bg-base-200 dark:disabled:hover:bg-base-700  ';
+			case 'border':
+			case 'border-base':
+				return 'border-2 text-base-800 dark:text-base-300 hover:text-base-900 disabled:text-base-400 dark:disabled:text-base-500 dark:hover:text-base-200 border-base-200 hover:border-base-300 dark:border-base-700 dark:hover:border-base-600 dark:disabled:border-base-200 dark:disabled:hover:border-base-200 dark:disabled:border-base-700 dark:disabled:hover:border-base-700  ';
+			case 'border-primary':
+				return 'border-2 text-primary hover:text-primary-500 disabled:text-base-400 dark:disabled:text-base-500 border-primary hover:border-primary-500 dark:border-primary-600 dark:hover:border-primary-500 dark:disabled:border-base-200 dark:disabled:hover:border-base-200 dark:disabled:border-base-700 dark:disabled:hover:border-base-700  ';
+		}
+	});
+
+	let btnSizeClassName = $derived.by(() => {
+		switch (size) {
+			case 'none':
+				return '';
+			case 'xs':
+				return 'px-1 py-0 text-xs';
+			case 'sm':
+				return 'px-3 py-1 text-sm';
+			case 'md':
+				return 'px-4 py-2';
+			case 'lg':
+				return 'px-6 py-3 text-lg';
+			case 'xl':
+				return 'px-8 py-4 text-xl';
+			case '2xl':
+				return 'px-10 py-6 text-2xl';
+		}
+	});
+
+	function handleRipple(node: HTMLElement, options?: RipplePropsType) {
+		if (hasRipple) {
+			options = options || { color: rippleColor };
+			return ripple(node, options);
+		}
+		return {
+			destroy() {}
+		};
+	}
 </script>
 
 {#snippet buttonContent()}

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

@@ -1,18 +1,31 @@
-<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 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>
 
 {#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 ButtonProps } from '../button/button.svelte';
+
+	let { className, ...props }: ButtonProps = $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-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 {
-  id,
-  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 = {
+		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>
 
 {#snippet button()}

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

@@ -1,71 +1,95 @@
-<script lang="ts">import Button, {
-} from "../button/button.svelte";
-import { onMount } from "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,
-  type,
-  children,
-  dropdownSnippet,
-  backgropClassName = "",
-  className = "",
-  containerClassName = "",
-  dropdownClassName = "",
-  dropdownCloseClassName = "",
-  dropdownOpenClassName = "",
-  disabled = false,
-  dropPosition = "bottom",
-  ...others
-} = $props();
-let placement = $state(false);
-let dropdownState = $state(3 /* CLOSED */);
-let openUpward = $state(false);
-let openMiddle = $state(false);
-let buttonElement;
-export function toggleDropdown(ev) {
-  ev.stopPropagation();
-  if (placement) {
-    dropdownState = 3 /* CLOSED */;
-    setTimeout(() => placement = false, 100);
-  } else {
-    placement = true;
-    setTimeout(() => dropdownState = 1 /* OPENED */, 1);
-    adjustDropdownPosition();
-  }
-}
-function adjustDropdownPosition() {
-  if (buttonElement) {
-    const rect = buttonElement?.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const spaceBelow = viewportHeight - rect.bottom;
-    const spaceAbove = rect.top;
-    const dropdownHeight = 200;
-    openUpward = false;
-    openMiddle = false;
-    switch (dropPosition) {
-      case "top":
-        openUpward = true;
-        break;
-      case "middle":
-        openMiddle = true;
-        break;
-      default:
-        openUpward = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
-    }
-  }
-}
-onMount(() => {
-  window.addEventListener("resize", adjustDropdownPosition);
-});
+<script lang="ts">
+	import { DropdownStateEnum } from '../../../../../types.js';
+	import Button, {
+		type ButtonAppearance,
+		type ButtonSize,
+		type ButtonType
+	} from '../button/button.svelte';
+	import { onMount, type Snippet } from 'svelte';
+
+	export type ButtonDropdownProps = {
+		appearance?: ButtonAppearance;
+		size?: ButtonSize;
+		label?: string;
+		type?: ButtonType;
+		children?: Snippet;
+		dropdownSnippet?: Snippet;
+		id?: string;
+		backdropClassName?: string;
+		className?: string;
+		containerClassName?: string;
+		dropdownClassName?: string;
+		dropdownCloseClassName?: string;
+		dropdownOpenClassName?: string;
+		disabled?: boolean;
+		dropPosition?: 'top' | 'bottom' | 'middle';
+	};
+
+	let {
+		id,
+		appearance,
+		size,
+		label,
+		type,
+		children,
+		dropdownSnippet,
+		backdropClassName = '',
+		className = '',
+		containerClassName = '',
+		dropdownClassName = '',
+		dropdownCloseClassName = '',
+		dropdownOpenClassName = '',
+		disabled = false,
+		dropPosition = 'bottom',
+		...others
+	}: ButtonDropdownProps = $props();
+
+	let placement = $state(false);
+	let dropdownState = $state(DropdownStateEnum.CLOSED);
+	let openUpward = $state(false);
+	let openMiddle = $state(false);
+	let buttonElement: HTMLDivElement;
+
+	export function toggleDropdown(ev: MouseEvent | TouchEvent) {
+		ev.stopPropagation();
+
+		if (placement) {
+			dropdownState = DropdownStateEnum.CLOSED;
+			setTimeout(() => (placement = false), 100);
+		} else {
+			placement = true;
+			setTimeout(() => (dropdownState = DropdownStateEnum.OPENED), 1);
+			adjustDropdownPosition();
+		}
+	}
+
+	function adjustDropdownPosition() {
+		if (buttonElement) {
+			const rect = buttonElement?.getBoundingClientRect();
+			const viewportHeight = window.innerHeight;
+			const spaceBelow = viewportHeight - rect.bottom;
+			const spaceAbove = rect.top;
+			const dropdownHeight = 200;
+
+			openUpward = false;
+			openMiddle = false;
+
+			switch (dropPosition) {
+				case 'top':
+					openUpward = true;
+					break;
+				case 'middle':
+					openMiddle = true;
+					break;
+				default:
+					openUpward = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
+			}
+		}
+	}
+
+	onMount(() => {
+		window.addEventListener('resize', adjustDropdownPosition);
+	});
 </script>
 
 <div class="relative max-w-min {containerClassName}" bind:this={buttonElement}>
@@ -89,7 +113,7 @@ onMount(() => {
 		<div
 			aria-label="backdrop"
 			id="{id}-dropdown-backdrop"
-			class="cursor-auto fixed inset-0 z-10 {backgropClassName}"
+			class="fixed inset-0 z-10 cursor-auto {backdropClassName}"
 			onmousedown={(e) => {
 				e.stopPropagation();
 				e.stopImmediatePropagation();
@@ -111,10 +135,10 @@ onMount(() => {
 
 		<div
 			role="dialog"
-			class="absolute z-10 min-w-40 max-h-[50vh] overflow-y-auto origin-top right-0 rounded-md bg-white dark:bg-base-800 shadow-lg dark:shadow-black transition ease-out duration-100 {dropdownClassName} {dropdownState ===
+			class="absolute right-0 z-10 max-h-[50vh] min-w-40 origin-top overflow-y-auto rounded-md bg-white shadow-lg transition duration-100 ease-out dark:bg-base-800 dark:shadow-black {dropdownClassName} {dropdownState ===
 			DropdownStateEnum.OPENED
-				? `transform opacity-100 scale-100 ${dropdownOpenClassName}`
-				: `transform opacity-0 scale-60 ${dropdownCloseClassName}`}"
+				? `scale-100 transform opacity-100 ${dropdownOpenClassName}`
+				: `scale-60 transform opacity-0 ${dropdownCloseClassName}`}"
 			style={openMiddle
 				? 'top: 50%; transform: translateY(-50%);'
 				: openUpward

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

@@ -8,7 +8,7 @@ export type ButtonDropdownProps = {
     children?: Snippet;
     dropdownSnippet?: Snippet;
     id?: string;
-    backgropClassName?: string;
+    backdropClassName?: string;
     className?: string;
     containerClassName?: string;
     dropdownClassName?: string;