@cloudparker/moldex.js 0.0.29 → 0.0.30

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

@@ -1,111 +1,155 @@
-<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) {
-      res[searchField] = (item[search] || "").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 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;
+		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) {
+				res[searchField] = (item[search] || '').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>
 
 <div class="flex gap-3 p-3">

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

@@ -1,16 +1,25 @@
-<script lang="ts">let {
-  className,
-  msg,
-  setOnOkClick,
-  setResult,
-  closeDialog
-} = $props();
-$effect(() => {
-  setOnOkClick(() => {
-    setResult(true);
-    closeDialog();
-  });
-});
+<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>
 
 <div class="p-6 {className}">

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

@@ -1,3 +1,5 @@
+import type { DialogExportsType, DialogPropsType, DialogSizeType } from './components/dialog/dialog.svelte';
+import Dialog from './components/dialog/dialog.svelte';
 import MsgDialog from "./components/msg-dialog/msg-dialog.svelte";
-import Dialog, { type DialogExportsType, type DialogPropsType, DialogSizeEnum } from './components/dialog/dialog.svelte';
-export { Dialog, DialogSizeEnum, MsgDialog, type DialogExportsType, type DialogPropsType, };
+export { Dialog, MsgDialog };
+export type { DialogExportsType, DialogPropsType, DialogSizeType };

package/dist/views/core/dialog/index.js

@@ -1,3 +1,3 @@
+import Dialog from './components/dialog/dialog.svelte';
 import MsgDialog from "./components/msg-dialog/msg-dialog.svelte";
-import Dialog, { DialogSizeEnum } from './components/dialog/dialog.svelte';
-export { Dialog, DialogSizeEnum, MsgDialog, };
+export { Dialog, MsgDialog };

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

@@ -1,37 +1,55 @@
-<script lang="ts">import "../../../../../tailwind.css";
-let {
-  id = "",
-  children,
-  backdropClassName = "",
-  className = "bg-indigo-600 text-white",
-  containerClassName = "",
-  drawerContainerClassName = "",
-  drawerClassName = ""
-} = $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 lang="ts">
+	import type { Snippet } from 'svelte';
+	import '../../../../../tailwind.css';
+
+	type PropsType = {
+		children?: Snippet;
+		id?: string;
+		backdropClassName?: string;
+		className?: string;
+		containerClassName?: string;
+		drawerContainerClassName?: string;
+		drawerClassName?: string;
+	};
+
+	let {
+		id = '',
+		children,
+		backdropClassName = '',
+		className = 'bg-indigo-600 text-white',
+		containerClassName = '',
+		drawerContainerClassName = '',
+		drawerClassName = ''
+	}: 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>
 
 {#if isPlaced}

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

@@ -1,16 +1,27 @@
-<script lang="ts">import ColorField from "../../../input/components/color-field/color-field.svelte";
-import "../../../../../tailwind.css";
-let {
-  path,
-  className = "",
-  size = 24,
-  fill = "currentColor",
-  viewBox = "",
-  color
-} = $props();
-$effect(() => {
-  viewBox = viewBox || `0 0 ${size} ${size}`;
-});
+<script lang="ts">
+	import ColorField from '../../../input/components/color-field/color-field.svelte';
+	import '../../../../../tailwind.css';
+	type IconPropsType = {
+		path: string;
+		className?: string;
+		size?: number;
+		fill?: string;
+		viewBox?: string;
+		color?: string;
+	};
+
+	let {
+		path,
+		className = '',
+		size = 24,
+		fill = 'currentColor',
+		viewBox = '',
+		color
+	}: IconPropsType = $props();
+
+	$effect(() => {
+		viewBox = viewBox || `0 0 ${size} ${size}`;
+	});
 </script>
 
 <svg class="w-6 h-6 align-middle {className}" {viewBox} fill={color || fill}>

package/dist/views/core/input/components/color-field/color-field.svelte

@@ -1,64 +1,74 @@
-<script lang="ts">import { ripple } from "../../../../../actions";
-import { colorToHex, isValidHexColor } from "../../../../../services";
-import { mdiSquare } from "../../../icon";
-import Icon from "../../../icon/components/icon/icon.svelte";
-import InputField, {} from "../input-field/input-field.svelte";
-let {
-  size,
-  appearance,
-  value = $bindable("#000000"),
-  ...props
-} = $props();
-let colorRef;
-let btnIconSizeClassName = $state("");
-let btnRoundedClassName = $state("");
-let colorValue = $state("#000000");
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-function handleColorBtnClick() {
-  if (colorRef) {
-    colorRef.click();
-  }
-}
-function handleColorPickerChange(ev) {
-  let input = ev?.target;
-  if (input) {
-    value = input.value;
-  }
-}
-$effect(() => {
-  if (isValidHexColor(value)) {
-    colorValue = value;
-    if (colorRef) {
-      colorRef.value = colorToHex(value);
-    }
-  }
-});
-$effect(() => {
-  if (size) {
-    switch (size) {
-      case "lg":
-        btnIconSizeClassName = "!h-7 !w-7";
-        break;
-      case "md":
-        btnIconSizeClassName = "!h-6 !w-6";
-        break;
-      case "sm":
-        btnIconSizeClassName = "!h-5 !w-5";
-        break;
-      case "xs":
-        btnIconSizeClassName = "!h-4 !w-4";
-        break;
-    }
-  }
-});
-$effect(() => {
-  if (!appearance || appearance == "normal") {
-    btnRoundedClassName = "rounded-tr-lg rounded-br-lg";
-  }
-});
+<script lang="ts">
+	import { ripple } from '../../../../../actions';
+	import { colorToHex, isValidHexColor } from '../../../../../services';
+	import { mdiSquare } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let {
+		size,
+		appearance,
+		value = $bindable('#000000'),
+		...props
+	}: InputFieldPropsType & { value?: string } = $props();
+
+	let colorRef: HTMLInputElement;
+	let btnIconSizeClassName: string = $state('');
+	let btnRoundedClassName: string = $state('');
+	let colorValue: string = $state('#000000');
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	function handleColorBtnClick() {
+		if (colorRef) {
+			colorRef.click();
+		}
+	}
+
+	function handleColorPickerChange(ev: any) {
+		let input: HTMLInputElement = ev?.target;
+		if (input) {
+			value = input.value;
+		}
+	}
+
+	$effect(() => {
+		if (isValidHexColor(value)) {
+			colorValue = value;
+			if (colorRef) {
+				colorRef.value = colorToHex(value);
+			}
+		}
+	});
+
+	$effect(() => {
+		if (size) {
+			switch (size) {
+				case 'lg':
+					btnIconSizeClassName = '!h-7 !w-7';
+					break;
+				case 'md':
+					btnIconSizeClassName = '!h-6 !w-6';
+					break;
+				case 'sm':
+					btnIconSizeClassName = '!h-5 !w-5';
+					break;
+				case 'xs':
+					btnIconSizeClassName = '!h-4 !w-4';
+					break;
+			}
+		}
+	});
+
+	$effect(() => {
+		if (!appearance || appearance == 'normal') {
+			btnRoundedClassName = 'rounded-tr-lg rounded-br-lg';
+		}
+	});
 </script>
 
 {#snippet colorButton()}