@bridge-ui/vue 0.3.0 → 0.4.0

package/dist/Components/DataTable/composables/useDataTable.js

@@ -1,28 +1,28 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
-import { computed as r, getCurrentInstance as i, onBeforeUnmount as a, ref as ee, useAttrs as te, useSlots as ne } from "vue";
-import { compact as re, fromPairs as ie, get as o, head as s, isArray as ae, isEmpty as oe, isFunction as c, isNil as se, isString as ce, keyBy as le, map as l, omit as ue } from "es-toolkit/compat";
-import { DATATABLE_EXPAND_COLUMN_ID as u, DATATABLE_SELECTION_COLUMN_ID as d, getDataTableAriaSort as de, getDataTableColumnAccessor as f, getDataTableColumnCssWidth as fe, getDataTableColumnFilterValues as pe, getDataTableColumnSearch as me, getDataTableDefaultCellContent as he, getDataTablePaginationAlignClass as ge, getDataTablePaginationVariant as _e, getDataTablePerPageSelectOptions as ve, getDataTableResolvedPageCount as ye, getDataTableResolvedPerPage as be, getDataTableSelectAllState as xe, getDataTableSortIcon as Se, getDataTableStickyInsets as p, getDataTableStickyPing as Ce, isDataTableClientPaged as we, isDataTableColumnFilterable as Te, isDataTableColumnFiltered as Ee, isDataTableColumnSearchable as m, isDataTableColumnSearched as De, isDataTableExpandEnabled as Oe, isDataTablePerPageEnabled as ke, isDataTableSearchEnabled as Ae, isDataTableSelectionEnabled as je, isDataTableSelectionMultiple as Me, isDataTableServerPaged as Ne, isDataTableStickyHeader as Pe, isDataTableStickyHeaderBoxed as Fe, isDataTableVisibilityEnabled as Ie, matchDataTableSearch as Le, resolveDataTableRowId as Re, rowMatchesDataTableColumnSearch as ze, rowSelectionToIds as Be, selectionToRowSelection as Ve, setDataTableColumnFilter as He, setDataTableColumnSearch as Ue, setDataTableRowSelection as We, sliceDataTablePage as Ge, toggleDataTableColumnVisibility as Ke, toggleDataTablePageSelection as qe, toggleDataTableRowExpansion as Je, toggleDataTableSorting as Ye } from "@bridge-ui/core/Domain";
-import { tableVariantProps as Xe } from "@bridge-ui/core/Tokens";
-import { cn as h, mergeBridgeUILayeredClasses as Ze, splitComponentProps as Qe } from "@bridge-ui/core/Utils";
-import { getCoreRowModel as $e, getFilteredRowModel as g, getSortedRowModel as _, useVueTable as et } from "@tanstack/vue-table";
+import { computed as r, getCurrentInstance as i, onBeforeUnmount as a, ref as o, useAttrs as ee, useSlots as te } from "vue";
+import { compact as ne, fromPairs as re, get as s, head as ie, isArray as ae, isEmpty as oe, isFunction as c, isNil as se, isString as ce, keyBy as le, map as l, omit as ue } from "es-toolkit/compat";
+import { DATATABLE_EXPAND_COLUMN_ID as u, DATATABLE_SELECTION_COLUMN_ID as d, getDataTableAriaSort as de, getDataTableColumnAccessor as f, getDataTableColumnCssWidth as fe, getDataTableColumnFilterValues as pe, getDataTableColumnSearch as me, getDataTableDefaultCellContent as he, getDataTablePaginationVariant as ge, getDataTablePerPageSelectOptions as _e, getDataTableResolvedPageCount as ve, getDataTableResolvedPerPage as ye, getDataTableSelectAllState as be, getDataTableSortIcon as xe, getDataTableStickyInsets as Se, getDataTableStickyPing as Ce, isDataTableClientPaged as we, isDataTableColumnFilterable as p, isDataTableColumnFiltered as Te, isDataTableColumnSearchable as Ee, isDataTableColumnSearched as De, isDataTableExpandEnabled as Oe, isDataTablePerPageEnabled as ke, isDataTableSearchEnabled as Ae, isDataTableSelectionEnabled as je, isDataTableSelectionMultiple as Me, isDataTableServerPaged as Ne, isDataTableStickyHeader as Pe, isDataTableStickyHeaderBoxed as Fe, isDataTableVisibilityEnabled as Ie, matchDataTableSearch as Le, observeDataTablePaginationInline as Re, resolveDataTableRowId as ze, rowMatchesDataTableColumnSearch as Be, rowSelectionToIds as Ve, selectionToRowSelection as He, setDataTableColumnFilter as Ue, setDataTableColumnSearch as We, setDataTableRowSelection as Ge, sliceDataTablePage as Ke, toggleDataTableColumnVisibility as qe, toggleDataTablePageSelection as Je, toggleDataTableRowExpansion as Ye, toggleDataTableSorting as Xe } from "@bridge-ui/core/Domain";
+import { tableVariantProps as Ze } from "@bridge-ui/core/Tokens";
+import { cn as m, mergeBridgeUILayeredClasses as Qe, splitComponentProps as $e } from "@bridge-ui/core/Utils";
+import { getCoreRowModel as h, getFilteredRowModel as g, getSortedRowModel as _, useVueTable as et } from "@tanstack/vue-table";
 //#region src/Components/DataTable/composables/useDataTable.ts
