@cloudparker/moldex.js 4.1.7 → 4.1.9

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

@@ -0,0 +1,46 @@
+<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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { ButtonProps } from '../../types';
+	import Button 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

@@ -0,0 +1,4 @@
+import type { ButtonProps } from '../../types';
+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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { DropdownState } from '../../../../../types.js';
+	import { onMount, type Snippet } from 'svelte';
+	import type { ButtonAppearance, ButtonSize, ButtonType } from '../../types';
+	import Button from '../button/button.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(DropdownState.CLOSED);
+	let openUpward = $state(false);
+	let openMiddle = $state(false);
+	let buttonElement: HTMLDivElement;
+
+	export function toggleDropdown(ev: MouseEvent | TouchEvent) {
+		ev.stopPropagation();
+
+		if (placement) {
+			dropdownState = DropdownState.CLOSED;
+			setTimeout(() => (placement = false), 100);
+		} else {
+			placement = true;
+			setTimeout(() => (dropdownState = DropdownState.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 ===
+			DropdownState.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

@@ -0,0 +1,24 @@
+import { type Snippet } from 'svelte';
+import type { ButtonAppearance, ButtonSize, ButtonType } from '../../types';
+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;

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

@@ -0,0 +1,136 @@
+ 
+<script lang="ts">
+
+	import ButtonMenu from '../button-menu/button-menu.svelte';
+	import IconCircle from '../../../icon/components/icon-circle/icon-circle.svelte';
+	import { mdiCheckCircle, mdiCheckCircleOutline, mdiChevronRight } from '../../../icon/index.js';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import type { ButtonListItemProps } from '../../types';
+	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,
+		isCircularIcon,
+		circularIconClassName = '',
+		imgSrc,
+		hasArrow = false,
+		arrowIconPath = mdiChevronRight,
+		arrowClassName = '',
+		title = '',
+		subtitle = '',
+		titleClassName = '',
+		subtitleClassName = '',
+		disabled = false,
+		hasCheckbox,
+		checkboxClassName = '',
+		isChecked = false,
+		hasMenu,
+		menus,
+		menuIconPath,
+		menuIconClassName,
+		menuButtonClassName,
+		menuButtonLabel,
+		hasDivider,
+		dividerClassName,
+		onMenu,
+		onClick = (ev: MouseEvent) => {},
+		children
+	}: ButtonListItemProps = $props();
+</script>
+
+{#snippet itemInternal()}
+	{#if hasIcon && iconPath}
+		<div class="flex-none">
+			{#if isCircularIcon}
+				<IconCircle
+					{iconPath}
+					iconClassName=" {iconClassName}"
+					circleClassName=" {circularIconClassName}"
+				/>
+			{:else}
+				<Icon path={iconPath} className=" {iconClassName}" />
+			{/if}
+		</div>
+	{/if}
+
+	{#if hasImg && imgSrc}
+		<div class="flex-none">
+			<img src={imgSrc} class="w-6 h-6 {imgClassName} {imgClassName}" alt="item-img-{index}" />
+		</div>
+	{/if}
+
+	<div class="flex-grow min-w-0">
+		{#if title}
+			<div class="overflow-hidden whitespace-nowrap overflow-ellipsis {titleClassName}">
+				{title || ''}
+			</div>
+		{/if}
+		{#if subtitle}
+			<div
+				class="overflow-hidden whitespace-nowrap overflow-ellipsis text-neutral-400 dark:text-neutral-300 text-sm font-light {subtitleClassName}"
+			>
+				{subtitle || ''}
+			</div>
+		{/if}
+	</div>
+	{#if hasCheckbox}
+		<div class="flex-none">
+			<Icon
+				path={isChecked ? checkboxIconPath : uncheckboxIconPath}
+				className="w-5 h-5 {checkboxClassName} {isChecked
+					? `text-primary ${checkboxIconClassName}`
+					: `text-neutral-400 ${uncheckboxIconClassName}`}"
+			/>
+		</div>
+	{/if}
+
+	{#if hasArrow}
+		<div class="flex-none">
+			<Icon path={arrowIconPath} className="w-5 h-5 text-neutral-500 {arrowClassName}  " />
+		</div>
+	{/if}
+	{#if hasMenu}
+		<div class="flex-none">
+			<ButtonMenu
+				{menus}
+				{onMenu}
+				label={menuButtonLabel}
+				iconPath={menuIconPath}
+				{menuIconClassName}
+				className={menuButtonClassName}
+			/>
+		</div>
+	{/if}
+{/snippet}
+
+<Button
+	id="{id}-list-item-{index}"
+	type="button"
+	className="w-full !text-start !justify-start gap-4 hover:bg-neutral-50 transition rounded-none dark:hover:bg-neutral-700 h-full {className}"
+	{onClick}
+	{disabled}
+	{appearance}
+	{size}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{@render itemInternal()}
+	{/if}
+</Button>
+{#if hasDivider}
+	<hr class=" {dividerClassName}" />
+{/if}

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

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

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import ButtonDropdown, {
+		type ButtonDropdownProps
+	} from '../button-dropdown/button-dropdown.svelte';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import type { Snippet } from 'svelte';
+	import ButtonListItem from '../button-list-item/button-list-item.svelte';
+	 
+	import { mdiDotsHorizontal } from '../../../icon/index.js';
+	import type { ButtonAppearance, ButtonProps, ButtonSize, Menu } from '../../types';
+	type Props = {
+		label?: string;
+		className?: string;
+		appearance?: ButtonAppearance;
+		size?: ButtonSize;
+		children?: Snippet;
+		iconPath?: string;
+		iconClassName?: string;
+		menus?: string[] | Menu[];
+		onMenu?: (ev: MouseEvent, menu: string | Menu) => void;
+		dropdownClassName?: string;
+		menuIconClassName?: string;
+		disabled?: boolean;
+	};
+
+	let {
+		label,
+		className,
+		appearance,
+		size,
+		children,
+		iconPath = mdiDotsHorizontal,
+		iconClassName,
+		menus,
+		onMenu,
+		dropdownClassName,
+		menuIconClassName,
+		disabled,
+		...others
+	}: ButtonDropdownProps & ButtonProps & Props = $props();
+
+	let buttonDropdownRef: ButtonDropdown;
+
+	let items: Menu[] = $derived.by(() => {
+		if (menus && typeof menus[0] == 'string') {
+			let array = (menus as string[]).map((name: string) => {
+				return {
+					_id: name,
+					title: name
+				} as Menu;
+			});
+			return array;
+		}
+		return (menus || []) as Menu[];
+	});
+
+	function handleItemClick(ev: MouseEvent, menuItem: Menu, index: number) {
+		let menu = (menus || [])[index];
+		if (menu) {
+			onMenu && onMenu(ev, menu);
+			buttonDropdownRef && buttonDropdownRef.toggleDropdown(ev);
+		}
+	}
+</script>
+
+{#snippet dropdownView()}
+	<div class="py-2">
+		{#each items as item, index}
+			{#if item.title == '-'}
+				<hr />
+			{:else}
+				<ButtonListItem
+					{...item}
+					className=""
+					iconClassName={menuIconClassName}
+					onClick={(ev) => handleItemClick(ev, item, index)}
+				/>
+			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+<ButtonDropdown
+	bind:this={buttonDropdownRef}
+	dropdownSnippet={dropdownView}
+	{className}
+	{appearance}
+	{size}
+	{dropdownClassName}
+	{disabled}
+	{...others}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if label}
+			<div>
+				{label || ''}
+			</div>
+		{/if}
+		<div>
+			<Icon path={iconPath} className={iconClassName} />
+		</div>
+	{/if}
+</ButtonDropdown>

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

@@ -0,0 +1,21 @@
+import { type ButtonDropdownProps } from '../button-dropdown/button-dropdown.svelte';
+import type { Snippet } from 'svelte';
+import type { ButtonAppearance, ButtonProps, ButtonSize, Menu } from '../../types';
+type Props = {
+    label?: string;
+    className?: string;
+    appearance?: ButtonAppearance;
+    size?: ButtonSize;
+    children?: Snippet;
+    iconPath?: string;
+    iconClassName?: string;
+    menus?: string[] | Menu[];
+    onMenu?: (ev: MouseEvent, menu: string | Menu) => void;
+    dropdownClassName?: string;
+    menuIconClassName?: string;
+    disabled?: boolean;
+};
+type $$ComponentProps = ButtonDropdownProps & ButtonProps & Props;
+declare const ButtonMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type ButtonMenu = ReturnType<typeof ButtonMenu>;
+export default ButtonMenu;

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { ButtonProps } from "../../types";
+	import Button from "../button/button.svelte";
+
+ 
+	let { className, ...props }: ButtonProps = $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,4 @@
+import type { ButtonProps } from "../../types";
+declare const ButtonOk: import("svelte").Component<ButtonProps, {}, "">;
+type ButtonOk = ReturnType<typeof ButtonOk>;
+export default ButtonOk;

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

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import ButtonDropdown from '../button-dropdown/button-dropdown.svelte';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import SearchField from '../../../input/components/search-field/search-field.svelte';
+	import type { Snippet } from 'svelte';
+
+	import { mdiMagnify } from '../../../icon/index.js';
+	import type { ButtonAppearance, ButtonProps, ButtonSize } from '../../types';
+	import type { InputFieldAppearance, InputFieldSize } from '../../../input/types';
+	
+	type Props = {
+		searchAppearance?: InputFieldAppearance;
+		searchClassName?: string;
+		searchSize?: InputFieldSize;
+		onSearch?: (searchText: string) => void;
+
+		className?: string;
+		appearance?: ButtonAppearance;
+		size?: ButtonSize;
+		children?: Snippet;
+		iconClassName?: string;
+
+		dropdownClassName?: string;
+		searchText?: string;
+		placeholder?: string;
+	};
+
+	let {
+		searchText = $bindable(''),
+		searchClassName,
+		searchAppearance,
+		searchSize,
+		onSearch,
+		className,
+		appearance,
+		size,
+		children,
+		iconClassName,
+		dropdownClassName,
+		placeholder,
+		...others
+	}: ButtonProps & Props = $props();
+</script>
+
+{#snippet dropdownSearch()}
+	<div class="p-4">
+		<SearchField
+			value={searchText}
+			{onSearch}
+			autofocus
+			className="min-w-52 {searchClassName}"
+			appearance={searchAppearance}
+			size={searchSize}
+			{placeholder}
+		/>
+	</div>
+{/snippet}
+
+<ButtonDropdown
+	dropdownSnippet={dropdownSearch}
+	{className}
+	{appearance}
+	{size}
+	{dropdownClassName}
+	{...others}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<Icon path={mdiMagnify} className="{iconClassName} {searchText ? '!text-primary' : ''}" />
+	{/if}
+</ButtonDropdown>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { ButtonAppearance, ButtonProps, ButtonSize } from '../../types';
+import type { InputFieldAppearance, InputFieldSize } from '../../../input/types';
+type Props = {
+    searchAppearance?: InputFieldAppearance;
+    searchClassName?: string;
+    searchSize?: InputFieldSize;
+    onSearch?: (searchText: string) => void;
+    className?: string;
+    appearance?: ButtonAppearance;
+    size?: ButtonSize;
+    children?: Snippet;
+    iconClassName?: string;
+    dropdownClassName?: string;
+    searchText?: string;
+    placeholder?: string;
+};
+type $$ComponentProps = ButtonProps & Props;
+declare const ButtonSearch: import("svelte").Component<$$ComponentProps, {}, "searchText">;
+type ButtonSearch = ReturnType<typeof ButtonSearch>;
+export default ButtonSearch;