@cloudparker/moldex.js 0.0.65 → 0.0.66

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

@@ -1,161 +1,115 @@
-<script lang="ts">
-	import { ButtonListItem } from '../../..';
-	import ButtonBack from '../../../button/components/button-back/button-back.svelte';
-	import ButtonCloseIcon from '../../../button/components/button-close-icon/button-close-icon.svelte';
-	import ButtonClose from '../../../button/components/button-close/button-close.svelte';
-	import type { ListItemType } from '../../../button/components/button-list-item/button-list-item.svelte';
-	import ButtonOk from '../../../button/components/button-ok/button-ok.svelte';
-	import SearchField from '../../../input/components/search-field/search-field.svelte';
-	import type { Snippet } from 'svelte';
-	import type { DialogExportsType } from '../dialog/dialog.svelte';
-
-	type PropsType = {
-		value?: any | any[];
-		multiple?: boolean;
-		items?: any[];
-		itemSnippet?: Snippet<[any, number]>;
-		itemTitle?: string;
-		itemSubtitle?: string;
-		search?: string | string[];
-		identity?: string;
-		iconPath?: string;
-		hasCheckbox?: boolean;
-		hasArrow?: boolean;
-		itemTitleClassName?: string;
-		itemSubtitleClassName?: string;
-		okButtonLable?: string;
-		okButtonClassName?: string;
-		closeButtonLabel?: string;
-		closeButtonClassName?: string;
-	};
-
-	let {
-		value,
-		multiple = false,
-		items,
-		itemTitle,
-		itemSubtitle,
-		hasCheckbox,
-		hasArrow,
-		search,
-		identity,
-		itemTitleClassName,
-		itemSubtitleClassName,
-		okButtonLable = 'Select',
-		okButtonClassName = '',
-		closeButtonLabel = 'Close',
-		closeButtonClassName = '',
-		itemSnippet,
-		closeDialog,
-		setResult
-	}: PropsType &
-		DialogExportsType & {
-			items?: any[];
-			itemSnippet?: Snippet<[any, number]>;
-		} = $props();
-
-	let searchText: string = $state('');
-
-	let idField = Symbol('_id');
-	let searchField = Symbol('_search');
-
-	type CustomListItemType = ListItemType & { [key: symbol]: string };
-
-	let selectedItemsSet: Set<any> = $derived.by(() => {
-		let set = new Set<any>();
-		if (value != null) {
-			if (Array.isArray(value)) {
-				value.forEach((v) => set.add(v));
-			} else {
-				set.add(value);
-			}
-		}
-		return set;
-	});
-
-	let preparedItems: any[] = $derived.by(() => {
-		return (items || []).map((item: any, index) => {
-			let res: CustomListItemType = {
-				[idField]: identity && item.hasOwnProperty(identity) ? item[identity] : index
-			};
-			if (itemTitle) {
-				res.title = item.hasOwnProperty(itemTitle) ? item[itemTitle] : itemTitle;
-			}
-			if (itemSubtitle) {
-				res.subtitle = item.hasOwnProperty(itemSubtitle) ? item[itemSubtitle] : itemSubtitle;
-			}
-			if (search) {
-				if (typeof search === 'string') {
-					res[searchField] = (item[search] || '').trim().toLowerCase();
-				} else {
-					res[searchField] = (search.map((fieldName) => item[fieldName]).join(' ') || '')
-						.trim()
-						.toLowerCase();
-				}
-			} else {
-				res[searchField] = `${res.title || ''} ${res.subtitle || ''}`.trim().toLowerCase();
-			}
-			if (selectedItemsSet.has(res[idField])) {
-				res.isChecked = true;
-			} else {
-				res.isChecked = false;
-			}
-
-			return res;
-		});
-	});
-
-	let filteredItems: any[] = $derived.by(() => {
-		if (searchText) {
-			return preparedItems.filter((item: any) => {
-				return item[searchField].indexOf(searchText) >= 0;
-			});
-		} else {
-			return [...preparedItems];
-		}
-	});
-
-	function handleSearch(text: string) {
-		searchText = text;
-	}
-
-	function handleItemSelected(ev: MouseEvent, item: CustomListItemType, index: number) {
-		let id = item[idField];
-		if (multiple) {
-			if (selectedItemsSet.has(id)) {
-				selectedItemsSet.delete(id);
-			} else {
-				selectedItemsSet.add(id);
-			}
-		} else {
-			selectedItemsSet.clear();
-			selectedItemsSet.add(id);
-		}
-
-		items = [...(items || [])];
-
-		if (!multiple) {
-			if (selectedItemsSet.size) {
-				setTimeout(() => {
-					setResult(Array.from(selectedItemsSet)[0]);
-					closeDialog();
-				}, 300);
-			}
-		}
-	}
-
-	function handleClose() {
-		closeDialog();
-	}
-
-	function handleOk() {
-		setResult(Array.from(selectedItemsSet));
-		closeDialog();
-	}
-
-	$effect(() => {
-		setResult(null);
-	});
+<script lang="ts">import { ButtonListItem } from "../../..";
+import ButtonBack from "../../../button/components/button-back/button-back.svelte";
+import ButtonCloseIcon from "../../../button/components/button-close-icon/button-close-icon.svelte";
+import ButtonClose from "../../../button/components/button-close/button-close.svelte";
+import ButtonOk from "../../../button/components/button-ok/button-ok.svelte";
+import SearchField from "../../../input/components/search-field/search-field.svelte";
+let {
+  value,
+  multiple = false,
+  items,
+  itemTitle,
+  itemSubtitle,
+  hasCheckbox,
+  hasArrow,
+  search,
+  identity,
+  itemTitleClassName,
+  itemSubtitleClassName,
+  okButtonLable = "Select",
+  okButtonClassName = "",
+  closeButtonLabel = "Close",
+  closeButtonClassName = "",
+  itemSnippet,
+  closeDialog,
+  setResult
+} = $props();
+let searchText = $state("");
+let idField = Symbol("_id");
+let searchField = Symbol("_search");
+let selectedItemsSet = $derived.by(() => {
+  let set = /* @__PURE__ */ new Set();
+  if (value != null) {
+    if (Array.isArray(value)) {
+      value.forEach((v) => set.add(v));
+    } else {
+      set.add(value);
+    }
+  }
+  return set;
+});
+let preparedItems = $derived.by(() => {
+  return (items || []).map((item, index) => {
+    let res = {
+      [idField]: identity && item.hasOwnProperty(identity) ? item[identity] : index
+    };
+    if (itemTitle) {
+      res.title = item.hasOwnProperty(itemTitle) ? item[itemTitle] : itemTitle;
+    }
+    if (itemSubtitle) {
+      res.subtitle = item.hasOwnProperty(itemSubtitle) ? item[itemSubtitle] : itemSubtitle;
+    }
+    if (search) {
+      if (typeof search === "string") {
+        res[searchField] = (item[search] || "").trim().toLowerCase();
+      } else {
+        res[searchField] = (search.map((fieldName) => item[fieldName]).join(" ") || "").trim().toLowerCase();
+      }
+    } else {
+      res[searchField] = `${res.title || ""} ${res.subtitle || ""}`.trim().toLowerCase();
+    }
+    if (selectedItemsSet.has(res[idField])) {
+      res.isChecked = true;
+    } else {
+      res.isChecked = false;
+    }
+    return res;
+  });
+});
+let filteredItems = $derived.by(() => {
+  if (searchText) {
+    return preparedItems.filter((item) => {
+      return item[searchField].indexOf(searchText) >= 0;
+    });
+  } else {
+    return [...preparedItems];
+  }
+});
+function handleSearch(text) {
+  searchText = text;
+}
+function handleItemSelected(ev, item, index) {
+  let id = item[idField];
+  if (multiple) {
+    if (selectedItemsSet.has(id)) {
+      selectedItemsSet.delete(id);
+    } else {
+      selectedItemsSet.add(id);
+    }
+  } else {
+    selectedItemsSet.clear();
+    selectedItemsSet.add(id);
+  }
+  items = [...items || []];
+  if (!multiple) {
+    if (selectedItemsSet.size) {
+      setTimeout(() => {
+        setResult(Array.from(selectedItemsSet)[0]);
+        closeDialog();
+      }, 300);
+    }
+  }
+}
+function handleClose() {
+  closeDialog();
+}
+function handleOk() {
+  setResult(Array.from(selectedItemsSet));
+  closeDialog();
+}
+$effect(() => {
+  setResult(null);
+});
 </script>
 
 <div class="flex gap-3 p-3">

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

