@ctzy-web-client/plugin-component-vue 1.0.0 → 1.0.1

package/es/data-form/form-components/bwa-rich-text-tinymce.mjs

@@ -0,0 +1,234 @@
+import { defineComponent, ref, getCurrentScope, computed, reactive, onMounted, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, unref, createVNode, createBlock, Teleport, normalizeStyle, renderList, toDisplayString, createCommentVNode } from 'vue';
+import { useNamespace, useService } from 'web-base-client-vue';
+import TinyMCEEditor from '@tinymce/tinymce-vue';
+import 'quill/dist/quill.snow.css';
+import { Subject, Observable, map, filter, mergeMap, merge, from, delayWhen, timer, takeUntil, tap } from 'rxjs';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
+
+const _hoisted_1 = ["onClick"];
+const __default__ = defineComponent({
+  name: "BwaRichText"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    modelValue: {
+      type: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    let resolve = null;
+    const setupPromise = new Promise((relv) => {
+      resolve = relv;
+    });
+    const initOptions = {
+      promotion: false,
+      language: "zh-Hans",
+      setup: resolve
+    };
+    const ns = useNamespace("rich-text");
+    const fileService = useService("FileService");
+    const editorRef = ref(null);
+    const tinyMCEEditorRef = ref(null);
+    const currentScope = getCurrentScope();
+    const value = computed({
+      get: () => props.modelValue || "",
+      set: (v) => {
+        emit("update:modelValue", v);
+      }
+    });
+    const focusing = ref(false);
+    const AT_REGEXP = /[^\da-zA-Z]@[^@]*$/;
+    const atPersonInfos = reactive({
+      node: null,
+      content: "",
+      selection: null,
+      index: -1,
+      style: null
+    });
+    const selectPersonSubject = new Subject();
+    const handlePersonSelect = selectPersonSubject.next.bind(selectPersonSubject);
+    window.atPersonInfos = atPersonInfos;
+    onMounted(async () => {
+      const editor = await setupPromise;
+      window.editor = editor;
+      const inputObservable = new Observable((observer) => {
+        const next = observer.next.bind(observer);
+        editor.on("input", next);
+        return () => {
+          editor.off("input", next);
+        };
+      });
+      editor.on("change", (event) => {
+        console.log(event);
+      });
+      const getSelection = (event) => {
+        if (typeof event.target.nodeType === "number" && typeof event.target.tagName === "string") {
+          return event.target.ownerDocument.getSelection();
+        }
+        return event.target.iframeElement.contentDocument.getSelection();
+      };
+      const subject = new Subject();
+      inputObservable.pipe(
+        map((event) => {
+          if (event.data !== "@") {
+            return null;
+          }
+          const selection = event.currentTarget.ownerDocument.getSelection();
+          const focusNode = selection.focusNode;
+          if (focusNode.nodeType !== Node.TEXT_NODE) {
+            return null;
+          }
+          const content = focusNode.data.slice(0, selection.focusOffset);
+          const match = content.match(AT_REGEXP);
+          if (!match) {
+            return null;
+          }
+          return {
+            event,
+            selection,
+            index: match[0].indexOf("@") + match.index,
+            node: focusNode,
+            content,
+            range: selection.getRangeAt(0)
+          };
+        }),
+        filter(Boolean),
+        mergeMap(({ event, index, node, content, range }) => {
+          const changeObservable = new Observable((observer) => {
+            const next = observer.next.bind(observer);
+            editor.on("change input undo redo", next);
+            return () => {
+              editor.off("change input undo redo", next);
+            };
+          });
+          return merge(from([event]), changeObservable).pipe(
+            delayWhen(() => timer(0)),
+            map((event2) => {
+              const selection = getSelection(event2);
+              const content2 = node.data.slice(index, selection.focusOffset);
+              console.log(content2);
+              if (!content2) {
+                subject.next();
+                return null;
+              }
+              return {
+                index,
+                node,
+                content: content2,
+                range: selection.getRangeAt(0)
+              };
+            }),
+            filter(Boolean),
+            takeUntil(
+              merge(
+                inputObservable.pipe(filter((event2) => event2.data === "@")),
+                subject
+              ).pipe(
+                tap(() => {
+                  atPersonInfos.node = null;
+                  atPersonInfos.content = "";
+                  atPersonInfos.selection = null;
+                  atPersonInfos.index = -1;
+                  atPersonInfos.style = null;
+                })
+              )
+            )
+          );
+        })
+      ).subscribe(({ index, node, selection, content, range }) => {
+        const searchContent = content.slice(1);
+        const { x: offsetX, y: offsetY, height } = range.getBoundingClientRect();
+        const iframeElement = editor.iframeElement;
+        const { x: iframeX, y: iframeY } = iframeElement.getBoundingClientRect();
+        atPersonInfos.node = node;
+        atPersonInfos.content = content;
+        atPersonInfos.selection = selection;
+        atPersonInfos.index = index;
+        atPersonInfos.style = {
+          "--left": iframeX + offsetX + "px",
+          "--top": iframeY + offsetY + height + "px"
+        };
+      });
+      selectPersonSubject.subscribe(() => {
+        if (!atPersonInfos.node) {
+          return;
+        }
+        const { node, index, content } = atPersonInfos;
+        const document = node.ownerDocument;
+        const documentFragment = document.createDocumentFragment();
+        if (index) {
+          const textNode = document.createTextNode(node.data.slice(0, index));
+          documentFragment.appendChild(textNode);
+        }
+        const span = document.createElement("span");
+        span.innerText = content;
+        documentFragment.appendChild(span);
+        const contentEndIndex = index + content.length;
+        if (contentEndIndex < node.data.length) {
+          const textNode = document.createTextNode(
+            node.data.slice(contentEndIndex)
+          );
+          documentFragment.appendChild(textNode);
+        }
+        const parent = node.parentElement;
+        parent.insertBefore(documentFragment, node);
+        parent.removeChild(node);
+        subject.next();
+      });
+      currentScope.run(() => {
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          class: normalizeClass(unref(ns).b())
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(unref(ns).e("editor")),
+            ref_key: "editorRef",
+            ref: editorRef
+          }, [
+            createVNode(unref(TinyMCEEditor), {
+              init: initOptions,
+              disabled: __props.disabled,
+              tinymceScriptSrc: "/tinymce/tinymce.js",
+              ref_key: "tinyMCEEditorRef",
+              ref: tinyMCEEditorRef
+            }, null, 8, ["disabled"])
+          ], 2)
+        ], 2),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createElementVNode("div", {
+            class: normalizeClass(unref(ns).e("at-list-wrapper"))
+          }, [
+            atPersonInfos.style ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(unref(ns).e("at-list")),
+              style: normalizeStyle(atPersonInfos.style)
+            }, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(4, (i) => {
+                return createElementVNode("div", {
+                  key: i,
+                  onClick: ($event) => unref(handlePersonSelect)(i)
+                }, " \u7528\u6237" + toDisplayString(i), 9, _hoisted_1);
+              }), 64))
+            ], 6)) : createCommentVNode("v-if", true)
+          ], 2)
+        ]))
+      ], 64);
+    };
+  }
+});
+var bwaRichTextTinymce = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "bwa-rich-text-tinymce.vue"]]);
+
+export { bwaRichTextTinymce as default };

