vlite3 1.4.35 → 1.4.37

package/components/DataTable/DataTableRow.vue.d.ts

@@ -6,11 +6,21 @@ interface Props {
     keyField: string;
     selectable?: boolean;
     isSelected?: boolean;
+    isIndeterminate?: boolean;
     hoverable?: boolean;
     striped?: boolean;
     compact?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg';
     cellBordered?: boolean;
+    /** Tree mode — when true, first data column shows expand/indent chrome. */
+    treeMode?: boolean;
+    depth?: number;
+    treeIndent?: number;
+    expandable?: boolean;
+    expanded?: boolean;
+    treeLoading?: boolean;
+    isLastSibling?: boolean;
+    ancestorLastFlags?: boolean[];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -26,12 +36,14 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     select: (id: any) => any;
+    toggleExpand: () => any;
     rowClick: (payload: {
         row: any;
         index: number;
     }) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onSelect?: (id: any) => any;
+    onToggleExpand?: () => any;
     onRowClick?: (payload: {
         row: any;
         index: number;
@@ -42,8 +54,17 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     striped: boolean;
     selectable: boolean;
     isSelected: boolean;
+    depth: number;
+    isLastSibling: boolean;
+    ancestorLastFlags: boolean[];
+    isIndeterminate: boolean;
     keyField: string;
     hoverable: boolean;
+    treeMode: boolean;
+    treeIndent: number;
+    expandable: boolean;
+    expanded: boolean;
+    treeLoading: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableRowElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/components/DataTable/DataTableRow.vue.js

@@ -1,8 +1,11 @@
-import { defineComponent as S, computed as B, openBlock as o, createElementBlock as r, normalizeClass as a, withModifiers as z, createElementVNode as u, createVNode as $, createCommentVNode as M, Fragment as W, renderList as N, normalizeStyle as V, renderSlot as h, createBlock as f } from "vue";
-import F from "../CheckBox.vue.js";
-import L from "../Price/Price.vue.js";
-import T from "../DateTime/DateTime.vue.js";
-const E = ["data-state"], H = { class: "flex items-center justify-center" }, I = { class: "max-h-[80px] overflow-y-auto w-full" }, R = ["title", "innerHTML"], q = /* @__PURE__ */ S({
+import { defineComponent as V, computed as f, openBlock as o, createElementBlock as d, normalizeClass as g, withModifiers as A, createElementVNode as b, createVNode as v, createCommentVNode as x, Fragment as p, renderList as D, normalizeStyle as w, unref as y, createBlock as c, renderSlot as I } from "vue";
+import U from "../CheckBox.vue.js";
+import k from "../Icon.vue.js";
+import G from "../Price/Price.vue.js";
+import P from "../DateTime/DateTime.vue.js";
+import R from "../TreeConnectors/TreeConnectors.vue.js";
+import { DEFAULT_TOGGLE_SIZE as O, DEFAULT_TREE_CONTENT_GAP as h, DEFAULT_TREE_LEADING as H } from "../TreeConnectors/geometry.js";
+const j = ["data-state"], Z = { class: "flex items-center justify-center" }, q = ["aria-expanded"], J = ["title", "innerHTML"], ne = /* @__PURE__ */ V({
   __name: "DataTableRow",
   props: {
     row: {},
@@ -11,29 +14,38 @@ const E = ["data-state"], H = { class: "flex items-center justify-center" }, I =
     keyField: { default: "_id" },
     selectable: { type: Boolean, default: !1 },
     isSelected: { type: Boolean, default: !1 },
+    isIndeterminate: { type: Boolean, default: !1 },
     hoverable: { type: Boolean, default: !0 },
     striped: { type: Boolean, default: !1 },
     compact: { type: Boolean, default: !1 },
     size: { default: "md" },
-    cellBordered: { type: Boolean }
+    cellBordered: { type: Boolean },
+    treeMode: { type: Boolean, default: !1 },
+    depth: { default: 0 },
+    treeIndent: { default: 20 },
+    expandable: { type: Boolean, default: !1 },
+    expanded: { type: Boolean, default: !1 },
+    treeLoading: { type: Boolean, default: !1 },
+    isLastSibling: { type: Boolean, default: !1 },
+    ancestorLastFlags: { default: () => [] }
   },
-  emits: ["select", "rowClick"],
-  setup(i, { emit: w }) {
-    const c = i, m = w, n = (e, l) => {
-      if (!(!e || !l))
-        return l.includes(".") ? l.split(".").reduce((t, s) => t?.[s], e) : e[l];
-    }, x = (e, l, t) => e.format ? e.format(l, t) : l == null ? "-" : e.type === "number" ? new Intl.NumberFormat("en-US").format(Number(l)) : String(l), g = (e, l, t) => {
-      const s = [];
-      if (e.width && /(?:^|\s|:)w-/.test(e.width) && s.push(e.width), e.minWidth && /(?:^|\s|:)min-w-/.test(e.minWidth) && s.push(e.minWidth), e.capitalize && s.push("capitalize"), e.addStatusColor) {
-        const d = y(l);
-        d && s.push(d);
+  emits: ["select", "rowClick", "toggleExpand"],
+  setup(e, { emit: C }) {
+    const s = e, u = C, a = (n, l) => {
+      if (!(!n || !l))
+        return l.includes(".") ? l.split(".").reduce((t, i) => t?.[i], n) : n[l];
+    }, S = (n, l, t) => n.format ? n.format(l, t) : l == null ? "-" : n.type === "number" ? new Intl.NumberFormat("en-US").format(Number(l)) : String(l), B = (n, l, t) => {
+      const i = [];
+      if (n.width && /(?:^|\s|:)w-/.test(n.width) && i.push(n.width), n.minWidth && /(?:^|\s|:)min-w-/.test(n.minWidth) && i.push(n.minWidth), n.capitalize && i.push("capitalize"), n.addStatusColor) {
+        const r = L(l);
+        r && i.push(r);
       }
-      if (typeof e.class == "function") {
-        const d = e.class(l, t);
-        d && s.push(d);
-      } else e.class && s.push(e.class);
-      return s.join(" ");
-    }, y = (e) => {
+      if (typeof n.class == "function") {
+        const r = n.class(l, t);
+        r && i.push(r);
+      } else n.class && i.push(n.class);
+      return i.join(" ");
+    }, L = (n) => {
       const l = {
         active: "text-success font-medium",
         inactive: "text-muted-foreground",
@@ -48,86 +60,138 @@ const E = ["data-state"], H = { class: "flex items-center justify-center" }, I =
         high: "text-destructive font-medium",
         medium: "text-warning font-medium",
         low: "text-muted-foreground"
-      }, t = String(e).toLowerCase().replace(/[-_\s]/g, "");
+      }, t = String(n).toLowerCase().replace(/[-_\s]/g, "");
       return l[t] || "";
-    }, p = (e) => ({
+    }, E = (n) => ({
       left: "text-left",
       center: "text-center",
       right: "text-right"
-    })[e.align || "left"], b = B(() => n(c.row, c.keyField)), k = () => {
-      const { size: e, compact: l, cellBordered: t } = c;
-      return e === "xs" || l ? `py-1.5! -text-fs-1.5! ${t ? "px-3!" : "pr-3 max-sm:pr-10!"}` : e === "sm" ? `py-2! -text-fs-1.5! ${t ? "px-3!" : "pr-4 max-sm:pr-10!"}` : e === "lg" ? `py-4! text-base ${t ? "px-4!" : "pr-6 max-sm:pr-12!"}` : `py-3! -text-fs-1.5! ${t ? "px-3.5!" : "pr-5! max-sm:pr-10!"}`;
-    }, v = () => {
-      m("rowClick", { row: c.row, index: c.index });
-    }, C = () => {
-      m("select", b.value);
+    })[n.align || "left"], M = f(() => a(s.row, s.keyField)), T = () => {
+      const { size: n, compact: l, cellBordered: t } = s;
+      return n === "xs" || l ? `py-1.5! -text-fs-1.5! ${t ? "px-3!" : "pr-4 max-sm:pr-10!"}` : n === "sm" ? `py-2! -text-fs-1.5! ${t ? "px-3!" : "pr-5 max-sm:pr-10!"}` : n === "lg" ? `py-4! text-base ${t ? "px-4!" : "pr-7 max-sm:pr-12!"}` : `py-3! -text-fs-1.5! ${t ? "px-3.5!" : "pr-6! max-sm:pr-10!"}`;
+    }, m = H, z = f(
+      () => s.treeMode ? m + s.depth * s.treeIndent : 0
+    ), $ = f(
+      () => m + s.depth * s.treeIndent + O + h
+    ), F = () => {
+      u("rowClick", { row: s.row, index: s.index });
+    }, N = () => {
+      u("select", M.value);
+    }, W = (n) => {
+      n.stopPropagation(), u("toggleExpand");
     };
-    return (e, l) => (o(), r("tr", {
-      class: a(["border-b data-[state=selected]:bg-muted h-full", [
-        i.hoverable ? "hover:bg-muted/20" : "",
-        i.striped && i.index % 2 === 1 ? "bg-muted/20" : "bg-background",
-        i.isSelected ? "bg-muted! hover:bg-muted/30" : "",
+    return (n, l) => (o(), d("tr", {
+      class: g(["border-b data-[state=selected]:bg-muted h-full", [
+        e.hoverable ? "hover:bg-muted/20" : "",
+        e.striped && e.index % 2 === 1 ? "bg-muted/20" : "bg-background",
+        e.isSelected ? "bg-muted! hover:bg-muted/30" : "",
         "group"
       ]]),
-      "data-state": i.isSelected ? "selected" : void 0,
-      onClick: v
+      "data-state": e.isSelected ? "selected" : void 0,
+      onClick: F
     }, [
-      i.selectable ? (o(), r("td", {
+      e.selectable ? (o(), d("td", {
         key: 0,
         class: "px-0! py-1! align-middle text-center",
-        onClick: l[0] || (l[0] = z(() => {
+        onClick: l[0] || (l[0] = A(() => {
         }, ["stop"]))
       }, [
-        u("div", H, [
-          $(F, {
-            "model-value": i.isSelected,
+        b("div", Z, [
+          v(U, {
+            "model-value": e.isSelected,
+            indeterminate: e.isIndeterminate,
             size: "xs",
-            "onUpdate:modelValue": C
-          }, null, 8, ["model-value"])
+            "onUpdate:modelValue": N
+          }, null, 8, ["model-value", "indeterminate"])
         ])
-      ])) : M("", !0),
-      (o(!0), r(W, null, N(i.headers, (t) => (o(), r("td", {
+      ])) : x("", !0),
+      (o(!0), d(p, null, D(e.headers, (t, i) => (o(), d("td", {
         key: t.field,
-        class: a(["align-middle overflow-hidden max-w-[400px] whitespace-normal wrap-break-word", [
-          k(),
-          p(t),
+        class: g(["align-middle whitespace-normal wrap-break-word", [
+          T(),
+          E(t),
           t.hideOnMobile ? "hidden md:table-cell" : "",
-          g(t, n(i.row, t.field), i.row)
+          e.treeMode ? "max-w-none min-w-0" : "max-w-[400px]",
+          // Keep overflow clip on data cells; last column (actions) must stay visible
+          i === e.headers.length - 1 ? "overflow-visible" : "overflow-hidden",
+          // Tree chrome overlays the whole first cell (incl. padding) so branch
+          // lines join seamlessly across rows. overflow-visible lets the connector
+          // overlay bleed across the collapsed row border for continuous trunks.
+          e.treeMode && i === 0 ? "relative pl-0! overflow-visible!" : "",
+          B(t, a(e.row, t.field), e.row)
         ]]),
-        style: V({
-          ...t.width && !/(?:^|\s|:)w-/.test(t.width) ? { width: t.width } : {},
-          ...t.minWidth && !/(?:^|\s|:)min-w-/.test(t.minWidth) ? { minWidth: t.minWidth } : {}
-        })
+        style: w(
+          e.treeMode ? void 0 : {
+            ...t.width && !/(?:^|\s|:)w-/.test(t.width) ? { width: t.width } : {},
+            ...t.minWidth && !/(?:^|\s|:)min-w-/.test(t.minWidth) ? { minWidth: t.minWidth } : {}
+          }
+        )
       }, [
-        u("div", I, [
-          h(e.$slots, t.field, {
-            value: n(i.row, t.field),
-            row: i.row,
-            index: i.index,
+        e.treeMode && i === 0 ? (o(), d(p, { key: 0 }, [
+          v(y(R), {
+            depth: e.depth,
+            "is-last-sibling": e.isLastSibling,
+            "ancestor-last-flags": e.ancestorLastFlags,
+            "has-toggle": e.expandable,
+            indent: e.treeIndent,
+            "base-inset": y(m),
+            "content-gap": y(h),
+            "bleed-y": ""
+          }, null, 8, ["depth", "is-last-sibling", "ancestor-last-flags", "has-toggle", "indent", "base-inset", "content-gap"]),
+          e.expandable ? (o(), d("button", {
+            key: 0,
+            type: "button",
+            class: "absolute z-10 top-1/2 -translate-y-1/2 flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors focus:outline-none",
+            style: w({ left: z.value + "px" }),
+            "aria-expanded": e.expanded,
+            onClick: W
+          }, [
+            e.treeLoading ? (o(), c(k, {
+              key: 0,
+              icon: "lucide:loader-2",
+              class: "h-4 w-4 animate-spin"
+            })) : (o(), c(k, {
+              key: 1,
+              icon: e.expanded ? "lucide:chevron-down" : "lucide:chevron-right",
+              class: "h-4 w-4"
+            }, null, 8, ["icon"]))
+          ], 12, q)) : x("", !0)
+        ], 64)) : x("", !0),
+        b("div", {
+          class: g([
+            "w-full min-w-0",
+            e.treeMode && i === 0 ? "relative flex items-center min-h-[28px] max-h-[80px] overflow-y-auto" : i === e.headers.length - 1 ? "overflow-visible" : "max-h-[80px] overflow-y-auto"
+          ]),
+          style: w(e.treeMode && i === 0 ? { paddingLeft: $.value + "px" } : void 0)
+        }, [
+          I(n.$slots, t.field, {
+            value: a(e.row, t.field),
+            row: e.row,
+            index: e.index,
             field: t.field
           }, () => [
-            t.type === "price" ? (o(), f(L, {
+            t.type === "price" ? (o(), c(G, {
               key: 0,
-              value: n(i.row, t.field),
+              value: a(e.row, t.field),
               class: "block",
-              title: String(n(i.row, t.field))
-            }, null, 8, ["value", "title"])) : t.type === "date" ? (o(), f(T, {
+              title: String(a(e.row, t.field))
+            }, null, 8, ["value", "title"])) : t.type === "date" ? (o(), c(P, {
               key: 1,
-              value: n(i.row, t.field),
+              value: a(e.row, t.field),
               class: "block",
-              title: String(n(i.row, t.field))
-            }, null, 8, ["value", "title"])) : (o(), r("span", {
+              title: String(a(e.row, t.field))
+            }, null, 8, ["value", "title"])) : (o(), d("span", {
               key: 2,
               class: "block",
-              title: String(n(i.row, t.field)),
-              innerHTML: x(t, n(i.row, t.field), i.row)
-            }, null, 8, R))
+              title: String(a(e.row, t.field)),
+              innerHTML: S(t, a(e.row, t.field), e.row)
+            }, null, 8, J))
           ])
-        ])
+        ], 6)
       ], 6))), 128))
-    ], 10, E));
+    ], 10, j));
   }
 });
 export {
-  q as default
+  ne as default
 };

package/components/DataTable/types.d.ts

@@ -73,6 +73,16 @@ export interface DataTableProps {
     variant?: 'default' | 'raised';
     headerVariant?: 'default' | 'minimal';
     size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Async loader for nested rows. Called when a row with `hasChildren: true`
+     * (and no cached/static `children`) is expanded. Return value is cached internally.
+     */
+    loadChildren?: (row: any) => Promise<any[]>;
+    /**
+     * Horizontal indent per tree depth level in px. Applied by DataTable to the first column.
+     * @default 20
+     */
+    treeIndent?: number;
 }
 export interface SelectionState {
     selected: any[];
@@ -83,6 +93,26 @@ export interface RowClickPayload {
     row: any;
     index: number;
 }
+/**
+ * Emitted when a tree row is expanded or collapsed.
+ * Row conventions: `children?: any[]` (static) and/or `hasChildren?: boolean` (async marker).
+ */
+export interface ExpandPayload {
+    row: any;
+    expanded: boolean;
+    children?: any[];
+    depth: number;
+}
+/** Flattened visible tree row metadata used internally by DataTable. */
+export interface DataTableFlatRow {
+    row: any;
+    id: any;
+    depth: number;
+    parentId: any | null;
+    isLastSibling: boolean;
+    ancestorLastFlags: boolean[];
+    index: number;
+}
 /**
  * Shape provided by Screen to all deeply nested components via provide/inject.
  *

package/components/DataTable/useDataTableTree.d.ts

@@ -0,0 +1,24 @@
+import { Ref, ComputedRef } from 'vue';
+import { DataTableFlatRow, ExpandPayload } from './types';
+export interface UseDataTableTreeOptions {
+    rows: Ref<any[]> | ComputedRef<any[]>;
+    keyField: Ref<string> | ComputedRef<string>;
+    loadChildren?: Ref<((row: any) => Promise<any[]>) | undefined> | ComputedRef<((row: any) => Promise<any[]>) | undefined>;
+    getRowId: (row: any, keyField: string) => any;
+    onExpand: (payload: ExpandPayload) => void;
+}
+export declare function useDataTableTree({ rows, keyField, loadChildren, getRowId, onExpand, }: UseDataTableTreeOptions): {
+    isTreeMode: ComputedRef<boolean>;
+    expandedKeys: Ref<Set<any> & Omit<Set<any>, keyof Set<any>>, Set<any> | (Set<any> & Omit<Set<any>, keyof Set<any>>)>;
+    loadingKeys: Ref<Set<any> & Omit<Set<any>, keyof Set<any>>, Set<any> | (Set<any> & Omit<Set<any>, keyof Set<any>>)>;
+    childrenCache: Ref<Map<any, any[]> & Omit<Map<any, any[]>, keyof Map<any, any>>, Map<any, any[]> | (Map<any, any[]> & Omit<Map<any, any[]>, keyof Map<any, any>>)>;
+    flattenVisibleRows: ComputedRef<DataTableFlatRow[]>;
+    allLoadedRows: ComputedRef<Map<any, any>>;
+    getChildren: (row: any) => any[];
+    isExpandable: (row: any) => boolean;
+    isExpanded: (id: any) => boolean;
+    isLoading: (id: any) => boolean;
+    collectDescendantIds: (row: any) => any[];
+    toggleExpand: (row: any, depth: number) => Promise<void>;
+    pruneStaleTreeState: () => void;
+};

package/components/DataTable/useDataTableTree.js

@@ -0,0 +1,137 @@
+import { ref as x, computed as E } from "vue";
+const y = "children", Y = "hasChildren";
+function H(o) {
+  const l = o?.[y];
+  return Array.isArray(l) && l.length > 0;
+}
+function L(o) {
+  return o?.[Y] === !0;
+}
+function k({
+  rows: o,
+  keyField: l,
+  loadChildren: p,
+  getRowId: f,
+  onExpand: A
+}) {
+  const u = x(/* @__PURE__ */ new Set()), v = x(/* @__PURE__ */ new Set()), r = x(/* @__PURE__ */ new Map()), C = E(() => {
+    if (p?.value) return !0;
+    const e = (t) => {
+      for (const n of t) {
+        if (H(n) || L(n)) return !0;
+        const a = n?.[y];
+        if (Array.isArray(a) && e(a)) return !0;
+      }
+      return !1;
+    };
+    return e(o.value || []);
+  }), h = (e) => {
+    const t = f(e, l.value);
+    if (r.value.has(t))
+      return r.value.get(t) || [];
+    const n = e?.[y];
+    return Array.isArray(n) ? n : [];
+  }, b = (e) => {
+    const t = f(e, l.value);
+    return r.value.has(t) ? (r.value.get(t) || []).length > 0 : H(e) ? !0 : L(e);
+  }, K = (e) => u.value.has(e), _ = (e) => v.value.has(e), m = (e) => {
+    const t = [], n = (a) => {
+      for (const s of h(a))
+        t.push(f(s, l.value)), n(s);
+    };
+    return n(e), t;
+  }, N = E(() => {
+    if (!C.value)
+      return (o.value || []).map((a, s) => ({
+        row: a,
+        id: f(a, l.value),
+        depth: 0,
+        parentId: null,
+        isLastSibling: s === (o.value || []).length - 1,
+        ancestorLastFlags: [],
+        index: s
+      }));
+    const e = [];
+    let t = 0;
+    const n = (a, s, d, S) => {
+      a.forEach((c, i) => {
+        const g = f(c, l.value), T = i === a.length - 1;
+        if (e.push({
+          row: c,
+          id: g,
+          depth: s,
+          parentId: d,
+          isLastSibling: T,
+          ancestorLastFlags: [...S],
+          index: t++
+        }), u.value.has(g)) {
+          const D = h(c);
+          D.length > 0 && n(D, s + 1, g, [...S, T]);
+        }
+      });
+    };
+    return n(o.value || [], 0, null, []), e;
+  }), M = E(() => {
+    const e = /* @__PURE__ */ new Map(), t = (n) => {
+      for (const a of n) {
+        const s = f(a, l.value);
+        e.set(s, a);
+        for (const d of h(a))
+          t([d]);
+      }
+    };
+    return t(o.value || []), e;
+  });
+  return {
+    isTreeMode: C,
+    expandedKeys: u,
+    loadingKeys: v,
+    childrenCache: r,
+    flattenVisibleRows: N,
+    allLoadedRows: M,
+    getChildren: h,
+    isExpandable: b,
+    isExpanded: K,
+    isLoading: _,
+    collectDescendantIds: m,
+    toggleExpand: async (e, t) => {
+      if (!b(e)) return;
+      const n = f(e, l.value);
+      if (u.value.has(n)) {
+        const c = new Set(u.value);
+        c.delete(n);
+        for (const i of m(e))
+          c.delete(i);
+        u.value = c, A({ row: e, expanded: !1, children: h(e), depth: t });
+        return;
+      }
+      const s = new Set(u.value);
+      s.add(n), u.value = s;
+      let d = h(e);
+      if (!!p?.value && d.length === 0 && L(e) && !r.value.has(n) && p?.value) {
+        const c = new Set(v.value);
+        c.add(n), v.value = c;
+        try {
+          d = await p.value(e) || [];
+          const i = new Map(r.value);
+          i.set(n, d), r.value = i;
+        } finally {
+          const i = new Set(v.value);
+          i.delete(n), v.value = i;
+        }
+      }
+      A({ row: e, expanded: !0, children: d, depth: t });
+    },
+    pruneStaleTreeState: () => {
+      const e = new Set(M.value.keys());
+      u.value = new Set([...u.value].filter((n) => e.has(n))), v.value = new Set([...v.value].filter((n) => e.has(n)));
+      const t = /* @__PURE__ */ new Map();
+      r.value.forEach((n, a) => {
+        e.has(a) && t.set(a, n);
+      }), r.value = t;
+    }
+  };
+}
+export {
+  k as useDataTableTree
+};

package/components/FileTree/FileTree.vue.js

@@ -1,7 +1,7 @@
 import o from "./FileTree.vue2.js";
 /* empty css              */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-62b1cddc"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-773b0a78"]]);
 export {
   m as default
 };