@cloudparker/moldex.js 0.0.72 → 0.0.74

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

@@ -17,7 +17,7 @@ let {
   createButtonClassName,
   createButtonLabel = "Add",
   displayClassName,
-  displayFieldName,
+  displayFieldName = "name",
   displayItemsCount,
   dropdownBodyClassName,
   dropdownBodySnippet,
@@ -33,12 +33,11 @@ let {
   hasDropdownFooterCreateButton,
   hasDropdownHeader,
   hasDropdownHeaderSearch,
-  hasItemsCheckbox,
-  hasPrimitiveItemsData,
-  iconPathClassName,
+  hasCheckbox,
+  iconClassName,
   iconPathFieldName,
   id,
-  identityFieldName,
+  identityFieldName = "_id",
   itemClassName,
   items,
   multiple,
@@ -46,24 +45,41 @@ let {
   onCreateButtonClick,
   onSearch,
   searchClassName,
-  searchFieldName,
+  searchFieldName = "name",
   searchPlaceholder = "Search...",
   showChip,
   size,
-  itemSubtitleClassName,
-  itemSubtitleFieldName,
-  itemTitleClassName,
-  itemTitleFieldName,
+  subtitleClassName,
+  subtitleFieldName,
+  titleClassName,
+  titleFieldName = "name",
   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 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 ? " " : "";
 });
@@ -71,7 +87,7 @@ let displayItems = $derived.by(() => {
   let array = Array.from(selectedItemsSet);
   let results = array.map((id2) => {
     if (hasPrimitiveItemsData) {
-      return [id2];
+      return id2;
     } else {
       let item = itemsIdentityMap[id2];
       if (item) {
@@ -119,65 +135,30 @@ 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;
+      res[identityFieldName] = item;
+      res[titleFieldName] = item;
+      res[searchFieldName] = item;
     } else {
-      res.isChecked = false;
+      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[searchFieldSymbol].indexOf(searchText) >= 0;
+      return (item[searchFieldName] || "").toLowerCase().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();
@@ -225,8 +206,8 @@ function handleDropdownKeyDown(event) {
 function handleSearch(value2) {
   searchText = value2;
 }
-function handleItemSelected(ev, item, index) {
-  let id2 = item[idFieldSymbol];
+function handleItemClick(ev, item, index) {
+  let id2 = item[identityFieldName];
   if (multiple) {
     if (selectedItemsSet.has(id2)) {
       selectedItemsSet.delete(id2);
@@ -356,13 +337,14 @@ function handleItemSelected(ev, item, index) {
 								aria-selected={item.isChecked}
 							>
 								<ButtonListItem
-									{item}
+									title={item[titleFieldName] || ''}
+									subtitle={item[subtitleFieldName || ''] || ''}
 									{index}
-									hasCheckbox={hasItemsCheckbox}
+									{hasCheckbox}
 									className=" {itemClassName}"
-									titleClassName=" {itemTitleClassName}"
-									subtitleClassName=" {itemSubtitleClassName}"
-									onClick={(ev) => handleItemSelected(ev, item, index)}
+									titleClassName=" {titleClassName}"
+									subtitleClassName=" {subtitleClassName}"
+									onClick={(ev) => handleItemClick(ev, item, index)}
 								/>
 							</li>
 						{/each}

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

@@ -21,9 +21,8 @@ export type ComboboxFieldProps = {
     hasDropdownFooterCreateButton?: boolean;
     hasDropdownHeader?: boolean;
     hasDropdownHeaderSearch?: boolean;
-    hasItemsCheckbox?: boolean;
-    hasPrimitiveItemsData?: boolean;
-    iconPathClassName?: string;
+    hasCheckbox?: boolean;
+    iconClassName?: string;
     iconPathFieldName?: string;
     identityFieldName?: string;
     itemClassName?: string;
@@ -35,10 +34,10 @@ export type ComboboxFieldProps = {
     searchFieldName?: string;
     searchPlaceholder?: string;
     showChip?: boolean;
-    itemSubtitleClassName?: string;
-    itemSubtitleFieldName?: string;
-    itemTitleClassName?: string;
-    itemTitleFieldName?: string;
+    subtitleClassName?: string;
+    subtitleFieldName?: string;
+    titleClassName?: string;
+    titleFieldName?: string;
 };
 import type { Snippet } from 'svelte';
 import { type InputFieldProps } from '../input-field/input-field.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "0.0.72",
+    "version": "0.0.74",
     "author": "cloudparker.com",
     "license": "MIT",
     "keywords": [