vft 0.0.73 → 0.0.76

package/es/components/tree/tree.vue.js

@@ -0,0 +1,48 @@
+import s from "./tree.vue2.js";
+import { resolveComponent as p, openBlock as r, createElementBlock as n, normalizeClass as o, Fragment as i, renderList as l, createBlock as m, renderSlot as g, createElementVNode as t, toDisplayString as h, createCommentVNode as c, withDirectives as u, vShow as f } from "vue";
+import y from "../../_virtual/_plugin-vue_export-helper.js";
+function k(e, E, w, N, S, $) {
+  const a = p("tree-node");
+  return r(), n("div", {
+    ref: "el$",
+    class: o([
+      e.ns.b(),
+      e.ns.is("dragging", !!e.dragState.draggingNode),
+      e.ns.is("drop-not-allow", !e.dragState.allowDrop),
+      e.ns.is("drop-inner", e.dragState.dropType === "inner"),
+      { [e.ns.m("highlight-current")]: e.highlightCurrent }
+    ]),
+    role: "tree"
+  }, [
+    (r(!0), n(i, null, l(e.root.childNodes, (d) => (r(), m(a, {
+      key: e.getNodeKey(d),
+      node: d,
+      props: e.props,
+      accordion: e.accordion,
+      "render-after-expand": e.renderAfterExpand,
+      "show-checkbox": e.showCheckbox,
+      "render-content": e.renderContent,
+      onNodeExpand: e.handleNodeExpand
+    }, null, 8, ["node", "props", "accordion", "render-after-expand", "show-checkbox", "render-content", "onNodeExpand"]))), 128)),
+    e.isEmpty ? (r(), n("div", {
+      key: 0,
+      class: o(e.ns.e("empty-block"))
+    }, [
+      g(e.$slots, "empty", {}, () => [
+        t("span", {
+          class: o(e.ns.e("empty-text"))
+        }, h(e.emptyText ?? "暂无数据"), 3)
+      ])
+    ], 2)) : c("", !0),
+    u(t("div", {
+      ref: "dropIndicator$",
+      class: o(e.ns.e("drop-indicator"))
+    }, null, 2), [
+      [f, e.dragState.showDropIndicator]
+    ])
+  ], 2);
+}
+const D = /* @__PURE__ */ y(s, [["render", k]]);
+export {
+  D as default
+};

package/es/components/tree/tree.vue2.js

