@bagelink/vue 0.0.823 → 0.0.827

package/dist/index.mjs

@@ -52,7 +52,7 @@ const _sfc_main$Z = /* @__PURE__ */ 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__ */ defineComponent({
@@ -131,7 +131,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
           }, [
             createVNode(unref(_sfc_main$c), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : createCommentVNode("", true)
-        ], 8, _hoisted_1$N),
+        ], 8, _hoisted_1$M),
         createVNode(Transition, { name: "expand" }, {
           default: withCtx(() => [
             unref(isOpen) ? (openBlock(), createElementBlock("div", {
@@ -157,7 +157,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__ */ defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
@@ -180,7 +180,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$M, [
+      return openBlock(), createElementBlock("div", _hoisted_1$L, [
         createVNode(unref(_sfc_main$N), {
           ref_key: "suggestion",
           ref: suggestion,
@@ -216,7 +216,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$L = {
+const _hoisted_1$K = {
   key: 0,
   class: "loading"
 };
@@ -319,7 +319,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
         onClick: withModifiers(_ctx.onClick, ["stop"])
       }, {
         default: withCtx(() => [
-          _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_1$L)) : (openBlock(), createElementBlock("div", _hoisted_2$v, [
+          _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_1$K)) : (openBlock(), createElementBlock("div", _hoisted_2$v, [
             _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
               key: 0,
               icon: _ctx.icon
@@ -340,7 +340,7 @@ const _sfc_main$W = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "Alert",
@@ -378,12 +378,12 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$K)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$J)) : 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__ */ defineComponent({
   __name: "Avatar",
   props: {
@@ -402,7 +402,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$J)) : (openBlock(), createElementBlock("p", {
+        }, null, 8, _hoisted_1$I)) : (openBlock(), createElementBlock("p", {
           key: 1,
           style: normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
         }, toDisplayString((_ctx.fallback || unref(initials)(_ctx.name || "")).toUpperCase()), 5))
@@ -443,7 +443,7 @@ const _sfc_main$T = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "BglVideo",
@@ -499,7 +499,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$I)) : _ctx.src ? (openBlock(), createElementBlock("video", {
+        }, null, 12, _hoisted_1$H)) : _ctx.src ? (openBlock(), createElementBlock("video", {
           key: 1,
           src: _ctx.src,
           autoplay: _ctx.autoplay,
@@ -514,7 +514,7 @@ const _sfc_main$S = /* @__PURE__ */ 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"
 };
@@ -546,7 +546,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
         }])
       }, {
         default: withCtx(() => [
-          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$H, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$G, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -554,7 +554,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$G = {
+const _hoisted_1$F = {
   key: 0,
   class: "blocker"
 };
@@ -748,7 +748,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           onScroll: scrollEnd,
           onMousedown: startDragging
         }, [
-          unref(isDragging) ? (openBlock(), createElementBlock("div", _hoisted_1$G)) : createCommentVNode("", true),
+          unref(isDragging) ? (openBlock(), createElementBlock("div", _hoisted_1$F)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ], 38),
         createElementVNode("div", _hoisted_2$s, [
@@ -6710,13 +6710,13 @@ var script = 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 ? (openBlock(), createElementBlock("g", _hoisted_1$F, [
+  return _ctx.mouse.hover ? (openBlock(), createElementBlock("g", _hoisted_1$E, [
     createElementVNode("rect", mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
@@ -6868,7 +6868,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$E = {
+const _hoisted_1$D = {
   key: 0,
   class: "data"
 };
@@ -6925,7 +6925,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     const computedSchema = computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$E, [
+      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
         _ctx.title ? (openBlock(), createBlock(unref(_sfc_main$3), {
           key: 0,
           label: _ctx.title
@@ -9845,7 +9845,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$D = { key: 0 };
+const _hoisted_1$C = { key: 0 };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "BglMultiStepForm",
   props: /* @__PURE__ */ mergeModels({
@@ -9913,7 +9913,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           mode: "out-in"
         }, {
           default: withCtx(() => [
-            !unref(isStepping) ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
+            !unref(isStepping) ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
               createVNode(unref(_sfc_main$K), mergeProps({
                 ref_key: "formRef",
                 ref: formRef,
@@ -9953,7 +9953,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$C = { class: "primary-checkbox" };
+const _hoisted_1$B = { class: "primary-checkbox" };
 const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
   props: {
@@ -9964,7 +9964,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const val = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$C, [
+      return openBlock(), createElementBlock("label", _hoisted_1$B, [
         renderSlot(_ctx.$slots, "label", {}, void 0, true),
         withDirectives(createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -9977,7 +9977,7 @@ const _sfc_main$I = /* @__PURE__ */ 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__ */ defineComponent({
@@ -10022,12 +10022,12 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             createTextVNode(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__ */ defineComponent({
   __name: "ColorPicker",
@@ -10071,7 +10071,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             [vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$A)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$z)) : createCommentVNode("", true);
     };
   }
 });
@@ -18514,7 +18514,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__ */ defineComponent({
   __name: "DateInput",
@@ -18574,11 +18574,11 @@ const _sfc_main$F = /* @__PURE__ */ 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,
@@ -18614,7 +18614,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$y, [
+      return openBlock(), createElementBlock("div", _hoisted_1$x, [
         createElementVNode("div", _hoisted_2$m, [
           createVNode(unref(Hn), mergeProps({
             modelValue: selectedDate.value,
@@ -18655,7 +18655,7 @@ const _sfc_main$E = /* @__PURE__ */ 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"
@@ -18840,7 +18840,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _directive_lightbox = resolveDirective("lightbox");
       const _directive_tooltip = resolveDirective("tooltip");
-      return openBlock(), createElementBlock("div", _hoisted_1$x, [
+      return openBlock(), createElementBlock("div", _hoisted_1$w, [
         createElementVNode("label", null, toDisplayString(_ctx.label), 1),
         createElementVNode("div", {
           class: normalizeClass(["fileUploadWrap", {
@@ -19001,7 +19001,7 @@ const _sfc_main$D = /* @__PURE__ */ 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__ */ defineComponent({
@@ -19036,12 +19036,12 @@ const _sfc_main$C = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "OTP",
   props: {
@@ -19140,14 +19140,14 @@ const _sfc_main$B = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ mergeModels({
@@ -19188,7 +19188,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     );
     const inputType = computed(() => showPwd.value ? "text" : "password");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$u, [
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
         createVNode(unref(TextInput), mergeProps({
           modelValue: password.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
@@ -19208,7 +19208,7 @@ const _sfc_main$A = /* @__PURE__ */ 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"];
@@ -19274,14 +19274,14 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               icon: "delete",
               onClick: ($event) => _ctx.$emit("delete", opt)
             }, null, 8, ["onClick"])) : 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"];
@@ -19327,7 +19327,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       selectedValue.value = props2.modelValue;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$s, [
+      return openBlock(), createElementBlock("div", _hoisted_1$r, [
         createElementVNode("label", _hoisted_2$i, toDisplayString(_ctx.label), 1),
         createElementVNode("div", _hoisted_3$e, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.options, (option2, index2) => {
@@ -19354,7 +19354,7 @@ const _sfc_main$y = /* @__PURE__ */ 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 };
@@ -19378,7 +19378,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       return `linear-gradient(to right, var(--bgl-primary) ${percentage}%, var(--input-bg) ${percentage}%)`;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$r, [
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
         _ctx.min !== void 0 ? (openBlock(), createElementBlock("p", _hoisted_2$h, toDisplayString(_ctx.min), 1)) : createCommentVNode("", true),
         withDirectives(createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -43273,7 +43273,7 @@ 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"
@@ -43503,7 +43503,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
-      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
         unref(editor) ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
           (openBlock(), createElementBlock(Fragment$1, null, renderList(config, (item) => {
             var _a2;
@@ -43697,7 +43697,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 = {
@@ -43723,7 +43723,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     hideLabel: { type: Boolean },
     defaultValue: {},
     clearable: { type: Boolean },
-    searchPlaceholder: {}
+    searchPlaceholder: {},
+    onSearch: { type: Function }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -43749,10 +43750,26 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       }
       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.replaceAll(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi"));
-      return Boolean(option2) && searchTerm.every((s2) => getLabel(option2).match(s2));
-    }));
+    let serverOptions = ref([]);
+    let isSearching = 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 = 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;
@@ -43769,7 +43786,7 @@ const _sfc_main$v = /* @__PURE__ */ 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
         );
       }
     }
@@ -43846,6 +43863,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       { deep: true, immediate: true }
     );
     onMounted(() => {
+      console.log("mounted");
       if (props2.defaultValue !== void 0) {
         const defaultOption = props2.options.find(
           (o2) => getValue(o2) === getValue(props2.defaultValue)
@@ -43860,12 +43878,13 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         ref: dropdown,
         placement: "bottom-start",
         class: "bagel-input selectinput",
+        noAutoFocus: "",
         onHide: _cache[5] || (_cache[5] = ($event) => updateOpen(false))
       }, {
         trigger: withCtx(() => [
           createElementVNode("label", null, [
             createTextVNode(toDisplayString(_ctx.label) + " ", 1),
-            createElementVNode("div", _hoisted_1$p, [
+            createElementVNode("div", _hoisted_1$o, [
               _ctx.searchable && unref(open) ? (openBlock(), createBlock(unref(TextInput), {
                 key: 0,
                 ref_key: "searchInput",
@@ -43876,6 +43895,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                 dense: "",
                 placeholder: searchPlaceholder.value,
                 icon: "search",
+                onDebounce: runServerSearch,
                 onInput: _cache[1] || (_cache[1] = ($event) => isRef(selected) ? selected.value = false : selected = false)
               }, null, 8, ["modelValue", "placeholder"])) : (openBlock(), createElementBlock("button", {
                 key: 1,
@@ -43919,6 +43939,13 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           ])
         ]),
         default: withCtx(() => [
+          unref(isSearching) ? (openBlock(), createBlock(unref(Skeleton), {
+            key: 0,
+            count: 3,
+            width: "230px",
+            height: "30px",
+            class: "mx-1 my-05"
+          })) : createCommentVNode("", true),
           createVNode(unref(_sfc_main$R), {
             class: "p-05",
             style: normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
@@ -43964,8 +43991,8 @@ const _sfc_main$v = /* @__PURE__ */ 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"
 };
@@ -43999,7 +44026,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createVNode(SelectInput, {
           class: "m-0 w150",
           options: ["Text", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6", "Blockquote", "Code"],
@@ -44028,7 +44055,7 @@ const _sfc_main$u = /* @__PURE__ */ 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 = {
@@ -44162,7 +44189,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createVNode(_sfc_main$u, {
           config: config.value,
           onAction: handleToolbarAction
@@ -44788,7 +44815,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",
@@ -44949,7 +44976,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           ref: vCanvas,
           class: "canvas",
           disabled: _ctx.disabled
-        }, null, 8, _hoisted_1$m),
+        }, null, 8, _hoisted_1$l),
         _ctx.required && unref(_isEmpty) ? (openBlock(), createElementBlock("input", _hoisted_2$d)) : createCommentVNode("", true)
       ], 34);
     };
@@ -47434,7 +47461,7 @@ const VueDraggableNext = 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" };
@@ -47580,7 +47607,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           ])),
           _: 1
         })
-      ], 8, _hoisted_1$l);
+      ], 8, _hoisted_1$k);
     };
   }
 });
@@ -52051,7 +52078,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" };
@@ -52405,14 +52432,14 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             }, null, 44, _hoisted_6$4), [
               [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"];
@@ -52548,12 +52575,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           key: 1,
           icon: _ctx.icon
         }, null, 8, ["icon"])) : 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__ */ defineComponent({
@@ -52600,12 +52627,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             createTextVNode(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__ */ defineComponent({
   __name: "BottomMenu",
   props: {
@@ -52629,7 +52656,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   size: 1.4,
                   class: "m-0 line-height-14"
                 }, null, 8, ["icon"]),
-                createElementVNode("p", _hoisted_1$h, toDisplayString(nav2.label), 1)
+                createElementVNode("p", _hoisted_1$g, toDisplayString(nav2.label), 1)
               ]),
               _: 2
             }, 1032, ["to", "onClick"]);
@@ -52683,7 +52710,7 @@ const _sfc_main$m = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "SidebarMenu",
   props: {
@@ -52731,7 +52758,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                   }, null, 8, ["icon"]),
                   createVNode(Transition, { name: "showP" }, {
                     default: withCtx(() => [
-                      _ctx.open ? (openBlock(), createElementBlock("p", _hoisted_1$g, toDisplayString(nav2.label), 1)) : createCommentVNode("", true)
+                      _ctx.open ? (openBlock(), createElementBlock("p", _hoisted_1$f, toDisplayString(nav2.label), 1)) : createCommentVNode("", true)
                     ]),
                     _: 2
                   }, 1024)
@@ -52760,36 +52787,38 @@ const _sfc_main$l = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "Skeleton",
   props: {
     count: { default: 1 },
     height: { default: "50px" },
     width: { default: "auto" },
-    borderRadius: { default: "var(--skeleton-radius)" }
+    round: { type: Boolean, default: false },
+    borderRadius: { default: "var(--skeleton-radius)" },
+    class: { default: "" }
   },
   setup(__props) {
+    const className = toRef(__props, "class");
     const slots = useSlots();
     return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.count, (i2) => {
+      return openBlock(true), createElementBlock(Fragment$1, null, renderList(+_ctx.count, (i2) => {
         return openBlock(), createElementBlock(Fragment$1, { key: i2 }, [
-          unref(slots).default ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+          unref(slots).default ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["skeleton-wrap", className.value])
+          }, [
             renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ])) : (openBlock(), createElementBlock("div", {
+          ], 2)) : (openBlock(), createElementBlock("div", {
             key: 1,
-            class: "skeleton",
+            class: normalizeClass(["skeleton", { round: _ctx.round, [className.value]: true }]),
             style: normalizeStyle({ height: _ctx.height, width: _ctx.width, borderRadius: _ctx.borderRadius })
-          }, null, 4))
+          }, null, 6))
         ], 64);
       }), 128);
     };
   }
 });
-const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-a06bec19"]]);
+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"];
@@ -55383,7 +55412,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
     }
   };
 }