@cloudparker/moldex.js 0.0.28 → 0.0.30

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

@@ -1,156 +1,250 @@
-<script lang="ts" context="module">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 = "",
-  component,
-  props = {},
-  children,
-  headerChildren,
-  bodyChildren,
-  footerChildren,
-  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 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(() => {
-  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()}
@@ -167,93 +261,96 @@ $effect(() => {
 			: 'rounded-lg shadow-xl'} {className}"
 		onclick={(ev: MouseEvent) => ev.stopPropagation()}
 	>
-		{#if hasHeader}
-			<div
-				class="flex items-start gap-4 w-full cursor-default py-2 {hasHeaderShadow
-					? 'border-b shadow-sm'
-					: ''} {headerClassName}"
-			>
-				<div>
-					{#if hasHeaderBack}
+		{#if CustomComponent?.length == 2}
+			<CustomComponent {...{ ...props }} {...{ ...dialogExports }} />
+		{:else}
+			{#if hasHeader}
+				<div
+					class="flex items-start gap-4 w-full cursor-default py-2 {hasHeaderShadow
+						? 'border-b shadow-sm'
+						: ''} {headerClassName}"
+				>
+					<div>
+						{#if hasHeaderBack}
+							<ButtonBack
+								iconPath={headerBackIconPath}
+								iconClassName={headerBackIconClassName}
+								className={headerBackButtonClassName}
+								onClick={handleClose}
+							/>
+						{/if}
+					</div>
+					<div class="py-2">
+						{#if hasTitle}
+							<div class="text-xl {titleClassName}">{title || ''}</div>
+						{/if}
+						{#if hasSubtitle}
+							<div class="text-sm text-gray-500 {subtitleClassName}">{subtitle || ''}</div>
+						{/if}
+					</div>
+					<div class="flex-grow">
+						{#if headerSnippet}
+							{@render headerSnippet(dialogExports)}
+						{/if}
+					</div>
+					<div>
+						{#if hasHeaderClose}
+							<ButtonClose
+								className={headerCloseButtonClassName}
+								iconPath={headerCloseIconPath}
+								iconClassName={headerCloseIconClassName}
+								onClick={handleClose}
+							/>
+						{/if}
+					</div>
+				</div>
+			{/if}
+
+			<div class="flex-grow overflow-y-auto {bodyClassName}">
+				{#if children}
+					{@render children()}
+				{:else if bodySnippet}
+					{@render bodySnippet(dialogExports)}
+				{:else if BodyComponent?.length == 2}
+					<BodyComponent {...{ ...props }} {...{ ...dialogExports }} />
+				{/if}
+			</div>
+
+			{#if hasFooter}
+				<div
+					class="flex items-center justify-end p-4 gap-4 {hasFooterShadow
+						? 'border-t'
+						: ''} {footerClassName}"
+				>
+					<div class="flex-grow">
+						{#if footerSnippet}
+							{@render footerSnippet(dialogExports)}
+						{/if}
+					</div>
+					{#if hasFooterOkButton}
 						<Button
-							iconPath={headerBackIconPath}
-							className="w-12 h-12 p-3  rounded-full text-gray-500 hover:text-gray-600 hover:bg-gray-50 {headerBackButtonClassName}"
-							iconClassName={headerBackIconClassName}
-							onclick={handleClose}
+							id="btn-ok"
+							form={submitButtonFormId}
+							type={submitButtonFormId ? 'submit' : footerOkButtonType}
+							className="p-2 px-5 rounded bg-indigo-600 hover:bg-indigo-700 focus:bg-indigo-700 text-white {footerOkButtonClassName}"
+							label={footerOkLable}
+							disabled={footerOkButtonDisabled}
+							spinner={footerOkButtonSpinner}
+							spinnerClassName="text-white w-4 h-4"
+							onClick={handleOkClick}
 						/>
 					{/if}
-				</div>
-				<div class="py-2">
-					{#if hasTitle}
-						<div class="text-xl {titleClassName}">{title || ''}</div>
-					{/if}
-					{#if hasSubtitle}
-						<div class="text-sm text-gray-500 {subtitleClassName}">{subtitle || ''}</div>
-					{/if}
-				</div>
-				<div class="flex-grow">
-					{#if headerChildren}
-						{@render headerChildren(dialogExports)}
-					{/if}
-				</div>
-				<div>
-					{#if hasHeaderClose}
+					{#if hasFooterCloseButton}
 						<Button
-							id="close"
-							className="w-12 h-12 p-3 rounded-full text-gray-500 hover:text-gray-600 hover:bg-gray-50 {headerCloseButtonClassName}"
-							iconPath={headerCloseIconPath}
-							iconClassName={headerCloseIconClassName}
-							onclick={handleClose}
-						></Button>
+							id="btn-close"
+							type="button"
+							className="p-2 px-5 rounded bg-gray-100 hover:bg-gray-200 {footerCloseButtonClassName}"
+							label={footerCloseLabel}
+							onClick={handleClose}
+						/>
 					{/if}
 				</div>
-			</div>
-		{/if}
-
-		<div class="flex-grow overflow-y-auto {bodyClassName}">
-			{#if children}
-				{@render children()}
-			{:else if bodyChildren}
-				{@render bodyChildren(dialogExports)}
-			{:else if CustomComponent?.length == 2}
-				<CustomComponent {...{ ...props }} {...{ ...dialogExports }} />
 			{/if}
-		</div>
-
-		{#if hasFooter}
-			<div
-				class="flex items-center justify-end p-4 gap-4 {hasFooterShadow
-					? 'border-t'
-					: ''} {footerClassName}"
-			>
-				<div class="flex-grow">
-					{#if footerChildren}
-						{@render footerChildren(dialogExports)}
-					{/if}
-				</div>
-				{#if hasFooterOkButton}
-					<Button
-						id="btn-ok"
-						form={submitButtonFormId}
-						type={submitButtonFormId ? 'submit' : footerOkButtonType}
-						className="p-2 px-5 rounded bg-indigo-600 hover:bg-indigo-700 focus:bg-indigo-700 text-white {footerOkButtonClassName}"
-						label={footerOkLable}
-						disabled={footerOkButtonDisabled}
-						spinner={footerOkButtonSpinner}
-						spinnerClassName="text-white w-4 h-4"
-						onclick={handleOkClick}
-					/>
-				{/if}
-				{#if hasFooterCloseButton}
-					<Button
-						id="btn-close"
-						type="button"
-						className="p-2 px-5 rounded bg-gray-100 hover:bg-gray-200 {footerCloseButtonClassName}"
-						label={footerCloseLabel}
-						onclick={handleClose}
-					/>
-				{/if}
-			</div>
 		{/if}
 	</div>
 {/snippet}

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;
@@ -47,13 +42,14 @@ export type DialogPropsType = {
     footerOkButtonDisabled?: boolean;
     submitButtonFormId?: string;
     bodyClassName?: string;
+    bodyComponent?: any;
     component?: any;
     props?: any;
-    size?: DialogSizeEnum;
+    size?: DialogSizeType;
     children?: Snippet;
-    headerChildren?: Snippet<[dialogExports: DialogExportsType]>;
-    bodyChildren?: Snippet<[dialogExports: DialogExportsType]>;
-    footerChildren?: Snippet<[dialogExports: DialogExportsType]>;
+    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;