@cloudparker/moldex.js 0.0.124 → 4.1.1

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

@@ -1,29 +1,44 @@
-<script lang="ts">import { showToast } from "../../../../../services";
-import NumberField from "../../../input/components/number-field/number-field.svelte";
-let {
-  value = $bindable(0),
-  label,
-  name,
-  maxlength,
-  className,
-  autofocus,
-  required,
-  setOnOkClick,
-  setResult,
-  closeDialog,
-  ...props
-} = $props();
-let _value = $state(value || 0);
-function handleSubmit(ev) {
-  ev?.preventDefault();
-  _value = _value || 0;
-  if (required) {
-    showToast({ msg: "This is a required field!" });
-  } else {
-    setResult(_value);
-    closeDialog();
-  }
-}
+<script lang="ts">
+	import { showToast } from '../../../../../services';
+	import NumberField from '../../../input/components/number-field/number-field.svelte';
+	import type { DialogExports } from '../dialog/dialog.svelte';
+
+	type PropsType = {
+		value?: number;
+		label?: string;
+		name?: string;
+		maxlength?: number;
+		className?: string;
+		autofocus?: boolean;
+		required?: boolean;
+	};
+
+	let {
+		value = $bindable(0),
+		label,
+		name,
+		maxlength,
+		className,
+		autofocus,
+		required,
+		setOnOkClick,
+		setResult,
+		closeDialog,
+		...props
+	}: PropsType & DialogExports = $props();
+
+	let _value: number = $state(value || 0);
+
+	function handleSubmit(ev: SubmitEvent) {
+		ev?.preventDefault();
+		_value = _value || 0;
+		if (required) {
+			showToast({ msg: 'This is a required field!' });
+		} else {
+			setResult(_value);
+			closeDialog();
+		}
+	}
 </script>
 
 <div class="p-6">

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

