@epxing/designer 0.0.0-stage → 5.3.0-beta.1

package/dist/src/page-designer/index.js

@@ -0,0 +1,51 @@
+import PageDesigner from "./PageDesigner.js";
+import WidgetTree from "./widget-tree/Tree.js";
+import WidgetItem from "./widget-tree/Item.js";
+import WidgetLibrary from "./widget-library/Library.js";
+import WidgetLibraryBase from "./widget-library/Base.js";
+import TemplateLibrary from "./template-library/Library.js";
+import SettingPanel from "./setting-panel/Setting.js";
+import SettingProperty from "./setting-panel/Property.js";
+import SettingStyle from "./setting-panel/Style.js";
+import SettingAdvance from "./setting-panel/Advance.js";
+import PageVariablePanel from "./page-variable-panel/PageVariablePanel.js";
+import JsonEditor from "./page-variable-panel/JsonEditor.js";
+import WidgetPreview from "./widget-preview/Preview.js";
+import WidgetPreviewItem from "./widget-preview/PreviewItem.js";
+import WidgetPreviewContainer from "./widget-preview/Container.js";
+import WidgetPreviewPlaceholder from "./widget-preview/Placeholder.js";
+import { default as default2 } from "./widget-preview/Mixin.js";
+import "@epxing/core/src/app";
+import "vue";
+/* empty css                            */
+import WidgetWrapper from "./widget-preview/WidgetWrapper.js";
+import HoverOverlay from "./widget-preview/HoverOverlay.js";
+import SelectedOverlay from "./widget-preview/SelectedOverlay.js";
+/* empty css                                   */
+import PageConfigPreview from "./PageConfigPreview.js";
+PageDesigner.install = function install(Vue) {
+  Vue.component(PageDesigner.name, PageDesigner);
+  Vue.component(WidgetTree.name, WidgetTree);
+  Vue.component(WidgetItem.name, WidgetItem);
+  Vue.component(WidgetLibrary.name, WidgetLibrary);
+  Vue.component(WidgetLibraryBase.name, WidgetLibraryBase);
+  Vue.component(TemplateLibrary.name, TemplateLibrary);
+  Vue.component(SettingPanel.name, SettingPanel);
+  Vue.component(SettingProperty.name, SettingProperty);
+  Vue.component(SettingStyle.name, SettingStyle);
+  Vue.component(SettingAdvance.name, SettingAdvance);
+  Vue.component(PageVariablePanel.name, PageVariablePanel);
+  Vue.component(JsonEditor.name, JsonEditor);
+  Vue.component(WidgetPreview.name, WidgetPreview);
+  Vue.component(WidgetPreviewItem.name, WidgetPreviewItem);
+  Vue.component(WidgetPreviewContainer.name, WidgetPreviewContainer);
+  Vue.component(WidgetPreviewPlaceholder.name, WidgetPreviewPlaceholder);
+  Vue.component(WidgetWrapper.name, WidgetWrapper);
+  Vue.component(HoverOverlay.name, HoverOverlay);
+  Vue.component(SelectedOverlay.name, SelectedOverlay);
+  Vue.component(PageConfigPreview.name, PageConfigPreview);
+};
+export {
+  default2 as WidgetPreviewMixin,
+  PageDesigner as default
+};

package/dist/src/page-designer/mixins/dragSourceMixin.js

@@ -0,0 +1,94 @@
+const dragSourceMixin = {
+  data() {
+    return {
+      isDragging: false
+    };
+  },
+  methods: {
+    /**
+     * 统一的拖拽开始方法
+     * @param {DragEvent} e - 拖拽事件
+     * @param {Object} item - 拖拽的数据项（组件或模板）
+     * @param {string} type - 拖拽类型：'widget' | 'template'
+     */
+    onDragStart(e, item, type = "widget") {
+      this.isDragging = true;
+      let payload, title, icon, prefix, source;
+      if (type === "template") {
+        const templateData = item.data || item;
+        const content = templateData.CONTENT ? JSON.parse(templateData.CONTENT) : {};
+        const { items = [], itemConfigs = {}, JS: templateJs } = content;
+        const formatConfig = (arr) => {
+          arr.forEach((comp) => {
+            const oldId = comp.id;
+            const newId = comp.contentType + "_" + this.$util.genId();
+            if (itemConfigs[oldId]) {
+              itemConfigs[newId] = itemConfigs[oldId];
+              delete itemConfigs[oldId];
+            }
+            comp.id = newId;
+            if (comp.items) formatConfig(comp.items);
+          });
+        };
+        formatConfig(items);
+        payload = {
+          items,
+          itemConfigs,
+          templateJs,
+          title: item.title || templateData.NAME
+        };
+        title = item.title || templateData.NAME || "";
+        icon = "epx-icon-moban";
+        prefix = "page-designer-template:";
+        source = "template";
+      } else {
+        const widgetInfo = this.designer.getWidgetByType(item.code) || {};
+        payload = {
+          code: item.code,
+          title: item.title || widgetInfo.TITLE,
+          custom: widgetInfo.COMPONENT_SOURCE === "custom"
+        };
+        title = item.title || widgetInfo.TITLE || "";
+        icon = widgetInfo.ICON || "";
+        prefix = "page-designer-widget:";
+        source = "library";
+      }
+      const dataString = prefix + JSON.stringify(payload);
+      e.dataTransfer.setData("text/plain", dataString);
+      e.dataTransfer.effectAllowed = "copy";
+      const emptyEl = document.createElement("div");
+      emptyEl.style.cssText = "position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none";
+      document.body.appendChild(emptyEl);
+      e.dataTransfer.setDragImage(emptyEl, 0, 0);
+      setTimeout(() => {
+        if (emptyEl.parentNode) emptyEl.parentNode.removeChild(emptyEl);
+      }, 0);
+      if (this.designer && this.designer.startDrag) {
+        this.designer.startDrag({
+          source,
+          data: item,
+          title,
+          icon,
+          x: e.clientX,
+          y: e.clientY,
+          isNative: true
+        });
+      }
+      setTimeout(() => {
+        this.$emit("close");
+      }, 50);
+    },
+    /**
+     * 统一的拖拽结束方法
+     */
+    onDragEnd() {
+      this.isDragging = false;
+      if (this.designer && this.designer.vueInstance) {
+        this.designer.emitEvent("library-drag-end");
+      }
+    }
+  }
+};
+export {
+  dragSourceMixin as default
+};

