@cloudparker/moldex.js 0.0.1

package/dist/actions/badge.d.ts

@@ -0,0 +1,12 @@
+export type BadgeProsType = {
+    containerClassName?: string;
+    badgePositionClassName?: string;
+    badgeContainerClassName?: string;
+    badgeClassName?: string;
+    badgeBackgroundClassName?: string;
+    badgeText?: string;
+    hasBadgeBackground?: boolean;
+};
+export declare function badge(node: HTMLElement, { containerClassName, badgePositionClassName, badgeContainerClassName, badgeClassName, badgeBackgroundClassName, badgeText, hasBadgeBackground }?: BadgeProsType): {
+    destroy(): void;
+};

package/dist/actions/badge.js

@@ -0,0 +1,22 @@
+export function badge(node, { containerClassName = '', badgePositionClassName = 'top-0 right-0', badgeContainerClassName = '', badgeClassName = '', badgeBackgroundClassName = '', badgeText = '', hasBadgeBackground = true } = {}) {
+    let badgeBackElement = hasBadgeBackground ? `<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75 ${badgeBackgroundClassName}"></span>` : '';
+    const badge = document.createElement('span');
+    badge.className = 'absolute transform translate-x-1/2 -translate-y-1/2 ' + badgePositionClassName;
+    badge.innerHTML = `
+      <span class="relative flex h-3 w-3 ${badgeContainerClassName}">
+        ${badgeBackElement}
+        <span class="relative inline-grid place-items-center rounded-full h-3 w-3 text-3xs text-white bg-sky-500 ${badgeClassName}">${badgeText || ''}</span>
+      </span>
+    `;
+    let list = ['relative'];
+    list.push(...containerClassName.split(' ').map(o => o.trim()).filter(o => o));
+    const nodeClassList = [...list];
+    node.classList.add(...nodeClassList);
+    node.appendChild(badge);
+    return {
+        destroy() {
+            node.removeChild(badge);
+            node.classList.remove(...nodeClassList);
+        }
+    };
+}

package/dist/actions/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ripple.js";
+export * from "./badge.js";

package/dist/actions/index.js

@@ -0,0 +1,2 @@
+export * from "./ripple.js";
+export * from "./badge.js";

package/dist/actions/ripple.d.ts

@@ -0,0 +1,16 @@
+export type RipplePropsType = {
+    /**
+     * The color of the ripple effect, default is rgba(0, 0, 0, 0.12)
+     */
+    color?: string;
+    /**
+     * If true, the ripple effect will be light color rgba(255, 255, 255, 0.12), default is false.
+     */
+    light?: boolean;
+};
+export declare const DARK_RIPPLE_COLOR = "rgba(0, 0, 0, 0.12)";
+export declare const LIGHT_RIPPLE_COLOR = "rgba(255, 255, 255, 0.12)";
+export declare function ripple(node: HTMLElement, { color, light }?: RipplePropsType): {
+    destroy(): void;
+};
+export declare function isTouchDevice(): boolean;

package/dist/actions/ripple.js

@@ -0,0 +1,78 @@
+export const DARK_RIPPLE_COLOR = 'rgba(0, 0, 0, 0.12)';
+export const LIGHT_RIPPLE_COLOR = 'rgba(255, 255, 255, 0.12)';
+export function ripple(node, { color, light } = {}) {
+    let containerRemoveTimer;
+    const isTouchEnabled = isTouchDevice();
+    let timeoutInstance;
+    function scheduleStartRipple(event) {
+        if (node.disabled)
+            return;
+        if (timeoutInstance) {
+            clearTimeout(timeoutInstance);
+        }
+        timeoutInstance = setTimeout(() => {
+            startRipple(event);
+        }, 100);
+    }
+    function mouseMove() {
+        if (timeoutInstance) {
+            clearTimeout(timeoutInstance);
+        }
+    }
+    function startRipple(event) {
+        const rippleColor = light ? LIGHT_RIPPLE_COLOR : color || DARK_RIPPLE_COLOR;
+        const circle = document.createElement('span');
+        const diameter = Math.max(node.clientWidth, node.clientHeight);
+        const radius = diameter / 2;
+        const touch = event.touches?.[0] || {};
+        const rect = node.getBoundingClientRect();
+        const circleX = (event instanceof MouseEvent ? event.clientX : touch.clientX) - rect.left - radius;
+        const circleY = (event instanceof MouseEvent ? event.clientY : touch.clientY) - rect.top - radius;
+        circle.style.width = circle.style.height = `${diameter}px`;
+        circle.style.left = `${circleX}px`;
+        circle.style.top = `${circleY}px`;
+        circle.style.setProperty('--ripple-color', rippleColor);
+        circle.classList.add('ripple');
+        const newClassList = [];
+        if (!node.classList.contains('relative')) {
+            newClassList.push('relative');
+        }
+        if (!node.classList.contains('overflow-hidden')) {
+            newClassList.push('overflow-hidden');
+        }
+        node.classList.add(...newClassList);
+        node.appendChild(circle);
+        setTimeout(() => {
+            circle.remove();
+        }, 500);
+        if (containerRemoveTimer) {
+            clearTimeout(containerRemoveTimer);
+        }
+        containerRemoveTimer = setTimeout(() => {
+            node.classList.remove(...newClassList);
+        }, 500);
+    }
+    if (!isTouchEnabled) {
+        node.addEventListener('mousedown', scheduleStartRipple);
+        node.addEventListener('mousemove', mouseMove);
+    }
+    else {
+        node.addEventListener('touchstart', scheduleStartRipple);
+        node.addEventListener('touchmove', mouseMove);
+    }
+    return {
+        destroy() {
+            if (!isTouchEnabled) {
+                node.removeEventListener('mousedown', scheduleStartRipple);
+                node.removeEventListener('mousemove', mouseMove);
+            }
+            else {
+                node.removeEventListener('touchstart', scheduleStartRipple);
+                node.removeEventListener('touchmove', mouseMove);
+            }
+        }
+    };
+}
+export function isTouchDevice() {
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 || window.matchMedia("(pointer: coarse)").matches;
+}

