@ibiz-template/vue3-components 0.7.30 → 0.7.31-alpha.0

package/lib/common/pql-editor/pql-editor.cjs

@@ -0,0 +1,608 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var core = require('@ibiz-template/core');
+var editor = require('@wangeditor/editor');
+var pqlEditor_module = require('./pql-editor.module.cjs');
+require('./components/index.cjs');
+var index = require('./utils/index.cjs');
+require('./pql-editor.css');
+var pqlEditorSuggestion = require('./components/pql-editor-suggestion/pql-editor-suggestion.cjs');
+
+"use strict";
+const IBizPqlEditor = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizPqlEditor",
+  props: {
+    fields: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: String,
+      default: ""
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    renderItem: {
+      type: Function
+    }
+  },
+  emits: {
+    change: (_value) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("pql-editor");
+    const editorRef = vue.ref();
+    let editor$1;
+    let overlayPopover;
+    const connectionList = [{
+      type: "pql-field-connection",
+      label: "and",
+      value: "and"
+    }, {
+      type: "pql-field-connection",
+      label: "or",
+      value: "or"
+    }];
+    const getCodeListItems = async (appCodeListId) => {
+      if (!props.context) {
+        return [];
+      }
+      const app = ibiz.hub.getApp(props.context.srfappid);
+      const items = await app.codeList.get(appCodeListId, props.context);
+      return items;
+    };
+    const getPreviousNode = (node) => {
+      var _a;
+      if (!editor$1 || !node) {
+        return;
+      }
+      const path = editor.DomEditor.findPath(editor$1, node);
+      if (path && editor.SlatePath.hasPrevious(path)) {
+        const slateNode = (_a = editor.SlateEditor.node(editor$1, editor.SlatePath.previous(path))) == null ? void 0 : _a[0];
+        if (slateNode) {
+          if (slateNode.type || slateNode.text) {
+            return slateNode;
+          }
+          return getPreviousNode(slateNode);
+        }
+      }
+    };
+    const getCurrentNode = () => {
+      var _a;
+      if (!editor$1) {
+        return;
+      }
+      const selection = editor$1.selection;
+      if (selection) {
+        const slateNode = (_a = editor.SlateEditor.node(editor$1, selection)) == null ? void 0 : _a[0];
+        if (slateNode) {
+          if (slateNode.type || slateNode.text) {
+            return slateNode;
+          }
+          return getPreviousNode(slateNode);
+        }
+      }
+    };
+    const getSuggestionItems = async () => {
+      var _a, _b, _c, _d, _e;
+      if (!editor$1) {
+        return [];
+      }
+      const currenNode = getCurrentNode();
+      const nodes = ((_a = editor$1.children[0]) == null ? void 0 : _a.children) || [];
+      const children = nodes.filter((node) => node.type || node.text);
+      if (!currenNode && children.length) {
+        return [];
+      }
+      if (editor$1.selection) {
+        const node = editor.SlateEditor.node(editor$1, editor$1.selection);
+        if (node && ((_b = node[0]) == null ? void 0 : _b.type)) {
+          return [];
+        }
+      }
+      if (currenNode && currenNode.type === "pql-field") {
+        const field = props.fields.find((item) => item.appDEFieldId === currenNode.value);
+        if (field && field.valueOPs) {
+          return index.FilterModes.filter((mode) => field.valueOPs.includes(mode.valueOP)).map((item) => {
+            return {
+              type: "pql-field-operator",
+              label: item.label,
+              value: item.valueOP
+            };
+          });
+        }
+        return [];
+      }
+      if (currenNode && currenNode.type === "pql-field-value") {
+        return connectionList;
+      }
+      if (currenNode && currenNode.type === "pql-field-operator") {
+        const mode = index.FilterModes.find((_mode) => _mode.valueOP === currenNode.value);
+        if (mode) {
+          if (index.ExcludeOPs.includes(mode.valueOP)) {
+            return connectionList;
+          }
+          const previousNode = getPreviousNode(currenNode);
+          if (previousNode && previousNode.type === "pql-field") {
+            const field = props.fields.find((item) => item.appDEFieldId === previousNode.value);
+            if (field && field.appCodeListId) {
+              const items = await getCodeListItems(field.appCodeListId);
+              return items.map((item) => {
+                return {
+                  type: "pql-field-value",
+                  label: item.text,
+                  value: item.value
+                };
+              });
+            }
+          }
+        }
+        return [];
+      }
+      if (currenNode && currenNode.type === "pql-field-connection") {
+        return props.fields.map((item) => {
+          return {
+            type: "pql-field",
+            label: item.caption,
+            value: item.appDEFieldId
+          };
+        });
+      }
+      if (currenNode && !currenNode.type) {
+        const previousNode = getPreviousNode(currenNode);
+        if (previousNode && previousNode.type === "pql-field-operator") {
+          if (((_c = editor$1.selection) == null ? void 0 : _c.focus.offset) !== 0) {
+            return connectionList;
+          }
+          return [];
+        }
+        if (previousNode && previousNode.type === "pql-field") {
+          if (((_d = editor$1.selection) == null ? void 0 : _d.focus.offset) !== 0) {
+            return connectionList;
+          }
+          const field = props.fields.find((item) => item.appDEFieldId === previousNode.value);
+          if (field && field.valueOPs) {
+            return index.FilterModes.filter((mode) => field.valueOPs.includes(mode.valueOP)).map((item) => {
+              return {
+                type: "pql-field-operator",
+                label: item.label,
+                value: item.valueOP
+              };
+            });
+          }
+        }
+        if (previousNode && previousNode.type === "pql-field-connection") {
+          if (((_e = editor$1.selection) == null ? void 0 : _e.focus.offset) !== 0) {
+            return connectionList;
+          }
+          return props.fields.map((item) => {
+            return {
+              type: "pql-field",
+              label: item.caption,
+              value: item.appDEFieldId
+            };
+          });
+        }
+        if (previousNode && previousNode.type === "pql-field-value") {
+          return connectionList;
+        }
+        return [];
+      }
+      return props.fields.map((item) => {
+        return {
+          type: "pql-field",
+          label: item.caption,
+          value: item.appDEFieldId
+        };
+      });
+    };
+    const handelSuggestionSelect = (item) => {
+      if (!editor$1) {
+        return;
+      }
+      editor$1.restoreSelection();
+      if (!item.type) {
+        editor$1.insertText(item.label);
+        return;
+      }
+      const node = {
+        type: item.type,
+        label: item.label,
+        value: item.value,
+        children: [{
+          text: ""
+        }]
+      };
+      editor$1.insertNode(node);
+      editor$1.move(1);
+    };
+    const showSuggestion = async () => {
+      if (!editor$1) {
+        return;
+      }
+      const popover = overlayPopover;
+      overlayPopover = void 0;
+      await (popover == null ? void 0 : popover.dismiss());
+      const selection = window.getSelection();
+      if (!selection) {
+        return;
+      }
+      const {
+        focusNode
+      } = selection;
+      if (!focusNode || !focusNode.parentNode) {
+        return;
+      }
+      const items = await getSuggestionItems();
+      if (!items || !items.length) {
+        return;
+      }
+      overlayPopover = ibiz.overlay.createPopover(() => {
+        return vue.createVNode(pqlEditorSuggestion.IBizPqlEditorSuggestion, {
+          "items": items,
+          "renderItem": props.renderItem,
+          "onSelect": handelSuggestionSelect
+        }, null);
+      }, void 0, {
+        placement: "bottom-start",
+        autoClose: true,
+        width: "200px",
+        noArrow: true
+      });
+      await overlayPopover.present(focusNode.parentNode);
+      await overlayPopover.onWillDismiss();
+      overlayPopover = void 0;
+    };
+    const errorMsg = vue.ref();
+    const errorMsgEl = vue.ref();
+    const verifyNode = () => {
+      var _a;
+      if (!editor$1) {
+        return;
+      }
+      const nodes = ((_a = editor$1.children[0]) == null ? void 0 : _a.children) || [];
+      const children = nodes.filter((node) => node.type || node.text);
+      if (!children.length) {
+        return;
+      }
+      let last = {
+        type: "pql-field-connection"
+      };
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (last.type === "pql-field-connection") {
+          if (child.type === "pql-field") {
+            last = child;
+          } else if (child.type === "pql-field-operator") {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u5DE6\u503C\u3002",
+              child
+            };
+          } else if (child.type === "pql-field-value" || child.text) {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u5DE6\u503C\u3002",
+              child
+            };
+          } else if (child.type === "pql-field-connection") {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8FDE\u63A5\u7B26\u7F3A\u5931\u8868\u8FBE\u5F0F",
+              child
+            };
+          }
+        } else if (last.type === "pql-field") {
+          if (child.type === "pql-field") {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u64CD\u4F5C\u7B26\u3002",
+              child: children[i - 1] || child
+            };
+          }
+          if (child.type === "pql-field-operator") {
+            last = child;
+          } else if (child.type === "pql-field-value" || child.text) {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u64CD\u4F5C\u7B26\u3002",
+              child
+            };
+          } else if (child.type === "pql-field-connection") {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u64CD\u4F5C\u7B26\u3002",
+              child: children[i - 1] || child
+            };
+          }
+        } else if (last.type === "pql-field-operator") {
+          if (last.value && index.ExcludeOPs.includes(last.value)) {
+            if (child.type === "pql-field") {
+              return {
+                msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u8FDE\u63A5\u7B26\u3002",
+                child
+              };
+            }
+            if (child.type === "pql-field-operator") {
+              return {
+                msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u8FDE\u63A5\u7B26\u3002",
+                child
+              };
+            }
+            if (child.type === "pql-field-value" || child.text) {
+              return {
+                msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u8FDE\u63A5\u7B26\u3002",
+                child
+              };
+            }
+            if (child.type === "pql-field-connection") {
+              last = child;
+            }
+          } else if (child.type === "pql-field") {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u53F3\u503C\u3002",
+              child: children[i - 1] || child
+            };
+          } else if (child.type === "pql-field-operator") {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u53F3\u503C\u3002",
+              child: children[i - 1] || child
+            };
+          } else if (child.type === "pql-field-value" || child.text) {
+            last = child;
+          } else if (child.type === "pql-field-connection") {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u53F3\u503C\u3002",
+              child: children[i - 1] || child
+            };
+          }
+        } else if (last.type === "pql-field-value" || last.text) {
+          if (child.type === "pql-field") {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u8FDE\u63A5\u7B26\u3002",
+              child
+            };
+          }
+          if (child.type === "pql-field-operator") {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u8FDE\u63A5\u7B26\u3002",
+              child
+            };
+          }
+          if (child.type === "pql-field-value" || child.text) {
+            return {
+              msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u8FDE\u63A5\u7B26\u3002",
+              child
+            };
+          }
+          if (child.type === "pql-field-connection") {
+            last = child;
+          }
+        }
+      }
+      if (last.type !== "pql-field-value" || !last.text) {
+        if (last.type === "pql-field") {
+          return {
+            msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u64CD\u4F5C\u7B26\u3002",
+            child: children[children.length - 1]
+          };
+        }
+        if (last.type === "pql-field-operator") {
+          if (last.value && index.ExcludeOPs.includes(last.value)) {
+            return;
+          }
+          return {
+            msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8868\u8FBE\u5F0F\u7F3A\u5931\u53F3\u503C\u3002",
+            child: children[children.length - 1]
+          };
+        }
+        if (last.type === "pql-field-connection") {
+          return {
+            msg: "\u9519\u8BEF\u7684\u8868\u8FBE\u5F0F\u3002\u8FDE\u63A5\u7B26\u7F3A\u5931\u8868\u8FBE\u5F0F\u3002",
+            child: children[children.length - 1]
+          };
+        }
+      }
+    };
+    const verify = () => {
+      if (errorMsg.value) {
+        return false;
+      }
+      return true;
+    };
+    const currentValue = vue.ref("");
+    const htmlText = vue.ref("");
+    vue.watch(() => props.value, async () => {
+      if (props.value === currentValue.value) {
+        return;
+      }
+      if (!props.value) {
+        currentValue.value = "";
+        htmlText.value = "";
+        editor$1 == null ? void 0 : editor$1.clear();
+        return;
+      }
+      const pqlItems = index.parseCustomCond(props.value);
+      if (pqlItems) {
+        const nodes = await index.pqlItemsToPqlNodes(pqlItems, props.fields, getCodeListItems);
+        if (nodes && nodes.length) {
+          const html = index.pqlNodesToHtml(nodes);
+          currentValue.value = props.value;
+          htmlText.value = html;
+          editor$1 == null ? void 0 : editor$1.setHtml(html);
+          return;
+        }
+      }
+      currentValue.value = "";
+      htmlText.value = "";
+      editor$1 == null ? void 0 : editor$1.clear();
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props.fields, async () => {
+      if (!props.value) {
+        currentValue.value = "";
+        htmlText.value = "";
+        editor$1 == null ? void 0 : editor$1.clear();
+        return;
+      }
+      const pqlItems = index.parseCustomCond(props.value);
+      if (pqlItems) {
+        const nodes = await index.pqlItemsToPqlNodes(pqlItems, props.fields, getCodeListItems);
+        if (nodes && nodes.length) {
+          const html = index.pqlNodesToHtml(nodes);
+          currentValue.value = props.value;
+          htmlText.value = html;
+          editor$1 == null ? void 0 : editor$1.setHtml(html);
+          return;
+        }
+      }
+      currentValue.value = "";
+      htmlText.value = "";
+      editor$1 == null ? void 0 : editor$1.clear();
+    }, {
+      immediate: true
+    });
+    const handleChange = () => {
+      var _a;
+      if (!editor$1) {
+        return;
+      }
+      const nodes = ((_a = editor$1.children[0]) == null ? void 0 : _a.children) || [];
+      const children = nodes.filter((node) => node.type || node.text);
+      setTimeout(() => {
+        var _a2;
+        if (!editor$1) {
+          return;
+        }
+        const {
+          msg,
+          child
+        } = verifyNode() || {};
+        errorMsg.value = msg || "";
+        (_a2 = errorMsgEl.value) == null ? void 0 : _a2.classList.remove(ns.b("error-msg"));
+        if (child) {
+          const el = editor$1.toDOMNode(child);
+          if (el) {
+            errorMsgEl.value = el;
+            el.classList.add(ns.b("error-msg"));
+          }
+        }
+        if (!msg) {
+          try {
+            const items = index.generateItems(children);
+            const customCond = index.generateCustomCond(items, props.fields);
+            currentValue.value = customCond;
+            emit("change", customCond);
+          } catch (err) {
+            ibiz.log.error(err == null ? void 0 : err.message);
+          }
+        }
+      }, 10);
+    };
+    let cleanupKeydown = () => {
+    };
+    let cleanupClick = () => {
+    };
+    vue.onMounted(() => {
+      if (!editorRef.value) {
+        return;
+      }
+      if (!window.PqlModule) {
+        editor.Boot.registerModule(pqlEditor_module.PqlModule);
+        window.PqlModule = true;
+      }
+      const editorConfig = {
+        autoFocus: false,
+        readOnly: props.readonly,
+        placeholder: props.placeholder,
+        EXTEND_CONF: {
+          pql: {
+            showSuggestion
+          }
+        },
+        onFocus: () => {
+          setTimeout(() => {
+            showSuggestion();
+          }, 10);
+        },
+        onChange: handleChange
+      };
+      editor$1 = editor.createEditor({
+        selector: editorRef.value,
+        config: editorConfig,
+        mode: "simple"
+      });
+      editor$1.setHtml(htmlText.value);
+      cleanupKeydown = core.listenJSEvent(editorRef.value, "keydown", (event) => {
+        setTimeout(() => {
+          if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && editor$1) {
+            const {
+              selection
+            } = editor$1;
+            if (selection && selection.focus.offset === 0) {
+              const node = editor.SlateEditor.node(editor$1, selection)[0];
+              if (node) {
+                const el = editor$1.toDOMNode(node);
+                if (index.isMove(el)) {
+                  if (event.key === "ArrowLeft") {
+                    editor$1.moveReverse(1);
+                  }
+                  if (event.key === "ArrowRight") {
+                    editor$1.move(1);
+                  }
+                }
+              }
+            }
+            setTimeout(() => {
+              showSuggestion();
+            }, 10);
+          }
+        }, 10);
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          overlayPopover == null ? void 0 : overlayPopover.dismiss();
+        }
+      });
+      if (!props.readonly) {
+        cleanupClick = core.listenJSEvent(editorRef.value, "click", () => {
+          setTimeout(() => {
+            showSuggestion();
+          }, 10);
+        });
+      }
+    });
+    vue.onUnmounted(() => {
+      cleanupKeydown();
+      cleanupClick();
+      overlayPopover == null ? void 0 : overlayPopover.dismiss();
+    });
+    return {
+      ns,
+      editorRef,
+      editor: editor$1,
+      errorMsg,
+      verify
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "ref": "editorRef",
+      "class": this.ns.b("content")
+    }, null), vue.createVNode("div", {
+      "class": this.ns.b("footer")
+    }, [this.errorMsg])]);
+  }
+});
+
+exports.IBizPqlEditor = IBizPqlEditor;

