@bagelink/vue 0.0.1117 → 0.0.1119

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",
@@ -32282,15 +32296,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 +32336,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" };
@@ -35534,12 +35545,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,

package/dist/style.css

@@ -1244,14 +1244,14 @@ pre code.hljs{
 	direction: ltr;
 }
 
-.txtInputIconStart .iconStart[data-v-f265687e] {
+.txtInputIconStart .iconStart[data-v-4a70ce50] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 );
 	line-height: 0;
 }
-.textInputSpinnerWrap .spinner[data-v-f265687e] {
+.textInputSpinnerWrap .spinner[data-v-4a70ce50] {
 	color: var(--input-color);
 	position: absolute;
 	inset-inline-end: 0;
@@ -1261,18 +1261,18 @@ pre code.hljs{
 	flex-direction: column;
 	gap: 0;
 }
-.top-bgl-ctrl-num-btn[data-v-f265687e]{
+.top-bgl-ctrl-num-btn[data-v-4a70ce50]{
 	margin-top: calc(var(--input-height) / 10) !important;
 }
-.bgl-ctrl-num-btn[data-v-f265687e]{
+.bgl-ctrl-num-btn[data-v-4a70ce50]{
 	height: calc(var(--input-height) / 2.5) !important;
 	isolation: isolate;
 }
-.bgl-big-ctrl-num-btn[data-v-f265687e]{
+.bgl-big-ctrl-num-btn[data-v-4a70ce50]{
 	width: 100% !important;
 	isolation: isolate;
 }
-.bgl-number-input[data-v-f265687e]{
+.bgl-number-input[data-v-4a70ce50]{
 	padding-inline-end: 1.75rem !important;
 }
 
@@ -3336,11 +3336,11 @@ body:has(.bg-dark.is-active) {
 	border-radius: var(--card-border-radius);
 }
 
-.modal-title[data-v-7361477b] {
+.modal-title[data-v-f796c518] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-7361477b] {
+.modal-title[data-v-f796c518] {
 		margin-top: 1rem;
 }
 }