@cloudparker/moldex.js 0.0.64 → 0.0.66

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

@@ -1,268 +1,169 @@
-<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 = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-
-	export type DialogPropsType = {
-		backdropClassName?: string;
-		bodyClassName?: string;
-		bodyComponent?: any;
-		bodySnippet?: Snippet<[dialogExports: DialogExportsType]>;
-		cancelable?: 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';
-		footerOkButtonLable?: string;
-		footerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
-		hasFooter?: boolean;
-		hasFooterCloseButton?: boolean;
-		hasFooterOkButton?: boolean;
-		hasFooterShadow?: boolean;
-		hasHeader?: boolean;
-		hasHeaderBack?: boolean;
-		hasHeaderClose?: boolean;
-		hasHeaderShadow?: boolean;
-		hasSubtitle?: boolean;
-		hasTitle?: boolean;
-		headerBackButtonClassName?: string;
-		headerBackIconClassName?: string;
-		headerBackIconPath?: string;
-		headerClassName?: string;
-		headerCloseButtonClassName?: string;
-		headerCloseIconClassName?: string;
-		headerCloseIconPath?: string;
-		headerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
-		id?: string;
-		onClose?: () => void;
-		onCloseClick?: DialogCloseButtonClickType;
-		onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;
-		onResult?: (value: any) => void;
-		onData?: (data: any) => void;
-		props?: any;
-		size?: DialogSizeType;
-		targetFormId?: string;
-		subtitle?: string;
-		subtitleClassName?: string;
-		title?: string;
-		titleClassName?: string;
-	};
-
-	export type DialogExportsType = {
-		closeDialog: () => void;
-		setResult: (value: any) => void;
-		setOkSpinner: (value: boolean) => void;
-		setOkEnabled: (value: boolean) => void;
-		setOnOkClick: (onclick: (ev: MouseEvent | TouchEvent) => void) => void;
-		setOnCloseClick: (onclick: DialogCloseButtonClickType) => void;
-		setOnData: (listener: (data: any) => void) => void;
-	};
+<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>
 