@@ -1,108 +1,153 @@
-<script lang="ts" module></script>
-
-<script lang="ts">import { showToast } from "../../../../../services";
-import ButtonListItem from "../../../button/components/button-list-item/button-list-item.svelte";
-import ButtonSearch from "../../../button/components/button-search/button-search.svelte";
-import VirtualScrollingList from "../../../common/components/virtual-scrolling/virtual-scrolling-list.svelte";
-import { mdiCheckCircle, mdiCheckCircleOutline, mdiChevronRight } from "../../../icon";
-import Icon from "../../../icon/components/icon/icon.svelte";
-import { onMount } from "svelte";
-import { SvelteSet } from "svelte/reactivity";
-let {
-  value,
-  items = [],
-  multiple = false,
-  identityFieldName = "_id",
-  titleFieldName = "name",
-  subtitleFieldName,
-  searchFieldName = "name",
-  hasCheckbox,
-  hasArrow,
-  maxlength = 0,
-  maxlengthMsg = "Selection limit reached!",
-  checkboxIconPath = mdiCheckCircle,
-  uncheckboxIconPath = mdiCheckCircleOutline,
-  arrowIconPath = mdiChevronRight,
-  checkboxIconClassName = "",
-  uncheckboxIconClassName = "",
-  arrowClassName = "",
-  checkboxClassName = "",
-  isCircularIcon,
-  hasIcon,
-  iconClassName,
-  circularIconClassName,
-  iconPath,
-  itemTileSnippet,
-  closeDialog,
-  setResult,
-  setOnOkClick,
-  setHeaderSnippet,
-  setDialogTitle
-} = $props();
-let containerHeight = $state(0);
-let selectedSet = $state(
-  value ? new SvelteSet(Array.isArray(value) ? value : [value]) : new SvelteSet()
-);
-let searchText = $state("");
-let records = $derived.by(() => {
-  if (items && typeof items[0] == "string") {
-    return items.map((name) => {
-      return {
-        [identityFieldName]: name,
-        [titleFieldName]: name
-      };
-    });
-  }
-  return [...items];
-});
-let filteredRecords = $derived.by(() => {
-  if (searchText) {
-    return records.filter((item) => {
-      return (item[searchFieldName] || "").toLowerCase().indexOf(searchText) >= 0;
-    });
-  }
-  return records;
-});
-function handleItemClick(ev, item, index) {
-  let itemId = item[identityFieldName];
-  if (!multiple) {
-    if (selectedSet.has(itemId)) {
-      selectedSet.delete(itemId);
-      setResult(void 0);
-    } else {
-      selectedSet.add(itemId);
-      setResult(itemId);
-    }
-    closeDialog();
-  } else {
-    if (selectedSet.has(itemId)) {
-      selectedSet.delete(itemId);
-    } else {
-      if (selectedSet.size >= maxlength) {
-        showToast({ msg: maxlengthMsg });
-      } else {
-        selectedSet.add(itemId);
-      }
-    }
-    if (selectedSet.size) {
-      setDialogTitle(`Selected (${selectedSet.size})`);
-    } else {
-      setDialogTitle("");
-    }
-  }
-}
-function handleOkClick(ev) {
-  if (multiple) {
-    closeDialog(Array.from(selectedSet));
-  }
-}
-function handleSearch(txt) {
-  searchText = txt;
-}
-onMount(() => {
-  setOnOkClick(handleOkClick);
-  setHeaderSnippet(headerSnippet);
-});
+<script lang="ts" module>
+	export type PickerDialogProps = {
+		items?: string[] | any[];
+		multiple?: boolean;
+		value?: any;
+		identityFieldName?: string;
+		titleFieldName?: string;
+		searchFieldName?: string;
+		subtitleFieldName?: string;
+		hasCheckbox?: boolean;
+		hasArrow?: boolean;
+		maxlength?: number;
+		maxlengthMsg?: string;
+		checkboxIconPath?: string;
+		uncheckboxIconPath?: string;
+		checkboxIconClassName?: string;
+		uncheckboxIconClassName?: string;
+		checkboxClassName?: string;
+		arrowIconPath?: string;
+		arrowClassName?: string;
+		hasIcon?: boolean;
+		iconPath?: string;
+		iconClassName?: string;
+		isCircularIcon?: boolean;
+		circularIconClassName?: string;
+		itemTileSnippet?: Snippet<[item: any, index: number]>;
+	};
+</script>
+
+<script lang="ts">
+	import { showToast } from '../../../../../services';
+
+	import ButtonListItem from '../../../button/components/button-list-item/button-list-item.svelte';
+	import ButtonSearch from '../../../button/components/button-search/button-search.svelte';
+	import VirtualScrollingList from '../../../common/components/virtual-scrolling/virtual-scrolling-list.svelte';
+	import { mdiCheckCircle, mdiCheckCircleOutline, mdiChevronRight } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { onMount, type Snippet } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import type { DialogExports } from '../dialog/dialog.svelte';
+
+	let {
+		value,
+		items = [],
+		multiple = false,
+		identityFieldName = '_id',
+		titleFieldName = 'name',
+		subtitleFieldName,
+		searchFieldName = 'name',
+		hasCheckbox,
+		hasArrow,
+		maxlength = 0,
+		maxlengthMsg = 'Selection limit reached!',
+		checkboxIconPath = mdiCheckCircle,
+		uncheckboxIconPath = mdiCheckCircleOutline,
+		arrowIconPath = mdiChevronRight,
+		checkboxIconClassName = '',
+		uncheckboxIconClassName = '',
+		arrowClassName = '',
+		checkboxClassName = '',
+		isCircularIcon,
+		hasIcon,
+		iconClassName,
+		circularIconClassName,
+		iconPath,
+		itemTileSnippet,
+		closeDialog,
+		setResult,
+		setOnOkClick,
+		setHeaderSnippet,
+		setDialogTitle
+	}: DialogExports & PickerDialogProps = $props();
+
+	let containerHeight: number = $state(0);
+
+	// Reactive store for selected items
+	let selectedSet: SvelteSet<any> = $state(
+		value ? new SvelteSet(Array.isArray(value) ? value : [value]) : new SvelteSet()
+	);
+
+	let searchText: string = $state('');
+
+	let records: any[] = $derived.by(() => {
+		if (items && typeof items[0] == 'string') {
+			return items.map((name) => {
+				return {
+					[identityFieldName]: name,
+					[titleFieldName]: name
+				};
+			});
+		}
+
+		return [...items];
+	});
+
+	let filteredRecords: any[] = $derived.by(() => {
+		if (searchText) {
+			return records.filter((item) => {
+				return (item[searchFieldName] || '').toLowerCase().indexOf(searchText) >= 0;
+			});
+		}
+		return records;
+	});
+
+	// Handle item selection
+	function handleItemClick(ev: Event, item: any, index: number) {
+		let itemId = item[identityFieldName];
+		// console.log('handleItemClick', { itemId, multiple });
+		if (!multiple) {
+			if (selectedSet.has(itemId)) {
+				selectedSet.delete(itemId);
+				setResult(undefined);
+			} else {
+				selectedSet.add(itemId);
+				setResult(itemId);
+			}
+			closeDialog();
+		} else {
+			// Multiple selection: add/remove item
+			if (selectedSet.has(itemId)) {
+				selectedSet.delete(itemId);
+			} else {
+				if (selectedSet.size >= maxlength) {
+					showToast({ msg: maxlengthMsg });
+				} else {
+					selectedSet.add(itemId);
+				}
+			}
+			if (selectedSet.size) {
+				setDialogTitle(`Selected (${selectedSet.size})`);
+			} else {
+				setDialogTitle('');
+			}
+		}
+	}
+
+	function handleOkClick(ev: MouseEvent | TouchEvent) {
+		if (multiple) {
+			closeDialog(Array.from(selectedSet));
+		}
+	}
+
+	function handleSearch(txt: string) {
+		searchText = txt;
+	}
+
+	onMount(() => {
+		setOnOkClick(handleOkClick);
+		setHeaderSnippet(headerSnippet);
+	});
 </script>
 
 {#snippet headerSnippet()}

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

@@ -1,28 +1,43 @@
-<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 lang="ts">
+	import { showToast } from '../../../../../services';
+	import { TextField } from '../../../input';
+	import type { InputValue } from '../../../input/components/input-field/input-field.svelte';
+	import type { DialogExports } from '../dialog/dialog.svelte';
+
+	type PropsType = {
+		value?: InputValue;
+		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 & DialogExports = $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>
 
 <div class="p-6">

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

@@ -1,28 +1,43 @@
-<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 lang="ts">
+	import { showToast } from '../../../../../services';
+	import { TextareaField, TextField } from '../../../input';
+	import type { InputValue } from '../../../input/components/input-field/input-field.svelte';
+	import type { DialogExports } from '../dialog/dialog.svelte';
+
+	type PropsType = {
+		value?: InputValue;
+		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 & DialogExports = $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>
 
 <div class="p-6">

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

@@ -1,37 +1,59 @@
-<script lang="ts">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 lang="ts">
+	import type { Snippet } from 'svelte';
+
+
+	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>
 
 {#if isPlaced}
@@ -75,9 +97,9 @@ export function closeDrawer() {
 						{@render floatingSnippet()}
 					{/if}
 				</div>
-			</div>
+				</div>
 
-			<button class="flex-grow cursor-auto" type="button" onclick={handelBackdropClick}></button>
+			<button class="flex-grow cursor-auto" type="button" onclick={handelBackdropClick} aria-label="Close drawer" title="Close drawer"></button>
 		</div>
 	</div>
 {/if}

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

@@ -1,15 +1,27 @@
-<script lang="ts">let {
-  path,
-  className = "",
-  size = 24,
-  fill = "currentColor",
-  viewBox = "",
-  color,
-  sizeClassName = "w-6 h-6"
-} = $props();
-$effect(() => {
-  viewBox = viewBox || `0 0 ${size} ${size}`;
-});
+<script lang="ts">
+	type IconPropsType = {
+		path: string;
+		className?: string;
+		sizeClassName?: string;
+		size?: number;
+		fill?: string;
+		viewBox?: string;
+		color?: string;
+	};
+
+	let {
+		path,
+		className = '',
+		size = 24,
+		fill = 'currentColor',
+		viewBox = '',
+		color,
+		sizeClassName = 'w-6 h-6'
+	}: IconPropsType = $props();
+
+	$effect(() => {
+		viewBox = viewBox || `0 0 ${size} ${size}`;
+	});
 </script>
 
 <svg class="align-middle {sizeClassName} {className}" {viewBox} fill={color || fill}>

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

@@ -1,5 +1,13 @@
-<script lang="ts">import Icon from "../icon/icon.svelte";
-let { circleClassName, iconPath, iconClassName = "w-5 h-5 text-primary" } = $props();
+<script lang="ts">
+	import Icon from '../icon/icon.svelte';
+
+	type Props = {
+		iconPath?: string;
+		iconClassName?: string;
+		circleClassName?: string;
+	};
+
+	let { circleClassName, iconPath, iconClassName = 'w-5 h-5 text-primary' }: Props = $props();
 </script>
 
 <div