@bagelink/vue 0.0.805 → 0.0.807

package/dist/components/form/inputs/FileUpload.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAkgBA,OAAO,EAAmC,KAAK,WAAW,EAAY,MAAM,eAAe,CAAA;AA+B3F,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;AAmHzC,iBAAS,MAAM,SAgBd;AA6BD,iBAAS,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAxKZ,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;YAyZQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;0BA5ZnB,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;;YA0Ze,GAAG;;;WASvB,OAAO,IAA6B;EAEjD;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YAjdZ,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;;;;;YATN,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;;;;kFA+cb,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAkgBA,OAAO,EAAmC,KAAK,WAAW,EAAY,MAAM,eAAe,CAAA;AAK3F,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;AA6IzC,iBAAS,MAAM,SAgBd;AA6BD,iBAAS,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAlKZ,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;YAmZQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;0BAtZnB,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;;YAoZe,GAAG;;;WASvB,OAAO,IAA6B;EAEjD;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YA7cZ,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;;;;;YATN,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;;;;kFA2cb,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/form/inputs/SelectInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAAA,OAiXO,EAKN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAEtB,OAAO,wBAAwB,CAAA;AAkL/B,iBAAS,cAAc;;sBAkMI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAoEgkB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAzDtsB,OAAO,IAA6B;EAEjD;AA6BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aA1ZX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;;;;aAbjB,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;;;kFAoZzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAAA,OA4XO,EAKN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAEtB,OAAO,wBAAwB,CAAA;AA0L/B,iBAAS,cAAc;;sBAwNI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA8BO,GAAG,8CACD,GAAE,yBAC7B,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WArBvC,OAAO,IAA6B;EAEjD;AA8BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAzbX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;;;;aAbjB,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;;;kFAmbzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/layout/BottomMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/BottomMenu.vue"],"names":[],"mappings":"AAsEA,OAAO,EAIN,KAAK,OAAO,EACZ,MAAM,eAAe,CAAA;AAatB,iBAAS,cAAc;;uBAyFI,GAAG;;;WAShB,OAAO,IAA6B;EAEjD;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;cAxHV,OAAO,EAAE;;cAAT,OAAO,EAAE;iGA8HlB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"BottomMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/BottomMenu.vue"],"names":[],"mappings":"AAsEA,OAAO,EAIN,KAAK,OAAO,EACZ,MAAM,eAAe,CAAA;AAatB,iBAAS,cAAc;;uBA0FI,GAAG;;;WAShB,OAAO,IAA6B;EAEjD;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;cAzHV,OAAO,EAAE;;cAAT,OAAO,EAAE;iGA+HlB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.cjs

@@ -18643,8 +18643,8 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
-    const bagel = useBagel();
     const bindKey2 = props2.bindkey || "id";
+    const bagel = useBagel();
     const isImage = (str) => IMAGE_FORMATS_REGEXP.test(str);
     let file_bindkeys = vue.ref(props2.modelValue || []);
     const storageFiles = vue.ref([]);
@@ -18915,7 +18915,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-be593d04"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-3d733095"]]);
 const _hoisted_1$v = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];
@@ -43571,33 +43571,44 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     const selectedItemCount = vue.computed(() => selectedItems.value.length ?? 0);
     let search = vue.ref("");
     const dropdown = vue.ref(null);
+    let selected = vue.ref(false);
     let open = vue.ref(false);
     function openOptions() {
       var _a2;
       (_a2 = dropdown.value) == null ? void 0 : _a2.show();
     }
