@cloudparker/moldex.js 0.0.29 → 0.0.30

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

@@ -1,163 +1,250 @@
-<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";
-export var DialogSizeEnum = /* @__PURE__ */ ((DialogSizeEnum2) => {
-  DialogSizeEnum2["SM"] = "sm";
-  DialogSizeEnum2["MD"] = "md";
-  DialogSizeEnum2["LG"] = "lg";
-  DialogSizeEnum2["FULL"] = "full";
-  return DialogSizeEnum2;
-})(DialogSizeEnum || {});
+<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
+	 */
+	export type DialogCloseButtonClickType = (ev: MouseEvent | TouchEvent) => Promise<boolean>;
+
+	export type DialogSizeType = 'sm' | 'md' | 'lg' | 'full';
+
+	export type DialogPropsType = {
+		id?: string;
+		cancelable?: boolean;
+		className?: string;
+		containerClassName?: string;
+		backdropClassName?: string;
+		hasTitle?: boolean;
+		hasSubtitle?: boolean;
+		title?: string;
+		subtitle?: string;
+		titleClassName?: string;
+		subtitleClassName?: string;
+		hasHeader?: boolean;
+		hasHeaderShadow?: boolean;
+		headerClassName?: string;
+		hasHeaderClose?: boolean;
+		headerCloseButtonClassName?: string;
+		headerCloseIconPath?: string;
+		headerCloseIconClassName?: string;
+		hasHeaderBack?: boolean;
+		headerBackButtonClassName?: string;
+		headerBackIconPath?: string;
+		headerBackIconClassName?: string;
+		hasFooter?: boolean;
+		hasFooterShadow?: boolean;
+		hasFooterCloseButton?: boolean;
+		hasFooterOkButton?: boolean;
+		footerClassName?: string;
+		footerCloseLabel?: string;
+		footerCloseButtonClassName?: string;
+		footerOkLable?: string;
+		footerOkButtonClassName?: string;
+		footerOkButtonType?: 'button' | 'submit' | 'reset';
+		footerOkButtonSpinner?: boolean;
+		footerOkButtonDisabled?: boolean;
+		submitButtonFormId?: string;
+		bodyClassName?: string;
+		bodyComponent?: any;
+		component?: any;
+		props?: any;
+		size?: DialogSizeType;
+		children?: Snippet;
+		headerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
+		bodySnippet?: Snippet<[dialogExports: DialogExportsType]>;
+		footerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
+		onClose?: () => void;
+		onResult?: (value: any) => void;
+		onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;
+		onCloseClick?: DialogCloseButtonClickType;
+	};
+
+	export type DialogExportsType = {
+		closeDialog: () => void;
+		setResult: (value: any) => void;
+		setOkSpinner: (value: boolean) => void;
+		setOkDisabled: (value: boolean) => void;
+		setOnOkClick: (onclick: (ev: MouseEvent | TouchEvent) => void) => void;
+		setOnCloseClick: (onclick: DialogCloseButtonClickType) => void;
+	};
 </script>
 
