@bagelink/vue 0.0.1117 → 0.0.1121

package/dist/index.cjs

@@ -61,7 +61,7 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$X = ["aria-expanded", "aria-controls"];
+const _hoisted_1$W = ["aria-expanded", "aria-controls"];
 const _hoisted_2$D = { class: "accordion-label" };
 const _hoisted_3$t = ["id", "aria-hidden"];
 const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
@@ -138,7 +138,7 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createVNode(vue.unref(_sfc_main$d), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_1$X),
+        ], 8, _hoisted_1$W),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
             vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -164,7 +164,7 @@ const _export_sfc = (sfc, props2) => {
   return target;
 };
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-1e73ca3e"]]);
-const _hoisted_1$W = { class: "relative" };
+const _hoisted_1$V = { class: "relative" };
 const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
@@ -187,7 +187,7 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
         vue.createVNode(vue.unref(_sfc_main$X), {
           ref_key: "suggestion",
           ref: suggestion,
@@ -223,7 +223,7 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$V = {
+const _hoisted_1$U = {
   key: 1,
   class: "bgl_btn-flex"
 };
@@ -293,7 +293,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
             key: 0,
             class: "h-100p",
             size: "15"
-          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
+          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$U, [
             _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$d), {
               key: 0,
               icon: _ctx.icon
@@ -316,7 +316,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["__scopeId", "data-v-3efa79fb"]]);
-const _hoisted_1$U = ["dismissable"];
+const _hoisted_1$T = ["dismissable"];
 const _hoisted_2$C = { class: "m-0" };
 const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
   __name: "Alert",
@@ -354,12 +354,12 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$U)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$T)) : vue.createCommentVNode("", true);
     };
   }
 });
 const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-57141c32"]]);
-const _hoisted_1$T = ["src", "alt"];
+const _hoisted_1$S = ["src", "alt"];
 const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
@@ -378,7 +378,7 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$T)) : (vue.openBlock(), vue.createElementBlock("p", {
+        }, null, 8, _hoisted_1$S)) : (vue.openBlock(), vue.createElementBlock("p", {
           key: 1,
           style: vue.normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
         }, vue.toDisplayString((_ctx.fallback || vue.unref(initials)(_ctx.name || "")).toUpperCase()), 5))
@@ -417,7 +417,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-2f3caf93"]]);
-const _hoisted_1$S = { key: 1 };
+const _hoisted_1$R = { key: 1 };
 const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   __name: "BglComponent",
   props: {
@@ -447,7 +447,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
       if (props2.field.$el === "file") return FileUpload;
       if (props2.field.$el === "date") return _sfc_main$L;
       if (props2.field.$el === "tabs") return TabsNav;
-      if (props2.field.$el === "form") return _sfc_main$S;
+      if (props2.field.$el === "form") return _sfc_main$R;
       return props2.field.$el ?? "div";
     });
     function getFieldData(path) {
@@ -564,7 +564,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
                   id: [props2.id, child.id].filter(Boolean).join("."),
                   field: child,
                   "parent-path": props2.id
-                }, null, 8, ["id", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$S, vue.toDisplayString(child), 1))
+                }, null, 8, ["id", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$R, vue.toDisplayString(child), 1))
               ], 64);
             }), 128))
           ], 64))
@@ -574,7 +574,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$R = ["src"];
+const _hoisted_1$Q = ["src"];
 const _hoisted_2$B = ["autoplay", "muted", "loop", "controls", "playsinline"];
 const _hoisted_3$s = ["src", "type"];
 const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
@@ -654,7 +654,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$R)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
+        }, null, 12, _hoisted_1$Q)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
           key: 1,
           ref_key: "video",
           ref: video,
