@bagelink/vue 0.0.204 → 0.0.211

package/dist/index.cjs

@@ -2279,16 +2279,17 @@ const ModalPlugin = {
     const hideModal = (index2) => {
       modalStack.value.splice(index2, 1);
     };
-    const showModal = (isForm, options, slots = {}) => {
+    const showModal = (modalType, options, slots = {}) => {
       modalStack.value.push({
         modalOptions: options,
-        isModalForm: isForm,
+        modalType,
         componentSlots: slots
       });
     };
     app.provide(ModalSymbol, {
-      modalForm: (options, slots) => showModal(true, options, slots),
-      showModal: (options, slots) => showModal(false, options, slots),
+      modalForm: (options, slots) => showModal(1, options, slots),
+      showModal: (options, slots) => showModal(0, options, slots),
+      showModalForm: (options, slots) => showModal(2, options, slots),
       hideModal: (index2 = modalStack.value.length - 1) => hideModal(index2)
       // modalOptions,
     });
@@ -2300,7 +2301,13 @@ const ModalPlugin = {
       },
       render() {
         return modalStack.value.map((modal, index2) => {
-          const renderComponent = modal.isModalForm ? ModalForm : _sfc_main$T;
+          let renderComponent;
+          if (modal.modalType === 1)
+            renderComponent = ModalForm;
+          else if (modal.modalType === 2)
+            renderComponent = ModalBglForm;
+          else
+            renderComponent = _sfc_main$U;
           return vue.h(
             renderComponent,
             {
@@ -2364,8 +2371,8 @@ function bindAttrs(attrs, fieldVal, row) {
   const resolvedAttrs = Object.fromEntries(arr);
   return resolvedAttrs;
 }
-const _hoisted_1$11 = { ref: "el" };
-const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$12 = { ref: "el" };
+const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
   __name: "LangText",
   props: {
     input: {}
@@ -2373,7 +2380,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createElementVNode("span", _hoisted_1$11, null, 512),
+        vue.createElementVNode("span", _hoisted_1$12, null, 512),
         vue.createTextVNode(" " + vue.toDisplayString(_ctx.input), 1)
       ], 64);
     };
@@ -14486,8 +14493,8 @@ const marks = {
   }
 };
 const schema = new Schema({ nodes, marks });
-const _hoisted_1$10 = ["id"];
-const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$11 = ["id"];
+const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   __name: "RTXEditor",
   props: {
     elementId: { default: Math.random().toString(36).substr(2, 9) },
@@ -14564,11 +14571,11 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
         onClick: focusEditor,
         id: `canvas-${_ctx.elementId}`,
         onKeydown: _cache[0] || (_cache[0] = vue.withKeys(vue.withModifiers(($event) => _ctx.$emit("keydown.meta.enter"), ["meta"]), ["enter"]))
-      }, null, 40, _hoisted_1$10);
+      }, null, 40, _hoisted_1$11);
     };
   }
 });
