@bagelink/vue 0.0.363 → 0.0.378

package/dist/index.cjs

@@ -4570,7 +4570,10 @@ var __publicField = (obj, key, value) => {
 };
 const axios = axios$1.create({
   // withCredentials to true to send cookies with requests
-  withCredentials: true
+  headers: {
+    "Allow-Control-Allow-Origin": "*",
+    withCredentials: true
+  }
 });
 class DataRequest {
   constructor(table, bagel) {
@@ -4586,7 +4589,7 @@ class DataRequest {
     if (!this.data_table)
       throw new Error("Data table not set");
     const { data: data2 } = await axios.post(
-      `${this.bagel.host}/data/${this.data_table}`,
+      `/data/${this.data_table}`,
       item
     );
     return data2;
@@ -4600,7 +4603,7 @@ class DataRequest {
     if (!this.data_table)
       throw new Error("Data table not set");
     const filterStr = Object.keys(this._filter).length ? `?filter={${Object.entries(this._filter).map(([k2, v2]) => `${k2}:${v2}`).join(",")}}` : "";
-    const url = `${this.bagel.host}/data/${this.data_table}${this.itemID ? `/${this.itemID}` : ""}${filterStr}`;
+    const url = `/data/${this.data_table}${this.itemID ? `/${this.itemID}` : ""}${filterStr}`;
     try {
       const { data: data2 } = await axios.get(url);
       return data2;
@@ -4618,18 +4621,18 @@ class DataRequest {
     if (!this.data_table)
       throw new Error("Data table not set");
     const { data: data2 } = await axios.delete(
-      `${this.bagel.host}/data/${this.data_table}/${this.itemID}`
+      `/data/${this.data_table}/${this.itemID}`
     );
     return data2;
   }
   async put(updatedItem) {
-    const { data_table, itemID, bagel } = this;
+    const { data_table, itemID } = this;
     if (!data_table)
       throw new Error("Data table not set");
     if (!itemID)
       throw new Error("Item ID not set");
     const { data: data2 } = await axios.put(
-      `${bagel.host}/data/${data_table}/${itemID}`,
+      `/data/${data_table}/${itemID}`,
       updatedItem
     );
     return data2;
@@ -4678,7 +4681,7 @@ class BagelAuth {
     formData.append("username", (user == null ? void 0 : user.email) || "");
     formData.append("password", (user == null ? void 0 : user.password) || "");
     try {
-      await axios.post(`${this.bagel.host}/auth/cookie/login`, formData, {
+      await axios.post("/auth/cookie/login", formData, {
         headers: {
           "Content-Type": "multipart/form-data",
           withCredentials: true
@@ -4692,7 +4695,7 @@ class BagelAuth {
   async logout() {
     var _a2, _b;
     try {
-      await axios.post(`${this.bagel.host}/auth/cookie/logout`);
+      await axios.post("/auth/cookie/logout");
     } catch (err) {
       (_b = (_a2 = this.bagel).onError) == null ? void 0 : _b.call(_a2, err);
       console.log(err);
@@ -4700,12 +4703,12 @@ class BagelAuth {
     this.user = null;
   }
   async acceptInvite(token, user) {
-    await axios.post(`${this.bagel.host}/auth/accept-invite/${token}`, user);
+    await axios.post(`/auth/accept-invite/${token}`, user);
     await this.login(user);
   }
   async register(user, errors) {
     try {
-      await axios.post(`${this.bagel.host}/auth/register`, user);
+      await axios.post("/auth/register", user);
       return this.login(user);
     } catch (err) {
       console.error(err);
@@ -4721,7 +4724,8 @@ class Bagel {
     __publicField(this, "onError");
     __publicField(this, "read_table", null);
     __publicField(this, "auth", new BagelAuth(this));
-    this.host = host;
+    this.host = host.replace(/\/$/, "");
+    axios.defaults.baseURL = this.host;
     this.onError = onError;
   }
   data(table) {
@@ -4736,7 +4740,7 @@ class Bagel {
       const queryParams = Object.entries(query).map(([key, value]) => `${key}=${value}`).join("&");
       endpoint = `${endpoint}?${queryParams}`;
     }
-    return axios.get(`${this.host}/api/${endpoint}`).then(({ data: data2 }) => data2);
+    return axios.get(`/api/${endpoint}`).then(({ data: data2 }) => data2);
   }
   async get(endpoint, query) {
     endpoint = this._endpointCleaner(endpoint);
@@ -4747,7 +4751,7 @@ class Bagel {
       if (queryParams)
         endpoint = `${endpoint}?${queryParams}`;
     }
-    const url = `${this.host}/${endpoint}`;
+    const url = `/${endpoint}`;
     return axios.get(url).then(({ data: data2 }) => data2).catch((err) => {
       var _a2;
       (_a2 = this.onError) == null ? void 0 : _a2.call(this, err);
@@ -4756,7 +4760,7 @@ class Bagel {
   }
   async delete(endpoint) {
     endpoint = this._endpointCleaner(endpoint);
-    return axios.delete(`${this.host}/${endpoint}`).then(({ data: data2 }) => data2).catch((err) => {
+    return axios.delete(`/${endpoint}`).then(({ data: data2 }) => data2).catch((err) => {
       var _a2;
       (_a2 = this.onError) == null ? void 0 : _a2.call(this, err);
       throw err;
@@ -4764,7 +4768,7 @@ class Bagel {
   }
   async put(endpoint, payload) {
     endpoint = this._endpointCleaner(endpoint);
-    return axios.put(`${this.host}/${endpoint}`, payload).then(({ data: data2 }) => data2).catch((err) => {
+    return axios.put(`/${endpoint}`, payload).then(({ data: data2 }) => data2).catch((err) => {
       var _a2;
       (_a2 = this.onError) == null ? void 0 : _a2.call(this, err);
       throw err;
@@ -4772,7 +4776,7 @@ class Bagel {
   }
   async patch(endpoint, payload = {}) {
     endpoint = this._endpointCleaner(endpoint);
-    return axios.patch(`${this.host}/${endpoint}`, payload).then(({ data: data2 }) => data2).catch((err) => {
+    return axios.patch(`/${endpoint}`, payload).then(({ data: data2 }) => data2).catch((err) => {
       var _a2;
       (_a2 = this.onError) == null ? void 0 : _a2.call(this, err);
       throw err;
@@ -4780,7 +4784,7 @@ class Bagel {
   }
   async post(endpoint, payload = {}) {
     endpoint = this._endpointCleaner(endpoint);
-    return axios.post(`${this.host}/${endpoint}`, payload).then(({ data: data2 }) => data2).catch((err) => {
+    return axios.post(`/${endpoint}`, payload).then(({ data: data2 }) => data2).catch((err) => {
       var _a2;
       (_a2 = this.onError) == null ? void 0 : _a2.call(this, err);
       throw err;
@@ -4789,7 +4793,7 @@ class Bagel {
   async uploadFile(file, options) {
     const formData = new FormData();
     formData.append("file", file);
-    const { data: data2 } = await axios.post(`${this.host}/files/upload`, formData, {
+    const { data: data2 } = await axios.post("/static_files/upload", formData, {
       headers: {
         "Content-Type": "multipart/form-data"
       },
@@ -4907,6 +4911,17 @@ function formatString(str, format2) {
   }
   return str;
 }
+function richText(id, label, options) {
+  return {
+    $el: "richtext",
+    class: options == null ? void 0 : options.class,
+    required: options == null ? void 0 : options.required,
+    id,
+    label,
+    placeholder: options == null ? void 0 : options.placeholder,
+    attrs: {}
+  };
+}
 function txtField(id, label, options) {
   return {
     $el: "text",
@@ -4953,6 +4968,7 @@ const BagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
   __proto__: null,
   frmRow,
   numField,
+  richText,
   slctField,
   txtField
 }, Symbol.toStringTag, { value: "Module" }));
@@ -5024,8 +5040,8 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$D = { class: "full-nav" };
-const _hoisted_2$v = { class: "nav-scroll" };
+const _hoisted_1$E = { class: "full-nav" };
+const _hoisted_2$x = { class: "nav-scroll" };
 const _hoisted_3$m = { class: "nav-links-wrapper" };
 const _hoisted_4$e = { class: "tooltip" };
 const _hoisted_5$b = { class: "bot-buttons-wrapper" };
@@ -5059,8 +5075,8 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
             class: "top-arrow"
           })
         ], 32),
-        vue.createElementVNode("div", _hoisted_1$D, [
-          vue.createElementVNode("div", _hoisted_2$v, [
+        vue.createElementVNode("div", _hoisted_1$E, [
+          vue.createElementVNode("div", _hoisted_2$x, [
             vue.createElementVNode("div", _hoisted_3$m, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.links, (link) => {
                 return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(link.to ? "router-link" : "div"), {
@@ -5118,11 +5134,11 @@ const _export_sfc = (sfc, props2) => {
   return target;
 };
 const NavBar = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-727b754a"]]);
-const _hoisted_1$C = {
+const _hoisted_1$D = {
   key: 0,
   class: "loading"
 };
-const _hoisted_2$u = {
+const _hoisted_2$w = {
   key: 1,
   class: "bgl_btn-flex"
 };
@@ -5213,7 +5229,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
         })
       }, {
         default: vue.withCtx(() => [
-          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$u, [
+          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$w, [
             _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$H), {
               key: 0,
               icon: _ctx.icon
@@ -5234,8 +5250,8 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-d09a83c5"]]);
-const _hoisted_1$B = { class: "tool-bar" };
-const _hoisted_2$t = { class: "modal-footer mt-3" };
+const _hoisted_1$C = { class: "tool-bar" };
+const _hoisted_2$v = { class: "modal-footer mt-3" };
 const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "Modal",
   props: {
@@ -5283,7 +5299,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
           }, ["stop"]))
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("header", _hoisted_1$B, [
+            vue.createElementVNode("header", _hoisted_1$C, [
               vue.renderSlot(_ctx.$slots, "toolbar"),
               vue.createVNode(vue.unref(Btn), {
                 style: vue.normalizeStyle({ float: _ctx.side ? "left" : "right" }),
@@ -5299,7 +5315,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
               }, null, 8, ["label"])) : vue.createCommentVNode("", true)
             ]),
             vue.renderSlot(_ctx.$slots, "default"),
-            vue.createElementVNode("footer", _hoisted_2$t, [
+            vue.createElementVNode("footer", _hoisted_2$v, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.actions, (action, i2) => {
                 return vue.openBlock(), vue.createBlock(vue.unref(Btn), vue.mergeProps({
                   key: i2,
@@ -5425,8 +5441,8 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-7e6899c7"]]);
-const _hoisted_1$A = { class: "accordion-item" };
-const _hoisted_2$s = ["aria-expanded", "aria-controls"];
+const _hoisted_1$B = { class: "accordion-item" };
+const _hoisted_2$u = ["aria-expanded", "aria-controls"];
 const _hoisted_3$l = { class: "accordion-label" };
 const _hoisted_4$d = ["id", "aria-hidden"];
 const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
@@ -5453,7 +5469,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
         accordionState.openItem = null;
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
         vue.createElementVNode("button", {
           onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
           "aria-expanded": vue.unref(open) ? "true" : "false",
@@ -5466,7 +5482,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createVNode(vue.unref(_sfc_main$H), { icon: "expand_more" })
           ], 2)
-        ], 8, _hoisted_2$s),
+        ], 8, _hoisted_2$u),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
             vue.unref(open) ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -5485,15 +5501,15 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-bf74738b"]]);
-const _hoisted_1$z = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
-const _hoisted_2$r = { class: "p-1" };
+const _hoisted_1$A = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
+const _hoisted_2$t = { class: "p-1" };
 const _hoisted_3$k = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
 const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   __name: "ListView",
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
-        vue.createElementVNode("div", _hoisted_2$r, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
+        vue.createElementVNode("div", _hoisted_2$t, [
           vue.renderSlot(_ctx.$slots, "header")
         ]),
         vue.createElementVNode("div", _hoisted_3$k, [
@@ -5503,8 +5519,8 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$y = { class: "txt16 no-margin ellipsis" };
-const _hoisted_2$q = { class: "txt14 no-margin txt-gray ellipsis" };
+const _hoisted_1$z = { class: "txt16 no-margin ellipsis" };
+const _hoisted_2$s = { class: "txt14 no-margin txt-gray ellipsis" };
 const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   __name: "ListItem",
   props: {
@@ -5529,11 +5545,11 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
             size: 40
           }, null, 8, ["name", "src"])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", null, [
-            vue.createElementVNode("p", _hoisted_1$y, [
+            vue.createElementVNode("p", _hoisted_1$z, [
               vue.createTextVNode(vue.toDisplayString(_ctx.title) + " ", 1),
               vue.renderSlot(_ctx.$slots, "default")
             ]),
-            vue.createElementVNode("p", _hoisted_2$q, [
+            vue.createElementVNode("p", _hoisted_2$s, [
               vue.createTextVNode(vue.toDisplayString(_ctx.subtitle) + " ", 1),
               vue.renderSlot(_ctx.$slots, "subtitle")
             ])
@@ -5544,8 +5560,8 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$x = { class: "page-top" };
-const _hoisted_2$p = { class: "top-title" };
+const _hoisted_1$y = { class: "page-top" };
+const _hoisted_2$r = { class: "top-title" };
 const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   __name: "PageTitle",
   props: {
@@ -5556,8 +5572,8 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
-        vue.createElementVNode("h1", _hoisted_2$p, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
+        vue.createElementVNode("h1", _hoisted_2$r, [
           vue.renderSlot(_ctx.$slots, "default"),
           vue.createTextVNode(" " + vue.toDisplayString(__props.value), 1)
         ])
@@ -5565,8 +5581,8 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$w = { class: "table-list-wrap h-100" };
-const _hoisted_2$o = { class: "infinite-wrapper" };
+const _hoisted_1$x = { class: "table-list-wrap h-100" };
+const _hoisted_2$q = { class: "infinite-wrapper" };
 const _hoisted_3$j = { class: "row first-row" };
 const _hoisted_4$c = ["onClick"];
 const _hoisted_5$a = { class: "flex" };
@@ -5606,8 +5622,8 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
       emit2("orderBy", `${fieldname} ${sortDirection.value}`.trim());
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
-        vue.createElementVNode("table", _hoisted_2$o, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
+        vue.createElementVNode("table", _hoisted_2$q, [
           vue.createElementVNode("thead", _hoisted_3$j, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field) => {
               return vue.openBlock(), vue.createElementBlock("th", {
@@ -5666,9 +5682,9 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
 });
 const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-f3641508"]]);
 const _sfc_main$x = {};
-const _hoisted_1$v = { class: "flex space-between" };
+const _hoisted_1$w = { class: "flex space-between" };
 function _sfc_render$1(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
     vue.renderSlot(_ctx.$slots, "default")
   ]);
 }
@@ -5696,11 +5712,11 @@ function _sfc_render(_ctx, _cache) {
   });
 }
 const RouterWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render]]);
-const _hoisted_1$u = {
+const _hoisted_1$v = {
   key: 0,
   class: "data"
 };
-const _hoisted_2$n = {
+const _hoisted_2$p = {
   key: 0,
   class: "data-row"
 };
@@ -5722,7 +5738,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     const itemData = vue.useModel(__props, "data");
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
+      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
         _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$s), {
           key: 0,
           label: _ctx.title
@@ -5731,7 +5747,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: field.id
           }, [
-            vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$n, [
+            vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$p, [
               vue.createElementVNode("div", _hoisted_3$i, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1),
               vue.createVNode(vue.unref(_sfc_main$l), {
                 field,
@@ -5758,9 +5774,11 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-bb2526f9"]]);
+const _hoisted_1$u = { class: "card_label" };
 const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
   __name: "Card",
   props: {
+    label: {},
     thin: { type: Boolean },
     outline: { type: Boolean },
     h100: { type: Boolean },
@@ -5773,13 +5791,14 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["bgl_card", {
           thin: _ctx.thin,
-          border: _ctx.outline,
+          "border": _ctx.outline,
           "h-100": _ctx.h100,
           [_ctx.bg || ""]: _ctx.bg,
           "overflow-x": _ctx.overflowX,
           "overflow-y": _ctx.overflowY
         }])
       }, [
+        vue.createElementVNode("span", _hoisted_1$u, vue.toDisplayString(_ctx.label), 1),
         vue.renderSlot(_ctx.$slots, "default")
       ], 2);
     };
@@ -5856,6 +5875,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$s = ["dismissable"];
+const _hoisted_2$o = { class: "m-0" };
 const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "Alert",
   props: {
@@ -5882,7 +5902,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
           size: 2,
           color: color2[_ctx.type]
         }, null, 8, ["icon", "color"]),
-        vue.createElementVNode("p", null, vue.toDisplayString(_ctx.message), 1),
+        vue.createElementVNode("p", _hoisted_2$o, vue.toDisplayString(_ctx.message), 1),
         vue.createVNode(Btn, {
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true),
           flat: "",
@@ -5894,7 +5914,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-94bfcb05"]]);
+const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-4017e821"]]);
 const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   __name: "Badge",
   props: {
@@ -5927,7 +5947,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
 });
 const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-10743b06"]]);
 const _hoisted_1$r = { class: "bgl_vid" };
-const _hoisted_2$m = ["src"];
+const _hoisted_2$n = ["src"];
 const _hoisted_3$h = ["src", "autoplay", "muted", "loop", "controls"];
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "BglVideo",
@@ -5976,7 +5996,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
           frameborder: "0",
           allowfullscreen: "",
           title: "Video"
-        }, null, 12, _hoisted_2$m)) : (vue.openBlock(), vue.createElementBlock("video", {
+        }, null, 12, _hoisted_2$n)) : (vue.openBlock(), vue.createElementBlock("video", {
           key: 1,
           src: _ctx.src,
           autoplay: _ctx.autoplay,
@@ -5995,7 +6015,7 @@ const _hoisted_1$q = {
   key: 0,
   class: "blocker"
 };
-const _hoisted_2$l = { class: "Handlers" };
+const _hoisted_2$m = { class: "Handlers" };
 const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "Carousel",
   props: {
@@ -6158,7 +6178,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
           vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ], 34),
-        vue.createElementVNode("div", _hoisted_2$l, [
+        vue.createElementVNode("div", _hoisted_2$m, [
           vue.createElementVNode("span", { onClick: prev }, [
             vue.renderSlot(_ctx.$slots, "prev", {}, void 0, true)
           ]),
@@ -6179,7 +6199,8 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     schema: {},
     modelValue: { default: () => ({}) },
     onDelete: {},
-    onSubmit: {}
+    onSubmit: {},
+    status: {}
   },
   emits: ["update:modelValue", "submit", "dirty"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -6208,17 +6229,13 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
       return (_b = (_a2 = form.value) == null ? void 0 : _a2.reportValidity) == null ? void 0 : _b.call(_a2);
     };
     const clearForm = () => Object.assign(data2.value, {});
-    let formStatus = vue.ref("idle");
     const runSubmit = () => {
       var _a2;
-      try {
-        validateForm();
-        (_a2 = props2.onSubmit) == null ? void 0 : _a2.call(props2, data2.value);
-        clearForm();
-        formStatus.value = "success";
-      } catch (e) {
-        formStatus.value = "error";
-      }
+      const isValid2 = validateForm();
+      if (!isValid2)
+        return;
+      (_a2 = props2.onSubmit) == null ? void 0 : _a2.call(props2, data2.value);
+      clearForm();
     };
     const i18nT = (val) => val;
     const deleteItem = () => {
@@ -6251,7 +6268,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
             modelValue: data2.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => data2.value = $event)
           }, null, 8, ["field", "modelValue"]);
-        }), 128)) : !vue.unref(slots).success || vue.unref(formStatus) !== "success" ? (vue.openBlock(), vue.createElementBlock("form", {
+        }), 128)) : !vue.unref(slots).success || _ctx.status !== "success" ? (vue.openBlock(), vue.createElementBlock("form", {
           key: 1,
           ref_key: "form",
           ref: form,
@@ -6272,8 +6289,8 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
           }), 128)),
           vue.renderSlot(_ctx.$slots, "submit")
         ], 544)) : vue.createCommentVNode("", true),
-        vue.unref(formStatus) === "success" ? vue.renderSlot(_ctx.$slots, "success", { key: 2 }) : vue.createCommentVNode("", true),
-        vue.unref(formStatus) === "error" ? vue.renderSlot(_ctx.$slots, "error", { key: 3 }) : vue.createCommentVNode("", true)
+        _ctx.status === "success" ? vue.renderSlot(_ctx.$slots, "success", { key: 2 }) : vue.createCommentVNode("", true),
+        _ctx.status === "error" ? vue.renderSlot(_ctx.$slots, "error", { key: 3 }) : vue.createCommentVNode("", true)
       ], 64);
     };
   }
@@ -6296,6 +6313,8 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
         return ToggleInput;
       if (props2.field.$el === "check")
         return CheckInput;
+      if (props2.field.$el === "richtext")
+        return _sfc_main$8;
       return props2.field.$el || "div";
     });
     const emit2 = __emit;
@@ -6311,7 +6330,11 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
         data2[props2.field.id] = val;
         emit2("update:modelValue", data2);
       },
-      get: () => props2.field.id ? props2.modelValue[props2.field.id] : props2.field.defaultValue || ""
+      get: () => {
+        if (props2.field.id)
+          return props2.modelValue[props2.field.id];
+        return props2.field.defaultValue || "";
+      }
     });
     const vIf = vue.computed(() => {
       var _a2, _b;
@@ -6370,7 +6393,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
 });
 const _withScopeId$1 = (n2) => (vue.pushScopeId("data-v-e8219826"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$p = ["title"];
-const _hoisted_2$k = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("svg", {
+const _hoisted_2$l = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24",
   viewBox: "0 -960 960 960",
@@ -6379,7 +6402,7 @@ const _hoisted_2$k = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.cr
   /* @__PURE__ */ vue.createElementVNode("path", { d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" })
 ], -1));
 const _hoisted_3$g = [
-  _hoisted_2$k
+  _hoisted_2$l
 ];
 const _hoisted_4$a = ["required", "id"];
 const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
@@ -15033,7 +15056,7 @@ Object.entries(Mo).forEach(([e, t]) => {
   e !== "default" && (Va[e] = t);
 });
 const _hoisted_1$o = ["title"];
-const _hoisted_2$j = { key: 0 };
+const _hoisted_2$k = { key: 0 };
 const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   __name: "DateInput",
   props: {
@@ -15071,7 +15094,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.label
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$j, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$k, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
         vue.createVNode(vue.unref(Va), vue.mergeProps({
           ref_key: "datePicker",
           ref: datePicker,
@@ -15085,7 +15108,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$n = ["title"];
-const _hoisted_2$i = { key: 0 };
+const _hoisted_2$j = { key: 0 };
 const _hoisted_3$f = ["value", "placeholder"];
 const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   __name: "JSONInput",
@@ -15110,7 +15133,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$i, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$j, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("textarea", {
@@ -15125,7 +15148,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
 });
 const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-1fc4f739"]]);
 const _hoisted_1$m = ["disabled"];
-const _hoisted_2$h = ["value"];
+const _hoisted_2$i = ["value"];
 const _hoisted_3$e = ["onClick"];
 const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectInput",
@@ -15323,7 +15346,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
               onInput: _cache[1] || (_cache[1] = ($event) => updateOpen(true)),
               value: selectedItems.value,
               required: ""
-            }, null, 40, _hoisted_2$h)) : vue.createCommentVNode("", true)
+            }, null, 40, _hoisted_2$i)) : vue.createCommentVNode("", true)
           ])
         ]),
         _: 3
@@ -15331,7 +15354,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-70fd5ae7"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-ab376074"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -17855,7 +17878,7 @@ const VueDraggableNext = vue.defineComponent({
   }
 });
 const _hoisted_1$l = ["title"];
-const _hoisted_2$g = { class: "bagel-input" };
+const _hoisted_2$h = { class: "bagel-input" };
 const _hoisted_3$d = { class: "table-side-scroll" };
 const _hoisted_4$9 = { class: "table-header" };
 const _hoisted_5$8 = { class: "table-reorder" };
@@ -17925,7 +17948,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
         class: "table-field-wrap",
         title: _ctx.description
       }, [
-        vue.createElementVNode("div", _hoisted_2$g, [
+        vue.createElementVNode("div", _hoisted_2$h, [
           vue.createElementVNode("label", null, vue.toDisplayString((_a2 = vue.unref(fieldMeta)) == null ? void 0 : _a2.label), 1)
         ]),
         vue.createElementVNode("div", _hoisted_3$d, [
@@ -18006,7 +18029,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
 });
 const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-cdacf10e"]]);
 const _hoisted_1$k = ["title"];
-const _hoisted_2$f = ["for"];
+const _hoisted_2$g = ["for"];
 const _hoisted_3$c = ["title", "autocomplete", "id", "type", "placeholder", "disabled", "required", "pattern"];
 const _hoisted_4$8 = ["title", "id", "type", "rows", "placeholder", "disabled", "required", "pattern"];
 const _hoisted_5$7 = { key: 2 };
@@ -18143,7 +18166,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
             [vue.vModelText, vue.unref(inputVal)]
           ]),
           _ctx.helptext ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$7, vue.toDisplayString(_ctx.helptext), 1)) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_2$f),
+        ], 8, _hoisted_2$g),
         _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$H), {
           key: 0,
           class: "iconStart",
@@ -18165,7 +18188,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-cd4c27ad"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-df718b64"]]);
 const _hoisted_1$j = { class: "primary-checkbox" };
 const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
@@ -18196,7 +18219,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
 });
 const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-e4cbb088"]]);
 const _hoisted_1$i = ["title"];
-const _hoisted_2$e = ["id", "placeholder", "required"];
+const _hoisted_2$f = ["id", "placeholder", "required"];
 const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
   props: {
@@ -18233,7 +18256,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
             placeholder: _ctx.placeholder || _ctx.label,
             class: { "no-edit": !_ctx.editMode },
             required: _ctx.required
-          }, _ctx.nativeInputAttrs), null, 16, _hoisted_2$e), [
+          }, _ctx.nativeInputAttrs), null, 16, _hoisted_2$f), [
             [vue.vModelText, inputVal.value]
           ])
         ])
@@ -18242,7 +18265,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$h = { class: "datetime-wrap" };
-const _hoisted_2$d = { class: "date-wrap" };
+const _hoisted_2$e = { class: "date-wrap" };
 const _hoisted_3$b = {
   key: 0,
   class: "time-wrap"
@@ -18252,7 +18275,8 @@ const _hoisted_5$6 = ["for"];
 const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePicker",
   props: {
-    name: {},
+    label: {},
+    id: {},
     options: {},
     showTimeWrap: { type: Boolean }
   },
@@ -18266,7 +18290,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-        vue.createElementVNode("div", _hoisted_2$d, [
+        vue.createElementVNode("div", _hoisted_2$e, [
           vue.createVNode(vue.unref(Va), vue.mergeProps({
             inline: "",
             "week-start": "0",
@@ -18286,15 +18310,15 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: hr2 }, [
               vue.withDirectives(vue.createElementVNode("input", {
                 type: "radio",
-                id: `${hr2}_${_ctx.name}`,
-                name: _ctx.name,
+                id: `${hr2}_${_ctx.id}`,
+                name: _ctx.label,
                 value: hr2,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedHour.value = $event)
               }, null, 8, _hoisted_4$7), [
                 [vue.vModelRadio, selectedHour.value]
               ]),
               vue.createElementVNode("label", {
-                for: `${hr2}_${_ctx.name}`
+                for: `${hr2}_${_ctx.id}`
               }, vue.toDisplayString(hr2), 9, _hoisted_5$6)
             ], 64);
           }), 128))
@@ -18304,7 +18328,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$g = { class: "bagel-input" };
-const _hoisted_2$c = { class: "pb-025" };
+const _hoisted_2$d = { class: "pb-025" };
 const _hoisted_3$a = { class: "flex gap-05 flex-wrap" };
 const _hoisted_4$6 = ["id", "name", "value", "checked"];
 const _hoisted_5$5 = ["for"];
@@ -18348,7 +18372,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
-        vue.createElementVNode("label", _hoisted_2$c, vue.toDisplayString(_ctx.label), 1),
+        vue.createElementVNode("label", _hoisted_2$d, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", _hoisted_3$a, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(cumputedOptions.value, ({ optioId, label, value }, index2) => {
             return vue.openBlock(), vue.createElementBlock("div", {
@@ -18373,7 +18397,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
 });
 const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-e47ae8b5"]]);
 const _hoisted_1$f = { class: "bagel-input" };
-const _hoisted_2$b = {
+const _hoisted_2$c = {
   key: 0,
   class: "imagePreviewWrap"
 };
@@ -18411,20 +18435,28 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     const file_ids = vue.useModel(__props, "modelValue");
     const storageFiles = vue.ref([]);
     const compareIds = (v1, v2) => [v1].flat().join(",") === [v2].flat().join(",");
-    vue.watch(() => props2.files, (newFiles) => {
-      if (newFiles)
-        storageFiles.value.push(...[newFiles].flat());
-    }, { immediate: true });
-    vue.watch(() => storageFiles.value, (newFiles) => {
-      var _a2;
-      let idValue = "";
-      if (props2.multiple)
-        idValue = newFiles.map((f2) => f2.id || "");
-      else
-        idValue = ((_a2 = newFiles[0]) == null ? void 0 : _a2.id) || "";
-      if (!compareIds(file_ids == null ? void 0 : file_ids.value, idValue))
-        file_ids.value = idValue;
-    }, { deep: true });
+    vue.watch(
+      () => props2.files,
+      (newFiles) => {
+        if (newFiles)
+          storageFiles.value.push(...[newFiles].flat());
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => storageFiles.value,
+      (newFiles) => {
+        var _a2;
+        let idValue = "";
+        if (props2.multiple)
+          idValue = newFiles.map((f2) => f2.id || "");
+        else
+          idValue = ((_a2 = newFiles[0]) == null ? void 0 : _a2.id) || "";
+        if (!compareIds(file_ids == null ? void 0 : file_ids.value, idValue))
+          file_ids.value = idValue;
+      },
+      { deep: true }
+    );
     const fileQueue = vue.ref([]);
     let isDragOver = vue.ref(false);
     const preventDefault = (e) => {
@@ -18435,21 +18467,20 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     const removeFile = (file) => {
       const index2 = storageFiles.value.indexOf(file);
       storageFiles.value.splice(index2, 1);
-      if (props2.deleteEndpoint)
+      if (props2.deleteEndpoint) {
         void bagel.delete(`${props2.deleteEndpoint}/${file.id}`);
+      }
     };
     const flushQueue = () => {
-      fileQueue.value.forEach(
-        async (file, i2) => {
-          if (!props2.multiple)
-            storageFiles.value.splice(0, 1);
-          const serverFile = await bagel.uploadFile(file.file, {
-            onUploadProgress: (e) => file.progress = e.progress * 100 - 1
-          });
-          storageFiles.value.push(serverFile);
-          fileQueue.value.splice(i2, 1);
-        }
-      );
+      fileQueue.value.forEach(async (file, i2) => {
+        if (!props2.multiple)
+          storageFiles.value.splice(0, 1);
+        const serverFile = await bagel.uploadFile(file.file, {
+          onUploadProgress: (e) => file.progress = e.progress * 100 - 1
+        });
+        storageFiles.value.push(serverFile);
+        fileQueue.value.splice(i2, 1);
+      });
     };
     const browse = () => {
       const input = document.createElement("input");
@@ -18458,7 +18489,9 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
       input.onchange = (e) => {
         const target = e == null ? void 0 : e.target;
         if (target == null ? void 0 : target.files) {
-          Array.from(target.files).forEach((file) => fileQueue.value.push({ name: file.name, file, progress: 0 }));
+          Array.from(target.files).forEach(
+            (file) => fileQueue.value.push({ name: file.name, file, progress: 0 })
+          );
         }
         flushQueue();
       };
@@ -18496,13 +18529,16 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
           onDragover: dragover,
           onDrop: drop3,
           onDragleave: dragleave,
-          class: vue.normalizeClass(["fileUploadWrap", { fileDropZone: !storageFiles.value.length && !fileQueue.value.length, dragover: vue.unref(isDragOver) }])
+          class: vue.normalizeClass(["fileUploadWrap", {
+            fileDropZone: !storageFiles.value.length && !fileQueue.value.length,
+            dragover: vue.unref(isDragOver)
+          }])
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: file.id
             }, [
-              !_ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
+              !_ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
                 vue.createElementVNode("img", {
                   class: "preview",
                   src: file.url,
@@ -18566,12 +18602,12 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-1be8d7b1"]]);
+const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-3bb24b0c"]]);
 const _withScopeId = (n2) => (vue.pushScopeId("data-v-b87221d6"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$e = ["title"];
-const _hoisted_2$a = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
+const _hoisted_2$b = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
 const _hoisted_3$8 = [
-  _hoisted_2$a
+  _hoisted_2$b
 ];
 const _hoisted_4$4 = ["id"];
 const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
@@ -39061,7 +39097,11 @@ vue.defineComponent({
     }, (_b = (_a2 = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a2));
   }
 });
-const _hoisted_1$d = { key: 0 };
+const _hoisted_1$d = { class: "RichText" };
+const _hoisted_2$a = {
+  key: 0,
+  class: "RichText-tools"
+};
 const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "RichText",
   props: {
@@ -39078,7 +39118,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     };
     const config = [
       {
-        name: "bold",
+        name: "Bold",
         command: () => {
           var _a2;
           return (_a2 = focus2()) == null ? void 0 : _a2.toggleBold().run();
@@ -39090,7 +39130,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         }
       },
       {
-        name: "italic",
+        name: "Italic",
         command: () => focus2().toggleItalic().run(),
         icon: "format_italic",
         disabled: () => {
@@ -39099,7 +39139,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         }
       },
       {
-        name: "strike",
+        name: "Strike",
         command: () => focus2().toggleStrike().run(),
         icon: "format_strikethrough",
         disabled: () => {
@@ -39108,93 +39148,93 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         }
       },
       {
-        name: "code",
+        name: "Code Text",
         command: () => focus2().toggleCode().run(),
         icon: "code"
       },
+      // {
+      // 	name: 'clearMarks',
+      // 	command: () => focus().unsetAllMarks(),
+      // 	icon: 'clear',
+      // },
       {
-        name: "clearMarks",
-        command: () => focus2().unsetAllMarks(),
-        icon: "clear"
-      },
-      {
-        name: "clearNodes",
+        name: "Clear",
         command: () => focus2().clearNodes().run(),
-        icon: "clear"
+        icon: "format_clear"
       },
       {
-        name: "paragraph",
+        name: "Paragraph",
         command: () => focus2().setParagraph().run(),
         icon: "format_paragraph"
       },
       {
-        name: "heading",
+        name: "Heading",
         command: () => focus2().toggleHeading({ level: 1 }).run(),
         icon: "format_h1",
         option: { level: 1 }
       },
       {
-        name: "heading",
+        name: "Heading",
         command: () => focus2().toggleHeading({ level: 2 }).run(),
         icon: "format_h2",
         option: { level: 2 }
       },
       {
-        name: "heading",
+        name: "Heading",
         command: () => focus2().toggleHeading({ level: 3 }).run(),
         icon: "format_h3",
         option: { level: 3 }
       },
       {
-        name: "heading",
+        name: "Heading",
         command: () => focus2().toggleHeading({ level: 4 }).run(),
         icon: "format_h4",
         option: { level: 4 }
       },
       {
-        name: "heading",
+        name: "Heading",
         command: () => focus2().toggleHeading({ level: 5 }).run(),
         icon: "format_h5",
         option: { level: 5 }
       },
       {
-        name: "heading",
+        name: "Heading",
         command: () => focus2().toggleHeading({ level: 6 }).run(),
         icon: "format_h6",
         option: { level: 6 }
       },
       {
-        name: "bulletList",
+        name: "Bullet List",
         command: () => focus2().toggleBulletList().run(),
         icon: "format_list_bulleted"
       },
       {
-        name: "orderedList",
+        name: "Ordered List",
         command: () => focus2().toggleOrderedList().run(),
         icon: "format_list_numbered"
       },
       {
-        name: "codeBlock",
+        name: "Code Block",
         command: () => focus2().toggleCodeBlock().run(),
-        icon: "code"
+        icon: "code_blocks"
       },
       {
-        name: "blockquote",
+        name: "Blockquote",
         command: () => focus2().toggleBlockquote().run(),
         icon: "format_quote"
       },
       {
-        name: "horizontalRule",
+        name: "Horizontal Rule",
         command: () => focus2().setHorizontalRule().run(),
         icon: "horizontal_rule"
       },
       {
-        name: "hardBreak",
+        name: "Hard Break",
         command: () => focus2().setHardBreak().run(),
         icon: "keyboard_return"
       },
       {
-        name: "undo",
+        name: "Undo",
         command: () => focus2().undo().run(),
         icon: "undo",
         disabled: () => {
@@ -39203,7 +39243,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         }
       },
       {
-        name: "redo",
+        name: "Redo",
         command: () => focus2().redo().run(),
         icon: "redo",
         disabled: () => {
@@ -39223,8 +39263,10 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     vue.watch(
       () => props2.modelValue,
       (value) => {
-        var _a2;
-        return (_a2 = editor.value) == null ? void 0 : _a2.commands.setContent(value);
+        var _a2, _b;
+        if (((_a2 = editor.value) == null ? void 0 : _a2.getHTML()) === value)
+          return;
+        (_b = editor.value) == null ? void 0 : _b.commands.setContent(value, false);
       },
       { immediate: true }
     );
@@ -39235,8 +39277,8 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
-      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.unref(editor) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        vue.unref(editor) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
           (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(config, (item) => {
             var _a2;
             return vue.withDirectives(vue.createVNode(vue.unref(Btn), {
@@ -39252,7 +39294,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
           }), 64))
         ])) : vue.createCommentVNode("", true),
         vue.createVNode(vue.unref(EditorContent), { editor: vue.unref(editor) }, null, 8, ["editor"])
-      ], 64);
+      ]);
     };
   }
 });
@@ -45717,7 +45759,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-24905642"]]);
+const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-65bec778"]]);
 const _hoisted_1$4 = { class: "m-0 pb-025 txt14 line-height-1" };
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",