@cloudparker/moldex.js 4.1.7 → 4.1.8

package/dist/views/core/dialog/components/picker-dialog/picker-dialog.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import { showToast } from '../../../../../services/index.js';
+	import ButtonListItem from '../../../button/components/button-list-item/button-list-item.svelte';
+	import ButtonSearch from '../../../button/components/button-search/button-search.svelte';
+	import VirtualScrollingList from '../../../common/components/virtual-scrolling/virtual-scrolling-list.svelte';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import {
+		mdiCheckCircle,
+		mdiCheckCircleOutline,
+		mdiChevronRight
+	} from '../../../icon/index.js';
+	import { onMount } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import type { DialogExports, PickerDialogProps } from '../../types';
+
+	let {
+		value,
+		items = [],
+		multiple = false,
+		identityFieldName = '_id',
+		titleFieldName = 'name',
+		subtitleFieldName,
+		searchFieldName = 'name',
+		hasCheckbox,
+		hasArrow,
+		maxlength = 0,
+		maxlengthMsg = 'Selection limit reached!',
+		checkboxIconPath = mdiCheckCircle,
+		uncheckboxIconPath = mdiCheckCircleOutline,
+		arrowIconPath = mdiChevronRight,
+		checkboxIconClassName = '',
+		uncheckboxIconClassName = '',
+		arrowClassName = '',
+		checkboxClassName = '',
+		isCircularIcon,
+		hasIcon,
+		iconClassName,
+		circularIconClassName,
+		iconPath,
+		itemTileSnippet,
+		closeDialog,
+		setResult,
+		setOnOkClick,
+		setHeaderSnippet,
+		setDialogTitle
+	}: DialogExports & PickerDialogProps = $props();
+
+	let containerHeight: number = $state(0);
+
+	// Reactive store for selected items
+	let selectedSet: SvelteSet<any> = $state(
+		value ? new SvelteSet(Array.isArray(value) ? value : [value]) : new SvelteSet()
+	);
+
+	let searchText: string = $state('');
+
+	let records: any[] = $derived.by(() => {
+		if (items && typeof items[0] == 'string') {
+			return items.map((name) => {
+				return {
+					[identityFieldName]: name,
+					[titleFieldName]: name
+				};
+			});
+		}
+
+		return [...items];
+	});
+
+	let filteredRecords: any[] = $derived.by(() => {
+		if (searchText) {
+			return records.filter((item) => {
+				return (item[searchFieldName] || '').toLowerCase().indexOf(searchText) >= 0;
+			});
+		}
+		return records;
+	});
+
+	// Handle item selection
+	function handleItemClick(ev: Event, item: any, index: number) {
+		let itemId = item[identityFieldName];
+		// console.log('handleItemClick', { itemId, multiple });
+		if (!multiple) {
+			if (selectedSet.has(itemId)) {
+				selectedSet.delete(itemId);
+				setResult(undefined);
+			} else {
+				selectedSet.add(itemId);
+				setResult(itemId);
+			}
+			closeDialog();
+		} else {
+			// Multiple selection: add/remove item
+			if (selectedSet.has(itemId)) {
+				selectedSet.delete(itemId);
+			} else {
+				if (selectedSet.size >= maxlength) {
+					showToast({ msg: maxlengthMsg });
+				} else {
+					selectedSet.add(itemId);
+				}
+			}
+			if (selectedSet.size) {
+				setDialogTitle(`Selected (${selectedSet.size})`);
+			} else {
+				setDialogTitle('');
+			}
+		}
+	}
+
+	function handleOkClick(ev: MouseEvent | TouchEvent) {
+		if (multiple) {
+			closeDialog(Array.from(selectedSet));
+		}
+	}
+
+	function handleSearch(txt: string) {
+		searchText = txt;
+	}
+
+	onMount(() => {
+		setOnOkClick(handleOkClick);
+		setHeaderSnippet(headerSnippet);
+	});
+</script>
+
+{#snippet headerSnippet()}
+	<ButtonSearch className="rounded-full !p-3 " onSearch={handleSearch} />
+{/snippet}
+
+<div class="mb-4 h-full min-h-96" bind:clientHeight={containerHeight}>
+	<VirtualScrollingList items={filteredRecords} {containerHeight} itemHeight={56}>
+		{#snippet itemSnippet(item: any, index: number)}
+			{@const isSelected = selectedSet.has(item[identityFieldName])}
+
+			{#if itemTileSnippet}
+				<ButtonListItem onClick={(ev) => handleItemClick(ev, item, index)}>
+					{@render itemTileSnippet(item, index)}
+					{#if hasCheckbox}
+						<div>
+							<Icon
+								path={isSelected ? checkboxIconPath : uncheckboxIconPath}
+								className="w-5 h-5 {checkboxClassName} {isSelected
+									? `text-primary ${checkboxIconClassName}`
+									: `text-neutral-400 ${uncheckboxIconClassName}`}"
+							/>
+						</div>
+					{/if}
+
+					{#if hasArrow}
+						<div>
+							<Icon path={arrowIconPath} className="w-5 h-5 text-neutral-500 {arrowClassName}  " />
+						</div>
+					{/if}
+				</ButtonListItem>
+			{:else}
+				<ButtonListItem
+					className="h-full"
+					onClick={(ev) => handleItemClick(ev, item, index)}
+					title={item[titleFieldName]}
+					subtitle={item[subtitleFieldName || ''] || ''}
+					{hasCheckbox}
+					{hasArrow}
+					isChecked={isSelected}
+					{checkboxIconPath}
+					{uncheckboxIconPath}
+					{checkboxIconClassName}
+					{uncheckboxIconClassName}
+					{checkboxClassName}
+					{arrowIconPath}
+					{arrowClassName}
+					{hasIcon}
+					{isCircularIcon}
+					{circularIconClassName}
+					{iconClassName}
+					{iconPath}
+				/>
+			{/if}
+		{/snippet}
+	</VirtualScrollingList>
+</div>

package/dist/views/core/dialog/components/picker-dialog/picker-dialog.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { DialogExports, PickerDialogProps } from '../../types';
+type $$ComponentProps = DialogExports & PickerDialogProps;
+declare const PickerDialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type PickerDialog = ReturnType<typeof PickerDialog>;
+export default PickerDialog;

package/dist/views/core/dialog/components/text-field-dialog/text-field-dialog.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { showToast } from '../../../../../services/index.js';
+	import type { InputValue } from '../../../input';
+	import TextField from '../../../input/components/text-field/text-field.svelte';
+	import type { DialogExports } from '../../types';
+
+	type PropsType = {
+		value?: InputValue;
+		label?: string;
+		name?: string;
+		maxlength?: number;
+		className?: string;
+		autofocus?: boolean;
+		required?: boolean;
+	};
+
+	let {
+		value = $bindable(''),
+		label,
+		name,
+		maxlength,
+		className,
+		autofocus,
+		required,
+		setOnOkClick,
+		setResult,
+		closeDialog,
+		...props
+	}: PropsType & DialogExports = $props();
+
+	function handleSubmit(ev: SubmitEvent) {
+		ev?.preventDefault();
+		value = ((value as string) || '').trim();
+		if (required && !value) {
+			showToast({ msg: 'This is a required field!' });
+		} else {
+			setResult(value);
+			closeDialog();
+		}
+	}
+</script>
+
+<div class="p-6">
+	<form id="text-field-dialog-form" onsubmit={handleSubmit}>
+		<TextField
+			{...props}
+			{label}
+			{name}
+			{maxlength}
+			{className}
+			{autofocus}
+			{required}
+			bind:value
+		/>
+	</form>
+</div>

package/dist/views/core/dialog/components/text-field-dialog/text-field-dialog.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { InputValue } from '../../../input';
+import type { DialogExports } from '../../types';
+type PropsType = {
+    value?: InputValue;
+    label?: string;
+    name?: string;
+    maxlength?: number;
+    className?: string;
+    autofocus?: boolean;
+    required?: boolean;
+};
+type $$ComponentProps = PropsType & DialogExports;
+declare const TextFieldDialog: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TextFieldDialog = ReturnType<typeof TextFieldDialog>;
+export default TextFieldDialog;

package/dist/views/core/dialog/components/textarea-field-dialog/textarea-field-dialog.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { showToast } from '../../../../../services/index.js';
+	import type { InputValue } from '../../../input';
+	import TextareaField from '../../../input/components/textarea-field/textarea-field.svelte';
+	import type { DialogExports } from '../../types';
+
+	type PropsType = {
+		value?: InputValue;
+		label?: string;
+		name?: string;
+		maxlength?: number;
+		className?: string;
+		autofocus?: boolean;
+		required?: boolean;
+	};
+
+	let {
+		value = $bindable(''),
+		label,
+		name,
+		maxlength,
+		className,
+		autofocus,
+		required,
+		setOnOkClick,
+		setResult,
+		closeDialog,
+		...props
+	}: PropsType & DialogExports = $props();
+
+	function handleSubmit(ev: SubmitEvent) {
+		ev?.preventDefault();
+		value = ((value as string) || '').trim();
+		if (required && !value) {
+			showToast({ msg: 'This is a required field!' });
+		} else {
+			setResult(value);
+			closeDialog();
+		}
+	}
+</script>
+
+<div class="p-6">
+	<form id="textarea-field-dialog-form" onsubmit={handleSubmit}>
+		<TextareaField
+			{...props}
+			{label}
+			{name}
+			{maxlength}
+			{className}
+			{autofocus}
+			{required}
+			bind:value
+		/>
+	</form>
+</div>

package/dist/views/core/dialog/components/textarea-field-dialog/textarea-field-dialog.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { InputValue } from '../../../input';
+import type { DialogExports } from '../../types';
+type PropsType = {
+    value?: InputValue;
+    label?: string;
+    name?: string;
+    maxlength?: number;
+    className?: string;
+    autofocus?: boolean;
+    required?: boolean;
+};
+type $$ComponentProps = PropsType & DialogExports;
+declare const TextareaFieldDialog: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TextareaFieldDialog = ReturnType<typeof TextareaFieldDialog>;
+export default TextareaFieldDialog;

package/dist/views/core/dialog/index.d.ts

@@ -0,0 +1,9 @@
+export { default as CropperDialog } from './components/cropper-dialog/cropper-dialog.svelte';
+export { default as Dialog } from './components/dialog/dialog.svelte';
+export { default as LoadingDialog } from './components/loading-dialog/loading-dialog.svelte';
+export { default as MsgDialog } from './components/msg-dialog/msg-dialog.svelte';
+export { default as NumberFieldDialog } from './components/number-field-dialog/number-field-dialog.svelte';
+export { default as PickerDialog } from './components/picker-dialog/picker-dialog.svelte';
+export { default as TextFieldDialog } from './components/text-field-dialog/text-field-dialog.svelte';
+export { default as TextareaFieldDialog } from './components/textarea-field-dialog/textarea-field-dialog.svelte';
+export * from './types';

package/dist/views/core/dialog/index.js

@@ -0,0 +1,9 @@
+export { default as CropperDialog } from './components/cropper-dialog/cropper-dialog.svelte';
+export { default as Dialog } from './components/dialog/dialog.svelte';
+export { default as LoadingDialog } from './components/loading-dialog/loading-dialog.svelte';
+export { default as MsgDialog } from './components/msg-dialog/msg-dialog.svelte';
+export { default as NumberFieldDialog } from './components/number-field-dialog/number-field-dialog.svelte';
+export { default as PickerDialog } from './components/picker-dialog/picker-dialog.svelte';
+export { default as TextFieldDialog } from './components/text-field-dialog/text-field-dialog.svelte';
+export { default as TextareaFieldDialog } from './components/textarea-field-dialog/textarea-field-dialog.svelte';
+export * from './types';

package/dist/views/core/dialog/types.d.ts

@@ -0,0 +1,105 @@
+import type { DialogSizeEnum, OutputImageFormats } from "../../../services";
+import type { Snippet } from "svelte";
+export type CropperDialogProps = {
+    outputAspectRatio?: number;
+    outputWidth?: number;
+    outputFormat?: OutputImageFormats;
+    outputQuality?: number;
+    outputType?: 'file' | 'base64';
+    inputImageFile?: File | null;
+    className?: string;
+};
+export type DialogCloseButtonClickFunction = (ev: MouseEvent | TouchEvent) => Promise<boolean>;
+export type DialogSize = DialogSizeEnum.XS | DialogSizeEnum.SM | DialogSizeEnum.MD | DialogSizeEnum.LG | DialogSizeEnum.XL | DialogSizeEnum.FULL;
+export type DialogProps = {
+    backdropClassName?: string;
+    bodyClassName?: string;
+    bodyComponent?: any;
+    cancelable?: boolean;
+    scrollable?: boolean;
+    children?: Snippet;
+    className?: string;
+    component?: any;
+    containerClassName?: string;
+    footerClassName?: string;
+    footerCloseButtonClassName?: string;
+    footerCloseButtonLabel?: string;
+    footerOkButtonClassName?: string;
+    footerOkButtonEnabled?: boolean;
+    footerOkButtonSpinner?: boolean;
+    footerOkButtonType?: 'button' | 'submit' | 'reset';
+    footerOkButtonLabel?: string;
+    hasFooter?: boolean;
+    hasFooterCloseButton?: boolean;
+    hasFooterOkButton?: boolean;
+    hasFooterShadow?: boolean;
+    hasHeader?: boolean;
+    hasHeaderBack?: boolean;
+    hasHeaderClose?: boolean;
+    hasHeaderShadow?: boolean;
+    hasSubtitle?: boolean;
+    hasTitle?: boolean;
+    hasHeaderOkButton?: boolean;
+    headerBackButtonClassName?: string;
+    headerBackIconClassName?: string;
+    headerBackIconPath?: string;
+    headerClassName?: string;
+    headerCloseButtonClassName?: string;
+    headerCloseIconClassName?: string;
+    headerCloseIconPath?: string;
+    headerOkButtonClassName?: string;
+    headerOkButtonLabel?: string;
+    headerOkButtonIconPath?: string;
+    headerOkButtonIconClassName?: string;
+    id?: string;
+    onClose?: () => void;
+    onCloseClick?: DialogCloseButtonClickFunction;
+    onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExports) => void;
+    onResult?: (value: any) => void;
+    onData?: (data: any) => void;
+    props?: any;
+    size?: DialogSize;
+    targetFormId?: string;
+    subtitle?: string;
+    subtitleClassName?: string;
+    title?: string;
+    titleClassName?: string;
+};
+export type DialogExports = {
+    closeDialog: (result?: any) => void;
+    setResult: (result: any) => void;
+    setOkSpinner: (enable: boolean) => void;
+    setOkEnabled: (enable: boolean) => void;
+    setOnOkClick: (onclick: (ev: MouseEvent | TouchEvent) => void) => void;
+    setOnCloseClick: (onclick: DialogCloseButtonClickFunction) => void;
+    setOnData: (listener: (data: any) => void) => void;
+    setHeaderSnippet: (snippet: Snippet) => void;
+    setFooterSnippet: (snippet: Snippet) => void;
+    setDialogTitle: (title: string) => void;
+};
+export type PickerDialogProps = {
+    items?: string[] | any[];
+    multiple?: boolean;
+    value?: any;
+    identityFieldName?: string;
+    titleFieldName?: string;
+    searchFieldName?: string;
+    subtitleFieldName?: string;
+    hasCheckbox?: boolean;
+    hasArrow?: boolean;
+    maxlength?: number;
+    maxlengthMsg?: string;
+    checkboxIconPath?: string;
+    uncheckboxIconPath?: string;
+    checkboxIconClassName?: string;
+    uncheckboxIconClassName?: string;
+    checkboxClassName?: string;
+    arrowIconPath?: string;
+    arrowClassName?: string;
+    hasIcon?: boolean;
+    iconPath?: string;
+    iconClassName?: string;
+    isCircularIcon?: boolean;
+    circularIconClassName?: string;
+    itemTileSnippet?: Snippet<[item: any, index: number]>;
+};

package/dist/views/core/dialog/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type PositionType = 'left' | 'right' | 'top' | 'bottom';
+
+	type PropsType = {
+		backdropClassName?: string;
+		children?: Snippet;
+		className?: string;
+		containerClassName?: string;
+		drawerClassName?: string;
+		floatingSnippet?: Snippet;
+		id?: string;
+		position?: PositionType;
+	};
+
+	let {
+		backdropClassName = '',
+		children,
+		className = '',
+		containerClassName = '',
+		drawerClassName = '',
+		floatingSnippet,
+		id = '',
+		position = 'left'
+	}: PropsType = $props();
+
+	let isPlaced: boolean = $state(false);
+	let isOpened: boolean = $state(false);
+
+	function handelBackdropClick() {
+		toggleDrawer();
+	}
+
+	export function toggleDrawer() {
+		if (!isPlaced) {
+			openDrawer();
+		} else {
+			closeDrawer();
+		}
+	}
+
+	export function openDrawer() {
+		isPlaced = true;
+		setTimeout(() => {
+			isOpened = true;
+		}, 0);
+	}
+
+	export function closeDrawer() {
+		isOpened = false;
+		setTimeout(() => {
+			isPlaced = false;
+		}, 300);
+	}
+</script>
+
+{#if isPlaced}
+	<div {id} class="relative z-30 {containerClassName}" role="dialog" aria-modal="true">
+		<!-- Backdrop -->
+		<div
+			class="fixed inset-0 bg-neutral-900/10 bg-neutral-50/10 transition-opacity ease-linear duration-300 {isOpened
+				? 'opacity-100'
+				: 'opacity-0'}  {backdropClassName}"
+			aria-hidden="true"
+		></div>
+		<!-- Drawer -->
+		<div
+			class="fixed inset-0 flex
+				{position === 'right' ? 'flex-row' : ''}
+				{position === 'right' ? 'flex-row-reverse' : ''}
+				{position === 'top' ? 'flex-col' : ''}
+				{position === 'bottom' ? 'flex-col-reverse' : ''}"
+		>
+			<div
+				class="relative flex transition ease-in-out duration-300 transform
+				{position === 'right' ? 'flex-row' : ''}
+				{position === 'right' ? 'flex-row-reverse' : ''}
+				{position === 'top' ? 'flex-col' : ''}
+				{position === 'bottom' ? 'flex-col-reverse' : ''}
+				{position === 'left' ? (isOpened ? 'translate-x-0' : '-translate-x-full') : ''}
+				{position === 'right' ? (isOpened ? 'translate-x-0' : 'translate-x-full') : ''}
+				{position === 'top' ? (isOpened ? 'translate-y-0' : '-translate-y-full') : ''}
+				{position === 'bottom' ? (isOpened ? 'translate-y-0' : 'translate-y-full') : ''}
+				{drawerClassName} "
+			>
+				<div
+					class="grow w-72 bg-white dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 border-neutral-100 dark:border-neutral-700 {className}"
+				>
+					{#if children}
+						{@render children()}
+					{/if}
+				</div>
+				<div class=" ">
+					{#if floatingSnippet}
+						{@render floatingSnippet()}
+					{/if}
+				</div>
+			</div>
+
+			<button
+				class="flex-grow cursor-auto"
+				type="button"
+				onclick={handelBackdropClick}
+				aria-label="Close drawer"
+				title="Close drawer"
+			></button>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type PositionType = 'left' | 'right' | 'top' | 'bottom';
+type PropsType = {
+    backdropClassName?: string;
+    children?: Snippet;
+    className?: string;
+    containerClassName?: string;
+    drawerClassName?: string;
+    floatingSnippet?: Snippet;
+    id?: string;
+    position?: PositionType;
+};
+declare const Drawer: import("svelte").Component<PropsType, {
+    toggleDrawer: () => void;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+}, "">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/views/core/drawer/index.d.ts

@@ -0,0 +1,2 @@
+import Drawer from "./components/drawer/drawer.svelte";
+export { Drawer };

package/dist/views/core/drawer/index.js

@@ -0,0 +1,2 @@
+import Drawer, {} from "./components/drawer/drawer.svelte";
+export { Drawer };

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	type IconPropsType = {
+		path: string;
+		className?: string;
+		sizeClassName?: string;
+		size?: number;
+		fill?: string;
+		viewBox?: string;
+		color?: string;
+	};
+
+	let {
+		path,
+		className = '',
+		size = 24,
+		fill = 'currentColor',
+		viewBox = '',
+		color,
+		sizeClassName = 'w-6 h-6'
+	}: IconPropsType = $props();
+
+	let viewBoxDerived = $derived(viewBox || `0 0 ${size} ${size}`);
+</script>
+
+<svg class="align-middle {sizeClassName} {className}" viewBox={viewBoxDerived} fill={color || fill}>
+	<path d={path} />
+</svg>

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

@@ -0,0 +1,12 @@
+type IconPropsType = {
+    path: string;
+    className?: string;
+    sizeClassName?: string;
+    size?: number;
+    fill?: string;
+    viewBox?: string;
+    color?: string;
+};
+declare const Icon: import("svelte").Component<IconPropsType, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/views/core/icon/components/icon-circle/icon-circle.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import Icon from '../icon/icon.svelte';
+
+	type Props = {
+		iconPath?: string;
+		iconClassName?: string;
+		circleClassName?: string;
+	};
+
+	let { circleClassName, iconPath, iconClassName = 'w-5 h-5 text-primary' }: Props = $props();
+</script>
+
+<div
+	class="aspect-square bg-primary-100 rounded-full w-10 h-10 flex items-center justify-center {circleClassName}"
+>
+	<Icon path={iconPath!} className=" text-primary {iconClassName}" />
+</div>

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

@@ -0,0 +1,8 @@
+type Props = {
+    iconPath?: string;
+    iconClassName?: string;
+    circleClassName?: string;
+};
+declare const IconCircle: import("svelte").Component<Props, {}, "">;
+type IconCircle = ReturnType<typeof IconCircle>;
+export default IconCircle;

package/dist/views/core/icon/index.d.ts

@@ -0,0 +1,4 @@
+import Icon from './components/icon/icon.svelte';
+import IconCircle from './components/icon-circle/icon-circle.svelte';
+export * from './services/icon-path-service.js';
+export { Icon, IconCircle, };

package/dist/views/core/icon/index.js

@@ -0,0 +1,4 @@
+import Icon from './components/icon/icon.svelte';
+import IconCircle from './components/icon-circle/icon-circle.svelte';
+export * from './services/icon-path-service.js';
+export { Icon, IconCircle, };