-const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
   __name: "MaterialIcon",
   props: {
     icon: {},
@@ -14583,17 +14590,17 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$$ = /* @__PURE__ */ vue.createElementVNode("div", { class: "icon-font top-arrow" }, "chevron_right", -1);
-const _hoisted_2$S = [
-  _hoisted_1$$
+const _hoisted_1$10 = /* @__PURE__ */ vue.createElementVNode("div", { class: "icon-font top-arrow" }, "chevron_right", -1);
+const _hoisted_2$T = [
+  _hoisted_1$10
 ];
 const _hoisted_3$K = { class: "full-nav" };
 const _hoisted_4$t = { class: "nav-scroll" };
-const _hoisted_5$n = { class: "nav-links-wrapper" };
+const _hoisted_5$o = { class: "nav-links-wrapper" };
 const _hoisted_6$i = { class: "icon-font" };
 const _hoisted_7$d = { class: "tooltip" };
 const _hoisted_8$7 = { class: "bot-buttons-wrapper" };
-const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   __name: "NavBar",
   props: {
     links: {},
@@ -14617,10 +14624,10 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
           role: "button",
           "aria-label": "Toggle Navigation",
           tabindex: "0"
-        }, _hoisted_2$S, 32),
+        }, _hoisted_2$T, 32),
         vue.createElementVNode("div", _hoisted_3$K, [
           vue.createElementVNode("div", _hoisted_4$t, [
-            vue.createElementVNode("div", _hoisted_5$n, [
+            vue.createElementVNode("div", _hoisted_5$o, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a2 = _ctx.links) == null ? void 0 : _a2.call(_ctx), (link) => {
                 return vue.openBlock(), vue.createBlock(_component_RouterLink, {
                   class: "nav-button",
@@ -14644,15 +14651,15 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$_ = {
+const _hoisted_1$$ = {
   key: 0,
   class: "loading"
 };
-const _hoisted_2$R = {
+const _hoisted_2$S = {
   key: 1,
   class: "btn-flex"
 };
-const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   __name: "Btn",
   props: {
     disabled: { type: Boolean, default: false },
@@ -14661,7 +14668,7 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
     color: {},
     theme: {},
     flat: { type: Boolean },
-    border: { type: Boolean },
+    border: { type: Boolean, default: false },
     thin: { type: Boolean },
     type: { default: "button" },
     loading: { type: Boolean, default: false },
@@ -14673,8 +14680,8 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     vue.useCssVars((_ctx) => ({
-      "0bd3bef7": computedBackgroundColor.value,
-      "1b1b6b12": cumputedTextColor.value
+      "0b5510c0": computedBackgroundColor.value,
+      "18db167b": cumputedTextColor.value
     }));
     const slots = vue.useSlots();
     const props2 = __props;
@@ -14732,8 +14739,8 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
         })
       }, {
         default: vue.withCtx(() => [
-          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$_)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$R, [
-            _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
+          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$$)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$S, [
+            _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$X), {
               key: 0,
               icon: _ctx.icon
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -14741,7 +14748,7 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
             !vue.unref(slots)["default"] && _ctx.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               vue.createTextVNode(vue.toDisplayString(_ctx.value), 1)
             ], 64)) : vue.createCommentVNode("", true),
-            props2["icon.end"] ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
+            props2["icon.end"] ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$X), {
               key: 2,
               icon: props2["icon.end"]
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
@@ -14759,11 +14766,11 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-845b751e"]]);
-const _hoisted_1$Z = { class: "tool-bar" };
-const _hoisted_2$Q = { class: "modal-title" };
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-0ca0d3de"]]);
+const _hoisted_1$_ = { class: "tool-bar" };
+const _hoisted_2$R = { class: "modal-title" };
 const _hoisted_3$J = { class: "modal-footer mt-3" };
-const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   __name: "Modal",
   props: {
     side: { type: Boolean },
@@ -14809,7 +14816,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
           onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
           }, ["stop"]))
         }, [
-          vue.createElementVNode("header", _hoisted_1$Z, [
+          vue.createElementVNode("header", _hoisted_1$_, [
             vue.renderSlot(_ctx.$slots, "toolbar"),
             vue.createVNode(vue.unref(Btn), {
               style: vue.normalizeStyle({ float: _ctx.side ? "left" : "right" }),
@@ -14817,7 +14824,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
               icon: "close",
               onClick: closeModal
             }, null, 8, ["style"]),
-            vue.createElementVNode("h3", _hoisted_2$Q, vue.toDisplayString(_ctx.title), 1)
+            vue.createElementVNode("h3", _hoisted_2$R, vue.toDisplayString(_ctx.title), 1)
           ]),
           vue.renderSlot(_ctx.$slots, "default"),
           vue.createElementVNode("footer", _hoisted_3$J, [
@@ -14835,6 +14842,104 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _hoisted_1$Z = { class: "tool-bar" };
+const _hoisted_2$Q = { class: "modal-title" };
+const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+  __name: "ModalBglForm",
+  props: {
+    side: { type: Boolean },
+    title: {},
+    dismissable: { type: Boolean },
+    actions: {},
+    schema: { type: Function },
+    modelValue: {},
+    onSubmit: { type: Function },
+    onDelete: { type: Function }
+  },
+  emits: ["update:isModalVisible", "update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const computedFormSchema = vue.computed(() => {
+      if (typeof props2.schema === "function") {
+        return props2.schema();
+      }
+      return props2.schema;
+    });
+    let isActive = vue.ref(false);
+    const emit2 = __emit;
+    const handleEmit = (value) => {
+      emit2("update:modelValue", value);
+    };
+    const closeModal = () => {
+      isActive.value = false;
+      setTimeout(() => {
+        emit2("update:isModalVisible", false);
+      }, 200);
+    };
+    const runSubmit = async (formData) => {
+      var _a2;
+      try {
+        await ((_a2 = props2.onSubmit) == null ? void 0 : _a2.call(props2, formData));
+        closeModal();
+      } catch (err) {
+        console.error(err);
+      }
+    };
+    const runDelete = () => {
+      var _a2, _b;
+      (_b = props2.onDelete) == null ? void 0 : _b.call(props2, (_a2 = props2.modelValue) == null ? void 0 : _a2.id);
+      closeModal();
+    };
+    const escapeKeyClose = (e3) => (props2 == null ? void 0 : props2.dismissable) && useEscape(e3, () => closeModal());
+    vue.onMounted(() => {
+      setTimeout(() => {
+        isActive.value = true;
+      }, 1);
+      document.addEventListener(
+        "keydown",
+        escapeKeyClose
+      );
+    });
+    vue.onUnmounted(() => {
+      document.removeEventListener(
+        "keydown",
+        escapeKeyClose
+      );
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["bg-dark", { "is-side": _ctx.side, "is-active": vue.unref(isActive) }]),
+        onClick: _cache[1] || (_cache[1] = () => _ctx.dismissable ? closeModal() : ""),
+        onKeydown: vue.withKeys(closeModal, ["esc"])
+      }, [
+        vue.createElementVNode("div", {
+          class: "card modal",
+          onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          vue.createElementVNode("header", _hoisted_1$Z, [
+            vue.renderSlot(_ctx.$slots, "toolbar", {}, void 0, true),
+            vue.createVNode(vue.unref(Btn), {
+              style: vue.normalizeStyle({ float: _ctx.side ? "left" : "right" }),
+              flat: "",
+              icon: "close",
+              onClick: closeModal
+            }, null, 8, ["style"]),
+            vue.createElementVNode("h3", _hoisted_2$Q, vue.toDisplayString(_ctx.title), 1)
+          ]),
+          vue.createVNode(vue.unref(_sfc_main$r), {
+            onDelete: _ctx.onDelete ? runDelete : void 0,
+            modelValue: _ctx.modelValue,
+            "onUpdate:modelValue": handleEmit,
+            onSubmit: runSubmit,
+            schema: computedFormSchema.value
+          }, null, 8, ["onDelete", "modelValue", "schema"])
+        ])
+      ], 34);
+    };
+  }
+});
+const ModalBglForm = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-93c9eab1"]]);
 const _hoisted_1$Y = { class: "dropdown-title" };
 const _hoisted_2$P = { class: "dropdown-body" };
 const _hoisted_3$I = ["onClick"];
@@ -14866,7 +14971,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
       }, [
         vue.createElementVNode("div", _hoisted_1$Y, [
           vue.createTextVNode(vue.toDisplayString(vue.unref(selectedOption) || __props.placeholder) + " ", 1),
-          vue.createVNode(vue.unref(_sfc_main$W), { icon: "keyboard_arrow_down" })
+          vue.createVNode(vue.unref(_sfc_main$X), { icon: "keyboard_arrow_down" })
         ]),
         vue.createElementVNode("div", _hoisted_2$P, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (option2, index2) => {
@@ -14887,7 +14992,7 @@ const _hoisted_3$H = {
   class: "bagel-input search-wrap"
 };
 const _hoisted_4$s = ["placeholder"];
-const _hoisted_5$m = { class: "list-content grid auto-flow-rows align-items-start" };
+const _hoisted_5$n = { class: "list-content grid auto-flow-rows align-items-start" };
 const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   __name: "ListView",
   props: {
@@ -14914,7 +15019,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
             }, null, 40, _hoisted_4$s), [
               [vue.vModelText, searchTerm.value]
             ]),
-            vue.createVNode(vue.unref(_sfc_main$W), {
+            vue.createVNode(vue.unref(_sfc_main$X), {
               class: "txtgray",
               icon: "search"
             })
@@ -14925,7 +15030,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
             onClick: _cache[2] || (_cache[2] = ($event) => emit2("add"))
           })) : vue.createCommentVNode("", true)
         ]),
-        vue.createElementVNode("div", _hoisted_5$m, [
+        vue.createElementVNode("div", _hoisted_5$n, [
           vue.renderSlot(_ctx.$slots, "default")
         ])
       ]);
@@ -14958,17 +15063,17 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$V = { class: "h-100 grid list-view gap-3" };
-const _hoisted_2$M = { class: "card tabs-top" };
-const _hoisted_3$G = { class: "tabs grid auto-flow-columns fit-content" };
-const _hoisted_4$r = ["onClick"];
+const _hoisted_1$V = { class: "card tabs-top" };
+const _hoisted_2$M = { class: "tabs grid auto-flow-columns fit-content" };
+const _hoisted_3$G = ["onClick"];
 const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
   __name: "TabbedLayout",
   props: {
     title: {},
     tabs: {},
     modelValue: {},
-    router: {}
+    router: {},
+    sideTabs: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -14976,32 +15081,38 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     let activeTab = vue.ref();
     const props2 = __props;
     function changeTab(tab) {
-      const { router } = props2;
+      var _a2;
       activeTab.value = tab;
-      void router.push({
-        path: router.currentRoute.value.path,
-        query: { ...router.currentRoute.value.query, t: tab },
-        hash: router.currentRoute.value.hash
-      });
       emit2("update:modelValue", activeTab.value);
+      if (!props2.router)
+        return;
+      void ((_a2 = props2.router) == null ? void 0 : _a2.push({
+        path: props2.router.currentRoute.value.path,
+        query: { ...props2.router.currentRoute.value.query, t: tab },
+        hash: props2.router.currentRoute.value.hash
+      }));
     }
     vue.onMounted(() => {
-      const firstTab = props2.modelValue || props2.router.currentRoute.value.query.t || props2.tabs[0];
+      var _a2;
+      const firstTab = props2.modelValue || ((_a2 = props2.router) == null ? void 0 : _a2.currentRoute.value.query.t) || props2.tabs[0];
       activeTab.value = firstTab;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
-        vue.createElementVNode("div", _hoisted_2$M, [
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["h-100 grid list-view gap-3", { "side-tabs": _ctx.sideTabs }])
+      }, [
+        vue.createElementVNode("div", _hoisted_1$V, [
           vue.renderSlot(_ctx.$slots, "top-section", {}, void 0, true),
-          vue.createElementVNode("div", _hoisted_3$G, [
+          vue.createElementVNode("div", _hoisted_2$M, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabs, (tab) => {
+              var _a2;
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: vue.normalizeClass([{
-                  active: tab === vue.unref(activeTab) || tab === _ctx.router.currentRoute.value.path.split("/").slice(-1)[0]
+                  active: tab === vue.unref(activeTab) || tab === ((_a2 = _ctx.router) == null ? void 0 : _a2.currentRoute.value.path.split("/").slice(-1)[0])
                 }, "tab"]),
                 key: tab,
                 onClick: ($event) => changeTab(tab)
-              }, vue.toDisplayString(tab), 11, _hoisted_4$r);
+              }, vue.toDisplayString(tab), 11, _hoisted_3$G);
             }), 128))
           ])
         ]),
