@bagelink/vue 0.0.825 → 0.0.827

package/dist/index.cjs

@@ -54,7 +54,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$N = ["aria-expanded", "aria-controls"];
+const _hoisted_1$M = ["aria-expanded", "aria-controls"];
 const _hoisted_2$w = { class: "accordion-label" };
 const _hoisted_3$m = ["id", "aria-hidden"];
 const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
@@ -133,7 +133,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createVNode(vue.unref(_sfc_main$c), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_1$N),
+        ], 8, _hoisted_1$M),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
             vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -159,7 +159,7 @@ const _export_sfc = (sfc, props2) => {
   return target;
 };
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-9d8335fa"]]);
-const _hoisted_1$M = { class: "relative" };
+const _hoisted_1$L = { class: "relative" };
 const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
@@ -182,7 +182,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L, [
         vue.createVNode(vue.unref(_sfc_main$N), {
           ref_key: "suggestion",
           ref: suggestion,
@@ -218,7 +218,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$L = {
+const _hoisted_1$K = {
   key: 0,
   class: "loading"
 };
@@ -321,7 +321,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
         onClick: vue.withModifiers(_ctx.onClick, ["stop"])
       }, {
         default: vue.withCtx(() => [
-          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$v, [
+          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$v, [
             _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
               key: 0,
               icon: _ctx.icon
@@ -342,7 +342,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-c00fb1b9"]]);
-const _hoisted_1$K = ["dismissable"];
+const _hoisted_1$J = ["dismissable"];
 const _hoisted_2$u = { class: "m-0" };
 const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   __name: "Alert",
@@ -380,12 +380,12 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$K)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$J)) : vue.createCommentVNode("", true);
     };
   }
 });
 const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-57141c32"]]);
-const _hoisted_1$J = ["src", "alt"];
+const _hoisted_1$I = ["src", "alt"];
 const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
@@ -404,7 +404,7 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$J)) : (vue.openBlock(), vue.createElementBlock("p", {
+        }, null, 8, _hoisted_1$I)) : (vue.openBlock(), vue.createElementBlock("p", {
           key: 1,
           style: vue.normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
         }, vue.toDisplayString((_ctx.fallback || vue.unref(initials)(_ctx.name || "")).toUpperCase()), 5))
@@ -445,7 +445,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-1b4c8cfe"]]);
-const _hoisted_1$I = ["src"];
+const _hoisted_1$H = ["src"];
 const _hoisted_2$t = ["src", "autoplay", "muted", "loop", "controls"];
 const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   __name: "BglVideo",
@@ -501,7 +501,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$I)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
+        }, null, 12, _hoisted_1$H)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
           key: 1,
           src: _ctx.src,
           autoplay: _ctx.autoplay,
