@duxweb/dvha-pro 1.0.25 → 1.0.27

package/dist/esm/components/data/dynamicSelect.js

@@ -21,8 +21,6 @@ import "vue-cropper";
 import "jinrishici";
 import "lodash-es";
 import { DuxDynamicData as S } from "./dynamicData.js";
-import "aieditor";
-import "vee-validate";
 import "@vee-validate/i18n";
 import "colorizr";
 import "echarts";
@@ -32,19 +30,22 @@ import "@unocss/preset-typography";
 import "unocss/preset-wind4";
 import "@vee-validate/i18n/dist/locale/en.json";
 import "@vee-validate/i18n/dist/locale/zh_CN.json";
+import "vee-validate";
 import "vue-command-palette";
 import "@duxweb/dvha-naiveui";
 import "../../pages/page404.js";
+import "vue-draggable-plus";
+import "short-unique-id";
+import "aieditor";
+import { useModal as w } from "../../hooks/modal.js";
 import "@iconify-json/tabler/icons.json";
-import "../image/elements/index.js";
+import "../posterEditor/elements/index.js";
 import "fabric";
 import "mime";
-import "vue-draggable-plus";
-import { useModal as w } from "../../hooks/modal.js";
 import "dayjs";
 import "@tanstack/vue-query";
 import "pinia";
