mealcomes/dist/es/tree-Cx-Er-bV.mjs

MealComes 用于学习前端的组件库

import { c as V, w as X } from "./utils-aznwSRCL.mjs";
import { defineComponent as A, inject as Y, toRef as Z, computed as M, createElementBlock as q, openBlock as b, normalizeClass as m, unref as d, createElementVNode as F, createBlock as w, createCommentVNode as ee, normalizeStyle as te, createVNode as T, withCtx as z, ref as k, watch as R, provide as le, useSlots as ne, onMounted as ae } from "vue";
import { M as se } from "./icon-B8YaO9re.mjs";
import { S as oe, L as de } from "./internal-icon-BfdBrYGj.mjs";
import { M as ie } from "./checkbox-Bxqb1mwr.mjs";
import { V as re } from "./virtual-list-CiKIwcIK.mjs";
const ce = {
  /**
   * 传入的数据
   */
  data: {
    type: Array,
    default: () => []
  },
  /**
   * 默认展开的 keys
   */
  defaultExpandedKeys: {
    // 默认展开的 key
    type: Array,
    default: () => []
  },
  /**
   * label 字段名
   */
  labelField: {
    // data 属性中 label 字段名
    type: String,
    default: "label"
  },
  /**
   * key 字段名
   */
  keyField: {
    // data 属性中 key 字段名
    type: String,
    default: "key"
  },
  /**
   * 子树
   */
  childrenField: {
    // // data 属性中 children 字段名
    type: String,
    default: "children"
  },
  /**
   * 懒加载处理函数
   */
  onLoad: Function,
  /**
   * 被选中的 key
   */
  selectedKeys: {
    type: Array
  },
  /**
   * 是否可选
   */
  selectable: {
    type: Boolean,
    default: !1
  },
  /**
   * 是否可多选
   */
  multiple: {
    type: Boolean,
    default: !1
  },
  /**
   * 默认选中的选项
   */
  defaultCheckedKeys: {
    type: Array,
    default: () => []
  },
  /**
   * 是否展示 checkbox
   */
  showCheckbox: {
    type: Boolean,
    default: !1
  }
}, ue = {
  /**
   * 选择了的 key 更新
   */
  "update:selectedKeys": (i) => i
}, fe = {
  /**
   * 节点
   */
  node: {
    type: Object,
    required: !0
  },
  /**
   * 是否展开
   */
  expanded: {
    type: Boolean,
    required: !0
  },
  /**
   * 处于加载中的 keys
   */
  loadingKeys: {
    type: Object,
    required: !0
  },
  /**
   * 被选中的 keys
   */
  selectedKeys: {
    type: Array,
    default: () => []
  },
  /**
   * 是否展示 checkbox
   */
  showCheckbox: {
    type: Boolean,
    default: !1
  },
  /**
   * 是否选中
   */
  checked: Boolean,
  /**
   * 是否禁用
   */
  disabled: Boolean,
  /**
   * 是否半选
   */
  indeterminate: Boolean
}, ye = {
  /**
   * 展开/折叠
   */
  toggle: (i) => i,
  /**
   * 节点选择
   */
  select: (i, u = !1) => i || u,
  check: (i, u) => typeof u == "boolean" && i
}, P = Symbol(), he = {
  node: {
    type: Object,
    required: !0
  }
}, pe = /* @__PURE__ */ A({
  name: "MCTreeNodeContent",
  props: he,
  setup(i) {
    const u = Y(P), r = Z(i, "node");
    return () => {
      var a;
      return u != null && u.slots.default ? u.slots.default({
        node: r.value
      }) : (a = r.value) == null ? void 0 : a.label;
    };
  }
}), ke = /* @__PURE__ */ A({
  __name: "treeNode",
  props: fe,
  emits: ye,
  setup(i, { emit: u }) {
    const r = V("tree-node"), a = i, v = u;
    function K() {
      v("toggle", a.node);
    }
    const x = M(() => a.loadingKeys.has(a.node.key)), g = M(() => a.selectedKeys.includes(a.node.key));
    function C(o) {
      a.node.disabled || a.showCheckbox || v("select", a.node, o.ctrlKey);
    }
    function y(o) {
      v("check", a.node, o);
    }
    return (o, N) => (b(), q("div", {
      class: m([d(r).b(), d(r).is("selected", g.value), d(r).is("disabled", o.node.disabled)])
    }, [
      F("span", {
        class: m(d(r).b("indent")),
        style: te({ width: `${o.node.level * 24}px` })
      }, null, 6),
      F("span", {
        class: m([d(r).e("expand-icon"), { expanded: o.expanded && !o.node.isLeaf }, d(r).is("leaf", o.node.isLeaf)]),
        onClick: K
      }, [
        T(d(se), {
          class: m(d(r).e("switcher")),
          size: "16",
          color: "#1F1F1F"
        }, {
          default: z(() => [
            x.value ? (b(), w(d(de), { key: 1 })) : (b(), w(d(oe), { key: 0 }))
          ]),
          _: 1
        }, 8, ["class"])
      ], 2),
      o.showCheckbox ? (b(), w(d(ie), {
        key: 0,
        style: { margin: "0 3px" },
        "model-value": o.checked,
        disabled: o.disabled,
        indeterminate: o.indeterminate,
        onChange: y
      }, null, 8, ["model-value", "disabled", "indeterminate"])) : ee("", !0),
      F("span", {
        class: m(d(r).e("content")),
        onClick: C
      }, [
        T(d(pe), { node: o.node }, null, 8, ["node"])
      ], 2)
    ], 2));
  }
}), me = /* @__PURE__ */ A({
  name: "mc-tree",
  __name: "tree",
  props: ce,
  emits: ue,
  setup(i, { emit: u }) {
    const r = V("tree"), a = i, v = u, K = k([]);
    function x(e, l, t) {
      return {
        getKey(n) {
          return n[e];
        },
        getLabel(n) {
          return n[l];
        },
        getChildren(n) {
          return n[t];
        }
      };
    }
    const g = x(
      a.keyField,
      a.labelField,
      a.childrenField
    );
    function C(e, l = null) {
      function t(s, f = null) {
        return s.map((c) => {
          const B = g.getChildren(c) || [], E = {
            key: g.getKey(c),
            label: g.getLabel(c),
            children: [],
            // 默认为空
            rawNode: c,
            level: f ? f.level + 1 : 0,
            disabled: !!c.disabled,
            // 以 node 属性 isLeaf 为准，其次是判断孩子是否为空
            // ?? 是对 || 的增强, 即只有 node.isLeaf 不存在的时候, 才会走到后面, 而不是为 false 时
            isLeaf: c.isLeaf ?? B.length == 0,
            parentKey: f == null ? void 0 : f.key
          };
          return B.length > 0 && (E.children = t(B, E)), E;
        });
      }
      return t(e, l);
    }
    R(
      () => a.data,
      (e) => {
        K.value = C(e);
      },
      {
        immediate: !0
      }
    );
    const y = k(new Set(a.defaultExpandedKeys)), o = M(() => {
      let e = y.value, l = [];
      const t = K.value || [], n = [];
      for (let s = t.length - 1; s >= 0; s--)
        n.push(t[s]);
      for (; n.length; ) {
        const s = n.pop();
        if (s && (l.push(s), e.has(s.key))) {
          const f = s.children;
          if (f)
            for (let c = f.length - 1; c >= 0; c--)
              n.push(f[c]);
        }
      }
      return l;
    });
    function N(e) {
      return o.value.find((l) => l.key === e);
    }
    function _(e) {
      return y.value.has(e.key);
    }
    function $(e) {
      y.value.delete(e.key);
    }
    const S = k(/* @__PURE__ */ new Set());
    function D(e) {
      if (!e.children.length && !e.isLeaf) {
        const l = S.value;
        if (!l.has(e.key)) {
          l.add(e.key);
          const t = a.onLoad;
          t && t(e.rawNode).then((n) => {
            e.rawNode.children = n, e.children = C(n, e), l.delete(e.key);
          }).catch(() => {
            e.isLeaf = !0;
          });
        }
      }
    }
    function G(e) {
      D(e), y.value.add(e.key);
    }
    function H(e) {
      y.value.has(e.key) && !S.value.has(e.key) ? $(e) : G(e);
    }
    const L = k([]);
    R(
      () => a.selectedKeys,
      (e) => {
        e && (L.value = e);
      },
      {
        immediate: !0
      }
    );
    function J(e, l) {
      let t = Array.from(L.value);
      if (a.selectable) {
        if (a.multiple && l) {
          let n = t.findIndex((s) => s === e.key);
          n > -1 ? t.splice(n, 1) : t.push(e.key);
        } else
          t.includes(e.key) ? t = [] : t = [e.key];
        v("update:selectedKeys", t);
      }
    }
    le(P, {
      slots: ne()
    });
    const h = k(new Set(a.defaultCheckedKeys));
    function Q(e) {
      return h.value.has(e.key);
    }
    function U(e) {
      return !!e.disabled;
    }
    const p = k(/* @__PURE__ */ new Set());
    function W(e) {
      return p.value.has(e.key);
    }
    function j(e, l) {
      if (!e) return;
      const t = h.value;
      l && p.value.delete(e.key), t[l ? "add" : "delete"](e.key);
      const n = e.children;
      n && n.forEach((s) => {
        s.disabled || j(s, l);
      });
    }
    function I(e) {
      if (e.parentKey) {
        const t = N(e.parentKey);
        if (t) {
          let n = !0, s = !1;
          const f = t.children;
          for (let c of f)
            h.value.has(c.key) ? s = !0 : p.value.has(c.key) ? (n = !1, s = !0) : n = !1;
          n ? (h.value.add(t.key), p.value.delete(t.key)) : s ? (h.value.delete(t.key), p.value.add(t.key)) : (h.value.delete(t.key), p.value.delete(t.key)), I(t);
        }
      }
    }
    function O(e, l) {
      j(e, l), I(e);
    }
    return ae(() => {
      h.value.forEach((e) => {
        const l = N(e);
        l && O(l, !0);
      });
    }), (e, l) => (b(), q("div", {
      class: m(d(r).b())
    }, [
      T(d(re), {
        items: o.value,
        remain: 8,
        size: 27
      }, {
        default: z(({ node: t }) => [
          (b(), w(ke, {
            key: t.key,
            node: t,
            expanded: _(t),
            onToggle: H,
            loadingKeys: S.value,
            selectedKeys: L.value,
            onSelect: J,
            "show-checkbox": e.showCheckbox,
            checked: Q(t),
            disabled: U(t),
            indeterminate: W(t),
            onCheck: O
          }, null, 8, ["node", "expanded", "loadingKeys", "selectedKeys", "show-checkbox", "checked", "disabled", "indeterminate"]))
        ]),
        _: 1
      }, 8, ["items"])
    ], 2));
  }
}), xe = X(me);
export {
  xe as M,
  ue as a,
  fe as b,
  ye as c,
  P as d,
  he as e,
  ce as t
};
//# sourceMappingURL=tree-Cx-Er-bV.mjs.map