@@ -516,7 +516,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-30c80244"]]);
-const _hoisted_1$H = {
+const _hoisted_1$G = {
   key: 0,
   class: "card_label"
 };
@@ -548,7 +548,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
         }])
       }, {
         default: vue.withCtx(() => [
-          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$H, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$G, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -556,7 +556,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$G = {
+const _hoisted_1$F = {
   key: 0,
   class: "blocker"
 };
@@ -750,7 +750,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
           onScroll: scrollEnd,
           onMousedown: startDragging
         }, [
-          vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G)) : vue.createCommentVNode("", true),
+          vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ], 38),
         vue.createElementVNode("div", _hoisted_2$s, [
@@ -6712,13 +6712,13 @@ var script = vue.defineComponent({
     return { bar, canvas, direction, mouse };
   }
 });
-const _hoisted_1$F = {
+const _hoisted_1$E = {
   key: 0,
   class: "layer-hover-bar"
 };
 const _hoisted_2$r = ["x", "y", "width", "height"];
 function render$e(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$F, [
+  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$E, [
     vue.createElementVNode("rect", vue.mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
@@ -6870,7 +6870,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$E = {
+const _hoisted_1$D = {
   key: 0,
   class: "data"
 };
@@ -6927,7 +6927,7 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     const computedSchema = vue.computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
+      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
         _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$3), {
           key: 0,
           label: _ctx.title
@@ -9847,7 +9847,7 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$D = { key: 0 };
+const _hoisted_1$C = { key: 0 };
 const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   __name: "BglMultiStepForm",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -9915,7 +9915,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
           mode: "out-in"
         }, {
           default: vue.withCtx(() => [
-            !vue.unref(isStepping) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
+            !vue.unref(isStepping) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
               vue.createVNode(vue.unref(_sfc_main$K), vue.mergeProps({
                 ref_key: "formRef",
                 ref: formRef,
@@ -9955,7 +9955,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$C = { class: "primary-checkbox" };
+const _hoisted_1$B = { class: "primary-checkbox" };
 const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
   props: {
@@ -9966,7 +9966,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const val = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$C, [
+      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$B, [
         vue.renderSlot(_ctx.$slots, "label", {}, void 0, true),
         vue.withDirectives(vue.createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -9979,7 +9979,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-73f1d9ad"]]);
-const _hoisted_1$B = ["title"];
+const _hoisted_1$A = ["title"];
 const _hoisted_2$p = ["id", "value", "required"];
 const _hoisted_3$j = ["for"];
 const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
@@ -10024,12 +10024,12 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$j)
-      ], 10, _hoisted_1$B);
+      ], 10, _hoisted_1$A);
     };
   }
 });
 const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-03ed2982"]]);
-const _hoisted_1$A = ["title"];
+const _hoisted_1$z = ["title"];
 const _hoisted_2$o = ["id", "placeholder", "required"];
 const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
@@ -10073,7 +10073,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
             [vue.vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$A)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$z)) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -18516,7 +18516,7 @@ const eo = ({
 Object.entries(go).forEach(([e, t]) => {
   e !== "default" && (Hn[e] = t);
 });
-const _hoisted_1$z = ["title"];
+const _hoisted_1$y = ["title"];
 const _hoisted_2$n = { key: 0 };
 const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "DateInput",
@@ -18576,11 +18576,11 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
           "minutes-grid-increment": _ctx.minutesGridIncrement,
           "start-time": { hours: 8, minutes: 0 }
         }), null, 16, ["modelValue", "required", "enable-time-picker", "allowed-dates", "time-picker-inline", "minutes-increment", "minutes-grid-increment"])
-      ], 10, _hoisted_1$z);
+      ], 10, _hoisted_1$y);
     };
   }
 });
-const _hoisted_1$y = { class: "datetime-wrap" };
+const _hoisted_1$x = { class: "datetime-wrap" };
 const _hoisted_2$m = { class: "date-wrap" };
 const _hoisted_3$i = {
   key: 0,
@@ -18616,7 +18616,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
         vue.createElementVNode("div", _hoisted_2$m, [
           vue.createVNode(vue.unref(Hn), vue.mergeProps({
             modelValue: selectedDate.value,
@@ -18657,7 +18657,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$x = { class: "bagel-input" };
+const _hoisted_1$w = { class: "bagel-input" };
 const _hoisted_2$l = {
   key: 0,
   class: "bgl-multi-preview"
@@ -18842,7 +18842,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       const _directive_lightbox = vue.resolveDirective("lightbox");
       const _directive_tooltip = vue.resolveDirective("tooltip");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["fileUploadWrap", {
@@ -19003,7 +19003,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-bfb0bd63"]]);
-const _hoisted_1$w = ["title"];
+const _hoisted_1$v = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];
 const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
@@ -19038,12 +19038,12 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
           placeholder: _ctx.placeholder,
           onInput: handleInput
         }, null, 42, _hoisted_3$g)
-      ], 10, _hoisted_1$w);
+      ], 10, _hoisted_1$v);
     };
   }
 });
 const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-1cbaeab2"]]);
-const _hoisted_1$v = ["value", "autofocus", "onKeydown", "onPaste"];
+const _hoisted_1$u = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",
   props: {
@@ -19142,14 +19142,14 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
             oninput: "this.value = this.value.slice(0, 1);",
             onKeydown: ($event) => handleKeyDown2($event, ind),
             onPaste: ($event) => handlePaste2($event, ind)
-          }, null, 40, _hoisted_1$v);
+          }, null, 40, _hoisted_1$u);
         }), 128))
       ], 512);
     };
   }
 });
 const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-5c22c199"]]);
