@bagelink/vue 0.0.1117 → 0.0.1121

package/dist/index.mjs

@@ -59,7 +59,7 @@ const _sfc_main$18 = /* @__PURE__ */ 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__ */ defineComponent({
@@ -136,7 +136,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
           }, [
             createVNode(unref(_sfc_main$d), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : createCommentVNode("", true)
-        ], 8, _hoisted_1$X),
+        ], 8, _hoisted_1$W),
         createVNode(Transition, { name: "expand" }, {
           default: withCtx(() => [
             unref(isOpen) ? (openBlock(), createElementBlock("div", {
@@ -162,7 +162,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__ */ defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
@@ -185,7 +185,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$W, [
+      return openBlock(), createElementBlock("div", _hoisted_1$V, [
         createVNode(unref(_sfc_main$X), {
           ref_key: "suggestion",
           ref: suggestion,
@@ -221,7 +221,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$V = {
+const _hoisted_1$U = {
   key: 1,
   class: "bgl_btn-flex"
 };
@@ -291,7 +291,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
             key: 0,
             class: "h-100p",
             size: "15"
-          })) : (openBlock(), createElementBlock("div", _hoisted_1$V, [
+          })) : (openBlock(), createElementBlock("div", _hoisted_1$U, [
             _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$d), {
               key: 0,
               icon: _ctx.icon
@@ -314,7 +314,7 @@ const _sfc_main$15 = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "Alert",
@@ -352,12 +352,12 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$U)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$T)) : 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__ */ defineComponent({
   __name: "Avatar",
   props: {
@@ -376,7 +376,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$T)) : (openBlock(), createElementBlock("p", {
+        }, null, 8, _hoisted_1$S)) : (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))
@@ -415,7 +415,7 @@ const _sfc_main$12 = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "BglComponent",
   props: {
@@ -445,7 +445,7 @@ const _sfc_main$11 = /* @__PURE__ */ 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) {
@@ -562,7 +562,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
                   id: [props2.id, child.id].filter(Boolean).join("."),
                   field: child,
                   "parent-path": props2.id
-                }, null, 8, ["id", "field", "parent-path"])) : (openBlock(), createElementBlock("span", _hoisted_1$S, toDisplayString(child), 1))
+                }, null, 8, ["id", "field", "parent-path"])) : (openBlock(), createElementBlock("span", _hoisted_1$R, toDisplayString(child), 1))
               ], 64);
             }), 128))
           ], 64))
@@ -572,7 +572,7 @@ const _sfc_main$11 = /* @__PURE__ */ 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__ */ defineComponent({
@@ -652,7 +652,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$R)) : _ctx.src ? (openBlock(), createElementBlock("video", {
+        }, null, 12, _hoisted_1$Q)) : _ctx.src ? (openBlock(), createElementBlock("video", {
           key: 1,
           ref_key: "video",
           ref: video,
@@ -673,7 +673,7 @@ const _sfc_main$10 = /* @__PURE__ */ 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"
 };
@@ -706,7 +706,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
         }])
       }, {
         default: withCtx(() => [
-          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$Q, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$P, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -716,7 +716,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$P = ["dir"];
+const _hoisted_1$O = ["dir"];
 const _hoisted_2$A = {
   key: 0,
   class: "blocker"
@@ -931,7 +931,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
             }, void 0, true)
           ])
         ])
-      ], 14, _hoisted_1$P);
+      ], 14, _hoisted_1$O);
     };
   }
 });
