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

package/es/common/pql-editor/pql-editor.mjs

@@ -0,0 +1,606 @@
+import { ref, createVNode, watch, onMounted, onUnmounted, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { listenJSEvent } from '@ibiz-template/core';
+import { DomEditor, SlatePath, SlateEditor, Boot, createEditor } from '@wangeditor/editor';
+import { PqlModule } from './pql-editor.module.mjs';
+import './components/index.mjs';
+import { FilterModes, ExcludeOPs, parseCustomCond, pqlItemsToPqlNodes, pqlNodesToHtml, generateItems, generateCustomCond, isMove } from './utils/index.mjs';
+import './pql-editor.css';
+import { IBizPqlEditorSuggestion } from './components/pql-editor-suggestion/pql-editor-suggestion.mjs';
+
+"use strict";
+const IBizPqlEditor = /* @__PURE__ */ 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 = useNamespace("pql-editor");
+    const editorRef = ref();
+    let editor;
+    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 || !node) {
+        return;
+      }
+      const path = DomEditor.findPath(editor, node);
+      if (path && SlatePath.hasPrevious(path)) {
+        const slateNode = (_a = SlateEditor.node(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) {
+        return;
+      }
+      const selection = editor.selection;
+      if (selection) {
+        const slateNode = (_a = SlateEditor.node(editor, 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) {
+        return [];
+      }
+      const currenNode = getCurrentNode();
+      const nodes = ((_a = editor.children[0]) == null ? void 0 : _a.children) || [];
+      const children = nodes.filter((node) => node.type || node.text);
+      if (!currenNode && children.length) {
+        return [];
+      }
+      if (editor.selection) {
+        const node = SlateEditor.node(editor, editor.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 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 = FilterModes.find((_mode) => _mode.valueOP === currenNode.value);
+        if (mode) {
+          if (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.selection) == null ? void 0 : _c.focus.offset) !== 0) {
+            return connectionList;
+          }
+          return [];
+        }
+        if (previousNode && previousNode.type === "pql-field") {
+          if (((_d = editor.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 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.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) {
+        return;
+      }
+      editor.restoreSelection();
+      if (!item.type) {
+        editor.insertText(item.label);
+        return;
+      }
+      const node = {
+        type: item.type,
+        label: item.label,
+        value: item.value,
+        children: [{
+          text: ""
+        }]
+      };
+      editor.insertNode(node);
+      editor.move(1);
+    };
+    const showSuggestion = async () => {
+      if (!editor) {
+        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 createVNode(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 = ref();
+    const errorMsgEl = ref();
+    const verifyNode = () => {
+      var _a;
+      if (!editor) {
+        return;
+      }
+      const nodes = ((_a = editor.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 && 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 && 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 = ref("");
+    const htmlText = ref("");
+    watch(() => props.value, async () => {
+      if (props.value === currentValue.value) {
+        return;
+      }
+      if (!props.value) {
+        currentValue.value = "";
+        htmlText.value = "";
+        editor == null ? void 0 : editor.clear();
+        return;
+      }
+      const pqlItems = parseCustomCond(props.value);
+      if (pqlItems) {
+        const nodes = await pqlItemsToPqlNodes(pqlItems, props.fields, getCodeListItems);
+        if (nodes && nodes.length) {
+          const html = pqlNodesToHtml(nodes);
+          currentValue.value = props.value;
+          htmlText.value = html;
+          editor == null ? void 0 : editor.setHtml(html);
+          return;
+        }
+      }
+      currentValue.value = "";
+      htmlText.value = "";
+      editor == null ? void 0 : editor.clear();
+    }, {
+      immediate: true
+    });
+    watch(() => props.fields, async () => {
+      if (!props.value) {
+        currentValue.value = "";
+        htmlText.value = "";
+        editor == null ? void 0 : editor.clear();
+        return;
+      }
+      const pqlItems = parseCustomCond(props.value);
+      if (pqlItems) {
+        const nodes = await pqlItemsToPqlNodes(pqlItems, props.fields, getCodeListItems);
+        if (nodes && nodes.length) {
+          const html = pqlNodesToHtml(nodes);
+          currentValue.value = props.value;
+          htmlText.value = html;
+          editor == null ? void 0 : editor.setHtml(html);
+          return;
+        }
+      }
+      currentValue.value = "";
+      htmlText.value = "";
+      editor == null ? void 0 : editor.clear();
+    }, {
+      immediate: true
+    });
+    const handleChange = () => {
+      var _a;
+      if (!editor) {
+        return;
+      }
+      const nodes = ((_a = editor.children[0]) == null ? void 0 : _a.children) || [];
+      const children = nodes.filter((node) => node.type || node.text);
+      setTimeout(() => {
+        var _a2;
+        if (!editor) {
+          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.toDOMNode(child);
+          if (el) {
+            errorMsgEl.value = el;
+            el.classList.add(ns.b("error-msg"));
+          }
+        }
+        if (!msg) {
+          try {
+            const items = generateItems(children);
+            const customCond = 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 = () => {
+    };
+    onMounted(() => {
+      if (!editorRef.value) {
+        return;
+      }
+      if (!window.PqlModule) {
+        Boot.registerModule(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 = createEditor({
+        selector: editorRef.value,
+        config: editorConfig,
+        mode: "simple"
+      });
+      editor.setHtml(htmlText.value);
+      cleanupKeydown = listenJSEvent(editorRef.value, "keydown", (event) => {
+        setTimeout(() => {
+          if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && editor) {
+            const {
+              selection
+            } = editor;
+            if (selection && selection.focus.offset === 0) {
+              const node = SlateEditor.node(editor, selection)[0];
+              if (node) {
+                const el = editor.toDOMNode(node);
+                if (isMove(el)) {
+                  if (event.key === "ArrowLeft") {
+                    editor.moveReverse(1);
+                  }
+                  if (event.key === "ArrowRight") {
+                    editor.move(1);
+                  }
+                }
+              }
+            }
+            setTimeout(() => {
+              showSuggestion();
+            }, 10);
+          }
+        }, 10);
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          overlayPopover == null ? void 0 : overlayPopover.dismiss();
+        }
+      });
+      if (!props.readonly) {
+        cleanupClick = listenJSEvent(editorRef.value, "click", () => {
+          setTimeout(() => {
+            showSuggestion();
+          }, 10);
+        });
+      }
+    });
+    onUnmounted(() => {
+      cleanupKeydown();
+      cleanupClick();
+      overlayPopover == null ? void 0 : overlayPopover.dismiss();
+    });
+    return {
+      ns,
+      editorRef,
+      editor,
+      errorMsg,
+      verify
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "ref": "editorRef",
+      "class": this.ns.b("content")
+    }, null), createVNode("div", {
+      "class": this.ns.b("footer")
+    }, [this.errorMsg])]);
+  }
+});
+
+export { IBizPqlEditor };

package/es/common/pql-editor/pql-editor.module.d.ts

@@ -0,0 +1,47 @@
+import { IDomEditor, IModuleConf, SlateElement } from '@wangeditor/editor';
+import { VNode } from 'snabbdom';
+/**
+ * PQL插件
+ *
+ * @author zhanghengfeng
+ * @date 2024-06-28 20:06:39
+ * @export
+ * @template T
+ * @param {T} editor
+ * @return {*}
+ */
+export declare function withPqlPlugin<T extends IDomEditor>(editor: T): T;
+/**
+ * 渲染PQL元素
+ *
+ * @author zhanghengfeng
+ * @date 2024-06-28 20:06:14
+ * @export
+ * @param {IData} el
+ * @return {*}  {VNode}
+ */
+export declare function renderPqlElement(el: IData): VNode;
+/**
+ * 转换PQL元素为html
+ *
+ * @author zhanghengfeng
+ * @date 2024-06-28 20:06:38
+ * @param {IData} el
+ * @return {*}  {string}
+ */
+export declare function pqlToHtml(el: IData): string;
+/**
+ * 转换html为PQL元素
+ *
+ * @author zhanghengfeng
+ * @date 2024-06-28 20:06:32
+ * @export
+ * @param {Element} domElem
+ * @return {*}  {SlateElement}
+ */
+export declare function parsePqlHtml(domElem: Element): SlateElement;
+/**
+ * PQL模块
+ *
+ */
+export declare const PqlModule: Partial<IModuleConf>;