@cloudparker/moldex.js 0.0.124 → 4.1.0

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

@@ -1,272 +1,362 @@
-<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 {
-  mdiCheckCircle,
-  mdiCheckCircleOutline,
-  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";
-import { SvelteSet } from "svelte/reactivity";
-import VirtualScrollingList from "../../../common/components/virtual-scrolling/virtual-scrolling-list.svelte";
-let {
-  appearance,
-  chipClassName,
-  className,
-  comboboxIconClassName,
-  comboboxIconPath = mdiUnfoldMoreHorizontal,
-  contentSnippet,
-  createButtonClassName,
-  createButtonLabel = "Add",
-  displayClassName,
-  displayFieldName = "name",
-  displayItemsCount,
-  dropdownBodyClassName,
-  dropdownBodySnippet,
-  dropdownClassName,
-  dropdownFooterClassName,
-  dropdownFooterSnippet,
-  dropdownHeaderClassName,
-  dropdownHeaderSnippet,
-  emptyMessage = "No items exists!",
-  emptyMessageSnippet,
-  hasComboboxIcon = true,
-  hasDropdownFooter,
-  hasDropdownFooterCreateButton,
-  hasDropdownHeader,
-  hasDropdownHeaderSearch,
-  hasCheckbox,
-  iconClassName,
-  iconPathFieldName,
-  id,
-  identityFieldName = "_id",
-  itemClassName,
-  items,
-  multiple,
-  name,
-  onCreateButtonClick,
-  onSearch,
-  searchClassName,
-  searchFieldName = "name",
-  searchPlaceholder = "Search...",
-  showChip,
-  size,
-  subtitleClassName,
-  subtitleFieldName,
-  titleClassName,
-  titleFieldName = "name",
-  value = $bindable(null),
-  checkboxIconPath = mdiCheckCircle,
-  uncheckboxIconPath = mdiCheckCircleOutline,
-  checkboxIconClassName = "",
-  uncheckboxIconClassName = "",
-  checkboxClassName = "",
-  dropPosition = "bottom",
-  itemTileSnippet,
-  onChange,
-  ...props
-} = $props();
-let searchFieldRef = $state(null);
-let isPlaced = $state(false);
-let searchText = $state("");
-let dropdownHeight = $state(0);
-let windowScrollY = $state(0);
-let bodyHeight = $state(0);
-let placementClassName = $derived.by(() => {
-  if (!isPlaced) return "mt-1";
-  const rect = inputFieldRef.getBoundingClientRect();
-  const spaceBelow = window.innerHeight - rect.bottom;
-  const spaceAbove = rect.top;
-  let placement;
-  switch (dropPosition) {
-    case "top":
-      placement = "bottom-full mb-1";
-      break;
-    case "middle":
-      placement = "-translate-y-1/2 top-1/2";
-      break;
-    default:
-      placement = "mt-1";
-  }
-  if (dropPosition === "bottom" && spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
-    placement = "bottom-full mb-1";
-  } else if (dropPosition === "top" && spaceAbove < dropdownHeight && spaceBelow > dropdownHeight) {
-    placement = "mt-1";
-  } else if (dropPosition === "middle") {
-    const spaceNeeded = dropdownHeight / 2;
-    if (spaceAbove < spaceNeeded || spaceBelow < spaceNeeded) {
-      placement = spaceAbove > spaceBelow ? "bottom-full mb-1" : "mt-1";
-    }
-  }
-  return placement;
-});
-let selectedItemsSet = $derived(
-  value ? new SvelteSet(Array.isArray(value) ? value : [value]) : new SvelteSet()
-);
-let comboboxIconSizeClassName = $derived.by(() => {
-  if (size) {
-    switch (size) {
-      case "lg":
-        return "!h-7 !w-7";
-      case "md":
-        return "!h-6 !w-6";
-      case "sm":
-        return "!h-5 !w-5";
-      case "xs":
-        return "!h-4 !w-4";
-    }
-  }
-});
-let hasPrimitiveItemsData = $derived.by(() => {
-  if (items) {
-    let firstItem = items[0];
-    return typeof firstItem == "string" || typeof firstItem == "number" || firstItem instanceof Date;
-  }
-  return false;
-});
-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 preparedItems = $derived.by(() => {
-  return (items || []).map((item, index) => {
-    let res = {};
-    if (hasPrimitiveItemsData) {
-      res[identityFieldName] = item;
-      res[titleFieldName] = item;
-      res[searchFieldName] = item;
-    } else {
-      res = item;
-    }
-    return res;
-  });
-});
-let itemsIdentityMap = $derived.by(() => {
-  return preparedItems.reduce((acc, val) => {
-    acc[val[identityFieldName]] = val;
-    return acc;
-  }, {});
-});
-let filteredItems = $derived.by(() => {
-  if (searchText) {
-    return preparedItems.filter((item) => {
-      return (item[searchFieldName] || "").toLowerCase().indexOf(searchText) >= 0;
-    });
-  } else {
-    return [...preparedItems];
-  }
-});
-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 handleItemClick(ev, item, index) {
-  let id2 = item[identityFieldName];
-  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();
-  }
-  onChange && onChange(value);
-}
+<script module lang="ts">
+	export type ComboboxFieldProps = {
+		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;
+		hasCheckbox?: boolean;
+		iconClassName?: 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;
+		subtitleClassName?: string;
+		subtitleFieldName?: string;
+		titleClassName?: string;
+		titleFieldName?: string;
+		checkboxIconPath?: string;
+		uncheckboxIconPath?: string;
+		checkboxIconClassName?: string;
+		uncheckboxIconClassName?: string;
+		checkboxClassName?: string;
+		dropPosition?: 'top' | 'bottom' | 'middle';
+		itemTileSnippet?: Snippet<[item: any, index: any]>;
+	};
+</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 {
+		mdiCheckCircle,
+		mdiCheckCircleOutline,
+		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 InputFieldProps } from '../input-field/input-field.svelte';
+	import SearchField from '../search-field/search-field.svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import VirtualScrollingList from '../../../common/components/virtual-scrolling/virtual-scrolling-list.svelte';
+
+	let {
+		appearance,
+		chipClassName,
+		className,
+		comboboxIconClassName,
+		comboboxIconPath = mdiUnfoldMoreHorizontal,
+		contentSnippet,
+		createButtonClassName,
+		createButtonLabel = 'Add',
+		displayClassName,
+		displayFieldName = 'name',
+		displayItemsCount,
+		dropdownBodyClassName,
+		dropdownBodySnippet,
+		dropdownClassName,
+		dropdownFooterClassName,
+		dropdownFooterSnippet,
+		dropdownHeaderClassName,
+		dropdownHeaderSnippet,
+		emptyMessage = 'No items exists!',
+		emptyMessageSnippet,
+		hasComboboxIcon = true,
+		hasDropdownFooter,
+		hasDropdownFooterCreateButton,
+		hasDropdownHeader,
+		hasDropdownHeaderSearch,
+		hasCheckbox,
+		iconClassName,
+		iconPathFieldName,
+		id,
+		identityFieldName = '_id',
+		itemClassName,
+		items,
+		multiple,
+		name,
+		onCreateButtonClick,
+		onSearch,
+		searchClassName,
+		searchFieldName = 'name',
+		searchPlaceholder = 'Search...',
+		showChip,
+		size,
+		subtitleClassName,
+		subtitleFieldName,
+		titleClassName,
+		titleFieldName = 'name',
+		value = $bindable(null),
+		checkboxIconPath = mdiCheckCircle,
+		uncheckboxIconPath = mdiCheckCircleOutline,
+		checkboxIconClassName = '',
+		uncheckboxIconClassName = '',
+		checkboxClassName = '',
+		dropPosition = 'bottom',
+		itemTileSnippet,
+		onChange,
+		...props
+	}: InputFieldProps & ComboboxFieldProps = $props();
+
+	let searchFieldRef: any | null = $state(null);
+
+	let isPlaced = $state(false);
+	let searchText: string = $state('');
+	let dropdownHeight = $state(0);
+	let windowScrollY = $state(0);
+	let bodyHeight: number = $state(0);
+
+	let placementClassName = $derived.by(() => {
+		if (!isPlaced) return 'mt-1';
+
+		const rect = inputFieldRef.getBoundingClientRect();
+		const spaceBelow = window.innerHeight - rect.bottom;
+		const spaceAbove = rect.top;
+
+		let placement;
+
+		switch (dropPosition) {
+			case 'top':
+				placement = 'bottom-full mb-1';
+				break;
+			case 'middle':
+				placement = '-translate-y-1/2 top-1/2';
+				break;
+			default:
+				placement = 'mt-1';
+		}
+
+		if (dropPosition === 'bottom' && spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
+			placement = 'bottom-full mb-1';
+		} else if (dropPosition === 'top' && spaceAbove < dropdownHeight && spaceBelow > dropdownHeight) {
+			placement = 'mt-1';
+		} else if (dropPosition === 'middle') {
+			const spaceNeeded = dropdownHeight / 2;
+			if (spaceAbove < spaceNeeded || spaceBelow < spaceNeeded) {
+				placement = spaceAbove > spaceBelow ? 'bottom-full mb-1' : 'mt-1';
+			}
+		}
+
+		return placement;
+	});
+
+	let selectedItemsSet: SvelteSet<any> = $derived(
+		value ? new SvelteSet<any>(Array.isArray(value) ? value : [value]) : new SvelteSet<any>()
+	);
+
+	let comboboxIconSizeClassName = $derived.by(() => {
+		if (size) {
+			switch (size) {
+				case 'lg':
+					return '!h-7 !w-7';
+				case 'md':
+					return '!h-6 !w-6';
+				case 'sm':
+					return '!h-5 !w-5';
+				case 'xs':
+					return '!h-4 !w-4';
+			}
+		}
+	});
+
+	let hasPrimitiveItemsData = $derived.by(() => {
+		if (items) {
+			let firstItem = items[0];
+			return (
+				typeof firstItem == 'string' || typeof firstItem == 'number' || firstItem instanceof Date
+			);
+		}
+		return false;
+	});
+
+	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 preparedItems = $derived.by(() => {
+		return (items || []).map((item, index) => {
+			let res: any = {};
+			if (hasPrimitiveItemsData) {
+				res[identityFieldName] = item;
+				res[titleFieldName] = item;
+				res[searchFieldName] = item;
+			} else {
+				res = item;
+			}
+			return res;
+		});
+	});
+
+	let itemsIdentityMap: any = $derived.by(() => {
+		return preparedItems.reduce((acc, val) => {
+			acc[val[identityFieldName]] = val;
+			return acc;
+		}, {});
+	});
+
+	let filteredItems = $derived.by(() => {
+		if (searchText) {
+			return preparedItems.filter((item: any) => {
+				return (item[searchFieldName] || '').toLowerCase().indexOf(searchText) >= 0;
+			});
+		} else {
+			return [...preparedItems];
+		}
+	});
+
+	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 handleItemClick(ev: MouseEvent, item: any, index: number) {
+		let id = item[identityFieldName];
+		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();
+		}
+
+		onChange && onChange(value);
+
+		// console.log('handleItemClick', selectedItemsSet, value);
+	}
 </script>
 
 {#snippet rightIcon()}