-const _hoisted_1$u = { class: "relative" };
+const _hoisted_1$t = { class: "relative" };
 const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -19190,7 +19190,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     );
     const inputType = vue.computed(() => showPwd.value ? "text" : "password");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
         vue.createVNode(vue.unref(TextInput), vue.mergeProps({
           modelValue: password.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
@@ -19210,7 +19210,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$t = ["for"];
+const _hoisted_1$s = ["for"];
 const _hoisted_2$j = ["id", "name", "value"];
 const _hoisted_3$f = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
 const _hoisted_4$b = ["src", "alt"];
@@ -19276,14 +19276,14 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
               icon: "delete",
               onClick: ($event) => _ctx.$emit("delete", opt)
             }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
-          ], 8, _hoisted_1$t);
+          ], 8, _hoisted_1$s);
         }), 128))
       ]);
     };
   }
 });
 const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-3e9e030f"]]);
-const _hoisted_1$s = { class: "bagel-input" };
+const _hoisted_1$r = { class: "bagel-input" };
 const _hoisted_2$i = { class: "pb-025" };
 const _hoisted_3$e = { class: "flex gap-05 flex-wrap" };
 const _hoisted_4$a = ["id", "name", "value", "checked"];
@@ -19329,7 +19329,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
       selectedValue.value = props2.modelValue;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
         vue.createElementVNode("label", _hoisted_2$i, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", _hoisted_3$e, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option2, index2) => {
@@ -19356,7 +19356,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-cf892d71"]]);
-const _hoisted_1$r = { class: "flex gap-1 align-center range-slide" };
+const _hoisted_1$q = { class: "flex gap-1 align-center range-slide" };
 const _hoisted_2$h = { key: 0 };
 const _hoisted_3$d = ["max", "min", "step"];
 const _hoisted_4$9 = { key: 1 };
@@ -19380,7 +19380,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
       return `linear-gradient(to right, var(--bgl-primary) ${percentage}%, var(--input-bg) ${percentage}%)`;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
         _ctx.min !== void 0 ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$h, vue.toDisplayString(_ctx.min), 1)) : vue.createCommentVNode("", true),
         vue.withDirectives(vue.createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -43275,7 +43275,7 @@ vue.defineComponent({
     }, (_b = (_a2 = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a2));
   }
 });