package/es/data-form/form-components/bwa-rich-text.mjs

@@ -0,0 +1,325 @@
+import { defineComponent, ref, unref, getCurrentScope, computed, onMounted, markRaw, watch, onScopeDispose, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, Fragment, renderList, createBlock } from 'vue';
+import { useService, useNamespace } from 'web-base-client-vue';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+import { ElMessage } from 'element-plus';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
+
+const __default__ = defineComponent({
+  name: "BwaRichText"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    modelValue: {
+      type: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showAt: {
+      type: Boolean,
+      default: false
+    },
+    userIds: {
+      typee: Array,
+      default: () => []
+    }
+  },
+  emits: ["update:modelValue", "update:userIds"],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    let editor = null;
+    const userService = useService("UserService");
+    const loading = ref(false);
+    const userList = ref([
+      { value: "1", label: "\u7528\u62371" },
+      { value: "2", label: "\u7528\u62372" },
+      { value: "3", label: "\u7528\u62373" }
+    ]);
+    const handleChange = ([userId]) => {
+      if (!editor || !userId) {
+        return;
+      }
+      const userInfo = unref(userList).find((item) => item.value === userId);
+      if (!userInfo) {
+        return;
+      }
+      editor.focus();
+      let length = editor.getSelection() ? editor.getSelection().index || 0 : editor.getLength();
+      editor.insertEmbed(
+        length,
+        "at",
+        { id: userInfo.value, desc: userInfo.label },
+        "user"
+      );
+      editor.insertText(length + 1, " ");
+      editor.setSelection(length + 2);
+    };
+    const loadUserList = async (search = "") => {
+      try {
+        if (unref(loading)) {
+          return;
+        }
+        loading.value = true;
+        if (!unref(userService)) {
+          ElMessage.error("\u65E0\u6CD5\u83B7\u53D6\u7528\u6237");
+          return;
+        }
+        const userListResult = await unref(userService).getUserList({
+          name: search
+        });
+        if (userListResult.code != 0) {
+          ElMessage.error(userListResult.msg);
+          return;
+        }
+        userList.value = userListResult.data;
+      } finally {
+        loading.value = false;
+      }
+    };
+    const handleVisibleChange = (visible) => {
+      if (!visible) {
+        return;
+      }
+      loadUserList();
+    };
+    const virtualRef = ref(null);
+    ;
+    const ns = useNamespace("rich-text");
+    const fileService = useService("FileService");
+    const quillEditorContainer = ref(null);
+    const quillEditorRef = ref(null);
+    const currentScope = getCurrentScope();
+    const editorInstance = ref(null);
+    const toolbarOptions = [
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      [{ font: [] }],
+      ["bold", "italic", "underline", "strike"],
+      [{ align: [] }],
+      ["blockquote", "code-block"],
+      [{ header: 1 }, { header: 2 }],
+      [{ list: "ordered" }, { list: "bullet" }],
+      [{ script: "sub" }, { script: "super" }],
+      [{ indent: "-1" }, { indent: "+1" }],
+      [{ color: [] }, { background: [] }],
+      ["clean"].concat(props.showAt ? ["at"] : [])
+    ];
+    const value = computed({
+      get: () => props.modelValue || "",
+      set: (v) => {
+        let str = "";
+        if (!v && editor && editor.root.innerHTML && editor.root.innerHTML.indexOf("<img") != -1) {
+          str = editor.root.innerHTML;
+        }
+        emit("update:modelValue", v || str);
+      }
+    });
+    const userIds = computed({
+      get: () => props.userIds,
+      set: (v) => {
+        emit("update:userIds", v);
+      }
+    });
+    const updateImage = async (file) => {
+      if (!unref(fileService)) {
+        return;
+      }
+      const uploadFileResult = await unref(fileService).uploadFile(file);
+      if (uploadFileResult.code != 0) {
+        return uploadFileResult;
+      }
+      const fileID = uploadFileResult.data.id;
+      const filePathResult = await unref(fileService).getFilePath(fileID);
+      if (filePathResult.code != 0) {
+        return filePathResult;
+      }
+      return {
+        ...filePathResult,
+        data: { id: fileID, path: filePathResult.data }
+      };
+    };
+    const quillEditorRefClick = () => {
+      if (!editor) {
+        return;
+      }
+      editor.focus();
+    };
+    onMounted(() => {
+      editor = new Quill(unref(quillEditorRef), {
+        theme: "snow",
+        placeholder: props.placeholder,
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              at: function(value2) {
+              }
+            }
+          }
+        }
+      });
+      virtualRef.value = quillEditorContainer.value.querySelector("button.ql-at");
+      editorInstance.value = markRaw(editor);
+      const el = document.createElement("div");
+      const getUserIds = (html) => {
+        el.innerHTML = html;
+        const items = Array.from(el.querySelectorAll("span.ptp-at-item"));
+        userIds.value = [
+          ...new Set(items.map((item) => item.getAttribute("d-id")))
+        ];
+      };
+      getUserIds(unref(value));
+      const handleTextChange = (delta, oldDelta, source) => {
+        const _value = editor.getText() === "\n" ? "" : editor.root.innerHTML;
+        value.value = _value;
+        getUserIds(_value);
+      };
+      const handlePaste = (evt) => {
+        if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
+          evt.preventDefault();
+          [].forEach.call(evt.clipboardData.files, async (file) => {
+            console.log(file);
+            if (file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+              const filePathResult = await updateImage(file);
+              if (filePathResult.code != 0) {
+                return;
+              }
+              const fileData = filePathResult.data;
+              var range = editor.getSelection();
+              if (range && fileData) {
+                editor.insertEmbed(range.index, "image", fileData.path);
+                editor.formatText(range.index, 1, {
+                  alt: fileData.id
+                });
+                setTimeout(() => {
+                  editor.setSelection(range.index + 1);
+                }, 300);
+              }
+            }
+          });
+        }
+      };
+      currentScope.run(() => {
+        watch(
+          computed(() => props.disabled),
+          (disabled) => {
+            editor.enable(!disabled);
+          },
+          { immediate: true }
+        );
+        const getFilePaths = async (alt) => {
+          const filePathResult = await unref(fileService).getFilePath(alt);
+          return filePathResult;
+        };
+        let artArr2 = [];
+        watch(
+          value,
+          async () => {
+            if (unref(value).indexOf("data:image/png") != -1 || unref(value).indexOf("base64") != -1) {
+              editor.root.innerHTML = unref(value);
+              return;
+            }
+            if (!unref(value)) {
+              artArr2 = [];
+            }
+            let afterHtml = "";
+            let artArr = [];
+            let artArrOption = [];
+            if (unref(value).indexOf("<img") != -1) {
+              unref(value).replace(/<img [^>]*alt=['"]([^'"]+)[^>]*>/gi, (img, alt) => {
+                if (!artArr2.includes(alt)) {
+                  artArr.push(alt);
+                }
+              });
+              for (const alt of artArr) {
+                artArrOption.push({
+                  alt,
+                  src: await getFilePaths(alt)
+                });
+              }
+              afterHtml = unref(value).replace(/<img [^>]*alt=['"]([^'"]+)[^>]*>/gi, (img, alt) => {
+                var _a;
+                if (artArr.includes(alt)) {
+                  return `<img src="${(_a = artArrOption.find((a) => a.alt === alt)) == null ? void 0 : _a.src.data}" alt="${alt}">`;
+                } else {
+                  return img;
+                }
+              });
+            }
+            console.log("afterHtml =>", afterHtml);
+            artArr2 = [...artArr2, ...artArr];
+            artArr = [];
+            artArrOption = [];
+            if (editor.root.innerHTML === (afterHtml || unref(value))) {
+              return;
+            }
+            const range = editor.getSelection();
+            editor.root.innerHTML = afterHtml || unref(value);
+            setTimeout(() => {
+              if (range) {
+                editor.setSelection(range.index + 1);
+                editor.focus();
+              }
+            }, 100);
+          },
+          { immediate: true }
+        );
+        editor.on("text-change", handleTextChange);
+        editor.root.addEventListener("paste", handlePaste);
+        onScopeDispose(() => {
+          editor.off("text-change", handleTextChange);
+          editor.root.removeEventListener("paste", handlePaste);
+        });
+      });
+    });
+    expose({
+      getEditorInstance() {
+        return unref(editorInstance);
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_BwaAdvanceOption = resolveComponent("BwaAdvanceOption");
+      const _component_BwaAdvanceSelect = resolveComponent("BwaAdvanceSelect");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(ns).b()),
+        ref_key: "quillEditorContainer",
+        ref: quillEditorContainer
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(unref(ns).e("editor")),
+          ref_key: "quillEditorRef",
+          ref: quillEditorRef,
+          onClick: quillEditorRefClick
+        }, null, 2),
+        createVNode(_component_BwaAdvanceSelect, {
+          showSelection: false,
+          "virtual-triggering": true,
+          "virtual-ref": virtualRef.value,
+          loading: loading.value,
+          onSearch: loadUserList,
+          "onUpdate:modelValue": handleChange,
+          onVisibleChange: handleVisibleChange
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(userList.value, (item) => {
+              return openBlock(), createBlock(_component_BwaAdvanceOption, {
+                key: item.value,
+                value: item.value,
+                label: item.label
+              }, null, 8, ["value", "label"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["virtual-ref", "loading"])
+      ], 2);
+    };
+  }
+});
+var RichText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "bwa-rich-text.vue"]]);
+
+export { RichText as default };