-const st = /* @__PURE__ */ f({
+const vt = /* @__PURE__ */ f({
   name: "DuxDynamicSelect",
   props: {
     rowKey: {
@@ -117,5 +118,5 @@ const st = /* @__PURE__ */ f({
   }
 });
 export {
-  st as DuxDynamicSelect
+  vt as DuxDynamicSelect
 };

package/dist/esm/components/data/selectModal.js

@@ -22,8 +22,6 @@ import K from "../modal/modalPage.js";
 import "jinrishici";
 import "lodash-es";
 import "vue-draggable-plus";
-import "aieditor";
-import "vee-validate";
 import "@vee-validate/i18n";
 import "colorizr";
 import "echarts";
@@ -33,11 +31,14 @@ import "@unocss/preset-typography";
 import "unocss/preset-wind4";
 import "@vee-validate/i18n/dist/locale/en.json";
 import "@vee-validate/i18n/dist/locale/zh_CN.json";
+import "vee-validate";
 import "vue-command-palette";
 import "@duxweb/dvha-naiveui";
 import "../../pages/page404.js";
+import "short-unique-id";
+import "aieditor";
 import "@iconify-json/tabler/icons.json";
-import "../image/elements/index.js";
+import "../posterEditor/elements/index.js";
 import "fabric";
 import "mime";
 import "dayjs";
@@ -47,7 +48,7 @@ import "pinia";
 function c(t) {
   return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !z(t);
 }
-const xt = /* @__PURE__ */ y({
+const wt = /* @__PURE__ */ y({
   name: "Select",
   props: {
     path: String,
@@ -141,5 +142,5 @@ const xt = /* @__PURE__ */ y({
   }
 });
 export {
-  xt as default
+  wt as default
 };

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

@@ -0,0 +1,175 @@
+import { createVNode as n, defineComponent as u, computed as m, 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 { DuxGrid as b } from "../../layout/grid.js";
+import "vue-router";
+import "@overlastic/vue";
+import "vue-echarts";
+import "vue3-ace-editor";
+import "ace-builds/src-noconflict/mode-vue";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-json5";
+import "ace-builds/src-noconflict/theme-tomorrow_night";
+import "ace-builds/src-noconflict/theme-tomorrow";
+import "ace-builds/src-noconflict/ext-searchbox";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-snippets";
+import "vue-cropper";
+import "jinrishici";
+import "lodash-es";
+import "vue-draggable-plus";
+import { DuxWidgetEditorPreview as E } from "../editor/preview.js";
+import { WidgetEditorSettingCard as y } from "../editor/setting.js";
+import "short-unique-id";
+import "aieditor";
+import "vee-validate";
+import "@vee-validate/i18n";
+import "colorizr";
+import "echarts";
+import "@ant-design/colors";
+import "@unocss/preset-icons/browser";
+import "@unocss/preset-typography";
+import "unocss/preset-wind4";
+import "@vee-validate/i18n/dist/locale/en.json";
+import "@vee-validate/i18n/dist/locale/zh_CN.json";
+import "vue-command-palette";
+import "@duxweb/dvha-naiveui";
+import "../../../pages/page404.js";
+import "@iconify-json/tabler/icons.json";
+import "../../posterEditor/elements/index.js";
+import "fabric";
+import "mime";
+import "dayjs";
+import "@tanstack/vue-query";
+import "pinia";
+function x(o) {
+  return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !g(o);
+}
+const C = /* @__PURE__ */ u({
+  name: "WidgetEditorGrid",
+  props: {
+    options: Object,
+    children: {
+      type: Array,
+      default: []
+    },
+    onChildren: Function
+  },
+  setup(o) {
+    const r = m(() => o.options?.col || 2), e = m(() => {
+      const t = [...o.children || []], i = r.value;
+      for (; t.length < i; )
+        t.push([]);
+      for (let l = 0; l < i; l++)
+        Array.isArray(t[l]) || (t[l] = []);
+      return t;
+    });
+    return () => {
+      let t;
+      return n(b, {
+        cols: r.value,
+        spac: o.options?.spac
+      }, x(t = e.value.map((i, l) => {
+        const d = i;
+        return n("div", {
+          key: l,
+          class: v({
+            "rounded border border-dashed border-accented": !d?.length
+          })
+        }, [n(E, {
+          modelValue: d,
+          onUpdate: (s) => {
+            const p = [...e.value];
+            p[l] = s, o.onChildren?.(p);
+          }
+        }, null)]);
+      })) ? t : {
+        default: () => [t]
+      });
+    };
+  }
+}), G = /* @__PURE__ */ u({
+  name: "WidgetEditorGridSetting",
+  props: {
+    value: {
+      type: Object,
+      default: () => ({
+        col: 2,
+        spac: 2
+      })
+    }
+  },
+  setup(o, {
+    emit: r
+  }) {
+    const {
+      t: e
+    } = f(), t = h(o, "value", r);
+    return () => n(y, {
+      title: e("components.designEditor.grid.title"),
+      icon: "i-tabler:grid-4x4"
+    }, {
+      default: () => [n(a, {
+        label: e("components.designEditor.grid.columns"),
+        path: "col"
+      }, {
+        default: () => [n(c, {
+          value: t.value.col,
+          "onUpdate:value": (i) => t.value.col = i,
+          min: 1,
+          max: 12,
+          placeholder: e("components.designEditor.grid.columnsPlaceholder")
+        }, null)]
+      }), n(a, {
+        label: e("components.designEditor.grid.spacing"),
+        path: "spac"
+      }, {
+        default: () => [n(c, {
+          value: t.value.spac,
+          "onUpdate:value": (i) => t.value.spac = i,
+          min: 0,
+          max: 100,
+          placeholder: e("components.designEditor.grid.spacingPlaceholder")
+        }, null)]
+      })]
+    });
+  }
+});
+function j(o) {
+  const {
+    children: r,
+    convertToJsonSchema: e
+  } = o || {};
+  let t = [];
+  return r?.length && e && (t = r.flatMap((i) => Array.isArray(i) ? e(i) : [])), {
+    tag: "dux-grid",
+    attrs: {
+      cols: o?.options?.col || 2,
+      spac: o?.options?.spac || 2
+    },
+    children: t
+  };
+}
+function Et(o) {
+  return {
+    name: "dux-grid",
+    icon: "i-tabler:grid-4x4",
+    label: o("components.designEditor.grid.label"),
+    group: "layout",
+    nested: !0,
+    component: (r) => n(C, r, null),
+    setting: (r) => n(G, r, null),
+    settingDefault: {
+      col: 2,
+      spac: 2
+    },
+    json: j
+  };
+}
+export {
+  Et as duxFormEditorGrid
+};

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

@@ -0,0 +1,87 @@
+import I from "short-unique-id";
+import { ref as s, computed as x } from "vue";
+function C({ settingPage: f }) {
+  const c = s([]), i = s([]), p = s(), a = s({
+    config: f?.default || {},
+    data: []
+  }), y = () => {
+    c.value = [];
+  }, m = () => {
+    i.value = [];
+  }, A = (e) => {
+    c.value.findIndex((t) => t.name === e.name) === -1 && c.value.push(e);
+  }, g = (e) => {
+    i.value.findIndex((t) => t.name === e.name) === -1 && i.value.push(e);
+  }, D = x(() => i.value.map((e) => ({
+    name: e.name,
+    label: e.label,
+    icon: e.icon,
+    children: c.value.filter((n) => n.group === e.name)
+  }))), u = (e, n) => {
+    for (const t of n)
+      if (t) {
+        if (Array.isArray(t)) {
+          const r = u(e, t);
+          if (r)
+            return r;
+          continue;
+        }
+        if (t.key === e)
+          return t;
+        if (t.children && t.children.length) {
+          const r = u(e, t.children);
+          if (r)
+            return r;
+        }
+      }
+  }, h = (e) => {
+    if (e)
+      return u(e, a.value.data);
+  }, { randomUUID: v } = new I({ length: 10 }), d = (e) => e?.map((n) => {
+    if (n)
+      return Array.isArray(n) ? d(n) : (n.key = v(), n.children && n.children.length > 0 && (n.children = d(n.children)), n);
+  }).filter((n) => n !== void 0), l = (e, n, t) => {
+    for (const r of e)
+      if (r) {
+        if (Array.isArray(r)) {
+          const o = l(r, n, r);
+          if (o)
+            return o;
+          continue;
+        }
+        if (r.key === n)
+          return t;
+        if (r.children && r.children.length) {
+          const o = l(r.children, n, r);
+          if (o)
+            return o;
+        }
+      }
+  };
+  return {
+    clearGroup: m,
+    clearComponent: y,
+    addComponent: A,
+    addGroup: g,
+    tree: D,
+    components: c,
+    group: i,
+    getData: h,
+    selected: p,
+    value: a,
+    copyData: (e, n) => {
+      const t = h(e), r = JSON.parse(JSON.stringify(t));
+      r.key = v(), r.children && r.children.length > 0 && (r.children = d(r.children));
+      const o = l(a.value.data, e);
+      o ? Array.isArray(o) ? o.splice(n + 1, 0, r) : o.children?.splice(n + 1, 0, r) : a.value.data?.splice(n + 1, 0, r);
+    },
+    deleteData: (e, n) => {
+      const t = l(a.value.data, e);
+      t ? Array.isArray(t) ? t.splice(n, 1) : t.children?.splice(n, 1) : a.value.data?.splice(n, 1), p.value = void 0;
+    },
+    settingPage: f
+  };
+}
+export {
+  C as useEditor
+};

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

@@ -0,0 +1,65 @@
+import { defineComponent as c, inject as u, createVNode as l, Fragment as i, mergeProps as p } from "vue";
+import s from "clsx";
+import { VueDraggable as v } from "vue-draggable-plus";
+const f = /* @__PURE__ */ c({
+  name: "DuxWidgetEditorPreview",
+  props: {
+    class: String,
+    select: String,
+    modelValue: Array,
+    onUpdate: Function,
+    onSelect: Function
+  },
+  setup(r) {
+    const o = u("editor.use");
+    return () => l(i, null, [l(v, p({
+      modelValue: r.modelValue || [],
+      animation: 150,
+      group: "widget",
+      handle: ".editor-handle",
+      class: r.class || s(["h-full flex flex-col gap-2", !r.modelValue || r.modelValue?.length === 0 ? "p-2" : ""])
+    }, {
+      "onUpdate:modelValue": (e) => {
+        r.onUpdate?.(e);
+      }
+    }), {
+      default: () => [r.modelValue?.map((e, d) => {
+        const a = o?.components?.value?.find((t) => t.name === e.name), n = {
+          options: e.options
+        };
+        return a?.nested && (n.children = e.children || [], n.onChildren = (t) => {
+          e.children = t;
+        }), l("div", {
+          class: s(["border p-2 rounded-sm relative w-full", o?.selected.value === e.key ? "bg-primary/10 border-primary border-solid" : "border-accented border-dashed"]),
+          key: e.key,
+          onClick: (t) => {
+            t.stopPropagation(), o?.selected && (o.selected.value = e.key);
+          }
+        }, [l("div", null, [a?.component(n)]), o?.selected.value === e.key && l(i, null, [l("div", {
+          class: "absolute right-0 bottom-0  bg-primary flex px-1 rounded-tl z-1"
+        }, [l("div", {
+          class: "p-1 text-inverted cursor-pointer  hover:text-inverted/80",
+          onClick: () => {
+            o.copyData(e.key, d);
+          }
+        }, [l("div", {
+          class: "i-tabler:copy"
+        }, null)]), l("div", {
+          class: "p-1 text-inverted  cursor-pointer hover:text-inverted/80"
+        }, [l("div", {
+          class: "i-tabler:trash-x",
+          onClick: () => {
+            o?.deleteData(e.key, d);
+          }
+        }, null)])]), l("div", {
+          class: "absolute left-0 top-0  bg-primary p-1 text-inverted rounded-br z-1 editor-handle"
+        }, [l("div", {
+          class: "i-tabler:arrows-move "
+        }, null)])])]);
+      })]
+    })]);
+  }
+});
+export {
+  f as DuxWidgetEditorPreview
+};

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

@@ -0,0 +1,98 @@
+import { defineComponent as m, inject as l, computed as p, createVNode as e } from "vue";
+import "clsx";
+import "naive-ui";
+import "vue-echarts";
+import "@duxweb/dvha-core";
+import "vue-router";
+import "@overlastic/vue";
+import "dayjs";
+import "mime";
+import "lodash-es";
+import "@tanstack/vue-query";
+import "@duxweb/dvha-naiveui";
+import "@vueuse/core";
+import "pinia";
+import "vue3-ace-editor";
+import "ace-builds/src-noconflict/mode-vue";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-json5";
+import "ace-builds/src-noconflict/theme-tomorrow_night";
+import "ace-builds/src-noconflict/theme-tomorrow";
+import "ace-builds/src-noconflict/ext-searchbox";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-snippets";
+import "vue-cropper";
+import "jinrishici";
+import "vue-draggable-plus";
+import "@vee-validate/i18n";
+import "colorizr";
+import "echarts";
+import "@ant-design/colors";
+import "@unocss/preset-icons/browser";
+import "@unocss/preset-typography";
+import "unocss/preset-wind4";
+import "@vee-validate/i18n/dist/locale/en.json";
+import "@vee-validate/i18n/dist/locale/zh_CN.json";
+import "vee-validate";
+import "vue-command-palette";
+import "../../../pages/page404.js";
+import "short-unique-id";
+import "aieditor";
+import { DuxFormLayout as a } from "../../form/formLayout.js";
+import "@iconify-json/tabler/icons.json";
+import "../../posterEditor/elements/index.js";
+import "fabric";
+const ot = /* @__PURE__ */ m({
+  name: "WidgetEditorSetting",
+  props: {
+    actionRender: Function
+  },
+  setup(r) {
+    const t = l("editor.use"), o = p(() => t?.getData(t.selected.value)), n = p(() => t?.components.value?.find((i) => i.name === o.value?.name));
+    return () => e("div", {
+      class: "flex-none  p-2 max-w-full w-220px overflow-y-auto bg-default",
+      key: o.value?.key
+    }, [n.value?.setting?.({
+      value: o.value?.options,
+      "update:modelValue": (i) => {
+        o?.value && (o.value.options = i);
+      }
+    }) || e("div", {
+      class: "flex flex-col gap-2 h-full"
+    }, [e("div", {
+      class: "flex-1 min-h-0"
+    }, [t?.settingPage?.component?.({
+      value: t.value.value.config,
+      "update:modelValue": (i) => {
+        t.value.value.config = i;
+      }
+    })]), r?.actionRender?.(t)])]);
+  }
+}), it = /* @__PURE__ */ m({
+  name: "WidgetEditorSettingCard",
+  props: {
+    title: String,
+    icon: String
+  },
+  setup(r, {
+    slots: t
+  }) {
+    return () => e("div", {
+      class: "flex flex-col"
+    }, [e("div", {
+      class: "bg-elevated rounded py-2 px-4 flex justify-center items-center gap-2"
+    }, [e("div", null, [r.title])]), e("div", {
+      class: "py-4 flex-1"
+    }, [e(a, {
+      labelPlacement: "top"
+    }, {
+      default: () => [t.default?.()]
+    })])]);
+  }
+});
+export {
+  ot as WidgetEditorSetting,
+  it as WidgetEditorSettingCard
+};

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

@@ -0,0 +1,161 @@
+import { defineComponent as f, provide as g, watch as d, ref as v, createVNode as a } from "vue";
+import { useI18n as x } 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 { 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 R = /* @__PURE__ */ f({
+  name: "DuxDesignEditor",
+  props: {
+    data: Object,
+    onUpdateData: Function,
+    groups: Array,
+    components: Array,
+    settingPage: Object,
+    actionRender: Function,
+    previewWrapper: Function
+  },
+  setup(r) {
+    const {
+      t: o
+    } = x(), t = k({
+      settingPage: r.settingPage
+    });
+    g("editor.use", t), d([() => r.components, () => r.groups], () => {
+      t.clearGroup(), t.clearComponent(), t.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);
+      });
+    }, {
+      immediate: !0,
+      deep: !0
+    });
+    const l = v(), {
+      randomUUID: p
+    } = new w({
+      length: 10
+    }), m = (e) => ({
+      key: p(),
+      name: e.name,
+      options: i(e.settingDefault)
+    });
+    return d(() => r.data, (e) => {
+      const n = r.settingPage?.default || {};
+      t.value.value = {
+        config: {
+          ...n,
+          ...i(e?.config || {})
+        },
+        data: i(e?.data || [])
+      };
+    }, {
+      deep: !0,
+      immediate: !0
+    }), d(() => t.value.value, (e) => {
+      e !== r.data && r.onUpdateData?.(e);
+    }, {
+      deep: !0
+    }), () => a(y, {
+      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", {
+          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, {
+          modelValue: e.children || [],
+          animation: 150,
+          group: {
+            name: "widget",
+            pull: "clone",
+            put: !1
+          },
+          sort: !1,
+          clone: m,
+          class: "grid grid-cols-2 items-start gap-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",
+        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", {
+        class: "max-w-2xl w-full flex-1 bg-default shadow p-2",
+        onClick: () => {
+          t.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)])]
+    });
+  }
+});
+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 {
+  R as DuxDesignEditor
+};