@@ -15013,16 +15124,16 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
             vue.renderSlot(_ctx.$slots, tab, { key: tab }, void 0, true)
           ]);
         }), 128))
-      ]);
+      ], 2);
     };
   }
 });
-const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-3941cced"]]);
+const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-09fce741"]]);
 const _hoisted_1$U = { class: "comments-wrap" };
 const _hoisted_2$L = { class: "comment-list" };
 const _hoisted_3$F = { class: "comment-top" };
-const _hoisted_4$q = { class: "comment-owner" };
-const _hoisted_5$l = { class: "comment-time" };
+const _hoisted_4$r = { class: "comment-owner" };
+const _hoisted_5$m = { class: "comment-time" };
 const _hoisted_6$h = { class: "comment-actions" };
 const _hoisted_7$c = ["innerHTML"];
 const _hoisted_8$6 = { class: "new-comment" };
@@ -15081,22 +15192,22 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
               key: comment.id
             }, [
               vue.createElementVNode("div", _hoisted_3$F, [
-                vue.createElementVNode("div", _hoisted_4$q, vue.toDisplayString(comment.sender.first_name) + " " + vue.toDisplayString(comment.sender.last_name), 1),
-                vue.createElementVNode("div", _hoisted_5$l, vue.toDisplayString(comment.updated_at.split("T")[0]), 1),
+                vue.createElementVNode("div", _hoisted_4$r, vue.toDisplayString(comment.sender.first_name) + " " + vue.toDisplayString(comment.sender.last_name), 1),
+                vue.createElementVNode("div", _hoisted_5$m, vue.toDisplayString(comment.updated_at.split("T")[0]), 1),
                 vue.createElementVNode("div", _hoisted_6$h, [
-                  vue.createVNode(vue.unref(_sfc_main$W), {
+                  vue.createVNode(vue.unref(_sfc_main$X), {
                     size: 1,
                     class: "edit",
                     icon: "edit",
                     onClick: ($event) => vue.isRef(editComment) ? editComment.value = comment : editComment = comment
                   }, null, 8, ["onClick"]),
-                  vue.createVNode(vue.unref(_sfc_main$W), {
+                  vue.createVNode(vue.unref(_sfc_main$X), {
                     size: 1.2,
                     class: "delete",
                     icon: "delete",
                     onClick: ($event) => deleteComment(comment.id)
                   }, null, 8, ["onClick"]),
-                  vue.createVNode(vue.unref(_sfc_main$W), {
+                  vue.createVNode(vue.unref(_sfc_main$X), {
                     size: 1.2,
                     class: "save",
                     icon: "save",
@@ -15104,7 +15215,7 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
                   })
                 ])
               ]),
-              vue.unref(editComment) !== null && ((_c = vue.unref(editComment)) == null ? void 0 : _c.id) === comment.id ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$X), {
+              vue.unref(editComment) !== null && ((_c = vue.unref(editComment)) == null ? void 0 : _c.id) === comment.id ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Y), {
                 key: 0,
                 modelValue: vue.unref(editComment).body_html,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(editComment).body_html = $event),
@@ -15118,7 +15229,7 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
           }), 128))
         ]),
         vue.createElementVNode("div", _hoisted_8$6, [
-          vue.createVNode(vue.unref(_sfc_main$X), {
+          vue.createVNode(vue.unref(_sfc_main$Y), {
             class: "comment-input",
             modelValue: vue.unref(bodyHtml),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(bodyHtml) ? bodyHtml.value = $event : bodyHtml = $event),
@@ -15334,8 +15445,8 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$R = { class: "table-list-wrap h-100" };
 const _hoisted_2$I = { class: "infinite-wrapper" };
 const _hoisted_3$E = { class: "row first-row" };
-const _hoisted_4$p = ["onClick"];
-const _hoisted_5$k = { class: "flex" };
+const _hoisted_4$q = ["onClick"];
+const _hoisted_5$l = { class: "flex" };
 const _hoisted_6$g = ["onClick"];
 const _hoisted_7$b = { key: 1 };
 const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
@@ -15393,18 +15504,18 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
                 key: field.id,
                 onClick: ($event) => sort2(field.id)
               }, [
-                vue.createElementVNode("div", _hoisted_5$k, [
+                vue.createElementVNode("div", _hoisted_5$l, [
                   vue.createTextVNode(vue.toDisplayString((field == null ? void 0 : field.label) || (field == null ? void 0 : field.id)) + " ", 1),
                   vue.createElementVNode("div", {
                     class: vue.normalizeClass(["list-arrows", { sorted: vue.unref(sortField) === field.id }])
                   }, [
-                    vue.createVNode(vue.unref(_sfc_main$W), {
+                    vue.createVNode(vue.unref(_sfc_main$X), {
                       class: vue.normalizeClass({ desc: vue.unref(sortDirection) === "DESC" }),
                       icon: "keyboard_arrow_up"
                     }, null, 8, ["class"])
                   ], 2)
                 ])
-              ], 8, _hoisted_4$p);
+              ], 8, _hoisted_4$q);
             }), 128))
           ]),
           vue.createElementVNode("tbody", {
@@ -15533,8 +15644,8 @@ const _hoisted_1$O = {
 };
 const _hoisted_2$H = { class: "person-card-icon-wrap" };
 const _hoisted_3$D = { class: "person-card-icon" };
-const _hoisted_4$o = { class: "person-card-name txt20" };
-const _hoisted_5$j = { class: "person-card-details-wrap" };
+const _hoisted_4$p = { class: "person-card-name txt20" };
+const _hoisted_5$k = { class: "person-card-details-wrap" };
 const _hoisted_6$f = {
   key: 0,
   class: "person-card-details"
@@ -15598,11 +15709,11 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_2$H, [
           vue.createElementVNode("p", _hoisted_3$D, vue.toDisplayString(vue.unref(initials)(_ctx.person.first_name, _ctx.person.last_name)), 1),
-          vue.createElementVNode("p", _hoisted_4$o, vue.toDisplayString(_ctx.person.first_name) + " " + vue.toDisplayString(_ctx.person.last_name), 1)
+          vue.createElementVNode("p", _hoisted_4$p, vue.toDisplayString(_ctx.person.first_name) + " " + vue.toDisplayString(_ctx.person.last_name), 1)
         ]),
-        vue.createElementVNode("div", _hoisted_5$j, [
+        vue.createElementVNode("div", _hoisted_5$k, [
           ((_a2 = _ctx.person.phone) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$f, [
-            vue.createVNode(vue.unref(_sfc_main$W), { icon: "phone" }),
+            vue.createVNode(vue.unref(_sfc_main$X), { icon: "phone" }),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.person.phone, (phone) => {
               return vue.openBlock(), vue.createElementBlock("p", {
                 key: phone.id
@@ -15610,7 +15721,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
             }), 128))
           ])) : vue.createCommentVNode("", true),
           ((_b = _ctx.person.email) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$a, [
-            vue.createVNode(vue.unref(_sfc_main$W), { icon: "email" }),
+            vue.createVNode(vue.unref(_sfc_main$X), { icon: "email" }),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.person.email, (email) => {
               return vue.openBlock(), vue.createElementBlock("p", {
                 key: email.id
@@ -15618,7 +15729,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
             }), 128))
           ])) : vue.createCommentVNode("", true),
           _ctx.person.date_of_birth || _ctx.person.gender ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$5, [
-            vue.createVNode(vue.unref(_sfc_main$W), { icon: "badge" }),
+            vue.createVNode(vue.unref(_sfc_main$X), { icon: "badge" }),
             _ctx.person.date_of_birth ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_9$3, vue.toDisplayString(_ctx.person.date_of_birth), 1)) : vue.createCommentVNode("", true),
             _ctx.person.gender ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_10$3, vue.toDisplayString(_ctx.person.gender), 1)) : vue.createCommentVNode("", true)
           ])) : vue.createCommentVNode("", true)