@@ -0,0 +1,268 @@
+import { defineComponent as $, ref as l, computed as j, watch as u, provide as f, getCurrentInstance as _ } from "vue";
+import { useNamespace as R } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import "../form/index.js";
+import U from "./model/tree-store.js";
+import { getNodeKey as V, handleCurrentChange as K } from "./model/util.js";
+import G from "./tree-node.vue.js";
+import { useNodeExpandEventBroadcast as J } from "./model/useNodeExpandEventBroadcast.js";
+import { useDragNodeHandler as L } from "./model/useDragNode.js";
+import { useKeydown as Q } from "./model/useKeydown.js";
+import { formItemContextKey as W } from "../form/constants.js";
+const he = $({
+  name: "VftTree",
+  components: { TreeNode: G },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    emptyText: {
+      type: String
+    },
+    renderAfterExpand: {
+      type: Boolean,
+      default: !0
+    },
+    nodeKey: String,
+    checkStrictly: Boolean,
+    defaultExpandAll: Boolean,
+    expandOnClickNode: {
+      type: Boolean,
+      default: !0
+    },
+    checkOnClickNode: Boolean,
+    checkDescendants: {
+      type: Boolean,
+      default: !1
+    },
+    autoExpandParent: {
+      type: Boolean,
+      default: !0
+    },
+    defaultCheckedKeys: Array,
+    defaultExpandedKeys: Array,
+    currentNodeKey: [String, Number],
+    renderContent: Function,
+    showCheckbox: {
+      type: Boolean,
+      default: !1
+    },
+    draggable: {
+      type: Boolean,
+      default: !1
+    },
+    allowDrag: Function,
+    allowDrop: Function,
+    props: {
+      type: Object,
+      default: () => ({
+        children: "children",
+        label: "label",
+        disabled: "disabled"
+      })
+    },
+    lazy: {
+      type: Boolean,
+      default: !1
+    },
+    highlightCurrent: Boolean,
+    load: Function,
+    filterNodeMethod: Function,
+    accordion: Boolean,
+    indent: {
+      type: Number,
+      default: 18
+    },
+    icon: {
+      type: Object
+    }
+  },
+  emits: [
+    "check-change",
+    "current-change",
+    "node-click",
+    "node-contextmenu",
+    "node-collapse",
+    "node-expand",
+    "check",
+    "node-drag-start",
+    "node-drag-end",
+    "node-drop",
+    "node-drag-leave",
+    "node-drag-enter",
+    "node-drag-over"
+  ],
+  setup(t, o) {
+    const C = R("tree"), n = l(
+      new U({
+        key: t.nodeKey,
+        data: t.data,
+        lazy: t.lazy,
+        props: t.props,
+        load: t.load,
+        currentNodeKey: t.currentNodeKey,
+        checkStrictly: t.checkStrictly,
+        checkDescendants: t.checkDescendants,
+        defaultCheckedKeys: t.defaultCheckedKeys,
+        defaultExpandedKeys: t.defaultExpandedKeys,
+        autoExpandParent: t.autoExpandParent,
+        defaultExpandAll: t.defaultExpandAll,
+        filterNodeMethod: t.filterNodeMethod
+      })
+    );
+    n.value.initialize();
+    const c = l(n.value.root), s = l(null), i = l(null), y = l(null), { broadcastExpanded: m } = J(t), { dragState: N } = L({
+      props: t,
+      ctx: o,
+      el$: i,
+      dropIndicator$: y,
+      store: n
+    });
+    Q({ el$: i }, n);
+    const g = j(() => {
+      const { childNodes: e } = c.value;
+      return !e || e.length === 0 || e.every(({ visible: r }) => !r);
+    });
+    u(
+      () => t.currentNodeKey,
+      (e) => {
+        n.value.setCurrentNodeKey(e);
+      }
+    ), u(
+      () => t.defaultCheckedKeys,
+      (e) => {
+        n.value.setDefaultCheckedKey(e);
+      }
+    ), u(
+      () => t.defaultExpandedKeys,
+      (e) => {
+        n.value.setDefaultExpandedKeys(e);
+      }
+    ), u(
+      () => t.data,
+      (e) => {
+        n.value.setData(e);
+      },
+      { deep: !0 }
+    ), u(
+      () => t.checkStrictly,
+      (e) => {
+        n.value.checkStrictly = e;
+      }
+    );
+    const k = (e) => {
+      if (!t.filterNodeMethod)
+        throw new Error("[Tree] filterNodeMethod is required when filter");
+      n.value.filter(e);
+    }, v = (e) => V(t.nodeKey, e.data), E = (e) => {
+      if (!t.nodeKey)
+        throw new Error("[Tree] nodeKey is required in getNodePath");
+      const r = n.value.getNode(e);
+      if (!r)
+        return [];
+      const d = [r.data];
+      let a = r.parent;
+      for (; a && a !== c.value; )
+        d.push(a.data), a = a.parent;
+      return d.reverse();
+    }, w = (e, r) => n.value.getCheckedNodes(e, r), p = (e) => n.value.getCheckedKeys(e), h = () => {
+      const e = n.value.getCurrentNode();
+      return e ? e.data : null;
+    }, x = () => {
+      if (!t.nodeKey)
+        throw new Error("[Tree] nodeKey is required in getCurrentKey");
+      const e = h();
+      return e ? e[t.nodeKey] : null;
+    }, B = (e, r) => {
+      if (!t.nodeKey)
+        throw new Error("[Tree] nodeKey is required in setCheckedNodes");
+      n.value.setCheckedNodes(e, r);
+    }, T = (e, r) => {
+      if (!t.nodeKey)
+        throw new Error("[Tree] nodeKey is required in setCheckedKeys");
+      n.value.setCheckedKeys(e, r);
+    }, b = (e, r, d) => {
+      n.value.setChecked(e, r, d);
+    }, S = () => n.value.getHalfCheckedNodes(), A = () => n.value.getHalfCheckedKeys(), D = (e, r = !0) => {
+      if (!t.nodeKey)
+        throw new Error("[Tree] nodeKey is required in setCurrentNode");
+      K(
+        n,
+        o.emit,
+        () => n.value.setUserCurrentNode(e, r)
+      );
+    }, q = (e, r = !0) => {
+      if (!t.nodeKey)
+        throw new Error("[Tree] nodeKey is required in setCurrentKey");
+      K(
+        n,
+        o.emit,
+        () => n.value.setCurrentNodeKey(e, r)
+      );
+    }, F = (e) => n.value.getNode(e), H = (e) => {
+      n.value.remove(e);
+    }, M = (e, r) => {
+      n.value.append(e, r);
+    }, P = (e, r) => {
+      n.value.insertBefore(e, r);
+    }, z = (e, r) => {
+      n.value.insertAfter(e, r);
+    }, O = (e, r, d) => {
+      m(r), o.emit("node-expand", e, r, d);
+    }, I = (e, r) => {
+      if (!t.nodeKey)
+        throw new Error("[Tree] nodeKey is required in updateKeyChild");
+      n.value.updateChildren(e, r);
+    };
+    return f("RootTree", {
+      ctx: o,
+      props: t,
+      store: n,
+      root: c,
+      currentNode: s,
+      instance: _()
+    }), f(W, void 0), {
+      ns: C,
+      // ref
+      store: n,
+      root: c,
+      currentNode: s,
+      dragState: N,
+      el$: i,
+      dropIndicator$: y,
+      // computed
+      isEmpty: g,
+      // methods
+      filter: k,
+      getNodeKey: v,
+      getNodePath: E,
+      getCheckedNodes: w,
+      getCheckedKeys: p,
+      getCurrentNode: h,
+      getCurrentKey: x,
+      setCheckedNodes: B,
+      setCheckedKeys: T,
+      setChecked: b,
+      getHalfCheckedNodes: S,
+      getHalfCheckedKeys: A,
+      setCurrentNode: D,
+      setCurrentKey: q,
+      getNode: F,
+      remove: H,
+      append: M,
+      insertBefore: P,
+      insertAfter: z,
+      handleNodeExpand: O,
+      updateKeyChildren: I
+    };
+  }
+});
+export {
+  he as default
+};