@@ -675,7 +675,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__scopeId", "data-v-006552f6"]]);
-const _hoisted_1$Q = {
+const _hoisted_1$P = {
   key: 0,
   class: "card_label"
 };
@@ -708,7 +708,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
         }])
       }, {
         default: vue.withCtx(() => [
-          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$Q, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$P, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -718,7 +718,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$P = ["dir"];
+const _hoisted_1$O = ["dir"];
 const _hoisted_2$A = {
   key: 0,
   class: "blocker"
@@ -933,7 +933,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
             }, void 0, true)
           ])
         ])
-      ], 14, _hoisted_1$P);
+      ], 14, _hoisted_1$O);
     };
   }
 });
@@ -6881,13 +6881,13 @@ var script = vue.defineComponent({
     return { bar, canvas, direction, mouse };
   }
 });
-const _hoisted_1$O = {
+const _hoisted_1$N = {
   key: 0,
   class: "layer-hover-bar"
 };
 const _hoisted_2$z = ["x", "y", "width", "height"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$O, [
+  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$N, [
     vue.createElementVNode("rect", vue.mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
@@ -7039,7 +7039,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$N = {
+const _hoisted_1$M = {
   key: 0,
   class: "data"
 };
@@ -7096,7 +7096,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     const computedSchema = vue.computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
+      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
         _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$4), {
           key: 0,
           label: _ctx.title
@@ -7109,7 +7109,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", _hoisted_3$p, [
                 vue.createElementVNode("p", _hoisted_4$h, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1)
               ]),
-              vue.createVNode(vue.unref(_sfc_main$T), {
+              vue.createVNode(vue.unref(_sfc_main$S), {
                 modelValue: itemData.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => itemData.value = $event),
                 label: "",
@@ -9763,7 +9763,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$M = { class: "px-1 pt-025 pb-1" };
+const _hoisted_1$L = { class: "px-1 pt-025 pb-1" };
 const _hoisted_2$x = { class: "ms-1" };
 const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   __name: "FieldSetVue",
@@ -9773,7 +9773,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("fieldset", _hoisted_1$M, [
+      return vue.openBlock(), vue.createElementBlock("fieldset", _hoisted_1$L, [
         vue.createElementVNode("legend", _hoisted_2$x, vue.toDisplayString(_ctx.legend || _ctx.label), 1),
         vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
@@ -9812,6 +9812,128 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-f99f1900"]]);
+const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+  __name: "BagelForm",
+  props: {
+    modelValue: { default: () => ({}) },
+    schema: { default: void 0 }
+  },
+  emits: ["update:modelValue", "submit"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props2 = __props;
+    const emit2 = __emit;
+    const form = vue.ref();
+    let formData = vue.ref({ ...props2.modelValue });
+    let initialFormData = vue.ref({ ...props2.modelValue });
+    vue.watch(() => props2.modelValue, (newValue) => {
+      formData.value = { ...newValue };
+    }, { immediate: true, deep: true });
+    const resolvedSchema = vue.computed(() => {
+      if (!props2.schema) return void 0;
+      return typeof props2.schema === "function" ? props2.schema() : props2.schema;
+    });
+    const isDirty = vue.computed(() => {
+      const current = JSON.stringify(formData.value);
+      const initial = JSON.stringify(initialFormData.value);
+      return current !== initial;
+    });
+    function getComponent(field) {
+      var _a2;
+      const componentMap = {
+        text: TextInput,
+        textarea: TextInput,
+        number: NumberInput,
+        array: _sfc_main$Q,
+        select: SelectInput,
+        toggle: ToggleInput,
+        check: CheckInput,
+        richtext: RichText,
+        upload: UploadInput,
+        file: FileUpload,
+        date: _sfc_main$L,
+        tabs: TabsNav,
+        bglform: _sfc_main$R
+      };
+      if (field.$el === "textarea" && !((_a2 = field.attrs) == null ? void 0 : _a2.multiline)) {
+        field.attrs = { ...field.attrs, multiline: true };
+      }
+      return componentMap[field.$el] ?? field.$el ?? "div";
+    }
+    function processFieldValue(fieldType, value) {
+      if (value == null) return value;
+      if (fieldType === "select" && typeof value === "object") return value.value;
+      if (typeof value === "object" && "value" in value) return value.value;
+      return value;
+    }
+    function updateFormData(fieldId, value, fieldType) {
+      formData.value = {
+        ...formData.value,
+        [fieldId]: processFieldValue(fieldType, value)
+      };
+      emit2("update:modelValue", formData.value);
+    }
+    function handleSubmit() {
+      emit2("submit", formData.value);
+      initialFormData.value = { ...formData.value };
+    }
+    function renderSchemaField(field) {
+      var _a2;
+      const Component = getComponent(field);
+      if (!Component) return null;
+      const { $el, vIf, "v-if": vIf2, children: children2, ...fieldProps } = field;
+      const currentValue = field.id ? formData.value[field.id] : void 0;
+      const props22 = {
+        ...fieldProps,
+        "modelValue": processFieldValue(field.$el, currentValue),
+        "onUpdate:modelValue": (value) => {
+          var _a3;
+          if (!field.id) return;
+          updateFormData(field.id, value, field.$el);
+          (_a3 = field.onUpdate) == null ? void 0 : _a3.call(field, value, formData.value);
+        }
+      };
+      if (field.attrs) {
+        Object.entries(field.attrs).forEach(([key, value]) => {
+          props22[key] = typeof value === "function" ? value(field, formData.value) : value;
+        });
+      }
+      if (field.class) {
+        props22.class = typeof field.class === "function" ? field.class(field, formData.value) : field.class;
+      }
+      const slots = ((_a2 = field.children) == null ? void 0 : _a2.length) ? {
+        default: () => field.children.map(
+          (child) => typeof child === "string" ? child : renderSchemaField(child)
+        )
+      } : void 0;
+      return vue.h(Component, props22, slots);
+    }
+    function shouldRenderField(field) {
+      const condition = field.vIf ?? field["v-if"];
+      if (condition === void 0) return true;
+      return typeof condition === "function" ? condition(formData.value[field.id], formData.value) : !!condition;
+    }
+    __expose({ form: form.value, isDirty: isDirty.value });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("form", {
+        ref_key: "form",
+        ref: form,
+        onSubmit: vue.withModifiers(handleSubmit, ["prevent"])
+      }, [
+        resolvedSchema.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(resolvedSchema.value, (field, index2) => {
+          return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: field.id || index2
+          }, [
+            shouldRenderField(field) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderSchemaField(field)), { key: 0 })) : vue.createCommentVNode("", true)
+          ], 64);
+        }), 128)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }),
+        vue.renderSlot(_ctx.$slots, "submit", {
+          submit: handleSubmit,
+          isDirty: isDirty.value
+        })
+      ], 544);
+    };
+  }
+});
 const state$1 = vue.reactive(/* @__PURE__ */ new Map());
 function useTabs(group) {
   if (!state$1.has(group)) {
@@ -9825,8 +9947,8 @@ function useTabs(group) {
   });
   return { currentTab };
 }