package/dist/button/components/button/button.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">import { ripple } from "../../../actions/ripple.js";
+import Spinner from "../../../common/components/spinner/spinner.svelte";
+import Icon from "../../../icon/components/icon/icon.svelte";
+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() {
+    }
+  };
+}
+</script>
+
+{#snippet buttonContent()}
+	<div class="flex w-full items-center gap-2">
+		{#if spinner}
+			<Spinner className="w-4 h-4 {spinnerClassName}" />
+		{/if}
+		{#if !onlySpinner}
+			{#if iconPath}
+				<Icon path={iconPath} className={iconClassName} />
+			{/if}
+			{#if label}
+				<span>{label || ''}</span>
+			{/if}
+			{#if rightIconPath}
+				<Icon path={rightIconPath} className={rightIconClassName} />
+			{/if}
+		{/if}
+	</div>
+{/snippet}
+
+<button {id} {type} {form} class={className} {onclick} {disabled} use:maybeRipple>
+	{#if children}
+		{@render children()}
+	{:else}
+		{@render buttonContent()}
+	{/if}
+</button>

package/dist/button/components/button/button.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from '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 Button: $$__sveltets_2_IsomorphicComponent<{
+    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;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Button = InstanceType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,119 @@
+<script context="module" lang="ts"></script>
+
+<script lang="ts">import { ripple } from "../../../actions/ripple.js";
+import Icon from "../../../icon/components/icon/icon.svelte";
+import {
+  mdiCheckCircle,
+  mdiCheckCircleOutline,
+  mdiChevronRight
+} from "../../../icon/services/icon-path-service.js";
+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();
+</script>
+
+{#snippet itemInternal()}
+	<div class="flex w-full items-center gap-4">
+		{#if item?.iconPath}
+			<div>
+				<Icon path={item?.iconPath} className="{iconClassName} {item?.iconClassName}" />
+			</div>
+		{/if}
+		{#if item?.imgSrc}
+			<div>
+				<img
+					src={item?.imgSrc}
+					class="w-6 h-6 {imgClassName} {item?.imgClassName}"
+					alt="item-img-{index}"
+				/>
+			</div>
+		{/if}
+		<div class="flex-grow">
+			{#if item?.label}
+				<div class="text-ellipsis overflow-hidden {labelClassName} {item?.labelClassName || ''}">
+					{item?.label || ''}
+				</div>
+			{/if}
+			{#if item?.desc}
+				<div
+					class="text-ellipsis overflow-hidden text-gray-400 text-sm font-light {descClassName} {item?.descClassName ||
+						''}"
+				>
+					{item?.desc || ''}
+				</div>
+			{/if}
+		</div>
+		{#if hasCheck}
+			<div>
+				<Icon
+					path={checked ? checkIconPath : uncheckIconPath}
+					className="w-5 h-5 {checkClassName} {checked
+						? `text-primary ${checkIconClassName}`
+						: `text-gray-400 ${uncheckIconClassName}`}"
+				/>
+			</div>
+		{/if}
+
+		{#if hasArrow}
+			<div>
+				<Icon path={arrowIconPath} className="w-5 h-5 text-gray-500 {arrowClassName}  " />
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet buttonSnippet()}
+	<button
+		id="{listId}-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}"
+		role="menuitem"
+		onclick={(ev) => onclick(ev, item, index)}
+		disabled={item?.disabled}
+		use:ripple
+	>
+		{@render itemInternal()}
+	</button>
+{/snippet}
+
+{#snippet linkSnippet()}
+	<a
+		id="{listId}-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}"
+		role="menuitem"
+		target={item?.openInNewWindow ? '_blank' : ''}
+		onclick={(ev) => 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}

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

@@ -0,0 +1,60 @@
+export type ListItemType = {
+    id?: string;
+    label?: string;
+    labelClassName?: string;
+    desc?: string;
+    descClassName?: string;
+    url?: string;
+    onclick?: (ev: MouseEvent, item: ListItemType) => void;
+    disabled?: boolean;
+    iconPath?: string;
+    iconClassName?: string;
+    imgSrc?: string;
+    imgClassName?: string;
+    className?: string;
+    openInNewWindow?: boolean;
+    divider?: boolean;
+    hasArrow?: boolean;
+    arrowIconPath?: string;
+    arrowClassName?: string;
+};
+import type { Snippet } from '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 ButtonListItem: $$__sveltets_2_IsomorphicComponent<{
+    item: ListItemType;
+    index: number;
+    listId?: string;
+    className?: string;
+    hasCheck?: boolean;
+    checkIconPath?: string;
+    uncheckIconPath?: string;
+    checkIconClassName?: string;
+    uncheckIconClassName?: string;
+    checkClassName?: string;
+    iconClassName?: string;
+    imgClassName?: string;
+    labelClassName?: string;
+    descClassName?: string;
+    checked?: boolean;
+    hasArrow?: boolean;
+    arrowIconPath?: string;
+    arrowClassName?: string;
+    onclick?: (ev: MouseEvent, item: ListItemType, index: number) => void;
+    children?: Snippet<[ListItemType, number]>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ButtonListItem = InstanceType<typeof ButtonListItem>;
+export default ButtonListItem;

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

@@ -0,0 +1,185 @@
+<script lang="ts">import Icon from "../../../icon/components/icon/icon.svelte";
+import {
+  mdiCheckCircle,
+  mdiCheckCircleOutline,
+  mdiChevronDown
+} from "../../../icon/services/icon-path-service.js";
+import ButtonListItem from "../button-list-item/button-list-item.svelte";
+import { ripple } from "../../../actions/ripple.js";
+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>
+
+<div class="relative min-h-max {containerClassName}">
+	<button
+		type="button"
+		class="flex items-center flex-nowrap text-start {className}"
+		{style}
+		{id}
+		aria-expanded={expanded}
+		aria-haspopup="true"
+		onclick={hendleToggleDropdown}
+		use:ripple
+	>
+		<span class="sr-only">{screenOnlyDesc}</span>
+		<div class="flex items-center flex-nowrap gap-2">
+			{#if buttonChildren}
+				{@render buttonChildren()}
+			{:else}
+				{#if imgSrc}
+					<img class="h-8 w-8 rounded-full bg-gray-50 {imgClassName}" src={imgSrc} alt={imgAlt} />
+				{/if}
+				{#if leftIconPath}
+					<Icon path={leftIconPath} className={leftIconClassName} />
+				{/if}
+				{#if label}
+					<span class="text-nowrap {labelClassName}">
+						{label}
+					</span>
+				{/if}
+				{#if rightIconPath}
+					<Icon path={rightIconPath} className=" {rightIconClassName}" />
+				{/if}
+				{#if dropIconPath}
+					<Icon path={dropIconPath} className="text-gray-400 {dropIconClassName}" />
+				{/if}
+			{/if}
+		</div>
+	</button>
+	{#if dropdownState == MenuStateEnum.OPENED}
+		<button
+			type="button"
+			id="{id}-menu-backdrop"
+			class="cursor-auto fixed inset-0 z-10 {backgropClassName}"
+			onclick={hendleToggleDropdown}
+			tabindex="-1"
+		></button>
+	{/if}
+	<div
+		class="absolute mt-1 z-10 w-60 max-h-1/2vh overflow-y-auto origin-top-left rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none transition ease-out duration-100 {dropdownClassName} {dropdownState ==
+		MenuStateEnum.CLOSED
+			? `invisible transform opacity-0 scale-95 ${dropdownOpenClassName}`
+			: `transform opacity-100 scale-100 ${dropdownCloseClassName}`}"
+		style={dropdownStyle}
+		role="menu"
+		aria-orientation="vertical"
+		aria-labelledby={id}
+		tabindex="-1"
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			{#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}
+					<ButtonListItem
+						item={menu}
+						{index}
+						checked={selectedMenu == menu}
+						{hasCheck}
+						listId={id}
+						className={menuItemClassName}
+						{uncheckIconPath}
+						{checkIconPath}
+						{checkIconClassName}
+						{uncheckIconClassName}
+						{checkClassName}
+						iconClassName={listIconClassName}
+						imgClassName={listImgClassName}
+						labelClassName={listLabelClassName}
+						descClassName={listDescClassName}
+						children={menuItemInnerChildren}
+						onclick={handlemenuItemClick}
+					/>
+				{/if}
+			{/each}
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,61 @@
+import type { Snippet } from 'svelte';
+import type { ListItemType } from '../button-list-item/button-list-item.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 ButtonMenu: $$__sveltets_2_IsomorphicComponent<{
+    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;
+    label?: string;
+    labelClassName?: 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;
+    listLabelClassName?: string;
+    listDescClassName?: 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]>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ButtonMenu = InstanceType<typeof ButtonMenu>;
+export default ButtonMenu;

package/dist/button/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./components/button/button.svelte";
+export * from "./components/button-list-item/button-list-item.svelte";
+export * from "./components/button-menu/button-menu.svelte";

package/dist/button/index.js

@@ -0,0 +1,3 @@
+export * from './components/button/button.svelte'
+export * from './components/button-list-item/button-list-item.svelte'
+export * from './components/button-menu/button-menu.svelte'