color-star-custom-components 0.0.11 → 0.0.13

package/es/chunks/layout.doc0wm3z.js

@@ -0,0 +1,411 @@
+import { useAttrs as ae, ref as L, computed as S, watch as q, nextTick as B, onMounted as ie, createElementBlock as M, openBlock as x, createCommentVNode as re, createElementVNode as T, createVNode as v, unref as f, withCtx as N, normalizeClass as de, mergeProps as ce, renderSlot as O, toDisplayString as K, withModifiers as ue, createBlock as he, h as R } from "vue";
+import { ElInput as fe, ElIcon as H, ElAutoResizer as pe, ElTreeV2 as me } from "element-plus";
+import { IconSearch as ve, IconDelete as ye, IconRighttop as ge } from "color-message-lingyun-vue";
+import { IconEmpty as ke } from "../IconEmpty.mjs";
+import { _ as Se } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/layout2.css';function Ne(a) {
+  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(r) {
+      const d = a || r, s = this.getScopedSlot("default"), t = this.getScopedSlot("node-label"), c = this.getScopedSlot("after-node-label"), p = s ? this.getScopedSlotValue(s, {
+        node: this.node,
+        data: this.data
+      }) : [
+        t ? this.getScopedSlotValue(t, {
+          node: this.node,
+          data: this.data
+        }) : d(
+          "span",
+          { class: "element-tree-node-label" },
+          this.node.label
+        ),
+        this.showLabelLine ? d("span", {
+          class: "element-tree-node-label-line"
+        }) : null,
+        this.getScopedSlotValue(c, {
+          node: this.node,
+          data: this.data
+        })
+      ], y = [];
+      let u = this.node;
+      for (; u; ) {
+        let n = u.parent;
+        if (u.level === 1 && !u.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."
+            );
+          n = {
+            children: Array.isArray(this.treeData) ? this.treeData.map((m) => ({ ...m, key: m.id })) : [],
+            level: 0,
+            key: "node-0",
+            parent: null
+          };
+        }
+        if (n) {
+          const m = (n.children || n.childNodes).findIndex(
+            (b) => (b.key || b.id) === (u.key || u.id)
+          );
+          y.unshift(
+            m === (n.children || n.childNodes).length - 1
+          );
+        }
+        u = n;
+      }
+      const V = [];
+      for (let n = 0; n < this.node.level; n++)
+        y[n] && this.node.level - 1 !== n || V.push(
+          d("span", {
+            class: {
+              "element-tree-node-line-ver": !0,
+              "last-node-isLeaf-line": y[n] && this.node.level - 1 === n
+            },
+            style: { left: this.indent * n + "px" }
+          })
+        );
+      return d(
+        "span",
+        {
+          class: "element-tree-node-label-wrapper"
+        },
+        [p].concat(V).concat([
+          d("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(r) {
+        if (!r)
+          return null;
+        const d = r.split("||");
+        let s = null;
+        for (let t = 0; t < d.length; t++) {
+          const c = d[t], p = (this.$slots || {})[c];
+          if (p) {
+            s = p;
+            break;
+          }
+          if (s = (this.$scopedSlots || {})[c], s)
+            break;
+        }
+        return s;
+      },
+      getScopedSlotValue(r, d, s = null) {
+        return typeof r == "function" ? r(d) || s : r || s;
+      }
+    }
+  };
+}
+function Q(a) {
+  const r = Ne(a);
+  return a && (r.methods.getScopedSlot = function(s) {
+    if (!s)
+      return null;
+    const t = s.split("||");
+    let c = null;
+    for (let p = 0; p < t.length; p++) {
+      const y = t[p], u = (this.$slots || {})[y];
+      if (u) {
+        c = u;
+        break;
+      }
+    }
+    return c;
+  }), r;
+}
+Q();
+const be = { class: "w-full h-full flex flex-col overflow-hidden" }, Ce = {
+  key: 0,
+  class: "mg-b-16"
+}, Le = {
+  key: 0,
+  class: "list-item flex justify-between pd-l-6 pd-r-6 radius-8 items-center w-full"
+}, xe = ["onClick"], Ve = { key: 1 }, we = /* @__PURE__ */ Object.assign({
+  name: "TreeSelect"
+}, {
+  __name: "layout",
+  props: {
+    // 初始值
+    modelValue: {
+      type: Object,
+      default: () => []
+    },
+    // 树形节点对象结构
+    treeProps: {
+      type: Object,
+      default: () => ({
+        value: "id",
+        label: "label",
+        children: "children"
+      })
+    },
+    // 接口配置
+    apiConfig: {
+      type: Function
+    },
+    // 请求参数
+    reqParams: {
+      type: Object,
+      default: () => ({})
+    },
+    // 是否在组件挂载时自动加载数据
+    autoLoad: {
+      type: Boolean,
+      default: !0
+    },
+    // 是否多选
+    isMultiple: {
+      type: Boolean,
+      default: !0
+    },
+    // 是否有过滤
+    hasFilter: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否是列表模式
+    isListMode: {
+      type: Boolean,
+      default: !1
+    },
+    treeList: {
+      type: Array,
+      default: () => []
+    },
+    // 是否有线条样式
+    hasTreeLine: {
+      type: Boolean,
+      default: !0
+    },
+    // 选中的节点是否包含父节点
+    includeParentSelected: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["handleCheck", "handleDeleteNode", "initFinish"],
+  setup(a, { expose: r, emit: d }) {
+    const s = Q(R), t = a, c = d, p = ae(), y = () => R(ge, {
+      style: { color: "var(--text-color-2)", fontSize: "16px" }
+    }), u = t.isMultiple ? 20 : 10, V = t.isMultiple ? 15 : 11, n = L([]), m = L(null), b = L(null), D = S(() => t.treeProps.value), P = S(() => t.treeProps.label), g = S(() => t.treeProps.children), _ = L(!1), U = S(() => !t.isMultiple && _.value), G = S(() => typeof t.apiConfig == "function"), J = () => {
+      let e = m.value?.getCheckedNodes(), l = e.map((h) => h[D.value]), o = [];
+      return e.length && !t.includeParentSelected && (e = e.filter((h) => !h[g.value]), l = e.map((h) => h[D.value])), t.includeParentSelected && (o = W(n.value, l)), {
+        selectedNodeValues: l,
+        // 选中节点的值的集合
+        selectedNodes: e,
+        // 选中节点的集合
+        selectedParentNodes: o
+        // 选中节点的所有父节点
+      };
+    };
+    function W(e, l) {
+      const o = /* @__PURE__ */ new Map();
+      function h(i, k = []) {
+        for (const C of i) {
+          const se = [...k, C];
+          C.children && C.children.length > 0 ? h(C.children, se) : l.includes(C.id) && k.forEach((A) => {
+            o.has(A.id) || o.set(A.id, { ...A });
+          });
+        }
+      }
+      return h(e), Array.from(o.values());
+    }
+    const X = (e) => {
+      !t.isMultiple || t.isListMode || E();
+    }, Y = (e, l) => {
+      t.isMultiple || t.isListMode || (_.value = !0, b.value = l.key, c("handleCheck", {
+        selectedValue: [b.value],
+        // 选中节点的值
+        selectedNode: [l.data]
+        // // 选中节点
+      }));
+    }, j = L(""), Z = (e) => {
+      m.value.filter(e);
+    }, ee = (e, l) => l[P.value].includes(e), te = (e) => {
+      let l = 0;
+      function o(h) {
+        for (const i of h) {
+          const k = i[g.value] && i[g.value].length > 0;
+          t.includeParentSelected ? l++ : k || l++, k && o(i[g.value]);
+        }
+      }
+      return o(e), l;
+    }, le = S(() => te(n.value));
+    function E() {
+      const { selectedNodeValues: e, selectedNodes: l, selectedParentNodes: o } = J();
+      c("handleCheck", {
+        selectedValue: e,
+        // 选中节点的值的集合
+        selectedNode: l,
+        // 选中节点的集合
+        selectedParentNodes: o
+      });
+    }
+    const ne = (e, l) => {
+      m.value?.setChecked(e, l), E();
+    }, z = () => {
+      p["default-checked-keys"] && B(() => {
+        E();
+      });
+    }, oe = (e) => {
+      c("handleDeleteNode", e);
+    }, w = (e) => e?.map((l) => ({
+      ...l,
+      [g.value]: l[g.value]?.length ? w(l[g.value]) : void 0
+    })), F = async () => {
+      G.value ? t.apiConfig(t.reqParams)?.then((e) => {
+        n.value = w(e?.data || []), z(), I(t.modelValue), c("initFinish", n.value);
+      }) : $();
+    }, $ = () => {
+      t.isListMode ? n.value = w(t.treeList || []) : (n.value = w(t.treeList || []), n.value.length && (z(), I(t.modelValue)));
+    }, I = (e) => {
+      const l = e && e.length && e.map((o) => o[t.treeProps.value]);
+      B(() => {
+        m.value?.setCheckedKeys(l);
+      });
+    };
+    return q(
+      () => t.treeList,
+      () => {
+        $();
+      },
+      { deep: !0 }
+    ), q(
+      () => t.modelValue,
+      (e) => {
+        B(() => {
+          I(e);
+        });
+      },
+      { deep: !0 }
+    ), ie(() => {
+      F();
+    }), r({
+      allNodeNumbers: le,
+      loadData: F,
+      setNodeCheckStatus: ne
+    }), (e, l) => (x(), M("div", be, [
+      a.hasFilter ? (x(), M("div", Ce, [
+        v(f(fe), {
+          modelValue: j.value,
+          "onUpdate:modelValue": l[0] || (l[0] = (o) => j.value = o),
+          placeholder: "请输入",
+          onInput: Z
+        }, {
+          prefix: N(() => [
+            v(f(H), {
+              size: 16,
+              color: "var(--neutral-color-12)",
+              class: "mg-r-4"
+            }, {
+              default: N(() => [
+                v(f(ve))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ])) : re("", !0),
+      T("div", {
+        class: de([a.hasFilter ? "pd-l-8 pd-r-8" : "", "flex-1 overflow-hidden"])
+      }, [
+        v(f(pe), null, {
+          default: N(({ width: o, height: h }) => [
+            v(f(me), ce({
+              ref_key: "treeRef",
+              ref: m,
+              height: h,
+              width: o,
+              data: n.value,
+              props: a.treeProps,
+              "node-key": D.value,
+              "show-checkbox": a.isMultiple && !a.isListMode,
+              "item-size": 34,
+              indent: f(u),
+              "highlight-current": U.value,
+              icon: a.isListMode ? "" : y,
+              "filter-method": ee
+            }, f(p), {
+              onNodeClick: Y,
+              onCheck: X
+            }), {
+              default: N(({ node: i }) => [
+                a.isListMode ? (x(), M("div", Le, [
+                  O(e.$slots, "node", {
+                    node: i,
+                    data: i.data
+                  }, () => [
+                    T("span", null, K(i.data[P.value]), 1)
+                  ], !0),
+                  T("div", {
+                    class: "flex items-center",
+                    onClick: ue((k) => oe(i.data), ["stop"])
+                  }, [
+                    v(f(H), {
+                      size: 14,
+                      color: "var(--neutral-color-5)"
+                    }, {
+                      default: N(() => [
+                        v(f(ye))
+                      ]),
+                      _: 1
+                    })
+                  ], 8, xe)
+                ])) : O(e.$slots, "node", {
+                  key: 1,
+                  node: i,
+                  data: i.data
+                }, () => [
+                  a.hasTreeLine ? (x(), he(f(s), {
+                    key: 0,
+                    node: i,
+                    treeData: n.value,
+                    showLabelLine: !1,
+                    indent: f(V)
+                  }, null, 8, ["node", "treeData", "indent"])) : (x(), M("span", Ve, K(i.data[P.value]), 1))
+                ], !0)
+              ]),
+              empty: N(() => [
+                v(f(ke))
+              ]),
+              _: 3
+            }, 16, ["height", "width", "data", "props", "node-key", "show-checkbox", "indent", "highlight-current", "icon"])
+          ]),
+          _: 3
+        })
+      ], 2)
+    ]));
+  }
+}), Ae = /* @__PURE__ */ Se(we, [["__scopeId", "data-v-1466e8fd"]]);
+export {
+  Ae as T
+};