@vtable-guild/vtable-guild 2.7.1 → 2.8.1

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

@@ -0,0 +1,259 @@
+import { computed as p, shallowRef as z, watch as et, onMounted as ct, onUpdated as dt, onBeforeUnmount as ht, nextTick as mt } from "vue";
+import { measureColumnTracks as nt } from "./useColumnMetrics.mjs";
+import { normalizeMinWidth as it, parseColumnWidth as x, resolveColumnWidth as ft, allocateFixedColumnWidths as vt } from "../utils/columnWidth.mjs";
+const rt = 0.1, O = (e) => typeof e == "string" && /^(?:min-content|max-content|fit-content(?:\(.*\))?)$/i.test(e.trim());
+function pt(e) {
+  const w = p(
+    () => e.columns().some((t) => it(t.minWidth) !== void 0)
+  ), T = z(0), q = z({}), A = z([]), k = (t, n) => q.value[`${n}:${t}`], L = z(null), F = z(!1), I = p(
+    () => Math.max(
+      T.value,
+      x(e.scrollX(), T.value, k) ?? 0
+    )
+  ), j = p(
+    () => e.columns().map(
+      (t, n) => O(t.width) && A.value[n] !== void 0 ? { ...t, width: A.value[n] } : t
+    )
+  ), $ = p(
+    () => j.value.map(
+      (t, n) => ft(t, n, {
+        columnWidths: e.columnWidths,
+        referenceWidth: I.value,
+        resolveCssLength: k
+      })
+    )
+  ), S = p(
+    () => $.value.map((t) => Math.max(t.effectiveMinWidth ?? 0, t.resizedWidth ?? 0))
+  ), B = p(() => S.value.reduce((t, n) => t + n, 0)), V = p(
+    () => vt(j.value, {
+      containerWidth: T.value,
+      targetWidth: I.value,
+      columnWidths: e.columnWidths,
+      resolveCssLength: k
+    })
+  ), C = p(() => w.value ? e.layout() === "fixed" ? { widths: V.value.widths, total: V.value.totalWidth } : L.value : null), H = p(
+    () => w.value && (e.layout() === "fixed" || e.split())
+  );
+  function lt(t, n = 1) {
+    if (!w.value) return {};
+    const r = $.value[t];
+    if (!r) return {};
+    const a = S.value.slice(t, t + n).reduce((b, h) => b + h, 0), u = H.value ? C.value?.widths.slice(t, t + n) : void 0, g = u ? u.reduce((b, h) => b + h, 0) : n === 1 ? r.targetWidth : void 0;
+    return {
+      minWidth: `${a}px`,
+      ...g !== void 0 ? { width: `${g}px` } : {}
+    };
+  }
+  const ot = p(() => w.value ? H.value && C.value ? {
+    tableLayout: "fixed",
+    width: `${C.value.total}px`,
+    minWidth: `${C.value.total}px`
+  } : { minWidth: `max(100%, ${B.value}px)` } : {});
+  let R = 0, N, P, J = null, Y = null, X = !1;
+  const _ = ["load", "error", "loadedmetadata"], G = ["src", "srcset", "sizes", "width", "height", "href"];
+  function D(t) {
+    return !!(t instanceof Element ? t : t.parentElement)?.closest("[inert]");
+  }
+  function K(t) {
+    return t instanceof Element && t.matches("img, video, iframe, object, embed, source, image");
+  }
+  function Q(t) {
+    K(t.target) && !D(t.target) && W();
+  }
+  function Z() {
+    for (const t of _)
+      J?.removeEventListener(t, Q, !0);
+  }
+  function st(t, n) {
+    return t?.widths.length === n.widths.length && t.widths.every((r, a) => Math.abs(r - n.widths[a]) < rt);
+  }
+  function at(t, n, r) {
+    const a = [...t.querySelectorAll("table[data-vtg-table]")].filter(
+      (l) => !l.parentElement?.closest("table[data-vtg-table]")
+    );
+    if (!a.length) return null;
+    const u = a[0].cloneNode(!1);
+    u.removeAttribute("id"), u.style.tableLayout = "auto", u.style.width = `${r}px`, u.style.minWidth = `${B.value}px`;
+    const g = document.createElement("colgroup");
+    for (let l = 0; l < $.value.length; l++) {
+      const o = document.createElement("col"), s = e.columns()[l], v = $.value[l], i = v.resizedWidth ?? x(s.width, r);
+      i !== void 0 ? o.style.width = `${Math.max(i, v.effectiveMinWidth ?? 0)}px` : typeof s.width == "string" && !/content/.test(s.width) && (o.style.width = s.width), o.style.minWidth = `${S.value[l]}px`, g.append(o);
+    }
+    u.append(g);
+    const b = document.createElement("tbody");
+    b.dataset.vtgWidthRow = "";
+    const h = b.insertRow();
+    S.value.forEach((l, o) => {
+      const s = h.insertCell();
+      s.dataset.vtgTrack = String(o), s.style.cssText = "padding:0;border:0;height:0;line-height:0;font-size:0";
+      const v = document.createElement("div");
+      v.style.cssText = `height:0;min-width:${l}px`, s.append(v);
+    }), u.append(b);
+    for (const l of a)
+      for (const o of [...l.children]) {
+        if (!["THEAD", "TBODY", "TFOOT"].includes(o.tagName) || o.hasAttribute("data-vtg-width-row"))
+          continue;
+        const s = o.cloneNode(!0), v = o.querySelectorAll("img");
+        s.querySelectorAll("img").forEach((i, y) => {
+          const m = v[y];
+          if (!m.naturalWidth || !m.naturalHeight || i.naturalWidth) return;
+          const c = getComputedStyle(m);
+          /\b(?:size|inline-size|strict)\b/.test(c.contain) || (i.style.contain = c.contain === "content" ? "strict" : `${c.contain && c.contain !== "none" ? `${c.contain} ` : ""}size`, i.style.containIntrinsicSize = `${m.naturalWidth}px ${m.naturalHeight}px`, (!c.aspectRatio || /\bauto\b/.test(c.aspectRatio)) && (i.style.aspectRatio = `auto ${m.naturalWidth} / ${m.naturalHeight}`));
+        });
+        for (const i of s.querySelectorAll("th,td")) {
+          const y = Number(i.dataset.vtgLeafCol ?? i.dataset.vtgCol);
+          if (i.style.removeProperty("width"), i.style.removeProperty("min-width"), i.style.removeProperty("max-width"), i.style.removeProperty("position"), i.style.removeProperty("left"), i.style.removeProperty("right"), Number.isInteger(y) && $.value[y]) {
+            const m = $.value[y], c = e.columns()[y], d = m.resizedWidth ?? x(c.width, r);
+            d !== void 0 ? i.style.width = `${Math.max(d, m.effectiveMinWidth ?? 0)}px` : typeof c.width == "string" && !/content/.test(c.width) && (i.style.width = c.width), i.style.minWidth = `${S.value[y]}px`;
+          }
+        }
+        for (const i of s.querySelectorAll("tr[data-vtg-virtual-row]")) {
+          const y = [...i.querySelectorAll("td[data-vtg-col]")];
+          i.replaceChildren(
+            ...e.columns().map(
+              (m, c) => y.find((d) => Number(d.dataset.vtgCol) === c) ?? document.createElement("td")
+            )
+          );
+        }
+        for (const i of s.querySelectorAll("[id]")) i.removeAttribute("id");
+        u.append(s);
+      }
+    return n.append(u), u;
+  }
+  function ut() {
+    if (R = 0, X || !w.value) return;
+    const t = e.root(), n = e.viewport() ?? t;
+    if (!t || !n) return;
+    const r = n.clientWidth;
+    if (r <= 0) return;
+    let a = Math.abs(T.value - r) > rt;
+    a && (T.value = r);
+    let u = !1;
+    const g = /* @__PURE__ */ new Set();
+    for (const o of [e.scrollX(), ...e.columns().map((s) => s.width)])
+      typeof o == "string" && o !== "auto" && x(o, r) === void 0 && g.add(o);
+    const b = e.layout() === "auto" && e.split() || [...g].some((o) => /content/.test(o)), h = document.createElement("div");
+    h.inert = !0, h.setAttribute("aria-hidden", "true"), h.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;overflow:hidden;height:0;width:${r}px;contain:layout style;`, t.append(h);
+    let l = null;
+    try {
+      let o = function(d, f) {
+        if (!CSS.supports("width", d)) return;
+        h.style.width = `${f}px`;
+        let E;
+        if (O(d)) {
+          if (!l) return;
+          l.style.width = d, E = l.getBoundingClientRect().width;
+        } else {
+          const M = document.createElement("div");
+          M.style.width = d, h.append(M), E = M.getBoundingClientRect().width, M.remove();
+        }
+        return s[`${f}:${d}`] = E, E;
+      };
+      const s = {}, v = e.scrollX(), i = Math.max(
+        r,
+        O(v) ? 0 : x(v, r, o) ?? 0
+      );
+      b && (l = at(t, h, i));
+      const y = x(v, r, o), m = Math.max(r, y ?? 0), c = e.columns().map((d) => {
+        if (!O(d.width)) {
+          x(d.width, m, o);
+          return;
+        }
+      });
+      if (l) {
+        const d = new Set(
+          e.columns().flatMap((f) => O(f.width) ? [f.width] : [])
+        );
+        for (const f of d) {
+          l.style.width = f;
+          const E = nt(l, e.columns().length);
+          e.columns().forEach((M, tt) => {
+            M.width === f && (c[tt] = E?.widths[tt]);
+          });
+        }
+      }
+      if (JSON.stringify(c) !== JSON.stringify(A.value) && (A.value = c, a = !0), JSON.stringify(s) !== JSON.stringify(q.value) && (q.value = s, a = !0), e.layout() === "auto")
+        if (!e.split() && a)
+          u = !0;
+        else {
+          l && (l.style.width = `${I.value}px`);
+          const d = e.split() ? l : t.querySelector("table[data-vtg-table]"), f = d ? nt(d, e.columns().length) : null;
+          f && !st(L.value, f) && (L.value = f);
+        }
+      u || (F.value = Math.max(C.value?.total ?? 0, n.scrollWidth) > r + 1);
+    } finally {
+      h.remove();
+    }
+    if (u) {
+      mt(W);
+      return;
+    }
+    e.onMeasure?.();
+  }
+  function W() {
+    X || R || !w.value || (R = requestAnimationFrame(ut));
+  }
+  function U() {
+    const t = w.value ? e.root() : null, n = w.value ? e.viewport() ?? t : null;
+    if (!(t === J && n === Y) && (N?.disconnect(), P?.disconnect(), Z(), J = t, Y = n, !!t)) {
+      N ??= typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(W), N?.observe(t), n && n !== t && N?.observe(n);
+      for (const r of _) t.addEventListener(r, Q, !0);
+      P ??= new MutationObserver((r) => {
+        r.some((a) => {
+          if (D(a.target)) return !1;
+          if (a.type === "attributes")
+            return K(a.target) && G.includes(a.attributeName ?? "");
+          const u = [...a.addedNodes, ...a.removedNodes];
+          return !u.length || u.some((g) => !D(g));
+        }) && W();
+      }), P.observe(t, {
+        childList: !0,
+        subtree: !0,
+        characterData: !0,
+        attributes: !0,
+        attributeFilter: G
+      });
+    }
+  }
+  return et(
+    () => [
+      e.columns().map((t) => [t.key, t.width, t.minWidth, t.maxWidth]),
+      { ...e.columnWidths },
+      e.layout(),
+      e.split(),
+      e.scrollX()
+    ],
+    () => {
+      L.value = null, w.value || (F.value = !1, q.value = {}, A.value = []), U(), W();
+    },
+    { deep: !0, flush: "post" }
+  ), et(
+    () => e.columns().map((t) => [t.key, t.minWidth, t.maxWidth]),
+    () => {
+      for (const t of e.columns()) {
+        const n = it(t.minWidth);
+        t.minWidth, n !== void 0 && t.maxWidth !== void 0 && t.maxWidth < n;
+      }
+    },
+    { immediate: !0, deep: !0 }
+  ), ct(() => {
+    U(), W();
+  }), dt(() => {
+    U(), W();
+  }), ht(() => {
+    X = !0, R && cancelAnimationFrame(R), N?.disconnect(), P?.disconnect(), Z();
+  }), {
+    enabled: w,
+    minimums: S,
+    minimumTotal: B,
+    metrics: C,
+    synchronized: H,
+    tableStyle: ot,
+    columnStyle: lt,
+    overflow: F,
+    remeasure: W
+  };
+}
+export {
+  pt as useColumnLayout
+};

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

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

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

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

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

@@ -6,6 +6,8 @@ export interface ColumnMetrics {
     /** 列总宽。 */
     total: number;
 }
+/** Read one complete leaf-track row, retaining fractional CSS pixels on every engine. */
+export declare function measureColumnTracks(table: HTMLTableElement, count: number): ColumnMetrics | null;
 export interface UseColumnMetricsOptions {
     /** 关闭时不测量、不注册 observer，`metrics` 恒为 null。 */
     enabled: () => boolean;
@@ -28,12 +30,12 @@ export interface UseColumnMetricsReturn {
  *
  * **为什么量表头而不是要求用户声明数字列宽**：表头始终渲染全部 N 列，
  * 它本身就是浏览器算好的精确列宽结果，直接读即可，不必复刻一套
- * `width / minWidth / auto / 百分比 → renderWidth` 的解析（vxe-table 必须自己算，
+ * `width / auto / 百分比 → renderWidth` 的解析（vxe-table 必须自己算，
  * 是因为它表头表体都窗口化，没有一份完整布局可参照）。因此我们天然支持
  * `auto`、百分比，以及 `table-layout: fixed` 下浏览器对余量的分配。
  *
- * **不会震荡**：表头布局不依赖表体，所以「量表头 → 改表体」不构成反馈环。
- * 这是整个方案能成立的关键。
+ * 该路径仅用于没有显式下限的既有表格。约束布局由 useColumnLayout 分配 fixed
+ * 像素，或调用 measureColumnTracks 读取包含当前表体内容的独立 auto 参照。
  */
 export declare function useColumnMetrics(options: UseColumnMetricsOptions): UseColumnMetricsReturn;
 //# sourceMappingURL=useColumnMetrics.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useColumnMetrics.d.ts","sourceRoot":"","sources":["../../../../../table/src/composables/useColumnMetrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiD,KAAK,UAAU,EAAE,MAAM,KAAK,CAAA;AACpF,OAAO,KAAK,EAAE,UAAU,EAAO,MAAM,UAAU,CAAA;AAG/C,MAAM,WAAW,aAAa;IAC5B,2CAA2C;IAC3C,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,WAAW;IACX,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,6CAA6C;IAC7C,OAAO,EAAE,MAAM,OAAO,CAAA;IACtB,yCAAyC;IACzC,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAA;IAClC,OAAO,EAAE,MAAM,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAA;IACpD,qBAAqB;IACrB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,uCAAuC;IACvC,SAAS,EAAE,MAAM,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,iCAAiC;IACjC,OAAO,EAAE,UAAU,CAAC,aAAa,GAAG,IAAI,CAAC,CAAA;IACzC,uBAAuB;IACvB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AA0CD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,sBAAsB,CAuHzF"}
+{"version":3,"file":"useColumnMetrics.d.ts","sourceRoot":"","sources":["../../../../../table/src/composables/useColumnMetrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiD,KAAK,UAAU,EAAE,MAAM,KAAK,CAAA;AACpF,OAAO,KAAK,EAAE,UAAU,EAAO,MAAM,UAAU,CAAA;AAG/C,MAAM,WAAW,aAAa;IAC5B,2CAA2C;IAC3C,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,WAAW;IACX,KAAK,EAAE,MAAM,CAAA;CACd;AAED,yFAAyF;AACzF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAQhG;AAED,MAAM,WAAW,uBAAuB;IACtC,6CAA6C;IAC7C,OAAO,EAAE,MAAM,OAAO,CAAA;IACtB,yCAAyC;IACzC,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAA;IAClC,OAAO,EAAE,MAAM,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAA;IACpD,qBAAqB;IACrB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,uCAAuC;IACvC,SAAS,EAAE,MAAM,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,iCAAiC;IACjC,OAAO,EAAE,UAAU,CAAC,aAAa,GAAG,IAAI,CAAC,CAAA;IACzC,uBAAuB;IACvB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AA0CD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,sBAAsB,CAuHzF"}

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

@@ -1,69 +1,77 @@
-import { shallowRef as g, watch as y, onMounted as N, onBeforeUnmount as A } from "vue";
-import { getColumnKey as F } from "./useColumns.mjs";
-const O = 0.5;
-function q(e, t) {
-  if (e === null || t === null) return e === t;
-  if (e.widths.length !== t.widths.length) return !1;
-  for (let r = 0; r < e.widths.length; r += 1)
-    if (Math.abs(e.widths[r] - t.widths[r]) > O) return !1;
+import { shallowRef as v, watch as y, onMounted as A, onBeforeUnmount as N } from "vue";
+import { getColumnKey as C } from "./useColumns.mjs";
+function H(e, n) {
+  const t = [...e.children].find((l) => l.hasAttribute("data-vtg-width-row"))?.querySelectorAll("[data-vtg-track]");
+  if (t?.length !== n) return null;
+  const r = Array.from(t, (l) => l.getBoundingClientRect().width);
+  if (r.some((l) => !Number.isFinite(l) || l < 0)) return null;
+  const i = r.reduce((l, f) => l + f, 0);
+  return i > 0 ? { widths: r, total: i } : null;
+}
+const F = 0.5;
+function q(e, n) {
+  if (e === null || n === null) return e === n;
+  if (e.widths.length !== n.widths.length) return !1;
+  for (let u = 0; u < e.widths.length; u += 1)
+    if (Math.abs(e.widths[u] - n.widths[u]) > F) return !1;
   return !0;
 }
-function C(e, t) {
-  return F(e) ?? t;
+function O(e, n) {
+  return C(e) ?? n;
 }
-function E(e, t) {
-  const r = [];
-  let n = 0;
-  for (let l = 0; l < e.length; l += 1) {
-    const s = t[String(C(e[l], l))] ?? e[l].width, f = typeof s == "number" ? s : Number.NaN;
-    if (!Number.isFinite(f) || f <= 0) return null;
-    r.push(f), n += f;
+function R(e, n) {
+  const u = [];
+  let t = 0;
+  for (let r = 0; r < e.length; r += 1) {
+    const i = n[String(O(e[r], r))] ?? e[r].width, l = typeof i == "number" ? i : Number.NaN;
+    if (!Number.isFinite(l) || l <= 0) return null;
+    u.push(l), t += l;
   }
-  return n > 0 ? { widths: r, total: n } : null;
+  return t > 0 ? { widths: u, total: t } : null;
 }
-function M(e) {
-  const t = g(null);
-  let r = 0, n = null, l = null, s = null;
-  function f() {
-    const u = e.columns(), i = u.length;
-    if (i === 0) return null;
+function I(e) {
+  const n = v(null);
+  let u = 0, t = null, r = null, i = null;
+  function l() {
+    const s = e.columns(), o = s.length;
+    if (o === 0) return null;
     if (!e.hasHeader())
-      return E(u, e.columnWidths);
-    const w = e.headerEl();
-    if (!w) return null;
-    const v = w.querySelectorAll("th[data-vtg-leaf-col]");
-    if (v.length !== i) return null;
-    const d = new Array(i).fill(-1);
-    for (const c of v) {
-      const o = Number(c.dataset.vtgLeafCol);
-      if (!Number.isInteger(o) || o < 0 || o >= i) return null;
-      d[o] = c.getBoundingClientRect().width;
+      return R(s, e.columnWidths);
+    const b = e.headerEl();
+    if (!b) return null;
+    const g = b.querySelectorAll("th[data-vtg-leaf-col]");
+    if (g.length !== o) return null;
+    const h = new Array(o).fill(-1);
+    for (const c of g) {
+      const d = Number(c.dataset.vtgLeafCol);
+      if (!Number.isInteger(d) || d < 0 || d >= o) return null;
+      h[d] = c.getBoundingClientRect().width;
     }
-    let h = 0;
-    for (const c of d) {
+    let m = 0;
+    for (const c of h) {
       if (c < 0) return null;
-      h += c;
+      m += c;
     }
-    return h > 0 ? { widths: d, total: h } : null;
+    return m > 0 ? { widths: h, total: m } : null;
   }
-  function m() {
-    if (r = 0, !e.enabled()) {
-      t.value = null;
+  function f() {
+    if (u = 0, !e.enabled()) {
+      n.value = null;
       return;
     }
-    const u = f();
-    q(t.value, u) || (t.value = u);
+    const s = l();
+    q(n.value, s) || (n.value = s);
   }
   function a() {
     if (typeof requestAnimationFrame > "u") {
-      m();
+      f();
       return;
     }
-    r || (r = requestAnimationFrame(m));
+    u || (u = requestAnimationFrame(f));
   }
-  function b() {
-    const u = e.enabled() && e.hasHeader() ? e.headerEl() : null, i = u?.querySelector("table") ?? null;
-    u === l && i === s || (n && l && n.unobserve(l), n && s && n.unobserve(s), l = u, s = i, u && (!n && typeof ResizeObserver < "u" && (n = new ResizeObserver(a)), n?.observe(u), i && n?.observe(i)));
+  function w() {
+    const s = e.enabled() && e.hasHeader() ? e.headerEl() : null, o = s?.querySelector("table") ?? null;
+    s === r && o === i || (t && r && t.unobserve(r), t && i && t.unobserve(i), r = s, i = o, s && (!t && typeof ResizeObserver < "u" && (t = new ResizeObserver(a)), t?.observe(s), o && t?.observe(o)));
   }
   return y(
     [
@@ -74,15 +82,16 @@ function M(e) {
       () => ({ ...e.columnWidths })
     ],
     () => {
-      b(), a();
+      w(), a();
     },
     { deep: !1, flush: "post" }
-  ), N(() => {
-    b(), a();
-  }), A(() => {
-    r && cancelAnimationFrame(r), n?.disconnect(), n = null, l = null, s = null;
-  }), { metrics: t, remeasure: a };
+  ), A(() => {
+    w(), a();
+  }), N(() => {
+    u && cancelAnimationFrame(u), t?.disconnect(), t = null, r = null, i = null;
+  }), { metrics: n, remeasure: a };
 }
 export {
-  M as useColumnMetrics
+  H as measureColumnTracks,
+  I as useColumnMetrics
 };

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

@@ -10,5 +10,7 @@ export declare function useExpand(options: {
     expandable: () => Expandable | undefined;
     getRowKey: (record: Record<string, unknown>, index: number) => Key;
     data: () => Record<string, unknown>[];
+    childrenColumnName?: () => string | undefined;
+    initializeNewRows?: () => boolean;
 }): UseExpandReturn;
 //# sourceMappingURL=useExpand.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useExpand.d.ts","sourceRoot":"","sources":["../../../../../table/src/composables/useExpand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,KAAK,CAAA;AAC5D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEhD,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAA;IACjC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtE,cAAc,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;CACtC;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE;IACjC,UAAU,EAAE,MAAM,UAAU,GAAG,SAAS,CAAA;IACxC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,CAAA;IAClE,IAAI,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;CACtC,GAAG,eAAe,CA8DlB"}
+{"version":3,"file":"useExpand.d.ts","sourceRoot":"","sources":["../../../../../table/src/composables/useExpand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,KAAK,CAAA;AAC5D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEhD,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAA;IACjC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtE,cAAc,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;CACtC;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE;IACjC,UAAU,EAAE,MAAM,UAAU,GAAG,SAAS,CAAA;IACxC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,CAAA;IAClE,IAAI,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;IACrC,kBAAkB,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IAC7C,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAA;CAClC,GAAG,eAAe,CA8FlB"}

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

@@ -1,37 +1,59 @@
-import { ref as v, watch as w, computed as i } from "vue";
-function K(a) {
-  const n = v([]);
-  let f = !1;
-  w(
+import { ref as p, watch as y, computed as v } from "vue";
+function m(a) {
+  const d = p([]);
+  let s = !1;
+  const i = /* @__PURE__ */ new Set();
+  function f(e) {
+    const n = [];
+    function t(l) {
+      for (const r of l) {
+        n.push(a.getRowKey(r, n.length));
+        const u = r[a.childrenColumnName?.() ?? "children"];
+        Array.isArray(u) && t(u);
+      }
+    }
+    return t(e), n;
+  }
+  y(
     () => a.expandable(),
     (e) => {
-      f || !e || (f = !0, e.defaultExpandAllRows ? n.value = a.data().map((t, d) => a.getRowKey(t, d)) : e.defaultExpandedRowKeys && (n.value = [...e.defaultExpandedRowKeys]));
+      s || !e || (s = !0, e.defaultExpandAllRows ? (d.value = a.initializeNewRows?.() ? f(a.data()) : a.data().map((n, t) => a.getRowKey(n, t)), d.value.forEach((n) => i.add(n))) : e.defaultExpandedRowKeys && (d.value = [...e.defaultExpandedRowKeys]));
+    },
+    { immediate: !0 }
+  );
+  const c = v(() => a.expandable()?.expandedRowKeys !== void 0);
+  y(
+    () => a.initializeNewRows?.() && a.expandable()?.defaultExpandAllRows ? a.data() : null,
+    (e) => {
+      if (!e || c.value) return;
+      const n = new Set(d.value);
+      for (const t of f(e))
+        i.has(t) || n.add(t), i.add(t);
+      d.value = [...n];
     },
     { immediate: !0 }
   );
-  const o = i(() => a.expandable()?.expandedRowKeys !== void 0), u = i(() => {
+  const o = v(() => {
     const e = a.expandable();
     if (!e) return /* @__PURE__ */ new Set();
-    const t = o.value ? e.expandedRowKeys : n.value;
-    return new Set(t);
+    const n = c.value ? e.expandedRowKeys : d.value;
+    return new Set(n);
   });
   function x(e) {
-    return u.value.has(e);
+    return o.value.has(e);
   }
-  function p(e, t) {
-    const d = a.expandable();
-    if (!d) return;
-    const l = a.getRowKey(e, t), r = !x(l);
-    o.value || (r ? n.value = [...n.value, l] : n.value = n.value.filter((s) => s !== l)), d.onExpand?.(r, e);
-    const c = r ? [...u.value, l] : [...u.value].filter((s) => s !== l);
-    d.onExpandedRowsChange?.(c);
+  function K(e, n) {
+    const t = a.expandable();
+    if (!t) return;
+    const l = a.getRowKey(e, n), r = !x(l), u = c.value ? t.expandedRowKeys ?? [] : d.value, w = r ? [...u, l] : u.filter((R) => R !== l);
+    c.value || (d.value = w), t.onExpand?.(r, e), t.onExpandedRowsChange?.(w);
   }
   return {
     isExpanded: x,
-    toggleExpand: p,
-    expandedKeySet: u
+    toggleExpand: K,
+    expandedKeySet: o
   };
 }
 export {
-  K as useExpand
+  m as useExpand
 };

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

@@ -0,0 +1,15 @@
+import { TablePaginationConfig, TablePaginationState } from '../types/pagination';
+export declare function positiveInteger(value: unknown, fallback: number): number;
+export declare function usePagination<T>(options: {
+    pagination: () => false | TablePaginationConfig | undefined;
+    data: () => T[];
+    onChange: (state: TablePaginationState) => void;
+}): {
+    enabled: import('vue').ComputedRef<boolean>;
+    config: import('vue').ComputedRef<TablePaginationConfig>;
+    state: import('vue').ComputedRef<TablePaginationState>;
+    pageData: import('vue').ComputedRef<T[]>;
+    change: (current: number, pageSize?: number) => void;
+    resetForFilter: () => TablePaginationState | undefined;
+};
+//# sourceMappingURL=usePagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../../../../table/src/composables/usePagination.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAEtF,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAExE;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,OAAO,EAAE;IACxC,UAAU,EAAE,MAAM,KAAK,GAAG,qBAAqB,GAAG,SAAS,CAAA;IAC3D,IAAI,EAAE,MAAM,CAAC,EAAE,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAA;CAChD;;;;;sBAsE0B,MAAM;0BAeJ,oBAAoB,GAAG,SAAS;EAQ5D"}

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

@@ -0,0 +1,65 @@
+import { computed as g, ref as p, watch as f } from "vue";
+function o(r, u) {
+  return typeof r == "number" && Number.isSafeInteger(r) && r > 0 ? r : u;
+}
+function C(r) {
+  const u = g(() => !!r.pagination()), l = g(() => r.pagination() || {}), c = p(1), v = p(10);
+  let d = !1;
+  f(
+    u,
+    (e) => {
+      !e || d || (d = !0, v.value = o(l.value.defaultPageSize, 10), c.value = o(l.value.defaultCurrent, 1));
+    },
+    { immediate: !0, flush: "sync" }
+  );
+  const i = g(() => {
+    const e = l.value, n = o(e.pageSize, v.value), t = o(e.total, r.data().length);
+    return { current: Math.min(
+      o(e.current, c.value),
+      Math.max(1, Math.ceil(t / n))
+    ), pageSize: n, total: t };
+  });
+  f(
+    () => i.value.current,
+    (e) => {
+      u.value && l.value.current === void 0 && (c.value = e);
+    },
+    { flush: "sync" }
+  );
+  const m = g(() => {
+    const e = r.data();
+    if (!u.value) return e;
+    const { current: n, pageSize: t, total: a } = i.value;
+    return e.length < a && e.length <= t ? e : e.slice((n - 1) * t, n * t);
+  });
+  f(
+    () => [u.value, r.data().length, i.value.total, i.value.pageSize],
+    ([e, n, t, a]) => {
+    },
+    { immediate: !0 }
+  );
+  function h(e, n, t) {
+    const a = l.value;
+    a.current === void 0 && (c.value = e), a.pageSize === void 0 && (v.value = n), a["onUpdate:current"]?.(e), t && (a["onUpdate:pageSize"]?.(n), a.onShowSizeChange?.(e, n)), a.onChange?.(e, n);
+  }
+  function z(e, n = i.value.pageSize) {
+    if (!u.value || l.value.disabled) return;
+    const t = i.value, a = o(n, t.pageSize), s = Math.min(
+      o(e, t.current),
+      Math.max(1, Math.ceil(t.total / a))
+    );
+    if (s === t.current && a === t.pageSize) return;
+    const M = { current: s, pageSize: a, total: t.total };
+    h(s, a, a !== t.pageSize), r.onChange(M);
+  }
+  function S() {
+    if (!u.value) return;
+    const e = { ...i.value, current: 1 };
+    return h(1, e.pageSize, !1), e;
+  }
+  return { enabled: u, config: l, state: i, pageData: m, change: z, resetForFilter: S };
+}
+export {
+  o as positiveInteger,
+  C as usePagination
+};

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

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

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

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

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

@@ -6,6 +6,7 @@ export interface UseResizeReturn {
     isResizing: Ref<boolean>;
 }
 export declare function useResize(options: {
+    columns?: () => readonly ColumnType<Record<string, unknown>>[];
     onResizeColumn?: (column: ColumnType<Record<string, unknown>>, width: number) => void;
 }): UseResizeReturn;
 //# sourceMappingURL=useResize.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useResize.d.ts","sourceRoot":"","sources":["../../../../../table/src/composables/useResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,WAAW,EAAE,CACX,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAC3C,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,YAAY,KAChB,IAAI,CAAA;IACT,UAAU,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACzB;AAUD,wBAAgB,SAAS,CAAC,OAAO,EAAE;IACjC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACtF,GAAG,eAAe,CA0ElB"}
+{"version":3,"file":"useResize.d.ts","sourceRoot":"","sources":["../../../../../table/src/composables/useResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAI1C,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,WAAW,EAAE,CACX,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAC3C,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,YAAY,KAChB,IAAI,CAAA;IACT,UAAU,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACzB;AAUD,wBAAgB,SAAS,CAAC,OAAO,EAAE;IACjC,OAAO,CAAC,EAAE,MAAM,SAAS,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAA;IAC9D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACtF,GAAG,eAAe,CA6IlB"}