+    const selectedLabel = vue.computed(() => {
+      if (selectedItemCount.value === 0) return props2.placeholder || "Select";
+      if (selectedItemCount.value > 4) {
+        const str = selectedItems.value.slice(0, 4).map((item) => getLabel(item)).join(", ");
+        return `${str}... +${selectedItemCount.value - 4}`;
+      }
+      return selectedItems.value.map((item) => getLabel(item)).join(", ");
+    });
+    const filteredOptions = vue.computed(() => props2.options.filter((option2) => {
+      const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi"));
+      return Boolean(option2) && searchTerm.every((s2) => getLabel(option2).match(s2));
+    }));
+    const isSelected = (option2) => selectedItems.value.find((item) => getValue(option2) === getValue(item)) !== void 0;
     function updateOpen(visible) {
       open.value = visible;
       if (!open.value) {
+        if (props2.searchable && !props2.multiselect && !search.value && !selected.value) selectedItems.value = [];
+        if (props2.searchable && !props2.multiselect && search.value && filteredOptions.value.length === 1 && !isSelected(filteredOptions.value[0])) {
+          select2(filteredOptions.value[0]);
+        }
         search.value = "";
       } else {
+        if (props2.searchable && !props2.multiselect && selectedItemCount.value) search.value = selectedLabel.value;
         setTimeout(
           () => {
             var _a2, _b, _c;
             return (_c = (_b = (_a2 = searchInput.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
           },
-          100
+          150
         );
       }
     }
-    const selectedLabel = vue.computed(() => {
-      if (selectedItemCount.value === 0) return props2.placeholder || "Select";
-      if (selectedItemCount.value > 4) {
-        const str = selectedItems.value.slice(0, 4).map((item) => getLabel(item)).join(", ");
-        return `${str}... +${selectedItemCount.value - 4}`;
-      }
-      return selectedItems.value.map((item) => getLabel(item)).join(", ");
-    });
     function getLabel(option2) {
       if (!option2) return "";
       if (typeof option2 === "string") return option2;
@@ -43610,13 +43621,9 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
       if (typeof option2 === "number") return option2;
       return option2.value;
     }
-    const isSelected = (option2) => selectedItems.value.find((item) => getValue(option2) === getValue(item)) !== void 0;
-    const filteredOptions = vue.computed(() => props2.options.filter((option2) => {
-      const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
-      return Boolean(option2) && searchTerm.every((s2) => getLabel(option2).match(s2));
-    }));
     function select2(option2) {
       var _a2;
+      selected.value = true;
       const existingIndex = selectedItems.value.findIndex(
         (item) => getValue(item) === getValue(option2)
       );
@@ -43689,18 +43696,30 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
         ref: dropdown,
         placement: "bottom-start",
         class: "bagel-input selectinput",
-        onHide: _cache[4] || (_cache[4] = ($event) => updateOpen(false))
+        onHide: _cache[5] || (_cache[5] = ($event) => updateOpen(false))
       }, {
         trigger: vue.withCtx(() => [
           vue.createElementVNode("label", null, [
             vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
             vue.createElementVNode("div", _hoisted_1$o, [
-              vue.createElementVNode("button", {
+              _ctx.searchable && vue.unref(open) ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
+                key: 0,
+                ref_key: "searchInput",
+                ref: searchInput,
+                modelValue: vue.unref(search),
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(search) ? search.value = $event : search = $event),
+                class: "mb-0",
+                dense: "",
+                placeholder: searchPlaceholder.value,
+                icon: "search",
+                onInput: _cache[1] || (_cache[1] = ($event) => vue.isRef(selected) ? selected.value = false : selected = false)
+              }, null, 8, ["modelValue", "placeholder"])) : (vue.openBlock(), vue.createElementBlock("button", {
+                key: 1,
                 disabled: _ctx.disabled,
                 type: "button",
                 class: vue.normalizeClass(["selectinput-btn", { isEmpty: selectedItemCount.value === 0 }]),
                 onKeydown: openOptions,
-                onClick: _cache[1] || (_cache[1] = ($event) => updateOpen(true))
+                onClick: _cache[3] || (_cache[3] = ($event) => updateOpen(true))
               }, [
                 _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                   key: 0,
@@ -43713,7 +43732,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
                     thin: "",
                     icon: "clear",
                     class: "color-gray",
-                    onClick: _cache[0] || (_cache[0] = ($event) => {
+                    onClick: _cache[2] || (_cache[2] = ($event) => {
                       vue.isRef(selectedItems) ? selectedItems.value = [] : selectedItems = [];
                       emitUpdate();
                     })
@@ -43723,14 +43742,14 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
                   key: 3,
                   thin: ""
                 }, { icon: vue.unref(open) ? "unfold_less" : "unfold_more" }), null, 16)) : vue.createCommentVNode("", true)
-              ], 42, _hoisted_2$f),
+              ], 42, _hoisted_2$f)),
               _ctx.required ? (vue.openBlock(), vue.createElementBlock("input", {
-                key: 0,
+                key: 2,
                 tabindex: "-1",
                 style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
                 value: vue.unref(selectedItems),
                 required: "",
-                onInput: _cache[2] || (_cache[2] = ($event) => updateOpen(true))
+                onInput: _cache[4] || (_cache[4] = ($event) => updateOpen(true))
               }, null, 40, _hoisted_5$7)) : vue.createCommentVNode("", true)
             ])
           ])
