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

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

@@ -1,31 +1,32 @@
-import { defineComponent as qe, inject as ze, computed as i, ref as d, watch as Se, nextTick as Ue, onBeforeUnmount as be, createVNode as n, mergeProps as E, Teleport as Ge, isVNode as Xe } from "vue";
+import { defineComponent as Xe, inject as Ye, computed as s, ref as c, watch as ye, onBeforeUnmount as Je, createVNode as a, mergeProps as R, Teleport as Qe, isVNode as Ze } from "vue";
 import "../../../core/src/utils/tv.mjs";
-import we from "../../../core/src/components/Tooltip.mjs";
-import Ye from "../../../icons/src/DownOutlinedIcon.mjs";
-import { SELECTION_ALL as $e, SELECTION_INVERT as Je, SELECTION_NONE as Qe } from "../constants.mjs";
-import { TABLE_CONTEXT_KEY as Ze } from "../context.mjs";
-import { getColumnKey as Z } from "../composables/useColumns.mjs";
-import { useFixedColumnStyle as el } from "../composables/useFixedColumnStyle.mjs";
-import { getCellSpan as ll, omitCellProps as tl, getEllipsisConfig as ol } from "../utils/cell.mjs";
-import { resolvePopupContainer as ee, getPopupPositionStyle as nl } from "../utils/popupPosition.mjs";
-import { ensureValidVNode as rl } from "../utils/vnode.mjs";
-import sl from "./SortButton.mjs";
-import al from "./FilterIcon.mjs";
-import il from "./FilterDropdown.mjs";
-import ul from "./SelectionCheckbox.mjs";
-import cl from "./SelectionDropdown.mjs";
-import { getColumnFilters as le } from "../utils/valueEnum.mjs";
-import fl from "./ResizeHandle.mjs";
-import { TABLE_ALIGN_CLASSES as dl } from "../../../theme/src/presets/antdv/table.mjs";
-import { cn as C } from "tailwind-variants";
-function vl(t) {
-  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !Xe(t);
+import Te from "../../../core/src/components/Tooltip.mjs";
+import el from "../../../icons/src/DownOutlinedIcon.mjs";
+import { SELECTION_ALL as ll, SELECTION_INVERT as tl, SELECTION_NONE as nl } from "../constants.mjs";
+import { TABLE_CONTEXT_KEY as ol } from "../context.mjs";
+import { getColumnKey as Q } from "../composables/useColumns.mjs";
+import { useFixedColumnStyle as al } from "../composables/useFixedColumnStyle.mjs";
+import { useHeaderTitleBalance as rl } from "../composables/useHeaderTitleBalance.mjs";
+import { getCellSpan as sl, omitCellProps as il, getEllipsisConfig as ul } from "../utils/cell.mjs";
+import { resolvePopupContainer as Z, getPopupPositionStyle as cl } from "../utils/popupPosition.mjs";
+import { ensureValidVNode as fl } from "../utils/vnode.mjs";
+import dl from "./SortButton.mjs";
+import vl from "./FilterIcon.mjs";
+import ml from "./FilterDropdown.mjs";
+import pl from "./SelectionCheckbox.mjs";
+import gl from "./SelectionDropdown.mjs";
+import { getColumnFilters as ee } from "../utils/valueEnum.mjs";
+import hl from "./ResizeHandle.mjs";
+import { TABLE_ALIGN_CLASSES as Cl } from "../../../theme/src/presets/antdv/table.mjs";
+import { cn as g } from "tailwind-variants";
+function Sl(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !Ze(t);
 }
-function ml(t) {
+function bl(t) {
   if (t === "ascend") return "ascending";
   if (t === "descend") return "descending";
 }
-const Nl = /* @__PURE__ */ qe({
+const jl = /* @__PURE__ */ Xe({
   name: "TableHeaderCell",
   props: {
     cell: {
@@ -46,177 +47,176 @@ const Nl = /* @__PURE__ */ qe({
     }
   },
   setup(t) {
-    const e = ze(Ze, {}), o = i(() => t.cell.isLeaf ? t.cell.column : null), V = i(() => t.cell.leafIndex >= 0 ? String(t.cell.leafIndex) : void 0), v = i(() => t.cell.column.customHeaderCell?.(t.cell.column, t.index, o.value ?? void 0)), k = i(() => ll(v.value, "colSpan") ?? t.cell.colSpan), B = i(() => t.cell.rowSpan), T = i(() => {
+    const e = Ye(ol, {}), n = s(() => t.cell.isLeaf ? t.cell.column : null), V = s(() => t.cell.leafIndex >= 0 ? String(t.cell.leafIndex) : void 0), p = s(() => t.cell.column.customHeaderCell?.(t.cell.column, t.index, n.value ?? void 0)), O = s(() => sl(p.value, "colSpan") ?? t.cell.colSpan), B = s(() => t.cell.rowSpan), _ = s(() => {
       const {
         onClick: l,
-        ...r
-      } = tl(v.value);
-      return r;
-    }), x = i(() => o.value?.sorter ? e.getSortOrder?.(o.value) ?? null : null), O = i(() => !!o.value?.sorter), b = i(() => o.value?.showSorterTooltip ?? e.showSorterTooltip?.value ?? !0), N = i(() => !o.value || !O.value ? !1 : b.value !== !1), R = i(() => {
-      const l = o.value;
-      return l ? le(l).length > 0 || !!l.customFilterDropdown || !!l.filterDropdown : !1;
-    }), K = i(() => !o.value || !R.value ? [] : e.getFilteredValue?.(o.value) ?? []), w = i(() => {
-      const l = o.value;
+        ...o
+      } = il(p.value);
+      return o;
+    }), x = s(() => n.value?.sorter ? e.getSortOrder?.(n.value) ?? null : null), D = s(() => !!n.value?.sorter), b = s(() => n.value?.showSorterTooltip ?? e.showSorterTooltip?.value ?? !0), N = s(() => !n.value || !D.value ? !1 : b.value !== !1), I = s(() => {
+      const l = n.value;
+      return l ? ee(l).length > 0 || !!l.customFilterDropdown || !!l.filterDropdown : !1;
+    }), le = c(null), te = c(null), ne = c(null), _e = s(() => ne.value?.$el ?? null), xe = s(() => t.cell.column.align === "center" && (D.value || I.value) && e.presetConfig?.value.headerTitleCenter === "cell"), K = s(() => !n.value || !I.value ? [] : e.getFilteredValue?.(n.value) ?? []), w = s(() => {
+      const l = n.value;
       return l ? l.filtered !== void 0 ? l.filtered : K.value.length > 0 : !1;
-    }), te = i(() => o.value?.filterDropdownOpen !== void 0), oe = d(!1), D = i(() => te.value ? o.value?.filterDropdownOpen ?? !1 : oe.value);
-    function g(l) {
-      te.value || (oe.value = l), o.value?.onFilterDropdownOpenChange?.(l);
+    }), oe = s(() => n.value?.filterDropdownOpen !== void 0), ae = c(!1), A = s(() => oe.value ? n.value?.filterDropdownOpen ?? !1 : ae.value);
+    function h(l) {
+      oe.value || (ae.value = l), n.value?.onFilterDropdownOpenChange?.(l);
     }
-    const m = d(null), j = d(null);
+    const d = c(null), j = c(null), De = rl(xe, le, te, d, _e);
     function W() {
-      g(!D.value);
+      h(!A.value);
     }
-    function q(l) {
-      j.value && !j.value.contains(l.target) && !m.value?.contains(l.target) && g(!1);
+    function re(l) {
+      j.value && !j.value.contains(l.target) && !d.value?.contains(l.target) && h(!1);
     }
-    const ye = i(() => {
-      const l = o.value;
+    const Ie = s(() => {
+      const l = n.value;
       return l ? !!l.filterDropdown || !!l.customFilterDropdown && !!e.customFilterDropdown : !1;
     });
-    Se(D, (l) => {
-      l && ye.value ? Ue(() => {
-        document.addEventListener("mousedown", q);
-      }) : document.removeEventListener("mousedown", q);
-    }), be(() => {
-      document.removeEventListener("mousedown", q);
+    ye([A, Ie], ([l, o], u, f) => {
+      !l || !o || (document.addEventListener("mousedown", re), f(() => document.removeEventListener("mousedown", re)));
+    }, {
+      flush: "post",
+      immediate: !0
     });
-    function ne() {
-      return m.value ? m.value.getBoundingClientRect() : {
+    function se() {
+      return d.value ? d.value.getBoundingClientRect() : {
         top: 0,
         left: 0,
         right: 0,
         bottom: 0
       };
     }
-    const I = d([]), re = d(null);
-    Se(() => K.value, (l) => {
-      I.value = [...l];
+    const F = c([]), ie = c(null);
+    ye(() => K.value, (l) => {
+      F.value = [...l];
     }, {
       immediate: !0
     });
-    function se(l, r = !0) {
-      o.value && (e.confirmFilter?.(o.value, l), r && g(!1));
+    function ue(l, o = !0) {
+      n.value && (e.confirmFilter?.(n.value, l), o && h(!1));
     }
-    function _e() {
-      o.value && (e.resetFilter?.(o.value), g(!1));
+    function Ae() {
+      n.value && (e.resetFilter?.(n.value), h(!1));
     }
-    function Te() {
-      g(!1);
+    function Fe() {
+      h(!1);
     }
-    const xe = i(() => {
+    const Me = s(() => {
       const l = t.cell.leafColumns;
       if (!l.length) return null;
-      const r = l[0], u = l[l.length - 1], p = Z(r) ?? t.cell.colStart, a = Z(u) ?? t.cell.colEnd, h = e.fixedOffsets?.value?.get(p), S = e.fixedOffsets?.value?.get(a);
-      return l.every((M) => M.fixed === "left") && h?.left !== void 0 ? {
-        left: h.left,
+      const o = l[0], u = l[l.length - 1], f = Q(o) ?? t.cell.colStart, i = Q(u) ?? t.cell.colEnd, C = e.fixedOffsets?.value?.get(f), S = e.fixedOffsets?.value?.get(i);
+      return l.every((E) => E.fixed === "left") && C?.left !== void 0 ? {
+        left: C.left,
         isLastLeft: S?.isLastLeft
-      } : l.every((M) => M.fixed === "right") && S?.right !== void 0 ? {
+      } : l.every((E) => E.fixed === "right") && S?.right !== void 0 ? {
         right: S.right,
-        isFirstRight: h?.isFirstRight
+        isFirstRight: C?.isFirstRight
       } : null;
     }), {
-      fixedStyle: De,
-      fixedClass: ae
-    } = el({
-      fixedInfo: () => xe.value
-    }), Ie = i(() => {
-      const l = e.themePreset?.value === "antdv", r = e.bordered?.value ?? !1;
-      return !l || r || t.cell.isLeaf ? "" : e.vtgClass?.("before:hidden border-b-0") ?? "";
-    }), Ae = i(() => {
+      fixedStyle: Le,
+      fixedClass: ce
+    } = al({
+      fixedInfo: () => Me.value
+    }), Ee = s(() => {
+      const l = e.themePreset?.value === "antdv", o = e.bordered?.value ?? !1;
+      return !l || o || t.cell.isLeaf ? "" : e.vtgClass?.("before:hidden border-b-0") ?? "";
+    }), ke = s(() => {
       const l = e.leafColumnCount?.value ?? 0;
       return l > 0 && t.cell.colEnd < l - 1 ? e.bordered?.value ?? !1 ? e.vtgClass?.("last:border-r last:border-[color:var(--vtg-table-border-color)]") ?? "" : e.vtgClass?.("last:before:bg-[color:var(--vtg-table-header-split-color)]") ?? "" : "";
-    }), ie = i(() => e.getColumnTitle?.(t.cell.column) ?? t.cell.column.title ?? ""), ue = i(() => {
+    }), fe = s(() => e.getColumnTitle?.(t.cell.column) ?? t.cell.column.title ?? ""), de = s(() => {
       if (!t.cell.isLeaf) return !1;
-      const l = o.value;
-      return !l || !ol(l).enabled ? !1 : e.headerEllipsis?.value === !0;
-    }), Fe = i(() => {
+      const l = n.value;
+      return !l || !ul(l).enabled ? !1 : e.headerEllipsis?.value === !0;
+    }), Re = s(() => {
       if (e.headerCell) {
         const l = e.headerCell({
-          title: ie.value,
+          title: fe.value,
           column: t.cell.column,
           index: t.index
         });
-        if (rl(l) !== null)
+        if (fl(l) !== null)
           return l;
       }
-      return ie.value;
-    }), Me = i(() => {
-      const l = t.cell.column.align ? e.vtgClass?.(dl[t.cell.column.align]) ?? "" : "", r = O.value ? e.subThemeSlots?.thSortable() : "", u = x.value ? e.subThemeSlots?.thSorted() : "", p = o.value?.key === "__vtg_expand__";
-      return C(t.thClass, l, r, u, Ie.value, t.cell.column.className, p ? e.vtgClass?.("before:hidden") : "", v.value?.class, v.value?.className, ae.value, Ae.value, p ? e.compatClass?.("row-expand-icon-cell") : "", ue.value ? e.compatClass?.("cell-ellipsis") : "");
-    }), ce = i(() => {
+      return fe.value;
+    }), Oe = s(() => {
+      const l = t.cell.column.align ? e.vtgClass?.(Cl[t.cell.column.align]) ?? "" : "", o = D.value ? e.subThemeSlots?.thSortable() : "", u = x.value ? e.subThemeSlots?.thSorted() : "", f = n.value?.key === "__vtg_expand__";
+      return g(t.thClass, l, o, u, Ee.value, t.cell.column.className, f ? e.vtgClass?.("before:hidden") : "", p.value?.class, p.value?.className, ce.value, ke.value, f ? e.compatClass?.("row-expand-icon-cell") : "", de.value ? e.compatClass?.("cell-ellipsis") : "");
+    }), ve = s(() => {
       const l = {};
-      if (o.value) {
-        const a = e.columnWidths?.[String(Z(o.value) ?? t.cell.leafIndex)] ?? o.value.width;
-        a && (l.width = typeof a == "number" ? `${a}px` : a);
+      if (n.value) {
+        const i = e.columnWidths?.[String(Q(n.value) ?? t.cell.leafIndex)] ?? n.value.width;
+        i && (l.width = typeof i == "number" ? `${i}px` : i);
       }
-      const r = v.value?.style, u = De.value;
+      const o = p.value?.style, u = Le.value;
       return {
         ...l,
         ...u ?? {},
-        ...r ?? {},
-        ...o.value ? e.columnLayout?.columnStyle(t.cell.leafIndex, k.value) : {}
+        ...o ?? {},
+        ...n.value ? e.columnLayout?.columnStyle(t.cell.leafIndex, O.value) : {}
       };
-    }), H = d(!1), A = d(null);
-    function Le() {
-      return A.value ? A.value.getBoundingClientRect() : {
+    }), H = c(!1), M = c(null);
+    function Ne() {
+      return M.value ? M.value.getBoundingClientRect() : {
         top: 0,
         left: 0,
         right: 0,
         bottom: 0
       };
     }
-    let c = null;
-    function Ee() {
-      c && clearTimeout(c), H.value = !0;
+    let v = null;
+    function He() {
+      v && clearTimeout(v), H.value = !0;
     }
-    function fe() {
-      c && clearTimeout(c), c = setTimeout(() => {
+    function me() {
+      v && clearTimeout(v), v = setTimeout(() => {
         H.value = !1;
       }, 100);
     }
-    function ke() {
-      c && clearTimeout(c);
+    function Pe() {
+      v && clearTimeout(v);
     }
-    function Oe() {
-      c && clearTimeout(c), H.value = !1;
+    function Ve() {
+      v && clearTimeout(v), H.value = !1;
     }
-    const z = d(!1);
-    let U;
-    be(() => clearTimeout(U));
-    function de(l) {
-      clearTimeout(U);
-      const r = b.value, u = typeof r == "object" ? l ? r.mouseEnterDelay : r.mouseLeaveDelay : 0;
-      u && u > 0 ? U = setTimeout(() => {
-        z.value = l;
-      }, u * 1e3) : z.value = l;
+    const q = c(!1);
+    let z;
+    Je(() => clearTimeout(z));
+    function pe(l) {
+      clearTimeout(z);
+      const o = b.value, u = typeof o == "object" ? l ? o.mouseEnterDelay : o.mouseLeaveDelay : 0;
+      u && u > 0 ? z = setTimeout(() => {
+        q.value = l;
+      }, u * 1e3) : q.value = l;
     }
-    const F = d(!1), Ne = i(() => N.value && z.value && !F.value);
-    function Re(l) {
-      const r = T.value.onMouseenter;
-      typeof r == "function" && r(l), N.value && de(!0);
+    const L = c(!1), Be = s(() => N.value && q.value && !L.value);
+    function Ke(l) {
+      const o = _.value.onMouseenter;
+      typeof o == "function" && o(l), N.value && pe(!0);
     }
-    function He(l) {
-      const r = T.value.onMouseleave;
-      typeof r == "function" && r(l), N.value && de(!1);
+    function je(l) {
+      const o = _.value.onMouseleave;
+      typeof o == "function" && o(l), N.value && pe(!1);
     }
-    function G() {
-      F.value = !0;
+    function $() {
+      L.value = !0;
     }
-    function X() {
-      F.value = !1;
+    function U() {
+      L.value = !1;
     }
-    function Y(l) {
-      const r = v.value?.onClick;
-      typeof r == "function" && r(l), o.value && O.value && e.toggleSortOrder?.(o.value);
+    function G(l) {
+      const o = p.value?.onClick;
+      typeof o == "function" && o(l), n.value && D.value && e.toggleSortOrder?.(n.value);
     }
     return () => {
-      if (k.value === 0 || B.value === 0)
+      if (O.value === 0 || B.value === 0)
         return null;
-      const l = k.value !== 1 ? k.value : void 0, r = B.value !== 1 ? B.value : void 0;
-      if (o.value?.key === "__vtg_selection__") {
-        const s = e.rowSelection?.(), f = s?.type === "radio", pe = s?.hideSelectAll === !0, J = s?.selections !== void 0 && s.selections !== !1, y = e.locale?.value, L = s?.columnTitle, je = L !== void 0, Ce = C(t.thClass, e.vtgClass?.(je ? "text-center before:hidden" : "text-center before:hidden leading-[0]"), o.value.className, v.value?.class, v.value?.className, ae.value, e.compatClass?.("selection-column")), ge = ce.value;
-        let Q = [];
-        if (J && (s?.selections === !0 ? Q = [{
+      const l = O.value !== 1 ? O.value : void 0, o = B.value !== 1 ? B.value : void 0;
+      if (n.value?.key === "__vtg_selection__") {
+        const r = e.rowSelection?.(), m = r?.type === "radio", Ce = r?.hideSelectAll === !0, Y = r?.selections !== void 0 && r.selections !== !1, y = e.locale?.value, k = r?.columnTitle, Ue = k !== void 0, Se = g(t.thClass, e.vtgClass?.(Ue ? "text-center before:hidden" : "text-center before:hidden leading-[0]"), n.value.className, p.value?.class, p.value?.className, ce.value, e.compatClass?.("selection-column")), be = ve.value;
+        let J = [];
+        if (Y && (r?.selections === !0 ? J = [{
           key: "__vtg_select_all__",
           text: y?.selection?.selectAll ?? "全选所有",
           onSelect: () => e.toggleAll?.(!0, !0)
@@ -228,212 +228,226 @@ const Nl = /* @__PURE__ */ qe({
           key: "__vtg_select_none__",
           text: y?.selection?.selectNone ?? "清空所有",
           onSelect: () => e.clearSelection?.()
-        }] : Array.isArray(s?.selections) && (Q = s.selections.map((_) => _ === $e ? {
+        }] : Array.isArray(r?.selections) && (J = r.selections.map((T) => T === ll ? {
           key: "__vtg_select_all__",
           text: y?.selection?.selectAll ?? "全选所有",
           onSelect: () => e.toggleAll?.(!0, !0)
-        } : _ === Je ? {
+        } : T === tl ? {
           key: "__vtg_select_invert__",
           text: y?.selection?.selectInvert ?? "反选当页",
           onSelect: () => e.invertSelection?.()
-        } : _ === Qe ? {
+        } : T === nl ? {
           key: "__vtg_select_none__",
           text: y?.selection?.selectNone ?? "清空所有",
           onSelect: () => e.clearSelection?.()
-        } : _))), f)
-          return n("th", E(T.value, {
-            class: Ce,
-            style: ge,
+        } : T))), m)
+          return a("th", R(_.value, {
+            class: Se,
+            style: be,
             colspan: l,
-            rowspan: r,
+            rowspan: o,
             "data-vtg-leaf-col": V.value,
-            onClick: Y
-          }), [L]);
-        const he = e.allCheckedState?.() ?? "none", We = L ? n("span", {
+            onClick: G
+          }), [k]);
+        const we = e.allCheckedState?.() ?? "none", Ge = k ? a("span", {
           class: e.vtgClass?.("ml-2")
-        }, [L]) : null;
-        return n("th", E(T.value, {
-          class: Ce,
-          style: ge,
+        }, [k]) : null;
+        return a("th", R(_.value, {
+          class: Se,
+          style: be,
           colspan: l,
-          rowspan: r,
+          rowspan: o,
           "data-vtg-leaf-col": V.value,
-          onClick: Y
-        }), [pe ? L : n("span", {
-          class: C(e.vtgClass?.("inline-flex items-center justify-center relative"), e.compatClass?.("selection"))
-        }, [n(ul, {
-          checked: he === "all",
-          indeterminate: he === "partial",
-          onChange: (_) => e.toggleAll?.(_)
-        }, null), We, J && n("span", {
-          ref: A,
-          class: C(e.subThemeSlots?.selectionExtra(), e.vtgClass?.("absolute left-full top-1/2 -translate-y-1/2")),
-          onMouseenter: Ee,
-          onMouseleave: fe,
+          onClick: G
+        }), [Ce ? k : a("span", {
+          class: g(e.vtgClass?.("inline-flex items-center justify-center relative"), e.compatClass?.("selection"))
+        }, [a(pl, {
+          checked: we === "all",
+          indeterminate: we === "partial",
+          onChange: (T) => e.toggleAll?.(T)
+        }, null), Ge, Y && a("span", {
+          ref: M,
+          class: g(e.subThemeSlots?.selectionExtra(), e.vtgClass?.("absolute left-full top-1/2 -translate-y-1/2")),
+          onMouseenter: He,
+          onMouseleave: me,
           role: "button",
           "aria-label": "Selection options"
-        }, [n(Ye, null, null)])]), !pe && J && n(cl, {
-          items: Q,
-          anchorElement: A.value,
-          anchorRect: Le(),
-          popupContainer: ee(e, A.value),
+        }, [a(el, null, null)])]), !Ce && Y && a(gl, {
+          items: J,
+          anchorElement: M.value,
+          anchorRect: Ne(),
+          popupContainer: Z(e, M.value),
           visible: H.value,
-          onClose: Oe,
-          onMouseenter: ke,
-          onMouseleave: fe
+          onClose: Ve,
+          onMouseenter: Pe,
+          onMouseleave: me
         }, null)]);
       }
-      const u = e.locale?.value, p = x.value === null ? u?.header.sortTriggerAsc ?? "点击升序" : x.value === "ascend" ? u?.header.sortTriggerDesc ?? "点击降序" : u?.header.cancelSort ?? "取消排序", a = o.value, h = t.cell.column.tooltip, S = typeof h == "string" ? {
-        title: h
-      } : h, M = e.subThemeSlots?.sortAreaWrapper(), Pe = e.subThemeSlots?.sortAreaTitle(), P = n("span", {
-        class: M
-      }, [n("span", {
-        class: C(Pe, ue.value && e.vtgClass?.("block min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"))
-      }, [Fe.value, S && n("span", {
+      const u = e.locale?.value, f = x.value === null ? u?.header.sortTriggerAsc ?? "点击升序" : x.value === "ascend" ? u?.header.sortTriggerDesc ?? "点击降序" : u?.header.cancelSort ?? "取消排序", i = n.value, C = t.cell.column.tooltip, S = typeof C == "string" ? {
+        title: C
+      } : C, E = e.subThemeSlots?.sortAreaWrapper(), We = e.subThemeSlots?.sortAreaTitle(), P = a("span", {
+        class: E,
+        "data-align": t.cell.column.align
+      }, [a("span", {
+        ref: te,
+        "data-align": t.cell.column.align,
+        class: g(We, de.value && e.vtgClass?.("block min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"))
+      }, [Re.value, S && a("span", {
         class: e.subThemeSlots?.headerHelp(),
-        onClick: (s) => s.stopPropagation(),
+        onClick: (r) => r.stopPropagation(),
         onMouseenter: () => {
-          F.value = !0;
+          L.value = !0;
         },
         onMouseleave: () => {
-          F.value = !1;
+          L.value = !1;
         }
-      }, [n(we, E(S, {
+      }, [a(Te, R(S, {
         title: S.title
       }), {
-        default: () => [n("span", null, [n("svg", {
+        default: () => [a("span", null, [a("svg", {
           width: "1em",
           height: "1em",
           viewBox: "0 0 16 16",
           fill: "none",
           stroke: "currentColor",
           "aria-hidden": "true"
-        }, [n("circle", {
+        }, [a("circle", {
           cx: "8",
           cy: "8",
           r: "6"
-        }, null), n("path", {
+        }, null), a("path", {
           d: "M6.2 5.7a1.8 1.8 0 1 1 3 1.3C8.4 7.6 8 8 8 9"
-        }, null), n("path", {
+        }, null), a("path", {
           d: "M8 11h.01"
         }, null)])])]
-      })])]), O.value && n(sl, {
+      })])]), D.value && a(dl, {
+        ref: ne,
         sortOrder: x.value
-      }, null)]), ve = e.subThemeSlots?.sortAreaOuter(), Ve = N.value ? n("span", {
-        class: ve
-      }, [n(we, E({
+      }, null)]), ge = e.subThemeSlots?.sortAreaOuter(), qe = N.value ? a("span", {
+        class: ge,
+        "data-align": t.cell.column.align
+      }, [a(Te, R({
         block: !0,
         placement: "top"
       }, typeof b.value == "object" ? b.value : {}, {
-        title: typeof b.value == "object" ? b.value.title ?? p : p,
-        open: !!Ne.value
-      }), vl(P) ? P : {
+        title: typeof b.value == "object" ? b.value.title ?? f : f,
+        open: !!Be.value
+      }), Sl(P) ? P : {
         default: () => [P]
-      })]) : n("span", {
-        class: ve
-      }, [P]), Be = a && (a.filterIcon ? n("span", {
-        class: C(e.subThemeSlots?.filterIconWrapper(), e.subThemeSlots?.filterIcon(), w.value && e.compatClass && "active"),
-        ref: m,
-        onMouseenter: G,
-        onMouseleave: X,
-        onMousedown: (s) => s.stopPropagation(),
-        onClick: (s) => {
-          s.stopPropagation(), W();
+      })]) : a("span", {
+        class: ge,
+        "data-align": t.cell.column.align
+      }, [P]), ze = i && (i.filterIcon ? a("span", {
+        "data-align": t.cell.column.align,
+        class: g(e.subThemeSlots?.filterIconWrapper(), e.subThemeSlots?.filterIcon(), w.value && e.compatClass && "active"),
+        ref: d,
+        onMouseenter: $,
+        onMouseleave: U,
+        onMousedown: (r) => r.stopPropagation(),
+        onClick: (r) => {
+          r.stopPropagation(), W();
         },
         role: "button",
         "aria-label": u?.header.filterTriggerAriaLabel ?? "筛选"
-      }, [a.filterIcon({
+      }, [i.filterIcon({
         filtered: w.value
-      })]) : e.customFilterIcon ? n("span", {
-        class: C(e.subThemeSlots?.filterIconWrapper(), e.subThemeSlots?.filterIcon(), w.value && e.compatClass && "active"),
-        ref: m,
-        onMouseenter: G,
-        onMouseleave: X,
-        onMousedown: (s) => s.stopPropagation(),
-        onClick: (s) => {
-          s.stopPropagation(), W();
+      })]) : e.customFilterIcon ? a("span", {
+        "data-align": t.cell.column.align,
+        class: g(e.subThemeSlots?.filterIconWrapper(), e.subThemeSlots?.filterIcon(), w.value && e.compatClass && "active"),
+        ref: d,
+        onMouseenter: $,
+        onMouseleave: U,
+        onMousedown: (r) => r.stopPropagation(),
+        onClick: (r) => {
+          r.stopPropagation(), W();
         },
         role: "button",
         "aria-label": u?.header.filterTriggerAriaLabel ?? "筛选"
       }, [e.customFilterIcon({
-        column: a,
+        column: i,
         filtered: w.value
-      })]) : n("span", {
-        ref: m,
+      })]) : a("span", {
+        ref: d,
+        "data-align": t.cell.column.align,
         class: [e.subThemeSlots?.filterIconWrapper(), w.value && e.compatClass && "active"],
-        onMouseenter: G,
-        onMouseleave: X,
-        onMousedown: (s) => s.stopPropagation()
-      }, [n(al, {
+        onMouseenter: $,
+        onMouseleave: U,
+        onMousedown: (r) => r.stopPropagation()
+      }, [a(vl, {
         active: w.value,
         onClick: () => W()
-      }, null)])), $ = a && {
-        column: a,
-        selectedKeys: I.value,
-        setSelectedKeys: (s) => {
-          I.value = [...s];
+      }, null)])), X = i && {
+        column: i,
+        selectedKeys: F.value,
+        setSelectedKeys: (r) => {
+          F.value = [...r];
         },
-        confirm: (s) => {
-          se(I.value, s?.closeDropdown !== !1);
+        confirm: (r) => {
+          ue(F.value, r?.closeDropdown !== !1);
         },
-        clearFilters: (s) => {
-          const f = a.filterResetToDefaultFilteredValue ? [...a.defaultFilteredValue ?? []] : [];
-          I.value = f, s?.confirm !== !1 && e.confirmFilter?.(a, f), s?.closeDropdown !== !1 && g(!1);
+        clearFilters: (r) => {
+          const m = i.filterResetToDefaultFilteredValue ? [...i.defaultFilteredValue ?? []] : [];
+          F.value = m, r?.confirm !== !1 && e.confirmFilter?.(i, m), r?.closeDropdown !== !1 && h(!1);
         },
-        filters: le(a),
-        visible: D.value,
-        close: () => g(!1)
-      }, me = a?.customFilterDropdown ? e.customFilterDropdown : void 0, Ke = a && $ && (() => {
-        const s = typeof a.filterDropdown == "function" ? a.filterDropdown($) : a.filterDropdown ?? (me ? me($) : null);
-        if (s) {
-          const f = ee(e, m.value);
-          return n(Ge, {
-            to: f
+        filters: ee(i),
+        visible: A.value,
+        close: () => h(!1)
+      }, he = i?.customFilterDropdown ? e.customFilterDropdown : void 0, $e = i && X && (() => {
+        const r = typeof i.filterDropdown == "function" ? i.filterDropdown(X) : i.filterDropdown ?? (he ? he(X) : null);
+        if (r) {
+          const m = Z(e, d.value);
+          return a(Qe, {
+            to: m
           }, {
-            default: () => [D.value && n("div", {
+            default: () => [A.value && a("div", {
               ref: j,
               class: e.subThemeSlots?.filterDropdown(),
-              style: nl(ne(), f, 150)
-            }, [s])]
+              style: cl(se(), m, 150)
+            }, [r])]
           });
         }
-        return n(il, {
-          filters: le(a),
+        return a(ml, {
+          filters: ee(i),
           selectedKeys: K.value,
-          multiple: a.filterMultiple !== !1,
-          anchorRect: ne(),
-          popupContainer: ee(e, m.value),
-          filterSearch: a.filterSearch ?? !1,
-          filterMode: a.filterMode ?? "menu",
-          expandedKeys: re.value,
-          visible: D.value,
-          onConfirm: se,
-          onReset: _e,
-          onClose: Te,
-          "onUpdate:expandedKeys": (f) => {
-            re.value = f;
+          multiple: i.filterMultiple !== !1,
+          anchorRect: se(),
+          popupContainer: Z(e, d.value),
+          filterSearch: i.filterSearch ?? !1,
+          filterMode: i.filterMode ?? "menu",
+          expandedKeys: ie.value,
+          visible: A.value,
+          onConfirm: ue,
+          onReset: Ae,
+          onClose: Fe,
+          "onUpdate:expandedKeys": (m) => {
+            ie.value = m;
           }
         }, null);
       })();
-      return n("th", E(T.value, {
-        class: Me.value,
-        style: ce.value,
+      return a("th", R(_.value, {
+        class: Oe.value,
+        style: ve.value,
         colspan: l,
-        rowspan: r,
+        rowspan: o,
         "data-vtg-leaf-col": V.value,
-        onClick: Y,
-        onMouseenter: Re,
-        onMouseleave: He,
-        "aria-sort": o.value ? ml(x.value) : void 0
-      }), [n("span", {
-        class: C(e.vtgClass?.("flex items-center"), t.headerCellInnerClass, R.value && e.compatClass?.("filter-column"))
-      }, [Ve, R.value && Be]), R.value && Ke, o.value?.resizable && n(fl, {
-        column: o.value,
+        onClick: G,
+        onMouseenter: Ke,
+        onMouseleave: je,
+        "aria-sort": n.value ? bl(x.value) : void 0
+      }), [a("span", {
+        ref: le,
+        "data-align": t.cell.column.align,
+        style: {
+          "--vtg-header-title-spacer": `${De.value}px`
+        },
+        class: g(e.vtgClass?.("flex items-center"), t.headerCellInnerClass, I.value && e.compatClass?.("filter-column"))
+      }, [qe, I.value && ze]), I.value && $e, n.value?.resizable && a(hl, {
+        column: n.value,
         colIndex: t.cell.leafIndex
       }, null)]);
     };
   }
 });
 export {
-  Nl as default
+  jl as default
 };