-var tt = /* @__PURE__ */ "full.page.rows.size.search.classes.columns.filters.loading.perPage.rounded.sorting.striped.variant.expanded.getRowId.hoverable.pageCount.selection.totalCount.customProps.columnSearch.stickyHeader.hiddenColumns.selectionMode.loadingVariant.perPageOptions.paginationAlign".split(".");
+var tt = /* @__PURE__ */ "full.page.rows.size.search.classes.columns.filters.loading.perPage.rounded.sorting.striped.variant.expanded.getRowId.hoverable.pageCount.selection.totalCount.customProps.columnSearch.stickyHeader.filterOverlay.hiddenColumns.selectionMode.columnsOverlay.loadingVariant.perPageOptions.columnsShowFooter".split(".");
 function v(e) {
 	let t = e.target;
 	return t instanceof Element && !!t.closest("button, input, a");
 }
-var y = {
+var nt = {
 	enableHiding: !1,
 	enableSorting: !1,
 	cell: () => null,
 	header: () => null
-}, nt = [], rt = [], it = [], at = $e(), ot = _(), st = g();
-function b($e, g, _) {
-	let b = te(), x = ne(), ct = i(), S = r(() => Qe({
+}, rt = [], it = [], at = [], ot = h(), st = _(), ct = g();
+function y(h, g, _) {
+	let y = ee(), b = te(), lt = i(), x = r(() => $e({
 		bridgeKeys: tt,
 		props: {
-			...b,
-			...$e,
+			...y,
+			...h,
 			page: _.page.value,
 			perPage: _.perPage.value,
 			filters: _.filters.value,
@@ -32,29 +32,29 @@ function b($e, g, _) {
 			columnSearch: _.columnSearch.value,
 			hiddenColumns: _.hiddenColumns.value
 		}
-	})), { merged: C, components: lt, entry: ut } = t({
+	})), { merged: S, components: ut, entry: dt } = t({
 		libDefaults: g,
 		componentName: "DataTable",
-		props: () => S.value.componentProps
-	}), w = r(() => C.value.customProps), dt = r(() => ue(S.value.inheritedAttrs, ["children"])), T = n({
-		entry: ut,
-		props: () => S.value.componentProps
-	}), ft = r(() => Ze(Xe, o(lt.value, [
+		props: () => x.value.componentProps
+	}), C = r(() => S.value.customProps), ft = r(() => ue(x.value.inheritedAttrs, ["children"])), w = n({
+		entry: dt,
+		props: () => x.value.componentProps
+	}), pt = r(() => Qe(Ze, s(ut.value, [
 		"Table",
 		"tokens",
 		"variant"
-	]))), E = r(() => o(ft.value, C.value.variant)), D = r(() => C.value.columns ?? rt), O = r(() => le(D.value, "id")), pt = r(() => C.value.rows ?? nt), k = r(() => je(_.selection.value, b["onUpdate:selection"] !== void 0)), mt = r(() => Oe(_.expanded.value, b["onUpdate:expanded"] !== void 0, x.expanded !== void 0)), A = r(() => Ie(_.hiddenColumns.value, b["onUpdate:hiddenColumns"] !== void 0)), j = r(() => Me(C.value.selectionMode)), M = r(() => Ne(_.page.value, C.value.pageCount, C.value.totalCount)), N = r(() => we(_.page.value, _.perPage.value, C.value.pageCount, C.value.totalCount)), P = r(() => be(_.perPage.value)), F = r(() => Pe(C.value.stickyHeader)), I = r(() => Fe(C.value.stickyHeader)), L = r(() => _.sorting.value ? [{
+	]))), T = r(() => s(pt.value, S.value.variant)), E = r(() => S.value.columns ?? it), D = r(() => le(E.value, "id")), mt = r(() => S.value.rows ?? rt), O = r(() => je(_.selection.value, y["onUpdate:selection"] !== void 0)), k = r(() => Oe(_.expanded.value, y["onUpdate:expanded"] !== void 0, b.expanded !== void 0)), A = r(() => Ie(_.hiddenColumns.value, y["onUpdate:hiddenColumns"] !== void 0)), ht = r(() => Me(S.value.selectionMode)), j = r(() => Ne(_.page.value, S.value.pageCount, S.value.totalCount)), M = r(() => we(_.page.value, _.perPage.value, S.value.pageCount, S.value.totalCount)), N = r(() => ye(_.perPage.value)), P = r(() => Pe(S.value.stickyHeader)), F = r(() => Fe(S.value.stickyHeader)), gt = r(() => _.sorting.value ? [{
 		id: _.sorting.value.id,
 		desc: _.sorting.value.desc
-	}] : []), ht = r(() => l(_.filters.value ?? {}, (e, t) => ({
+	}] : []), _t = r(() => l(_.filters.value ?? {}, (e, t) => ({
 		id: t,
 		value: e
-	}))), R = r(() => Ve(_.selection.value)), z = r(() => _.hiddenColumns.value ?? it), gt = r(() => ie(z.value.map((e) => [e, !1]))), _t = r(() => {
-		let e = D.value.map((e) => ({
+	}))), vt = r(() => He(_.selection.value)), I = r(() => _.hiddenColumns.value ?? at), yt = r(() => re(I.value.map((e) => [e, !1]))), bt = r(() => {
+		let e = E.value.map((e) => ({
 			id: e.id,
 			enableSorting: e.sortable === !0,
 			enableHiding: e.hideable !== !1,
-			enableColumnFilter: Te(e),
+			enableColumnFilter: p(e),
 			header: () => e.header,
 			cell: (t) => e.cell?.(t.row.original) ?? null,
 			accessorFn: (t) => f(t, e),
@@ -63,52 +63,52 @@ function b($e, g, _) {
 				return oe(r) ? !0 : r.includes(String(e.getValue(t) ?? ""));
 			}
 		}));
-		return re([
-			k.value ? {
-				...y,
+		return ne([
+			O.value ? {
+				...nt,
 				id: d
 			} : void 0,
-			mt.value ? {
-				...y,
+			k.value ? {
+				...nt,
 				id: u
 			} : void 0,
 			...e
 		]);
-	}), B = et({
-		data: pt,
+	}), L = et({
+		data: mt,
 		enableSortingRemoval: !0,
-		getCoreRowModel: at,
+		getCoreRowModel: ot,
 		get columns() {
-			return _t.value;
+			return bt.value;
 		},
 		get manualSorting() {
-			return M.value;
+			return j.value;
 		},
 		get manualFiltering() {
-			return M.value;
+			return j.value;
 		},
 		get enableHiding() {
 			return A.value;
 		},
 		get enableRowSelection() {
-			return k.value;
+			return O.value;
 		},
 		get enableMultiRowSelection() {
-			return j.value;
+			return ht.value;
 		},
 		get getSortedRowModel() {
-			return M.value ? void 0 : ot;
+			return j.value ? void 0 : st;
 		},
-		getRowId: (e, t) => Re(e, t, C.value.getRowId),
+		getRowId: (e, t) => ze(e, t, S.value.getRowId),
 		get getFilteredRowModel() {
-			return M.value ? void 0 : st;
+			return j.value ? void 0 : ct;
 		},
 		onRowSelectionChange: (e) => {
-			let t = c(e) ? e(R.value) : e;
-			_.selection.value = Be(t);
+			let t = c(e) ? e(vt.value) : e;
+			_.selection.value = Ve(t);
 		},
 		onSortingChange: (e) => {
-			let t = c(e) ? e(L.value) : e, n = s(t);
+			let t = c(e) ? e(gt.value) : e, n = ie(t);
 			_.sorting.value = n ? {
 				id: n.id,
 				desc: n.desc
@@ -116,26 +116,26 @@ function b($e, g, _) {
 		},
 		state: {
 			get sorting() {
-				return L.value;
+				return gt.value;
 			},
 			get rowSelection() {
-				return R.value;
+				return vt.value;
 			},
 			get columnFilters() {
-				return ht.value;
+				return _t.value;
 			},
 			get columnVisibility() {
-				return gt.value;
+				return yt.value;
 			}
 		}
-	}), V = r(() => {
-		let e = B.getRowModel().rows;
-		if (M.value) return e;
-		let t = _.search.value ?? "", n = z.value;
-		return e.filter((e) => ze(e.original, D.value, _.columnSearch.value, n) ? t.trim().length === 0 || D.value.some((r) => !n.includes(r.id) && Le(f(e.original, r), t)) : !1);
-	}), H = r(() => N.value ? Ge(V.value, _.page.value ?? 1, P.value) : V.value), U = r(() => l(H.value, "id")), vt = r(() => xe(U.value, _.selection.value ?? [])), W = r(() => {
-		let e = (s(B.getHeaderGroups())?.headers ?? []).map((e) => {
-			let t = o(O.value, e.column.id);
+	}), R = r(() => {
+		let e = L.getRowModel().rows;
+		if (j.value) return e;
+		let t = _.search.value ?? "", n = I.value;
+		return e.filter((e) => Be(e.original, E.value, _.columnSearch.value, n) ? t.trim().length === 0 || E.value.some((r) => !n.includes(r.id) && Le(f(e.original, r), t)) : !1);
+	}), z = r(() => M.value ? Ke(R.value, _.page.value ?? 1, N.value) : R.value), B = r(() => l(z.value, "id")), xt = r(() => be(B.value, _.selection.value ?? [])), V = r(() => {
+		let e = (ie(L.getHeaderGroups())?.headers ?? []).map((e) => {
+			let t = s(D.value, e.column.id);
 			return {
 				column: t,
 				id: e.column.id,
@@ -144,9 +144,9 @@ function b($e, g, _) {
 				isExpand: e.column.id === u,
 				isSelection: e.column.id === d
 			};
-		}), t = p(e, F.value ? 20 : 10);
+		}), t = Se(e, P.value ? 20 : 10);
 		return e.map((e) => {
-			let n = o(t, e.id), r = e.column?.sortable ? de(_.sorting.value ?? null, e.id) : "none";
+			let n = s(t, e.id), r = e.column?.sortable ? de(_.sorting.value ?? null, e.id) : "none";
 			return {
 				ariaSort: r,
 				id: e.id,
@@ -156,36 +156,37 @@ function b($e, g, _) {
 				align: e.column?.align,
 				stickyStyle: n?.style,
 				header: e.column?.header,
+				classes: e.column?.classes,
 				isSelection: e.isSelection,
 				stickyEdge: n?.edge === !0,
 				ellipsis: e.column?.ellipsis === !0,
 				sortable: e.column?.sortable === !0,
-				sortIcon: Se(r),
+				sortIcon: xe(r),
 				hideable: e.column?.hideable !== !1,
 				filterOptions: e.column?.filters ?? [],
-				filterable: Te(e.column),
-				searchable: m(e.column),
+				filterable: p(e.column),
+				searchable: Ee(e.column),
 				filterMultiple: e.column?.filterMultiple !== !1,
 				searchQuery: me(_.columnSearch.value, e.id),
 				filterValues: pe(_.filters.value, e.id),
-				filterActive: Ee(_.filters.value, e.id) || De(_.columnSearch.value, e.id)
+				filterActive: Te(_.filters.value, e.id) || De(_.columnSearch.value, e.id)
 			};
 		});
-	}), G = r(() => {
-		let e = p(W.value.map((e) => ({
+	}), H = r(() => {
+		let e = Se(V.value.map((e) => ({
 			id: e.id,
 			width: e.width,
 			sticky: e.sticky,
 			isExpand: e.isExpand,
 			isSelection: e.isSelection
 		})), 1);
-		return H.value.map((t) => ({
+		return z.value.map((t) => ({
 			id: t.id,
 			original: t.original,
 			expanded: (_.expanded.value ?? []).includes(t.id),
 			selected: (_.selection.value ?? []).includes(t.id),
 			cells: t.getVisibleCells().map((n) => {
-				let r = o(O.value, n.column.id), i = o(e, n.column.id), a = r ? f(t.original, r) : void 0;
+				let r = s(D.value, n.column.id), i = s(e, n.column.id), a = r ? f(t.original, r) : void 0;
 				return {
 					tooltip: r?.ellipsis === !0 && !se(a) && a !== "" ? String(a) : void 0,
 					value: a,
@@ -193,6 +194,7 @@ function b($e, g, _) {
 					width: r?.width,
 					align: r?.align,
 					sticky: i?.sticky,
+					classes: r?.classes,
 					stickyStyle: i?.style,
 					stickyEdge: i?.edge === !0,
 					ellipsis: r?.ellipsis === !0,
@@ -202,95 +204,108 @@ function b($e, g, _) {
 				};
 			})
 		}));
-	}), yt = r(() => W.value.length), bt = r(() => !!x.pagination || !!x.perPage || M.value || N.value), K = r(() => ke(_.perPage.value, ct?.vnode.props?.["onUpdate:perPage"] !== void 0, !!x.perPage)), q = r(() => ye({
+	}), St = r(() => V.value.length), Ct = r(() => !!b.pagination || !!b.perPage || j.value || M.value), U = r(() => ke(_.perPage.value, lt?.vnode.props?.["onUpdate:perPage"] !== void 0, !!b.perPage)), W = r(() => ve({
 		perPage: _.perPage.value,
-		clientPaged: N.value,
-		pageCount: C.value.pageCount,
-		totalCount: C.value.totalCount,
-		filteredCount: V.value.length
-	})), xt = r(() => G.value.length === 0), J = r(() => _e(C.value.variant)), St = r(() => e(w.value?.root, dt.value, { class: h({ [I.value ? "" : o(T.value, "root") ?? ""]: !0 }) })), Ct = r(() => W.value.some((e) => !!e.stickyStyle)), Y = ee({
+		clientPaged: M.value,
+		pageCount: S.value.pageCount,
+		totalCount: S.value.totalCount,
+		filteredCount: R.value.length
+	})), wt = r(() => H.value.length === 0), G = r(() => ge(S.value.variant)), Tt = r(() => e(C.value?.root, ft.value, { class: m({ [F.value ? "" : s(w.value, "root") ?? ""]: !0 }) })), Et = r(() => V.value.some((e) => !!e.stickyStyle)), K = o({
 		end: !1,
 		start: !1
-	}), X;
-	function Z(e) {
+	}), q;
+	function J(e) {
 		let t = e ? Ce(e.scrollLeft, e.scrollWidth, e.clientWidth) : {
 			end: !1,
 			start: !1
 		};
-		(Y.value.end !== t.end || Y.value.start !== t.start) && (Y.value = t);
+		(K.value.end !== t.end || K.value.start !== t.start) && (K.value = t);
+	}
+	function Y(e) {
+		q?.disconnect(), q = void 0, J(e), !(!e || typeof ResizeObserver > "u") && (q = new ResizeObserver(() => {
+			J(e);
+		}), q.observe(e));
 	}
+	let X = o(!1), Z;
 	function Q(e) {
-		X?.disconnect(), X = void 0, Z(e), !(!e || typeof ResizeObserver > "u") && (X = new ResizeObserver(() => {
-			Z(e);
-		}), X.observe(e));
+		Z?.(), Z = void 0, e && (Z = Re(e, (e) => {
+			X.value !== e && (X.value = e);
+		}));
+	}
+	function Dt(e) {
+		let t = e.el;
+		Q(t instanceof HTMLElement ? t : null);
+	}
+	function Ot() {
+		Q(null);
 	}
-	function wt(e) {
-		let t = w.value?.wrapper?.onScroll;
+	function kt(e) {
+		let t = C.value?.wrapper?.onScroll;
 		c(t) && t(e);
 		let n = e.currentTarget;
-		n instanceof HTMLElement && Z(n);
+		n instanceof HTMLElement && J(n);
 	}
-	function Tt(e, t) {
-		let n = w.value?.wrapper?.[e];
+	function At(e, t) {
+		let n = C.value?.wrapper?.[e];
 		c(n) && n(t);
 	}
-	function Et(e) {
-		Tt("onVnodeMounted", e);
+	function jt(e) {
+		At("onVnodeMounted", e);
 		let t = e.el;
-		Q(t instanceof HTMLElement ? t : null);
+		Y(t instanceof HTMLElement ? t : null);
 	}
-	function Dt(e) {
-		Tt("onVnodeUnmounted", e), Q(null);
+	function Mt(e) {
+		At("onVnodeUnmounted", e), Y(null);
 	}
 	a(() => {
-		Q(null);
+		Y(null), Q(null);
 	});
-	let Ot = r(() => ({
-		size: C.value.size,
-		variant: C.value.variant,
-		rounded: C.value.rounded,
-		full: C.value.full !== !1,
-		striped: C.value.striped === !0,
-		stickyHeader: F.value,
-		hoverable: C.value.hoverable === !0,
+	let Nt = r(() => ({
+		size: S.value.size,
+		variant: S.value.variant,
+		rounded: S.value.rounded,
+		full: S.value.full !== !1,
+		striped: S.value.striped === !0,
+		stickyHeader: P.value,
+		hoverable: S.value.hoverable === !0,
 		customProps: {
 			table: {
-				...w.value?.table,
-				"aria-busy": C.value.loading || void 0
+				...C.value?.table,
+				"aria-busy": S.value.loading || void 0
 			},
 			root: {
-				...w.value?.wrapper,
-				onScroll: wt,
-				onVnodeMounted: Et,
-				onVnodeUnmounted: Dt
+				...C.value?.wrapper,
+				onScroll: kt,
+				onVnodeMounted: jt,
+				onVnodeUnmounted: Mt
 			}
 		},
 		classes: {
-			row: o(T.value, "row"),
-			body: o(T.value, "body"),
-			cell: o(T.value, "cell"),
-			head: o(T.value, "head"),
-			header: h({
-				"relative z-40": C.value.loading && C.value.loadingVariant === "bar",
-				[o(T.value, "header") ?? ""]: !0
+			row: s(w.value, "row"),
+			body: s(w.value, "body"),
+			cell: s(w.value, "cell"),
+			head: s(w.value, "head"),
+			header: m({
+				"relative z-40": S.value.loading && S.value.loadingVariant === "bar",
+				[s(w.value, "header") ?? ""]: !0
 			}),
-			table: h({
-				"border-separate border-spacing-0": Ct.value && !F.value,
-				[o(T.value, "table") ?? ""]: !0
+			table: m({
+				"border-separate border-spacing-0": Et.value && !P.value,
+				[s(w.value, "table") ?? ""]: !0
 			}),
-			root: h({
-				"overflow-auto": I.value,
-				[o(T.value, "wrapper") ?? ""]: !0,
-				[I.value ? o(T.value, "root") ?? "" : ""]: !0
+			root: m({
+				"overflow-auto": F.value,
+				[s(w.value, "wrapper") ?? ""]: !0,
+				[F.value ? s(w.value, "root") ?? "" : ""]: !0
 			})
 		}
 	}));
-	function kt(e, t = !1) {
-		let n = fe(e.width, e.isExpand || e.isSelection), r = t && F.value;
+	function Pt(e, t = !1) {
+		let n = fe(e.width, e.isExpand || e.isSelection), r = t && P.value;
 		return {
 			...n ? {
 				width: n,
-				minWidth: n
+				maxWidth: n
 			} : {},
 			...e.stickyStyle,
 			...t && e.stickyStyle && !r ? { zIndex: 20 } : {},
@@ -301,16 +316,16 @@ function b($e, g, _) {
 			} : {}
 		};
 	}
-	function At(e) {
+	function Ft(e) {
 		return e.isSelection || e.isExpand ? "center" : e.align ?? "start";
 	}
-	function jt(e) {
+	function It(e) {
 		return e.isSelection || e.isExpand ? "center" : e.align ?? "start";
 	}
-	function Mt(t) {
+	function Lt(t) {
 		let n = t.isSelection || t.isExpand;
-		return e(w.value?.head, {}, {
-			style: kt(t, !0),
+		return e(C.value?.head, {}, {
+			style: Pt(t, !0),
 			tabindex: t.sortable ? 0 : void 0,
 			"aria-sort": t.sortable ? t.ariaSort : void 0,
 			onClick: t.sortable ? (e) => {
@@ -319,93 +334,107 @@ function b($e, g, _) {
 			onKeydown: t.sortable ? (e) => {
 				v(e) || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), $(t.id));
 			} : void 0,
-			class: h({
+			class: m({
 				"min-w-0": !0,
 				relative: t.sortable,
 				"border-e-0": n,
 				"sticky z-20": !!t.stickyStyle,
 				"after:hidden": n,
 				"cursor-pointer hover:bg-dark-500/10 dark:hover:bg-dark-500/15": t.sortable,
-				[o(E.value, "cellStickyEdgeStart") ?? ""]: t.sticky === "start" && t.stickyEdge && Y.value.start,
-				[o(E.value, "cellStickyEdgeEnd") ?? ""]: t.sticky === "end" && t.stickyEdge && Y.value.end
+				[s(T.value, "cellStickyEdgeStart") ?? ""]: t.sticky === "start" && t.stickyEdge && K.value.start,
+				[s(T.value, "cellStickyEdgeEnd") ?? ""]: t.sticky === "end" && t.stickyEdge && K.value.end,
+				[t.classes?.header ?? ""]: !0
 			})
 		});
 	}
-	function Nt(t) {
+	function Rt(t) {
 		let n = t.isSelection || t.isExpand;
-		return e(w.value?.cell, {}, {
-			style: kt(t),
-			class: h({
+		return e(C.value?.cell, {}, {
+			style: Pt(t),
+			class: m({
 				"min-w-0": !0,
 				"border-e-0": n,
 				"after:hidden": n,
-				[o(E.value, "cellSticky") ?? ""]: !!t.stickyStyle,
-				[o(E.value, "cellStickyEdgeStart") ?? ""]: t.sticky === "start" && t.stickyEdge && Y.value.start,
-				[o(E.value, "cellStickyEdgeEnd") ?? ""]: t.sticky === "end" && t.stickyEdge && Y.value.end
+				[s(T.value, "cellSticky") ?? ""]: !!t.stickyStyle,
+				[s(T.value, "cellStickyEdgeStart") ?? ""]: t.sticky === "start" && t.stickyEdge && K.value.start,
+				[s(T.value, "cellStickyEdgeEnd") ?? ""]: t.sticky === "end" && t.stickyEdge && K.value.end,
+				[t.classes?.cell ?? ""]: !0
 			})
 		});
 	}
-	let Pt = r(() => e(w.value?.toolbar, {}, { class: h({
+	let zt = r(() => e(C.value?.toolbar, {}, { class: m({
 		"flex items-center justify-between gap-3 pb-3": !0,
-		[o(T.value, "toolbar") ?? ""]: !0
-	}) })), Ft = r(() => e(w.value?.empty, {}, { class: h({
+		[s(w.value, "toolbar") ?? ""]: !0
+	}) })), Bt = r(() => e(C.value?.empty, {}, { class: m({
 		"flex flex-col items-center justify-center gap-2 py-12 text-sm text-dark-400 dark:text-dark-500": !0,
-		[o(T.value, "empty") ?? ""]: !0
-	}) })), It = r(() => e(w.value?.loading, {}, { class: h({
+		[s(w.value, "empty") ?? ""]: !0
+	}) })), Vt = r(() => e(C.value?.loading, {}, { class: m({
 		"absolute inset-0 z-30 bg-white/50 dark:bg-dark-900/50": !0,
-		"flex items-center justify-center": C.value.loadingVariant !== "bar",
-		[o(T.value, "loading") ?? ""]: !0
-	}) })), Lt = r(() => e({}, {}, { class: h({ "pointer-events-none absolute inset-x-0 top-0 z-40": !0 }) })), Rt = r(() => e(w.value?.footer, {}, { class: h({
+		"flex items-center justify-center": S.value.loadingVariant !== "bar",
+		[s(w.value, "loading") ?? ""]: !0
+	}) })), Ht = r(() => e({}, {}, { class: m({ "pointer-events-none absolute inset-x-0 top-0 z-40": !0 }) })), Ut = r(() => e({}, {}, { class: m({ "w-fit min-w-0 max-w-full": S.value.full === !1 }) })), Wt = r(() => e(C.value?.footer, {}, { class: m({
+		"w-0 min-w-full": S.value.full === !1,
 		"border-t border-dark-200 bg-dark-50 px-3 py-2.5 text-sm text-dark-600 dark:border-dark-700 dark:bg-dark-800 dark:text-dark-300": !0,
-		[o(T.value, "footer") ?? ""]: !0
-	}) })), zt = r(() => e({}, {}, { class: h({
-		"flex w-full items-center gap-4 py-3": !0,
-		"justify-between": K.value,
-		[ge(C.value.paginationAlign)]: !K.value,
-		[o(T.value, "pagination") ?? ""]: !0
-	}) }));
+		[s(w.value, "footer") ?? ""]: !0
+	}) })), Gt = r(() => e({}, {}, {
+		onVnodeMounted: Dt,
+		onVnodeUnmounted: Ot,
+		class: m({
+			"flex items-center gap-3 py-3 [&>*]:shrink-0": !0,
+			"flex-col justify-center": U.value && !X.value,
+			"flex-row": !U.value || X.value,
+			"justify-end": !U.value,
+			"justify-between": U.value && X.value,
+			"w-full": S.value.full !== !1,
+			"w-0 min-w-full": S.value.full === !1,
+			[s(w.value, "pagination") ?? ""]: !0
+		})
+	}));
 	function $(e) {
-		_.sorting.value = Ye(_.sorting.value ?? null, e);
+		_.sorting.value = Xe(_.sorting.value ?? null, e);
 	}
-	function Bt(e, t) {
-		_.selection.value = We(_.selection.value ?? [], e, t, C.value.selectionMode);
+	function Kt(e, t) {
+		_.selection.value = Ge(_.selection.value ?? [], e, t, S.value.selectionMode);
 	}
-	function Vt(e) {
+	function qt(e) {
 		_.perPage.value = e, _.page.value !== 1 && (_.page.value = 1);
 	}
-	function Ht(e) {
+	function Jt(e) {
 		_.search.value = e, _.page.value !== 1 && (_.page.value = 1);
 	}
-	let Ut = r(() => ({
+	let Yt = r(() => ({
 		page: _.page.value ?? 1,
-		variant: J.value,
-		count: q.value ?? 1,
+		variant: G.value,
+		count: W.value ?? 1,
 		onPageChange: (e) => {
 			_.page.value = e;
 		}
-	})), Wt = r(() => ({
-		perPage: P.value,
-		onPerPageChange: Vt,
-		options: ve(P.value, C.value.perPageOptions)
+	})), Xt = r(() => ({
+		perPage: N.value,
+		onPerPageChange: qt,
+		options: _e(N.value, S.value.perPageOptions)
 	}));
-	function Gt(e) {
-		_.selection.value = qe(_.selection.value ?? [], U.value, e);
+	function Zt(e) {
+		_.selection.value = Je(_.selection.value ?? [], B.value, e);
+	}
+	function Qt(e, t, n) {
+		let r = s(D.value, e);
+		r?.filters && r.filters.length > 0 && (_.filters.value = Ue(_.filters.value, e, t)), Ee(r) && (_.columnSearch.value = We(_.columnSearch.value, e, n)), _.page.value !== 1 && (_.page.value = 1);
 	}
-	function Kt(e, t, n) {
-		let r = o(O.value, e);
-		r?.filters && r.filters.length > 0 && (_.filters.value = He(_.filters.value, e, t)), m(r) && (_.columnSearch.value = Ue(_.columnSearch.value, e, n)), _.page.value !== 1 && (_.page.value = 1);
+	function $t(e, t) {
+		_.expanded.value = Ye(_.expanded.value ?? [], e, t);
 	}
-	function qt(e, t) {
-		_.expanded.value = Je(_.expanded.value ?? [], e, t);
+	function en(e, t) {
+		_.hiddenColumns.value = qe(_.hiddenColumns.value ?? [], e, t, l(E.value, "id"));
 	}
-	function Jt(e, t) {
-		_.hiddenColumns.value = Ke(_.hiddenColumns.value ?? [], e, t, l(D.value, "id"));
+	function tn(e) {
+		_.hiddenColumns.value = e;
 	}
-	let Yt = r(() => {
-		if (!D.value.some((e) => e.summary !== void 0)) return null;
-		let e = l(V.value, "original");
-		return W.value.map((t) => {
-			let n = o(O.value, t.id);
+	let nn = r(() => {
+		if (!E.value.some((e) => e.summary !== void 0)) return null;
+		let e = l(R.value, "original");
+		return V.value.map((t) => {
+			let n = s(D.value, t.id);
 			return {
 				id: t.id,
 				ellipsis: !1,
@@ -414,6 +443,7 @@ function b($e, g, _) {
 				width: t.width,
 				align: t.align,
 				sticky: t.sticky,
+				classes: t.classes,
 				isExpand: t.isExpand,
 				stickyEdge: t.stickyEdge,
 				stickyStyle: t.stickyStyle,
@@ -421,59 +451,61 @@ function b($e, g, _) {
 				content: t.isSelection || t.isExpand ? null : n?.summary?.(e) ?? null
 			};
 		});
-	}), Xt = r(() => D.value.map((e) => ({
+	}), rn = r(() => E.value.map((e) => ({
 		id: e.id,
 		hideable: e.hideable !== !1,
-		hidden: z.value.includes(e.id),
+		hidden: I.value.includes(e.id),
 		label: ce(e.header) ? e.header : e.id
-	}))), Zt = r(() => Ae(_.search.value, ct?.vnode.props?.["onUpdate:search"] !== void 0, x.search !== void 0));
+	}))), an = r(() => Ae(_.search.value, lt?.vnode.props?.["onUpdate:search"] !== void 0, b.search !== void 0));
 	return {
-		merged: C,
-		pageIds: U,
-		rowViews: G,
-		rootBind: St,
-		emptyBind: Ft,
-		showEmpty: xt,
-		tableProps: Ot,
-		footerBind: Rt,
-		showSearch: Zt,
-		getHeadBind: Mt,
-		headerViews: W,
-		loadingBind: It,
-		onToggleRow: Bt,
-		toolbarBind: Pt,
-		getCellBind: Nt,
-		columnCount: yt,
-		clientPaged: N,
-		serverPaged: M,
-		showPerPage: K,
-		showToolbar: r(() => !!x.toolbar || !!x.toolbarActions || A.value || Zt.value),
-		getHeadAlign: At,
-		getCellAlign: jt,
-		onTogglePage: Gt,
+		merged: S,
+		pageIds: B,
+		rowViews: H,
+		rootBind: Tt,
+		emptyBind: Bt,
+		showEmpty: wt,
+		frameBind: Ut,
+		tableProps: Nt,
+		footerBind: Wt,
+		showSearch: an,
+		getHeadBind: Lt,
+		headerViews: V,
+		loadingBind: Vt,
+		onToggleRow: Kt,
+		toolbarBind: zt,
+		getCellBind: Rt,
+		columnCount: St,
+		clientPaged: M,
+		serverPaged: j,
+		showPerPage: U,
+		showToolbar: r(() => !!b.toolbar || !!b.toolbarActions || A.value || an.value),
+		getHeadAlign: Ft,
+		getCellAlign: It,
+		onTogglePage: Zt,
 		onToggleSort: $,
-		summaryCells: Yt,
-		expandEnabled: mt,
-		onChangeSearch: Ht,
-		loadingBarBind: Lt,
-		paginationBind: zt,
-		selectAllState: vt,
-		showPagination: bt,
-		onToggleExpand: qt,
-		visibilityItems: Xt,
-		onChangePerPage: Vt,
-		resolvedPerPage: P,
-		selectionEnabled: k,
-		perPageSlotProps: Wt,
-		paginationVariant: J,
-		resolvedPageCount: q,
-		selectionMultiple: j,
+		summaryCells: nn,
+		expandEnabled: k,
+		onChangeSearch: Jt,
+		loadingBarBind: Ht,
+		paginationBind: Gt,
+		selectAllState: xt,
+		showPagination: Ct,
+		onToggleExpand: $t,
+		visibilityItems: rn,
+		onChangePerPage: qt,
+		resolvedPerPage: N,
+		selectionEnabled: O,
+		perPageSlotProps: Xt,
+		paginationVariant: G,
+		resolvedPageCount: W,
+		selectionMultiple: ht,
 		visibilityEnabled: A,
-		paginationSlotProps: Ut,
-		onCommitColumnFilter: Kt,
-		onToggleColumnVisibility: Jt,
-		loadingBar: r(() => C.value.loadingVariant === "bar")
+		paginationSlotProps: Yt,
+		onCommitColumnFilter: Qt,
+		onHiddenColumnsChange: tn,
+		onToggleColumnVisibility: en,
+		loadingBar: r(() => S.value.loadingVariant === "bar")
 	};
 }
 //#endregion
-export { b as useDataTable };
+export { y as useDataTable };