-const _hoisted_1$q = { class: "RichText" };
+const _hoisted_1$p = { class: "RichText" };
 const _hoisted_2$g = {
   key: 0,
   class: "RichText-tools"
@@ -43505,7 +43505,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
         vue.unref(editor) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, [
           (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(config, (item) => {
             var _a2;
@@ -43699,7 +43699,7 @@ function createTable() {
     }
   }
 }
-const _hoisted_1$p = { class: "flex gap-05" };
+const _hoisted_1$o = { class: "flex gap-05" };
 const _hoisted_2$f = ["disabled"];
 const _hoisted_3$c = { key: 1 };
 const _hoisted_4$8 = {
@@ -43725,7 +43725,8 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     hideLabel: { type: Boolean },
     defaultValue: {},
     clearable: { type: Boolean },
-    searchPlaceholder: {}
+    searchPlaceholder: {},
+    onSearch: { type: Function }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -43751,10 +43752,26 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
       }
       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.replaceAll(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi"));
-      return Boolean(option2) && searchTerm.every((s2) => getLabel(option2).match(s2));
-    }));
+    let serverOptions = vue.ref([]);
+    let isSearching = vue.ref(false);
+    async function runServerSearch() {
+      if (props2.onSearch !== void 0) {
+        isSearching.value = true;
+        serverOptions.value = await props2.onSearch(search.value);
+        isSearching.value = false;
+      }
+    }
+    const filteredOptions = vue.computed(() => {
+      if (props2.onSearch !== void 0) {
+        if (isSearching.value) return [];
+        if (search.value.trim().length) return serverOptions.value;
+        return props2.options;
+      }
+      return props2.options.filter((option2) => {
+        const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t.replaceAll(/[.*+?^${}()|[\]\\]/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;
@@ -43771,7 +43788,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
             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();
           },
-          350
+          100
         );
       }
     }
@@ -43848,6 +43865,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
       { deep: true, immediate: true }
     );
     vue.onMounted(() => {
+      console.log("mounted");
       if (props2.defaultValue !== void 0) {
         const defaultOption = props2.options.find(
           (o2) => getValue(o2) === getValue(props2.defaultValue)
@@ -43862,12 +43880,13 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
         ref: dropdown,
         placement: "bottom-start",
         class: "bagel-input selectinput",
+        noAutoFocus: "",
         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$p, [
+            vue.createElementVNode("div", _hoisted_1$o, [
               _ctx.searchable && vue.unref(open) ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
                 key: 0,
                 ref_key: "searchInput",
@@ -43878,6 +43897,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
                 dense: "",
                 placeholder: searchPlaceholder.value,
                 icon: "search",
+                onDebounce: runServerSearch,
                 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,
@@ -43921,6 +43941,13 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
           ])
         ]),
         default: vue.withCtx(() => [
+          vue.unref(isSearching) ? (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
+            key: 0,
+            count: 3,
+            width: "230px",
+            height: "30px",
+            class: "mx-1 my-05"
+          })) : vue.createCommentVNode("", true),
           vue.createVNode(vue.unref(_sfc_main$R), {
             class: "p-05",
             style: vue.normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
@@ -43966,8 +43993,8 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-94b45d29"]]);
-const _hoisted_1$o = {
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-e3164caf"]]);
+const _hoisted_1$n = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
 };
@@ -44001,7 +44028,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     }
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
         vue.createVNode(SelectInput, {
           class: "m-0 w150",
           options: ["Text", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6", "Blockquote", "Code"],
@@ -44030,7 +44057,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$n = { class: "rich-text-editor rounded pt-05 px-1 pb-1" };
+const _hoisted_1$m = { class: "rich-text-editor rounded pt-05 px-1 pb-1" };
 const _hoisted_2$e = { class: "editor-container flex flex-stretch gap-1 m_column" };
 const _hoisted_3$b = { class: "content-area radius-05 p-1 shadow-light w-100 grid" };
 const _hoisted_4$7 = {
@@ -44164,7 +44191,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
         vue.createVNode(_sfc_main$u, {
           config: config.value,
           onAction: handleToolbarAction
@@ -44790,7 +44817,7 @@ class SignaturePad extends SignatureEventTarget {
     return svg.outerHTML;
   }
 }
-const _hoisted_1$m = ["disabled"];
+const _hoisted_1$l = ["disabled"];
 const _hoisted_2$d = {
   key: 1,
   placeholder: "required",
@@ -44951,7 +44978,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
           ref: vCanvas,
           class: "canvas",
           disabled: _ctx.disabled
-        }, null, 8, _hoisted_1$m),
+        }, null, 8, _hoisted_1$l),
         _ctx.required && vue.unref(_isEmpty) ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$d)) : vue.createCommentVNode("", true)
       ], 34);
     };
@@ -47436,7 +47463,7 @@ const VueDraggableNext = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$l = ["title"];
+const _hoisted_1$k = ["title"];
 const _hoisted_2$c = { class: "bagel-input" };
 const _hoisted_3$a = { class: "table-side-scroll" };
 const _hoisted_4$6 = { class: "table-header" };
@@ -47582,7 +47609,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
           ])),
           _: 1
         })
-      ], 8, _hoisted_1$l);
+      ], 8, _hoisted_1$k);
     };
   }
 });
@@ -52053,7 +52080,7 @@ function parsePhoneNumber$1() {
 function parsePhoneNumber() {
   return withMetadataArgument(parsePhoneNumber$1, arguments);
 }
-const _hoisted_1$k = ["aria-expanded"];
+const _hoisted_1$j = ["aria-expanded"];
 const _hoisted_2$b = { class: "p-075 tel-countryp-dropdown" };
 const _hoisted_3$9 = ["aria-selected", "onClick", "onMousemove"];
 const _hoisted_4$5 = { class: "tel-country" };
@@ -52407,14 +52434,14 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
             }, null, 44, _hoisted_6$4), [
               [vue.vModelText, phone.value]
             ])
-          ], 40, _hoisted_1$k)
+          ], 40, _hoisted_1$j)
         ])
       ], 2);
     };
   }
 });
 const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-627af458"]]);