package/es/components/tree-select/cache-options.js

@@ -0,0 +1,32 @@
+import { defineComponent as r, inject as s, watch as n } from "vue";
+import "../select/index.js";
+import { selectKey as i } from "../select/token.js";
+const u = r({
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(a) {
+    const e = s(i);
+    return n(
+      () => a.data,
+      () => {
+        var o;
+        a.data.forEach((t) => {
+          e.cachedOptions.has(t.value) || e.cachedOptions.set(t.value, t);
+        });
+        const c = ((o = e.selectWrapper) == null ? void 0 : o.querySelectorAll("input")) || [];
+        Array.from(c).includes(
+          document.activeElement
+        ) || e.setSelected();
+      },
+      { flush: "post", immediate: !0 }
+    ), () => {
+    };
+  }
+});
+export {
+  u as default
+};

package/es/components/tree-select/index.js

@@ -0,0 +1,9 @@
+import e from "./tree-select.vue2.js";
+e.install = (t) => {
+  t.component(e.name, e);
+};
+const n = e, c = n;
+export {
+  c as VftTreeSelect,
+  n as default
+};

package/es/components/tree-select/select.js

@@ -0,0 +1,38 @@
+import { toRefs as m, computed as s, nextTick as c } from "vue";
+import { pick as n } from "lodash";
+import { VftSelect as u } from "../select/index.js";
+import { useNamespace as h } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+const x = (o, { attrs: i }, {
+  tree: l,
+  key: p
+}) => {
+  const f = h("tree-select"), r = {
+    ...n(m(o), Object.keys(u.props)),
+    ...i,
+    valueKey: p,
+    popperClass: s(() => {
+      const e = [f.e("popper")];
+      return o.popperClass && e.push(o.popperClass), e.join(" ");
+    }),
+    filterMethod: (e = "") => {
+      o.filterMethod && o.filterMethod(e), c(() => {
+        var t;
+        (t = l.value) == null || t.filter(e);
+      });
+    },
+    // clear filter text when visible change
+    onVisibleChange: (e) => {
+      var t;
+      (t = i.onVisibleChange) == null || t.call(i, e), o.filterable && e && r.filterMethod();
+    }
+  };
+  return r;
+};
+export {
+  x as useSelect
+};

package/es/components/tree-select/style/css.js

@@ -0,0 +1,11 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-input.css";
+import "vft/theme-style/vft-tag.css";
+import "vft/theme-style/el-option.css";
+import "vft/theme-style/el-option-group.css";
+import "vft/theme-style/vft-scrollbar.css";
+import "vft/theme-style/vft-popper.css";
+import "vft/theme-style/el-select.css";
+import "vft/theme-style/vft-checkbox.css";
+import "vft/theme-style/vft-tree.css";
+import "vft/theme-style/el-tree-select.css";

