@vtable-guild/vtable-guild 2.7.1 → 2.8.0

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

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

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

@@ -0,0 +1,28 @@
+import { ColumnType, TableLayout } from '../types';
+import { ColumnMetrics } from './useColumnMetrics';
+type Column = ColumnType<Record<string, unknown>>;
+export interface ColumnLayoutOptions {
+    columns: () => Column[];
+    columnWidths: Record<string, number>;
+    layout: () => TableLayout;
+    split: () => boolean;
+    root: () => HTMLElement | null;
+    viewport: () => HTMLElement | null;
+    scrollX: () => number | string | undefined;
+    onMeasure?: () => void;
+}
+/** Input constraints, allocation and committed browser metrics have separate lifetimes. */
+export declare function useColumnLayout(options: ColumnLayoutOptions): {
+    enabled: import('vue').ComputedRef<boolean>;
+    minimums: import('vue').ComputedRef<number[]>;
+    minimumTotal: import('vue').ComputedRef<number>;
+    metrics: import('vue').ComputedRef<ColumnMetrics | null>;
+    synchronized: import('vue').ComputedRef<boolean>;
+    tableStyle: import('vue').ComputedRef<Record<string, string>>;
+    columnStyle: (index: number, span?: number) => Record<string, string>;
+    overflow: import('vue').ShallowRef<boolean, boolean>;
+    remeasure: () => void;
+};
+export type ColumnLayout = ReturnType<typeof useColumnLayout>;
+export {};
+//# sourceMappingURL=useColumnLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnLayout.d.ts","sourceRoot":"","sources":["../../../../../table/src/composables/useColumnLayout.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACvD,OAAO,EAAuB,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAQ5E,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AAMjD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,MAAM,EAAE,CAAA;IACvB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,MAAM,EAAE,MAAM,WAAW,CAAA;IACzB,KAAK,EAAE,MAAM,OAAO,CAAA;IACpB,IAAI,EAAE,MAAM,WAAW,GAAG,IAAI,CAAA;IAC9B,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAA;IAClC,OAAO,EAAE,MAAM,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC1C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,2FAA2F;AAC3F,wBAAgB,eAAe,CAAC,OAAO,EAAE,mBAAmB;;;;;;;yBAyD9B,MAAM,oBAAa,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;EAsYtE;AAED,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA"}

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"}