package/dist/src/page-designer/page-variable-panel/JsonEditor.js

@@ -0,0 +1,105 @@
+import "codemirror/lib/codemirror.css";
+import "./jsonlint.js";
+import "codemirror/addon/lint/javascript-lint.js";
+import "codemirror/addon/lint/json-lint.js";
+import "codemirror/addon/lint/lint.js";
+import "codemirror/addon/lint/lint.css";
+import "codemirror/addon/edit/matchbrackets.js";
+import "codemirror/addon/edit/closebrackets.js";
+import "codemirror/addon/fold/foldgutter.js";
+import "codemirror/addon/fold/foldgutter.css";
+import "codemirror/addon/fold/foldcode.js";
+import "codemirror/addon/fold/brace-fold.js";
+import "codemirror/addon/display/placeholder.js";
+import "codemirror/mode/javascript/javascript.js";
+/* empty css                                   */
+import CodeMirror from "codemirror";
+import { openBlock, createElementBlock, withDirectives, createElementVNode, vModelText } from "vue";
+/* empty css               */
+/* empty css                */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const __compatRequireEnsure = (_deps, cb) => Promise.resolve().then(() => cb && cb());
+const _sfc_main = {
+  name: "epx-page-variable-panel-json-editor",
+  props: {
+    modelValue: String,
+    placeholder: String
+  },
+  data() {
+    return {
+      content: ""
+    };
+  },
+  watch: {
+    modelValue: {
+      handler(v) {
+        let str = "";
+        if (v) {
+          str = v;
+        }
+        if (this.content !== str) {
+          this.content = str;
+          if (this.editor) this.editor.setValue(this.content);
+        }
+      },
+      immediate: true
+    },
+    content(v) {
+      this.$emit("update:modelValue", v);
+    }
+  },
+  methods: {
+    editorInit() {
+      __compatRequireEnsure([], () => {
+        const CodeMirror$1 = CodeMirror;
+        globalThis.codemirror = CodeMirror$1;
+        this.editor = CodeMirror$1.fromTextArea(this.$refs.textarea, {
+          theme: "idea",
+          mode: "application/json",
+          foldGutter: true,
+          gutters: ["CodeMirror-foldgutter", "CodeMirror-lint-markers"],
+          lint: false,
+          showCursorWhenSelecting: true,
+          matchBrackets: {
+            afterCursor: false
+          },
+          autoCloseBrackets: true,
+          inputStyle: "contenteditable",
+          hintOptions: { completeSingle: false, closeOnUnfocus: false }
+        });
+        this.editor.on("blur", (editor) => {
+          this.editor.setOption("lint", true);
+          this.content = editor.getValue();
+        });
+        if (this.content) {
+          this.editor.setValue(this.content);
+        }
+      });
+    }
+  },
+  mounted() {
+    this.editorInit();
+  }
+};
+const _hoisted_1 = { class: "container" };
+const _hoisted_2 = ["placeholder"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    withDirectives(createElementVNode("textarea", {
+      class: "editor",
+      ref: "textarea",
+      name: "",
+      id: "",
+      cols: "100",
+      rows: "3",
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.content = $event),
+      placeholder: $props.placeholder
+    }, null, 8, _hoisted_2), [
+      [vModelText, $data.content]
+    ])
+  ]);
+}
+const JsonEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-46c9f3d8"]]);
+export {
+  JsonEditor as default
+};