vft 0.0.379 → 0.0.383

package/es/components/tree/model/useDragNode.js

@@ -1,170 +1,77 @@
-import { removeClass, addClass } from "@vft/utils";
+import { removeClass as v, addClass as I } from "@vft/utils";
 import "@vueuse/core";
 import "../../config-provider/hooks/use-global-config.js";
-import { ref, provide } from "vue";
+import { ref as S, provide as E } from "vue";
 import "lodash-es";
-import { useNamespace } from "../../../hooks/use-namespace/index.js";
+import { useNamespace as P } from "../../../hooks/use-namespace/index.js";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../../hooks/use-z-index/index.js";
-const dragEventsKey = Symbol("dragEvents");
-function useDragNodeHandler({ props, ctx, el$, dropIndicator$, store }) {
-  const ns = useNamespace("tree");
-  const dragState = ref({
-    showDropIndicator: false,
+const B = Symbol("dragEvents");
+function G({ props: p, ctx: s, el$: h, dropIndicator$: b, store: T }) {
+  const g = P("tree"), d = S({
+    showDropIndicator: !1,
     draggingNode: null,
     dropNode: null,
-    allowDrop: true,
+    allowDrop: !0,
     dropType: null
   });
-  const treeNodeDragStart = ({ event, treeNode }) => {
-    if (typeof props.allowDrag === "function" && !props.allowDrag(treeNode.node)) {
-      event.preventDefault();
-      return false;
-    }
-    event.dataTransfer.effectAllowed = "move";
-    try {
-      event.dataTransfer.setData("text/plain", "");
-    } catch {
-    }
-    dragState.value.draggingNode = treeNode;
-    ctx.emit("node-drag-start", treeNode.node, event);
-  };
-  const treeNodeDragOver = ({ event, treeNode }) => {
-    const dropNode = treeNode;
-    const oldDropNode = dragState.value.dropNode;
-    if (oldDropNode && oldDropNode.node.id !== dropNode.node.id) {
-      removeClass(oldDropNode.$el, ns.is("drop-inner"));
-    }
-    const draggingNode = dragState.value.draggingNode;
-    if (!draggingNode || !dropNode) return;
-    let dropPrev = true;
-    let dropInner = true;
-    let dropNext = true;
-    let userAllowDropInner = true;
-    if (typeof props.allowDrop === "function") {
-      dropPrev = props.allowDrop(draggingNode.node, dropNode.node, "prev");
-      userAllowDropInner = dropInner = props.allowDrop(
-        draggingNode.node,
-        dropNode.node,
-        "inner"
-      );
-      dropNext = props.allowDrop(draggingNode.node, dropNode.node, "next");
-    }
-    event.dataTransfer.dropEffect = dropInner || dropPrev || dropNext ? "move" : "none";
-    if ((dropPrev || dropInner || dropNext) && oldDropNode?.node.id !== dropNode.node.id) {
-      if (oldDropNode) {
-        ctx.emit("node-drag-leave", draggingNode.node, oldDropNode.node, event);
+  return E(B, {
+    treeNodeDragStart: ({ event: r, treeNode: t }) => {
+      if (typeof p.allowDrag == "function" && !p.allowDrag(t.node))
+        return r.preventDefault(), !1;
+      r.dataTransfer.effectAllowed = "move";
+      try {
+        r.dataTransfer.setData("text/plain", "");
+      } catch {
       }
-      ctx.emit("node-drag-enter", draggingNode.node, dropNode.node, event);
-    }
-    if (dropPrev || dropInner || dropNext) {
-      dragState.value.dropNode = dropNode;
-    }
-    if (dropNode.node.nextSibling === draggingNode.node) {
-      dropNext = false;
-    }
-    if (dropNode.node.previousSibling === draggingNode.node) {
-      dropPrev = false;
-    }
-    if (dropNode.node.contains(draggingNode.node, false)) {
-      dropInner = false;
-    }
-    if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {
-      dropPrev = false;
-      dropInner = false;
-      dropNext = false;
-    }
-    const targetPosition = dropNode.$el.getBoundingClientRect();
-    const treePosition = el$.value.getBoundingClientRect();
-    let dropType;
-    const prevPercent = dropPrev ? dropInner ? 0.25 : dropNext ? 0.45 : 1 : -1;
-    const nextPercent = dropNext ? dropInner ? 0.75 : dropPrev ? 0.55 : 0 : 1;
-    let indicatorTop = -9999;
-    const distance = event.clientY - targetPosition.top;
-    if (distance < targetPosition.height * prevPercent) {
-      dropType = "before";
-    } else if (distance > targetPosition.height * nextPercent) {
-      dropType = "after";
-    } else if (dropInner) {
-      dropType = "inner";
-    } else {
-      dropType = "none";
-    }
-    const iconPosition = dropNode.$el.querySelector(`.${ns.be("node", "expand-icon")}`).getBoundingClientRect();
-    const dropIndicator = dropIndicator$.value;
-    if (dropType === "before") {
-      indicatorTop = iconPosition.top - treePosition.top;
-    } else if (dropType === "after") {
-      indicatorTop = iconPosition.bottom - treePosition.top;
-    }
-    dropIndicator.style.top = `${indicatorTop}px`;
-    dropIndicator.style.left = `${iconPosition.right - treePosition.left}px`;
-    if (dropType === "inner") {
-      addClass(dropNode.$el, ns.is("drop-inner"));
-    } else {
-      removeClass(dropNode.$el, ns.is("drop-inner"));
-    }
-    dragState.value.showDropIndicator = dropType === "before" || dropType === "after";
-    dragState.value.allowDrop = dragState.value.showDropIndicator || userAllowDropInner;
-    dragState.value.dropType = dropType;
-    ctx.emit("node-drag-over", draggingNode.node, dropNode.node, event);
-  };
-  const treeNodeDragEnd = (event) => {
-    const { draggingNode, dropType, dropNode } = dragState.value;
-    event.preventDefault();
-    event.dataTransfer.dropEffect = "move";
-    if (draggingNode && dropNode) {
-      const draggingNodeCopy = { data: draggingNode.node.data };
-      if (dropType !== "none") {
-        draggingNode.node.remove();
-      }
-      if (dropType === "before") {
-        dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node);
-      } else if (dropType === "after") {
-        dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node);
-      } else if (dropType === "inner") {
-        dropNode.node.insertChild(draggingNodeCopy);
-      }
-      if (dropType !== "none") {
-        store.value.registerNode(draggingNodeCopy);
-      }
-      removeClass(dropNode.$el, ns.is("drop-inner"));
-      ctx.emit(
-        "node-drag-end",
-        draggingNode.node,
-        dropNode.node,
-        dropType,
-        event
-      );
-      if (dropType !== "none") {
-        ctx.emit(
+      d.value.draggingNode = t, s.emit("node-drag-start", t.node, r);
+    },
+    treeNodeDragOver: ({ event: r, treeNode: t }) => {
+      const e = t, o = d.value.dropNode;
+      o && o.node.id !== e.node.id && v(o.$el, g.is("drop-inner"));
+      const n = d.value.draggingNode;
+      if (!n || !e) return;
+      let l = !0, i = !0, f = !0, N = !0;
+      typeof p.allowDrop == "function" && (l = p.allowDrop(n.node, e.node, "prev"), N = i = p.allowDrop(
+        n.node,
+        e.node,
+        "inner"
+      ), f = p.allowDrop(n.node, e.node, "next")), r.dataTransfer.dropEffect = i || l || f ? "move" : "none", (l || i || f) && o?.node.id !== e.node.id && (o && s.emit("node-drag-leave", n.node, o.node, r), s.emit("node-drag-enter", n.node, e.node, r)), (l || i || f) && (d.value.dropNode = e), e.node.nextSibling === n.node && (f = !1), e.node.previousSibling === n.node && (l = !1), e.node.contains(n.node, !1) && (i = !1), (n.node === e.node || n.node.contains(e.node)) && (l = !1, i = !1, f = !1);
+      const u = e.$el.getBoundingClientRect(), c = h.value.getBoundingClientRect();
+      let a;
+      const $ = l ? i ? 0.25 : f ? 0.45 : 1 : -1, C = f ? i ? 0.75 : l ? 0.55 : 0 : 1;
+      let m = -9999;
+      const w = r.clientY - u.top;
+      w < u.height * $ ? a = "before" : w > u.height * C ? a = "after" : i ? a = "inner" : a = "none";
+      const D = e.$el.querySelector(`.${g.be("node", "expand-icon")}`).getBoundingClientRect(), y = b.value;
+      a === "before" ? m = D.top - c.top : a === "after" && (m = D.bottom - c.top), y.style.top = `${m}px`, y.style.left = `${D.right - c.left}px`, a === "inner" ? I(e.$el, g.is("drop-inner")) : v(e.$el, g.is("drop-inner")), d.value.showDropIndicator = a === "before" || a === "after", d.value.allowDrop = d.value.showDropIndicator || N, d.value.dropType = a, s.emit("node-drag-over", n.node, e.node, r);
+    },
+    treeNodeDragEnd: (r) => {
+      const { draggingNode: t, dropType: e, dropNode: o } = d.value;
+      if (r.preventDefault(), r.dataTransfer.dropEffect = "move", t && o) {
+        const n = { data: t.node.data };
+        e !== "none" && t.node.remove(), e === "before" ? o.node.parent.insertBefore(n, o.node) : e === "after" ? o.node.parent.insertAfter(n, o.node) : e === "inner" && o.node.insertChild(n), e !== "none" && T.value.registerNode(n), v(o.$el, g.is("drop-inner")), s.emit(
+          "node-drag-end",
+          t.node,
+          o.node,
+          e,
+          r
+        ), e !== "none" && s.emit(
           "node-drop",
-          draggingNode.node,
-          dropNode.node,
-          dropType,
-          event
+          t.node,
+          o.node,
+          e,
+          r
         );
       }
+      t && !o && s.emit("node-drag-end", t.node, null, e, r), d.value.showDropIndicator = !1, d.value.draggingNode = null, d.value.dropNode = null, d.value.allowDrop = !0;
     }
-    if (draggingNode && !dropNode) {
-      ctx.emit("node-drag-end", draggingNode.node, null, dropType, event);
-    }
-    dragState.value.showDropIndicator = false;
-    dragState.value.draggingNode = null;
-    dragState.value.dropNode = null;
-    dragState.value.allowDrop = true;
-  };
-  provide(dragEventsKey, {
-    treeNodeDragStart,
-    treeNodeDragOver,
-    treeNodeDragEnd
-  });
-  return {
-    dragState
+  }), {
+    dragState: d
   };
 }
 export {
-  dragEventsKey,
-  useDragNodeHandler
+  B as dragEventsKey,
+  G as useDragNodeHandler
 };

package/es/components/tree/model/useKeydown.js

@@ -1,105 +1,80 @@
-import { EVENT_CODE } from "../../../constants/aria.js";
-import { useEventListener } from "@vueuse/core";
+import { EVENT_CODE as l } from "../../../constants/aria.js";
+import { useEventListener as v } from "@vueuse/core";
 import "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
-import { shallowRef, onMounted, onUpdated, watch } from "vue";
+import { shallowRef as m, onMounted as y, onUpdated as h, watch as b } from "vue";
 import "lodash-es";
-import { useNamespace } from "../../../hooks/use-namespace/index.js";
+import { useNamespace as k } from "../../../hooks/use-namespace/index.js";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../../hooks/use-z-index/index.js";
-function useKeydown({ el$ }, store) {
-  const ns = useNamespace("tree");
-  const treeItems = shallowRef([]);
-  const checkboxItems = shallowRef([]);
-  onMounted(() => {
-    initTabIndex();
-  });
-  onUpdated(() => {
-    treeItems.value = Array.from(el$.value.querySelectorAll("[role=treeitem]"));
-    checkboxItems.value = Array.from(
-      el$.value.querySelectorAll("input[type=checkbox]")
+function F({ el$: o }, d) {
+  const u = k("tree"), t = m([]), i = m([]);
+  y(() => {
+    p();
+  }), h(() => {
+    t.value = Array.from(o.value.querySelectorAll("[role=treeitem]")), i.value = Array.from(
+      o.value.querySelectorAll("input[type=checkbox]")
     );
-  });
-  watch(checkboxItems, (val) => {
-    val.forEach((checkbox) => {
-      checkbox.setAttribute("tabindex", "-1");
+  }), b(i, (r) => {
+    r.forEach((a) => {
+      a.setAttribute("tabindex", "-1");
     });
-  });
-  const handleKeydown = (ev) => {
-    const currentItem = ev.target;
-    if (!currentItem.className.includes(ns.b("node"))) return;
-    const code = ev.code;
-    treeItems.value = Array.from(
-      el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`)
+  }), v(o, "keydown", (r) => {
+    const a = r.target;
+    if (!a.className.includes(u.b("node"))) return;
+    const c = r.code;
+    t.value = Array.from(
+      o.value.querySelectorAll(`.${u.is("focusable")}[role=treeitem]`)
     );
-    const currentIndex = treeItems.value.indexOf(currentItem);
-    let nextIndex;
-    if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
-      ev.preventDefault();
-      if (code === EVENT_CODE.up) {
-        nextIndex = currentIndex === -1 ? 0 : currentIndex !== 0 ? currentIndex - 1 : treeItems.value.length - 1;
-        const startIndex = nextIndex;
-        while (true) {
-          if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus)
+    const n = t.value.indexOf(a);
+    let e;
+    if ([l.up, l.down].includes(c)) {
+      if (r.preventDefault(), c === l.up) {
+        e = n === -1 ? 0 : n !== 0 ? n - 1 : t.value.length - 1;
+        const s = e;
+        for (; !d.value.getNode(t.value[e].dataset.key).canFocus; ) {
+          if (e--, e === s) {
+            e = -1;
             break;
-          nextIndex--;
-          if (nextIndex === startIndex) {
-            nextIndex = -1;
-            break;
-          }
-          if (nextIndex < 0) {
-            nextIndex = treeItems.value.length - 1;
           }
+          e < 0 && (e = t.value.length - 1);
         }
       } else {
-        nextIndex = currentIndex === -1 ? 0 : currentIndex < treeItems.value.length - 1 ? currentIndex + 1 : 0;
-        const startIndex = nextIndex;
-        while (true) {
-          if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus)
-            break;
-          nextIndex++;
-          if (nextIndex === startIndex) {
-            nextIndex = -1;
+        e = n === -1 ? 0 : n < t.value.length - 1 ? n + 1 : 0;
+        const s = e;
+        for (; !d.value.getNode(t.value[e].dataset.key).canFocus; ) {
+          if (e++, e === s) {
+            e = -1;
             break;
           }
-          if (nextIndex >= treeItems.value.length) {
-            nextIndex = 0;
-          }
+          e >= t.value.length && (e = 0);
         }
       }
-      nextIndex !== -1 && treeItems.value[nextIndex].focus();
-    }
-    if ([EVENT_CODE.left, EVENT_CODE.right].includes(code)) {
-      ev.preventDefault();
-      currentItem.click();
+      e !== -1 && t.value[e].focus();
     }
-    const hasInput = currentItem.querySelector(
+    [l.left, l.right].includes(c) && (r.preventDefault(), a.click());
+    const f = a.querySelector(
       '[type="checkbox"]'
     );
-    if ([EVENT_CODE.enter, EVENT_CODE.space].includes(code) && hasInput) {
-      ev.preventDefault();
-      hasInput.click();
-    }
-  };
-  useEventListener(el$, "keydown", handleKeydown);
-  const initTabIndex = () => {
-    treeItems.value = Array.from(
-      el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`)
-    );
-    checkboxItems.value = Array.from(
-      el$.value.querySelectorAll("input[type=checkbox]")
+    [l.enter, l.space].includes(c) && f && (r.preventDefault(), f.click());
+  });
+  const p = () => {
+    t.value = Array.from(
+      o.value.querySelectorAll(`.${u.is("focusable")}[role=treeitem]`)
+    ), i.value = Array.from(
+      o.value.querySelectorAll("input[type=checkbox]")
     );
-    const checkedItem = el$.value.querySelectorAll(
-      `.${ns.is("checked")}[role=treeitem]`
+    const r = o.value.querySelectorAll(
+      `.${u.is("checked")}[role=treeitem]`
     );
-    if (checkedItem.length) {
-      checkedItem[0].setAttribute("tabindex", "0");
+    if (r.length) {
+      r[0].setAttribute("tabindex", "0");
       return;
     }
-    treeItems.value[0]?.setAttribute("tabindex", "0");
+    t.value[0]?.setAttribute("tabindex", "0");
   };
 }
 export {
-  useKeydown
+  F as useKeydown
 };

package/es/components/tree/model/useNodeExpandEventBroadcast.js

@@ -1,27 +1,19 @@
-import { inject, provide } from "vue";
-function useNodeExpandEventBroadcast(props) {
-  const parentNodeMap = inject("TreeNodeMap", null);
-  const currentNodeMap = {
-    treeNodeExpand: (node) => {
-      if (props.node !== node) {
-        props.node.collapse();
-      }
+import { inject as t, provide as a } from "vue";
+function i(e) {
+  const n = t("TreeNodeMap", null), d = {
+    treeNodeExpand: (o) => {
+      e.node !== o && e.node.collapse();
     },
     children: []
   };
-  if (parentNodeMap) {
-    parentNodeMap.children.push(currentNodeMap);
-  }
-  provide("TreeNodeMap", currentNodeMap);
-  return {
-    broadcastExpanded: (node) => {
-      if (!props.accordion) return;
-      for (const childNode of currentNodeMap.children) {
-        childNode.treeNodeExpand(node);
-      }
+  return n && n.children.push(d), a("TreeNodeMap", d), {
+    broadcastExpanded: (o) => {
+      if (e.accordion)
+        for (const r of d.children)
+          r.treeNodeExpand(o);
     }
   };
 }
 export {
-  useNodeExpandEventBroadcast
+  i as useNodeExpandEventBroadcast
 };

package/es/components/tree/model/util.js

@@ -1,27 +1,21 @@
-const NODE_KEY = "$treeNodeId";
-const markNodeData = function(node, data) {
-  if (!data || data[NODE_KEY]) return;
-  Object.defineProperty(data, NODE_KEY, {
-    value: node.id,
-    enumerable: false,
-    configurable: false,
-    writable: false
+const t = "$treeNodeId", c = function(r, e) {
+  !e || e[t] || Object.defineProperty(e, t, {
+    value: r.id,
+    enumerable: !1,
+    configurable: !1,
+    writable: !1
   });
-};
-const getNodeKey = function(key, data) {
-  if (!key) return data[NODE_KEY];
-  return data[key];
-};
-const handleCurrentChange = (store, emit, setCurrent) => {
-  const preCurrentNode = store.value.currentNode;
-  setCurrent();
-  const currentNode = store.value.currentNode;
-  if (preCurrentNode === currentNode) return;
-  emit("current-change", currentNode ? currentNode.data : null, currentNode);
+}, l = function(r, e) {
+  return r ? e[r] : e[t];
+}, a = (r, e, u) => {
+  const o = r.value.currentNode;
+  u();
+  const n = r.value.currentNode;
+  o !== n && e("current-change", n ? n.data : null, n);
 };
 export {
-  NODE_KEY,
-  getNodeKey,
-  handleCurrentChange,
-  markNodeData
+  t as NODE_KEY,
+  l as getNodeKey,
+  a as handleCurrentChange,
+  c as markNodeData
 };

package/es/components/tree/tree-node-content.vue.js

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

package/es/components/tree/tree-node-content.vue2.js

@@ -1,32 +1,29 @@
 import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
-import { defineComponent, inject, h } from "vue";
+import { defineComponent as m, inject as r, h as s } from "vue";
 import "lodash-es";
-import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { useNamespace as i } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-const _sfc_main = defineComponent({
+const j = m({
   name: "VftTreeNodeContent",
   props: {
     node: {
       type: Object,
-      required: true
+      required: !0
     },
     renderContent: Function
   },
-  setup(props) {
-    const ns = useNamespace("tree");
-    const nodeInstance = inject("NodeInstance");
-    const tree = inject("RootTree");
+  setup(t) {
+    const a = i("tree"), c = r("NodeInstance"), n = r("RootTree");
     return () => {
-      const node = props.node;
-      const { data, store } = node;
-      return props.renderContent ? props.renderContent(h, { _self: nodeInstance, node, data, store }) : tree.ctx.slots.default ? tree.ctx.slots.default({ node, data }) : h("span", { class: ns.be("node", "label") }, [node.label]);
+      const e = t.node, { data: o, store: d } = e;
+      return t.renderContent ? t.renderContent(s, { _self: c, node: e, data: o, store: d }) : n.ctx.slots.default ? n.ctx.slots.default({ node: e, data: o }) : s("span", { class: a.be("node", "label") }, [e.label]);
     };
   }
 });
 export {
-  _sfc_main as default
+  j as default
 };