-const _hoisted_1$j = ["title"];
+const _hoisted_1$i = ["title"];
 const _hoisted_2$a = ["for"];
 const _hoisted_3$8 = ["id", "title", "autocomplete", "type", "placeholder", "disabled", "required", "pattern"];
 const _hoisted_4$4 = ["id", "title", "type", "rows", "placeholder", "disabled", "required", "pattern"];
@@ -52550,12 +52577,12 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
           key: 1,
           icon: _ctx.icon
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1$j);
+      ], 10, _hoisted_1$i);
     };
   }
 });
 const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-e5ae4283"]]);
-const _hoisted_1$i = ["title"];
+const _hoisted_1$h = ["title"];
 const _hoisted_2$9 = ["id", "required"];
 const _hoisted_3$7 = ["for"];
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
@@ -52602,12 +52629,12 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$7)
-      ], 10, _hoisted_1$i);
+      ], 10, _hoisted_1$h);
     };
   }
 });
 const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-486451e5"]]);
-const _hoisted_1$h = { class: "m-0 pb-025 txt14 line-height-1" };
+const _hoisted_1$g = { class: "m-0 pb-025 txt14 line-height-1" };
 const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",
   props: {
@@ -52631,7 +52658,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
                   size: 1.4,
                   class: "m-0 line-height-14"
                 }, null, 8, ["icon"]),
-                vue.createElementVNode("p", _hoisted_1$h, vue.toDisplayString(nav2.label), 1)
+                vue.createElementVNode("p", _hoisted_1$g, vue.toDisplayString(nav2.label), 1)
               ]),
               _: 2
             }, 1032, ["to", "onClick"]);
@@ -52685,7 +52712,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-1814129a"]]);
-const _hoisted_1$g = { key: 0 };
+const _hoisted_1$f = { key: 0 };
 const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "SidebarMenu",
   props: {
@@ -52733,7 +52760,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
                   }, null, 8, ["icon"]),
                   vue.createVNode(vue.Transition, { name: "showP" }, {
                     default: vue.withCtx(() => [
-                      _ctx.open ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$g, vue.toDisplayString(nav2.label), 1)) : vue.createCommentVNode("", true)
+                      _ctx.open ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$f, vue.toDisplayString(nav2.label), 1)) : vue.createCommentVNode("", true)
                     ]),
                     _: 2
                   }, 1024)
@@ -52762,10 +52789,6 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-51cedd11"]]);
-const _hoisted_1$f = {
-  key: 0,
-  class: "skeleton-wrap"
-};
 const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "Skeleton",
   props: {
@@ -52773,18 +52796,23 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     height: { default: "50px" },
     width: { default: "auto" },
     round: { type: Boolean, default: false },
-    borderRadius: { default: "var(--skeleton-radius)" }
+    borderRadius: { default: "var(--skeleton-radius)" },
+    class: { default: "" }
   },
   setup(__props) {
+    const className = vue.toRef(__props, "class");
     const slots = vue.useSlots();
     return (_ctx, _cache) => {
-      return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.count, (i2) => {
+      return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(+_ctx.count, (i2) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: i2 }, [
-          vue.unref(slots).default ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+          vue.unref(slots).default ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(["skeleton-wrap", className.value])
+          }, [
             vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ])) : (vue.openBlock(), vue.createElementBlock("div", {
+          ], 2)) : (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
-            class: vue.normalizeClass(["skeleton", { round: _ctx.round }]),
+            class: vue.normalizeClass(["skeleton", { round: _ctx.round, [className.value]: true }]),
             style: vue.normalizeStyle({ height: _ctx.height, width: _ctx.width, borderRadius: _ctx.borderRadius })
           }, null, 6))
         ], 64);
@@ -52792,7 +52820,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-34172009"]]);
+const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-9a44f23a"]]);
 const _hoisted_1$e = { class: "bgl_card tabs-top" };
 const _hoisted_2$8 = { class: "tabs grid auto-flow-columns fit-content" };
 const _hoisted_3$6 = ["onClick"];
@@ -55386,7 +55414,8 @@ function slctField(id, label, options, config) {
     attrs: {
       disabled: config == null ? void 0 : config.disabled,
       searchable: config == null ? void 0 : config.searchable,
-      multiselect: config == null ? void 0 : config.multiselect
+      multiselect: config == null ? void 0 : config.multiselect,
+      onSearch: config == null ? void 0 : config.onSearch
     }
   };
 }