-const _hoisted_1$L = ["onClick"];
-const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$K = ["onClick"];
+const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   __name: "TabsNav",
   props: {
     title: {},
@@ -9908,14 +10030,14 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
                 icon: tab.icon
               }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
               vue.createTextVNode(" " + vue.toDisplayString(tabLabel(tab)), 1)
-            ], 10, _hoisted_1$L);
+            ], 10, _hoisted_1$K);
           }), 128))
         ], true)
       ], 2);
     };
   }
 });
-const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-307612a9"]]);
+const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-307612a9"]]);
 const FORM_STATE_KEY = Symbol("bagelFormState");
 function safeClone(obj) {
   if (obj === null || typeof obj !== "object") return obj;
@@ -9977,8 +10099,8 @@ function useBagelFormState() {
   if (!state2) throw new Error("BagelFormState must be provided");
   return state2;
 }
-const _hoisted_1$K = { key: 1 };
-const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$J = { key: 1 };
+const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   __name: "BglField",
   props: {
     field: {},
@@ -10008,7 +10130,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
       if (props2.field.$el === "file") return FileUpload;
       if (props2.field.$el === "date") return _sfc_main$L;
       if (props2.field.$el === "tabs") return TabsNav;
-      if (props2.field.$el === "bglform") return _sfc_main$S;
+      if (props2.field.$el === "bglform") return _sfc_main$R;
       return props2.field.$el ?? "div";
     });
     const fieldData = vue.computed({
@@ -10073,7 +10195,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
                 fieldID: [props2.fieldID, child.id].filter(Boolean).join("."),
                 field: child,
                 "parent-path": props2.fieldID
-              }, null, 8, ["fieldID", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$K, vue.toDisplayString(child), 1))
+              }, null, 8, ["fieldID", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$J, vue.toDisplayString(child), 1))
             ], 64);
           }), 128))
         ]),
