@vtable-guild/vtable-guild 2.7.0 → 2.8.0

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

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