@duxweb/dvha-pro 1.1.27 → 1.1.29

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

@@ -1,8 +1,8 @@
-import { createVNode as n, defineComponent as u, computed as d, isVNode as g } from "vue";
+import { createVNode as n, defineComponent as s, computed as l, isVNode as g } from "vue";
 import { useI18n as f } from "@duxweb/dvha-core";
 import { useVModel as h } from "@vueuse/core";
 import v from "clsx";
-import { NFormItem as a, NInputNumber as c } from "naive-ui";
+import { NFormItem as c, NInputNumber as a } from "naive-ui";
 import { DuxGrid as b } from "../../layout/grid.js";
 import "lodash-es";
 import "vue-router";
@@ -65,10 +65,10 @@ import "../../schemaEditor/schemaEditor.js";
 import "dayjs";
 import "@tanstack/vue-query";
 import "pinia";
-function x(o) {
-  return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !g(o);
+function x(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !g(t);
 }
-const C = /* @__PURE__ */ u({
+const C = /* @__PURE__ */ s({
   name: "WidgetEditorGrid",
   props: {
     options: Object,
@@ -78,21 +78,21 @@ const C = /* @__PURE__ */ u({
     },
     onChildren: Function
   },
-  setup(o) {
-    const r = d(() => o.options?.col || 2), i = d(() => {
-      const t = [...o.children || []], e = r.value;
-      for (; t.length < e; )
-        t.push([]);
+  setup(t) {
+    const r = l(() => t.options?.col || 2), i = l(() => {
+      const o = [...t.children || []], e = r.value;
+      for (; o.length < e; )
+        o.push([]);
       for (let p = 0; p < e; p++)
-        Array.isArray(t[p]) || (t[p] = []);
-      return t;
+        Array.isArray(o[p]) || (o[p] = []);
+      return o;
     });
     return () => {
-      let t;
+      let o;
       return n(b, {
         cols: r.value,
-        spac: o.options?.spac
-      }, x(t = i.value.map((e, p) => {
+        spac: t.options?.spac
+      }, x(o = i.value.map((e, p) => {
         const m = e;
         return n("div", {
           key: p,
@@ -101,17 +101,17 @@ const C = /* @__PURE__ */ u({
           })
         }, [n(E, {
           modelValue: m,
-          onUpdate: (s) => {
-            const l = [...i.value];
-            l[p] = s, o.onChildren?.(l);
+          onUpdate: (u) => {
+            const d = [...i.value];
+            d[p] = u, t.onChildren?.(d);
           }
         }, null)]);
-      })) ? t : {
-        default: () => [t]
+      })) ? o : {
+        default: () => [o]
       });
     };
   }
-}), G = /* @__PURE__ */ u({
+}), G = /* @__PURE__ */ s({
   name: "WidgetEditorGridSetting",
   props: {
     value: {
@@ -122,34 +122,34 @@ const C = /* @__PURE__ */ u({
       })
     }
   },
-  setup(o, {
+  setup(t, {
     emit: r
   }) {
     const {
       t: i
-    } = f(), t = h(o, "value", r);
+    } = f(), o = h(t, "value", r);
     return () => n(y, {
       title: i("components.designEditor.grid.title"),
       icon: "i-tabler:grid-4x4"
     }, {
-      default: () => [n(a, {
+      default: () => [n(c, {
         label: i("components.designEditor.grid.columns"),
         path: "col"
       }, {
-        default: () => [n(c, {
-          value: t.value.col,
-          "onUpdate:value": (e) => t.value.col = e,
+        default: () => [n(a, {
+          value: o.value.col,
+          "onUpdate:value": (e) => o.value.col = e,
           min: 1,
           max: 12,
           placeholder: i("components.designEditor.grid.columnsPlaceholder")
         }, null)]
-      }), n(a, {
+      }), n(c, {
         label: i("components.designEditor.grid.spacing"),
         path: "spac"
       }, {
-        default: () => [n(c, {
-          value: t.value.spac,
-          "onUpdate:value": (e) => t.value.spac = e,
+        default: () => [n(a, {
+          value: o.value.spac,
+          "onUpdate:value": (e) => o.value.spac = e,
           min: 0,
           max: 100,
           placeholder: i("components.designEditor.grid.spacingPlaceholder")
@@ -158,26 +158,27 @@ const C = /* @__PURE__ */ u({
     });
   }
 });
-function j(o) {
+function j(t) {
   const {
     children: r,
     convertToJsonSchema: i
-  } = o || {};
-  let t = [];
-  return r?.length && i && (t = r.flatMap((e) => Array.isArray(e) ? i(e) : [])), {
+  } = t || {};
+  let o = [];
+  return r?.length && i && (o = r.flatMap((e) => Array.isArray(e) ? i(e) : [])), {
     tag: "dux-grid",
     attrs: {
-      cols: o?.options?.col || 2,
-      spac: o?.options?.spac || 2
+      cols: t?.options?.col || 2,
+      spac: t?.options?.spac || 2
     },
-    children: t
+    children: o
   };
 }
-function Mt(o) {
+function Mt(t) {
   return {
     name: "dux-grid",
     icon: "i-tabler:grid-4x4",
-    label: o("components.designEditor.grid.label"),
+    label: t("components.designEditor.grid.label"),
+    description: t("components.designEditor.grid.description") || "",
     group: "layout",
     nested: !0,
     component: (r) => n(C, r, null),

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
 };