@duxweb/dvha-pro 1.0.44 → 1.0.46

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

@@ -51,6 +51,9 @@ import "@duxweb/dvha-naiveui";
 import "../../pages/page404.js";
 import "short-unique-id";
 import "aieditor";
+import "@vue-flow/core";
+import "@vue-flow/background";
+/* empty css                      */
 import "mime";
 import "@iconify-json/tabler/icons.json";
 import "../posterEditor/elements/index.js";
@@ -62,7 +65,7 @@ import "pinia";
 function c(t) {
   return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !z(t);
 }
-const Vt = /* @__PURE__ */ y({
+const It = /* @__PURE__ */ y({
   name: "Select",
   props: {
     path: String,
@@ -156,5 +159,5 @@ const Vt = /* @__PURE__ */ y({
   }
 });
 export {
-  Vt as default
+  It as default
 };

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

@@ -26,6 +26,7 @@ import { DuxWidgetEditorPreview as E } from "../editor/preview.js";
 import { WidgetEditorSettingCard as y } from "../editor/setting.js";
 import "short-unique-id";
 import "aieditor";
+import "@vue-flow/core";
 import "vee-validate";
 import "@vee-validate/i18n";
 import "colorizr";
@@ -53,6 +54,8 @@ import "@vee-validate/i18n/dist/locale/zh_CN.json";
 import "vue-command-palette";
 import "@duxweb/dvha-naiveui";
 import "../../../pages/page404.js";
+import "@vue-flow/background";
+/* empty css                         */
 import "mime";
 import "@iconify-json/tabler/icons.json";
 import "../../posterEditor/elements/index.js";
@@ -168,7 +171,7 @@ function j(o) {
     children: t
   };
 }
-function Dt(o) {
+function Ut(o) {
   return {
     name: "dux-grid",
     icon: "i-tabler:grid-4x4",
@@ -185,5 +188,5 @@ function Dt(o) {
   };
 }
 export {
-  Dt as duxFormEditorGrid
+  Ut as duxFormEditorGrid
 };

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

@@ -54,11 +54,14 @@ import "vue-command-palette";
 import "../../../pages/page404.js";
 import "short-unique-id";
 import "aieditor";
+import "@vue-flow/core";
 import { DuxFormLayout as a } from "../../form/formLayout.js";
+import "@vue-flow/background";
+/* empty css                         */
 import "@iconify-json/tabler/icons.json";
 import "../../posterEditor/elements/index.js";
 import "fabric";
-const gt = /* @__PURE__ */ m({
+const St = /* @__PURE__ */ m({
   name: "WidgetEditorSetting",
   props: {
     actionRender: Function
@@ -84,7 +87,7 @@ const gt = /* @__PURE__ */ m({
       }
     })]), e?.actionRender?.(t)])]);
   }
-}), xt = /* @__PURE__ */ m({
+}), Ct = /* @__PURE__ */ m({
   name: "WidgetEditorSettingCard",
   props: {
     title: String,
@@ -107,6 +110,6 @@ const gt = /* @__PURE__ */ m({
   }
 });
 export {
-  gt as WidgetEditorSetting,
-  xt as WidgetEditorSettingCard
+  St as WidgetEditorSetting,
+  Ct as WidgetEditorSettingCard
 };

package/dist/esm/components/flowEditor/components/jsonEditor.js

@@ -0,0 +1,53 @@
+import { defineComponent as c, ref as p, createVNode as o, Fragment as m, createTextVNode as l } from "vue";
+import { useMessage as f, NButton as u } from "naive-ui";
+import { useI18n as E } from "@duxweb/dvha-core";
+import { DuxCodeEditor as C } from "../../code/code.js";
+import "@overlastic/vue";
+import v from "../../modal/modalPage.js";
+const N = /* @__PURE__ */ c({
+  name: "FlowJsonEditor",
+  props: {
+    data: {
+      type: Object,
+      required: !0
+    },
+    onConfirm: {
+      type: Function
+    }
+  },
+  setup(r, {
+    emit: i
+  }) {
+    const n = f(), {
+      t: a
+    } = E(), t = p(JSON.stringify(r.data, null, 2)), s = () => {
+      navigator.clipboard.writeText(t.value), n.success(a("components.flowEditor.jsonEditor.copiedToClipboard") || "");
+    }, d = () => {
+      try {
+        const e = JSON.parse(t.value);
+        r.onConfirm && r.onConfirm(e), n.success(a("components.flowEditor.jsonEditor.dataApplied") || ""), i("close");
+      } catch {
+        n.error(a("components.flowEditor.jsonEditor.jsonFormatError") || "");
+      }
+    };
+    return () => o(v, null, {
+      default: () => o("div", null, [o(C, {
+        value: t.value,
+        "onUpdate:value": (e) => t.value = e
+      }, null)]),
+      footer: () => o(m, null, [o(u, {
+        onClick: s
+      }, {
+        default: () => [l("复制数据")]
+      }), o(u, {
+        onClick: d,
+        type: "primary"
+      }, {
+        default: () => [l("应用数据")]
+      })])
+    });
+  }
+});
+export {
+  N as default
+};

package/dist/esm/components/flowEditor/components/nodeCard.js

@@ -0,0 +1,160 @@
+import { defineComponent as k, inject as v, createVNode as e } from "vue";
+import { Position as s, useVueFlow as x, Handle as c } from "@vue-flow/core";
+import d from "clsx";
+import { NDropdown as C } from "naive-ui";
+import { useI18n as N } from "@duxweb/dvha-core";
+import { defaultNodes as D } from "../nodes/index.js";
+const R = /* @__PURE__ */ k({
+  name: "FlowNodeCard",
+  props: {
+    nodeProps: {
+      type: Object,
+      required: !0
+    },
+    handlePosition: {
+      type: Object,
+      default: () => ({
+        source: s.Right,
+        target: s.Left
+      })
+    },
+    showTargetHandle: {
+      type: Boolean,
+      default: !0
+    },
+    showSourceHandle: {
+      type: Boolean,
+      default: !0
+    },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    onClick: {
+      type: Function,
+      default: void 0
+    },
+    onDoubleClick: {
+      type: Function,
+      default: void 0
+    },
+    // NodeToolbar相关配置
+    showToolbar: {
+      type: Boolean,
+      default: !0
+    },
+    toolbarPosition: {
+      type: String,
+      default: "top"
+    },
+    toolbarOffset: {
+      type: Number,
+      default: 10
+    }
+  },
+  setup(o, {
+    slots: r
+  }) {
+    const u = v("flowNodes", {}), {
+      removeNodes: p,
+      addNodes: f,
+      findNode: b
+    } = x(), {
+      t: i
+    } = N(), m = (t) => {
+      o.onClick && o.onClick(t);
+    }, y = (t) => {
+      o.onDoubleClick && o.onDoubleClick(t);
+    }, g = (t) => {
+      const a = o.nodeProps.id;
+      switch (t) {
+        case "delete": {
+          p([a]);
+          break;
+        }
+        case "copy": {
+          const n = b(a);
+          if (n) {
+            const l = {
+              ...n,
+              id: `${a}-copy-${Date.now()}`,
+              position: {
+                x: n.position.x + 50,
+                y: n.position.y + 50
+              },
+              data: {
+                ...n.data,
+                label: `${n.data.label} (copy)`
+              },
+              selected: !1
+            };
+            f([l]);
+          }
+          break;
+        }
+      }
+    };
+    return () => {
+      const {
+        data: t,
+        selected: a,
+        type: n
+      } = o.nodeProps, l = u || D, w = (l?.value || l)[n || ""]?.meta?.style || {};
+      return e("div", {
+        class: d(["relative rounded-md border transition-all cursor-pointer min-w-60", "bg-default dark:bg-default/80  backdrop-blur shadow-lg shadow-gray-100 dark:shadow-gray-950/20 hover:shadow-md", a ? "border-primary" : "border-primary-900/20"]),
+        onClick: m,
+        onDblclick: y
+      }, [e("div", {
+        class: "bg-linear-to-b from-primary/10 dark:from-transparent via-transparent to-transparent rounded-t p-4 flex items-center justify-between"
+      }, [e("div", {
+        class: "flex gap-1.5 items-center"
+      }, [t.icon && e("div", {
+        class: d(["rounded flex-none p-1", w.iconBgClass || "bg-primary"])
+      }, [e("div", {
+        class: d(["size-3 text-white", t.icon])
+      }, null)]), e("div", {
+        class: "text-sm truncate"
+      }, [t.label])]), e(C, {
+        trigger: "click",
+        options: [{
+          label: i("components.flowEditor.nodeCard.delete") || "",
+          key: "delete",
+          icon: () => e("div", {
+            class: "i-tabler:trash text-sm"
+          }, null)
+        }, {
+          label: i("components.flowEditor.nodeCard.copy") || "",
+          key: "copy",
+          icon: () => e("div", {
+            class: "i-tabler:copy text-sm"
+          }, null)
+        }],
+        onSelect: g
+      }, {
+        default: () => [e("div", {
+          class: "hover:bg-black/5 p-1 rounded cursor-pointer transition-colors",
+          onClick: (h) => h.stopPropagation()
+        }, [e("div", {
+          class: "i-tabler:dots text-sm text-gray-500"
+        }, null)])]
+      })]), e("div", {
+        class: "p-4 pt-0 text-xs text-muted"
+      }, [r.default ? r.default() : e("div", {
+        class: "bg-elevated rounded p-2"
+      }, [t.description])]), o.showTargetHandle && e(c, {
+        type: "target",
+        position: o.handlePosition.target,
+        connectable: !0,
+        class: "!bg-primary !border-2 !border-white !size-2.5 !rounded-full"
+      }, null), o.showSourceHandle && e(c, {
+        type: "source",
+        position: o.handlePosition.source,
+        connectable: !0,
+        class: "!bg-primary !border-2 !border-white !size-2.5 !rounded-full"
+      }, null)]);
+    };
+  }
+});
+export {
+  R as FlowNodeCard
+};

package/dist/esm/components/flowEditor/components/setting.js

@@ -0,0 +1,319 @@
+import { defineComponent as P, computed as w, ref as x, watch as m, createVNode as e } from "vue";
+import { useI18n as T } from "@duxweb/dvha-core";
+import { useVueFlow as U, MarkerType as z } from "@vue-flow/core";
+import k from "clsx";
+import { useMessage as A, NScrollbar as G, NButton as c, NRadioGroup as H, NRadio as h } from "naive-ui";
+import "vue-router";
+import "@overlastic/vue";
+import "vue-echarts";
+import "@vueuse/core";
+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 "@vee-validate/i18n";
+import "colorizr";
+import "echarts";
+import "highlight.js/lib/core";
+import "highlight.js/lib/languages/bash";
+import "highlight.js/lib/languages/css";
+import "highlight.js/lib/languages/go";
+import "highlight.js/lib/languages/java";
+import "highlight.js/lib/languages/javascript";
+import "highlight.js/lib/languages/json";
+import "highlight.js/lib/languages/markdown";
+import "highlight.js/lib/languages/php";
+import "highlight.js/lib/languages/python";
+import "highlight.js/lib/languages/shell";
+import "highlight.js/lib/languages/sql";
+import "highlight.js/lib/languages/typescript";
+import "highlight.js/lib/languages/xml";
+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 "@duxweb/dvha-naiveui";
+import "../../../pages/page404.js";
+import "short-unique-id";
+import "aieditor";
+import { DuxFormLayout as L } from "../../form/formLayout.js";
+import { DuxFormItem as C } from "../../form/formItem.js";
+import "@vue-flow/background";
+/* empty css           */
+import { useModal as W } from "../../../hooks/modal.js";
+import "mime";
+import "@iconify-json/tabler/icons.json";
+import "../../posterEditor/elements/index.js";
+import "fabric";
+import "dayjs";
+import "@tanstack/vue-query";
+import "pinia";
+const y = ({
+  icon: s,
+  iconBgClass: d = "bg-primary",
+  title: u,
+  description: o
+}) => e("div", {
+  class: "p-4 border-b border-default"
+}, [e("div", {
+  class: "flex gap-2 items-center"
+}, [s && e("div", {
+  class: k(["rounded p-2 flex-shrink-0", d])
+}, [e("div", {
+  class: k(["size-6 text-white", s])
+}, null)]), e("div", {
+  class: "flex-1 min-w-0"
+}, [e("h3", {
+  class: "text-base font-medium"
+}, [u]), o && e("p", {
+  class: "text-sm text-muted mt-1"
+}, [o])])])]), lt = /* @__PURE__ */ P({
+  name: "FlowSetting",
+  props: {
+    nodes: {
+      type: Object,
+      default: () => ({})
+    },
+    modelValue: {
+      type: Object,
+      default: () => ({
+        nodes: [],
+        edges: []
+      })
+    },
+    onSave: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(s, {
+    emit: d,
+    slots: u
+  }) {
+    const {
+      t: o
+    } = T(), {
+      getSelectedNodes: S,
+      getSelectedEdges: N,
+      updateNodeData: F,
+      updateEdgeData: D,
+      getNodes: f,
+      getEdges: v,
+      removeEdges: V
+    } = U(), g = A(), O = W(), l = w(() => {
+      const t = S.value;
+      return t.length === 1 ? t[0] : null;
+    }), r = w(() => {
+      const t = N.value;
+      return t.length === 1 ? t[0] : null;
+    }), a = w(() => !l.value || !l.value.type ? null : s.nodes[l.value.type]), p = x({}), n = x({});
+    m(l, (t) => {
+      t ? p.value = {
+        ...t.data
+      } : p.value = {};
+    }, {
+      immediate: !0
+    }), m(r, (t) => {
+      t ? n.value = {
+        ...t.data
+      } : n.value = {};
+    }, {
+      immediate: !0
+    }), m(p, (t) => {
+      l.value && (F(l.value.id, t), d("update:modelValue", {
+        nodes: f.value,
+        edges: v.value
+      }));
+    }, {
+      deep: !0,
+      flush: "post"
+    }), m(n, (t) => {
+      if (r.value) {
+        D(r.value.id, t);
+        const i = r.value;
+        if (i && t.type) {
+          const b = {
+            success: {
+              stroke: "#10b981",
+              markerColor: "#10b981"
+            },
+            // 通过 - 绿色
+            error: {
+              stroke: "#ef4444",
+              markerColor: "#ef4444"
+            }
+            // 退回 - 红色
+          }, E = b[t.type] || b.success, I = i.style || {};
+          i.style = Object.assign({}, I, {
+            stroke: E.stroke,
+            strokeWidth: 2
+          });
+          const J = i.markerEnd || {};
+          i.markerEnd = Object.assign({}, J, {
+            type: z.ArrowClosed,
+            width: 12,
+            height: 12,
+            color: E.markerColor
+          });
+        }
+      }
+    }, {
+      deep: !0
+    });
+    const j = () => {
+      d("update:modelValue", {
+        nodes: [],
+        edges: []
+      }), g.success(o("components.flowEditor.flowCleared") || "");
+    }, B = () => {
+      const t = {
+        nodes: f.value,
+        edges: v.value
+      };
+      s.onSave ? s.onSave(t) : g.success(o("components.flowEditor.flowSaved") || "");
+    }, M = () => {
+      const t = {
+        nodes: f.value,
+        edges: v.value
+      };
+      O.show({
+        title: o("components.flowEditor.editFlowJSON") || "",
+        width: "600px",
+        component: () => import("./jsonEditor.js"),
+        componentProps: {
+          data: t,
+          onConfirm: (i) => {
+            d("update:modelValue", i);
+          }
+        }
+      });
+    }, R = () => {
+      r.value && (V([r.value.id]), g.success(o("components.flowEditor.edgeDeleted") || ""));
+    };
+    return () => e("div", {
+      class: "w-300px h-full flex flex-col"
+    }, [!l.value && !r.value && e(y, {
+      icon: "i-tabler:settings",
+      iconBgClass: "bg-gray-500",
+      title: o("components.flowEditor.properties") || "",
+      description: o("components.flowEditor.selectNodeOrEdge") || ""
+    }, null), l.value && e(y, {
+      icon: a.value?.meta.icon,
+      iconBgClass: a.value?.meta.style?.iconBgClass || "bg-primary",
+      title: a.value?.meta.label || "Node",
+      description: a.value?.meta.description
+    }, null), r.value && e(y, {
+      icon: "i-tabler:arrow-right",
+      iconBgClass: "bg-blue-500",
+      title: o("components.flowEditor.edgeSettings") || "",
+      description: o("components.flowEditor.edgeDescription") || ""
+    }, null), e(G, {
+      class: "flex-1 min-h-0"
+    }, {
+      default: () => [e("div", {
+        class: "p-4 space-y-4"
+      }, [!l.value && !r.value && e("div", {
+        class: "space-y-4"
+      }, [u.globalSettings?.(), e("div", {
+        class: "flex flex-col gap-2"
+      }, [e(c, {
+        onClick: M,
+        type: "default",
+        block: !0,
+        secondary: !0
+      }, {
+        icon: () => e("div", {
+          class: "i-tabler:code"
+        }, null),
+        default: () => o("components.flowEditor.editJSON") || ""
+      }), e(c, {
+        onClick: B,
+        type: "primary",
+        block: !0,
+        secondary: !0
+      }, {
+        icon: () => e("div", {
+          class: "i-tabler:device-floppy"
+        }, null),
+        default: () => o("components.flowEditor.saveFlow") || ""
+      }), e(c, {
+        onClick: j,
+        type: "warning",
+        block: !0,
+        secondary: !0
+      }, {
+        icon: () => e("div", {
+          class: "i-tabler:trash"
+        }, null),
+        default: () => o("components.flowEditor.clearFlow") || ""
+      })])]), l.value && a.value?.settingComponent && e(a.value.settingComponent, {
+        modelValue: p.value,
+        "onUpdate:modelValue": (t) => p.value = t,
+        nodeId: l.value.id,
+        nodeRegistries: s.nodes
+      }, null), r.value && e(L, {
+        labelPlacement: "top"
+      }, {
+        default: () => [e(C, {
+          label: o("components.flowEditor.connectionType") || ""
+        }, {
+          default: () => [e(H, {
+            value: n.value.type || "success",
+            onUpdateValue: (t) => {
+              n.value = {
+                ...n.value,
+                type: t
+              };
+            }
+          }, {
+            default: () => [e("div", {
+              class: "space-y-2"
+            }, [e(h, {
+              value: "success"
+            }, {
+              default: () => [e("div", {
+                class: "flex items-center gap-2"
+              }, [e("span", null, [o("components.flowEditor.pass") || ""])])]
+            }), e(h, {
+              value: "error"
+            }, {
+              default: () => [e("div", {
+                class: "flex items-center gap-2"
+              }, [e("span", null, [o("components.flowEditor.reject") || ""])])]
+            })])]
+          })]
+        }), e(C, null, {
+          default: () => [e(c, {
+            onClick: R,
+            type: "error",
+            block: !0
+          }, {
+            icon: () => e("div", {
+              class: "i-tabler:trash"
+            }, null),
+            default: () => o("components.flowEditor.deleteEdge") || ""
+          })]
+        })]
+      })])]
+    })]);
+  }
+});
+export {
+  lt as FlowSetting
+};