china-mobile-international-custom-components 0.0.33 → 0.0.35

package/es/DocSyncSelect.mjs

@@ -0,0 +1,458 @@
+import { w as B } from "./chunks/index.bCzIhWFw.js";
+import { ref as k, createElementBlock as S, openBlock as b, createElementVNode as f, toDisplayString as D, Fragment as F, renderList as K, normalizeClass as M, createVNode as _, unref as y, withCtx as x, createCommentVNode as w, withModifiers as U, computed as L, watch as C, renderSlot as q, createBlock as H, h as G } from "vue";
+import { ElIcon as V, ElInput as J, ElSegmented as Q } from "element-plus";
+import { Doc as E, Seach as W } from "color-message-aibox-vue";
+import { IconDelete as X } from "color-message-lingyun-vue";
+import { _ as N } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import { TreeSelect as Y } from "color-star-custom-components";
+import './assets/DocSyncSelect.css';const T = {
+  label: "name",
+  children: "children",
+  value: "id"
+}, Z = { class: "right-wrap" }, ee = { class: "title-length" }, te = { class: "content" }, le = {
+  key: 0,
+  class: "empty-state"
+}, se = {
+  key: 1,
+  class: "selected-list"
+}, oe = ["onClick"], ae = { class: "item-content" }, ne = { class: "item-main" }, re = { class: "doc-icon" }, ce = { class: "doc-info" }, ie = { class: "doc-name" }, de = {
+  key: 0,
+  class: "doc-suffix"
+}, ue = ["onClick"], he = /* @__PURE__ */ Object.assign({
+  name: "RightLayout"
+}, {
+  __name: "RightLayout",
+  props: {
+    // 已选择的文档列表
+    selectedDocuments: {
+      type: Array,
+      default: () => []
+    },
+    // 树配置
+    treeProps: {
+      type: Object,
+      default: () => ({
+        label: "label",
+        value: "id",
+        children: "children"
+      })
+    }
+  },
+  emits: ["delete-node"],
+  setup(r, { emit: c }) {
+    const i = c, e = k(-1), o = (a) => {
+      e.value = e.value === a ? -1 : a;
+    }, h = (a) => {
+      i("delete-node", a), e.value = -1;
+    };
+    return (a, l) => (b(), S("div", Z, [
+      f("div", ee, D(r.selectedDocuments.length) + "项 ", 1),
+      f("div", te, [
+        r.selectedDocuments.length === 0 ? (b(), S("div", le, " 同步过来的文档 ")) : (b(), S("div", se, [
+          (b(!0), S(F, null, K(r.selectedDocuments, (s, v) => (b(), S("div", {
+            key: s[r.treeProps.value],
+            class: M(["selected-item", { "is-selected": e.value === v }]),
+            onClick: (t) => o(v)
+          }, [
+            f("div", ae, [
+              f("div", ne, [
+                f("div", re, [
+                  _(y(V), { size: 36 }, {
+                    default: x(() => [
+                      _(y(E))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                f("div", ce, [
+                  f("div", ie, D(s[r.treeProps.label]), 1),
+                  s.suffix ? (b(), S("div", de, D(s.suffix), 1)) : w("", !0)
+                ])
+              ]),
+              f("div", {
+                class: "flex items-center",
+                onClick: U((t) => h(s), ["stop"])
+              }, [
+                _(y(V), {
+                  size: 14,
+                  color: "var(--neutral-color-5)"
+                }, {
+                  default: x(() => [
+                    _(y(X))
+                  ]),
+                  _: 1
+                })
+              ], 8, ue)
+            ])
+          ], 10, oe))), 128))
+        ]))
+      ])
+    ]));
+  }
+}), pe = /* @__PURE__ */ N(he, [["__scopeId", "data-v-3e8b7c71"]]);
+function fe(r) {
+  return {
+    name: "element-tree-line",
+    props: {
+      node: {
+        type: Object,
+        required: !0
+      },
+      data: {
+        type: Object
+      },
+      treeData: {
+        type: Array
+      },
+      indent: {
+        type: Number,
+        default() {
+          return 16;
+        }
+      },
+      showLabelLine: {
+        type: Boolean,
+        default: !0
+      }
+    },
+    render(c) {
+      const i = r || c, e = this.getScopedSlot("default"), o = this.getScopedSlot("node-label"), h = this.getScopedSlot("after-node-label"), a = e ? this.getScopedSlotValue(e, {
+        node: this.node,
+        data: this.data
+      }) : [
+        o ? this.getScopedSlotValue(o, {
+          node: this.node,
+          data: this.data
+        }) : i(
+          "span",
+          { class: "element-tree-node-label" },
+          this.node.label
+        ),
+        this.showLabelLine ? i("span", {
+          class: "element-tree-node-label-line"
+        }) : null,
+        this.getScopedSlotValue(h, {
+          node: this.node,
+          data: this.data
+        })
+      ], l = [];
+      let s = this.node;
+      for (; s; ) {
+        let t = s.parent;
+        if (s.level === 1 && !s.parent) {
+          if (!this.treeData || !Array.isArray(this.treeData))
+            throw Error(
+              "if you using el-tree-v2 (Virtualized Tree) of element-plus,element-tree-line required data."
+            );
+          t = {
+            children: Array.isArray(this.treeData) ? this.treeData.map((p) => ({ ...p, key: p.id })) : [],
+            level: 0,
+            key: "node-0",
+            parent: null
+          };
+        }
+        if (t) {
+          const p = (t.children || t.childNodes).findIndex(
+            (g) => (g.key || g.id) === (s.key || s.id)
+          );
+          l.unshift(
+            p === (t.children || t.childNodes).length - 1
+          );
+        }
+        s = t;
+      }
+      const v = [];
+      for (let t = 0; t < this.node.level; t++)
+        l[t] && this.node.level - 1 !== t || v.push(
+          i("span", {
+            class: {
+              "element-tree-node-line-ver": !0,
+              "last-node-isLeaf-line": l[t] && this.node.level - 1 === t
+            },
+            style: { left: this.indent * t + "px" }
+          })
+        );
+      return i(
+        "span",
+        {
+          class: "element-tree-node-label-wrapper"
+        },
+        [a].concat(v).concat([
+          i("span", {
+            class: "element-tree-node-line-hor",
+            style: {
+              width: (this.node.isLeaf ? 24 : 8) + "px",
+              left: (this.node.level - 1) * this.indent + "px"
+            }
+          })
+        ])
+      );
+    },
+    methods: {
+      getScopedSlot(c) {
+        if (!c)
+          return null;
+        const i = c.split("||");
+        let e = null;
+        for (let o = 0; o < i.length; o++) {
+          const h = i[o], a = (this.$slots || {})[h];
+          if (a) {
+            e = a;
+            break;
+          }
+          if (e = (this.$scopedSlots || {})[h], e)
+            break;
+        }
+        return e;
+      },
+      getScopedSlotValue(c, i, e = null) {
+        return typeof c == "function" ? c(i) || e : c || e;
+      }
+    }
+  };
+}
+function O(r) {
+  const c = fe(r);
+  return r && (c.methods.getScopedSlot = function(e) {
+    if (!e)
+      return null;
+    const o = e.split("||");
+    let h = null;
+    for (let a = 0; a < o.length; a++) {
+      const l = o[a], s = (this.$slots || {})[l];
+      if (s) {
+        h = s;
+        break;
+      }
+    }
+    return h;
+  }), c;
+}
+O();
+const me = { class: "left-wrap" }, ve = { class: "title-length" }, ye = { class: "content" }, _e = { class: "input-wrap" }, be = { class: "tree-container" }, Se = { class: "tree-node-content" }, ge = { class: "node-info" }, ke = { class: "node-label" }, De = {
+  key: 0,
+  class: "node-suffix"
+}, Le = 15, xe = /* @__PURE__ */ Object.assign({
+  name: "LeftLayout"
+}, {
+  __name: "LeftLayout",
+  props: {
+    // 文件夹选项卡配置
+    tabs: {
+      type: Array,
+      default: () => [
+        { label: "我的文件夹", value: "myFiles" },
+        { label: "飞书知识库", value: "feishuKnowledge" }
+      ]
+    },
+    // 文档树数据
+    treeData: {
+      type: Object,
+      default: () => ({})
+    },
+    // 树配置
+    treeProps: {
+      type: Object,
+      default: () => ({
+        label: "label",
+        value: "id",
+        children: "children"
+      })
+    },
+    // 已选择的文档
+    selectedDocuments: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["node-check"],
+  setup(r, { expose: c, emit: i }) {
+    const e = r, o = i, h = O(G), a = k(), l = k(""), s = k(e.tabs[0]?.value || "myFiles"), v = k([]), t = L(() => e.tabs.map((n) => ({
+      label: n.label,
+      value: n.value
+    }))), p = L(() => e.treeData[s.value] || []), g = L(() => {
+      const n = l.value?.trim();
+      return n ? $(p.value, n) : p.value;
+    }), $ = (n, u) => !n || !Array.isArray(n) ? [] : n.reduce((d, m) => {
+      const R = m[e.treeProps.label]?.toLowerCase().includes(u.toLowerCase()), z = m.suffix?.toLowerCase().includes(u.toLowerCase());
+      if (R || z)
+        d.push({ ...m });
+      else if (m[e.treeProps.children]) {
+        const A = $(m[e.treeProps.children], u);
+        A.length > 0 && d.push({
+          ...m,
+          [e.treeProps.children]: A
+        });
+      }
+      return d;
+    }, []), P = (n) => {
+      let u = 0;
+      return !n || !Array.isArray(n) ? 0 : (n.forEach((d) => {
+        d.type !== "folder" && u++, d[e.treeProps.children] && d[e.treeProps.children].length > 0 && (u += P(d[e.treeProps.children]));
+      }), u);
+    }, I = L(() => P(p.value)), j = (n) => {
+      o("node-check", n);
+    };
+    return C(s, () => {
+      l.value = "";
+    }), C(
+      () => e.selectedDocuments,
+      (n) => {
+        v.value = n || [];
+      },
+      { immediate: !0, deep: !0 }
+    ), c({
+      setNodeCheckStatus: (n, u) => {
+        a.value?.setNodeCheckStatus(n, u);
+      }
+    }), (n, u) => (b(), S("div", me, [
+      f("div", ve, D(I.value) + "项 ", 1),
+      f("div", ye, [
+        f("div", _e, [
+          _(y(J), {
+            modelValue: l.value,
+            "onUpdate:modelValue": u[0] || (u[0] = (d) => l.value = d),
+            placeholder: "请输入成员名称",
+            "prefix-icon": y(W),
+            clearable: ""
+          }, null, 8, ["modelValue", "prefix-icon"])
+        ]),
+        _(y(Q), {
+          modelValue: s.value,
+          "onUpdate:modelValue": u[1] || (u[1] = (d) => s.value = d),
+          options: t.value
+        }, null, 8, ["modelValue", "options"]),
+        f("div", be, [
+          _(y(Y), {
+            modelValue: v.value,
+            "onUpdate:modelValue": u[2] || (u[2] = (d) => v.value = d),
+            ref_key: "treeSelectRef",
+            ref: a,
+            "tree-list": g.value,
+            "tree-props": r.treeProps,
+            "show-checkbox": !0,
+            "check-strictly": !1,
+            "default-expand-all": !0,
+            "filter-keyword": l.value,
+            itemSize: 50,
+            hasTreeLine: !0,
+            onHandleCheck: j
+          }, {
+            node: x(({ node: d, data: m }) => [
+              q(n.$slots, "node", {
+                node: d,
+                data: m
+              }, () => [
+                _(y(h), {
+                  node: d,
+                  treeData: g.value,
+                  showLabelLine: !0,
+                  indent: Le
+                }, {
+                  default: x(() => [
+                    f("div", Se, [
+                      m.type !== "folder" ? (b(), H(y(V), {
+                        key: 0,
+                        size: 36,
+                        color: "var(--neutral-color-5)"
+                      }, {
+                        default: x(() => [
+                          _(y(E))
+                        ]),
+                        _: 1
+                      })) : w("", !0),
+                      f("div", ge, [
+                        f("span", ke, D(m[r.treeProps.label]), 1),
+                        m.suffix ? (b(), S("span", De, D(m.suffix), 1)) : w("", !0)
+                      ])
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["node", "treeData"])
+              ], !0)
+            ]),
+            _: 3
+          }, 8, ["modelValue", "tree-list", "tree-props", "filter-keyword"])
+        ])
+      ])
+    ]));
+  }
+}), we = /* @__PURE__ */ N(xe, [["__scopeId", "data-v-0c32be83"]]), Ce = { class: "doc-sync-select" }, Ve = /* @__PURE__ */ Object.assign({
+  name: "DocSyncSelect"
+}, {
+  __name: "layout",
+  props: {
+    // 选中的文档列表
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    // 文档树数据（业务端传入）
+    treeData: {
+      type: Object,
+      default: () => ({})
+    },
+    // 树配置
+    treeProps: {
+      type: Object,
+      default: () => T
+    },
+    // 文件夹选项卡配置
+    tabs: {
+      type: Array,
+      default: () => [
+        { label: "我的文件夹", value: "myFiles" },
+        { label: "飞书知识库", value: "feishuKnowledge" }
+      ]
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(r, { expose: c, emit: i }) {
+    const e = r, o = i, h = L(() => ({ ...T, ...e.treeProps })), a = k(), l = k([]), s = (t) => {
+      const { selectedNode: p } = t;
+      l.value = p || [], o("update:modelValue", l.value), o("change", l.value);
+    }, v = (t) => {
+      const p = h.value.value;
+      l.value = l.value.filter(
+        (g) => g[p] !== t[p]
+      ), a.value && a.value.setNodeCheckStatus && a.value.setNodeCheckStatus(t[p], !1), o("update:modelValue", l.value), o("change", l.value);
+    };
+    return C(
+      () => e.modelValue,
+      (t) => {
+        l.value = t || [];
+      },
+      { immediate: !0, deep: !0 }
+    ), c({
+      // 清空选择
+      clearSelection: () => {
+        l.value = [], o("update:modelValue", []), o("change", []);
+      },
+      // 获取选中项
+      getSelectedDocuments: () => l.value,
+      // 设置选中项
+      setSelectedDocuments: (t) => {
+        l.value = t || [], o("update:modelValue", l.value), o("change", l.value);
+      }
+    }), (t, p) => (b(), S("div", Ce, [
+      _(we, {
+        tabs: r.tabs,
+        "tree-data": r.treeData,
+        "tree-props": h.value,
+        "selected-documents": l.value,
+        ref_key: "leftLayoutRef",
+        ref: a,
+        onNodeCheck: s
+      }, null, 8, ["tabs", "tree-data", "tree-props", "selected-documents"]),
+      _(pe, {
+        "selected-documents": l.value,
+        "tree-props": h.value,
+        onDeleteNode: v
+      }, null, 8, ["selected-documents", "tree-props"])
+    ]));
+  }
+}), Ne = /* @__PURE__ */ N(Ve, [["__scopeId", "data-v-4ca67df6"]]), je = B(Ne);
+export {
+  je as DocSyncSelect,
+  je as default
+};