@bagelink/vue 0.0.819 → 0.0.823

package/dist/index.mjs

@@ -38,7 +38,7 @@ const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
     return txtField;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "Accordion",
   setup(__props) {
     const state2 = reactive({
@@ -52,10 +52,10 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$M = ["aria-expanded", "aria-controls"];
+const _hoisted_1$N = ["aria-expanded", "aria-controls"];
 const _hoisted_2$w = { class: "accordion-label" };
 const _hoisted_3$m = ["id", "aria-hidden"];
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
   props: {
     label: {},
@@ -131,7 +131,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           }, [
             createVNode(unref(_sfc_main$c), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : createCommentVNode("", true)
-        ], 8, _hoisted_1$M),
+        ], 8, _hoisted_1$N),
         createVNode(Transition, { name: "expand" }, {
           default: withCtx(() => [
             unref(isOpen) ? (openBlock(), createElementBlock("div", {
@@ -156,9 +156,9 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-9d8335fa"]]);
-const _hoisted_1$L = { class: "relative" };
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-9d8335fa"]]);
+const _hoisted_1$M = { class: "relative" };
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
   setup(__props, { emit: __emit }) {
@@ -180,8 +180,8 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$L, [
-        createVNode(unref(_sfc_main$M), {
+      return openBlock(), createElementBlock("div", _hoisted_1$M, [
+        createVNode(unref(_sfc_main$N), {
           ref_key: "suggestion",
           ref: suggestion,
           noAutoFocus: true,
@@ -216,7 +216,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$K = {
+const _hoisted_1$L = {
   key: 0,
   class: "loading"
 };
@@ -224,7 +224,7 @@ const _hoisted_2$v = {
   key: 1,
   class: "bgl_btn-flex"
 };
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "Btn",
   props: {
     disabled: { type: Boolean, default: false },
@@ -319,7 +319,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
         onClick: withModifiers(_ctx.onClick, ["stop"])
       }, {
         default: withCtx(() => [
-          _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_1$K)) : (openBlock(), createElementBlock("div", _hoisted_2$v, [
+          _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_1$L)) : (openBlock(), createElementBlock("div", _hoisted_2$v, [
             _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
               key: 0,
               icon: _ctx.icon
@@ -339,10 +339,10 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-c00fb1b9"]]);
-const _hoisted_1$J = ["dismissable"];
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-c00fb1b9"]]);
+const _hoisted_1$K = ["dismissable"];
 const _hoisted_2$u = { class: "m-0" };
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "Alert",
   props: {
     message: {},
@@ -378,13 +378,13 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$J)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$K)) : createCommentVNode("", true);
     };
   }
 });
-const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-57141c32"]]);
-const _hoisted_1$I = ["src", "alt"];
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-57141c32"]]);
+const _hoisted_1$J = ["src", "alt"];
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     fallback: {},
@@ -402,7 +402,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$I)) : (openBlock(), createElementBlock("p", {
+        }, null, 8, _hoisted_1$J)) : (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))
@@ -410,8 +410,8 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-46ad8c25"]]);
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-46ad8c25"]]);
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "Badge",
   props: {
     color: {},
@@ -442,10 +442,10 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-1b4c8cfe"]]);
-const _hoisted_1$H = ["src"];
+const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-1b4c8cfe"]]);
+const _hoisted_1$I = ["src"];
 const _hoisted_2$t = ["src", "autoplay", "muted", "loop", "controls"];
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "BglVideo",
   props: {
     src: {},
@@ -499,7 +499,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$H)) : _ctx.src ? (openBlock(), createElementBlock("video", {
+        }, null, 12, _hoisted_1$I)) : _ctx.src ? (openBlock(), createElementBlock("video", {
           key: 1,
           src: _ctx.src,
           autoplay: _ctx.autoplay,
@@ -513,12 +513,12 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-30c80244"]]);
-const _hoisted_1$G = {
+const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-30c80244"]]);
+const _hoisted_1$H = {
   key: 0,
   class: "card_label"
 };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     label: {},
@@ -546,7 +546,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         }])
       }, {
         default: withCtx(() => [
-          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$G, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$H, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -554,12 +554,12 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$F = {
+const _hoisted_1$G = {
   key: 0,
   class: "blocker"
 };
 const _hoisted_2$s = { class: "Handlers" };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "Carousel",
   props: {
     autoHeight: {
@@ -588,6 +588,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     const props2 = __props;
     const emit2 = __emit;
     const bglSlider = ref();
+    let itemCount = ref(props2.items);
     let activeSlideIndex = ref(0);
     let isDragging = ref(false);
     let startX = ref(0);
@@ -612,6 +613,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     }
     function scrollEase(target, duration = 500) {
       if (!bglSlider.value) return;
+      if (isPressed.value) return;
       const start2 = bglSlider.value.scrollLeft;
       const change = target - start2;
       const startTime = performance.now();
@@ -652,16 +654,26 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         emit2("update:index", activeSlideIndex.value);
       }
     );
+    function goToSlideScrollEnd() {
+      if (!bglSlider.value) return;
+      const isDragForward = startX.value > bglSlider.value.offsetLeft;
+      if (itemCount.value === 1) {
+        if (isDragForward) activeSlideIndex.value = Math.ceil(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
+        else activeSlideIndex.value = Math.floor(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
+      } else {
+        activeSlideIndex.value = Math.round(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
+      }
+      startX.value = 0;
+      const nextSlide = Math.round(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
+      goToSlide(nextSlide);
+    }
+    let timeout = null;
+    function scrollEnd() {
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(goToSlideScrollEnd, 400);
+    }
     function stopDragging(e) {
       isPressed.value = false;
-      const slider = bglSlider.value;
-      if (!slider) return;
-      const isDragForward = startX.value > e.pageX + slider.offsetLeft;
-      if (isDragForward)
-        activeSlideIndex.value = Math.ceil(slider.scrollLeft / slider.offsetWidth);
-      else activeSlideIndex.value = Math.floor(slider.scrollLeft / slider.offsetWidth);
-      if (props2.items === 1) goToSlide(activeSlideIndex.value);
-      startX.value = 0;
       document.removeEventListener("mousemove", move);
       document.removeEventListener("mouseup", stopDragging);
       document.removeEventListener("dragend", stopDragging);
@@ -683,7 +695,6 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       isPressed.value = true;
       document.addEventListener("mousemove", move);
       document.addEventListener("mouseup", stopDragging);
-      document.addEventListener("dragend", stopDragging);
     }
     function next() {
       if (!bglSlider.value) return;
@@ -700,11 +711,17 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     }
     function evalWidth() {
       if (!bglSlider.value) return;
+      if (window.innerWidth < 600) itemCount.value = 1;
+      else if (window.innerWidth < 991) itemCount.value = Math.min(props2.items, 2);
+      else if (window.innerWidth < 1280) itemCount.value = Math.min(props2.items, 3);
+      else itemCount.value = props2.items;
+      console.log(itemCount.value, window.innerWidth);
       goToSlide(activeSlideIndex.value);
     }
     onMounted(() => {
       window.addEventListener("resize", evalWidth);
       evalHeight();
+      evalWidth();
       disableDrag();
     });
     onUnmounted(() => {
@@ -721,14 +738,19 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           class: normalizeClass([{
             dragging: unref(isDragging),
             clicking: unref(isPressed),
-            [`slides-${__props.items}`]: true,
-            allowScroll: __props.allowScroll
+            allowScroll: __props.allowScroll,
+            odd: unref(itemCount) % 2 !== 0,
+            [`slides-${unref(itemCount)}`]: unref(itemCount) === 1
           }, "bgl-slider"]),
+          style: normalizeStyle({
+            "--item-count": unref(itemCount)
+          }),
+          onScroll: scrollEnd,
           onMousedown: startDragging
         }, [
-          unref(isDragging) ? (openBlock(), createElementBlock("div", _hoisted_1$F)) : createCommentVNode("", true),
+          unref(isDragging) ? (openBlock(), createElementBlock("div", _hoisted_1$G)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ], 34),
+        ], 38),
         createElementVNode("div", _hoisted_2$s, [
           createElementVNode("span", { onClick: prev }, [
             renderSlot(_ctx.$slots, "prev", {
@@ -747,7 +769,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-619a1cb2"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-e588f5a7"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -6688,13 +6710,13 @@ var script = defineComponent({
     return { bar, canvas, direction, mouse };
   }
 });
-const _hoisted_1$E = {
+const _hoisted_1$F = {
   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$E, [
+  return _ctx.mouse.hover ? (openBlock(), createElementBlock("g", _hoisted_1$F, [
     createElementVNode("rect", mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
@@ -6706,7 +6728,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render$e;
 script.__file = "src/components/HoverBar/index.vue";
 const BRAND_COLOR = "var(--bgl-primary)";
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "Lineart",
   props: {
     data: {},
@@ -6846,7 +6868,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$D = {
+const _hoisted_1$E = {
   key: 0,
   class: "data"
 };
@@ -6867,7 +6889,7 @@ const _hoisted_9$3 = {
   key: 0,
   class: "m-0"
 };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "DataPreview",
   props: /* @__PURE__ */ mergeModels({
     showFields: {},
@@ -6903,7 +6925,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     const computedSchema = computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
+      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$E, [
         _ctx.title ? (openBlock(), createBlock(unref(_sfc_main$3), {
           key: 0,
           label: _ctx.title
@@ -6916,7 +6938,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
               createElementVNode("div", _hoisted_3$k, [
                 createElementVNode("p", _hoisted_4$e, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1)
               ]),
-              createVNode(unref(_sfc_main$K), {
+              createVNode(unref(_sfc_main$L), {
                 modelValue: itemData.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => itemData.value = $event),
                 label: "",
@@ -6945,7 +6967,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-6c27f163"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-6c27f163"]]);
 const sides = ["top", "right", "bottom", "left"];
 const alignments = ["start", "end"];
 const placements$1 = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -9487,7 +9509,7 @@ const Gt$1 = {
   install: Ct$1,
   options: h
 };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "Dropdown",
   props: {
     value: {},
@@ -9544,7 +9566,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "Flag",
   props: {
     country: {},
@@ -9574,8 +9596,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-f99f1900"]]);
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-f99f1900"]]);
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "BglField",
   props: {
     field: {},
@@ -9595,9 +9617,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       if (props2.field.$el === "select") return SelectInput;
       if (props2.field.$el === "toggle") return ToggleInput;
       if (props2.field.$el === "check") return CheckInput;
-      if (props2.field.$el === "richtext") return _sfc_main$v;
+      if (props2.field.$el === "richtext") return _sfc_main$w;
       if (props2.field.$el === "file") return $el;
-      if (props2.field.$el === "date") return _sfc_main$E;
+      if (props2.field.$el === "date") return _sfc_main$F;
       return props2.field.$el ?? "div";
     });
     const formData = computed({
@@ -9682,7 +9704,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "BglForm",
   props: {
     label: {},
@@ -9780,7 +9802,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             label: _ctx.label
           }, null, 8, ["label"])) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(computedSchema.value, (field, i2) => {
-            return openBlock(), createBlock(unref(_sfc_main$K), {
+            return openBlock(), createBlock(unref(_sfc_main$L), {
               key: field.id || `${i2}p`,
               modelValue: unref(data2),
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(data2) ? data2.value = $event : data2 = $event),
@@ -9804,7 +9826,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             label: _ctx.label
           }, null, 8, ["label"])) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(computedSchema.value, (field, i2) => {
-            return openBlock(), createBlock(unref(_sfc_main$K), {
+            return openBlock(), createBlock(unref(_sfc_main$L), {
               key: field.id || `${i2}p`,
               modelValue: unref(data2),
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(data2) ? data2.value = $event : data2 = $event),
@@ -9823,8 +9845,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$C = { key: 0 };
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _hoisted_1$D = { key: 0 };
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "BglMultiStepForm",
   props: /* @__PURE__ */ mergeModels({
     bagelFormProps: { default: () => ({}) },
@@ -9891,8 +9913,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           mode: "out-in"
         }, {
           default: withCtx(() => [
-            !unref(isStepping) ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
-              createVNode(unref(_sfc_main$J), mergeProps({
+            !unref(isStepping) ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
+              createVNode(unref(_sfc_main$K), mergeProps({
                 ref_key: "formRef",
                 ref: formRef,
                 modelValue: formData.value,
@@ -9931,8 +9953,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$B = { class: "primary-checkbox" };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _hoisted_1$C = { class: "primary-checkbox" };
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
   props: {
     "modelValue": { type: Boolean, ...{ default: false } },
@@ -9942,7 +9964,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const val = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$B, [
+      return openBlock(), createElementBlock("label", _hoisted_1$C, [
         renderSlot(_ctx.$slots, "label", {}, void 0, true),
         withDirectives(createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -9954,11 +9976,11 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-73f1d9ad"]]);
-const _hoisted_1$A = ["title"];
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-73f1d9ad"]]);
+const _hoisted_1$B = ["title"];
 const _hoisted_2$p = ["id", "value", "required"];
 const _hoisted_3$j = ["for"];
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "CheckInput",
   props: /* @__PURE__ */ mergeModels({
     label: {},
@@ -10000,14 +10022,14 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             createTextVNode(toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$j)
-      ], 10, _hoisted_1$A);
+      ], 10, _hoisted_1$B);
     };
   }
 });
-const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-03ed2982"]]);
-const _hoisted_1$z = ["title"];
+const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-03ed2982"]]);
+const _hoisted_1$A = ["title"];
 const _hoisted_2$o = ["id", "placeholder", "required"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "ColorPicker",
   props: {
     label: {},
@@ -10049,7 +10071,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
             [vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$z)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$A)) : createCommentVNode("", true);
     };
   }
 });
@@ -18492,9 +18514,9 @@ const eo = ({
 Object.entries(go).forEach(([e, t]) => {
   e !== "default" && (Hn[e] = t);
 });
-const _hoisted_1$y = ["title"];
+const _hoisted_1$z = ["title"];
 const _hoisted_2$n = { key: 0 };
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "DateInput",
   props: {
     required: { type: Boolean },
@@ -18552,11 +18574,11 @@ const _sfc_main$E = /* @__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$y);
+      ], 10, _hoisted_1$z);
     };
   }
 });
-const _hoisted_1$x = { class: "datetime-wrap" };
+const _hoisted_1$y = { class: "datetime-wrap" };
 const _hoisted_2$m = { class: "date-wrap" };
 const _hoisted_3$i = {
   key: 0,
@@ -18564,7 +18586,7 @@ const _hoisted_3$i = {
 };
 const _hoisted_4$d = ["id", "name", "value"];
 const _hoisted_5$b = ["for"];
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "DatePicker",
   props: {
     label: {},
@@ -18592,7 +18614,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$x, [
+      return openBlock(), createElementBlock("div", _hoisted_1$y, [
         createElementVNode("div", _hoisted_2$m, [
           createVNode(unref(Hn), mergeProps({
             modelValue: selectedDate.value,
@@ -18633,7 +18655,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$w = { class: "bagel-input" };
+const _hoisted_1$x = { class: "bagel-input" };
 const _hoisted_2$l = {
   key: 0,
   class: "bgl-multi-preview"
@@ -18650,14 +18672,19 @@ const _hoisted_8$3 = {
   key: 1,
   class: "bgl-single-preview"
 };
-const _hoisted_9$2 = ["src"];
-const _hoisted_10$2 = {
+const _hoisted_9$2 = {
+  key: 0,
+  class: "h-100"
+};
+const _hoisted_10$2 = ["src"];
+const _hoisted_11$1 = { class: "position-start m-05 gap-025 flex" };
+const _hoisted_12 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_11$1 = ["src"];
-const _hoisted_12 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _hoisted_13 = ["src"];
+const _hoisted_14 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "FileUpload",
   props: {
     label: {},
@@ -18812,7 +18839,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       const _directive_lightbox = resolveDirective("lightbox");
-      return openBlock(), createElementBlock("div", _hoisted_1$w, [
+      const _directive_tooltip = resolveDirective("tooltip");
+      return openBlock(), createElementBlock("div", _hoisted_1$x, [
         createElementVNode("label", null, toDisplayString(_ctx.label), 1),
         createElementVNode("div", {
           class: normalizeClass(["fileUploadWrap", {
@@ -18896,14 +18924,33 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                   key: file.id,
                   class: normalizeClass(["single-image-item-preview", { "bgl_fill-image": _ctx.fill }])
                 }, [
-                  isImage(file.extension || file.url) ? withDirectives((openBlock(), createElementBlock("img", {
-                    key: 0,
-                    class: "single-preview",
-                    src: file.url,
-                    alt: ""
-                  }, null, 8, _hoisted_9$2)), [
-                    [_directive_lightbox]
-                  ]) : (openBlock(), createBlock(unref(_sfc_main$c), {
+                  isImage(file.extension || file.url) ? (openBlock(), createElementBlock("div", _hoisted_9$2, [
+                    withDirectives(createElementVNode("img", {
+                      class: "single-preview",
+                      src: file.url,
+                      alt: ""
+                    }, null, 8, _hoisted_10$2), [
+                      [_directive_lightbox]
+                    ]),
+                    createElementVNode("div", _hoisted_11$1, [
+                      withDirectives(createVNode(unref(Btn), {
+                        color: "gray",
+                        thin: "",
+                        icon: "delete",
+                        onClick: withModifiers(($event) => removeFile(file), ["stop"])
+                      }, null, 8, ["onClick"]), [
+                        [_directive_tooltip, "Delete"]
+                      ]),
+                      withDirectives(createVNode(unref(Btn), {
+                        color: "gray",
+                        thin: "",
+                        icon: "autorenew",
+                        onClick: browse
+                      }, null, 512), [
+                        [_directive_tooltip, "Replace"]
+                      ])
+                    ])
+                  ])) : (openBlock(), createBlock(unref(_sfc_main$c), {
                     key: 1,
                     size: 4,
                     weight: "2",
@@ -18921,7 +18968,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(["pie", { complete: fileQ.progress === 100 }]),
                     style: normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
-                    fileQ.progress < 100 ? (openBlock(), createElementBlock("span", _hoisted_10$2, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
+                    fileQ.progress < 100 ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
                     createVNode(unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -18932,7 +18979,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                     class: "single-preview",
                     src: fileToUrl(fileQ.file),
                     alt: ""
-                  }, null, 8, _hoisted_11$1)) : createCommentVNode("", true)
+                  }, null, 8, _hoisted_13)) : createCommentVNode("", true)
                 ], 2);
               }), 128))
             ])) : createCommentVNode("", true)
@@ -18943,7 +18990,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             fileQueue: fileQueue.value,
             browse
           }, () => [
-            createElementVNode("p", _hoisted_12, [
+            createElementVNode("p", _hoisted_14, [
               createVNode(unref(_sfc_main$c), { icon: "upload_2" }),
               _cache[0] || (_cache[0] = createTextVNode(" Drop files here or click to upload "))
             ])
@@ -18953,11 +19000,11 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-1db5afa3"]]);
-const _hoisted_1$v = ["title"];
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-bfb0bd63"]]);
+const _hoisted_1$w = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "JSONInput",
   props: {
     description: { default: "" },
@@ -18989,13 +19036,13 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           placeholder: _ctx.placeholder,
           onInput: handleInput
         }, null, 42, _hoisted_3$g)
-      ], 10, _hoisted_1$v);
+      ], 10, _hoisted_1$w);
     };
   }
 });
-const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-1cbaeab2"]]);
-const _hoisted_1$u = ["value", "autofocus", "onKeydown", "onPaste"];
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-1cbaeab2"]]);
+const _hoisted_1$v = ["value", "autofocus", "onKeydown", "onPaste"];
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "OTP",
   props: {
     digitCount: {},
@@ -19093,15 +19140,15 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             oninput: "this.value = this.value.slice(0, 1);",
             onKeydown: ($event) => handleKeyDown2($event, ind),
             onPaste: ($event) => handlePaste2($event, ind)
-          }, null, 40, _hoisted_1$u);
+          }, null, 40, _hoisted_1$v);
         }), 128))
       ], 512);
     };
   }
 });
-const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-5c22c199"]]);
-const _hoisted_1$t = { class: "relative" };
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-5c22c199"]]);
+const _hoisted_1$u = { class: "relative" };
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -19141,7 +19188,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     );
     const inputType = computed(() => showPwd.value ? "text" : "password");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+      return openBlock(), createElementBlock("div", _hoisted_1$u, [
         createVNode(unref(TextInput), mergeProps({
           modelValue: password.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
@@ -19161,7 +19208,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$s = ["for"];
+const _hoisted_1$t = ["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"];
@@ -19174,7 +19221,7 @@ const _hoisted_7$4 = {
   key: 1,
   class: "txt-gray txt-12 m-0"
 };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "RadioGroup",
   props: /* @__PURE__ */ mergeModels({
     groupName: {},
@@ -19227,19 +19274,19 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               icon: "delete",
               onClick: ($event) => _ctx.$emit("delete", opt)
             }, null, 8, ["onClick"])) : createCommentVNode("", true)
-          ], 8, _hoisted_1$s);
+          ], 8, _hoisted_1$t);
         }), 128))
       ]);
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-3e9e030f"]]);
-const _hoisted_1$r = { class: "bagel-input" };
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-3e9e030f"]]);
+const _hoisted_1$s = { 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"];
 const _hoisted_5$8 = ["for"];
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
@@ -19280,7 +19327,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       selectedValue.value = props2.modelValue;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$r, [
+      return openBlock(), createElementBlock("div", _hoisted_1$s, [
         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) => {
@@ -19306,12 +19353,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-cf892d71"]]);
-const _hoisted_1$q = { class: "flex gap-1 align-center range-slide" };
+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_2$h = { key: 0 };
 const _hoisted_3$d = ["max", "min", "step"];
 const _hoisted_4$9 = { key: 1 };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "RangeInput",
   props: /* @__PURE__ */ mergeModels({
     min: {},
@@ -19331,7 +19378,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       return `linear-gradient(to right, var(--bgl-primary) ${percentage}%, var(--input-bg) ${percentage}%)`;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+      return openBlock(), createElementBlock("div", _hoisted_1$r, [
         _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),
@@ -19348,7 +19395,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-d653c76a"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-d653c76a"]]);
 function OrderedMap(content) {
   this.content = content;
 }
@@ -43226,12 +43273,12 @@ defineComponent({
     }, (_b = (_a2 = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a2));
   }
 });
-const _hoisted_1$p = { class: "RichText" };
+const _hoisted_1$q = { class: "RichText" };
 const _hoisted_2$g = {
   key: 0,
   class: "RichText-tools"
 };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "RichText",
   props: {
     modelValue: {}
@@ -43456,7 +43503,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
-      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
         unref(editor) ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
           (openBlock(), createElementBlock(Fragment$1, null, renderList(config, (item) => {
             var _a2;
@@ -43650,7 +43697,7 @@ function createTable() {
     }
   }
 }
-const _hoisted_1$o = { class: "flex gap-05" };
+const _hoisted_1$p = { class: "flex gap-05" };
 const _hoisted_2$f = ["disabled"];
 const _hoisted_3$c = { key: 1 };
 const _hoisted_4$8 = {
@@ -43660,7 +43707,7 @@ const _hoisted_4$8 = {
 const _hoisted_5$7 = ["value"];
 const _hoisted_6$6 = ["aria-selected", "onClick", "onKeydown"];
 const _hoisted_7$3 = { class: "block" };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "SelectInput",
   props: {
     options: {},
@@ -43808,7 +43855,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$M), {
+      return openBlock(), createBlock(unref(_sfc_main$N), {
         ref_key: "dropdown",
         ref: dropdown,
         placement: "bottom-start",
@@ -43818,7 +43865,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         trigger: withCtx(() => [
           createElementVNode("label", null, [
             createTextVNode(toDisplayString(_ctx.label) + " ", 1),
-            createElementVNode("div", _hoisted_1$o, [
+            createElementVNode("div", _hoisted_1$p, [
               _ctx.searchable && unref(open) ? (openBlock(), createBlock(unref(TextInput), {
                 key: 0,
                 ref_key: "searchInput",
@@ -43872,7 +43919,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           ])
         ]),
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$Q), {
+          createVNode(unref(_sfc_main$R), {
             class: "p-05",
             style: normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
           }, {
@@ -43917,12 +43964,12 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-94b45d29"]]);
-const _hoisted_1$n = {
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-94b45d29"]]);
+const _hoisted_1$o = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
 };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "Toolbar",
   props: {
     config: {}
@@ -43952,7 +43999,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createVNode(SelectInput, {
           class: "m-0 w150",
           options: ["Text", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6", "Blockquote", "Code"],
@@ -43981,14 +44028,14 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$m = { class: "rich-text-editor rounded pt-05 px-1 pb-1" };
+const _hoisted_1$n = { 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 = {
   key: 0,
   class: "preview-area w-100 radius-05 p-1"
 };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     modelValue: {},
@@ -44115,8 +44162,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
-        createVNode(_sfc_main$t, {
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+        createVNode(_sfc_main$u, {
           config: config.value,
           onAction: handleToolbarAction
         }, null, 8, ["config"]),
@@ -44147,7 +44194,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-8f1898f5"]]);
+const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-8f1898f5"]]);
 /*!
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
@@ -44741,7 +44788,7 @@ class SignaturePad extends SignatureEventTarget {
     return svg.outerHTML;
   }
 }
-const _hoisted_1$l = ["disabled"];
+const _hoisted_1$m = ["disabled"];
 const _hoisted_2$d = {
   key: 1,
   placeholder: "required",
@@ -44749,7 +44796,7 @@ const _hoisted_2$d = {
   required: "",
   class: "pixel"
 };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "SignaturePad",
   props: /* @__PURE__ */ mergeModels({
     sigOption: {},
@@ -44902,7 +44949,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           ref: vCanvas,
           class: "canvas",
           disabled: _ctx.disabled
-        }, null, 8, _hoisted_1$l),
+        }, null, 8, _hoisted_1$m),
         _ctx.required && unref(_isEmpty) ? (openBlock(), createElementBlock("input", _hoisted_2$d)) : createCommentVNode("", true)
       ], 34);
     };
@@ -47387,13 +47434,13 @@ const VueDraggableNext = defineComponent({
     }
   }
 });
-const _hoisted_1$k = ["title"];
+const _hoisted_1$l = ["title"];
 const _hoisted_2$c = { class: "bagel-input" };
 const _hoisted_3$a = { class: "table-side-scroll" };
 const _hoisted_4$6 = { class: "table-header" };
 const _hoisted_5$6 = { class: "table-reorder" };
 const _hoisted_6$5 = { class: "table-action" };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "TableField",
   props: {
     description: { default: "" },
@@ -47533,11 +47580,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           ])),
           _: 1
         })
-      ], 8, _hoisted_1$k);
+      ], 8, _hoisted_1$l);
     };
   }
 });
-const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-a65c658c"]]);
+const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-a65c658c"]]);
 function bind(fn3, thisArg) {
   return function wrap2() {
     return fn3.apply(thisArg, arguments);
@@ -52004,13 +52051,13 @@ function parsePhoneNumber$1() {
 function parsePhoneNumber() {
   return withMetadataArgument(parsePhoneNumber$1, arguments);
 }
-const _hoisted_1$j = ["aria-expanded"];
+const _hoisted_1$k = ["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" };
 const _hoisted_5$5 = { key: 1 };
 const _hoisted_6$4 = ["id", "required", "placeholder", "disabled", "autocomplete", "pattern", "minlength", "maxlength", "name", "readonly", "tabindex", "aria-describedby"];
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "TelInput",
   props: /* @__PURE__ */ mergeModels({
     label: {},
@@ -52271,7 +52318,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
               withKeys(reset, ["tab"])
             ]
           }, [
-            !computedDropDownOptions.value.hide ? (openBlock(), createBlock(unref(_sfc_main$M), {
+            !computedDropDownOptions.value.hide ? (openBlock(), createBlock(unref(_sfc_main$N), {
               key: 0,
               ref_key: "phoneDropdown",
               ref: phoneDropdown,
@@ -52358,19 +52405,19 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             }, null, 44, _hoisted_6$4), [
               [vModelText, phone.value]
             ])
-          ], 40, _hoisted_1$j)
+          ], 40, _hoisted_1$k)
         ])
       ], 2);
     };
   }
 });
-const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-627af458"]]);
-const _hoisted_1$i = ["title"];
+const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-627af458"]]);
+const _hoisted_1$j = ["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"];
 const _hoisted_5$4 = { key: 2 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "TextInput",
   props: {
     id: {},
@@ -52501,15 +52548,15 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           key: 1,
           icon: _ctx.icon
         }, null, 8, ["icon"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$i);
+      ], 10, _hoisted_1$j);
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-e5ae4283"]]);
-const _hoisted_1$h = ["title"];
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-e5ae4283"]]);
+const _hoisted_1$i = ["title"];
 const _hoisted_2$9 = ["id", "required"];
 const _hoisted_3$7 = ["for"];
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "ToggleInput",
   props: /* @__PURE__ */ mergeModels({
     label: {},
@@ -52553,20 +52600,20 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             createTextVNode(toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$7)
-      ], 10, _hoisted_1$h);
+      ], 10, _hoisted_1$i);
     };
   }
 });
-const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-486451e5"]]);
-const _hoisted_1$g = { class: "m-0 pb-025 txt14 line-height-1" };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+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 _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "BottomMenu",
   props: {
     navLinks: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$Q), { class: "hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center overflow-x" }, {
+      return openBlock(), createBlock(unref(_sfc_main$R), { class: "hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center overflow-x" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "brand", {}, void 0, true),
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.navLinks, (nav2, i2) => {
@@ -52582,7 +52629,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                   size: 1.4,
                   class: "m-0 line-height-14"
                 }, null, 8, ["icon"]),
-                createElementVNode("p", _hoisted_1$g, toDisplayString(nav2.label), 1)
+                createElementVNode("p", _hoisted_1$h, toDisplayString(nav2.label), 1)
               ]),
               _: 2
             }, 1032, ["to", "onClick"]);
@@ -52593,8 +52640,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-557bcad0"]]);
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-557bcad0"]]);
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "Layout",
   props: {
     gap: { default: 1 },
@@ -52635,9 +52682,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-1814129a"]]);
-const _hoisted_1$f = { key: 0 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-1814129a"]]);
+const _hoisted_1$g = { key: 0 };
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "SidebarMenu",
   props: {
     navLinks: {},
@@ -52666,7 +52713,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           icon: "keyboard_arrow_right",
           onClick: toggleMenu
         }),
-        createVNode(unref(_sfc_main$Q), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
+        createVNode(unref(_sfc_main$R), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
           default: withCtx(() => [
             !unref(isOpen) || !unref(slots)["brand-open"] ? renderSlot(_ctx.$slots, "brand", { key: 0 }, void 0, true) : createCommentVNode("", true),
             unref(isOpen) ? renderSlot(_ctx.$slots, "brand-open", { key: 1 }, void 0, true) : createCommentVNode("", true),
@@ -52684,7 +52731,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                   }, null, 8, ["icon"]),
                   createVNode(Transition, { name: "showP" }, {
                     default: withCtx(() => [
-                      _ctx.open ? (openBlock(), createElementBlock("p", _hoisted_1$f, toDisplayString(nav2.label), 1)) : createCommentVNode("", true)
+                      _ctx.open ? (openBlock(), createElementBlock("p", _hoisted_1$g, toDisplayString(nav2.label), 1)) : createCommentVNode("", true)
                     ]),
                     _: 2
                   }, 1024)
@@ -52712,7 +52759,37 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-51cedd11"]]);
+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)" }
+  },
+  setup(__props) {
+    const slots = useSlots();
+    return (_ctx, _cache) => {
+      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, [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ])) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "skeleton",
+            style: normalizeStyle({ height: _ctx.height, width: _ctx.width, borderRadius: _ctx.borderRadius })
+          }, null, 4))
+        ], 64);
+      }), 128);
+    };
+  }
+});
+const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-a06bec19"]]);
 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"];
@@ -53171,7 +53248,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         onClick: _cache[1] || (_cache[1] = () => _ctx.dismissable ? closeModal() : ""),
         onKeydown: withKeys(closeModal, ["esc"])
       }, [
-        createVNode(unref(_sfc_main$Q), {
+        createVNode(unref(_sfc_main$R), {
           class: "modal",
           style: normalizeStyle({ ...maxWidth.value }),
           onClick: _cache[0] || (_cache[0] = withModifiers(() => {
@@ -53347,7 +53424,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => emit2("update:visible", $event))
       }, createSlots({
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$J), {
+          createVNode(unref(_sfc_main$K), {
             ref_key: "form",
             ref: form,
             modelValue: formData.value,
@@ -53547,8 +53624,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "4779ddec": computedBackgroundColor.value,
-      "04aaf136": cumputedTextColor.value
+      "64b28dae": computedBackgroundColor.value,
+      "e70b1a78": cumputedTextColor.value
     }));
     const props2 = __props;
     const slots = useSlots();
@@ -53639,7 +53716,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Pill = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-8c7388de"]]);
+const Pill = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-40a0a2e2"]]);
 const _sfc_main$5 = {};
 function _sfc_render$1(_ctx, _cache) {
   const _component_router_view = resolveComponent("router-view");
@@ -53997,7 +54074,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     schema: {},
     showFields: {},
     useServerSort: { type: Boolean, default: false },
-    selectable: { type: Boolean, default: false }
+    selectable: { type: Boolean, default: false },
+    onLastItemVisible: {}
   }, {
     "loading": { default: false },
     "loadingModifiers": {},
@@ -54011,7 +54089,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["update:selectedItems", "orderBy", "select"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "dd90c516": unref(computedItemHiehgt)
+      "ced4aeb8": unref(computedItemHiehgt)
     }));
     const emit2 = __emit;
     const slots = useSlots();
@@ -54096,7 +54174,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     watch(
       () => computedData.value.length,
       (newLength, oldLength) => {
-        if (newLength === oldLength) return;
+        if (newLength === oldLength || __props.onLastItemVisible !== void 0) return;
         scrollTo(0);
       }
     );
@@ -54128,6 +54206,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       const value = event.target.checked;
       selectedItems.value = value ? computedData.value.map((d2) => d2.id) : [];
     }
+    const lastItem = ref();
+    let observer;
+    onMounted(() => {
+      if (__props.onLastItemVisible === void 0) return;
+      observer = new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting && computedData.value.length) __props.onLastItemVisible();
+      });
+      if (lastItem.value) observer.observe(lastItem.value);
+    });
+    onUnmounted(() => {
+      observer == null ? void 0 : observer.disconnect();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({ class: "table-list-wrap h-100" }, unref(containerProps), {
         class: { "loading-table": loading.value }
@@ -54198,7 +54288,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         row,
                         field
                       }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_10$1, [
-                        createVNode(unref(_sfc_main$K), {
+                        createVNode(unref(_sfc_main$L), {
                           class: "embedded-field",
                           field,
                           modelValue: row,
@@ -54208,7 +54298,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     ]);
                   }), 128))
                 ], 10, _hoisted_7$1);
-              }), 128))
+              }), 128)),
+              _ctx.onLastItemVisible !== void 0 ? (openBlock(), createElementBlock("tr", {
+                key: 0,
+                ref_key: "lastItem",
+                ref: lastItem
+              }, null, 512)) : createCommentVNode("", true)
             ])
           ])
         ], 16))
@@ -54216,7 +54311,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-692391a3"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-54f3c477"]]);
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "Title",
   props: {
@@ -55346,7 +55441,7 @@ function frmRow(...children2) {
 function bglForm(idOrField, ...schema) {
   if (typeof idOrField === "string") {
     return {
-      $el: markRaw(_sfc_main$J),
+      $el: markRaw(_sfc_main$K),
       id: idOrField,
       attrs: {
         schema: [idOrField, ...schema]
@@ -55354,7 +55449,7 @@ function bglForm(idOrField, ...schema) {
     };
   }
   return {
-    $el: markRaw(_sfc_main$J),
+    $el: markRaw(_sfc_main$K),
     attrs: {
       schema: [idOrField, ...schema]
     }
@@ -55430,15 +55525,17 @@ function formatString(str, format2) {
   }
   return str;
 }
-function debounce(func, wait) {
-  let timeoutId;
+function debounce(callback, wait, immediate) {
+  let timeout;
   return function(...args) {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      func(...args);
-    }, wait);
+    const later = () => {
+      timeout = void 0;
+      if (!immediate) callback.apply(this, args);
+    };
+    const callNow = immediate && timeout === void 0;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) callback.apply(this, args);
   };
 }
 function keyToLabel(key) {
@@ -55479,7 +55576,8 @@ function iffer(field, itemData) {
   if (field["v-if"] === void 0) return true;
   if (typeof field["v-if"] === "boolean") return field["v-if"];
   if (typeof field["v-if"] === "string") return true;
-  if (typeof field["v-if"] === "function") return (_a2 = field["v-if"]) == null ? void 0 : _a2.call(field, itemData == null ? void 0 : itemData[field.id], itemData);
+  if (typeof field["v-if"] === "function")
+    return (_a2 = field["v-if"]) == null ? void 0 : _a2.call(field, itemData == null ? void 0 : itemData[field.id], itemData);
   return true;
 }
 function denullify(itemData, fieldID) {
@@ -55489,15 +55587,15 @@ function denullify(itemData, fieldID) {
 const isDate = (dateToTest) => !Number.isNaN(Date.parse(dateToTest));
 function getFallbackSchema(data2, showFields) {
   const keys4 = Array.from(new Set((data2 ?? []).flatMap(Object.keys)));
-  const schema = keys4.map(
-    (id) => ({
-      id,
-      label: keyToLabel(id)
-    })
-  );
+  const schema = keys4.map((id) => ({
+    id,
+    label: keyToLabel(id)
+  }));
   return showFields ? schema.filter((f2) => showFields.includes(f2.id) || !f2.id) : schema;
 }
-const sleep = (ms = 100) => new Promise((resolve) => setTimeout(resolve, ms));
+function sleep(ms = 100) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 function appendScript(src) {
   return new Promise((resolve, reject3) => {
     if (document.querySelector(`script[src="${src}"]`)) {
@@ -55956,29 +56054,29 @@ const IMAGE_FORMATS_REGEXP = new RegExp(`(${IMAGE_FORMATS.join("|")})$`, "i");
 const VIDEO_FORMATS = ["mp4", "webm", "ogg", "mov", "avi", "flv", "wmv", "mkv", "ts", "m3u8"];
 const VIDEO_FORMATS_REGEXP = new RegExp(`(${VIDEO_FORMATS.join("|")})$`, "i");
 export {
-  _sfc_main$Y as Accordion,
+  _sfc_main$Z as Accordion,
   AccordionItem,
-  _sfc_main$W as AddressSearch,
+  _sfc_main$X as AddressSearch,
   Alert,
   Avatar,
   Badge,
-  _sfc_main$J as BagelForm,
+  _sfc_main$K as BagelForm,
   BagelVue,
-  _sfc_main$K as BglField,
-  _sfc_main$J as BglForm,
-  _sfc_main$I as BglMultiStepForm,
+  _sfc_main$L as BglField,
+  _sfc_main$K as BglForm,
+  _sfc_main$J as BglMultiStepForm,
   BglVideo,
   BottomMenu,
   Btn,
-  _sfc_main$Q as Card,
+  _sfc_main$R as Card,
   Carousel,
   CheckInput,
   Checkbox,
-  _sfc_main$F as ColorPicker,
+  _sfc_main$G as ColorPicker,
   DataPreview,
-  _sfc_main$E as DateInput,
-  _sfc_main$D as DatePicker,
-  _sfc_main$M as Dropdown,
+  _sfc_main$F as DateInput,
+  _sfc_main$E as DatePicker,
+  _sfc_main$N as Dropdown,
   $el as FileUpload,
   Flag,
   IMAGE_FORMATS,
@@ -55986,7 +56084,7 @@ export {
   _sfc_main$c as Icon,
   JSONInput,
   Layout,
-  _sfc_main$O as Lineart,
+  _sfc_main$P as Lineart,
   _sfc_main$f as ListItem,
   ListView,
   _sfc_main$d as MapEmbed,
@@ -55998,17 +56096,18 @@ export {
   NavBar,
   OTP,
   _sfc_main$7 as PageTitle,
-  _sfc_main$z as PasswordInput,
+  _sfc_main$A as PasswordInput,
   Pill,
   RadioGroup,
   RadioPillsInput,
   RangeInput,
-  _sfc_main$v as RichText,
+  _sfc_main$w as RichText,
   index$1 as RichText2,
   RouterWrapper,
   SelectInput,
   SidebarMenu,
-  _sfc_main$r as SignaturePad,
+  _sfc_main$s as SignaturePad,
+  Skeleton,
   TabbedLayout,
   TableField,
   TableSchema,