package/es/components/tree-select/style/index.js

@@ -0,0 +1,11 @@
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/input.scss";
+import "vft/theme-style/src/tag.scss";
+import "vft/theme-style/src/option.scss";
+import "vft/theme-style/src/option-group.scss";
+import "vft/theme-style/src/scrollbar.scss";
+import "vft/theme-style/src/popper.scss";
+import "vft/theme-style/src/select.scss";
+import "vft/theme-style/src/checkbox.scss";
+import "vft/theme-style/src/tree.scss";
+import "vft/theme-style/src/tree-select.scss";

package/es/components/tree-select/tree-select-option.js

@@ -0,0 +1,21 @@
+import { defineComponent as s, getCurrentInstance as i, nextTick as p } from "vue";
+import { VftOption as n } from "../select/index.js";
+const m = s({
+  extends: n,
+  setup(o, c) {
+    const e = n.setup(o, c);
+    delete e.selectOptionClick;
+    const t = i().proxy;
+    return p(() => {
+      e.select.cachedOptions.get(t.value) || e.select.onOptionCreate(t);
+    }), e;
+  },
+  methods: {
+    selectOptionClick() {
+      this.$el.parentElement.click();
+    }
+  }
+});
+export {
+  m as default
+};

package/es/components/tree-select/tree-select.vue.js

@@ -0,0 +1,4 @@
+import f from "./tree-select.vue2.js";
+export {
+  f as default
+};

package/es/components/tree-select/tree-select.vue2.js

