@cloudparker/moldex.js 0.0.124 → 4.1.0

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

@@ -1,40 +1,56 @@
-<script module lang="ts"></script>
+<script module lang="ts">
+	export type CropperDialogPropsType = {
+		outputAspectRatio?: number;
+		outputWidth?: number;
+		outputFormat?: OutputImageFormats;
+		outputQuality?: number;
+		outputType?: 'file' | 'base64';
+		inputImageFile?: File | null;
+		className?: string;
+	};
+</script>
+
+<script lang="ts">
+	import EasyCropperjs from '@cloudparker/easy-cropperjs-svelte';
+	import type { DialogExports } from '../dialog/dialog.svelte';
+	import { OutputImageFormatEnum, type OutputImageFormats } from '../../../../../services';
+
+	let {
+		outputWidth,
+		outputFormat = OutputImageFormatEnum.WEBP,
+		outputQuality = 0.8,
+		outputType = 'file',
+		inputImageFile,
+		outputAspectRatio,
+		className,
+		setOnOkClick,
+		setResult,
+		closeDialog,
+		setOnData,
+		...props
+	}: CropperDialogPropsType & DialogExports = $props();
+
+	let easyCropperjsRef: EasyCropperjs | null = $state(null);
+
+	setOnOkClick(async () => {
+		console.log('setOnOkClick', easyCropperjsRef);
+		if (easyCropperjsRef) {
+			let targetOutoutImageFormat: any = outputFormat.split('/')[1] || 'webp';
+			let res = await easyCropperjsRef.crop({
+				outputWidth,
+				outputFormat: targetOutoutImageFormat,
+				outputQuality,
+				outputType
+			});
+			console.log('res', res);
+		}
+	});
 
-<script lang="ts">import EasyCropperjs from "@cloudparker/easy-cropperjs-svelte";
-import { OutputImageFormatEnum } from "../../../../../services";
-let {
-  outputWidth,
-  outputFormat = OutputImageFormatEnum.WEBP,
-  outputQuality = 0.8,
-  outputType = "file",
-  inputImageFile,
-  outputAspectRatio,
-  className,
-  setOnOkClick,
-  setResult,
-  closeDialog,
-  setOnData,
-  ...props
-} = $props();
-let easyCropperjsRef = $state(null);
-setOnOkClick(async () => {
-  console.log("setOnOkClick", easyCropperjsRef);
-  if (easyCropperjsRef) {
-    let targetOutoutImageFormat = outputFormat.split("/")[1] || "webp";
-    let res = await easyCropperjsRef.crop({
-      outputWidth,
-      outputFormat: targetOutoutImageFormat,
-      outputQuality,
-      outputType
-    });
-    console.log("res", res);
-  }
-});
-function handleCropped(result) {
-  console.log("handleCropped", result);
-  setResult(result);
-  closeDialog();
-}
+	function handleCropped(result: any) {
+		console.log('handleCropped', result);
+		setResult(result);
+		closeDialog();
+	}
 </script>
 
 <div class="h-full w-full overflow-hidden {className}">

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

@@ -1,182 +1,303 @@
-<script module lang="ts">import ButtonBack from "../../../button/components/button-back/button-back.svelte";
-import ButtonClose from "../../../button/components/button-close-icon/button-close-icon.svelte";
+<script module lang="ts">
+	import ButtonBack from '../../../button/components/button-back/button-back.svelte';
+	import ButtonClose from '../../../button/components/button-close-icon/button-close-icon.svelte';
+
+	/**
+	 * Return a Promise<boolean> value, whic=h will indiacate dialog to close or not.
+	 * false -> Dont close Dialog
+	 * true -> Close dialog
+	 */
+	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;
+	};
 </script>
 
