@intechstudio/grid-uikit 1.20241206.1355 → 1.20241218.1303

package/dist/MeltCombo.svelte

@@ -17,12 +17,13 @@ export let postProcessor = (value2) => {
   return value2;
 };
 export let title = "";
+export let searchable = false;
 const dispatch = createEventDispatcher();
 let isError = false;
-let infoValue = "";
 let oldValue = void 0;
 let inputValue;
 let selected = writable();
+let inputElement;
 const {
   elements: { trigger, content, arrow, close },
   states: { open }
@@ -39,6 +40,12 @@ $:
   handleSelectionChange($selected);
 $:
   handleInputChange(inputValue);
+$:
+  filteredSuggestions = searchable ? suggestions.filter(
+    (e) => e.info.toLowerCase().includes(inputValue?.toLowerCase()) || e.value.toLowerCase().includes(inputValue?.toLowerCase())
+  ) : suggestions;
+$:
+  infoValue = suggestions.find((s) => String(s.value).trim() == String(inputValue).trim())?.info || "";
 function handleValueChange(value2) {
   if (inputValue === value2 || !value2) {
     return;
@@ -53,7 +60,6 @@ function handleSelectionChange(option) {
   handleChange();
 }
 function handleInputChange(input) {
-  infoValue = suggestions.find((s) => String(s.value).trim() == String(input).trim())?.info || "";
   isError = !validator(input);
   if (oldValue === void 0) {
     oldValue = value;
@@ -72,6 +78,12 @@ function handleChange() {
     dispatch("change", postProcessor(inputValue));
   }
 }
+function handleFocus() {
+  filteredSuggestions = suggestions;
+  if (searchable) {
+    inputElement.select();
+  }
+}
 </script>
 
 
@@ -84,10 +96,12 @@ function handleChange() {
     {title}
 
   <input
+    bind:this={inputElement}
     type="text"
     use:melt={$trigger}
     bind:value={inputValue}
     on:change={handleChange}
+    on:focus={handleFocus}
     class="trigger w-full flex flex-row border mb-1 {isError && !disabled
       ? 'border-error'
       : 'border-black'} p-2 {disabled
@@ -105,7 +119,7 @@ function handleChange() {
       class="menu"
     >
   <div>
-        {#each suggestions as suggestion}
+        {#each filteredSuggestions as suggestion}
           <option
             use:melt={$close}
             class="cursor-pointer truncate hover:bg-white/40 flex w-full px-2 py-1 hover:text-white"

package/dist/MeltCombo.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         preProcessor?: (value: string) => string;
         postProcessor?: (value: string) => string;
         title?: string;
+        searchable?: boolean;
     };
     events: {
         validator: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intechstudio/grid-uikit",
-  "version": "1.20241206.1355",
+  "version": "1.20241218.1303",
   "scripts": {
     "dev": "vite",
     "build": "vite build",