@@ -1,33 +1,21 @@
-<script lang="ts">
-	import { Spinner } from '../../../spinner';
-	import type { DialogExportsType } 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 & DialogExportsType = $props();
-
-	setOnData((data: any) => {
-		if (data?.msg) {
-			msg = data?.msg || '';
-		}
-	});
+<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>
 
 <div class="p-6 {containerClassName}">

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

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

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

@@ -1,47 +1,41 @@
-<script lang="ts">
-	import { showToast } from '../../../../../services';
-	import { TextField } from '../../../input';
-	import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
-	import type { DialogExportsType } from '../dialog/dialog.svelte';
-
-	type PropsType = {
-		value?: InputValueType;
-		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 & DialogExportsType = $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 lang="ts">import { showToast } from "../../../../../services";
+import { TextField } from "../../../input";
+let {
+  value = $bindable(""),
+  label,
+  name,
+  maxlength,
+  className,
+  autofocus,
+  required,
+  setOnOkClick,
+  setResult,
+  closeDialog,
+  ...props
+} = $props();
+function handleSubmit(ev) {
+  ev?.preventDefault();
+  value = (value || "").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 />
+		<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

@@ -1,4 +1,4 @@
-import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
+import type { InputValue } from '../../../input/components/input-field/input-field.svelte';
 import type { DialogExportsType } from '../dialog/dialog.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const TextFieldDialog: $$__sveltets_2_IsomorphicComponent<{
-    value?: InputValueType;
+    value?: InputValue;
     label?: string;
     name?: string;
     maxlength?: number;

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

@@ -1,43 +1,28 @@
-<script lang="ts">
-	import { showToast } from '../../../../../services';
-	import { TextareaField, TextField } from '../../../input';
-	import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
-	import type { DialogExportsType } from '../dialog/dialog.svelte';
-
-	type PropsType = {
-		value?: InputValueType;
-		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 & DialogExportsType = $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 lang="ts">import { showToast } from "../../../../../services";
+import { TextareaField, TextField } from "../../../input";
+let {
+  value = $bindable(""),
+  label,
+  name,
+  maxlength,
+  className,
+  autofocus,
+  required,
+  setOnOkClick,
+  setResult,
+  closeDialog,
+  ...props
+} = $props();
+function handleSubmit(ev) {
+  ev?.preventDefault();
+  value = (value || "").trim();
+  if (required && !value) {
+    showToast({ msg: "This is a required field!" });
+  } else {
+    setResult(value);
+    closeDialog();
+  }
+}
 </script>
 
 <div class="p-6">

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

@@ -1,4 +1,4 @@
-import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
+import type { InputValue } from '../../../input/components/input-field/input-field.svelte';
 import type { DialogExportsType } from '../dialog/dialog.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const TextareaFieldDialog: $$__sveltets_2_IsomorphicComponent<{
-    value?: InputValueType;
+    value?: InputValue;
     label?: string;
     name?: string;
     maxlength?: number;

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

@@ -1,4 +1,4 @@
-import type { DialogExportsType, DialogPropsType, DialogSizeType } from './components/dialog/dialog.svelte';
+import type { DialogExportsType, DialogProps, DialogSize } from './components/dialog/dialog.svelte';
 import Dialog from './components/dialog/dialog.svelte';
 export { Dialog, };
-export type { DialogExportsType, DialogPropsType, DialogSizeType };
+export type { DialogExportsType, DialogProps, DialogSize };

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

@@ -1,60 +1,38 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	import '../../../../../tailwind.css';
-
-	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 lang="ts">import "../../../../../tailwind.css";
+let {
+  backdropClassName = "",
+  children,
+  className = "",
+  containerClassName = "",
+  drawerClassName = "",
+  floatingSnippet,
+  id = "",
+  position = "left"
+} = $props();
+let isPlaced = $state(false);
+let isOpened = $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}