@@ -43741,16 +43760,6 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
             style: vue.normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
           }, {
             default: vue.withCtx(() => [
-              _ctx.searchable ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
-                key: 0,
-                ref_key: "searchInput",
-                ref: searchInput,
-                modelValue: vue.unref(search),
-                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => vue.isRef(search) ? search.value = $event : search = $event),
-                dense: "",
-                placeholder: searchPlaceholder.value,
-                icon: "search"
-              }, null, 8, ["modelValue", "placeholder"])) : vue.createCommentVNode("", true),
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(["selectinput-options", { multiselect: _ctx.multiselect }])
               }, [
@@ -43791,7 +43800,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-ced4ac7e"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-949f4227"]]);
 const _hoisted_1$n = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
@@ -52443,7 +52452,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(vue.unref(_sfc_main$c), {
                   icon: nav2.icon,
                   size: 1.4,
-                  class: "m-0"
+                  class: "m-0 line-height-14"
                 }, null, 8, ["icon"]),
                 vue.createElementVNode("p", _hoisted_1$g, vue.toDisplayString(nav2.label), 1)
               ]),
@@ -52456,7 +52465,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-564c7855"]]);
+const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-557bcad0"]]);
 const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "Layout",
   props: {

package/dist/index.mjs

@@ -18641,8 +18641,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
-    const bagel = useBagel();
     const bindKey2 = props2.bindkey || "id";
+    const bagel = useBagel();
     const isImage = (str) => IMAGE_FORMATS_REGEXP.test(str);
     let file_bindkeys = ref(props2.modelValue || []);
     const storageFiles = ref([]);
@@ -18913,7 +18913,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-be593d04"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-3d733095"]]);
 const _hoisted_1$v = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];
@@ -43569,33 +43569,44 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const selectedItemCount = computed(() => selectedItems.value.length ?? 0);
     let search = ref("");
     const dropdown = ref(null);
+    let selected = ref(false);
     let open = ref(false);
     function openOptions() {
       var _a2;
       (_a2 = dropdown.value) == null ? void 0 : _a2.show();
     }
