@cloudparker/moldex.js 4.1.5 → 4.1.7

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

@@ -1,208 +0,0 @@
-<script module lang="ts">
-	export type ButtonAppearance =
-		| 'none'
-		| 'primary'
-		| 'base'
-		| 'border'
-		| 'border-neutral'
-		| 'border-primary';
-
-	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-neutral-800 dark:text-neutral-300 hover:text-neutral-900 disabled:text-neutral-400 dark:disabled:text-neutral-500 dark:hover:text-neutral-200';
-			case 'base':
-				return 'text-neutral-800 dark:text-neutral-300 hover:text-neutral-900 disabled:text-neutral-400 dark:disabled:text-neutral-500 dark:hover:text-neutral-200 bg-neutral-200 dark:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 disabled:hover:bg-neutral-200 dark:disabled:hover:bg-neutral-700 ';
-			case 'primary':
-				return 'text-primary-100 hover:text-primary-50 bg-primary-600 hover:bg-primary-500 disabled:text-neutral-400 dark:disabled:text-neutral-500 disabled:bg-neutral-200 dark:disabled:bg-neutral-700 disabled:hover:bg-neutral-200 dark:disabled:hover:bg-neutral-700  ';
-			case 'border':
-			case 'border-neutral':
-				return 'border-2 text-neutral-800 dark:text-neutral-300 hover:text-neutral-900 disabled:text-neutral-400 dark:disabled:text-neutral-500 dark:hover:text-neutral-200 border-neutral-200 hover:border-neutral-300 dark:border-neutral-700 dark:hover:border-neutral-600 dark:disabled:border-neutral-200 dark:disabled:hover:border-neutral-200 dark:disabled:border-neutral-700 dark:disabled:hover:border-neutral-700  ';
-			case 'border-primary':
-				return 'border-2 text-primary hover:text-primary-500 disabled:text-neutral-400 dark:disabled:text-neutral-500 border-primary hover:border-primary-500 dark:border-primary-600 dark:hover:border-primary-500 dark:disabled:border-neutral-200 dark:disabled:hover:border-neutral-200 dark:disabled:border-neutral-700 dark:disabled:hover:border-neutral-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()}
-	{#if spinner}
-		<Spinner className="w-4 h-4 {spinnerClassName}" />
-	{/if}
-	{#if !onlySpinner}
-		{#if iconPath}
-			<Icon path={iconPath} className="w-6 h-6 {iconClassName}" />
-		{/if}
-		{#if label}
-			<span>{label || ''}</span>
-		{/if}
-		{#if rightIconPath}
-			<Icon path={rightIconPath} className="w-6 h-6 {rightIconClassName}" />
-		{/if}
-	{/if}
-{/snippet}
-
-{#if url}
-	<a
-		{id}
-		href={url}
-		{target}
-		class="relative w-max flex items-center justify-center gap-2 focus:outline-primary dark:focus:outline-primary rounded {btnSizeClassName} {btnAppearanceClassName} {className}"
-		onclick={onClick}
-		use:handleRipple
-		ondblclick={onDblClick}
-		oncontextmenu={onContextMenu}
-		ondrop={onDrop}
-		ondragstart={onDragStart}
-		ondragend={onDragEnd}
-		ondragenter={onDragEnter}
-		ondragleave={onDragLeave}
-		ondragover={onDragOver}
-		{title}
-	>
-		{#if children}
-			{@render children()}
-		{:else}
-			{@render buttonContent()}
-		{/if}
-		{#if hasOpenInNew}
-			<Icon path={openInNewIcon} className=" {openInNewIconClassName}" sizeClassName="w-4 h-4" />
-		{/if}
-	</a>
-{:else}
-	<button
-		{id}
-		{type}
-		{form}
-		{title}
-		class="relative flex items-center justify-center gap-2 focus:outline-primary dark:focus:outline-primary rounded {btnSizeClassName} {btnAppearanceClassName} {className}"
-		{disabled}
-		use:handleRipple
-		onclick={onClick}
-		ondblclick={onDblClick}
-		oncontextmenu={onContextMenu}
-		ondrop={onDrop}
-		ondragstart={onDragStart}
-		ondragend={onDragEnd}
-		ondragenter={onDragEnter}
-		ondragleave={onDragLeave}
-		ondragover={onDragOver}
-	>
-		{#if children}
-			{@render children?.()}
-		{:else}
-			{@render buttonContent()}
-		{/if}
-	</button>
-{/if}

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

@@ -1,42 +0,0 @@
-export type ButtonAppearance = 'none' | 'primary' | 'base' | 'border' | 'border-neutral' | 'border-primary';
-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;
-};
-import type { Snippet } from 'svelte';
-declare const Button: import("svelte").Component<ButtonProps, {}, "">;
-type Button = ReturnType<typeof Button>;
-export default Button;

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

@@ -1,46 +0,0 @@
-<script lang="ts">
-	import { isSmallScreen } from '../../../../../services/index.js';
-	import { mdiArrowLeft } from '../../../icon/index.js';
-
-	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 = $derived(isSmallScreen() || false);
-</script>
-
-{#snippet button()}
-	<Button
-		{id}
-		appearance="none"
-		size="none"
-		{iconPath}
-		className="w-12 h-12 rounded-full hover:bg-neutral-50 dark:hover:bg-neutral-900 {className}"
-		{iconClassName}
-		{onClick}
-	/>
-{/snippet}
-
-{#if onlyMobile}
-	{#if isMobileScreen}
-		{@render button()}
-	{/if}
-{:else}
-	{@render button()}
-{/if}

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

@@ -1,11 +0,0 @@
-type PropsType = {
-    id?: string;
-    iconPath?: string;
-    iconClassName?: string;
-    className?: string;
-    onlyMobile?: boolean;
-    onClick?: (ev: MouseEvent) => void;
-};
-declare const ButtonBack: import("svelte").Component<PropsType, {}, "">;
-type ButtonBack = ReturnType<typeof ButtonBack>;
-export default ButtonBack;

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

@@ -1,7 +0,0 @@
-<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/button-close.svelte.d.ts

@@ -1,4 +0,0 @@
-import { type ButtonProps } from '../button/button.svelte';
-declare const ButtonClose: import("svelte").Component<ButtonProps, {}, "">;
-type ButtonClose = ReturnType<typeof ButtonClose>;
-export default ButtonClose;

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

@@ -1,47 +0,0 @@
-<script lang="ts">
-	import { isSmallScreen } from '../../../../../services/index.js';
-	import { mdiClose } from '../../../icon/index.js';
-
- 
-	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(isSmallScreen() || false);
-
-</script>
-
-{#snippet button()}
-	<Button
-		{id}
-		{iconPath}
-		className="w-12 h-12 rounded-full text-neutral-500 hover:text-neutral-600 hover:bg-neutral-50 dark:hover:bg-neutral-900 transition-all {className}"
-		{iconClassName}
-		{onClick}
-	/>
-{/snippet}
-
-{#if onlyWeb}
-	{#if !isMobileScreen}
-		{@render button()}
-	{/if}
-{:else}
-	{@render button()}
-{/if}

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

@@ -1,11 +0,0 @@
-type PropsType = {
-    id?: string;
-    iconPath?: string;
-    iconClassName?: string;
-    className?: string;
-    onlyWeb?: boolean;
-    onClick?: (ev: MouseEvent) => void;
-};
-declare const ButtonCloseIcon: import("svelte").Component<PropsType, {}, "">;
-type ButtonCloseIcon = ReturnType<typeof ButtonCloseIcon>;
-export default ButtonCloseIcon;

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

@@ -1,152 +0,0 @@
-<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}>
-	<Button
-		{id}
-		{type}
-		{appearance}
-		{size}
-		className="flex items-center justify-center flex-nowrap text-start {className}"
-		onClick={toggleDropdown}
-		{label}
-		{disabled}
-		{...others}
-	>
-		{#if children}
-			{@render children()}
-		{/if}
-	</Button>
-
-	{#if placement}
-		<div
-			aria-label="backdrop"
-			id="{id}-dropdown-backdrop"
-			class="fixed inset-0 z-10 cursor-auto {backdropClassName}"
-			onmousedown={(e) => {
-				e.stopPropagation();
-				e.stopImmediatePropagation();
-				toggleDropdown(e);
-			}}
-			ontouchstart={(e) => {
-				e.stopPropagation();
-				e.stopImmediatePropagation();
-				toggleDropdown(e);
-			}}
-			onclick={(e) => {
-				e.stopPropagation();
-				e.stopImmediatePropagation();
-				toggleDropdown(e);
-			}}
-			tabindex="-1"
-			role="presentation"
-		></div>
-
-		<div
-			role="dialog"
-			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-neutral-800 dark:shadow-black {dropdownClassName} {dropdownState ===
-			DropdownStateEnum.OPENED
-				? `scale-100 transform opacity-100 ${dropdownOpenClassName}`
-				: `scale-60 transform opacity-0 ${dropdownCloseClassName}`}"
-			style={openMiddle
-				? 'top: 50%; transform: translateY(-50%);'
-				: openUpward
-					? 'bottom: 100%; margin-bottom: 4px;'
-					: 'top: 100%; margin-top: 4px;'}
-			tabindex="-1"
-		>
-			{@render dropdownSnippet?.()}
-		</div>
-	{/if}
-</div>

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

@@ -1,24 +0,0 @@
-import { type ButtonAppearance, type ButtonSize, type ButtonType } from '../button/button.svelte';
-import { 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';
-};
-declare const ButtonDropdown: import("svelte").Component<ButtonDropdownProps, {
-    toggleDropdown: (ev: MouseEvent | TouchEvent) => void;
-}, "">;
-type ButtonDropdown = ReturnType<typeof ButtonDropdown>;
-export default ButtonDropdown;