vlite3 1.4.35 → 1.4.39

package/components/FileTree/FileTree.vue2.js

@@ -1,10 +1,11 @@
-import { defineComponent as Q, ref as L, shallowRef as E, watch as T, computed as v, openBlock as p, createElementBlock as k, normalizeClass as $, Fragment as q, renderList as V, isMemoSame as z, createBlock as F, createSlots as P, withCtx as A, renderSlot as R, mergeProps as U, toDisplayString as j } from "vue";
-import G from "./FileTreeNode.vue.js";
-import { $t as x } from "../../utils/i18n.js";
-const H = {
+import { defineComponent as q, shallowRef as x, watch as F, computed as g, openBlock as m, createElementBlock as v, normalizeClass as z, Fragment as I, renderList as R, withMemo as N, normalizeStyle as G, createBlock as O, createSlots as U, withCtx as Y, renderSlot as j, mergeProps as H, toDisplayString as J } from "vue";
+import W from "./FileTreeNode.vue.js";
+import { appendAncestorLastFlag as D, EMPTY_ANCESTOR_LAST_FLAGS as X } from "../TreeConnectors/geometry.js";
+import { $t as k } from "../../utils/i18n.js";
+const Z = {
   key: 1,
   class: "text-sm text-muted-foreground p-4 text-center"
-}, Y = /* @__PURE__ */ Q({
+}, ne = /* @__PURE__ */ q({
   __name: "FileTree",
   props: {
     modelValue: { default: () => [] },
@@ -22,157 +23,199 @@ const H = {
     maxLabelLength: { default: 35 }
   },
   emits: ["update:modelValue", "select", "expand", "node-click"],
-  setup(o, { emit: C }) {
-    const s = o, m = C, u = L(new Set(s.defaultExpandedKeys)), f = L(/* @__PURE__ */ new Set()), g = E(/* @__PURE__ */ new Map()), b = E(/* @__PURE__ */ new Map()), I = (t, l) => {
-      const e = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), a = (n, c) => {
-        for (const r of n)
-          e.set(r.id, r), c && i.set(r.id, c), r.children && a(r.children, r.id);
+  setup(o, { emit: K }) {
+    const s = o, p = K, h = x(new Set(s.defaultExpandedKeys)), f = x(/* @__PURE__ */ new Set()), y = x(/* @__PURE__ */ new Map()), b = x(/* @__PURE__ */ new Map()), P = (t) => !!(t.isFolder || t.children && t.children.length > 0), E = (t) => {
+      const l = /* @__PURE__ */ new Map(), e = /* @__PURE__ */ new Map(), a = (n, d) => {
+        for (const i of n)
+          l.set(i.id, i), d && e.set(i.id, d), i.children && a(i.children, i.id);
       };
-      a(t, l), g.value = e, b.value = i;
+      a(t), y.value = l, b.value = e;
     };
-    T(
+    F(
       () => s.data,
       (t) => {
-        I(t);
+        E(t);
       },
-      { immediate: !0, deep: !0 }
+      { immediate: !0 }
     );
-    const w = (t) => {
-      let l = [];
-      if (t.children)
-        for (const e of t.children)
-          l.push(e.id), l = l.concat(w(e));
+    const M = (t) => {
+      const l = [], e = t.children ? [...t.children] : [];
+      for (; e.length; ) {
+        const a = e.pop();
+        if (l.push(a.id), a.children?.length)
+          for (let n = 0; n < a.children.length; n++)
+            e.push(a.children[n]);
+      }
       return l;
-    }, y = v(() => new Set(s.modelValue)), S = v(() => {
+    }, w = g(() => new Set(s.modelValue)), T = g(() => {
       const t = /* @__PURE__ */ new Set();
       if (s.selectionMode !== "multiple") return t;
       const l = (e) => {
         if (!e.children || e.children.length === 0)
-          return y.value.has(e.id) ? { status: "checked" } : { status: "unchecked" };
-        let i = !1, a = !1, n = !1;
-        for (const c of e.children) {
-          const r = l(c);
-          r.status === "checked" && (i = !0), r.status === "unchecked" && (a = !0), r.status === "indeterminate" && (n = !0);
+          return w.value.has(e.id) ? "checked" : "unchecked";
+        let a = !1, n = !1, d = !1;
+        for (const i of e.children) {
+          const r = l(i);
+          r === "checked" ? a = !0 : r === "unchecked" ? n = !0 : d = !0;
         }
-        return n || i && a ? (t.add(e.id), { status: "indeterminate" }) : i ? { status: "checked" } : { status: "unchecked" };
+        return d || a && n ? (t.add(e.id), "indeterminate") : a ? "checked" : "unchecked";
       };
       return s.data.forEach(l), t;
-    }), D = async (t) => {
+    }), A = async (t) => {
       if (t.disabled) return;
-      if (u.value.has(t.id)) {
-        const e = new Set(u.value);
-        e.delete(t.id);
-        const i = g.value.get(t.id) || t;
-        w(i).forEach((n) => e.delete(n)), u.value = e, m("expand", t, !1);
-      } else {
-        const e = new Set(u.value);
-        if (e.add(t.id), u.value = e, m("expand", t, !0), s.loadData && !t.isLoaded && (!t.children || t.children.length === 0)) {
-          const i = new Set(f.value);
-          i.add(t.id), f.value = i;
-          try {
-            await s.loadData(t);
-          } finally {
-            const a = new Set(f.value);
-            a.delete(t.id), f.value = a;
-          }
+      if (h.value.has(t.id)) {
+        const a = new Set(h.value);
+        a.delete(t.id);
+        const n = y.value.get(t.id) || t;
+        M(n).forEach((d) => a.delete(d)), h.value = a, p("expand", t, !1);
+        return;
+      }
+      const e = new Set(h.value);
+      if (e.add(t.id), h.value = e, p("expand", t, !0), s.loadData && !t.isLoaded && (!t.children || t.children.length === 0)) {
+        const a = new Set(f.value);
+        a.add(t.id), f.value = a;
+        try {
+          await s.loadData(t), E(s.data);
+        } finally {
+          const n = new Set(f.value);
+          n.delete(t.id), f.value = n;
         }
       }
-    }, K = (t) => {
+    }, B = (t) => {
       if (t.disabled) return;
-      const l = g.value.get(t.id) || t;
-      let e = new Set(y.value);
-      const i = e.has(t.id);
+      const l = y.value.get(t.id) || t, e = new Set(w.value), a = e.has(t.id);
       if (s.selectionMode === "single")
-        e.clear(), i || e.add(t.id);
+        e.clear(), a || e.add(t.id);
       else if (s.selectionMode === "multiple") {
-        const a = w(l), n = !i, c = (d, h) => {
-          h ? e.add(d) : e.delete(d);
+        const n = M(l), d = !a, i = (c, u) => {
+          u ? e.add(c) : e.delete(c);
         };
-        c(t.id, n), a.forEach((d) => c(d, n));
+        i(t.id, d), n.forEach((c) => i(c, d));
         let r = l;
         for (; ; ) {
-          const d = b.value.get(r.id);
-          if (!d) break;
-          const h = g.value.get(d);
-          if (!h || !h.children) break;
-          h.children.every((N) => e.has(N.id)) ? e.add(h.id) : e.delete(h.id), r = h;
+          const c = b.value.get(r.id);
+          if (!c) break;
+          const u = y.value.get(c);
+          if (!u?.children) break;
+          u.children.every((L) => e.has(L.id)) ? e.add(u.id) : e.delete(u.id), r = u;
         }
       }
-      m("update:modelValue", Array.from(e)), m("select", l, !i);
-    }, M = v(() => {
+      p("update:modelValue", Array.from(e)), p("select", l, !a);
+    }, Q = g(() => {
       if (!s.searchQuery) return s.data;
       const t = s.searchQuery.toLowerCase(), l = (e) => {
-        const a = (e.labelI18n ? x(e.labelI18n) : e.label).toLowerCase().includes(t), n = !!e.searchMatch;
-        let c = [];
-        return e.children && (c = e.children.map(l).filter((r) => r !== null)), a || n || c.length > 0 ? {
-          ...e,
-          children: c
-        } : null;
+        const n = (e.labelI18n ? k(e.labelI18n) : e.label).toLowerCase().includes(t), d = !!e.searchMatch;
+        let i = [];
+        return e.children && (i = e.children.map(l).filter((r) => r !== null)), n || d || i.length > 0 ? { ...e, children: i } : null;
       };
       return s.data.map(l).filter((e) => e !== null);
+    }), C = g(() => {
+      const t = [], l = (e, a, n) => {
+        const d = e.length - 1;
+        for (let i = 0; i < e.length; i++) {
+          const r = e[i], c = i === d, u = P(r), L = h.value.has(r.id), $ = f.value.has(r.id);
+          if (t.push({
+            node: r,
+            depth: a,
+            isLast: c,
+            ancestorLastFlags: n,
+            isFolder: u
+          }), L && u && !$) {
+            const S = r.children;
+            S && S.length > 0 ? l(S, a + 1, D(n, c)) : t.push({
+              node: r,
+              depth: a + 1,
+              isLast: !0,
+              ancestorLastFlags: D(n, c),
+              isFolder: !1,
+              showEmptyPlaceholder: !0
+            });
+          }
+        }
+      };
+      return l(Q.value, 0, X), t;
     });
-    T(
+    F(
       () => [s.searchQuery, s.data],
       ([t]) => {
-        if (t) {
-          const l = t.toLowerCase(), e = /* @__PURE__ */ new Set(), i = (a) => {
-            let n = !1;
-            if (a.children)
-              for (const d of a.children)
-                i(d) && (n = !0);
-            const r = (a.labelI18n ? x(a.labelI18n) : a.label).toLowerCase().includes(l) || !!a.searchMatch;
-            return n && e.add(a.id), r || n;
-          };
-          if (s.data.forEach(i), e.size > 0) {
-            const a = new Set(u.value);
-            e.forEach((n) => a.add(n)), u.value = a;
-          }
+        if (!t) return;
+        const l = t.toLowerCase(), e = /* @__PURE__ */ new Set(), a = (n) => {
+          let d = !1;
+          if (n.children)
+            for (const c of n.children)
+              a(c) && (d = !0);
+          const r = (n.labelI18n ? k(n.labelI18n) : n.label).toLowerCase().includes(l) || !!n.searchMatch;
+          return d && e.add(n.id), r || d;
+        };
+        if (s.data.forEach(a), e.size > 0) {
+          const n = new Set(h.value);
+          e.forEach((d) => n.add(d)), h.value = n;
         }
-      },
-      { deep: !0 }
+      }
     );
-    const B = v(() => {
-      if (s.emptyTextI18n) return x(s.emptyTextI18n);
+    const V = g(() => {
+      if (s.emptyTextI18n) return k(s.emptyTextI18n);
       if (s.emptyText) return s.emptyText;
-      const t = x("vlite.fileTree.emptyText");
+      const t = k("vlite.fileTree.emptyText");
       return t !== "vlite.fileTree.emptyText" ? t : "No results found.";
     });
-    return (t, l) => (p(), k("div", {
-      class: $(["w-full h-full overflow-y-auto file-tree-container", s.class])
+    return (t, l) => (m(), v("div", {
+      class: z(["w-full h-full overflow-y-auto file-tree-container", s.class])
     }, [
-      M.value.length > 0 ? (p(!0), k(q, { key: 0 }, V(M.value, (e, i, a, n) => {
-        const c = [e, y.value, u.value, S.value, f.value, o.highlightSearch, o.searchQuery, o.showCheckboxes, o.variant, o.maxLabelLength, !!t.$slots.actions];
-        if (n && n.key === e.id && z(n, c)) return n;
-        const r = (p(), F(G, {
-          key: e.id,
-          node: e,
+      C.value.length > 0 ? (m(!0), v(I, { key: 0 }, R(C.value, (e) => (m(), v(I, {
+        key: e.showEmptyPlaceholder ? e.node.id + "-empty" : e.node.id
+      }, [
+        e.showEmptyPlaceholder ? N([e.depth, e.node.id], () => (m(), v("div", {
+          key: 0,
+          class: "py-0.5 text-xs text-muted-foreground italic",
+          style: G({ paddingLeft: e.depth * 20 + 26 + "px" })
+        }, null, 4)), l, 0) : N([
+          e.node,
+          w.value.has(e.node.id),
+          T.value.has(e.node.id),
+          h.value.has(e.node.id),
+          f.value.has(e.node.id),
+          o.highlightSearch,
+          o.searchQuery,
+          o.showCheckboxes,
+          o.variant,
+          o.maxLabelLength,
+          e.depth,
+          e.isLast,
+          e.ancestorLastFlags,
+          !!t.$slots.actions
+        ], () => (m(), O(W, {
+          key: 1,
+          node: e.node,
+          depth: e.depth,
+          "is-last": e.isLast,
+          "ancestor-last-flags": e.ancestorLastFlags,
           "selection-mode": o.selectionMode,
-          "selected-keys": y.value,
-          "expanded-keys": u.value,
-          "indeterminate-keys": S.value,
-          "loading-keys": f.value,
+          "is-selected": w.value.has(e.node.id),
+          "is-indeterminate": T.value.has(e.node.id),
+          "is-expanded": h.value.has(e.node.id),
+          "is-loading": f.value.has(e.node.id),
           "show-checkboxes": o.showCheckboxes,
           "highlight-search": o.highlightSearch,
           "search-query": o.searchQuery,
           variant: o.variant,
           "max-label-length": o.maxLabelLength,
-          onToggleExpand: D,
-          onToggleSelect: K,
-          onClickNode: l[0] || (l[0] = (d) => m("node-click", d))
-        }, P({ _: 2 }, [
+          onToggleExpand: A,
+          onToggleSelect: B,
+          onClickNode: l[1] || (l[1] = (a) => p("node-click", a))
+        }, U({ _: 2 }, [
           t.$slots.actions ? {
             name: "actions",
-            fn: A((d) => [
-              R(t.$slots, "actions", U({ ref_for: !0 }, d), void 0, !0)
+            fn: Y((a) => [
+              j(t.$slots, "actions", H({ ref_for: !0 }, a), void 0, !0)
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["node", "selection-mode", "selected-keys", "expanded-keys", "indeterminate-keys", "loading-keys", "show-checkboxes", "highlight-search", "search-query", "variant", "max-label-length"]));
-        return r.memo = c, r;
-      }, l, 1), 128)) : (p(), k("div", H, j(B.value), 1))
+        ]), 1032, ["node", "depth", "is-last", "ancestor-last-flags", "selection-mode", "is-selected", "is-indeterminate", "is-expanded", "is-loading", "show-checkboxes", "highlight-search", "search-query", "variant", "max-label-length"])), l, 2)
+      ], 64))), 128)) : (m(), v("div", Z, J(V.value), 1))
     ], 2));
   }
 });
 export {
-  Y as default
+  ne as default
 };

package/components/FileTree/FileTreeNode.vue.d.ts

@@ -3,15 +3,20 @@ interface Props {
     node: FileNode;
     depth?: number;
     selectionMode?: FileTreeSelectionMode;
-    selectedKeys: Set<string>;
-    indeterminateKeys: Set<string>;
-    expandedKeys: Set<string>;
-    loadingKeys: Set<string>;
+    /** Precomputed row state — avoids each node re-deriving from whole Sets. */
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    isExpanded?: boolean;
+    isLoading?: boolean;
     showCheckboxes?: boolean;
     highlightSearch?: boolean;
     searchQuery?: string;
     variant?: FileTreeVariant;
     maxLabelLength?: number;
+    /** Whether this node is the last child of its parent. */
+    isLast?: boolean;
+    /** `isLast` of every ancestor, ordered root → immediate parent. */
+    ancestorLastFlags?: boolean[];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -19,7 +24,6 @@ declare function __VLS_template(): {
         actions?(_: {
             node: FileNode;
         }): any;
-        actions?(_: any): any;
     };
     refs: {};
     rootEl: HTMLDivElement;
@@ -35,8 +39,14 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     "onClick-node"?: (node: FileNode) => any;
 }>, {
     variant: FileTreeVariant;
+    isLoading: boolean;
+    isSelected: boolean;
+    isLast: boolean;
     depth: number;
+    ancestorLastFlags: boolean[];
     selectionMode: FileTreeSelectionMode;
+    isIndeterminate: boolean;
+    isExpanded: boolean;
     showCheckboxes: boolean;
     highlightSearch: boolean;
     maxLabelLength: number;