package/lib/common/pql-editor/pql-editor.css

@@ -0,0 +1 @@
+.ibiz-pql-editor{display:flex;flex-direction:column;width:100%;height:100%;padding:var(--ibiz-spacing-base-tight);overflow:auto;font-size:var(--ibiz-font-size-regular);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small);outline:0}.ibiz-pql-editor [data-slate-node=element][data-slate-void=true]{margin:var(--ibiz-spacing-extra-tight)}.ibiz-pql-editor-content{flex:1 0 0}.ibiz-pql-editor-content .w-e-text-placeholder{top:var(--ibiz-spacing-super-tight);left:0;font-style:normal}.ibiz-pql-editor-content .w-e-text-container [data-slate-editor]{padding:0}.ibiz-pql-editor-content .w-e-text-container [data-slate-editor] p{margin:0}.ibiz-pql-editor-footer{flex:0 0 auto;font-size:var(--ibiz-font-size-small);color:var(--ibiz-color-danger)}.ibiz-pql-editor-error-msg{position:relative}.ibiz-pql-editor-error-msg::after{position:absolute;bottom:-.12rem;left:0;width:100%;height:.25rem;content:"";background:linear-gradient(135deg,transparent,transparent 45%,var(--ibiz-color-danger),transparent 55%,transparent 100%),linear-gradient(45deg,transparent,transparent 45%,var(--ibiz-color-danger),transparent 55%,transparent 100%);background-repeat:repeat-x,repeat-x;background-size:.5rem .5rem}