-<script lang="ts">import Button from "../../../button/components/button/button.svelte";
-import {} from "svelte";
-import { mdiArrowLeft, mdiClose } from "../../../icon";
-import { DialogSizeEnum, isMobileScreen } from "../../../../../services";
-let {
-  backdropClassName = "",
-  bodyClassName = "",
-  bodyComponent,
-  cancelable = true,
-  scrollable = true,
-  children,
-  className = "",
-  component,
-  containerClassName = "",
-  footerClassName = "",
-  footerCloseButtonClassName = "",
-  footerCloseButtonLabel = "Close",
-  footerOkButtonClassName = "",
-  footerOkButtonEnabled = true,
-  footerOkButtonSpinner = false,
-  footerOkButtonType = "button",
-  footerOkButtonLabel = "Save",
-  hasFooter = false,
-  hasFooterCloseButton = false,
-  hasFooterOkButton = false,
-  hasFooterShadow = false,
-  hasHeader = false,
-  hasHeaderOkButton = false,
-  hasHeaderShadow = false,
-  hasSubtitle = false,
-  hasTitle = false,
-  headerOkButtonClassName = "",
-  headerOkButtonLabel = "",
-  headerOkButtonIconPath = "",
-  headerOkButtonIconClassName = "",
-  headerBackButtonClassName = "",
-  headerBackIconClassName = "",
-  headerBackIconPath = mdiArrowLeft,
-  headerClassName = "",
-  headerCloseButtonClassName = "",
-  headerCloseIconClassName = "",
-  headerCloseIconPath = mdiClose,
-  hasHeaderBack = isMobileScreen(),
-  hasHeaderClose = !isMobileScreen(),
-  size = isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM,
-  id = "",
-  onClose,
-  onCloseClick,
-  onOkClick,
-  onResult,
-  onData,
-  props = {},
-  targetFormId = void 0,
-  subtitle = "",
-  subtitleClassName = "",
-  title = "",
-  titleClassName = ""
-} = $props();
-let dialogExports = {
-  closeDialog,
-  setResult,
-  setOkSpinner,
-  setOkEnabled,
-  setOnCloseClick,
-  setOnOkClick,
-  setOnData,
-  setHeaderSnippet,
-  setFooterSnippet,
-  setDialogTitle
-};
-let isPlaced = $state(false);
-let isOpened = $state(false);
-let headerSnippet = $state(null);
-let footerSnippet = $state(null);
-let CustomComponent = $derived(component);
-let BodyComponent = $derived(bodyComponent);
-let result;
-let xsSizeClassName = "w-64";
-let smSizeClassName = "w-96";
-let mdSizeClassName = "w-1/3";
-let lgSizeClassName = "w-1/2";
-let xlSizeClassName = "w-7/10";
-let fullSizeClassName = "fixed inset-0 w-screen h-screen ";
-let screenSizeClassNameMap = {
-  xs: xsSizeClassName,
-  sm: smSizeClassName,
-  md: mdSizeClassName,
-  lg: lgSizeClassName,
-  xl: xlSizeClassName,
-  full: fullSizeClassName
-};
-let customTitle = $state("");
-export function toggleDialog() {
-  if (isOpened) {
-    closeDialog();
-  } else {
-    openDialog();
-  }
-}
-export function openDialog() {
-  isPlaced = true;
-  document.body.style.overflow = "hidden";
-  setTimeout(() => {
-    isOpened = true;
-  }, 0);
-}
-export function closeDialog(value) {
-  return new Promise((resolve) => {
-    isOpened = false;
-    document.body.style.overflow = "";
-    setTimeout(() => {
-      isPlaced = false;
-      onClose && onClose();
-      onResult && onResult(result || value);
-      resolve(result);
-    }, 300);
-  });
-}
-export function setResult(value) {
-  result = value;
-}
-export function setOkEnabled(value) {
-  footerOkButtonEnabled = value;
-}
-export function setOkSpinner(value) {
-  footerOkButtonSpinner = value;
-}
-export function setOnData(listener) {
-  onData = listener;
-}
-export function setOnOkClick(onclick) {
-  onOkClick = onclick;
-}
-export function setOnCloseClick(onclick) {
-  onCloseClick = onclick;
-}
-export function postData(data) {
-  onData && onData(data);
-}
-export function setHeaderSnippet(snippet) {
-  headerSnippet = snippet;
-}
-export function setFooterSnippet(snippet) {
-  footerSnippet = snippet;
-}
-export function setDialogTitle(dialogTitle) {
-  customTitle = dialogTitle;
-}
-function handleBackdropClick() {
-  if (cancelable) {
-    closeDialog();
-  }
-}
-async function handleClose(ev) {
-  if (onCloseClick) {
-    if (await onCloseClick(ev)) {
-      closeDialog();
-    }
-  } else {
-    closeDialog();
-  }
-}
-function handleKeyDown(event) {
-  if (event.key === "Escape" || event.key === "Esc") {
-    if (cancelable) {
-      event.stopPropagation();
-      closeDialog();
-    }
-  }
-}
-function handleOkClick(event) {
-  if (onOkClick) {
-    onOkClick(event, dialogExports);
-  }
-}
+<script lang="ts">
+	import Button from '../../../button/components/button/button.svelte';
+	import { type Component as ComponetType, type Snippet } from 'svelte';
+	import { mdiArrowLeft, mdiClose } from '../../../icon';
+	import { DialogSizeEnum, isMobileScreen } from '../../../../../services';
+
+	let {
+		backdropClassName = '',
+		bodyClassName = '',
+		bodyComponent,
+		cancelable = true,
+		scrollable = true,
+		children,
+		className = '',
+		component,
+		containerClassName = '',
+		footerClassName = '',
+		footerCloseButtonClassName = '',
+		footerCloseButtonLabel = 'Close',
+		footerOkButtonClassName = '',
+		footerOkButtonEnabled = true,
+		footerOkButtonSpinner = false,
+		footerOkButtonType = 'button',
+		footerOkButtonLabel = 'Save',
+		hasFooter = false,
+		hasFooterCloseButton = false,
+		hasFooterOkButton = false,
+		hasFooterShadow = false,
+		hasHeader = false,
+		hasHeaderOkButton = false,
+
+		hasHeaderShadow = false,
+		hasSubtitle = false,
+		hasTitle = false,
+		headerOkButtonClassName = '',
+		headerOkButtonLabel = '',
+		headerOkButtonIconPath = '',
+		headerOkButtonIconClassName = '',
+		headerBackButtonClassName = '',
+		headerBackIconClassName = '',
+		headerBackIconPath = mdiArrowLeft,
+		headerClassName = '',
+		headerCloseButtonClassName = '',
+		headerCloseIconClassName = '',
+		headerCloseIconPath = mdiClose,
+		hasHeaderBack = isMobileScreen(),
+		hasHeaderClose = !isMobileScreen(),
+		size = isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM,
+		id = '',
+		onClose,
+		onCloseClick,
+		onOkClick,
+		onResult,
+		onData,
+		props = {},
+		targetFormId = undefined,
+		subtitle = '',
+		subtitleClassName = '',
+		title = '',
+		titleClassName = ''
+	}: DialogProps = $props();
+
+	let dialogExports: DialogExports = {
+		closeDialog,
+		setResult,
+		setOkSpinner,
+		setOkEnabled,
+		setOnCloseClick,
+		setOnOkClick,
+		setOnData,
+		setHeaderSnippet,
+		setFooterSnippet,
+		setDialogTitle
+	};
+
+	let isPlaced: boolean = $state(false);
+	let isOpened: boolean = $state(false);
+
+	let headerSnippet: Snippet | null = $state(null);
+	let footerSnippet: Snippet | null = $state(null);
+
+	let CustomComponent: ComponetType | null = $derived(component);
+
+	let BodyComponent: ComponetType | null = $derived(bodyComponent);
+
+	let result: any;
+
+	let xsSizeClassName = 'w-64';
+	let smSizeClassName = 'w-96';
+	let mdSizeClassName = 'w-1/3';
+	let lgSizeClassName = 'w-1/2';
+	let xlSizeClassName = 'w-7/10';
+	let fullSizeClassName = 'fixed inset-0 w-screen h-screen ';
+
+	let screenSizeClassNameMap: { [key: string]: string } = {
+		xs: xsSizeClassName,
+		sm: smSizeClassName,
+		md: mdSizeClassName,
+		lg: lgSizeClassName,
+		xl: xlSizeClassName,
+		full: fullSizeClassName
+	};
+
+	let customTitle: string = $state('');
+
+	export function toggleDialog() {
+		if (isOpened) {
+			closeDialog();
+		} else {
+			openDialog();
+		}
+	}
+
+	export function openDialog() {
+		isPlaced = true;
+
+		// Disable background scroll
+		document.body.style.overflow = 'hidden';
+
+		setTimeout(() => {
+			isOpened = true;
+		}, 0);
+	}
+
+	export function closeDialog(value?: any): Promise<any> {
+		return new Promise((resolve) => {
+			isOpened = false;
+
+			// Re-enable background scroll
+			document.body.style.overflow = '';
+
+			setTimeout(() => {
+				isPlaced = false;
+				onClose && onClose();
+				onResult && onResult(result || value);
+				resolve(result);
+			}, 300);
+		});
+	}
+
+	export function setResult(value: any) {
+		result = value;
+	}
+
+	export function setOkEnabled(value: boolean) {
+		footerOkButtonEnabled = value;
+	}
+
+	export function setOkSpinner(value: boolean) {
+		footerOkButtonSpinner = value;
+	}
+
+	export function setOnData(listener: (data: any) => void) {
+		onData = listener;
+	}
+
+	export function setOnOkClick(
+		onclick: (event: MouseEvent | TouchEvent, options: DialogExports) => void
+	) {
+		onOkClick = onclick;
+	}
+
+	export function setOnCloseClick(onclick: DialogCloseButtonClickFunction) {
+		onCloseClick = onclick;
+	}
+
+	export function postData(data: any) {
+		onData && onData(data);
+	}
+
+	export function setHeaderSnippet(snippet: Snippet) {
+		headerSnippet = snippet;
+	}
+
+	export function setFooterSnippet(snippet: Snippet) {
+		footerSnippet = snippet;
+	}
+
+	export function setDialogTitle(dialogTitle: string) {
+		customTitle = dialogTitle;
+	}
+
+	function handleBackdropClick() {
+		if (cancelable) {
+			closeDialog();
+		}
+	}
+
+	async function handleClose(ev: MouseEvent | TouchEvent) {
+		if (onCloseClick) {
+			if (await onCloseClick(ev)) {
+				closeDialog();
+			}
+		} else {
+			closeDialog();
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape' || event.key === 'Esc') {
+			if (cancelable) {
+				event.stopPropagation();
+				closeDialog();
+			}
+		}
+	}
+
+	function handleOkClick(event: MouseEvent | TouchEvent) {
+		if (onOkClick) {
+			onOkClick(event, dialogExports);
+		}
+	}
 </script>
 
 {#snippet dialogContent()}

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

@@ -1,21 +1,33 @@
-<script lang="ts">import { Spinner } from "../../../spinner";
-let {
-  msg = "Please wait...",
-  msgClassName,
-  spinnerClassName,
-  containerClassName,
-  className,
-  setOnOkClick,
-  setResult,
-  closeDialog,
-  setOnData,
-  ...props
-} = $props();
-setOnData((data) => {
-  if (data?.msg) {
-    msg = data?.msg || "";
-  }
-});
+<script lang="ts">
+	import { Spinner } from '../../../spinner';
+	import type { DialogExports } from '../dialog/dialog.svelte';
+
+	type PropsType = {
+		msg?: string;
+		msgClassName?: string;
+		spinnerClassName?: string;
+		containerClassName?: string;
+		className?: string;
+	};
+
+	let {
+		msg = 'Please wait...',
+		msgClassName,
+		spinnerClassName,
+		containerClassName,
+		className,
+		setOnOkClick,
+		setResult,
+		closeDialog,
+		setOnData,
+		...props
+	}: PropsType & DialogExports = $props();
+
+	setOnData((data: any) => {
+		if (data?.msg) {
+			msg = data?.msg || '';
+		}
+	});
 </script>
 
 <div class="p-6 {containerClassName}">

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

@@ -1,10 +1,20 @@
-<script lang="ts">let { className, msg, setOnOkClick, setResult, closeDialog } = $props();
-$effect(() => {
-  setOnOkClick(() => {
-    setResult(true);
-    closeDialog();
-  });
-});
+<script lang="ts">
+	import type { DialogExports } from '../dialog/dialog.svelte';
+
+	type PropsType = {
+		className?: string;
+		msg?: string;
+	};
+
+	let { className, msg, setOnOkClick, setResult, closeDialog }: PropsType & DialogExports =
+		$props();
+
+	$effect(() => {
+		setOnOkClick(() => {
+			setResult(true);
+			closeDialog();
+		});
+	});
 </script>
 
 <div class="p-6 text-base-800 dark:text-base-300 {className}">