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

package/dist/src/visual/config/Textarea.vue.js

@@ -0,0 +1,507 @@
+import { markRaw } from "vue";
+import { loadSystemVariables, loadFunctionTree } from "./variable-sources.js";
+const _sfc_main = {
+  name: "epx-visual-config-textarea",
+  props: {
+    designer: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    label: String,
+    value: [String, Number],
+    i18nValue: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    defaultValue: String,
+    change: Function,
+    readonly: Boolean,
+    regExp: String,
+    isInternational: {
+      type: Boolean,
+      default: true
+    },
+    inputVariable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      inputContent: "",
+      computedValue: "",
+      showContentMenu: false,
+      inputFocused: false,
+      templateAttributeProps: {
+        children: "children",
+        label: "text"
+      },
+      variableProps: {
+        children: "children",
+        label: "name"
+      },
+      systemVariableList: [],
+      activeVariableTab: "variable",
+      functionLibrary: [],
+      variablePos: {},
+      componentVariableDialog: false,
+      selectedWidget: null,
+      componentVariableTreeProps: {
+        children: "items",
+        label: "title"
+      },
+      componentVariableValue: ""
+    };
+  },
+  watch: {
+    value(v) {
+    },
+    // 首次打开变量菜单再拉系统变量与函数树；此前每个输入框挂载都各发两次请求
+    showContentMenu(v) {
+      if (v) this.ensureVariableSources();
+    }
+  },
+  computed: {
+    isInputVariable() {
+      return this.inputVariable || this.designer.mode === "template";
+    },
+    languageList() {
+      const {
+        LANGUAGES: languages = "",
+        "LANGUAGES#": languageNames = "",
+        LANGUAGE_DEFAULT: defaultLanguage
+      } = this.clientConfig;
+      if (!languages) return [];
+      const languageIdList = languages.split(",");
+      const languageNameList = languageNames.split(",");
+      const languageList = languageIdList.map((item, index) => ({
+        id: item,
+        name: languageNameList[index]
+      }));
+      return languageList.filter((item) => item.id !== defaultLanguage);
+    },
+    pageVariableSets() {
+      var _a;
+      return ((_a = this.designer.pageConfig) == null ? void 0 : _a.variableSets) || [];
+    },
+    templateAttributeTree() {
+      return this.designer.mode === "template" ? this.designer.templateAttributeTree : [];
+    },
+    fieldConfigs() {
+      const fieldConfigs = {
+        attriName: "configInput",
+        dataType: "text",
+        state: "ADD",
+        attriLabel: this.label,
+        readonly: this.readonly ? "1" : "0",
+        attribute: {
+          international: "1"
+        }
+      };
+      if (this.regExp) {
+        fieldConfigs.attribute.format = "reg_exp";
+        fieldConfigs.attribute.regexp = this.regExp;
+      }
+      return fieldConfigs;
+    },
+    widgetList() {
+      return this.designer.widgetList || [];
+    },
+    selectedWidgetInfo() {
+      if (this.selectedWidget) {
+        return this.designer.getWidgetByType(this.selectedWidget.contentType) || {};
+      }
+      return {};
+    },
+    variableList() {
+      return [{
+        name: "页面变量",
+        code: "page",
+        children: this.pageVariableSets
+      }, {
+        name: "系统变量",
+        code: "system",
+        children: this.systemVariableList
+      }, {
+        name: "自定义变量",
+        code: "customize"
+      }];
+    }
+  },
+  methods: {
+    ensureVariableSources() {
+      if (this._variableSourcesLoaded) return;
+      this._variableSourcesLoaded = true;
+      loadSystemVariables(this.$http).then((list) => {
+        this.systemVariableList = list;
+      });
+      loadFunctionTree(this.$http).then((tree) => {
+        this.functionLibrary = markRaw(tree);
+      });
+    },
+    getTemplateAttribute(key) {
+      for (const item of this.templateAttributeTree) {
+        if (item.entity.data.CODE === key) {
+          return item.entity.data;
+        } else if (item.children && item.children.length > 0) {
+          for (const child of item.children) {
+            if (child.entity.data.CODE === key) return child.entity.data;
+          }
+        }
+      }
+    },
+    highlightFunctionCall(expression) {
+      let result = "";
+      let i = 0;
+      while (i < expression.length) {
+        const char = expression[i];
+        if (/[a-zA-Z]/.test(char)) {
+          let functionName = "";
+          while (i < expression.length && /[a-zA-Z]/.test(expression[i])) {
+            functionName += expression[i];
+            i++;
+          }
+          if (expression[i] === "(") {
+            result += `<span class="function">${functionName}</span>`;
+          } else {
+            result += `<span class="epx-visual-config-input__variable" contenteditable="false">${functionName}</span>`;
+          }
+          continue;
+        }
+        if (char === '"' || char === "'") {
+          const quote = char;
+          result += `<span class="string">${quote}`;
+          i++;
+          while (i < expression.length && expression[i] !== quote) {
+            result += expression[i];
+            i++;
+          }
+          if (i < expression.length) {
+            result += quote + "</span>";
+          }
+          i++;
+          continue;
+        }
+        if (/[0-9]/.test(char)) {
+          let number = "";
+          while (i < expression.length && /[0-9.]/.test(expression[i])) {
+            number += expression[i];
+            i++;
+          }
+          result += `<span class="number">${number}</span>`;
+          continue;
+        }
+        if (char === "(" || char === ")" || char === ",") {
+          result += `<span class="parenthesis">${char}</span>`;
+          i++;
+          continue;
+        }
+        result += char;
+        i++;
+      }
+      return result;
+    },
+    setInputContent(v = "") {
+      if (!v) return;
+      const html = String(v).replace(/\{\{([\w-.,|$#[\]()"'\s]+)\}\}/g, (match, key) => `<span class="epx-visual-config-input__expression" data-type="expression" contenteditable="false" data-value="{{${key}}}">${this.highlightFunctionCall(key)}</span>`).replace(/\$\[([\w-.|$#]+)\]/g, (match, key) => `<span class="epx-visual-config-input__variable" contenteditable="false" data-value="$[${key}]">${key}</span>`).replace(/@\[([\w-.|$#]+)\]/g, (match, key) => {
+        const param = this.getTemplateAttribute(key);
+        return `<span class="epx-visual-config-input__params" contenteditable="false" data-value="@[${key}]">${(param == null ? void 0 : param.NAME) || key}</span>`;
+      });
+      this.inputContent = this.xss.process(html);
+      if (this.$refs.input) this.$refs.input.innerHTML = this.inputContent;
+    },
+    getInputValue(v) {
+      const node = document.createElement("div");
+      node.innerHTML = v;
+      node.querySelectorAll('[data-type="expression"]').forEach((item) => {
+        item.innerHTML = `{{${item.innerText}}}`;
+      });
+      node.querySelectorAll(".epx-visual-config-input__variable").forEach((item) => {
+        item.innerText = `$[${item.innerText}]`;
+      });
+      node.querySelectorAll(".epx-visual-config-input__params").forEach((item) => {
+        item.innerText = `${item.getAttribute("data-value")}`;
+      });
+      node.querySelectorAll("div").forEach((item) => {
+        item.parentNode.insertBefore(document.createTextNode("\n"), item);
+      });
+      return node.innerText;
+    },
+    clearValue() {
+      if (this.inputFocused) {
+        this.$refs.input.innerHTML = "";
+        this.changeValue("");
+        this.$refs.input.focus();
+      }
+    },
+    changeValue(e) {
+      if (e.data === "/") {
+        this.showContentMenu = true;
+        this.lastEditRange = null;
+        const selection = window.getSelection();
+        const range = selection.getRangeAt(0);
+        const rect = range.getBoundingClientRect();
+        const inputRect = this.$refs.configInput.getBoundingClientRect();
+        const top = rect.bottom - inputRect.top;
+        this.variablePos = {
+          x: 0,
+          y: top + 20 + "px"
+        };
+      } else {
+        this.showContentMenu = false;
+      }
+    },
+    insertAtCursor(el, newElement) {
+      const range = this.range;
+      let selectedNode = range.startContainer;
+      if (!this.$refs.input.contains(selectedNode)) {
+        selectedNode = this.$refs.input;
+      }
+      const parent = selectedNode.nodeName === "#text" ? selectedNode.parentNode : selectedNode;
+      if (selectedNode.nodeName === "#text") {
+        const start = selectedNode.data.substring(0, range.startOffset);
+        const end = selectedNode.data.substring(range.startOffset);
+        parent.insertBefore(newElement, selectedNode);
+        const startNode = document.createTextNode(start.endsWith("/") ? start.slice(0, -1) : start);
+        parent.insertBefore(startNode, newElement);
+        if (end.length > 0) {
+          const endNode = document.createTextNode(end);
+          parent.insertBefore(endNode, newElement.nextSibling);
+        }
+      } else {
+        parent.insertBefore(newElement, parent.childNodes[range.startOffset]);
+      }
+      selectedNode.data = "";
+    },
+    addVariable(variable, e) {
+      if (variable.children) return;
+      const selection = window.getSelection();
+      const range = document.createRange();
+      const span = document.createElement("span");
+      span.className = "epx-visual-config-input__variable";
+      if (variable.code === "customize") {
+        const textNode = document.createTextNode(" ");
+        span.appendChild(textNode);
+        this.insertAtCursor(this.$refs.input, span);
+        range.selectNode(span, 0);
+        range.setEnd(textNode, 1);
+      } else if (variable.code === "component") {
+        this.componentVariableDialog = true;
+      } else {
+        span.innerHTML = variable.code;
+        span.contentEditable = "false";
+        span.setAttribute("data-value", `$[${variable.code}]`);
+        this.insertAtCursor(this.$refs.input, span);
+        range.setStart(span.nextSibling, 0);
+        range.collapse(true);
+      }
+      e.preventDefault();
+      selection.removeAllRanges();
+      selection.addRange(range);
+    },
+    addComponentVariable(e) {
+      const selection = window.getSelection();
+      const range = document.createRange();
+      const span = document.createElement("span");
+      span.className = "epx-visual-config-input__variable";
+      span.innerHTML = "";
+      span.contentEditable = "false";
+      span.setAttribute("data-value", "$[component]");
+      this.insertAtCursor(this.$refs.input, span);
+      range.setStart(span.nextSibling, 0);
+      range.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      this.componentVariableDialog = false;
+      this.componentVariableValue = null;
+    },
+    addFunction(item, e) {
+      if (!item.leaf) return;
+      const selection = window.getSelection();
+      const range = document.createRange();
+      const span = document.createElement("span");
+      span.className = "epx-visual-config-input__expression";
+      span.contentEditable = "false";
+      span.innerHTML = item.code + "()";
+      span.setAttribute("data-type", "expression");
+      span.setAttribute("data-value", `{{${item.code}}}`);
+      this.insertAtCursor(this.$refs.input, span);
+      range.setStart(span, 1);
+      range.collapse(true);
+      e.preventDefault();
+      selection.removeAllRanges();
+      selection.addRange(range);
+    },
+    addParams(data, e) {
+      e.preventDefault();
+      if (data.leaf) {
+        const param = data.entity.data;
+        const span = document.createElement("span");
+        span.innerHTML = param.NAME;
+        span.className = "epx-visual-config-input__params";
+        span.contentEditable = "false";
+        span.setAttribute("data-value", `@[${param.CODE}]`);
+        this.insertAtCursor(this.$refs.input, span);
+        this.$refs.input.focus();
+      }
+    },
+    inputFocus() {
+      this.inputFocused = true;
+    },
+    paste(e) {
+      e.preventDefault();
+      const text = e.clipboardData.getData("text/plain");
+      document.execCommand("insertText", false, text);
+      if (/@\[([\w-.|$#]+)\]/.test(text)) {
+        setTimeout(() => {
+          this.setInputContent(this.getInputValue(this.$refs.input.innerHTML));
+        }, 0);
+      }
+    },
+    onBlur(e) {
+      setTimeout(() => {
+        this.inputFocused = false;
+        if (document.activeElement !== this.$refs.input) {
+          let value = this.getInputValue(this.$refs.input.innerHTML);
+          value = value !== this.defaultValue ? value : null;
+          this.$emit("change-configs", value);
+          if (this.change) this.change(value);
+        }
+      }, 20);
+    },
+    onDblclick(e) {
+      if (e.target.className === "epx-visual-config-input__variable") {
+        e.target.contentEditable = "true";
+      }
+    },
+    inputClick(e) {
+      if (e.target.className === "epx-visual-config-input__variable") {
+        if (e.target.contentEditable === "false") {
+          e.target.contentEditable = "true";
+          const selection = document.getSelection();
+          const range = document.createRange();
+          range.selectNodeContents(e.target);
+          range.collapse();
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      } else if (e.target.getAttribute("data-type") === "expression" || e.target.parentNode.getAttribute("data-type") === "expression") {
+        const node = e.target.getAttribute("data-type") === "expression" ? e.target : e.target.parentNode;
+        if (node.contentEditable === "false") {
+          node.contentEditable = "true";
+          const selection = document.getSelection();
+          const range = document.createRange();
+          range.selectNodeContents(node);
+          range.collapse();
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      } else {
+        document.querySelectorAll(".epx-visual-config-input__variable").forEach((span) => {
+          span.contentEditable = "false";
+        });
+        document.querySelectorAll('[data-type="expression"]').forEach((span) => {
+          span.contentEditable = "false";
+        });
+      }
+    },
+    changeLanguageValue(id, v) {
+      const languageValue = {
+        ...this.i18nValue,
+        [id]: v
+      };
+      this.$emit("change-language-config", languageValue);
+    },
+    openContextMenu(e) {
+      this.lastEditRange = window.getSelection().getRangeAt(0);
+      e.stopPropagation();
+      this.showContentMenu = true;
+      const inputRect = this.$refs.configInput.getBoundingClientRect();
+      this.variablePos = {
+        x: 0,
+        y: inputRect.height + 20 + "px"
+      };
+    },
+    selectionChange() {
+      const selection = window.getSelection();
+      if (selection.rangeCount === 0) {
+        return;
+      }
+      const range = selection.getRangeAt(0);
+      if (this.$refs.input.contains(range.startContainer)) {
+        this.range = range;
+        if (selection.focusNode.className !== "epx-visual-config-input__variable" && selection.focusNode.parentNode && selection.focusNode.parentNode.className !== "epx-visual-config-input__variable") {
+          document.querySelectorAll(".epx-visual-config-input__variable").forEach((span) => {
+            span.contentEditable = "false";
+          });
+        }
+      }
+    }
+  },
+  mounted() {
+    if (this.value === null || this.value === void 0) {
+      this.setInputContent(this.defaultValue);
+    } else {
+      this.setInputContent(this.value);
+    }
+    this._onWindowClick = () => {
+      this.showContentMenu = false;
+    };
+    window.addEventListener("click", this._onWindowClick);
+    document.addEventListener("selectionchange", this.selectionChange);
+    this.$refs.input.addEventListener("keydown", (e) => {
+      if (e.keyCode === 13) {
+        if (this.range && this.range.startContainer) {
+          let variableSpan = null;
+          if (this.range.startContainer.className === "epx-visual-config-input__variable") {
+            variableSpan = this.range.startContainer;
+          } else if (this.range.startContainer.parentNode.className === "epx-visual-config-input__variable") {
+            variableSpan = this.range.startContainer.parentNode;
+          }
+          if (variableSpan) {
+            e.preventDefault();
+            variableSpan.contentEditable = false;
+            const nextNode = variableSpan.nextSibling;
+            let textNode = null;
+            if (!nextNode || nextNode.nodeType !== 3) {
+              textNode = document.createTextNode();
+              if (!nextNode) {
+                variableSpan.parentNode.appendChild(textNode);
+              } else {
+                variableSpan.parentNode.insertBefore(textNode, nextNode);
+              }
+            } else {
+              textNode = nextNode;
+            }
+            const selection = window.getSelection();
+            const range = selection.getRangeAt(0);
+            range.setStart(textNode, 0);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        }
+      } else if (e.keyCode === 8) {
+        const startContainer = this.range.startContainer;
+        setTimeout(() => {
+          if (!this.$refs.input.contains(startContainer)) {
+            const selection = window.getSelection();
+            const range = selection.getRangeAt(0);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        }, 0);
+      }
+    });
+  },
+  unmounted() {
+    window.removeEventListener("click", this._onWindowClick);
+    document.removeEventListener("selectionchange", this.selectionChange);
+  }
+};
+export {
+  _sfc_main as default
+};

package/dist/src/visual/config/Tree.js

@@ -0,0 +1,138 @@
+import '../../../style.css';
+import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createVNode } from "vue";
+/* empty css         */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-visual-config-tree",
+  props: {
+    allConfigs: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    value: [String, Boolean, Number],
+    defaultValue: [String, Boolean, Number],
+    dataKey: {
+      type: String,
+      default: "value"
+    },
+    optionList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    configItem: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      objectValue: {},
+      filterText: ""
+    };
+  },
+  computed: {
+    label() {
+      const value = this.value || this.defaultValue;
+      if (value) {
+        return this.getLabel(this.optionList, value);
+      }
+      return "";
+    }
+  },
+  watch: {
+    filterText(val) {
+      if (this.$refs.tree) this.$refs.tree.filter(val);
+    }
+  },
+  methods: {
+    getLabel(optionList = [], value) {
+      for (let i = 0; i < optionList.length; i++) {
+        const item = optionList[i];
+        if (item[this.dataKey] === value) {
+          return item.label;
+        } else if (item.children) {
+          const label = this.getLabel(item.children, value);
+          if (label) return label;
+        }
+      }
+    },
+    clear() {
+      this.objectValue = {};
+      this.$emit("change-configs", null);
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return (data.name || data.text || data.title || "").indexOf(value) !== -1;
+    },
+    changeValue(v, item) {
+      let value = null;
+      if (v) {
+        this.objectValue = { ...v };
+        value = v[this.dataKey];
+      } else {
+        this.objectValue = {};
+      }
+      this.$emit("change-configs", value === this.defaultValue ? null : value);
+    }
+  }
+};
+const _hoisted_1 = { class: "tree" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_input = resolveComponent("el-input");
+  const _component_el_tree = resolveComponent("el-tree");
+  const _component_el_popover = resolveComponent("el-popover");
+  return openBlock(), createBlock(_component_el_popover, {
+    ref: "popover",
+    width: "240",
+    trigger: "click",
+    tabindex: 1,
+    persistent: false
+  }, {
+    reference: withCtx(() => [
+      createVNode(_component_el_input, {
+        class: "input",
+        ref: "input",
+        placeholder: `请选择`,
+        "model-value": $data.objectValue.label || $options.label,
+        clearable: "",
+        size: "default",
+        onClear: $options.clear
+      }, {
+        suffix: withCtx(() => [..._cache[1] || (_cache[1] = [
+          createElementVNode("i", { class: "el-icon-search" }, null, -1)
+        ])]),
+        _: 1
+      }, 8, ["model-value", "onClear"])
+    ]),
+    default: withCtx(() => [
+      createElementVNode("div", _hoisted_1, [
+        createVNode(_component_el_input, {
+          class: "filter",
+          size: "default",
+          placeholder: _ctx.$t("enter the keyword for filtering"),
+          modelValue: $data.filterText,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.filterText = $event)
+        }, null, 8, ["placeholder", "modelValue"]),
+        createVNode(_component_el_tree, {
+          ref: "tree",
+          "filter-node-method": $options.filterNode,
+          "expand-on-click-node": false,
+          data: $props.optionList,
+          props: {},
+          onNodeClick: $options.changeValue
+        }, null, 8, ["filter-node-method", "data", "onNodeClick"])
+      ])
+    ]),
+    _: 1
+  }, 512);
+}
+const Tree = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5fe8ea48"]]);
+export {
+  Tree as default
+};

package/dist/src/visual/config/remote-cache.js

@@ -0,0 +1,30 @@
+import '../../../style.css';
+const cache = /* @__PURE__ */ new Map();
+function getCached(key, loader) {
+  let entry = cache.get(key);
+  if (!entry) {
+    entry = Promise.resolve().then(loader).then((data) => JSON.stringify(data === void 0 ? null : data)).catch((err) => {
+      cache.delete(key);
+      throw err;
+    });
+    cache.set(key, entry);
+  }
+  return entry.then((text) => JSON.parse(text));
+}
+function clearRemoteCache(prefix) {
+  if (!prefix) {
+    cache.clear();
+    return;
+  }
+  for (const key of [...cache.keys()]) {
+    if (key.startsWith(prefix)) cache.delete(key);
+  }
+}
+function attributeTreeKey({ entityId, pageId, isTemplate }) {
+  return `attr:${entityId}:${isTemplate ? "tpl" : "page"}:${pageId}`;
+}
+export {
+  attributeTreeKey,
+  clearRemoteCache,
+  getCached
+};

package/dist/src/visual/config/show-condition.js

@@ -0,0 +1,20 @@
+import '../../../style.css';
+const cache = /* @__PURE__ */ new Map();
+function compileShowCondition(showCondition, onError) {
+  if (cache.has(showCondition)) return cache.get(showCondition);
+  let compiled;
+  try {
+    const condition = JSON.parse(showCondition).el || "";
+    const el = condition.replace(/^#{(.*)}$/, "$1");
+    compiled = el ? new Function("config", "return " + el) : null;
+  } catch (error) {
+    console.error(error);
+    if (typeof onError === "function") onError("配置项显示条件解析失败：" + (error && error.message || showCondition));
+    compiled = false;
+  }
+  cache.set(showCondition, compiled);
+  return compiled;
+}
+export {
+  compileShowCondition
+};