package/es/data-form/form-components/bwa-select.mjs

@@ -0,0 +1,76 @@
+import { defineComponent, computed, useAttrs, openBlock, createBlock, unref, mergeProps, isRef, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
+import { ElSelect, ElOption } from 'element-plus';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
+
+const __default__ = defineComponent({
+  name: "BwaSelect"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    modelValue: {
+      type: null
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    labelProp: {
+      type: String,
+      default: "label"
+    },
+    valueProp: {
+      type: String,
+      default: "value"
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const options = computed(
+      () => (props.options || []).map((item) => ({
+        ...item,
+        value: item.value + ""
+      }))
+    );
+    const attrs = useAttrs();
+    const modelValue = computed({
+      get: () => {
+        if (props.multiple) {
+          return Array.isArray(props.modelValue) ? props.modelValue.map((item) => item + "") : [];
+        } else {
+          return props.modelValue == null ? "" : props.modelValue + "";
+        }
+      },
+      set: (v) => emit("update:modelValue", v)
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElSelect), mergeProps(unref(attrs), {
+        modelValue: unref(modelValue),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
+        clearable: "",
+        multiple: __props.multiple,
+        teleported: false
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(options), (item) => {
+              return openBlock(), createBlock(unref(ElOption), {
+                key: item.value,
+                value: item.value,
+                label: item.label
+              }, null, 8, ["value", "label"]);
+            }), 128))
+          ])
+        ]),
+        _: 3
+      }, 16, ["modelValue", "multiple"]);
+    };
+  }
+});
+var Select = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "bwa-select.vue"]]);
+
+export { Select as default };

package/es/data-form/form-components/bwa-textarea.mjs

@@ -0,0 +1,33 @@
+import { defineComponent, useAttrs, computed, openBlock, createBlock, unref, mergeProps, isRef } from 'vue';
+import { ElInput } from 'element-plus';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
+
+const __default__ = defineComponent({
+  name: "BwaTextarea"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    value: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  emits: ["update:model-value"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const modelValue = computed({
+      get: () => props.modelValue,
+      set: (v) => emit("update:model-value", v)
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElInput), mergeProps({ type: "textarea" }, unref(attrs), {
+        modelValue: unref(modelValue),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null)
+      }), null, 16, ["modelValue"]);
+    };
+  }
+});
+var Textarea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "bwa-textarea.vue"]]);
+
+export { Textarea as default };