@@ -10082,7 +10204,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   __name: "BglForm",
   props: {
     label: {},
@@ -10184,7 +10306,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
         _ctx.tag === "template" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field, i2) => {
-            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$T), {
+            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
               key: field.id || `${i2}p`,
               fieldID: field.id,
               field
@@ -10207,7 +10329,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
             label: _ctx.label
           }, null, 8, ["label"])) : vue.createCommentVNode("", true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field, i2) => {
-            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$T), {
+            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
               key: field.id || `${i2}p`,
               fieldID: field.id,
               field
@@ -10225,114 +10347,6 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$J = { key: 0 };
-const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
-  __name: "BglMultiStepForm",
-  props: /* @__PURE__ */ vue.mergeModels({
-    bagelFormProps: { default: () => ({}) },
-    schema: {}
-  }, {
-    "modelValue": { default: () => {
-    }, required: true },
-    "modelModifiers": {}
-  }),
-  emits: /* @__PURE__ */ vue.mergeModels(["submit"], ["update:modelValue"]),
-  setup(__props, { expose: __expose, emit: __emit }) {
-    var _a2, _b, _c, _d;
-    const props2 = __props;
-    const emits = __emit;
-    const formRef = vue.ref();
-    const formData = vue.useModel(
-      __props,
-      "modelValue"
-    );
-    function reportValidity() {
-      if (!formRef.value) return false;
-      return formRef.value.validateForm();
-    }
-    const computedSchema = vue.computed(
-      () => useBglSchema({ schema: props2.schema })
-    );
-    const numberOfSteps = vue.ref(computedSchema.value.length);
-    let currentStep = vue.ref(0);
-    const currentStepSchema = vue.computed(() => computedSchema.value[currentStep.value]);
-    let isStepping = vue.ref(false);
-    let isSteppingTO;
-    vue.watch(
-      () => currentStep.value,
-      () => {
-        clearTimeout(isSteppingTO);
-        isStepping.value = true;
-        isSteppingTO = setTimeout(() => isStepping.value = false, 600);
-      }
-    );
-    const canDoNext = vue.computed(() => currentStep.value < numberOfSteps.value - 1);
-    function prevStep() {
-      if (currentStep.value > 0) currentStep.value--;
-    }
-    function nextStep() {
-      if (reportValidity() === false) return;
-      if (canDoNext.value) currentStep.value++;
-    }
-    function handleSubmit() {
-      if (reportValidity() === false) return;
-      emits("submit", formData.value);
-    }
-    __expose({
-      submit: handleSubmit,
-      validateForm: (_a2 = formRef.value) == null ? void 0 : _a2.validateForm,
-      deleteItem: (_b = formRef.value) == null ? void 0 : _b.deleteItem,
-      isDirty: (_c = formRef.value) == null ? void 0 : _c.isDirty,
-      clearForm: (_d = formRef.value) == null ? void 0 : _d.clearForm
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createVNode(vue.Transition, {
-          duration: 600,
-          name: "fade",
-          mode: "out-in"
-        }, {
-          default: vue.withCtx(() => [
-            !vue.unref(isStepping) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J, [
-              vue.createVNode(vue.unref(_sfc_main$S), vue.mergeProps({
-                ref_key: "formRef",
-                ref: formRef,
-                modelValue: formData.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => formData.value = $event),
-                schema: [currentStepSchema.value]
-              }, _ctx.bagelFormProps), {
-                success: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "success")
-                ]),
-                error: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "error")
-                ]),
-                _: 3
-              }, 16, ["modelValue", "schema"])
-            ])) : vue.createCommentVNode("", true)
-          ]),
-          _: 3
-        }),
-        vue.renderSlot(_ctx.$slots, "steppers", vue.normalizeProps(vue.guardReactiveProps({ prevStep, nextStep, submit: handleSubmit })), () => [
-          vue.createVNode(vue.unref(Btn), {
-            disabled: vue.unref(currentStep) === 0,
-            value: "Back",
-            onClick: prevStep
-          }, null, 8, ["disabled"]),
-          canDoNext.value ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
-            key: 0,
-            value: "Next",
-            onClick: nextStep
-          })) : (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
-            key: 1,
-            value: "Submit",
-            onClick: handleSubmit
-          }))
-        ])
-      ], 64);
-    };
-  }
-});
 const _hoisted_1$I = { class: "label mb-05" };
 const _hoisted_2$w = {
   key: 0,
@@ -10404,7 +10418,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
               thin: "",
               class: "mb-05 itemBox transition p-05"
             }, [
-              vue.createVNode(vue.unref(_sfc_main$S), {
+              vue.createVNode(vue.unref(_sfc_main$R), {
                 modelValue: data2.value[i2],
                 "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
                 schema: _ctx.schema
@@ -10434,7 +10448,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
             _: 1
           })) : vue.createCommentVNode("", true)
         ])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(data2.value, (_2, i2) => {
-          return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$T), {
+          return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
             key: i2,
             modelValue: data2.value[i2],
             "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
@@ -20286,7 +20300,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
-    let numberValue = vue.ref(__props.modelValue || 0);
+    let numberValue = vue.ref(Number.parseFloat(`${__props.modelValue}`) || 0);
     const btnLayouts = ["horizontal", "vertical"];
     const canAdd = vue.computed(() => !(__props.max !== void 0 && numberValue.value + __props.step > __props.max));
     const canDecrement = vue.computed(() => !(__props.min !== void 0 && numberValue.value - __props.step < __props.min));
@@ -20320,7 +20334,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     }, { immediate: true });
     vue.watch(() => __props.modelValue, (newVal) => {
       if (newVal !== numberValue.value) {
-        numberValue.value = newVal || 0;
+        numberValue.value = Number.parseFloat(`${newVal}`) || 0;
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
@@ -20424,7 +20438,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-f265687e"]]);
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-4a70ce50"]]);
 const _hoisted_1$x = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",
@@ -21113,6 +21127,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
               flat: "",
               "aria-label": action.name,
               class: vue.normalizeClass([[action.class, { active: _ctx.selectedStyles.has(action.name) }], ""]),
+              tabindex: "-1",
               onClick: ($event) => runAction(action.name)
             }, null, 8, ["icon", "aria-label", "class", "onClick"])), [
               [_directive_tooltip, action.label]
@@ -21126,7 +21141,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-33dff8fa"]]);
+const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-bcd681b9"]]);
 function createCommandExecutor(state2, commands) {
   return {
     execute(command, value) {
@@ -31386,65 +31401,82 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   props: {
     src: {},
     pathKey: {},
-    alt: { default: "" },
+    alt: {},
     width: {},
     height: {},
     caption: {}
   },
   setup(__props) {
+    const props2 = __props;
     let imageSrc = vue.ref(null);
-    const fileBaseUrl = vue.computed(() => "https://files.bagel.design".replace(/\/$/, ""));
-    function pathToUrl() {
+    let loadingError = vue.ref(false);
+    const fileBaseUrl = vue.computed(() => "https://files.bagel.design");
+    function getImageUrl() {
       var _a2;
-      if ((_a2 = __props.pathKey) == null ? void 0 : _a2.startsWith("static/")) return `${void 0}/${__props.pathKey}`;
-      return `${fileBaseUrl.value}/${__props.pathKey}`;
+      if (!props2.src && !props2.pathKey) return null;
+      if (props2.src) return props2.src;
+      if ((_a2 = props2.pathKey) == null ? void 0 : _a2.startsWith("static/")) {
+        return `${void 0}/${props2.pathKey}`;
+      }
+      return `${fileBaseUrl.value}/${props2.pathKey}`;
+    }
+    async function getCachedImage(url) {
+      if (!("caches" in window)) return null;
+      try {
+        const imgCache = await window.caches.open("img-cache");
+        const cachedResponse = await imgCache.match(url);
+        if (cachedResponse) {
+          return URL.createObjectURL(await cachedResponse.blob());
+        }
+      } catch (error) {
+        console.warn("Cache access error:", error);
+      }
+      return null;
+    }
+    async function cacheImage(url, blob) {
+      if (!("caches" in window)) return;
+      try {
+        const imgCache = await window.caches.open("img-cache");
+        await imgCache.put(url, new Response(blob));
+      } catch (error) {
+        console.warn("Cache write error:", error);
+      }
+    }
+    async function convertHeicImage(url) {
+      await appendScript("https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js");
+      const response = await fetch(normalizeURL(url));
+      const blob = await response.blob();
+      const convertedBlob = await window.heic2any({ blob });
+      await cacheImage(url, convertedBlob);
+      return URL.createObjectURL(convertedBlob);
     }
     async function loadImage() {
       var _a2;
-      const url = __props.src || pathToUrl();
-      console.log(url);
+      loadingError.value = false;
+      const url = getImageUrl();
       if (!url) {
         imageSrc.value = null;
         return;
       }
-      const ext = (_a2 = url.split(".").pop()) == null ? void 0 : _a2.toLowerCase().split("?").shift();
-      if (ext === "heic") {
-        if (!("caches" in window)) {
-          console.warn("Caching is not available. Proceeding without cache.");
-        } else {
-          try {
-            const imgCache = await window.caches.open("img-cache");
-            const cachedResponse = await imgCache.match(url);
-            if (cachedResponse) {
-              imageSrc.value = URL.createObjectURL(await cachedResponse.blob());
-              return;
-            }
-          } catch (error) {
-            console.warn("Error accessing cache:", error);
-          }
-        }
-        try {
-          await appendScript("https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js");
-          const response = await fetch(normalizeURL(url));
-          const blob = await response.blob();
-          const convertedBlob = await window.heic2any({ blob });
-          imageSrc.value = URL.createObjectURL(convertedBlob);
-          if ("caches" in window) {
-            try {
-              const imgCache = await window.caches.open("img-cache");
-              imgCache.put(url, new Response(convertedBlob));
-            } catch (cacheError) {
-              console.warn("Failed to cache the image:", cacheError);
-            }
+      try {
+        const ext = (_a2 = url.split(".").pop()) == null ? void 0 : _a2.toLowerCase().split("?")[0];
+        if (ext === "heic") {
+          const cachedSrc = await getCachedImage(url);
+          if (cachedSrc) {
+            imageSrc.value = cachedSrc;
+            return;
           }
-        } catch (error) {
-          console.error("Error converting HEIC file:", error);
+          imageSrc.value = await convertHeicImage(url);
+        } else {
+          imageSrc.value = url;
         }
-      } else {
-        imageSrc.value = url;
+      } catch (error) {
+        console.error("Image loading error:", error);
+        loadingError.value = true;
+        imageSrc.value = null;
       }
     }
-    vue.watch(() => [__props.src, __props.pathKey], loadImage, { immediate: true });
+    vue.watch(() => [props2.src, props2.pathKey], loadImage, { immediate: true });
     return (_ctx, _cache) => {
       return _ctx.caption ? (vue.openBlock(), vue.createElementBlock("figcaption", _hoisted_1$h, [
         vue.unref(imageSrc) ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
@@ -31467,8 +31499,17 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
         alt: _ctx.alt,
         width: vue.unref(normalizeDimension)(_ctx.width),
         height: vue.unref(normalizeDimension)(_ctx.height)
-      }), null, 16, _hoisted_3$7)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
+      }), null, 16, _hoisted_3$7)) : vue.unref(loadingError) ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 2,
+        class: "flex-center error-image",
+        style: vue.normalizeStyle({
+          width: vue.unref(normalizeDimension)(_ctx.width),
+          height: vue.unref(normalizeDimension)(_ctx.height)
+        })
+      }, [
+        vue.createVNode(vue.unref(_sfc_main$d), { name: "broken_image" })
+      ], 4)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
+        key: 3,
         class: "img-web-kit",
         width: vue.unref(normalizeDimension)(_ctx.width),
         height: vue.unref(normalizeDimension)(_ctx.height)
@@ -31476,7 +31517,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-1b7f9bb3"]]);
+const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-6f277b5b"]]);
 const _hoisted_1$g = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",
@@ -32284,15 +32325,12 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
         "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => emit2("update:visible", $event))
       }, vue.createSlots({
         default: vue.withCtx(() => [
-          _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
-            key: 0,
-            ref_key: "form",
-            ref: form,
+          vue.createVNode(vue.unref(_sfc_main$U), {
             modelValue: formData.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => formData.value = $event),
             schema: computedFormSchema.value,
             onSubmit: runSubmit
-          }, null, 8, ["modelValue", "schema"])) : vue.createCommentVNode("", true)
+          }, null, 8, ["modelValue", "schema"])
         ]),
         _: 2
       }, [
@@ -32327,7 +32365,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-7361477b"]]);
+const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-f796c518"]]);
 const _hoisted_1$6 = { class: "full-nav" };
 const _hoisted_2$4 = { class: "nav-scroll" };
 const _hoisted_3$3 = { class: "nav-links-wrapper" };
@@ -32633,6 +32671,7 @@ function debounceFilter(ms, options = {}) {
     lastRejector();
     lastRejector = noop;
   };
+  let lastInvoker;
   const filter3 = (invoke) => {
     const duration = vue.toValue(ms);
     const maxDuration = vue.toValue(options.maxWait);
@@ -32647,12 +32686,13 @@ function debounceFilter(ms, options = {}) {
     }
     return new Promise((resolve, reject3) => {
       lastRejector = options.rejectOnCancel ? reject3 : resolve;
+      lastInvoker = invoke;
       if (maxDuration && !maxTimer) {
         maxTimer = setTimeout(() => {
           if (timer)
             _clearTimeout(timer);
           maxTimer = null;
-          resolve(invoke());
+          resolve(lastInvoker());
         }, maxDuration);
       }
       timer = setTimeout(() => {
@@ -35535,12 +35575,12 @@ exports.AddressSearch = _sfc_main$16;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
-exports.BagelForm = _sfc_main$S;
+exports.BagelForm = _sfc_main$R;
+exports.BagelForm2 = _sfc_main$U;
 exports.BagelVue = BagelVue;
 exports.BglComponent = _sfc_main$11;
-exports.BglField = _sfc_main$T;
-exports.BglForm = _sfc_main$S;
-exports.BglMultiStepForm = _sfc_main$R;
+exports.BglField = _sfc_main$S;
+exports.BglForm = _sfc_main$R;
 exports.BglVideo = BglVideo;
 exports.BottomMenu = BottomMenu;
 exports.Btn = Btn;