@@ -0,0 +1,81 @@
+import { defineComponent as k, ref as f, computed as v, reactive as c, onMounted as g, h as a } from "vue";
+import { pick as u } from "lodash";
+import { VftSelect as l } from "../select/index.js";
+import p from "../tree/index.js";
+import { useSelect as K } from "./select.js";
+import { useTree as N } from "./tree.js";
+import A from "./cache-options.js";
+const V = k({
+  name: "VftTreeSelect",
+  // disable `ElSelect` inherit current attrs
+  inheritAttrs: !1,
+  props: {
+    ...l.props,
+    ...p.props,
+    cacheData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(e, o) {
+    const { slots: i, expose: m } = o, t = f(), r = f(), n = v(() => e.nodeKey || e.valueKey || "value"), h = K(e, o, { select: t, tree: r, key: n }), { cacheOptions: C, ...y } = N(e, o, {
+      select: t,
+      tree: r,
+      key: n
+    }), d = c({});
+    return m(d), g(() => {
+      Object.assign(d, {
+        ...u(r.value, [
+          "filter",
+          "updateKeyChildren",
+          "getCheckedNodes",
+          "setCheckedNodes",
+          "getCheckedKeys",
+          "setCheckedKeys",
+          "setChecked",
+          "getHalfCheckedNodes",
+          "getHalfCheckedKeys",
+          "getCurrentKey",
+          "getCurrentNode",
+          "setCurrentKey",
+          "setCurrentNode",
+          "getNode",
+          "remove",
+          "append",
+          "insertBefore",
+          "insertAfter"
+        ]),
+        ...u(t.value, ["focus", "blur"])
+      });
+    }), () => a(
+      l,
+      /**
+       * 1. The `props` is processed into `Refs`, but `v-bind` and
+       * render function props cannot read `Refs`, so use `reactive`
+       * unwrap the `Refs` and keep reactive.
+       * 2. The keyword `ref` requires `Ref`, but `reactive` broke it,
+       * so use function.
+       */
+      c({
+        ...h,
+        ref: (s) => t.value = s
+      }),
+      {
+        ...i,
+        default: () => [
+          a(A, { data: C.value }),
+          a(
+            p,
+            c({
+              ...y,
+              ref: (s) => r.value = s
+            })
+          )
+        ]
+      }
+    );
+  }
+});
+export {
+  V as default
+};

package/es/components/tree-select/tree.js

@@ -0,0 +1,137 @@
+import { watch as K, nextTick as O, computed as r, toRefs as L } from "vue";
+import { isEqual as g, pick as M } from "lodash";
+import { UPDATE_MODEL_EVENT as m } from "../../constants/event.js";
+import { isFunction as T } from "@vft/utils";
+import w from "../tree/index.js";
+import A from "./tree-select-option.js";
+import { toValidArray as v, treeFind as y, isValidValue as V, treeEach as D, isValidArray as S } from "./utils.js";
+const B = (e, { attrs: a, slots: C, emit: f }, {
+  select: b,
+  tree: h,
+  key: s
+}) => {
+  K(
+    () => e.modelValue,
+    () => {
+      e.showCheckbox && O(() => {
+        const l = h.value;
+        l && !g(
+          l.getCheckedKeys(),
+          v(e.modelValue)
+        ) && l.setCheckedKeys(v(e.modelValue));
+      });
+    },
+    {
+      immediate: !0,
+      deep: !0
+    }
+  );
+  const E = r(() => ({
+    value: s.value,
+    label: "label",
+    children: "children",
+    disabled: "disabled",
+    isLeaf: "isLeaf",
+    ...e.props
+  })), n = (l, i) => {
+    var c;
+    const d = E.value[l];
+    return T(d) ? d(
+      i,
+      (c = h.value) == null ? void 0 : c.getNode(n("value", i))
+    ) : i[d];
+  }, x = v(e.modelValue).map((l) => y(
+    e.data || [],
+    (i) => n("value", i) === l,
+    (i) => n("children", i),
+    (i, d, c, t) => t && n("value", t)
+  )).filter((l) => V(l)), N = r(() => {
+    if (!e.renderAfterExpand && !e.lazy)
+      return [];
+    const l = [];
+    return D(
+      e.data.concat(e.cacheData),
+      (i) => {
+        const d = n("value", i);
+        l.push({
+          value: d,
+          currentLabel: n("label", i),
+          isDisabled: n("disabled", i)
+        });
+      },
+      (i) => n("children", i)
+    ), l;
+  });
+  return {
+    ...M(L(e), Object.keys(w.props)),
+    ...a,
+    nodeKey: s,
+    // only expand on click node when the `check-strictly` is false
+    expandOnClickNode: r(() => !e.checkStrictly && e.expandOnClickNode),
+    // show current selected node only first time,
+    // fix the problem of expanding multiple nodes when checking multiple nodes
+    defaultExpandedKeys: r(() => e.defaultExpandedKeys ? e.defaultExpandedKeys.concat(x) : x),
+    renderContent: (l, { node: i, data: d, store: c }) => l(
+      A,
+      {
+        value: n("value", d),
+        label: n("label", d),
+        disabled: n("disabled", d)
+      },
+      e.renderContent ? () => e.renderContent(l, { node: i, data: d, store: c }) : C.default ? () => C.default({ node: i, data: d, store: c }) : void 0
+    ),
+    filterNodeMethod: (l, i, d) => {
+      var c;
+      return e.filterNodeMethod ? e.filterNodeMethod(l, i, d) : l ? (c = n("label", i)) == null ? void 0 : c.includes(l) : !0;
+    },
+    onNodeClick: (l, i, d) => {
+      var c, t, o;
+      if ((c = a.onNodeClick) == null || c.call(a, l, i, d), !(e.showCheckbox && e.checkOnClickNode))
+        if (!e.showCheckbox && (e.checkStrictly || i.isLeaf)) {
+          if (!n("disabled", l)) {
+            const k = (t = b.value) == null ? void 0 : t.options.get(
+              n("value", l)
+            );
+            (o = b.value) == null || o.handleOptionSelect(k, !0);
+          }
+        } else
+          e.expandOnClickNode && d.proxy.handleExpandIconClick();
+    },
+    onCheck: (l, i) => {
+      var c;
+      (c = a.onCheck) == null || c.call(a, l, i);
+      const d = n("value", l);
+      if (e.checkStrictly)
+        f(
+          m,
+          // Checking for changes may come from `check-on-node-click`
+          e.multiple ? i.checkedKeys : i.checkedKeys.includes(d) ? d : void 0
+        );
+      else if (e.multiple)
+        f(
+          m,
+          h.value.getCheckedKeys(!0)
+        );
+      else {
+        const t = y(
+          [l],
+          (u) => !S(n("children", u)) && !n("disabled", u),
+          (u) => n("children", u)
+        ), o = t ? n("value", t) : void 0, k = V(e.modelValue) && !!y(
+          [l],
+          (u) => n("value", u) === e.modelValue,
+          (u) => n("children", u)
+        );
+        f(
+          m,
+          o === e.modelValue || k ? void 0 : o
+        );
+      }
+    },
+    // else
+    cacheOptions: N
+  };
+};
+export {
+  B as useTree
+};