@@ -15639,8 +15750,8 @@ const _hoisted_3$C = {
   key: 0,
   class: "data-row"
 };
-const _hoisted_4$n = { class: "key" };
-const _hoisted_5$i = { key: 1 };
+const _hoisted_4$o = { class: "key" };
+const _hoisted_5$j = { key: 1 };
 const _hoisted_6$e = { class: "key" };
 const _hoisted_7$9 = { class: "vlue" };
 const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
@@ -15672,7 +15783,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
             key: field.id
           }, [
             (field["v-if"] ? field["v-if"](itemData.value[field.id], itemData.value) : true) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$C, [
-              vue.createElementVNode("div", _hoisted_4$n, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1),
+              vue.createElementVNode("div", _hoisted_4$o, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1),
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(field.$el || "div"), vue.mergeProps({
                 class: "vlue",
                 modelValue: itemData.value[field.id],
@@ -15692,7 +15803,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
             ])) : vue.createCommentVNode("", true)
           ], 64);
         }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$i, [
+        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$j, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Object.entries(itemData.value).filter(
             ([key]) => !keysToIgnore.includes(key)
           ), ([key, value]) => {
@@ -15718,11 +15829,11 @@ const _hoisted_2$F = {
   class: "group-wrap"
 };
 const _hoisted_3$B = { class: "group-title" };
-const _hoisted_4$m = {
+const _hoisted_4$n = {
   key: 1,
   class: "bar-wrap"
 };
-const _hoisted_5$h = { class: "bar-txt" };
+const _hoisted_5$i = { class: "bar-txt" };
 const _hoisted_6$d = { class: "factor" };
 const _hoisted_7$8 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ vue.createElementVNode("div", { class: "red-bar" }, null, -1));
 const _hoisted_8$4 = { class: "bar-lines" };
@@ -15804,7 +15915,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
                   }, null, 4)) : vue.createCommentVNode("", true)
                 ]);
               }), 128))
-            ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$m, [
+            ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$n, [
               vue.createElementVNode("div", {
                 class: "bar",
                 style: vue.normalizeStyle({ height: loaded.value ? `${percent(item.value)}%` : "0" })
@@ -15814,7 +15925,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
                 class: "bar compare",
                 style: vue.normalizeStyle({ height: loaded.value ? `${percent(item.compareValue)}%` : "0" })
               }, null, 4)) : vue.createCommentVNode("", true),
-              vue.createElementVNode("p", _hoisted_5$h, vue.toDisplayString(item.title), 1)
+              vue.createElementVNode("p", _hoisted_5$i, vue.toDisplayString(item.title), 1)
             ]))
           ]);
         }), 128)),
@@ -17122,7 +17233,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
           [vue.vModelCheckbox, vue.unref(val)]
         ]),
         vue.createElementVNode("span", null, [
-          vue.createVNode(vue.unref(_sfc_main$W), { icon: "check" })
+          vue.createVNode(vue.unref(_sfc_main$X), { icon: "check" })
         ])
       ]);
     };
@@ -17135,8 +17246,8 @@ const _hoisted_3$A = {
   key: 0,
   class: "bglform-contact-confirm"
 };
-const _hoisted_4$l = { class: "txt14" };
-const _hoisted_5$g = ["onUpdate:modelValue", "placeholder"];
+const _hoisted_4$m = { class: "txt14" };
+const _hoisted_5$h = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_6$c = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_7$7 = ["onUpdate:modelValue", "placeholder"];
 const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
