@cloudparker/moldex.js 0.0.29 → 0.0.30

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

@@ -1,251 +1,333 @@
-<script lang="ts">import ButtonListItem from "../../../button/components/button-list-item/button-list-item.svelte";
-import Button from "../../../button/components/button/button.svelte";
-import { mdiUnfoldMoreHorizontal } from "../../../icon";
-import Icon from "../../../icon/components/icon/icon.svelte";
-import NoData from "../../../no-data/components/no-data/no-data.svelte";
-import InputField, {} from "../input-field/input-field.svelte";
-import SearchField from "../search-field/search-field.svelte";
-let {
-  appearance,
-  chipClassName,
-  className,
-  comboboxIconClassName,
-  comboboxIconPath = mdiUnfoldMoreHorizontal,
-  contentSnippet,
-  createButtonClassName,
-  createButtonLabel = "Add",
-  displayClassName,
-  displayFieldName,
-  displayItemsCount,
-  dropdownBodyClassName,
-  dropdownBodySnippet,
-  dropdownClassName,
-  dropdownFooterClassName,
-  dropdownFooterSnippet,
-  dropdownHeaderClassName,
-  dropdownHeaderSnippet,
-  emptyMessage = "No items exists!",
-  emptyMessageSnippet,
-  hasComboboxIcon = true,
-  hasDropdownFooter,
-  hasDropdownFooterCreateButton,
-  hasDropdownHeader,
-  hasDropdownHeaderSearch,
-  hasItemsCheckbox,
-  hasPrimitiveData,
-  iconPathClassName,
-  iconPathFieldName,
-  id,
-  identityFieldName,
-  itemClassName,
-  items,
-  multiple,
-  name,
-  onCreateButtonClick,
-  onSearch,
-  searchClassName,
-  searchFieldName,
-  searchPlaceholder = "Search...",
-  showChip,
-  size,
-  itemSubtitleClassName,
-  itemSubtitleFieldName,
-  itemTitleClassName,
-  itemTitleFieldName,
-  value = $bindable(),
-  ...props
-} = $props();
-let idFieldSymbol = Symbol("_id");
-let searchFieldSymbol = Symbol("_search");
-let searchFieldRef = $state(null);
-let comboboxIconSizeClassName = $state("");
-let isPlaced = $state(false);
-let searchText = $state("");
-let itemsIdentityMap = {};
-let _value = $derived.by(() => {
-  return selectedItemsSet?.size ? "&nbsp;" : "";
-});
-let displayItems = $derived.by(() => {
-  let array = Array.from(selectedItemsSet);
-  let results = array.map((id2) => {
-    if (hasPrimitiveData) {
-      return [id2];
-    } else {
-      let item = itemsIdentityMap[id2];
-      if (item) {
-        if (displayFieldName && item.hasOwnProperty(displayFieldName)) {
-          return item[displayFieldName];
-        }
-      }
-    }
-  });
-  return results;
-});
-let displayItemsTitle = $derived(displayItems.join(", "));
-let displayText = $derived.by(() => {
-  let results = displayItems;
-  if (!showChip) {
-    if (results?.length) {
-      if (multiple) {
-        let res = results.join(", ");
-        if (displayItemsCount != null && displayItemsCount > 1) {
-          res = results.slice(0, displayItemsCount).join(", ");
-          if (results.length > displayItemsCount) {
-            res += `<span class="text-gray-400 px-2">+ ${results.length - displayItemsCount} </span>`;
-          }
-        }
-        return res;
-      } else {
-        return results[0] || "";
-      }
-    }
-  }
-  return "";
-});
-let selectedItemsSet = $derived.by(() => {
-  let set = /* @__PURE__ */ new Set();
-  if (value != null) {
-    if (Array.isArray(value)) {
-      value.forEach((v) => set.add(v));
-    } else if (value) {
-      set.add(value);
-    }
-  }
-  return set;
-});
-let preparedItems = $derived.by(() => {
-  return (items || []).map((item, index) => {
-    let res = {};
-    if (hasPrimitiveData) {
-      res.title = item;
-      res[idFieldSymbol] = item;
-      res[searchFieldSymbol] = ("" + item).toLowerCase().trim();
-    } else {
-      if (identityFieldName && item.hasOwnProperty(identityFieldName)) {
-        res[idFieldSymbol] = item[identityFieldName];
-      } else {
-        res[idFieldSymbol] = index;
-      }
-      itemsIdentityMap[res[idFieldSymbol]] = item;
-      if (itemTitleFieldName && item.hasOwnProperty(itemTitleFieldName)) {
-        res.title = item[itemTitleFieldName];
-      }
-      if (itemSubtitleFieldName && item.hasOwnProperty(itemSubtitleFieldName)) {
-        res.subtitle = item[itemSubtitleFieldName];
-      }
-      if (searchFieldName) {
-        if (item.hasOwnProperty(searchFieldName)) {
-          res[searchFieldSymbol] = (item[searchFieldName] || "").toLowerCase().trim();
-        }
-      } else {
-        res[searchFieldSymbol] = `${item.title || ""} ${item.subtitle || ""}`;
-      }
-    }
-    if (selectedItemsSet.has(res[idFieldSymbol])) {
-      res.isChecked = true;
-    } else {
-      res.isChecked = false;
-    }
-    return res;
-  });
-});
-let filteredItems = $derived.by(() => {
-  if (searchText) {
-    return preparedItems.filter((item) => {
-      return item[searchFieldSymbol].indexOf(searchText) >= 0;
-    });
-  } else {
-    return [...preparedItems];
-  }
-});
-$effect(() => {
-  if (size) {
-    switch (size) {
-      case "lg":
-        comboboxIconSizeClassName = "!h-7 !w-7";
-        break;
-      case "md":
-        comboboxIconSizeClassName = "!h-6 !w-6";
-        break;
-      case "sm":
-        comboboxIconSizeClassName = "!h-5 !w-5";
-        break;
-      case "xs":
-        comboboxIconSizeClassName = "!h-4 !w-4";
-        break;
-    }
-  }
-});
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-function toggleDropdown() {
-  if (isPlaced) {
-    closeDropdown();
-  } else {
-    openDropdown();
-  }
-}
-function closeDropdown() {
-  searchText = "";
-  isPlaced = false;
-  focus();
-}
-function openDropdown() {
-  isPlaced = true;
-}
-function handleInputClick() {
-  toggleDropdown();
-}
-function handleBackdropClick() {
-  toggleDropdown();
-}
-function handleKeyDown(event) {
-  if (event.key === "Escape") {
-    closeDropdown();
-  } else if (event.key === "Enter" || event.key === " ") {
-    event.preventDefault();
-    toggleDropdown();
-  } else if (/^[a-zA-Z0-9]$/.test(event.key)) {
-    searchFieldRef && searchFieldRef.focus();
-  } else if (event.key === "Backspace" || event.key === "Delete") {
-    event.preventDefault();
-    selectedItemsSet.clear();
-    value = null;
-  }
-}
-function handleDropdownKeyDown(event) {
-  if (event.key === "Escape") {
-    closeDropdown();
-  }
-}
-function handleSearch(value2) {
-  searchText = value2;
-}
-function handleItemSelected(ev, item, index) {
-  let id2 = item[idFieldSymbol];
-  if (multiple) {
-    if (selectedItemsSet.has(id2)) {
-      selectedItemsSet.delete(id2);
-    } else {
-      selectedItemsSet.add(id2);
-    }
-  } else {
-    selectedItemsSet.clear();
-    selectedItemsSet.add(id2);
-  }
-  items = [...items || []];
-  let array = Array.from(selectedItemsSet);
-  if (array.length) {
-    value = multiple ? array : array[0];
-  } else {
-    value = null;
-  }
-  if (!multiple) {
-    closeDropdown();
-  }
-}
+<script lang="ts">
+	import type { ListItemType } from '../../../button/components/button-list-item/button-list-item.svelte';
+	import ButtonListItem from '../../../button/components/button-list-item/button-list-item.svelte';
+	import Button from '../../../button/components/button/button.svelte';
+	import { mdiUnfoldMoreHorizontal } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import NoData from '../../../no-data/components/no-data/no-data.svelte';
+	import type { Snippet } from 'svelte';
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+	import SearchField from '../search-field/search-field.svelte';
+
+	type PropsType = {
+		chipClassName?: string;
+		comboboxIconClassName?: string;
+		comboboxIconPath?: string;
+		createButtonClassName?: string;
+		createButtonLabel?: string;
+		displayClassName?: string;
+		displayFieldName?: string;
+		displayItemsCount?: number;
+		dropdownBodyClassName?: string;
+		dropdownBodySnippet?: Snippet;
+		dropdownClassName?: string;
+		dropdownFooterClassName?: string;
+		dropdownFooterSnippet?: Snippet;
+		dropdownHeaderClassName?: string;
+		dropdownHeaderSnippet?: Snippet;
+		emptyMessage?: string;
+		emptyMessageSnippet?: Snippet;
+		hasComboboxIcon?: boolean;
+		hasDropdownFooter?: boolean;
+		hasDropdownFooterCreateButton?: boolean;
+		hasDropdownHeader?: boolean;
+		hasDropdownHeaderSearch?: boolean;
+		hasItemsCheckbox?: boolean;
+		hasPrimitiveData?: boolean;
+		iconPathClassName?: string;
+		iconPathFieldName?: string;
+		identityFieldName?: string;
+		itemClassName?: string;
+		items?: any[];
+		multiple?: boolean;
+		onCreateButtonClick?: (ev: MouseEvent) => void;
+		onSearch?: (value: string) => void;
+		searchClassName?: string;
+		searchFieldName?: string;
+		searchPlaceholder?: string;
+		showChip?: boolean;
+		itemSubtitleClassName?: string;
+		itemSubtitleFieldName?: string;
+		itemTitleClassName?: string;
+		itemTitleFieldName?: string;
+	};
+
+	let {
+		appearance,
+		chipClassName,
+		className,
+		comboboxIconClassName,
+		comboboxIconPath = mdiUnfoldMoreHorizontal,
+		contentSnippet,
+		createButtonClassName,
+		createButtonLabel = 'Add',
+		displayClassName,
+		displayFieldName,
+		displayItemsCount,
+		dropdownBodyClassName,
+		dropdownBodySnippet,
+		dropdownClassName,
+		dropdownFooterClassName,
+		dropdownFooterSnippet,
+		dropdownHeaderClassName,
+		dropdownHeaderSnippet,
+		emptyMessage = 'No items exists!',
+		emptyMessageSnippet,
+		hasComboboxIcon = true,
+		hasDropdownFooter,
+		hasDropdownFooterCreateButton,
+		hasDropdownHeader,
+		hasDropdownHeaderSearch,
+		hasItemsCheckbox,
+		hasPrimitiveData,
+		iconPathClassName,
+		iconPathFieldName,
+		id,
+		identityFieldName,
+		itemClassName,
+		items,
+		multiple,
+		name,
+		onCreateButtonClick,
+		onSearch,
+		searchClassName,
+		searchFieldName,
+		searchPlaceholder = 'Search...',
+		showChip,
+		size,
+		itemSubtitleClassName,
+		itemSubtitleFieldName,
+		itemTitleClassName,
+		itemTitleFieldName,
+		value = $bindable(),
+		...props
+	}: InputFieldPropsType & PropsType = $props();
+	type CustomListItemType = ListItemType & {
+		[key: symbol]: string | number;
+	};
+	let idFieldSymbol = Symbol('_id');
+	let searchFieldSymbol = Symbol('_search');
+
+	let searchFieldRef: SearchField | null = $state(null);
+
+	let comboboxIconSizeClassName = $state('');
+
+	let isPlaced = $state(false);
+	let searchText: string = $state('');
+
+	let itemsIdentityMap: any = {};
+
+	let _value = $derived.by(() => {
+		return selectedItemsSet?.size ? '&nbsp;' : '';
+	});
+
+	let displayItems: string[] = $derived.by(() => {
+		let array = Array.from(selectedItemsSet);
+		let results = array.map((id) => {
+			if (hasPrimitiveData) {
+				return [id];
+			} else {
+				let item = itemsIdentityMap[id];
+				if (item) {
+					if (displayFieldName && item.hasOwnProperty(displayFieldName)) {
+						return item[displayFieldName];
+					}
+				}
+			}
+		});
+		return results;
+	});
+
+	let displayItemsTitle = $derived(displayItems.join(', '));
+
+	let displayText: string = $derived.by(() => {
+		let results: string[] = displayItems;
+		if (!showChip) {
+			if (results?.length) {
+				if (multiple) {
+					let res: string = results.join(', ');
+					if (displayItemsCount != null && displayItemsCount > 1) {
+						res = results.slice(0, displayItemsCount).join(', ');
+						if (results.length > displayItemsCount) {
+							res += `<span class="text-gray-400 px-2">+ ${results.length - displayItemsCount} </span>`;
+						}
+					}
+					return res;
+				} else {
+					return results[0] || '';
+				}
+			}
+		}
+
+		return '';
+	});
+
+	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 if (value) {
+				set.add(value);
+			}
+		}
+		return set;
+	});
+
+	let preparedItems: CustomListItemType[] = $derived.by(() => {
+		return (items || []).map((item, index) => {
+			let res: CustomListItemType = {};
+			if (hasPrimitiveData) {
+				res.title = item;
+				res[idFieldSymbol] = item;
+				res[searchFieldSymbol] = ('' + item).toLowerCase().trim();
+			} else {
+				if (identityFieldName && item.hasOwnProperty(identityFieldName)) {
+					res[idFieldSymbol] = item[identityFieldName];
+				} else {
+					res[idFieldSymbol] = index;
+				}
+
+				itemsIdentityMap[res[idFieldSymbol]] = item;
+
+				if (itemTitleFieldName && item.hasOwnProperty(itemTitleFieldName)) {
+					res.title = item[itemTitleFieldName];
+				}
+				if (itemSubtitleFieldName && item.hasOwnProperty(itemSubtitleFieldName)) {
+					res.subtitle = item[itemSubtitleFieldName];
+				}
+
+				if (searchFieldName) {
+					if (item.hasOwnProperty(searchFieldName)) {
+						res[searchFieldSymbol] = (item[searchFieldName] || '').toLowerCase().trim();
+					}
+				} else {
+					res[searchFieldSymbol] = `${item.title || ''} ${item.subtitle || ''}`;
+				}
+			}
+			if (selectedItemsSet.has(res[idFieldSymbol])) {
+				res.isChecked = true;
+			} else {
+				res.isChecked = false;
+			}
+			return res;
+		});
+	});
+
+	let filteredItems: CustomListItemType[] = $derived.by(() => {
+		if (searchText) {
+			return preparedItems.filter((item: any) => {
+				return item[searchFieldSymbol].indexOf(searchText) >= 0;
+			});
+		} else {
+			return [...preparedItems];
+		}
+	});
+
+	$effect(() => {
+		if (size) {
+			switch (size) {
+				case 'lg':
+					comboboxIconSizeClassName = '!h-7 !w-7';
+					break;
+				case 'md':
+					comboboxIconSizeClassName = '!h-6 !w-6';
+					break;
+				case 'sm':
+					comboboxIconSizeClassName = '!h-5 !w-5';
+					break;
+				case 'xs':
+					comboboxIconSizeClassName = '!h-4 !w-4';
+					break;
+			}
+		}
+	});
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	function toggleDropdown() {
+		if (isPlaced) {
+			closeDropdown();
+		} else {
+			openDropdown();
+		}
+	}
+
+	function closeDropdown() {
+		searchText = '';
+		isPlaced = false;
+		focus();
+	}
+
+	function openDropdown() {
+		isPlaced = true;
+	}
+
+	function handleInputClick() {
+		toggleDropdown();
+	}
+
+	function handleBackdropClick() {
+		toggleDropdown();
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			closeDropdown();
+		} else if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault(); // Prevent default action for spacebar to avoid scrolling
+			toggleDropdown();
+		} else if (/^[a-zA-Z0-9]$/.test(event.key)) {
+			searchFieldRef && searchFieldRef.focus();
+		} else if (event.key === 'Backspace' || event.key === 'Delete') {
+			event.preventDefault(); // Prevent default action for these keys if necessary
+			selectedItemsSet.clear();
+			value = null;
+		}
+	}
+
+	function handleDropdownKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			closeDropdown();
+		}
+	}
+
+	function handleSearch(value: string) {
+		searchText = value;
+	}
+
+	function handleItemSelected(ev: MouseEvent, item: CustomListItemType, index: number) {
+		let id = item[idFieldSymbol];
+		if (multiple) {
+			if (selectedItemsSet.has(id)) {
+				selectedItemsSet.delete(id);
+			} else {
+				selectedItemsSet.add(id);
+			}
+		} else {
+			selectedItemsSet.clear();
+			selectedItemsSet.add(id);
+		}
+
+		items = [...(items || [])];
+
+		let array = Array.from(selectedItemsSet);
+		if (array.length) {
+			value = multiple ? array : array[0];
+		} else {
+			value = null;
+		}
+
+		if (!multiple) {
+			closeDropdown();
+		}
+
+		// console.log('handleItemSelected', selectedItemsSet, value);
+	}
 </script>
 
 {#snippet rightIcon()}

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

@@ -1,9 +1,13 @@
-<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
-let props = $props();
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
+<script lang="ts">
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let props: InputFieldPropsType = $props();
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="date" />

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

@@ -1,9 +1,13 @@
-<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
-let props = $props();
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
+<script lang="ts">
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let props: InputFieldPropsType = $props();
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="datetime-local"  />

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

@@ -1,9 +1,12 @@
-<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
-let props = $props();
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
+<script lang="ts">
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let props: InputFieldPropsType = $props();
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="email" maxlength={props?.maxlength || 80} />