@duxweb/dvha-pro 1.1.28 → 1.1.29

package/dist/esm/components/designEditor/editor/setting.js

@@ -1,8 +1,8 @@
-import { defineComponent as m, inject as l, computed as p, createVNode as o } from "vue";
+import { defineComponent as s, inject as d, computed as n, createVNode as t } from "vue";
+import { useI18n as c } from "@duxweb/dvha-core";
+import l from "clsx";
+import { NScrollbar as u } from "naive-ui";
 import "@vueuse/core";
-import "clsx";
-import "naive-ui";
-import "@duxweb/dvha-core";
 import "vue-echarts";
 import "vue-router";
 import "@overlastic/vue";
@@ -54,7 +54,7 @@ import "vue-draggable-plus";
 import "short-unique-id";
 import "aieditor";
 import "@vue-flow/core";
-import { DuxFormLayout as a } from "../../form/formLayout.js";
+import { DuxFormLayout as g } from "../../form/formLayout.js";
 import "lodash-es/cloneDeep";
 import "@vue-flow/background";
 /* empty css                         */
@@ -63,55 +63,93 @@ import "@iconify-json/tabler/icons.json";
 import "../../posterEditor/elements/index.js";
 import "fabric";
 import "../../schemaEditor/schemaEditor.js";
-const Et = /* @__PURE__ */ m({
+function a({
+  icon: p,
+  iconBgClass: o = "bg-primary",
+  title: e,
+  description: i
+}) {
+  return t("div", {
+    class: "p-4 border-b border-default"
+  }, [t("div", {
+    class: "flex gap-2 items-center"
+  }, [p && t("div", {
+    class: l(["rounded p-2 flex-shrink-0", o])
+  }, [t("div", {
+    class: l(["size-6 text-white", p])
+  }, null)]), t("div", {
+    class: "flex-1 min-w-0"
+  }, [t("h3", {
+    class: "text-base font-medium"
+  }, [e]), i && t("p", {
+    class: "text-sm text-muted mt-1"
+  }, [i])])])]);
+}
+const wt = /* @__PURE__ */ s({
   name: "WidgetEditorSetting",
   props: {
     actionRender: Function
   },
-  setup(e) {
-    const t = l("editor.use"), i = p(() => t?.getData(t.selected.value)), n = p(() => t?.components.value?.find((r) => r.name === i.value?.name));
-    return () => o("div", {
-      class: "flex-none  p-2 max-w-full w-220px overflow-y-auto bg-default",
+  setup(p) {
+    const {
+      t: o
+    } = c(), e = d("editor.use"), i = n(() => e?.getData(e.selected.value)), r = n(() => e?.components.value?.find((m) => m.name === i.value?.name));
+    return () => t("div", {
+      class: "h-full w-full flex flex-col",
       key: i.value?.key
-    }, [n.value?.setting?.({
-      value: i.value?.options,
-      "update:modelValue": (r) => {
-        i?.value && (i.value.options = r);
-      }
-    }) || o("div", {
-      class: "flex flex-col gap-2 h-full"
-    }, [o("div", {
+    }, [!r.value && t(a, {
+      icon: "i-tabler:settings",
+      iconBgClass: "bg-gray-500",
+      title: o("components.designEditor.properties") || "Properties",
+      description: o("components.designEditor.selectComponent") || "Select a component to configure"
+    }, null), r.value && t(a, {
+      icon: r.value.icon,
+      iconBgClass: "bg-primary",
+      title: r.value.label || r.value.name || o("components.designEditor.component") || "Component",
+      description: r.value.description || o("components.designEditor.componentSettings") || "Configure component options"
+    }, null), t(u, {
       class: "flex-1 min-h-0"
-    }, [t?.settingPage?.component?.({
-      value: t.value.value.config,
-      "update:modelValue": (r) => {
-        t.value.value.config = r;
-      }
-    })]), e?.actionRender?.(t)])]);
+    }, {
+      default: () => [t("div", {
+        class: "p-3 pr-2"
+      }, [r.value?.setting?.({
+        value: i.value?.options,
+        "update:modelValue": (m) => {
+          i?.value && (i.value.options = m);
+        }
+      }) || t("div", {
+        class: "flex flex-col gap-3"
+      }, [t("div", null, [e?.settingPage?.component?.({
+        value: e.value.value.config,
+        "update:modelValue": (m) => {
+          e.value.value.config = m;
+        }
+      })]), p?.actionRender?.(e)])])]
+    })]);
   }
-}), Wt = /* @__PURE__ */ m({
+}), Dt = /* @__PURE__ */ s({
   name: "WidgetEditorSettingCard",
   props: {
     title: String,
     icon: String
   },
-  setup(e, {
-    slots: t
+  setup(p, {
+    slots: o
   }) {
-    return () => o("div", {
+    return () => t("div", {
       class: "flex flex-col"
-    }, [o("div", {
-      class: "bg-elevated rounded py-2 px-4 flex justify-center items-center gap-2"
-    }, [o("div", null, [e.title])]), o("div", {
+    }, [t("div", {
+      class: "bg-elevated border border-default rounded-md py-2 px-4 flex justify-center items-center gap-2"
+    }, [t("div", null, [p.title])]), t("div", {
       class: "py-4 flex-1"
-    }, [o(a, {
+    }, [t(g, {
       labelPlacement: "top"
     }, {
-      default: () => [t.default?.()]
+      default: () => [o.default?.()]
     })])]);
   }
 });
 export {
-  Et as WidgetEditorSetting,
-  Wt as WidgetEditorSettingCard
+  wt as WidgetEditorSetting,
+  Dt as WidgetEditorSettingCard
 };

package/dist/esm/components/designEditor/editor.js

@@ -1,17 +1,17 @@
-import { defineComponent as f, provide as g, watch as d, ref as x, createVNode as a } from "vue";
-import { useI18n as v } from "@duxweb/dvha-core";
-import u from "clsx";
-import { cloneDeep as i } from "lodash-es";
-import { NScrollbar as b } from "naive-ui";
-import w from "short-unique-id";
-import { VueDraggable as h } from "vue-draggable-plus";
-import { DuxCard as y } from "../card/card.js";
+import { defineComponent as v, provide as x, watch as i, createVNode as t } from "vue";
+import { useI18n as h } from "@duxweb/dvha-core";
+import d from "clsx";
+import { cloneDeep as s } from "lodash-es";
+import { NScrollbar as w } from "naive-ui";
+import y from "short-unique-id";
+import { VueDraggable as D } from "vue-draggable-plus";
+import { DuxCard as k } from "../card/card.js";
 import "@vueuse/core";
-import { duxFormEditorGrid as D } from "./components/grid.js";
-import { useEditor as k } from "./editor/hook.js";
-import { DuxWidgetEditorPreview as c } from "./editor/preview.js";
-import { WidgetEditorSetting as C } from "./editor/setting.js";
-const M = /* @__PURE__ */ f({
+import { duxFormEditorGrid as E } from "./components/grid.js";
+import { useEditor as C } from "./editor/hook.js";
+import { DuxWidgetEditorPreview as u } from "./editor/preview.js";
+import { WidgetEditorSetting as U } from "./editor/setting.js";
+const O = /* @__PURE__ */ v({
   name: "DuxDesignEditor",
   props: {
     data: Object,
@@ -22,86 +22,81 @@ const M = /* @__PURE__ */ f({
     actionRender: Function,
     previewWrapper: Function
   },
-  setup(r) {
+  setup(l) {
     const {
       t: o
-    } = v(), t = k({
-      settingPage: r.settingPage
+    } = h(), a = C({
+      settingPage: l.settingPage
     });
-    g("editor.use", t), d([() => r.components, () => r.groups], () => {
-      t.clearGroup(), t.clearComponent(), t.addGroup({
+    x("editor.use", a), i([() => l.components, () => l.groups], () => {
+      a.clearGroup(), a.clearComponent(), a.addGroup({
         name: "layout",
         label: o("components.designEditor.layout") || "Layout",
         icon: "i-tabler:layout"
-      }), r.groups?.forEach((e) => {
-        t.addGroup(e);
-      }), t.addComponent(D(o)), r.components?.forEach((e) => {
-        t.addComponent(e);
+      }), l.groups?.forEach((e) => {
+        a.addGroup(e);
+      }), a.addComponent(E(o)), l.components?.forEach((e) => {
+        a.addComponent(e);
       });
     }, {
       immediate: !0,
       deep: !0
     });
-    const l = x(), {
-      randomUUID: p
-    } = new w({
+    const {
+      randomUUID: g
+    } = new y({
       length: 10
     }), m = (e) => ({
-      key: p(),
+      key: g(),
       name: e.name,
-      options: i(e.settingDefault)
+      options: s(e.settingDefault)
     });
-    return d(() => r.data, (e) => {
-      const n = r.settingPage?.default || {};
-      t.value.value = {
+    i(() => l.data, (e) => {
+      const r = l.settingPage?.default || {};
+      a.value.value = {
         config: {
-          ...n,
-          ...i(e?.config || {})
+          ...r,
+          ...s(e?.config || {})
         },
-        data: i(e?.data || [])
+        data: s(e?.data || [])
       };
     }, {
       deep: !0,
       immediate: !0
-    }), d(t.value, (e) => {
-      r.onUpdateData?.(e);
+    }), i(a.value, (e) => {
+      l.onUpdateData?.(e);
     }, {
       deep: !0
-    }), () => a(y, {
+    });
+    const c = ["bg-red-500", "bg-orange-500", "bg-amber-500", "bg-yellow-500", "bg-lime-500", "bg-green-500", "bg-emerald-500", "bg-teal-500", "bg-cyan-500", "bg-sky-500", "bg-blue-500", "bg-indigo-500", "bg-violet-500", "bg-purple-500", "bg-fuchsia-500", "bg-pink-500", "bg-rose-500"];
+    return () => t(k, {
       class: "h-full",
       shadow: !0
     }, {
-      default: () => [a("div", {
-        class: "h-full flex flex-row  text-default"
-      }, [a("div", {
-        class: "flex-none flex flex-col gap-2  border-r border-default bg-default p-2"
-      }, [a(s, {
-        title: o("components.designEditor.all") || "All",
-        icon: "i-tabler:hexagons",
-        active: !l.value,
-        onClick: () => {
-          l.value = void 0;
-        }
-      }, null), t.group.value?.map((e, n) => a(s, {
-        key: n,
-        active: l.value === e.name,
-        title: e.label,
-        icon: e.icon,
-        onClick: () => {
-          l.value = e.name;
-        }
-      }, null))]), a("div", {
-        class: "flex-none text-xs w-180px bg-default",
-        id: "comp-list"
-      }, [a(b, null, {
-        default: () => [a("div", {
-          class: "flex flex-col gap-4 p-2"
-        }, [t.tree.value?.filter((e) => l.value ? e.name === l.value : !0).map((e) => a("div", {
+      default: () => [t("div", {
+        class: "h-full w-full relative text-default bg-muted rounded-md"
+      }, [t("div", {
+        class: "absolute top-4 left-4 bottom-4 z-10"
+      }, [t("div", {
+        class: "h-full w-220px bg-default shadow rounded"
+      }, [t("div", {
+        class: "h-full flex flex-col"
+      }, [t(w, {
+        class: "flex-1 min-h-0"
+      }, {
+        default: () => [t("div", {
+          class: "p-4 space-y-4",
+          id: "comp-list"
+        }, [a.tree.value?.filter((e) => e.children && e.children.length > 0).map((e, r) => t("div", {
           key: e.name,
-          class: "flex flex-col gap-2"
-        }, [a("div", {
-          class: "bg-muted border border-muted rounded p-2 flex justify-center"
-        }, [e.label]), a(h, {
+          class: "space-y-2"
+        }, [t("div", {
+          class: "flex items-center gap-2 text-sm px-1"
+        }, [t("div", {
+          class: d(["size-4", e.icon])
+        }, null), t("span", {
+          class: "truncate"
+        }, [e.label])]), t(D, {
           modelValue: e.children || [],
           animation: 150,
           group: {
@@ -111,52 +106,52 @@ const M = /* @__PURE__ */ f({
           },
           sort: !1,
           clone: m,
-          class: "grid grid-cols-2 items-start gap-2 "
+          class: "space-y-2"
         }, {
-          default: () => [e.children?.map((n) => a("div", {
-            key: n.name,
-            class: "border border-muted rounded-sm p-2 flex flex-col items-center gap-2 cursor-pointer hover:bg-muted  edit-drag"
-          }, [a("div", {
-            class: u(["size-6", n.icon])
-          }, null), a("div", {
-            class: "truncate whitespace-nowrap px-2 overflow-hidden"
-          }, [n.label])]))]
-        })]))])]
-      })]), a("div", {
-        class: "flex-1 shadow-sm flex flex-col items-center p-6 overflow-auto",
+          default: () => [e.children?.map((n, p) => {
+            const f = (r * 20 + p) % c.length, b = c[f];
+            return t("div", {
+              key: n.name,
+              class: "rounded-lg px-3 py-2 cursor-move transition-all bg-default dark:bg-muted hover:bg-elevated edit-drag flex items-center gap-3"
+            }, [t("div", {
+              class: d(["size-8 rounded-lg flex items-center justify-center flex-shrink-0", b])
+            }, [t("div", {
+              class: d(["size-4 text-white", n.icon])
+            }, null)]), t("div", {
+              class: "flex-1 min-w-0"
+            }, [t("div", {
+              class: "text-sm font-medium truncate"
+            }, [n.label]), n.description && t("div", {
+              class: "text-xs truncate opacity-80"
+            }, [n.description])])]);
+          })]
+        })])), a.tree.value?.filter((e) => e.children && e.children.length > 0).length === 0 && t("div", {
+          class: "text-xs text-muted text-center py-4"
+        }, [o("components.designEditor.empty") || "No components"])])]
+      })])])]), t("div", {
+        class: "absolute inset-0 shadow-sm flex flex-col items-center p-6 overflow-auto",
         style: "background: linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,0,0, 0.1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0,0,0, 0.1) 75%), linear-gradient(-45deg, transparent 75%, rgba(0,0,0, 0.1) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
-      }, [a("div", {
+      }, [t("div", {
         class: "max-w-2xl w-full flex-1 bg-default shadow p-2",
         onClick: () => {
-          t.selected.value = void 0;
+          a.selected.value = void 0;
         }
-      }, [r.previewWrapper ? r.previewWrapper(a(c, {
-        modelValue: t.value.value?.data,
-        onUpdate: (e) => t.value.value.data = e
-      }, null), t) : a(c, {
-        modelValue: t.value.value?.data,
-        onUpdate: (e) => t.value.value.data = e
-      }, null)])]), a(C, {
-        actionRender: r.actionRender
-      }, null)])]
+      }, [l.previewWrapper ? l.previewWrapper(t(u, {
+        modelValue: a.value.value?.data,
+        onUpdate: (e) => a.value.value.data = e
+      }, null), a) : t(u, {
+        modelValue: a.value.value?.data,
+        onUpdate: (e) => a.value.value.data = e
+      }, null)])]), t("div", {
+        class: "absolute top-4 right-4 bottom-4 z-10"
+      }, [t("div", {
+        class: "h-full w-300px bg-default shadow rounded"
+      }, [t(U, {
+        actionRender: l.actionRender
+      }, null)])])])]
     });
   }
 });
-function s({
-  title: r,
-  icon: o,
-  active: t,
-  onClick: l
-}) {
-  return a("div", {
-    class: u(["flex flex-col items-center px-3 py-2 hover:bg-primary/10 cursor-pointer rounded-sm", t ? "bg-primary/10 text-primary" : ""]),
-    onClick: l
-  }, [a("div", {
-    class: u(["size-4", o])
-  }, null), a("div", {
-    class: "truncate whitespace-nowrap text-default text-sm"
-  }, [r])]);
-}
 export {
-  M as DuxDesignEditor
+  O as DuxDesignEditor
 };

package/dist/esm/components/formEditor/editor.js

@@ -1,6 +1,6 @@
-import { defineComponent as f, computed as u, createVNode as t, mergeProps as E, isVNode as x } from "vue";
-import { useI18n as F } from "@duxweb/dvha-core";
-import { NButton as a } from "naive-ui";
+import { defineComponent as f, computed as c, createVNode as m, mergeProps as E, isVNode as x } from "vue";
+import { useI18n as b } from "@duxweb/dvha-core";
+import { NButton as s } from "naive-ui";
 import "vue-router";
 import "@overlastic/vue";
 import "@vueuse/core";
@@ -48,34 +48,34 @@ import "vue-command-palette";
 import "@duxweb/dvha-naiveui";
 import "../../pages/page404.js";
 import "vue-draggable-plus";
-import { DuxDesignEditor as l } from "../designEditor/editor.js";
+import { DuxDesignEditor as a } from "../designEditor/editor.js";
 import "short-unique-id";
 import "aieditor";
 import "@vue-flow/core";
-import { DuxFormLayout as g } from "../form/formLayout.js";
+import { DuxFormLayout as y } from "../form/formLayout.js";
 import "lodash-es/cloneDeep";
 import "@vue-flow/background";
 /* empty css                      */
-import { DuxFormEditorSettingPage as v } from "./base/setting.js";
-import { duxFormEditorCascader as y } from "./components/cascader.js";
-import { duxFormEditorCascaderAsync as b } from "./components/cascaderAsync.js";
-import { duxFormEditorCheckbox as S } from "./components/checkbox.js";
-import { duxFormEditorColor as D } from "./components/color.js";
-import { duxFormEditorDate as C } from "./components/date.js";
-import { duxFormEditorDynamicInput as P } from "./components/dynamicInput.js";
+import { DuxFormEditorSettingPage as D } from "./base/setting.js";
+import { duxFormEditorCascader as F } from "./components/cascader.js";
+import { duxFormEditorCascaderAsync as g } from "./components/cascaderAsync.js";
+import { duxFormEditorCheckbox as v } from "./components/checkbox.js";
+import { duxFormEditorColor as S } from "./components/color.js";
+import { duxFormEditorDate as A } from "./components/date.js";
+import { duxFormEditorDynamicInput as h } from "./components/dynamicInput.js";
 import { duxFormEditorDynamicTags as k } from "./components/dynamicTags.js";
-import { duxFormEditorAIEditor as A } from "./components/editor.js";
-import { duxFormEditorFileUpload as I } from "./components/fileUpload.js";
-import { duxFormEditorImageUpload as h } from "./components/imageUpload.js";
-import { duxFormEditorInput as j } from "./components/input.js";
+import { duxFormEditorAIEditor as C } from "./components/editor.js";
+import { duxFormEditorFileUpload as P } from "./components/fileUpload.js";
+import { duxFormEditorImageUpload as I } from "./components/imageUpload.js";
+import { duxFormEditorInput as w } from "./components/input.js";
 import { duxFormEditorInputNumber as T } from "./components/inputNumber.js";
-import { duxFormEditorMentionAsync as w } from "./components/mentionAsync.js";
+import { duxFormEditorMentionAsync as j } from "./components/mentionAsync.js";
 import { duxFormEditorRadio as N } from "./components/radio.js";
 import { duxFormEditorRegion as O } from "./components/region.js";
-import { duxFormEditorSelect as _ } from "./components/select.js";
-import { duxFormEditorSelectAsync as R } from "./components/selectAsync.js";
-import { duxFormEditorSider as M } from "./components/sider.js";
-import { duxFormEditorSwitch as U } from "./components/switch.js";
+import { duxFormEditorSelect as U } from "./components/select.js";
+import { duxFormEditorSelectAsync as _ } from "./components/selectAsync.js";
+import { duxFormEditorSider as R } from "./components/sider.js";
+import { duxFormEditorSwitch as M } from "./components/switch.js";
 import { duxFormEditorTime as V } from "./components/time.js";
 import { duxFormEditorTransferAsync as B } from "./components/transferAsync.js";
 import { duxFormEditorTreeSelect as L } from "./components/treeSelect.js";
@@ -89,19 +89,19 @@ import "dayjs";
 import { useModal as q } from "../../hooks/modal.js";
 import "@tanstack/vue-query";
 import "pinia";
-function p(m) {
-  return typeof m == "function" || Object.prototype.toString.call(m) === "[object Object]" && !x(m);
+function n(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !x(e);
 }
-const Ir = /* @__PURE__ */ f({
+const Pr = /* @__PURE__ */ f({
   name: "DuxFormEditor",
   props: {
     onSave: Function
   },
-  extends: l,
-  setup(m) {
+  extends: a,
+  setup(e) {
     const {
       t: o
-    } = F(), d = q(), c = u(() => [{
+    } = b(), d = q(), l = c(() => [{
       name: "form",
       label: o("components.formEditor.groups.form"),
       icon: "i-tabler:forms"
@@ -113,30 +113,60 @@ const Ir = /* @__PURE__ */ f({
       name: "async",
       label: o("components.formEditor.groups.async"),
       icon: "i-tabler:loader"
-    }]), s = u(() => [j(o), T(o), A(o), M(o), C(o), V(o), D(o), S(o), N(o), U(o), P(o), k(o), h(o), I(o), _(o), y(o), L(o), O(o), R(o), b(o), W(o), B(o), w(o)]);
-    return () => t(l, E(m, {
-      groups: c.value,
-      components: s.value,
+    }]), u = c(() => {
+      const r = [w(o), T(o), C(o), R(o), A(o), V(o), S(o), v(o), N(o), M(o), h(o), k(o), I(o), P(o), U(o), F(o), L(o), O(o), _(o), g(o), W(o), B(o), j(o)], i = {
+        "dux-input": o("components.formEditor.toolbarDescriptions.input"),
+        "dux-input-number": o("components.formEditor.toolbarDescriptions.inputNumber"),
+        "dux-editor": o("components.formEditor.toolbarDescriptions.aiEditor"),
+        sider: o("components.formEditor.toolbarDescriptions.slider"),
+        "dux-date": o("components.formEditor.toolbarDescriptions.date"),
+        "dux-time": o("components.formEditor.toolbarDescriptions.time"),
+        "dux-color": o("components.formEditor.toolbarDescriptions.color"),
+        "dux-checkbox": o("components.formEditor.toolbarDescriptions.checkbox"),
+        "dux-radio": o("components.formEditor.toolbarDescriptions.radio"),
+        "dux-switch": o("components.formEditor.toolbarDescriptions.switch"),
+        "dux-dynamic-input": o("components.formEditor.toolbarDescriptions.dynamicInput"),
+        "dynamic-tags": o("components.formEditor.toolbarDescriptions.dynamicTags"),
+        "dux-image-upload": o("components.formEditor.toolbarDescriptions.imageUpload"),
+        "dux-file-upload": o("components.formEditor.toolbarDescriptions.fileUpload"),
+        "dux-select": o("components.formEditor.toolbarDescriptions.select"),
+        "dux-cascader": o("components.formEditor.toolbarDescriptions.cascader"),
+        "tree-select": o("components.formEditor.toolbarDescriptions.treeSelect"),
+        region: o("components.formEditor.toolbarDescriptions.region"),
+        "select-async": o("components.formEditor.toolbarDescriptions.selectAsync"),
+        "dux-cascader-async": o("components.formEditor.toolbarDescriptions.cascaderAsync"),
+        "tree-select-async": o("components.formEditor.toolbarDescriptions.treeSelectAsync"),
+        "transfer-async": o("components.formEditor.toolbarDescriptions.transferAsync"),
+        "mention-async": o("components.formEditor.toolbarDescriptions.mentionAsync")
+      };
+      return r.map((t) => ({
+        ...t,
+        description: t.description || i[t.name] || ""
+      }));
+    });
+    return () => m(a, E(e, {
+      groups: l.value,
+      components: u.value,
       settingPage: {
-        component: (r) => t(v, r, null),
+        component: (r) => m(D, r, null),
         default: {
           labelPlacement: "left"
         }
       },
       previewWrapper: (r, i) => {
-        const e = u(() => i?.value?.value?.config);
-        return t(g, {
-          labelPlacement: e.value?.labelPlacement || "left",
+        const t = c(() => i?.value?.value?.config);
+        return m(y, {
+          labelPlacement: t.value?.labelPlacement || "left",
           class: "h-full"
-        }, p(r) ? r : {
+        }, n(r) ? r : {
           default: () => [r]
         });
       },
       actionRender: (r) => {
-        let i, e, n;
-        return t("div", {
+        let i, t, p;
+        return m("div", {
           class: "flex flex-col gap-2"
-        }, [t(a, {
+        }, [m(s, {
           type: "primary",
           secondary: !0,
           block: !0,
@@ -149,9 +179,9 @@ const Ir = /* @__PURE__ */ f({
               }
             });
           }
-        }, p(i = o("components.formEditor.main.actions.jsonOutput")) ? i : {
+        }, n(i = o("components.formEditor.main.actions.jsonOutput")) ? i : {
           default: () => [i]
-        }), t(a, {
+        }), m(s, {
           type: "info",
           secondary: !0,
           block: !0,
@@ -165,21 +195,21 @@ const Ir = /* @__PURE__ */ f({
               }
             });
           }
-        }, p(e = o("common.preview")) ? e : {
-          default: () => [e]
-        }), t(a, {
+        }, n(t = o("common.preview")) ? t : {
+          default: () => [t]
+        }), m(s, {
           type: "primary",
           block: !0,
           onClick: () => {
-            m.onSave?.(r?.value?.value || {});
+            e.onSave?.(r?.value?.value || {});
           }
-        }, p(n = o("components.formEditor.main.actions.save")) ? n : {
-          default: () => [n]
+        }, n(p = o("components.formEditor.main.actions.save")) ? p : {
+          default: () => [p]
         })]);
       }
     }), null);
   }
 });
 export {
-  Ir as DuxFormEditor
+  Pr as DuxFormEditor
 };