-<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';
-	import { isMobileScreen } from '../../../../../services';
-
-	let {
-		backdropClassName = '',
-		bodyClassName = '',
-		bodyComponent,
-		bodySnippet,
-		cancelable = true,
-		children,
-		className = '',
-		component,
-		containerClassName = '',
-		footerClassName = '',
-		footerCloseButtonClassName = '',
-		footerCloseButtonLabel = 'Close',
-		footerOkButtonClassName = '',
-		footerOkButtonEnabled = true,
-		footerOkButtonSpinner = false,
-		footerOkButtonType = 'button',
-		footerOkButtonLable = 'Save',
-		footerSnippet,
-		hasFooter = false,
-		hasFooterCloseButton = false,
-		hasFooterOkButton = false,
-		hasFooterShadow = false,
-		hasHeader = false,
-
-		hasHeaderShadow = false,
-		hasSubtitle = false,
-		hasTitle = false,
-		headerBackButtonClassName = '',
-		headerBackIconClassName = '',
-		headerBackIconPath = mdiArrowLeft,
-		headerClassName = '',
-		headerCloseButtonClassName = '',
-		headerCloseIconClassName = '',
-		headerCloseIconPath = mdiClose,
-		hasHeaderBack = isMobileScreen(),
-		hasHeaderClose = !isMobileScreen(),
-		size = isMobileScreen() ? 'full' : 'sm',
-		headerSnippet,
-		id = '',
-		onClose,
-		onCloseClick,
-		onOkClick,
-		onResult,
-		onData,
-		props = {},
-		targetFormId = undefined,
-		subtitle = '',
-		subtitleClassName = '',
-		title = '',
-		titleClassName = ''
-	}: DialogPropsType = $props();
-
-	let dialogExports: DialogExportsType = {
-		closeDialog,
-		setResult,
-		setOkSpinner,
-		setOkEnabled,
-		setOnCloseClick,
-		setOnOkClick,
-		setOnData
-	};
-
-	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 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
-	};
-
-	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 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: DialogExportsType) => void
-	) {
-		onOkClick = onclick;
-	}
-
-	export function setOnCloseClick(onclick: DialogCloseButtonClickType) {
-		onCloseClick = onclick;
-	}
-
-	export function postData(data: any) {
-		onData && onData(data);
-	}
-
-	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 lang="ts">import Button from "../../../button/components/button/button.svelte";
+import {} from "svelte";
+import "../../../../../tailwind.css";
+import { mdiArrowLeft, mdiClose } from "../../../icon";
+import { isMobileScreen } from "../../../../../services";
+let {
+  backdropClassName = "",
+  bodyClassName = "",
+  bodyComponent,
+  bodySnippet,
+  cancelable = true,
+  children,
+  className = "",
+  component,
+  containerClassName = "",
+  footerClassName = "",
+  footerCloseButtonClassName = "",
+  footerCloseButtonLabel = "Close",
+  footerOkButtonClassName = "",
+  footerOkButtonEnabled = true,
+  footerOkButtonSpinner = false,
+  footerOkButtonType = "button",
+  footerOkButtonLable = "Save",
+  footerSnippet,
+  hasFooter = false,
+  hasFooterCloseButton = false,
+  hasFooterOkButton = false,
+  hasFooterShadow = false,
+  hasHeader = false,
+  hasHeaderShadow = false,
+  hasSubtitle = false,
+  hasTitle = false,
+  headerBackButtonClassName = "",
+  headerBackIconClassName = "",
+  headerBackIconPath = mdiArrowLeft,
+  headerClassName = "",
+  headerCloseButtonClassName = "",
+  headerCloseIconClassName = "",
+  headerCloseIconPath = mdiClose,
+  hasHeaderBack = isMobileScreen(),
+  hasHeaderClose = !isMobileScreen(),
+  size = isMobileScreen() ? "full" : "sm",
+  headerSnippet,
+  id = "",
+  onClose,
+  onCloseClick,
+  onOkClick,
+  onResult,
+  onData,
+  props = {},
+  targetFormId = void 0,
+  subtitle = "",
+  subtitleClassName = "",
+  title = "",
+  titleClassName = ""
+} = $props();
+let dialogExports = {
+  closeDialog,
+  setResult,
+  setOkSpinner,
+  setOkEnabled,
+  setOnCloseClick,
+  setOnOkClick,
+  setOnData
+};
+let isPlaced = $state(false);
+let isOpened = $state(false);
+let CustomComponent = $state(null);
+let BodyComponent = $state(null);
+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
+};
+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 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);
+}
+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>
 
 {#snippet dialogContent()}

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

@@ -3,9 +3,9 @@
  * false -> Dont close Dialog
  * true -> Close dialog
  */
-export type DialogCloseButtonClickType = (ev: MouseEvent | TouchEvent) => Promise<boolean>;
-export type DialogSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export type DialogPropsType = {
+type DialogCloseButtonClickFunction = (ev: MouseEvent | TouchEvent) => Promise<boolean>;
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type DialogProps = {
     backdropClassName?: string;
     bodyClassName?: string;
     bodyComponent?: any;
@@ -44,12 +44,12 @@ export type DialogPropsType = {
     headerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
     id?: string;
     onClose?: () => void;
-    onCloseClick?: DialogCloseButtonClickType;
+    onCloseClick?: DialogCloseButtonClickFunction;
     onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;
     onResult?: (value: any) => void;
     onData?: (data: any) => void;
     props?: any;
-    size?: DialogSizeType;
+    size?: DialogSize;
     targetFormId?: string;
     subtitle?: string;
     subtitleClassName?: string;
@@ -57,12 +57,12 @@ export type DialogPropsType = {
     titleClassName?: string;
 };
 export type DialogExportsType = {
-    closeDialog: () => void;
-    setResult: (value: any) => void;
-    setOkSpinner: (value: boolean) => void;
-    setOkEnabled: (value: boolean) => void;
+    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: DialogCloseButtonClickType) => void;
+    setOnCloseClick: (onclick: DialogCloseButtonClickFunction) => void;
     setOnData: (listener: (data: any) => void) => void;
 };
 import { type Snippet } from 'svelte';
@@ -80,7 +80,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Dialog: $$__sveltets_2_IsomorphicComponent<DialogPropsType, {
+declare const Dialog: $$__sveltets_2_IsomorphicComponent<DialogProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     toggleDialog: () => void;
@@ -91,7 +91,7 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<DialogPropsType, {
     setOkSpinner: (value: boolean) => void;
     setOnData: (listener: (data: any) => void) => void;
     setOnOkClick: (onclick: (event: MouseEvent | TouchEvent, options: DialogExportsType) => void) => void;
-    setOnCloseClick: (onclick: DialogCloseButtonClickType) => void;
+    setOnCloseClick: (onclick: DialogCloseButtonClickFunction) => void;
     postData: (data: any) => void;
 }, "">;
 type Dialog = InstanceType<typeof Dialog>;