+    const selectedLabel = computed(() => {
+      if (selectedItemCount.value === 0) return props2.placeholder || "Select";
+      if (selectedItemCount.value > 4) {
+        const str = selectedItems.value.slice(0, 4).map((item) => getLabel(item)).join(", ");
+        return `${str}... +${selectedItemCount.value - 4}`;
+      }
+      return selectedItems.value.map((item) => getLabel(item)).join(", ");
+    });
+    const filteredOptions = computed(() => props2.options.filter((option2) => {
+      const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi"));
+      return Boolean(option2) && searchTerm.every((s2) => getLabel(option2).match(s2));
+    }));
+    const isSelected = (option2) => selectedItems.value.find((item) => getValue(option2) === getValue(item)) !== void 0;
     function updateOpen(visible) {
       open.value = visible;
       if (!open.value) {
+        if (props2.searchable && !props2.multiselect && !search.value && !selected.value) selectedItems.value = [];
+        if (props2.searchable && !props2.multiselect && search.value && filteredOptions.value.length === 1 && !isSelected(filteredOptions.value[0])) {
+          select2(filteredOptions.value[0]);
+        }
         search.value = "";
       } else {
+        if (props2.searchable && !props2.multiselect && selectedItemCount.value) search.value = selectedLabel.value;
         setTimeout(
           () => {
             var _a2, _b, _c;
             return (_c = (_b = (_a2 = searchInput.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
           },
-          100
+          150
         );
       }
     }
-    const selectedLabel = computed(() => {
-      if (selectedItemCount.value === 0) return props2.placeholder || "Select";
-      if (selectedItemCount.value > 4) {
-        const str = selectedItems.value.slice(0, 4).map((item) => getLabel(item)).join(", ");
-        return `${str}... +${selectedItemCount.value - 4}`;
-      }
-      return selectedItems.value.map((item) => getLabel(item)).join(", ");
-    });
     function getLabel(option2) {
       if (!option2) return "";
       if (typeof option2 === "string") return option2;
@@ -43608,13 +43619,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       if (typeof option2 === "number") return option2;
       return option2.value;
     }
-    const isSelected = (option2) => selectedItems.value.find((item) => getValue(option2) === getValue(item)) !== void 0;
-    const filteredOptions = computed(() => props2.options.filter((option2) => {
-      const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
-      return Boolean(option2) && searchTerm.every((s2) => getLabel(option2).match(s2));
-    }));
     function select2(option2) {
       var _a2;
+      selected.value = true;
       const existingIndex = selectedItems.value.findIndex(
         (item) => getValue(item) === getValue(option2)
       );
@@ -43687,18 +43694,30 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         ref: dropdown,
         placement: "bottom-start",
         class: "bagel-input selectinput",
-        onHide: _cache[4] || (_cache[4] = ($event) => updateOpen(false))
+        onHide: _cache[5] || (_cache[5] = ($event) => updateOpen(false))
       }, {
         trigger: withCtx(() => [
           createElementVNode("label", null, [
             createTextVNode(toDisplayString(_ctx.label) + " ", 1),
             createElementVNode("div", _hoisted_1$o, [
-              createElementVNode("button", {
+              _ctx.searchable && unref(open) ? (openBlock(), createBlock(unref(TextInput), {
+                key: 0,
+                ref_key: "searchInput",
+                ref: searchInput,
+                modelValue: unref(search),
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(search) ? search.value = $event : search = $event),
+                class: "mb-0",
+                dense: "",
+                placeholder: searchPlaceholder.value,
+                icon: "search",
+                onInput: _cache[1] || (_cache[1] = ($event) => isRef(selected) ? selected.value = false : selected = false)
+              }, null, 8, ["modelValue", "placeholder"])) : (openBlock(), createElementBlock("button", {
+                key: 1,
                 disabled: _ctx.disabled,
                 type: "button",
                 class: normalizeClass(["selectinput-btn", { isEmpty: selectedItemCount.value === 0 }]),
                 onKeydown: openOptions,
-                onClick: _cache[1] || (_cache[1] = ($event) => updateOpen(true))
+                onClick: _cache[3] || (_cache[3] = ($event) => updateOpen(true))
               }, [
                 _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
                   key: 0,
@@ -43711,7 +43730,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                     thin: "",
                     icon: "clear",
                     class: "color-gray",
-                    onClick: _cache[0] || (_cache[0] = ($event) => {
+                    onClick: _cache[2] || (_cache[2] = ($event) => {
                       isRef(selectedItems) ? selectedItems.value = [] : selectedItems = [];
                       emitUpdate();
                     })
@@ -43721,14 +43740,14 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                   key: 3,
                   thin: ""
                 }, { icon: unref(open) ? "unfold_less" : "unfold_more" }), null, 16)) : createCommentVNode("", true)
-              ], 42, _hoisted_2$f),
+              ], 42, _hoisted_2$f)),
               _ctx.required ? (openBlock(), createElementBlock("input", {
-                key: 0,
+                key: 2,
                 tabindex: "-1",
                 style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
                 value: unref(selectedItems),
                 required: "",
-                onInput: _cache[2] || (_cache[2] = ($event) => updateOpen(true))
+                onInput: _cache[4] || (_cache[4] = ($event) => updateOpen(true))
               }, null, 40, _hoisted_5$7)) : createCommentVNode("", true)
             ])
           ])
@@ -43739,16 +43758,6 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             style: normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
           }, {
             default: withCtx(() => [
-              _ctx.searchable ? (openBlock(), createBlock(unref(TextInput), {
-                key: 0,
-                ref_key: "searchInput",
-                ref: searchInput,
-                modelValue: unref(search),
-                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(search) ? search.value = $event : search = $event),
-                dense: "",
-                placeholder: searchPlaceholder.value,
-                icon: "search"
-              }, null, 8, ["modelValue", "placeholder"])) : createCommentVNode("", true),
               createElementVNode("div", {
                 class: normalizeClass(["selectinput-options", { multiselect: _ctx.multiselect }])
               }, [
@@ -43789,7 +43798,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-ced4ac7e"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-949f4227"]]);
 const _hoisted_1$n = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
@@ -52441,7 +52450,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 createVNode(unref(_sfc_main$c), {
                   icon: nav2.icon,
                   size: 1.4,
-                  class: "m-0"
+                  class: "m-0 line-height-14"
                 }, null, 8, ["icon"]),
                 createElementVNode("p", _hoisted_1$g, toDisplayString(nav2.label), 1)
               ]),
@@ -52454,7 +52463,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-564c7855"]]);
+const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-557bcad0"]]);
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "Layout",
   props: {

package/dist/style.css

@@ -720,7 +720,7 @@ data[data-v-5f91f598] {
 }
 }
 
-.fileUploadWrap[data-v-be593d04] {
+.fileUploadWrap[data-v-3d733095] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -732,7 +732,7 @@ data[data-v-5f91f598] {
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-be593d04] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-3d733095] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -740,14 +740,14 @@ data[data-v-5f91f598] {
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-be593d04],
-.fileUploadWrap[data-v-be593d04]:hover {
+.fileUploadWrap.dragover[data-v-3d733095],
+.fileUploadWrap[data-v-3d733095]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*="height: auto;"][data-v-be593d04] {
+.fileUploadWrap[style*="height: auto;"][data-v-3d733095] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-be593d04] {
+.multi-image-item-preview[data-v-3d733095] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -761,12 +761,12 @@ data[data-v-5f91f598] {
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-be593d04] {
+.multi-image-item-preview p[data-v-3d733095] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-be593d04]{
+.multi-preview[data-v-3d733095]{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -777,17 +777,17 @@ data[data-v-5f91f598] {
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-be593d04]{
+.bgl-single-preview[data-v-3d733095]{
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-be593d04]{
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-3d733095]{
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-be593d04] {
+.single-image-item-preview[data-v-3d733095] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -795,13 +795,13 @@ data[data-v-5f91f598] {
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-be593d04] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-3d733095] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*="height: auto"] .single-preview[data-v-be593d04] {
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-3d733095] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-be593d04]{
+.single-preview[data-v-3d733095]{
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -811,17 +811,17 @@ data[data-v-5f91f598] {
 	background: var(--bgl-gray-light);
 	box-shadow: 0 0 10px #00000012;
 }
-.bgl_fill-image.single-image-item-preview[data-v-be593d04] {
+.bgl_fill-image.single-image-item-preview[data-v-3d733095] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-be593d04]{
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-3d733095]{
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-be593d04] {
+.single-image-item-preview .pie[data-v-3d733095] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -835,31 +835,31 @@ data[data-v-5f91f598] {
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-be593d04] {
+.bgl_oval-upload[data-v-3d733095] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-be593d04] {
+.bgl_oval-upload p[data-v-3d733095] {
 		padding: 0.75rem !important;
 		font-size: 12px
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-be593d04]{
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-3d733095]{
 		top: 0;
 }
-.bgl_oval-upload .pie[data-v-be593d04] {
+.bgl_oval-upload .pie[data-v-3d733095] {
 		transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-be593d04] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-3d733095] {
 		transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-be593d04]{
+.bgl_oval-upload .single-image-item-preview[data-v-3d733095]{
 		height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-be593d04] {
+.bgl_oval-upload .single-preview[data-v-3d733095] {
 		margin: 0;
 		height: 100% !important;
 }
-.pie[data-v-be593d04] {
+.pie[data-v-3d733095] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -867,7 +867,7 @@ data[data-v-5f91f598] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-be593d04]:before {
+.pie[data-v-3d733095]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -885,26 +885,26 @@ data[data-v-5f91f598] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-be593d04] {
+.pie .success[data-v-3d733095] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-be593d04] {
+.pie .progress[data-v-3d733095] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-be593d04] {
+.pie.complete .progress[data-v-3d733095] {
 	display: none;
 }
-.pie.complete .success[data-v-be593d04] {
+.pie.complete .success[data-v-3d733095] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-be593d04]:before {
+.pie.complete[data-v-3d733095]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-be593d04] {
+.pie.complete[data-v-3d733095] {
 	color: var(--bgl-green);
 }
 
@@ -1190,10 +1190,10 @@ p {
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-ced4ac7e] {
+.selectinput[data-v-949f4227] {
 	width: 100%;
 }
-.selectinput-option[data-v-ced4ac7e] {
+.selectinput-option[data-v-949f4227] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1205,23 +1205,23 @@ p {
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-option .bgl_icon-font[data-v-ced4ac7e]{
+.selectinput-option .bgl_icon-font[data-v-949f4227]{
 	line-height: normal;
 }
-.selectinput-options.multiselect .selectinput-option[data-v-ced4ac7e] {
+.selectinput-options.multiselect .selectinput-option[data-v-949f4227] {
 	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-ced4ac7e] {
+.selectinput-options[data-v-949f4227] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-ced4ac7e]:hover {
+.selectinput-option[data-v-949f4227]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-ced4ac7e] {
+.isEmpty p[data-v-949f4227] {
 	opacity: 0.3;
 }
-.selected[data-v-ced4ac7e]{
+.selected[data-v-949f4227]{
 	/* background: var(--bgl-primary-tint); */
 	background: var(--bgl-selected);
 }
@@ -1733,7 +1733,7 @@ p {
   gap: 0;
 }
 
-.bgl_bottombar[data-v-564c7855] {
+.bgl_bottombar[data-v-557bcad0] {
   background-color: var(--bgl-primary);
   color: var(--bgl-light-text);
   grid-template-columns: repeat(auto-fill, var(--bgl_bottombar-btn-width));
@@ -1742,16 +1742,16 @@ p {
 	padding: 0;
 	--bgl_bottombar-btn-width: 62px;
 }
-.bgl_bottombar[data-v-564c7855]>* {
+.bgl_bottombar[data-v-557bcad0]>* {
   width: var(--bgl_bottombar-btn-width);
 }
-.bgl_bottombar[data-v-564c7855]::-webkit-scrollbar {
+.bgl_bottombar[data-v-557bcad0]::-webkit-scrollbar {
   display: none;
 }
-.bgl_bottombar .nav-button[data-v-564c7855] {
+.bgl_bottombar .nav-button[data-v-557bcad0] {
   border-radius: var(--card-border-radius);
 }
-.bgl_bottombar .router-link-active[data-v-564c7855] {
+.bgl_bottombar .router-link-active[data-v-557bcad0] {
   background: var(--bgl-popup-bg);
   color: var(--bgl-primary) !important;
 }
@@ -8693,15 +8693,17 @@ select {
 .list-leave-active {
     position: absolute;
 }
+body:has([class*="slide-fade"])::-webkit-scrollbar {
+    width: 0em !important;
+    height: 0em !important;
+}
 .slide-fade-enter-active {
     transition: all 0.15s ease-out;
     overflow: hidden;
-
 }
 .slide-fade-leave-active {
     transition: all 0.15s ease-in;
     overflow: hidden;
-
 }
 .slide-fade-enter-from {
     transform: translateX(20px);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.805",
+  "version": "0.0.807",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -54,7 +54,7 @@
     "@types/leaflet": "^1.9.12",
     "@types/signature_pad": "^2.3.6",
     "@vue-macros/reactivity-transform": "^1.1.1",
-    "vue": "^3.5.11"
+    "vue": "^3.5.12"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",

package/src/components/form/inputs/FileUpload.vue

@@ -2,6 +2,10 @@
 import { Btn, IMAGE_FORMATS_REGEXP, Icon, type StorageFile, useBagel } from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
 
+type StrKey = keyof StorageFile
+
+type FSValue = string[] | string | number
+
 const props = defineProps<{
 	label?: string
 	multiple?: boolean
@@ -17,6 +21,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
 
+const bindKey: StrKey = props.bindkey || 'id'
+
 const bagel = useBagel()
 
 interface QueueFile {
@@ -27,12 +33,6 @@ interface QueueFile {
 	uploaded?: boolean
 }
 
-type StrKey = keyof StorageFile
-
-type FSValue = string[] | string | number
-
-const bindKey: StrKey = props.bindkey || 'id'
-
 const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
 
 let file_bindkeys = $ref<FSValue>(props.modelValue || [])

package/src/components/form/inputs/SelectInput.vue

@@ -37,10 +37,10 @@ const searchInput = $ref<HTMLInputElement | null>(null)
 let selectedItems = $ref<Option[]>([])
 
 const selectedItemCount = $computed(() => selectedItems.length ?? 0)
-let search = $ref('')
+let search = $ref<string>('')
 
 const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null)
-
+let selected = $ref(false)
 let open = $ref(false)
 
 function openOptions() {
@@ -48,18 +48,7 @@ function openOptions() {
 	// updateOpen(true);
 }
 
-function updateOpen(visible: boolean) {
-	open = visible
-	if (!open) { search = '' }
-	else {
-		setTimeout(
-			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
-			100,
-		)
-	}
-}
-
-const selectedLabel = $computed(() => {
+const selectedLabel = $computed((): string => {
 	if (selectedItemCount === 0) return props.placeholder || 'Select'
 	if (selectedItemCount > 4) {
 		const str = selectedItems
@@ -71,6 +60,38 @@ const selectedLabel = $computed(() => {
 	return selectedItems.map(item => getLabel(item)).join(', ')
 })
 
+const filteredOptions = $computed(() =>	props.options.filter((option) => {
+	const searchTerm = search
+		.split(/\s+/)
+		.filter(Boolean)
+		.map(t => new RegExp(t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'))
+	return (
+		Boolean(option)
+		&& (searchTerm.every(s => getLabel(option).match(s))
+		)
+	)
+}))
+
+const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
+
+function updateOpen(visible: boolean) {
+	open = visible
+	if (!open) {
+		if (props.searchable && !props.multiselect && !search && !selected) selectedItems = []
+		if (props.searchable && !props.multiselect && search && filteredOptions.length === 1 && !isSelected(filteredOptions[0])) {
+			select(filteredOptions[0])
+		}
+		search = ''
+	}
+	else {
+		if (props.searchable && !props.multiselect && selectedItemCount) search = selectedLabel as string
+		setTimeout(
+			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
+			150,
+		)
+	}
+}
+
 function getLabel(option: Option) {
 	if (!option) return ''
 	if (typeof option === 'string') return option
@@ -85,21 +106,8 @@ function getValue(option?: Option) {
 	return option.value
 }
 
-const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
-
-const filteredOptions = $computed(() =>	props.options.filter((option) => {
-	const searchTerm = search
-		.split(/\s+/)
-		.filter(Boolean)
-		.map(t => new RegExp(t, 'gi'))
-	return (
-		Boolean(option)
-		&& (searchTerm.every(s => getLabel(option).match(s))
-		)
-	)
-}))
-
 function select(option: Option) {
+	selected = true
 	const existingIndex = selectedItems.findIndex(
 		item => getValue(item) === getValue(option),
 	)
@@ -191,7 +199,18 @@ onMounted(() => {
 			<label>
 				{{ label }}
 				<div class="flex gap-05">
+					<TextInput
+						v-if="searchable && open"
+						ref="searchInput"
+						v-model="search"
+						class="mb-0"
+						dense
+						:placeholder="searchPlaceholder"
+						icon="search"
+						@input="selected = false"
+					/>
 					<button
+						v-else
 						:disabled="disabled"
 						type="button"
 						class="selectinput-btn"
@@ -234,14 +253,6 @@ onMounted(() => {
 			class="p-05"
 			:style="{ width: fullWidth ? '100%' : 'auto' }"
 		>
-			<TextInput
-				v-if="searchable"
-				ref="searchInput"
-				v-model="search"
-				dense
-				:placeholder="searchPlaceholder"
-				icon="search"
-			/>
 			<div class="selectinput-options" :class="{ multiselect }">
 				<div
 					v-for="(option, i) in filteredOptions"

package/src/components/layout/BottomMenu.vue

@@ -21,8 +21,8 @@ defineProps<{
 			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="m_h-auto"
 			@click="nav.onClick"
 		>
-			<Icon :icon="nav.icon" :size="1.4" class="m-0" />
-			<p class="m-0 pb-025  txt14 line-height-1">
+			<Icon :icon="nav.icon" :size="1.4" class="m-0 line-height-14" />
+			<p class="m-0 pb-025 txt14 line-height-1">
 				{{ nav.label }}
 			</p>
 		</Btn>

package/src/styles/transitions.css

@@ -56,16 +56,19 @@
     position: absolute;
 }
 
+body:has([class*="slide-fade"])::-webkit-scrollbar {
+    width: 0em !important;
+    height: 0em !important;
+}
+
 .slide-fade-enter-active {
     transition: all 0.15s ease-out;
     overflow: hidden;
-
 }
 
 .slide-fade-leave-active {
     transition: all 0.15s ease-in;
     overflow: hidden;
-
 }
 
 .slide-fade-enter-from {