@vtable-guild/vtable-guild 2.9.0-alpha.0 → 2.9.0-alpha.2

package/dist/table/src/components/VirtualTableBody.mjs

@@ -1,23 +1,23 @@
-import { defineComponent as U, inject as Y, ref as C, computed as w, onBeforeUnmount as J, watch as Q, createVNode as r, isVNode as Z } from "vue";
+import { defineComponent as U, inject as Y, ref as x, nextTick as J, computed as w, onBeforeUnmount as Q, watch as Z, createVNode as r, isVNode as ee } from "vue";
 import "../../../core/src/utils/tv.mjs";
-import ee from "./TableRow.mjs";
-import te from "./TableCell.mjs";
-import le from "./TableEmpty.mjs";
-import oe from "./ExpandedRowTr.mjs";
+import te from "./TableRow.mjs";
+import le from "./TableCell.mjs";
+import oe from "./TableEmpty.mjs";
+import ae from "./ExpandedRowTr.mjs";
 import ne from "./ColGroup.mjs";
-import ae from "./ColumnWidthRow.mjs";
-import { TABLE_CONTEXT_KEY as re } from "../context.mjs";
-import { resolveFixedColumnRanges as ie, useColumnWindow as se } from "../composables/useColumnWindow.mjs";
-import { resolveRowDragClass as de } from "../composables/useRowDragSort.mjs";
-import { getRowCompatClass as ue } from "../utils/compat.mjs";
+import re from "./ColumnWidthRow.mjs";
+import { TABLE_CONTEXT_KEY as ie } from "../context.mjs";
+import { resolveFixedColumnRanges as se, useColumnWindow as de } from "../composables/useColumnWindow.mjs";
+import { resolveRowDragClass as ue } from "../composables/useRowDragSort.mjs";
+import { getRowCompatClass as ce } from "../utils/compat.mjs";
 import { resolveRowKey as N } from "../utils/rowKey.mjs";
-import { sumDeclaredColumnWidths as ce, parseStylePxWidth as fe } from "../utils/columnWidth.mjs";
-import me from "../../../core/src/components/VirtualList/VirtualList.mjs";
+import { sumDeclaredColumnWidths as fe, parseStylePxWidth as me } from "../utils/columnWidth.mjs";
+import we from "../../../core/src/components/VirtualList/VirtualList.mjs";
 import { cn as W } from "tailwind-variants";
