@cloudparker/moldex.js 0.0.65 → 0.0.66

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

@@ -1,333 +1,253 @@
-<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;
-		hasPrimitiveItemsData?: 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,
-		hasPrimitiveItemsData,
-		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: any | 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 (hasPrimitiveItemsData) {
-				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 (hasPrimitiveItemsData) {
-				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: any | 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 module lang="ts"></script>
+
+<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,
+  hasPrimitiveItemsData,
+  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 (hasPrimitiveItemsData) {
+      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 (hasPrimitiveItemsData) {
+      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>
 
 {#snippet rightIcon()}
@@ -387,7 +307,12 @@
 		title={displayItemsTitle || ''}
 	/>
 	{#if isPlaced}
-		<button id="backdrop" class="fixed inset-0 z-10" onclick={handleBackdropClick} tabindex="-1" aria-label="backdrop"
+		<button
+			id="backdrop"
+			class="fixed inset-0 z-10"
+			onclick={handleBackdropClick}
+			tabindex="-1"
+			aria-label="backdrop"
 		></button>
 		<!-- svelte-ignore a11y_interactive_supports_focus -->
 		<div

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

@@ -1,19 +1,4 @@
-import type { Snippet } from 'svelte';
-import { type InputFieldPropsType } from '../input-field/input-field.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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ComboboxField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+export type ComboboxFieldProps = {
     chipClassName?: string;
     comboboxIconClassName?: string;
     comboboxIconPath?: string;
@@ -54,7 +39,23 @@ declare const ComboboxField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsT
     itemSubtitleFieldName?: string;
     itemTitleClassName?: string;
     itemTitleFieldName?: string;
-}, {
+};
+import type { Snippet } from 'svelte';
+import { type InputFieldProps } from '../input-field/input-field.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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ComboboxField: $$__sveltets_2_IsomorphicComponent<InputFieldProps & ComboboxFieldProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;