@@ -17201,7 +17312,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
               key: i3
             }, [
               vue.unref(deleteCandidate) === i3 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$A, [
-                vue.createElementVNode("p", _hoisted_4$l, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
+                vue.createElementVNode("p", _hoisted_4$m, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
                 vue.createVNode(vue.unref(Btn), {
                   thin: "",
                   color: "red",
@@ -17237,7 +17348,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
                 "onUpdate:modelValue": ($event) => contact.label = $event,
                 type: "text",
                 placeholder: (_b = formPlaceholders.value) == null ? void 0 : _b.label
-              }, null, 8, _hoisted_5$g), [
+              }, null, 8, _hoisted_5$h), [
                 [vue.vModelText, contact.label]
               ]),
               ((_c = _ctx.context) == null ? void 0 : _c.id) === "email" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
@@ -17291,8 +17402,8 @@ const _hoisted_3$z = {
   key: 0,
   class: "bglform-contact-confirm"
 };
-const _hoisted_4$k = { class: "txt14" };
-const _hoisted_5$f = ["onUpdate:modelValue", "placeholder"];
+const _hoisted_4$l = { class: "txt14" };
+const _hoisted_5$g = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_6$b = { class: "bglform-contact-address" };
 const _hoisted_7$6 = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_8$3 = { class: "bglform-contact-address-flex" };
@@ -17368,7 +17479,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
               key: i3
             }, [
               vue.unref(deleteCandidate) === i3 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$z, [
-                vue.createElementVNode("p", _hoisted_4$k, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
+                vue.createElementVNode("p", _hoisted_4$l, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
                 vue.createVNode(vue.unref(Btn), {
                   thin: "",
                   color: "red",
@@ -17404,7 +17515,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
                 "onUpdate:modelValue": ($event) => address.label = $event,
                 type: "text",
                 placeholder: (_b = formPlaceholders.value) == null ? void 0 : _b.label
-              }, null, 8, _hoisted_5$f), [
+              }, null, 8, _hoisted_5$g), [
                 [vue.vModelText, address.label]
               ]),
               vue.createElementVNode("div", _hoisted_6$b, [
@@ -17475,8 +17586,8 @@ const _hoisted_3$y = {
   key: 0,
   class: "bglform-contact-confirm"
 };
-const _hoisted_4$j = { class: "txt14" };
-const _hoisted_5$e = ["onUpdate:modelValue", "placeholder"];
+const _hoisted_4$k = { class: "txt14" };
+const _hoisted_5$f = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_6$a = { class: "bglform-contact-address" };
 const _hoisted_7$5 = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_8$2 = { class: "bglform-contact-address-flex" };
@@ -17551,7 +17662,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
               key: i3
             }, [
               vue.unref(deleteCandidate) === i3 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$y, [
-                vue.createElementVNode("p", _hoisted_4$j, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
+                vue.createElementVNode("p", _hoisted_4$k, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
                 vue.createVNode(vue.unref(Btn), {
                   thin: "",
                   color: "red",
@@ -17587,7 +17698,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
                 "onUpdate:modelValue": ($event) => bank_account.label = $event,
                 type: "text",
                 placeholder: (_b = formPlaceholders.value) == null ? void 0 : _b.label
-              }, null, 8, _hoisted_5$e), [
+              }, null, 8, _hoisted_5$f), [
                 [vue.vModelText, bank_account.label]
               ]),
               vue.createElementVNode("div", _hoisted_6$a, [
@@ -17737,7 +17848,7 @@ const _withScopeId$1 = (n) => (vue.pushScopeId("data-v-d0543d4b"), n = n(), vue.
 const _hoisted_1$G = ["title"];
 const _hoisted_2$B = { class: "switch" };
 const _hoisted_3$x = ["id"];
-const _hoisted_4$i = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
+const _hoisted_4$j = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
 const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   __name: "Toggle",
   props: {
@@ -17774,7 +17885,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
           }, null, 40, _hoisted_3$x), [
             [vue.vModelCheckbox, vue.unref(inputVal)]
           ]),
-          _hoisted_4$i
+          _hoisted_4$j
         ])
       ], 10, _hoisted_1$G);
     };
@@ -17787,8 +17898,8 @@ const _hoisted_2$A = {
   class: "img-label"
 };
 const _hoisted_3$w = { class: "uploading-wrap" };
-const _hoisted_4$h = { class: "load-file-bar" };
-const _hoisted_5$d = ["src", "alt"];
+const _hoisted_4$i = { class: "load-file-bar" };
+const _hoisted_5$e = ["src", "alt"];
 const _hoisted_6$9 = { class: "flex" };
 const _hoisted_7$4 = {
   key: 0,
@@ -17965,14 +18076,14 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
                 class: vue.normalizeClass({ uploading: item.uploading }),
                 key: index2
               }, [
-                vue.createElementVNode("div", _hoisted_4$h, [
+                vue.createElementVNode("div", _hoisted_4$i, [
                   isImg(item) ? (vue.openBlock(), vue.createElementBlock("img", {
                     key: 0,
                     width: "40",
                     src: item.dataUrl,
                     alt: item.name,
                     style: { "margin-inline-end": "10px" }
-                  }, null, 8, _hoisted_5$d)) : vue.createCommentVNode("", true),
+                  }, null, 8, _hoisted_5$e)) : vue.createCommentVNode("", true),
                   vue.createElementVNode("p", null, vue.toDisplayString(item.name), 1),
                   vue.createElementVNode("div", _hoisted_6$9, [
                     vue.createElementVNode("div", {
@@ -17980,7 +18091,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
                       style: vue.normalizeStyle([`--p:${item.progress}`, { "--b": "2px" }])
                     }, [
                       item.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$4, vue.toDisplayString(`${item.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
-                      vue.createVNode(vue.unref(_sfc_main$W), {
+                      vue.createVNode(vue.unref(_sfc_main$X), {
                         class: "success",
                         icon: "check"
                       })
@@ -18016,8 +18127,8 @@ const _hoisted_1$E = {
 };
 const _hoisted_2$z = { class: "person-card-icon-wrap" };
 const _hoisted_3$v = { class: "person-card-icon" };
-const _hoisted_4$g = { class: "person-card-name txt20" };
-const _hoisted_5$c = { class: "person-card-details-wrap" };
+const _hoisted_4$h = { class: "person-card-name txt20" };
+const _hoisted_5$d = { class: "person-card-details-wrap" };
 const _hoisted_6$8 = {
   key: 0,
   class: "person-card-details"
@@ -18083,11 +18194,11 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_2$z, [
           vue.createElementVNode("p", _hoisted_3$v, vue.toDisplayString(vue.unref(initials)(person.value.first_name, person.value.last_name)), 1),
-          vue.createElementVNode("p", _hoisted_4$g, vue.toDisplayString(person.value.first_name) + " " + vue.toDisplayString(person.value.last_name), 1)
+          vue.createElementVNode("p", _hoisted_4$h, vue.toDisplayString(person.value.first_name) + " " + vue.toDisplayString(person.value.last_name), 1)
         ]),
-        vue.createElementVNode("div", _hoisted_5$c, [
+        vue.createElementVNode("div", _hoisted_5$d, [
           ((_a2 = person.value.phone) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$8, [
-            vue.createVNode(vue.unref(_sfc_main$W), { icon: "phone" }),
+            vue.createVNode(vue.unref(_sfc_main$X), { icon: "phone" }),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(person.value.phone, (phone) => {
               return vue.openBlock(), vue.createElementBlock("p", {
                 key: phone.id
@@ -18095,7 +18206,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
             }), 128))
           ])) : vue.createCommentVNode("", true),
           ((_b = person.value.email) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$3, [
-            vue.createVNode(vue.unref(_sfc_main$W), { icon: "email" }),
+            vue.createVNode(vue.unref(_sfc_main$X), { icon: "email" }),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(person.value.email, (email) => {
               return vue.openBlock(), vue.createElementBlock("p", {
                 key: email.id
@@ -18103,7 +18214,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
             }), 128))
           ])) : vue.createCommentVNode("", true),
           person.value.date_of_birth || person.value.gender ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
-            vue.createVNode(vue.unref(_sfc_main$W), { icon: "badge" }),
+            vue.createVNode(vue.unref(_sfc_main$X), { icon: "badge" }),
             person.value.date_of_birth ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_9, vue.toDisplayString(person.value.date_of_birth), 1)) : vue.createCommentVNode("", true),
             person.value.gender ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_10, vue.toDisplayString(person.value.gender), 1)) : vue.createCommentVNode("", true)
           ])) : vue.createCommentVNode("", true)
@@ -18245,7 +18356,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
         }, {
           default: vue.withCtx(() => [
             vue.createTextVNode(vue.toDisplayString(content.value) + " ", 1),
-            vue.createVNode(vue.unref(_sfc_main$W), { icon: "arrow_forward" })
+            vue.createVNode(vue.unref(_sfc_main$X), { icon: "arrow_forward" })
           ]),
           _: 1
         })) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$D, vue.toDisplayString(content.value), 1))
@@ -18271,8 +18382,8 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$C = { class: "bagel-input" };
 const _hoisted_2$y = ["for"];
 const _hoisted_3$u = ["checked"];
-const _hoisted_4$f = ["name", "type", "value"];
-const _hoisted_5$b = ["name", "type", "value"];
+const _hoisted_4$g = ["name", "type", "value"];
+const _hoisted_5$c = ["name", "type", "value"];
 const _hoisted_6$7 = ["name", "type", "value"];
 const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   __name: "PlainInputField",
@@ -18308,7 +18419,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("label", {
           for: vue.unref(formatString)(_ctx.name, "pascal")
         }, [
-          vue.createVNode(_sfc_main$Y, {
+          vue.createVNode(_sfc_main$Z, {
             input: vue.unref(formatString)(_ctx.name, "titleCase")
           }, null, 8, ["input"])
         ], 8, _hoisted_2$y),
@@ -18329,7 +18440,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
           value: _ctx.modelValue,
           class: "ctl",
           onInput: handleInput
-        }, null, 40, _hoisted_4$f)) : _ctx.type === "text" ? (vue.openBlock(), vue.createElementBlock("input", {
+        }, null, 40, _hoisted_4$g)) : _ctx.type === "text" ? (vue.openBlock(), vue.createElementBlock("input", {
           key: 2,
           ref_key: "el",
           ref: el2,
@@ -18338,7 +18449,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
           value: _ctx.modelValue,
           class: "ctl",
           onInput: handleInput
-        }, null, 40, _hoisted_5$b)) : _ctx.type === "textarea" ? (vue.openBlock(), vue.createElementBlock("textarea", {
+        }, null, 40, _hoisted_5$c)) : _ctx.type === "textarea" ? (vue.openBlock(), vue.createElementBlock("textarea", {
           key: 3,
           ref_key: "el",
           ref: el2,
@@ -18349,7 +18460,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
           onInput: handleInput
         }, null, 40, _hoisted_6$7)) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", null, [
-          vue.createVNode(_sfc_main$Y, { input: _ctx.errorMessage }, null, 8, ["input"])
+          vue.createVNode(_sfc_main$Z, { input: _ctx.errorMessage }, null, 8, ["input"])
         ])
       ]);
     };
@@ -18456,6 +18567,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
         required: _ctx.field.required
       }, vue.unref(bindAttrs)(((_a2 = _ctx.field) == null ? void 0 : _a2.attrs) || {}, props2.modelValue[_ctx.field.id || ""], props2.modelValue), {
         label: _ctx.field.label,
+        id: _ctx.field.id,
         placeholder: _ctx.field.placeholder || _ctx.field.label,
         modelValue: props2.modelValue[_ctx.field.id || ""],
         "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => emits("update:modelValue", $event))
@@ -18471,7 +18583,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 16, ["required", "label", "placeholder", "modelValue"]);
+      }, 16, ["required", "label", "id", "placeholder", "modelValue"]);
     };
   }
 });
@@ -18479,8 +18591,8 @@ const _withScopeId = (n) => (vue.pushScopeId("data-v-0dacba34"), n = n(), vue.po
 const _hoisted_1$A = ["title"];
 const _hoisted_2$x = ["for"];
 const _hoisted_3$t = { class: "switch" };
-const _hoisted_4$e = ["id"];
-const _hoisted_5$a = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
+const _hoisted_4$f = ["id"];
+const _hoisted_5$b = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
 const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   __name: "CheckInput",
   props: {
@@ -18521,10 +18633,10 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
             type: "checkbox",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputVal.value = $event),
             class: vue.normalizeClass({ "no-edit": !_ctx.editMode })
-          }, null, 10, _hoisted_4$e), [
+          }, null, 10, _hoisted_4$f), [
             [vue.vModelCheckbox, inputVal.value]
           ]),
-          _hoisted_5$a
+          _hoisted_5$b
         ])
       ], 10, _hoisted_1$A);
     };
@@ -18534,8 +18646,8 @@ const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data
 const _hoisted_1$z = ["title"];
 const _hoisted_2$w = { key: 0 };
 const _hoisted_3$s = { class: "flex gap-3" };
-const _hoisted_4$d = ["value", "placeholder"];
-const _hoisted_5$9 = { class: "currency" };
+const _hoisted_4$e = ["value", "placeholder"];
+const _hoisted_5$a = { class: "currency" };
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "CurrencyInput",
   props: {
@@ -18645,8 +18757,8 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
             onInput: handleInput,
             placeholder: _ctx.placeholder,
             class: vue.normalizeClass({ "no-edit": !_ctx.editMode })
-          }, null, 42, _hoisted_4$d),
-          vue.createElementVNode("p", _hoisted_5$9, vue.toDisplayString(((_a2 = currencies.find((c2) => c2.symbol === _ctx.field.currency)) == null ? void 0 : _a2.character) || _ctx.field.currency), 1)
+          }, null, 42, _hoisted_4$e),
+          vue.createElementVNode("p", _hoisted_5$a, vue.toDisplayString(((_a2 = currencies.find((c2) => c2.symbol === _ctx.field.currency)) == null ? void 0 : _a2.character) || _ctx.field.currency), 1)
         ])
       ], 10, _hoisted_1$z);
     };
@@ -18911,8 +19023,8 @@ const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-
 const _hoisted_1$s = ["title"];
 const _hoisted_2$p = { key: 0 };
 const _hoisted_3$l = ["disabled"];
-const _hoisted_4$c = ["onClick"];
-const _hoisted_5$8 = {
+const _hoisted_4$d = ["onClick"];
+const _hoisted_5$9 = {
   key: 0,
   class: "option-label"
 };
@@ -19077,12 +19189,12 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                   key: vue.unref(formatString)(option2.value, "pascal"),
                   onClick: vue.withModifiers(($event) => handleSelect(option2), ["stop"])
                 }, [
-                  option2.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$8, [
+                  option2.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$9, [
                     vue.createTextVNode(vue.toDisplayString(option2.label), 1),
                     vue.createElementVNode("span", null, "ID: " + vue.toDisplayString(option2.value), 1)
                   ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$6, " ID: " + vue.toDisplayString(option2.value), 1)),
                   vue.createElementVNode("div", _hoisted_7$2, vue.toDisplayString(option2.description), 1)
-                ], 8, _hoisted_4$c);
+                ], 8, _hoisted_4$d);
               }), 128))
             ], 2)
           ]))
@@ -19095,7 +19207,7 @@ const LinkField = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-
 const _hoisted_1$r = ["title"];
 const _hoisted_2$o = { key: 0 };
 const _hoisted_3$k = { class: "password-input-wrap" };
-const _hoisted_4$b = ["value", "type", "placeholder"];
+const _hoisted_4$c = ["value", "type", "placeholder"];
 const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "PasswordInput",
   props: {
@@ -19140,7 +19252,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
             onInput: handleInput,
             placeholder: _ctx.placeholder,
             class: vue.normalizeClass({ "no-edit": !_ctx.editMode })
-          }, null, 42, _hoisted_4$b),
+          }, null, 42, _hoisted_4$c),
           vue.createElementVNode("div", {
             class: "icon-font password-icon",
             onMousedown: toggleInputType
@@ -19198,7 +19310,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
             [vue.vModelDynamic, inputVal.value]
           ])
         ], 8, _hoisted_2$n),
-        vue.createVNode(vue.unref(_sfc_main$W), {
+        vue.createVNode(vue.unref(_sfc_main$X), {
           onClick: showPassword,
           icon: vue.unref(seePassword) ? "visibility" : "visibility_off"
         }, null, 8, ["icon"])
@@ -19347,7 +19459,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
           for: "label",
           class: vue.normalizeClass({ active: showList.value })
         }, [
-          vue.createVNode(vue.unref(_sfc_main$Y), { input: _ctx.label }, null, 8, ["input"])
+          vue.createVNode(vue.unref(_sfc_main$Z), { input: _ctx.label }, null, 8, ["input"])
         ], 2)) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["custom-select", { "open-select": showList.value && _ctx.editMode }]),
@@ -19359,7 +19471,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass(["input", { active: showList.value }]),
             name: "select-input"
           }, [
-            vue.createVNode(vue.unref(_sfc_main$Y), { input: displayValue.value }, null, 8, ["input"])
+            vue.createVNode(vue.unref(_sfc_main$Z), { input: displayValue.value }, null, 8, ["input"])
           ], 2),
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "#app" }, [
             vue.createElementVNode("div", {
@@ -19372,7 +19484,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
                   key: option2.value,
                   onClick: ($event) => handleSelect(option2)
                 }, [
-                  vue.createVNode(vue.unref(_sfc_main$Y), {
+                  vue.createVNode(vue.unref(_sfc_main$Z), {
                     input: option2.label
                   }, null, 8, ["input"])
                 ], 8, _hoisted_2$l);
@@ -21950,8 +22062,8 @@ const VueDraggableNext = vue.defineComponent({
 const _hoisted_1$m = ["title"];
 const _hoisted_2$j = { class: "bagel-input" };
 const _hoisted_3$h = { class: "table-side-scroll" };
-const _hoisted_4$a = { class: "table-header" };
-const _hoisted_5$7 = { class: "table-reorder" };
+const _hoisted_4$b = { class: "table-header" };
+const _hoisted_5$8 = { class: "table-reorder" };
 const _hoisted_6$5 = { class: "table-action" };
 const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "TableField",
@@ -22022,7 +22134,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("label", null, vue.toDisplayString((_a2 = vue.unref(fieldMeta)) == null ? void 0 : _a2.label), 1)
         ]),
         vue.createElementVNode("div", _hoisted_3$h, [
-          vue.createElementVNode("div", _hoisted_4$a, [
+          vue.createElementVNode("div", _hoisted_4$b, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_b = vue.unref(entityMeta)) == null ? void 0 : _b.fields, (field) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: vue.normalizeClass(["header-col", vue.unref(formatString)(field.fieldtype, "pascal")]),
@@ -22049,7 +22161,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                       class: "flex table-row",
                       key: row.id
                     }, [
-                      vue.createElementVNode("div", _hoisted_5$7, [
+                      vue.createElementVNode("div", _hoisted_5$8, [
                         vue.createVNode(_sfc_main$t, { icon: "more_vert" })
                       ]),
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a3 = vue.unref(entityMeta)) == null ? void 0 : _a3.fields, (field) => {
@@ -22146,7 +22258,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$k = ["title"];
 const _hoisted_2$h = ["for"];
 const _hoisted_3$f = ["autocomplete", "id", "type", "placeholder", "disabled", "required", "pattern"];
-const _hoisted_4$9 = ["id", "type", "rows", "placeholder", "disabled", "required", "pattern"];
+const _hoisted_4$a = ["id", "type", "rows", "placeholder", "disabled", "required", "pattern"];
 const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "TextInput",
   props: {
@@ -22253,16 +22365,16 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
             disabled: !vue.unref(editMode),
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs, { onDblclick: toggleEditAction }), null, 16, _hoisted_4$9)), [
+          }, _ctx.nativeInputAttrs, { onDblclick: toggleEditAction }), null, 16, _hoisted_4$a)), [
             [vue.vModelText, vue.unref(inputVal)]
           ])
         ], 8, _hoisted_2$h),
-        _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
+        _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$X), {
           key: 0,
           class: "iconStart",
           icon: _ctx.iconStart
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-        _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
+        _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$X), {
           key: 1,
           icon: _ctx.icon
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -22285,7 +22397,7 @@ const _hoisted_3$e = {
   key: 1,
   class: "character-limit"
 };
-const _hoisted_4$8 = ["value"];
+const _hoisted_4$9 = ["value"];
 const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "TextArea",
   props: {
@@ -22312,14 +22424,14 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         title: _ctx.description
       }, [
         _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$g, [
-          vue.createVNode(vue.unref(_sfc_main$Y), { input: _ctx.label }, null, 8, ["input"])
+          vue.createVNode(vue.unref(_sfc_main$Z), { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         _ctx.showCharacterLimit ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$e, vue.toDisplayString((_a2 = _ctx.modelValue) == null ? void 0 : _a2.length) + " " + vue.toDisplayString(((_b = _ctx.nativeInputAttrs) == null ? void 0 : _b.maxlength) ? `/${_ctx.nativeInputAttrs.maxlength}` : ""), 1)) : vue.createCommentVNode("", true),
         vue.createElementVNode("textarea", vue.mergeProps({
           value: _ctx.modelValue,
           onInput: handleInput,
           class: { "no-edit": !_ctx.editMode }
-        }, _ctx.nativeInputAttrs), null, 16, _hoisted_4$8)
+        }, _ctx.nativeInputAttrs), null, 16, _hoisted_4$9)
       ], 10, _hoisted_1$j);
     };
   }
@@ -22376,7 +22488,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$h = { key: 0 };
 const _hoisted_2$e = ["disabled"];
 const _hoisted_3$c = { class: "custom-select-drop" };
-const _hoisted_4$7 = ["onClick"];
+const _hoisted_4$8 = ["onClick"];
 const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "DynamicLinkField",
   props: {
@@ -22477,7 +22589,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: vue.unref(formatString)(item2.value, "pascal"),
                 onClick: vue.withModifiers(($event) => handleSelect(item2), ["stop"])
-              }, vue.toDisplayString(_ctx.useId || _ctx.entity === "Entity" ? item2.value : item2.label || item2.description || item2.value), 9, _hoisted_4$7);
+              }, vue.toDisplayString(_ctx.useId || _ctx.entity === "Entity" ? item2.value : item2.label || item2.description || item2.value), 9, _hoisted_4$8);
             }), 128))
           ])
         ], 2)
@@ -31925,8 +32037,8 @@ const _hoisted_3$a = {
   key: 0,
   class: "time-wrap"
 };
-const _hoisted_4$6 = ["id", "name", "value"];
-const _hoisted_5$6 = ["for"];
+const _hoisted_4$7 = ["id", "name", "value"];
+const _hoisted_5$7 = ["for"];
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePicker",
   props: {
@@ -31968,12 +32080,12 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
                 name: _ctx.name,
                 value: hr2,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedHour.value = $event)
-              }, null, 8, _hoisted_4$6), [
+              }, null, 8, _hoisted_4$7), [
                 [vue.vModelRadio, selectedHour.value]
               ]),
               vue.createElementVNode("label", {
                 for: `${hr2}_${_ctx.name}`
-              }, vue.toDisplayString(hr2), 9, _hoisted_5$6)
+              }, vue.toDisplayString(hr2), 9, _hoisted_5$7)
             ], 64);
           }), 128))
         ])) : vue.createCommentVNode("", true)
@@ -31981,23 +32093,26 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$e = { class: "flex gap-2 flex-wrap" };
-const _hoisted_2$b = ["id", "name", "value", "checked"];
-const _hoisted_3$9 = ["for"];
+const _hoisted_1$e = { class: "bagel-input" };
+const _hoisted_2$b = { class: "pb-025" };
+const _hoisted_3$9 = { class: "flex gap-2 flex-wrap" };
+const _hoisted_4$6 = ["id", "name", "value", "checked"];
+const _hoisted_5$6 = ["for"];
 const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
     stringOptions: {},
     modelValue: {},
-    name: {}
+    id: {},
+    label: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const emits = __emit;
     const props2 = __props;
     const cumputedOptions = vue.computed(() => props2.options || props2.stringOptions.map((v) => ({
-      id: v,
+      optioId: v,
       label: v,
       value: v
     })));
@@ -32023,27 +32138,30 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(cumputedOptions.value, ({ id, label: label2, value }, index2) => {
-          return vue.openBlock(), vue.createElementBlock("div", {
-            class: "radio-pill",
-            key: index2
-          }, [
-            vue.createElementVNode("input", {
-              type: "radio",
-              id,
-              name: _ctx.name,
-              value,
-              checked: vue.unref(selectedValue) === value,
-              onChange: handleSelect
-            }, null, 40, _hoisted_2$b),
-            vue.createElementVNode("label", { for: id }, vue.toDisplayString(label2), 9, _hoisted_3$9)
-          ]);
-        }), 128))
+        vue.createElementVNode("label", _hoisted_2$b, vue.toDisplayString(_ctx.label), 1),
+        vue.createElementVNode("div", _hoisted_3$9, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(cumputedOptions.value, ({ optioId, label: label2, value }, index2) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              class: "radio-pill",
+              key: index2
+            }, [
+              vue.createElementVNode("input", {
+                type: "radio",
+                id: optioId,
+                name: _ctx.id,
+                value,
+                checked: vue.unref(selectedValue) === value,
+                onChange: handleSelect
+              }, null, 40, _hoisted_4$6),
+              vue.createElementVNode("label", { for: optioId }, vue.toDisplayString(label2), 9, _hoisted_5$6)
+            ]);
+          }), 128))
+        ])
       ]);
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-97e3ba8c"]]);
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-15351d79"]]);
 const _hoisted_1$d = { class: "bagel-input" };
 const _hoisted_2$a = { key: 0 };
 const _hoisted_3$8 = { class: "imagePreviewWrap" };
@@ -38640,6 +38758,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
 });
 const MsgTemplate = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7031e613"]]);
 exports.AddressInput = AddressInput;
+exports.BagelForm = _sfc_main$r;
 exports.BagelVue = BagelVue;
 exports.BankDetailsInput = BankDetailsInput;
 exports.BarChart = BarChart;
@@ -38669,18 +38788,19 @@ exports.FormSchema = _sfc_main$L;
 exports.IntInput = _sfc_main$j;
 exports.ItemRef = _sfc_main$u;
 exports.JSONInput = JSONInput;
-exports.LangText = _sfc_main$Y;
+exports.LangText = _sfc_main$Z;
 exports.Lineart = _sfc_main$1;
 exports.LinkField = LinkField;
 exports.ListItem = _sfc_main$Q;
 exports.ListView = _sfc_main$R;
-exports.MaterialIcon = _sfc_main$W;
+exports.MaterialIcon = _sfc_main$X;
 exports.MiscFieldsInput = MiscFieldsInput;
-exports.Modal = _sfc_main$T;
+exports.Modal = _sfc_main$U;
+exports.ModalBglForm = ModalBglForm;
 exports.ModalForm = ModalForm;
 exports.ModalPlugin = ModalPlugin;
 exports.MsgTemplate = MsgTemplate;
-exports.NavBar = _sfc_main$V;
+exports.NavBar = _sfc_main$W;
 exports.PageTitle = _sfc_main$N;
 exports.Password = Password;
 exports.PasswordInput = PasswordInput;
@@ -38688,7 +38808,7 @@ exports.PersonPreview = _sfc_main$G;
 exports.PersonPreviewInput = PersonPreviewInput;
 exports.PlainInputField = _sfc_main$s;
 exports.PlainText = PlainText;
-exports.RTXEditor = _sfc_main$X;
+exports.RTXEditor = _sfc_main$Y;
 exports.RadioPillsInput = RadioPillsInput;
 exports.ReadOnlyInput = ReadOnlyInput;
 exports.RichTextEditor = RichTextEditor;