-function we(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Z(e);
+function ve(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !ee(t);
 }
-const qe = /* @__PURE__ */ U({
+const Oe = /* @__PURE__ */ U({
   name: "VirtualTableBody",
   props: {
     dataSource: {
@@ -96,183 +96,196 @@ const qe = /* @__PURE__ */ U({
       default: "hover"
     }
   },
-  setup(e, {
-    expose: F
+  setup(t, {
+    expose: k
   }) {
-    const n = Y(re, {}), c = C();
-    F({
+    const n = Y(ie, {}), c = x();
+    k({
       scrollToTop: () => c.value?.scrollTo({
         top: 0
-      })
+      }),
+      async scrollTo(e) {
+        const l = c.value;
+        return !l || (e.index !== void 0 ? l.scrollTo({
+          index: e.index,
+          align: e.align,
+          offset: e.offset
+        }) : e.top !== void 0 && l.scrollTo({
+          top: e.top
+        }), e.left !== void 0 && l.scrollTo({
+          left: e.left
+        }), await J(), c.value !== l) ? !1 : (v(l.getScrollInfo()), !0);
+      }
     });
-    const x = C(0), f = C(0);
-    function b(t) {
-      x.value = t.x, e.onVirtualScroll?.({
-        ...t,
+    const b = x(0), f = x(0);
+    function v(e) {
+      b.value = e.x, t.onVirtualScroll?.({
+        ...e,
         maxX: c.value?.getHorizontalRange() ?? 0
       });
     }
-    function V(t, l) {
-      return N(t, l, e.rowKey);
+    function F(e, l) {
+      return N(e, l, t.rowKey);
     }
-    function k(t, l) {
-      return N(t, l ?? e.dataSource.indexOf(t), e.rowKey);
+    function V(e, l) {
+      return N(e, l ?? t.dataSource.indexOf(e), t.rowKey);
     }
     const q = w(() => {
-      const t = e.columnMetrics?.total;
-      if (t && t > 0) return t;
-      const l = ce(e.columns, n.columnWidths), u = fe(e.tableStyle?.width);
+      const e = t.columnMetrics?.total;
+      if (e && e > 0) return e;
+      const l = fe(t.columns, n.columnWidths), u = me(t.tableStyle?.width);
       return Math.max(l, u);
-    }), y = w(() => ie(e.columns)), O = w(() => {
-      if (!e.virtualColumn || f.value <= 0) return null;
-      const t = e.columnMetrics;
-      return !t || t.widths.length !== e.columns.length ? null : t.widths;
+    }), y = w(() => se(t.columns)), O = w(() => {
+      if (!t.virtualColumn || f.value <= 0) return null;
+      const e = t.columnMetrics;
+      return !e || e.widths.length !== t.columns.length ? null : e.widths;
     }), {
       active: H,
-      start: _,
-      end: I,
+      start: I,
+      end: _,
       leftSpacer: S,
-      rightSpacer: p
-    } = se({
+      rightSpacer: R
+    } = de({
       widths: () => O.value,
       leftFixedCount: () => y.value.leftFixedCount,
       rightFixedStart: () => y.value.rightFixedStart,
-      offsetX: () => x.value,
+      offsetX: () => b.value,
       viewportWidth: () => f.value
     }), K = w(() => {
-      const t = e.columns.length;
+      const e = t.columns.length;
       if (!H.value)
         return Array.from({
-          length: t
-        }, (o, i) => ({
+          length: e
+        }, (a, i) => ({
           index: i
         }));
       const {
         leftFixedCount: l,
         rightFixedStart: u
-      } = y.value, a = [];
-      for (let o = 0; o < l; o += 1) a.push({
-        index: o
+      } = y.value, o = [];
+      for (let a = 0; a < l; a += 1) o.push({
+        index: a
       });
-      S.value > 0 && a.push({
+      S.value > 0 && o.push({
         spacer: S.value
       });
-      for (let o = _.value; o <= I.value; o += 1) a.push({
-        index: o
+      for (let a = I.value; a <= _.value; a += 1) o.push({
+        index: a
       });
-      p.value > 0 && a.push({
-        spacer: p.value
+      R.value > 0 && o.push({
+        spacer: R.value
       });
-      for (let o = u; o < t; o += 1) a.push({
-        index: o
+      for (let a = u; a < e; a += 1) o.push({
+        index: a
       });
-      return a;
+      return o;
     });
-    function ye(t) {
+    function ye(e) {
     }
     let s = null, d = null;
-    function R(t) {
-      const l = t ?? null;
+    function p(e) {
+      const l = e ?? null;
       l !== d && (s && d && s.unobserve(d), d = l, l && (f.value = l.clientWidth, !s && typeof ResizeObserver < "u" && (s = new ResizeObserver(() => {
         d && (f.value = d.clientWidth);
       })), s?.observe(l)));
     }
-    return J(() => {
+    return Q(() => {
       s?.disconnect(), s = null, d = null;
-    }), Q(() => c.value, (t) => {
-      if (t) {
-        const l = t.getScrollInfo();
-        b(l), t.nativeElement, R(t.nativeElement);
+    }), Z(() => c.value, (e) => {
+      if (e) {
+        const l = e.getScrollInfo();
+        v(l), e.nativeElement, p(e.nativeElement);
       } else
-        R(null);
-    }), () => e.dataSource.length === 0 ? r("table", {
+        p(null);
+    }), () => t.dataSource.length === 0 ? r("table", {
       "data-vtg-table": "",
-      class: W(e.tableClass, n.compatClass?.("body")),
-      style: e.tableStyle
+      class: W(t.tableClass, n.compatClass?.("body")),
+      style: t.tableStyle
     }, [r(ne, {
-      columns: e.columns
-    }, null), r(ae, null, null), r("tbody", {
-      class: e.tbodyClass
-    }, [r(le, {
-      colSpan: e.columns.length || 1,
-      emptyClass: e.emptyClass,
-      tdClass: e.tdClass
-    }, null)])]) : r(me, {
+      columns: t.columns
+    }, null), r(re, null, null), r("tbody", {
+      class: t.tbodyClass
+    }, [r(oe, {
+      colSpan: t.columns.length || 1,
+      emptyClass: t.emptyClass,
+      tdClass: t.tdClass
+    }, null)])]) : r(we, {
       ref: c,
       holderClass: n.compatClass?.("body"),
-      data: e.dataSource,
-      height: e.height,
-      itemHeight: e.itemHeight,
-      itemKey: k,
+      data: t.dataSource,
+      height: t.height,
+      itemHeight: t.itemHeight,
+      itemKey: V,
       scrollWidth: q.value || void 0,
-      disableHeightMeasure: e.fixedHeight,
+      disableHeightMeasure: t.fixedHeight,
       fullHeight: !1,
-      onVirtualScroll: b,
-      showScrollBar: e.showScrollBar,
+      onVirtualScroll: v,
+      showScrollBar: t.showScrollBar,
       style: {
         overflow: "hidden"
       }
     }, {
       default: ({
-        item: t,
+        item: e,
         index: l
       }) => {
         let u;
-        const a = l, o = V(t, a), i = n.expandable?.(), D = n.isExpanded?.(o) ?? !1, P = i?.expandRowByClick ?? !1, j = n.isRowExpandable?.(t) ?? !1, E = n.getRowClassName?.(t, a), B = n.getRowProps?.(t, a), M = n.rowDrag?.enabled.value ? n.rowDrag.getBindings(t, a, B) : void 0, A = {
-          ...B,
+        const o = l, a = F(e, o), i = n.expandable?.(), D = n.isExpanded?.(a) ?? !1, P = i?.expandRowByClick ?? !1, j = n.isRowExpandable?.(e) ?? !1, T = n.getRowClassName?.(e, o), E = n.getRowProps?.(e, o), M = n.rowDrag?.enabled.value ? n.rowDrag.getBindings(e, o, E) : void 0, A = {
+          ...E,
           ...M
-        }, L = de(n.rowDrag, o, n.subThemeSlots), v = (n.isTreeData?.value ? n.getFlattenRow?.(t) : void 0)?.level ?? 0, X = typeof i?.expandedRowClassName == "function" ? i.expandedRowClassName(t, a, v) : i?.expandedRowClassName, z = P ? () => {
-          j && n.toggleExpand?.(t, a);
-        } : void 0, T = K.value, $ = e.columnMetrics?.widths;
+        }, L = ue(n.rowDrag, a, n.subThemeSlots), g = (n.isTreeData?.value ? n.getFlattenRow?.(e) : void 0)?.level ?? 0, X = typeof i?.expandedRowClassName == "function" ? i.expandedRowClassName(e, o, g) : i?.expandedRowClassName, z = P ? () => {
+          j && n.toggleExpand?.(e, o);
+        } : void 0, B = K.value, $ = t.columnMetrics?.widths;
         return r("table", {
           "data-vtg-table": "",
-          class: e.tableClass,
+          class: t.tableClass,
           style: {
-            ...e.tableStyle,
+            ...t.tableStyle,
             tableLayout: "fixed"
           }
         }, [r("tbody", {
-          class: e.tbodyClass,
-          "data-vtg-preserve-last-border": l < e.dataSource.length - 1 ? "" : void 0
-        }, [r(ee, {
+          class: t.tbodyClass,
+          "data-vtg-preserve-last-border": l < t.dataSource.length - 1 ? "" : void 0
+        }, [r(te, {
           "data-vtg-virtual-row": "",
-          key: o,
-          rowClass: W(e.rowClass, E, L, ue(n, t, a, v)) ?? "",
+          "data-vtg-row-index": o,
+          key: a,
+          rowClass: W(t.rowClass, T, L, ce(n, e, o, g)) ?? "",
           rowProps: A,
           onClick: z
-        }, we(u = T.map((g, G) => {
-          if (g.spacer !== void 0)
+        }, ve(u = B.map((h, G) => {
+          if (h.spacer !== void 0)
             return r("td", {
               key: `__vtg_spacer_${G}`,
               style: {
-                width: `${g.spacer}px`,
+                width: `${h.spacer}px`,
                 padding: "0"
               },
               "aria-hidden": "true"
             }, null);
-          const m = g.index, h = e.columns[m];
-          return r(te, {
-            key: h.key ?? String(h.dataIndex ?? m),
-            record: t,
-            rowIndex: a,
-            column: h,
+          const m = h.index, C = t.columns[m];
+          return r(le, {
+            key: C.key ?? String(C.dataIndex ?? m),
+            record: e,
+            rowIndex: o,
+            column: C,
             colIndex: m,
             widthOverride: $?.[m],
-            tdClass: e.tdClass,
-            bodyCellEllipsisClass: e.bodyCellEllipsisClass
+            tdClass: t.tdClass,
+            bodyCellEllipsisClass: t.bodyCellEllipsisClass
           }, null);
         })) ? u : {
           default: () => [u]
-        }), D && i?.expandedRowRender ? r(oe, {
-          key: `${o}-expanded`,
-          record: t,
-          rowIndex: a,
-          colspan: T.length,
-          rowIndent: v,
-          rowClass: e.rowClass,
-          rowClassName: E,
+        }), D && i?.expandedRowRender ? r(ae, {
+          key: `${a}-expanded`,
+          record: e,
+          rowIndex: o,
+          colspan: B.length,
+          rowIndent: g,
+          rowClass: t.rowClass,
+          rowClassName: T,
           expandedRowClassName: X,
-          tdClass: e.tdClass,
+          tdClass: t.tdClass,
           expandedRowRender: i.expandedRowRender
         }, null) : null])]);
       }
@@ -280,5 +293,5 @@ const qe = /* @__PURE__ */ U({
   }
 });
 export {
-  qe as default
+  Oe as default
 };

package/dist/table/src/composables/useLazyTreeData.d.ts

@@ -0,0 +1,19 @@
+import { Key } from '../types/column';
+import { TableTreeLoadData } from '../types/tree';
+/** Immutable lazy children shared by sorting, selection, pagination and tree flattening. */
+export declare function useLazyTreeData<TRecord extends Record<string, unknown>>(options: {
+    data: () => TRecord[];
+    loadData: () => TableTreeLoadData<TRecord> | undefined;
+    isLeaf: () => ((record: TRecord) => boolean) | undefined;
+    childrenColumnName: () => string | undefined;
+    getRowKey: (record: TRecord, index: number) => Key;
+    onLoadError?: (error: Error, record: TRecord) => void;
+}): {
+    data: import('vue').ComputedRef<TRecord[]>;
+    hasChildren: (record: TRecord) => boolean;
+    load: (record: TRecord, index: number) => Promise<boolean>;
+    isLoading: (key: Key) => boolean;
+    getError: (key: Key) => Error | undefined;
+    retry(key: Key): Promise<boolean>;
+};
+//# sourceMappingURL=useLazyTreeData.d.ts.map

package/dist/table/src/composables/useLazyTreeData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLazyTreeData.d.ts","sourceRoot":"","sources":["../../../../../table/src/composables/useLazyTreeData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAOtD,4FAA4F;AAC5F,wBAAgB,eAAe,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE;IAChF,IAAI,EAAE,MAAM,OAAO,EAAE,CAAA;IACrB,QAAQ,EAAE,MAAM,iBAAiB,CAAC,OAAO,CAAC,GAAG,SAAS,CAAA;IACtD,MAAM,EAAE,MAAM,CAAC,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;IACxD,kBAAkB,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IAC5C,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,CAAA;IAClD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACtD;;0BAsF8B,OAAO;mBAMd,OAAO,SAAS,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC;qBA6E5C,GAAG;oBACJ,GAAG;eACR,GAAG;EAOjB"}

package/dist/table/src/composables/useLazyTreeData.mjs

@@ -0,0 +1,123 @@
+import { shallowRef as p, computed as M, watch as S, getCurrentScope as L, onScopeDispose as C } from "vue";
+function T(n) {
+  const s = p(/* @__PURE__ */ new Map()), i = p(/* @__PURE__ */ new Map()), y = p(/* @__PURE__ */ new Set()), c = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new WeakMap();
+  let g = !1;
+  const o = M(() => n.childrenColumnName() ?? "children"), h = M(() => {
+    const e = /* @__PURE__ */ new Map();
+    let r = 0;
+    function t(a) {
+      for (const u of a) {
+        const d = n.getRowKey(u, r++);
+        e.set(d, u);
+        const v = s.value.get(d), l = u[o.value] ?? (v?.record === u ? v.children : void 0);
+        Array.isArray(l) && t(l);
+      }
+    }
+    return n.loadData() && t(n.data()), e;
+  });
+  function w(e, r = !0) {
+    const t = c.get(e);
+    r && (t?.controller.abort(), t?.resolve(!1)), c.delete(e), y.value = new Set([...y.value].filter((a) => a !== e));
+  }
+  let D = h.value;
+  S(
+    h,
+    (e) => {
+      const r = new Map(s.value);
+      for (const [t, a] of r)
+        (e.get(t) !== a.record || Array.isArray(a.record[o.value])) && r.delete(t);
+      r.size !== s.value.size && (s.value = r);
+      for (const [t, a] of c)
+        (e.get(t) !== a.record || Array.isArray(a.record[o.value])) && w(t);
+      i.value = new Map(
+        [...i.value].filter(([t]) => {
+          const a = e.get(t);
+          return a !== void 0 && a === D.get(t) && !Array.isArray(a[o.value]);
+        })
+      ), D = e;
+    },
+    { flush: "sync" }
+  );
+  const b = M(() => {
+    if (!n.loadData()) return n.data();
+    let e = 0;
+    function r(t) {
+      return t.map((a) => {
+        const u = n.getRowKey(a, e++), d = s.value.get(u), v = a[o.value] ?? (d?.record === a ? d.children : void 0);
+        if (!Array.isArray(v)) return a;
+        const l = { ...a, [o.value]: r(v) };
+        return m.set(l, a), l;
+      });
+    }
+    return r(n.data());
+  });
+  function A(e) {
+    const r = e[o.value];
+    return Array.isArray(r) ? r.length > 0 : !!n.loadData() && n.isLeaf()?.(m.get(e) ?? e) !== !0;
+  }
+  function x(e, r) {
+    const t = m.get(e) ?? e, a = n.getRowKey(t, r);
+    return g || !n.loadData() || !A(e) ? Promise.resolve(!1) : P(t, a);
+  }
+  function P(e, r) {
+    if (Array.isArray(e[o.value]) || s.value.get(r)?.record === e)
+      return Promise.resolve(!0);
+    const t = c.get(r);
+    if (t) return t.promise;
+    const a = new AbortController(), u = n.loadData();
+    let d;
+    const v = new Promise((f) => {
+      d = f;
+    }), l = { record: e, controller: a, promise: Promise.resolve(!1), resolve: d };
+    c.set(r, l), y.value = /* @__PURE__ */ new Set([...y.value, r]);
+    const E = new Map(i.value);
+    E.delete(r), i.value = E;
+    const K = Promise.resolve().then(async () => {
+      if (g || a.signal.aborted || c.get(r) !== l) return !1;
+      try {
+        const f = await u(e, { signal: a.signal });
+        if (g || a.signal.aborted || h.value.get(r) !== e || Array.isArray(e[o.value]))
+          return !1;
+        if (!Array.isArray(f)) throw new Error("Tree loadData must return an array");
+        return s.value = new Map(s.value).set(r, { record: e, children: f }), !0;
+      } catch (f) {
+        if (g || a.signal.aborted || h.value.get(r) !== e) return !1;
+        const R = f instanceof Error ? f : new Error(String(f));
+        i.value = new Map(i.value).set(r, R);
+        try {
+          Promise.resolve(n.onLoadError?.(R, e)).catch(() => {
+          });
+        } catch {
+        }
+        return !1;
+      } finally {
+        c.get(r) === l && w(r, !1);
+      }
+    });
+    return l.promise = Promise.race([K, v]), l.promise;
+  }
+  return S(
+    [n.loadData, o],
+    () => {
+      for (const e of c.keys()) w(e);
+      s.value = /* @__PURE__ */ new Map(), i.value = /* @__PURE__ */ new Map();
+    },
+    { flush: "sync" }
+  ), L() && C(() => {
+    g = !0;
+    for (const e of c.keys()) w(e);
+  }), {
+    data: b,
+    hasChildren: A,
+    load: x,
+    isLoading: (e) => y.value.has(e),
+    getError: (e) => i.value.get(e),
+    retry(e) {
+      const r = h.value.get(e);
+      return r && !g && n.loadData() && A(r) ? P(r, e) : Promise.resolve(!1);
+    }
+  };
+}
+export {
+  T as useLazyTreeData
+};

package/dist/table/src/composables/useLazyTreeData.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useLazyTreeData.test.d.ts.map

package/dist/table/src/composables/useLazyTreeData.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLazyTreeData.test.d.ts","sourceRoot":"","sources":["../../../../../table/src/composables/useLazyTreeData.test.ts"],"names":[],"mappings":""}

package/dist/table/src/composables/useTableDictionary.d.ts

@@ -0,0 +1,5 @@
+import { CreateTableDictionaryOptions, TableDictionary, UseTableDictionaryOptions, UseTableDictionaryReturn } from '../types/dictionary';
+/** A cache is owned by this instance, never by a process-wide registry or a cell renderer. */
+export declare function createTableDictionary<TParams extends object = Record<string, unknown>>(options: CreateTableDictionaryOptions<TParams>): TableDictionary<TParams>;
+export declare function useTableDictionary<TParams extends object = Record<string, unknown>>(options: UseTableDictionaryOptions<TParams>): UseTableDictionaryReturn;
+//# sourceMappingURL=useTableDictionary.d.ts.map

package/dist/table/src/composables/useTableDictionary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableDictionary.d.ts","sourceRoot":"","sources":["../../../../../table/src/composables/useTableDictionary.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,4BAA4B,EAC5B,eAAe,EAGf,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,qBAAqB,CAAA;AA+B5B,8FAA8F;AAC9F,wBAAgB,qBAAqB,CAAC,OAAO,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpF,OAAO,EAAE,4BAA4B,CAAC,OAAO,CAAC,GAC7C,eAAe,CAAC,OAAO,CAAC,CAyG1B;AAED,wBAAgB,kBAAkB,CAAC,OAAO,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjF,OAAO,EAAE,yBAAyB,CAAC,OAAO,CAAC,GAC1C,wBAAwB,CAoI1B"}