@@ -6879,13 +6879,13 @@ var script = 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 ? (openBlock(), createElementBlock("g", _hoisted_1$O, [
+  return _ctx.mouse.hover ? (openBlock(), createElementBlock("g", _hoisted_1$N, [
     createElementVNode("rect", mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
@@ -7037,7 +7037,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$N = {
+const _hoisted_1$M = {
   key: 0,
   class: "data"
 };
@@ -7094,7 +7094,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     const computedSchema = computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$N, [
+      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$M, [
         _ctx.title ? (openBlock(), createBlock(unref(_sfc_main$4), {
           key: 0,
           label: _ctx.title
@@ -7107,7 +7107,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
               createElementVNode("div", _hoisted_3$p, [
                 createElementVNode("p", _hoisted_4$h, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1)
               ]),
-              createVNode(unref(_sfc_main$T), {
+              createVNode(unref(_sfc_main$S), {
                 modelValue: itemData.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => itemData.value = $event),
                 label: "",
@@ -9761,7 +9761,7 @@ const _sfc_main$X = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "FieldSetVue",
@@ -9771,7 +9771,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("fieldset", _hoisted_1$M, [
+      return openBlock(), createElementBlock("fieldset", _hoisted_1$L, [
         createElementVNode("legend", _hoisted_2$x, toDisplayString(_ctx.legend || _ctx.label), 1),
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
@@ -9810,6 +9810,128 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
   }
 });
 const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-f99f1900"]]);
+const _sfc_main$U = /* @__PURE__ */ 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 = ref();
+    let formData = ref({ ...props2.modelValue });
+    let initialFormData = ref({ ...props2.modelValue });
+    watch(() => props2.modelValue, (newValue) => {
+      formData.value = { ...newValue };
+    }, { immediate: true, deep: true });
+    const resolvedSchema = computed(() => {
+      if (!props2.schema) return void 0;
+      return typeof props2.schema === "function" ? props2.schema() : props2.schema;
+    });
+    const isDirty = 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 h$2(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 openBlock(), createElementBlock("form", {
+        ref_key: "form",
+        ref: form,
+        onSubmit: withModifiers(handleSubmit, ["prevent"])
+      }, [
+        resolvedSchema.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(resolvedSchema.value, (field, index2) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: field.id || index2
+          }, [
+            shouldRenderField(field) ? (openBlock(), createBlock(resolveDynamicComponent(renderSchemaField(field)), { key: 0 })) : createCommentVNode("", true)
+          ], 64);
+        }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 }),
+        renderSlot(_ctx.$slots, "submit", {
+          submit: handleSubmit,
+          isDirty: isDirty.value
+        })
+      ], 544);
+    };
+  }
+});
 const state$1 = reactive(/* @__PURE__ */ new Map());
 function useTabs(group) {
   if (!state$1.has(group)) {
@@ -9823,8 +9945,8 @@ function useTabs(group) {
   });
   return { currentTab };
 }
-const _hoisted_1$L = ["onClick"];
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _hoisted_1$K = ["onClick"];
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "TabsNav",
   props: {
     title: {},
@@ -9906,14 +10028,14 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 icon: tab.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
               createTextVNode(" " + 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;
@@ -9975,8 +10097,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__ */ defineComponent({
+const _hoisted_1$J = { key: 1 };
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "BglField",
   props: {
     field: {},
@@ -10006,7 +10128,7 @@ const _sfc_main$T = /* @__PURE__ */ 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 = computed({
@@ -10071,7 +10193,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
                 fieldID: [props2.fieldID, child.id].filter(Boolean).join("."),
                 field: child,
                 "parent-path": props2.fieldID
-              }, null, 8, ["fieldID", "field", "parent-path"])) : (openBlock(), createElementBlock("span", _hoisted_1$K, toDisplayString(child), 1))
+              }, null, 8, ["fieldID", "field", "parent-path"])) : (openBlock(), createElementBlock("span", _hoisted_1$J, toDisplayString(child), 1))
             ], 64);
           }), 128))
         ]),
@@ -10080,7 +10202,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "BglForm",
   props: {
     label: {},
@@ -10182,7 +10304,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         _ctx.tag === "template" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(computedSchema.value, (field, i2) => {
-            return openBlock(), createBlock(unref(_sfc_main$T), {
+            return openBlock(), createBlock(unref(_sfc_main$S), {
               key: field.id || `${i2}p`,
               fieldID: field.id,
               field
@@ -10205,7 +10327,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
             label: _ctx.label
           }, null, 8, ["label"])) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment, null, renderList(computedSchema.value, (field, i2) => {
-            return openBlock(), createBlock(unref(_sfc_main$T), {
+            return openBlock(), createBlock(unref(_sfc_main$S), {
               key: field.id || `${i2}p`,
               fieldID: field.id,
               field
@@ -10223,114 +10345,6 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$J = { key: 0 };
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
-  __name: "BglMultiStepForm",
-  props: /* @__PURE__ */ mergeModels({
-    bagelFormProps: { default: () => ({}) },
-    schema: {}
-  }, {
-    "modelValue": { default: () => {
-    }, required: true },
-    "modelModifiers": {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:modelValue"]),
-  setup(__props, { expose: __expose, emit: __emit }) {
-    var _a2, _b, _c, _d;
-    const props2 = __props;
-    const emits = __emit;
-    const formRef = ref();
-    const formData = useModel(
-      __props,
-      "modelValue"
-    );
-    function reportValidity() {
-      if (!formRef.value) return false;
-      return formRef.value.validateForm();
-    }
-    const computedSchema = computed(
-      () => useBglSchema({ schema: props2.schema })
-    );
-    const numberOfSteps = ref(computedSchema.value.length);
-    let currentStep = ref(0);
-    const currentStepSchema = computed(() => computedSchema.value[currentStep.value]);
-    let isStepping = ref(false);
-    let isSteppingTO;
-    watch(
-      () => currentStep.value,
-      () => {
-        clearTimeout(isSteppingTO);
-        isStepping.value = true;
-        isSteppingTO = setTimeout(() => isStepping.value = false, 600);
-      }
-    );
-    const canDoNext = 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 openBlock(), createElementBlock(Fragment, null, [
-        createVNode(Transition, {
-          duration: 600,
-          name: "fade",
-          mode: "out-in"
-        }, {
-          default: withCtx(() => [
-            !unref(isStepping) ? (openBlock(), createElementBlock("div", _hoisted_1$J, [
-              createVNode(unref(_sfc_main$S), 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: withCtx(() => [
-                  renderSlot(_ctx.$slots, "success")
-                ]),
-                error: withCtx(() => [
-                  renderSlot(_ctx.$slots, "error")
-                ]),
-                _: 3
-              }, 16, ["modelValue", "schema"])
-            ])) : createCommentVNode("", true)
-          ]),
-          _: 3
-        }),
-        renderSlot(_ctx.$slots, "steppers", normalizeProps(guardReactiveProps({ prevStep, nextStep, submit: handleSubmit })), () => [
-          createVNode(unref(Btn), {
-            disabled: unref(currentStep) === 0,
-            value: "Back",
-            onClick: prevStep
-          }, null, 8, ["disabled"]),
-          canDoNext.value ? (openBlock(), createBlock(unref(Btn), {
-            key: 0,
-            value: "Next",
-            onClick: nextStep
-          })) : (openBlock(), createBlock(unref(Btn), {
-            key: 1,
-            value: "Submit",
-            onClick: handleSubmit
-          }))
-        ])
-      ], 64);
-    };
-  }
-});
 const _hoisted_1$I = { class: "label mb-05" };
 const _hoisted_2$w = {
   key: 0,
@@ -10402,7 +10416,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
               thin: "",
               class: "mb-05 itemBox transition p-05"
             }, [
-              createVNode(unref(_sfc_main$S), {
+              createVNode(unref(_sfc_main$R), {
                 modelValue: data2.value[i2],
                 "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
                 schema: _ctx.schema
@@ -10432,7 +10446,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             _: 1
           })) : createCommentVNode("", true)
         ])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(data2.value, (_2, i2) => {
-          return openBlock(), createBlock(unref(_sfc_main$T), {
+          return openBlock(), createBlock(unref(_sfc_main$S), {
             key: i2,
             modelValue: data2.value[i2],
             "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
@@ -20284,7 +20298,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
-    let numberValue = ref(__props.modelValue || 0);
+    let numberValue = ref(Number.parseFloat(`${__props.modelValue}`) || 0);
     const btnLayouts = ["horizontal", "vertical"];
     const canAdd = computed(() => !(__props.max !== void 0 && numberValue.value + __props.step > __props.max));
     const canDecrement = computed(() => !(__props.min !== void 0 && numberValue.value - __props.step < __props.min));
@@ -20318,7 +20332,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     }, { immediate: true });
     watch(() => __props.modelValue, (newVal) => {
       if (newVal !== numberValue.value) {
-        numberValue.value = newVal || 0;
+        numberValue.value = Number.parseFloat(`${newVal}`) || 0;
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
@@ -20422,7 +20436,7 @@ const _sfc_main$G = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "OTP",
@@ -21111,6 +21125,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               flat: "",
               "aria-label": action.name,
               class: 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]
@@ -21124,7 +21139,7 @@ const _sfc_main$z = /* @__PURE__ */ 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) {
@@ -31384,65 +31399,82 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   props: {
     src: {},
     pathKey: {},
-    alt: { default: "" },
+    alt: {},
     width: {},
     height: {},
     caption: {}
   },
   setup(__props) {
+    const props2 = __props;
     let imageSrc = ref(null);
-    const fileBaseUrl = computed(() => "https://files.bagel.design".replace(/\/$/, ""));
-    function pathToUrl() {
+    let loadingError = ref(false);
+    const fileBaseUrl = 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;
       }
     }
-    watch(() => [__props.src, __props.pathKey], loadImage, { immediate: true });
+    watch(() => [props2.src, props2.pathKey], loadImage, { immediate: true });
     return (_ctx, _cache) => {
       return _ctx.caption ? (openBlock(), createElementBlock("figcaption", _hoisted_1$h, [
         unref(imageSrc) ? (openBlock(), createElementBlock("img", mergeProps({
@@ -31465,8 +31497,17 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         alt: _ctx.alt,
         width: unref(normalizeDimension)(_ctx.width),
         height: unref(normalizeDimension)(_ctx.height)
-      }), null, 16, _hoisted_3$7)) : (openBlock(), createBlock(unref(Skeleton), {
+      }), null, 16, _hoisted_3$7)) : unref(loadingError) ? (openBlock(), createElementBlock("div", {
         key: 2,
+        class: "flex-center error-image",
+        style: normalizeStyle({
+          width: unref(normalizeDimension)(_ctx.width),
+          height: unref(normalizeDimension)(_ctx.height)
+        })
+      }, [
+        createVNode(unref(_sfc_main$d), { name: "broken_image" })
+      ], 4)) : (openBlock(), createBlock(unref(Skeleton), {
+        key: 3,
         class: "img-web-kit",
         width: unref(normalizeDimension)(_ctx.width),
         height: unref(normalizeDimension)(_ctx.height)
@@ -31474,7 +31515,7 @@ const _sfc_main$p = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "BottomMenu",
@@ -32282,15 +32323,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => emit2("update:visible", $event))
       }, createSlots({
         default: withCtx(() => [
-          _ctx.visible ? (openBlock(), createBlock(unref(_sfc_main$S), {
-            key: 0,
-            ref_key: "form",
-            ref: form,
+          createVNode(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"])) : createCommentVNode("", true)
+          }, null, 8, ["modelValue", "schema"])
         ]),
         _: 2
       }, [
@@ -32325,7 +32363,7 @@ const _sfc_main$a = /* @__PURE__ */ 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" };
@@ -32631,6 +32669,7 @@ function debounceFilter(ms, options = {}) {
     lastRejector();
     lastRejector = noop;
   };
+  let lastInvoker;
   const filter3 = (invoke) => {
     const duration = toValue(ms);
     const maxDuration = toValue(options.maxWait);
@@ -32645,12 +32684,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(() => {
@@ -35534,12 +35574,12 @@ export {
   Alert,
   Avatar,
   Badge,
-  _sfc_main$S as BagelForm,
+  _sfc_main$R as BagelForm,
+  _sfc_main$U as BagelForm2,
   BagelVue,
   _sfc_main$11 as BglComponent,
-  _sfc_main$T as BglField,
-  _sfc_main$S as BglForm,
-  _sfc_main$R as BglMultiStepForm,
+  _sfc_main$S as BglField,
+  _sfc_main$R as BglForm,
   BglVideo,
   BottomMenu,
   Btn,