-<script lang="ts">import Button from "../../../button/components/button/button.svelte";
-import {} from "svelte";
-import "../../../../../tailwind.css";
-import { mdiArrowLeft, mdiClose } from "../../../icon";
-let {
-  id = "",
-  cancelable = true,
-  className = "",
-  containerClassName = "",
-  backdropClassName = "",
-  hasHeaderShadow = false,
-  hasTitle = false,
-  hasSubtitle = false,
-  title = "",
-  subtitle = "",
-  titleClassName = "",
-  subtitleClassName = "",
-  hasHeader = false,
-  headerClassName = "",
-  hasHeaderClose = false,
-  headerCloseButtonClassName = "",
-  headerCloseIconPath = mdiClose,
-  headerCloseIconClassName = "",
-  hasHeaderBack = false,
-  headerBackButtonClassName = "",
-  headerBackIconPath = mdiArrowLeft,
-  headerBackIconClassName = "",
-  hasFooter = false,
-  hasFooterShadow = false,
-  hasFooterCloseButton = false,
-  hasFooterOkButton = false,
-  footerClassName = "",
-  footerCloseLabel = "Close",
-  footerCloseButtonClassName = "",
-  footerOkLable = "Save",
-  footerOkButtonClassName = "",
-  footerOkButtonType = "button",
-  footerOkButtonSpinner = false,
-  footerOkButtonDisabled = false,
-  submitButtonFormId = void 0,
-  size = DialogSizeEnum.SM,
-  bodyClassName = "",
-  bodyComponent,
-  component,
-  props = {},
-  children,
-  headerSnippet,
-  bodySnippet,
-  footerSnippet,
-  onClose,
-  onResult,
-  onOkClick,
-  onCloseClick
-} = $props();
-let dialogExports = {
-  closeDialog,
-  setResult,
-  setOkSpinner,
-  setOkDisabled,
-  setOnCloseClick,
-  setOnOkClick
-};
-let isPlaced = $state(false);
-let isOpened = $state(false);
-let CustomComponent = $state(null);
-let BodyComponent = $state(null);
-let result;
-let smSizeClassName = "w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 xl:w-1/4";
-let mdSizeClassName = "w-11/12 sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-1/3";
-let lgSizeClassName = "w-11/12 sm:w-3/4 md:w-3/4 lg:w-2/3 xl:w-1/2";
-let fullSizeClassName = "fixed inset-0 w-screen h-screen ";
-let screenSizeClassNameMap = {
-  sm: smSizeClassName,
-  md: mdSizeClassName,
-  lg: lgSizeClassName,
-  full: fullSizeClassName
-};
-export function toggleDialog() {
-  if (isOpened) {
-    closeDialog();
-  } else {
-    openDialog();
-  }
-}
-export function openDialog() {
-  isPlaced = true;
-  setTimeout(() => {
-    isOpened = true;
-  }, 0);
-}
-export function closeDialog(value) {
-  return new Promise((resolve) => {
-    isOpened = false;
-    setTimeout(() => {
-      isPlaced = false;
-      onClose && onClose();
-      onResult && onResult(result || value);
-      resolve(result);
-    }, 300);
-  });
-}
-export function setResult(value) {
-  result = value;
-}
-export function setOkDisabled(value) {
-  footerOkButtonDisabled = value;
-}
-export function setOkSpinner(value) {
-  footerOkButtonSpinner = value;
-}
-export function setOnOkClick(onclick) {
-  onOkClick = onclick;
-}
-export function setOnCloseClick(onclick) {
-  onCloseClick = onclick;
-}
-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);
-  }
-}
-$effect(() => {
-  BodyComponent = bodyComponent;
-});
-$effect(() => {
-  CustomComponent = component;
-});
+<script lang="ts">
+	import Button from '../../../button/components/button/button.svelte';
+	import { type Component as ComponetType, type Snippet } from 'svelte';
+	import '../../../../../tailwind.css';
+	import { mdiArrowLeft, mdiClose } from '../../../icon';
+
+	let {
+		id = '',
+		cancelable = true,
+		className = '',
+		containerClassName = '',
+		backdropClassName = '',
+		hasHeaderShadow = false,
+		hasTitle = false,
+		hasSubtitle = false,
+		title = '',
+		subtitle = '',
+		titleClassName = '',
+		subtitleClassName = '',
+		hasHeader = false,
+		headerClassName = '',
+		hasHeaderClose = false,
+		headerCloseButtonClassName = '',
+		headerCloseIconPath = mdiClose,
+		headerCloseIconClassName = '',
+		hasHeaderBack = false,
+		headerBackButtonClassName = '',
+		headerBackIconPath = mdiArrowLeft,
+		headerBackIconClassName = '',
+		hasFooter = false,
+		hasFooterShadow = false,
+		hasFooterCloseButton = false,
+		hasFooterOkButton = false,
+		footerClassName = '',
+		footerCloseLabel = 'Close',
+		footerCloseButtonClassName = '',
+		footerOkLable = 'Save',
+		footerOkButtonClassName = '',
+		footerOkButtonType = 'button',
+		footerOkButtonSpinner = false,
+		footerOkButtonDisabled = false,
+		submitButtonFormId = undefined,
+		size = 'sm',
+		bodyClassName = '',
+		bodyComponent,
+		component,
+		props = {},
+		children,
+		headerSnippet,
+		bodySnippet,
+		footerSnippet,
+		onClose,
+		onResult,
+		onOkClick,
+		onCloseClick
+	}: DialogPropsType = $props();
+
+	let dialogExports: DialogExportsType = {
+		closeDialog,
+		setResult,
+		setOkSpinner,
+		setOkDisabled,
+		setOnCloseClick,
+		setOnOkClick
+	};
+
+	let isPlaced: boolean = $state(false);
+	let isOpened: boolean = $state(false);
+
+	let CustomComponent: ComponetType | null = $state(null);
+
+	let BodyComponent: ComponetType | null = $state(null);
+
+	let result: any;
+
+	let smSizeClassName = 'w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 xl:w-1/4';
+	let mdSizeClassName = 'w-11/12 sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-1/3';
+	let lgSizeClassName = 'w-11/12 sm:w-3/4 md:w-3/4 lg:w-2/3 xl:w-1/2';
+	let fullSizeClassName = 'fixed inset-0 w-screen h-screen ';
+
+	let screenSizeClassNameMap: { [key: string]: string } = {
+		sm: smSizeClassName,
+		md: mdSizeClassName,
+		lg: lgSizeClassName,
+		full: fullSizeClassName
+	};
+
+	export function toggleDialog() {
+		if (isOpened) {
+			closeDialog();
+		} else {
+			openDialog();
+		}
+	}
+
+	export function openDialog() {
+		isPlaced = true;
+		setTimeout(() => {
+			isOpened = true;
+		}, 0);
+	}
+
+	export function closeDialog(value?: any): Promise<any> {
+		return new Promise((resolve) => {
+			isOpened = false;
+			setTimeout(() => {
+				isPlaced = false;
+				onClose && onClose();
+				onResult && onResult(result || value);
+				resolve(result);
+			}, 300);
+		});
+	}
+
+	export function setResult(value: any) {
+		result = value;
+	}
+
+	export function setOkDisabled(value: boolean) {
+		footerOkButtonDisabled = value;
+	}
+
+	export function setOkSpinner(value: boolean) {
+		footerOkButtonSpinner = value;
+	}
+
+	export function setOnOkClick(
+		onclick: (event: MouseEvent | TouchEvent, options: DialogExportsType) => void
+	) {
+		onOkClick = onclick;
+	}
+
+	export function setOnCloseClick(onclick: DialogCloseButtonClickType) {
+		onCloseClick = onclick;
+	}
+
+	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);
+		}
+	}
+
+	$effect(() => {
+		BodyComponent = bodyComponent;
+	});
+	$effect(() => {
+		CustomComponent = component;
+	});
 </script>
 
 {#snippet dialogContent()}

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

@@ -4,12 +4,7 @@
  * true -> Close dialog
  */
 export type DialogCloseButtonClickType = (ev: MouseEvent | TouchEvent) => Promise<boolean>;
-export declare enum DialogSizeEnum {
-    SM = "sm",
-    MD = "md",
-    LG = "lg",
-    FULL = "full"
-}
+export type DialogSizeType = 'sm' | 'md' | 'lg' | 'full';
 export type DialogPropsType = {
     id?: string;
     cancelable?: boolean;
@@ -50,7 +45,7 @@ export type DialogPropsType = {
     bodyComponent?: any;
     component?: any;
     props?: any;
-    size?: DialogSizeEnum;
+    size?: DialogSizeType;
     children?: Snippet;
     headerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
     bodySnippet?: Snippet<[dialogExports: DialogExportsType]>;