@duxweb/dvha-pro 1.1.30 → 1.2.0

package/dist/esm/components/posterEditor/pages/RightPanel.js

@@ -1,441 +1,303 @@
-import { defineComponent as v, createVNode as e, Fragment as o, createTextVNode as c, isVNode as s } from "vue";
-import { NButton as l, NTooltip as n, NInputNumber as u, NColorPicker as f } from "naive-ui";
-import "@duxweb/dvha-core";
-import "@vueuse/core";
-import "mime";
-import "vue-router";
-import "@overlastic/vue";
-import "clsx";
-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 "@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 "@duxweb/dvha-naiveui";
-import "vue-command-palette";
-import "../../../pages/page404.js";
-import "vue-draggable-plus";
-import "short-unique-id";
-import "aieditor";
-import "@vue-flow/core";
-import "lodash-es/cloneDeep";
-import "@vue-flow/background";
-/* empty css                         */
-import "@iconify-json/tabler/icons.json";
-import "../elements/index.js";
-import "fabric";
-import { Panel as m } from "./Panel.js";
-import { PanelItem as i } from "./PanelItem.js";
-import "../../schemaEditor/schemaEditor.js";
-import "dayjs";
-import "@tanstack/vue-query";
-import "pinia";
-import { DuxImageUpload as b } from "../../upload/image.js";
-function C(t) {
-  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !s(t);
+import { DuxImageUpload as e } from "../../upload/image.js";
+import "../../upload/index.js";
+import { Panel as t } from "./Panel.js";
+import { PanelItem as n } from "./PanelItem.js";
+import { Fragment as r, createTextVNode as i, createVNode as a, defineComponent as o, isVNode as s } from "vue";
+import { NButton as c, NColorPicker as l, NInputNumber as u, NTooltip as d } from "naive-ui";
+function f(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !s(e);
 }
-const Ne = /* @__PURE__ */ v({
-  name: "RightPanel",
-  props: {
-    hasMultipleSelection: {
-      type: Boolean,
-      required: !0
-    },
-    selectedElementsCount: {
-      type: Number,
-      required: !0
-    },
-    currentElementData: {
-      type: Object
-    },
-    currentElementConfig: {
-      type: Object
-    },
-    canMoveUp: {
-      type: Boolean,
-      required: !0
-    },
-    canMoveDown: {
-      type: Boolean,
-      required: !0
-    },
-    canMoveToFront: {
-      type: Boolean,
-      required: !0
-    },
-    canMoveToBack: {
-      type: Boolean,
-      required: !0
-    },
-    canvasWidth: {
-      type: Number,
-      required: !0
-    },
-    canvasHeight: {
-      type: Number,
-      required: !0
-    },
-    canvasBackgroundColor: {
-      type: String,
-      required: !0
-    },
-    canvasBackgroundImage: {
-      type: String
-    },
-    onDeleteSelectedElements: {
-      type: Function,
-      required: !0
-    },
-    onAlignElements: {
-      type: Function,
-      required: !0
-    },
-    onUpdateElementProperty: {
-      type: Function,
-      required: !0
-    },
-    onUpdateCanvasSize: {
-      type: Function,
-      required: !0
-    },
-    onUpdateCanvasBackground: {
-      type: Function,
-      required: !0
-    },
-    onUpdateCanvasBackgroundImage: {
-      type: Function,
-      required: !0
-    },
-    onSaveData: {
-      type: Function,
-      required: !0
-    },
-    onExportJson: {
-      type: Function,
-      required: !0
-    },
-    onRenderToolbarControl: {
-      type: Function,
-      required: !0
-    },
-    onClearCanvas: {
-      type: Function,
-      required: !0
-    },
-    canvasScale: {
-      type: Number,
-      required: !0
-    }
-  },
-  setup(t) {
-    const g = () => {
-      if (t.hasMultipleSelection)
-        return e(m, {
-          title: "多选操作"
-        }, {
-          default: () => e(o, null, [e(i, {
-            title: "对齐"
-          }, {
-            default: () => [e("div", {
-              class: "grid grid-cols-4 gap-2"
-            }, [e(n, null, {
-              trigger: () => e(l, {
-                onClick: () => t.onAlignElements("left"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:layout-align-left"
-                }, null)
-              }, null),
-              default: () => "左对齐"
-            }), e(n, null, {
-              trigger: () => e(l, {
-                onClick: () => t.onAlignElements("right"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:layout-align-right"
-                }, null)
-              }, null),
-              default: () => "右对齐"
-            }), e(n, null, {
-              trigger: () => e(l, {
-                onClick: () => t.onAlignElements("top"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:layout-align-top"
-                }, null)
-              }, null),
-              default: () => "顶部对齐"
-            }), e(n, null, {
-              trigger: () => e(l, {
-                onClick: () => t.onAlignElements("bottom"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:layout-align-bottom"
-                }, null)
-              }, null),
-              default: () => "底部对齐"
-            })])]
-          }), e(i, {
-            title: "居中"
-          }, {
-            default: () => [e("div", {
-              class: "grid grid-cols-4 gap-2"
-            }, [e(n, null, {
-              trigger: () => e(l, {
-                onClick: () => t.onAlignElements("center-horizontal"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:layout-align-center"
-                }, null)
-              }, null),
-              default: () => "水平居中"
-            }), e(n, null, {
-              trigger: () => e(l, {
-                onClick: () => t.onAlignElements("center-vertical"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:layout-align-middle"
-                }, null)
-              }, null),
-              default: () => "垂直居中"
-            }), e(n, null, {
-              trigger: () => e(l, {
-                onClick: () => t.onAlignElements("distribute-horizontal"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:layout-distribute-horizontal"
-                }, null)
-              }, null),
-              default: () => "水平分布"
-            }), e(n, null, {
-              trigger: () => e(l, {
-                onClick: () => t.onAlignElements("distribute-vertical"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:layout-distribute-vertical"
-                }, null)
-              }, null),
-              default: () => "垂直分布"
-            })])]
-          })]),
-          footer: () => e(o, null, [e(l, {
-            block: !0,
-            onClick: t.onDeleteSelectedElements,
-            type: "error"
-          }, {
-            icon: () => e("div", {
-              class: "i-tabler:trash"
-            }, null),
-            default: () => "删除"
-          })])
-        });
-      if (t.currentElementData && t.currentElementConfig) {
-        const r = t.currentElementConfig.getToolbarControls(t.currentElementData);
-        return e(m, {
-          title: "元素设置"
-        }, {
-          default: () => e(o, null, [r.map((a) => {
-            let d;
-            return e(i, {
-              key: a.key,
-              title: a.label
-            }, C(d = t.onRenderToolbarControl(a)) ? d : {
-              default: () => [d]
-            });
-          }), e(i, {
-            title: "X"
-          }, {
-            default: () => [e(u, {
-              value: t.currentElementData?.left,
-              "onUpdate:value": (a) => t.onUpdateElementProperty(t.currentElementData.id, "left", a || 0)
-            }, null)]
-          }), e(i, {
-            title: "Y"
-          }, {
-            default: () => [e(u, {
-              value: t.currentElementData?.top,
-              "onUpdate:value": (a) => t.onUpdateElementProperty(t.currentElementData.id, "top", a || 0)
-            }, null)]
-          }), e(i, {
-            title: "角度"
-          }, {
-            default: () => [e(u, {
-              value: t.currentElementData?.angle,
-              min: -180,
-              max: 180,
-              "onUpdate:value": (a) => t.onUpdateElementProperty(t.currentElementData.id, "angle", a || 0)
-            }, null)]
-          }), e(i, {
-            title: "对齐"
-          }, {
-            default: () => [e("div", {
-              class: "grid grid-cols-3 gap-2"
-            }, [e(n, null, {
-              trigger: () => e(l, {
-                onClick: () => t.onAlignElements("center-horizontal"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:layout-align-center"
-                }, null)
-              }, null),
-              default: () => "水平居中"
-            }), e(n, null, {
-              trigger: () => e(l, {
-                onClick: () => t.onAlignElements("center-vertical"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:layout-align-middle"
-                }, null)
-              }, null),
-              default: () => "垂直居中"
-            }), e(n, null, {
-              trigger: () => e(l, {
-                onClick: () => t.onAlignElements("center-both"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:layout-distribute-horizontal"
-                }, null)
-              }, null),
-              default: () => "居中"
-            })])]
-          }), e(i, {
-            title: "层级"
-          }, {
-            default: () => [e("div", {
-              class: "grid grid-cols-4 gap-2"
-            }, [e(n, null, {
-              trigger: () => e(l, {
-                disabled: !t.canMoveUp,
-                onClick: () => t.onAlignElements("move-up"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:arrow-narrow-up"
-                }, null)
-              }, null),
-              default: () => "上移一层"
-            }), e(n, null, {
-              trigger: () => e(l, {
-                disabled: !t.canMoveDown,
-                onClick: () => t.onAlignElements("move-down"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:arrow-narrow-down"
-                }, null)
-              }, null),
-              default: () => "下移一层"
-            }), e(n, null, {
-              trigger: () => e(l, {
-                disabled: !t.canMoveToFront,
-                onClick: () => t.onAlignElements("move-to-front"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:arrow-bar-to-up"
-                }, null)
-              }, null),
-              default: () => "移到最前"
-            }), e(n, null, {
-              trigger: () => e(l, {
-                disabled: !t.canMoveToBack,
-                onClick: () => t.onAlignElements("move-to-back"),
-                renderIcon: () => e("div", {
-                  class: "i-tabler:arrow-bar-to-down"
-                }, null)
-              }, null),
-              default: () => "移到最后"
-            })])]
-          })]),
-          footer: () => e(o, null, [e(l, {
-            block: !0,
-            onClick: t.onDeleteSelectedElements,
-            type: "error"
-          }, {
-            icon: () => e("div", {
-              class: "i-tabler:trash"
-            }, null),
-            default: () => "删除"
-          })])
-        });
-      } else
-        return e(m, {
-          title: "画布设置"
-        }, {
-          default: () => e(o, null, [e(i, {
-            title: "宽度"
-          }, {
-            default: () => [e(u, {
-              value: t.canvasWidth,
-              min: 100,
-              max: 2e3,
-              "onUpdate:value": (r) => t.onUpdateCanvasSize(r || 800, t.canvasHeight)
-            }, null)]
-          }), e(i, {
-            title: "高度"
-          }, {
-            default: () => [e(u, {
-              value: t.canvasHeight,
-              min: 100,
-              max: 2e3,
-              "onUpdate:value": (r) => t.onUpdateCanvasSize(t.canvasWidth, r || 600)
-            }, null)]
-          }), e(i, {
-            title: "背景颜色"
-          }, {
-            default: () => [e(f, {
-              value: t.canvasBackgroundColor,
-              "onUpdate:value": (r) => t.onUpdateCanvasBackground(r)
-            }, null)]
-          }), e(i, {
-            title: "背景图片"
-          }, {
-            default: () => [e(b, {
-              value: t.canvasBackgroundImage || "",
-              onUpdateValue: (r) => t.onUpdateCanvasBackgroundImage(typeof r == "string" ? r : Array.isArray(r) && r[0] || "")
-            }, null)]
-          })]),
-          footer: () => e(o, null, [e(l, {
-            type: "primary",
-            block: !0,
-            onClick: t.onSaveData
-          }, {
-            default: () => [c("保存")]
-          }), e(l, {
-            block: !0,
-            onClick: t.onExportJson
-          }, {
-            default: () => [c("导出 JSON")]
-          }), e(l, {
-            block: !0,
-            onClick: t.onClearCanvas
-          }, {
-            default: () => [c("清空画布")]
-          })])
-        });
-    };
-    return () => e("div", {
-      class: "w-60 bg-default border-l border-default"
-    }, [g()]);
-  }
+const p = /* @__PURE__ */ o({
+	name: "RightPanel",
+	props: {
+		hasMultipleSelection: {
+			type: Boolean,
+			required: !0
+		},
+		selectedElementsCount: {
+			type: Number,
+			required: !0
+		},
+		currentElementData: { type: Object },
+		currentElementConfig: { type: Object },
+		canMoveUp: {
+			type: Boolean,
+			required: !0
+		},
+		canMoveDown: {
+			type: Boolean,
+			required: !0
+		},
+		canMoveToFront: {
+			type: Boolean,
+			required: !0
+		},
+		canMoveToBack: {
+			type: Boolean,
+			required: !0
+		},
+		canvasWidth: {
+			type: Number,
+			required: !0
+		},
+		canvasHeight: {
+			type: Number,
+			required: !0
+		},
+		canvasBackgroundColor: {
+			type: String,
+			required: !0
+		},
+		canvasBackgroundImage: { type: String },
+		onDeleteSelectedElements: {
+			type: Function,
+			required: !0
+		},
+		onAlignElements: {
+			type: Function,
+			required: !0
+		},
+		onUpdateElementProperty: {
+			type: Function,
+			required: !0
+		},
+		onUpdateCanvasSize: {
+			type: Function,
+			required: !0
+		},
+		onUpdateCanvasBackground: {
+			type: Function,
+			required: !0
+		},
+		onUpdateCanvasBackgroundImage: {
+			type: Function,
+			required: !0
+		},
+		onSaveData: {
+			type: Function,
+			required: !0
+		},
+		onExportJson: {
+			type: Function,
+			required: !0
+		},
+		onRenderToolbarControl: {
+			type: Function,
+			required: !0
+		},
+		onClearCanvas: {
+			type: Function,
+			required: !0
+		},
+		canvasScale: {
+			type: Number,
+			required: !0
+		}
+	},
+	setup(o) {
+		let s = () => {
+			if (o.hasMultipleSelection) return a(t, { title: "多选操作" }, {
+				default: () => a(r, null, [a(n, { title: "对齐" }, { default: () => [a("div", { class: "grid grid-cols-4 gap-2" }, [
+					a(d, null, {
+						trigger: () => a(c, {
+							onClick: () => o.onAlignElements("left"),
+							renderIcon: () => a("div", { class: "i-tabler:layout-align-left" }, null)
+						}, null),
+						default: () => "左对齐"
+					}),
+					a(d, null, {
+						trigger: () => a(c, {
+							onClick: () => o.onAlignElements("right"),
+							renderIcon: () => a("div", { class: "i-tabler:layout-align-right" }, null)
+						}, null),
+						default: () => "右对齐"
+					}),
+					a(d, null, {
+						trigger: () => a(c, {
+							onClick: () => o.onAlignElements("top"),
+							renderIcon: () => a("div", { class: "i-tabler:layout-align-top" }, null)
+						}, null),
+						default: () => "顶部对齐"
+					}),
+					a(d, null, {
+						trigger: () => a(c, {
+							onClick: () => o.onAlignElements("bottom"),
+							renderIcon: () => a("div", { class: "i-tabler:layout-align-bottom" }, null)
+						}, null),
+						default: () => "底部对齐"
+					})
+				])] }), a(n, { title: "居中" }, { default: () => [a("div", { class: "grid grid-cols-4 gap-2" }, [
+					a(d, null, {
+						trigger: () => a(c, {
+							onClick: () => o.onAlignElements("center-horizontal"),
+							renderIcon: () => a("div", { class: "i-tabler:layout-align-center" }, null)
+						}, null),
+						default: () => "水平居中"
+					}),
+					a(d, null, {
+						trigger: () => a(c, {
+							onClick: () => o.onAlignElements("center-vertical"),
+							renderIcon: () => a("div", { class: "i-tabler:layout-align-middle" }, null)
+						}, null),
+						default: () => "垂直居中"
+					}),
+					a(d, null, {
+						trigger: () => a(c, {
+							onClick: () => o.onAlignElements("distribute-horizontal"),
+							renderIcon: () => a("div", { class: "i-tabler:layout-distribute-horizontal" }, null)
+						}, null),
+						default: () => "水平分布"
+					}),
+					a(d, null, {
+						trigger: () => a(c, {
+							onClick: () => o.onAlignElements("distribute-vertical"),
+							renderIcon: () => a("div", { class: "i-tabler:layout-distribute-vertical" }, null)
+						}, null),
+						default: () => "垂直分布"
+					})
+				])] })]),
+				footer: () => a(r, null, [a(c, {
+					block: !0,
+					onClick: o.onDeleteSelectedElements,
+					type: "error"
+				}, {
+					icon: () => a("div", { class: "i-tabler:trash" }, null),
+					default: () => "删除"
+				})])
+			});
+			if (o.currentElementData && o.currentElementConfig) {
+				let e = o.currentElementConfig.getToolbarControls(o.currentElementData);
+				return a(t, { title: "元素设置" }, {
+					default: () => a(r, null, [
+						e.map((e) => {
+							let t;
+							return a(n, {
+								key: e.key,
+								title: e.label
+							}, f(t = o.onRenderToolbarControl(e)) ? t : { default: () => [t] });
+						}),
+						a(n, { title: "X" }, { default: () => [a(u, {
+							value: o.currentElementData?.left,
+							"onUpdate:value": (e) => o.onUpdateElementProperty(o.currentElementData.id, "left", e || 0)
+						}, null)] }),
+						a(n, { title: "Y" }, { default: () => [a(u, {
+							value: o.currentElementData?.top,
+							"onUpdate:value": (e) => o.onUpdateElementProperty(o.currentElementData.id, "top", e || 0)
+						}, null)] }),
+						a(n, { title: "角度" }, { default: () => [a(u, {
+							value: o.currentElementData?.angle,
+							min: -180,
+							max: 180,
+							"onUpdate:value": (e) => o.onUpdateElementProperty(o.currentElementData.id, "angle", e || 0)
+						}, null)] }),
+						a(n, { title: "对齐" }, { default: () => [a("div", { class: "grid grid-cols-3 gap-2" }, [
+							a(d, null, {
+								trigger: () => a(c, {
+									onClick: () => o.onAlignElements("center-horizontal"),
+									renderIcon: () => a("div", { class: "i-tabler:layout-align-center" }, null)
+								}, null),
+								default: () => "水平居中"
+							}),
+							a(d, null, {
+								trigger: () => a(c, {
+									onClick: () => o.onAlignElements("center-vertical"),
+									renderIcon: () => a("div", { class: "i-tabler:layout-align-middle" }, null)
+								}, null),
+								default: () => "垂直居中"
+							}),
+							a(d, null, {
+								trigger: () => a(c, {
+									onClick: () => o.onAlignElements("center-both"),
+									renderIcon: () => a("div", { class: "i-tabler:layout-distribute-horizontal" }, null)
+								}, null),
+								default: () => "居中"
+							})
+						])] }),
+						a(n, { title: "层级" }, { default: () => [a("div", { class: "grid grid-cols-4 gap-2" }, [
+							a(d, null, {
+								trigger: () => a(c, {
+									disabled: !o.canMoveUp,
+									onClick: () => o.onAlignElements("move-up"),
+									renderIcon: () => a("div", { class: "i-tabler:arrow-narrow-up" }, null)
+								}, null),
+								default: () => "上移一层"
+							}),
+							a(d, null, {
+								trigger: () => a(c, {
+									disabled: !o.canMoveDown,
+									onClick: () => o.onAlignElements("move-down"),
+									renderIcon: () => a("div", { class: "i-tabler:arrow-narrow-down" }, null)
+								}, null),
+								default: () => "下移一层"
+							}),
+							a(d, null, {
+								trigger: () => a(c, {
+									disabled: !o.canMoveToFront,
+									onClick: () => o.onAlignElements("move-to-front"),
+									renderIcon: () => a("div", { class: "i-tabler:arrow-bar-to-up" }, null)
+								}, null),
+								default: () => "移到最前"
+							}),
+							a(d, null, {
+								trigger: () => a(c, {
+									disabled: !o.canMoveToBack,
+									onClick: () => o.onAlignElements("move-to-back"),
+									renderIcon: () => a("div", { class: "i-tabler:arrow-bar-to-down" }, null)
+								}, null),
+								default: () => "移到最后"
+							})
+						])] })
+					]),
+					footer: () => a(r, null, [a(c, {
+						block: !0,
+						onClick: o.onDeleteSelectedElements,
+						type: "error"
+					}, {
+						icon: () => a("div", { class: "i-tabler:trash" }, null),
+						default: () => "删除"
+					})])
+				});
+			} else return a(t, { title: "画布设置" }, {
+				default: () => a(r, null, [
+					a(n, { title: "宽度" }, { default: () => [a(u, {
+						value: o.canvasWidth,
+						min: 100,
+						max: 2e3,
+						"onUpdate:value": (e) => o.onUpdateCanvasSize(e || 800, o.canvasHeight)
+					}, null)] }),
+					a(n, { title: "高度" }, { default: () => [a(u, {
+						value: o.canvasHeight,
+						min: 100,
+						max: 2e3,
+						"onUpdate:value": (e) => o.onUpdateCanvasSize(o.canvasWidth, e || 600)
+					}, null)] }),
+					a(n, { title: "背景颜色" }, { default: () => [a(l, {
+						value: o.canvasBackgroundColor,
+						"onUpdate:value": (e) => o.onUpdateCanvasBackground(e)
+					}, null)] }),
+					a(n, { title: "背景图片" }, { default: () => [a(e, {
+						value: o.canvasBackgroundImage || "",
+						onUpdateValue: (e) => o.onUpdateCanvasBackgroundImage(typeof e == "string" ? e : Array.isArray(e) && e[0] || "")
+					}, null)] })
+				]),
+				footer: () => a(r, null, [
+					a(c, {
+						type: "primary",
+						block: !0,
+						onClick: o.onSaveData
+					}, { default: () => [i("保存")] }),
+					a(c, {
+						block: !0,
+						onClick: o.onExportJson
+					}, { default: () => [i("导出 JSON")] }),
+					a(c, {
+						block: !0,
+						onClick: o.onClearCanvas
+					}, { default: () => [i("清空画布")] })
+				])
+			});
+		};
+		return () => a("div", { class: "w-60 bg-default border-l border-default" }, [s()]);
+	}
 });
-export {
-  Ne as RightPanel
-};
+export { p as RightPanel };