@bridge-ui/vue 0.6.0 → 0.8.0

package/dist/Components/DataTable/DataTable.vue_vue_type_script_setup_true_lang.js

@@ -3,12 +3,12 @@ import { hasNamedSlot as t } from "../../Utils/slotOrProp.js";
 import n from "../Icon/Icon.js";
 import ee from "../Progress/Progress.js";
 import te from "../EmptyState/EmptyState.js";
-import ne from "../Pagination/Pagination.js";
-import re from "../Select/Select.js";
+import ne from "../Select/Select.js";
 import { useDataTable as r } from "./composables/useDataTable.js";
-import ie from "./DataTableCellContent.js";
-import ae from "./DataTableColumnsMenu.js";
-import oe from "./DataTableFilterMenu.js";
+import re from "./DataTableCellContent.js";
+import ie from "./DataTableColumnsMenu.js";
+import ae from "./DataTableFilterMenu.js";
+import oe from "./DataTablePagination.js";
 import se from "./DataTableSearch.js";
 import i from "./DataTableSelection.js";
 import ce from "./DataTableSortButton.js";
@@ -19,16 +19,26 @@ import de from "../Table/TableFooter.js";
 import fe from "../Table/TableHead.js";
 import pe from "../Table/TableHeader.js";
 import o from "../Table/TableRow.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, guardReactiveProps as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, renderList as x, renderSlot as S, toDisplayString as me, unref as C, useId as he, useModel as w, useSlots as ge, withCtx as T } from "vue";
-import { cn as E } from "@bridge-ui/core/Utils";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as me, createVNode as p, defineComponent as m, guardReactiveProps as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, renderList as x, renderSlot as S, toDisplayString as C, unref as w, useId as he, useModel as T, useSlots as ge, withCtx as E } from "vue";
+import { cn as D } from "@bridge-ui/core/Utils";
 //#region src/Components/DataTable/DataTable.vue?vue&type=script&setup=true&lang.ts
 var _e = { class: "min-w-0 flex-1" }, ve = { class: "flex shrink-0 items-center gap-2" }, ye = {
 	key: 0,
 	class: "inline-flex items-center rounded-lg border border-dark-200 bg-white p-0.5 dark:border-dark-700 dark:bg-dark-900"
-}, be = { class: "relative" }, D = {
+}, be = { class: "relative" }, xe = {
 	key: 1,
 	class: "flex w-full min-w-0 items-center gap-1.5 leading-none"
-}, O = { class: "min-w-0 truncate leading-none" }, k = ["aria-expanded", "onClick"], A = ["aria-hidden"], j = { class: "min-h-0 overflow-hidden" }, M = { class: "p-3" }, N = ["aria-hidden"], xe = { class: "flex shrink-0 items-center gap-2" }, Se = { class: "text-sm whitespace-nowrap text-dark-500 dark:text-dark-400" }, P = /*@__PURE__*/ m({
+}, O = { class: "min-w-0 truncate leading-none" }, k = [
+	"aria-expanded",
+	"aria-label",
+	"onClick"
+], A = ["aria-hidden"], j = { class: "min-h-0 overflow-hidden" }, M = { class: "p-3" }, Se = ["aria-hidden"], Ce = ["aria-label"], we = { class: "flex shrink-0 items-center gap-2" }, Te = { class: "text-sm whitespace-nowrap" }, Ee = {
+	key: 2,
+	class: "flex shrink-0 items-center gap-3"
+}, De = {
+	key: 0,
+	class: "text-sm font-medium whitespace-nowrap"
+}, N = /*@__PURE__*/ m({
 	inheritAttrs: !1,
 	__name: "DataTable",
 	props: /*@__PURE__*/ g({
@@ -103,7 +113,7 @@ var _e = { class: "min-w-0 flex-1" }, ve = { class: "flex shrink-0 items-center
 		"update:columnSearch"
 	],
 	setup(m) {
-		let g = m, P = ge(), F = e(), I = w(m, "page"), Ce = w(m, "perPage"), L = w(m, "search"), we = w(m, "expanded"), Te = w(m, "selection"), Ee = w(m, "filters"), De = w(m, "sorting"), Oe = w(m, "hiddenColumns"), ke = w(m, "columnSearch"), { merged: R, rowViews: Ae, rootBind: je, emptyBind: Me, showEmpty: z, frameBind: Ne, tableProps: Pe, footerBind: Fe, loadingBar: B, showSearch: Ie, getHeadBind: Le, headerViews: Re, loadingBind: ze, onToggleRow: Be, toolbarBind: Ve, getCellBind: V, columnCount: H, showPerPage: He, showToolbar: Ue, getHeadAlign: We, getCellAlign: U, onTogglePage: Ge, onToggleSort: Ke, summaryCells: W, expandEnabled: qe, loadingBarBind: Je, paginationBind: Ye, selectAllState: G, showPagination: Xe, onChangeSearch: Ze, onToggleExpand: Qe, visibilityItems: $e, perPageSlotProps: K, resolvedPageCount: q, selectionMultiple: J, visibilityEnabled: et, paginationSlotProps: Y, onCommitColumnFilter: X, onHiddenColumnsChange: tt } = r(g, {
+		let g = m, N = ge(), P = e(), F = T(m, "page"), I = T(m, "perPage"), L = T(m, "search"), Oe = T(m, "expanded"), ke = T(m, "selection"), Ae = T(m, "filters"), je = T(m, "sorting"), Me = T(m, "hiddenColumns"), Ne = T(m, "columnSearch"), { merged: R, rowViews: Pe, rootBind: Fe, emptyBind: Ie, showEmpty: z, frameBind: Le, showPager: Re, tableProps: ze, footerBind: Be, loadingBar: B, showSearch: Ve, getHeadBind: He, headerViews: Ue, loadingBind: We, onToggleRow: Ge, toolbarBind: Ke, getCellBind: V, columnCount: H, showPerPage: qe, showToolbar: Je, selectedBind: Ye, showSelected: Xe, getHeadAlign: Ze, getCellAlign: U, onTogglePage: Qe, onToggleSort: $e, summaryCells: W, showFooterBar: et, expandEnabled: tt, loadingBarBind: nt, paginationBind: rt, selectAllState: G, onChangeSearch: it, onToggleExpand: at, visibilityItems: ot, perPageSlotProps: K, selectedSlotProps: q, resolvedPageCount: J, selectionMultiple: Y, visibilityEnabled: st, paginationSlotProps: X, onCommitColumnFilter: ct, onHiddenColumnsChange: lt } = r(g, {
 			size: "md",
 			full: !0,
 			rounded: "lg",
@@ -117,18 +127,24 @@ var _e = { class: "min-w-0 flex-1" }, ve = { class: "flex shrink-0 items-center
 			selectionMode: "multiple",
 			loadingVariant: "overlay"
 		}, {
-			page: I,
+			page: F,
 			search: L,
-			perPage: Ce,
-			filters: Ee,
-			sorting: De,
-			expanded: we,
-			selection: Te,
-			columnSearch: ke,
-			hiddenColumns: Oe
-		}), Z = c(() => R.value.size === "lg" ? "md" : "sm");
-		function nt(e, t) {
-			let n = P[`item.${t.id}`] ?? P.item;
+			perPage: I,
+			filters: Ae,
+			sorting: je,
+			expanded: Oe,
+			selection: ke,
+			columnSearch: Ne,
+			hiddenColumns: Me
+		}), Z = c(() => R.value.size === "lg" ? "md" : "sm"), ut = c(() => P("{{selected}} of {{total}} row(s) selected.", q.value.selectedCount, {
+			total: q.value.totalCount,
+			selected: q.value.selectedCount
+		})), dt = c(() => P("Page {{page}} of {{count}}", {
+			page: X.value.page,
+			count: X.value.count
+		}));
+		function ft(e, t) {
+			let n = N[`item.${t.id}`] ?? N.item;
 			return n ? n({
 				id: t.id,
 				row: e.original,
@@ -136,14 +152,19 @@ var _e = { class: "min-w-0 flex-1" }, ve = { class: "flex shrink-0 items-center
 			}) : t.content;
 		}
 		let Q = c({
-			get: () => I.value ?? 1,
+			get: () => F.value ?? 1,
 			set: (e) => {
-				I.value = e;
+				F.value = e;
 			}
-		}), rt = c(() => K.value.options.map((e) => ({
+		}), pt = c(() => K.value.options.map((e) => ({
 			value: e,
 			label: String(e)
-		}))), it = c(() => {
+		})));
+		function mt(e) {
+			let t = Number(e);
+			!Number.isFinite(t) || t < 1 || K.value.onPerPageChange(t);
+		}
+		let ht = c(() => {
 			let e = R.value.customProps?.perPage?.customProps;
 			return {
 				...e,
@@ -159,13 +180,13 @@ var _e = { class: "min-w-0 flex-1" }, ve = { class: "flex shrink-0 items-center
 					}
 				}
 			};
-		}), at = he(), $ = (e) => e.node ?? null;
-		return (e, r) => (b(), d("div", y(h(C(je))), [C(Ue) ? (b(), d("div", y(_({ key: 0 }, C(Ve))), [f("div", _e, [S(e.$slots, "toolbar")]), f("div", ve, [
-			C(et) ? (b(), d("div", ye, [p(ae, {
-				items: C($e),
-				overlay: C(R).columnsOverlay,
-				onChange: C(tt),
-				"show-footer": C(R).columnsShowFooter
+		}), gt = he(), $ = (e) => e.node ?? null;
+		return (e, r) => (b(), d("div", y(h(w(Fe))), [w(Je) ? (b(), d("div", y(_({ key: 0 }, w(Ke))), [f("div", _e, [S(e.$slots, "toolbar")]), f("div", ve, [
+			w(st) ? (b(), d("div", ye, [p(ie, {
+				items: w(ot),
+				overlay: w(R).columnsOverlay,
+				onChange: w(lt),
+				"show-footer": w(R).columnsShowFooter
 			}, null, 8, [
 				"items",
 				"overlay",
@@ -173,56 +194,56 @@ var _e = { class: "min-w-0 flex-1" }, ve = { class: "flex shrink-0 items-center
 				"show-footer"
 			])])) : u("", !0),
 			S(e.$slots, "toolbarActions"),
-			C(Ie) ? S(e.$slots, "search", {}, () => [p(se, {
+			w(Ve) ? S(e.$slots, "search", {}, () => [p(se, {
 				"model-value": L.value ?? "",
-				"onUpdate:modelValue": C(Ze),
-				"field-props": C(R).customProps?.search
+				"onUpdate:modelValue": w(it),
+				"field-props": w(R).customProps?.search
 			}, null, 8, [
 				"model-value",
 				"onUpdate:modelValue",
 				"field-props"
 			])], void 0, 1) : u("", !0)
-		])], 16)) : u("", !0), f("div", y(h(C(Ne))), [
-			f("div", be, [p(C(le), y(h(C(Pe))), {
-				default: T(() => [
-					p(C(pe), y(h(C(R).customProps?.header)), {
-						default: T(() => [p(C(o), y(h(C(R).customProps?.row)), {
-							default: T(() => [(b(!0), d(s, null, x(C(Re), (e) => (b(), l(C(fe), _({
+		])], 16)) : u("", !0), f("div", y(h(w(Le))), [
+			f("div", be, [p(w(le), y(h(w(ze))), {
+				default: E(() => [
+					p(w(pe), y(h(w(R).customProps?.header)), {
+						default: E(() => [p(w(o), y(h(w(R).customProps?.row)), {
+							default: E(() => [(b(!0), d(s, null, x(w(Ue), (e) => (b(), l(w(fe), _({
 								key: e.id,
-								align: C(We)(e)
-							}, { ref_for: !0 }, C(Le)(e)), {
-								default: T(() => [e.isSelection && C(J) ? (b(), l(i, {
+								align: w(Ze)(e)
+							}, { ref_for: !0 }, w(He)(e)), {
+								default: E(() => [e.isSelection && w(Y) ? (b(), l(i, {
 									key: 0,
 									kind: "page",
 									size: Z.value,
-									onChange: C(Ge),
-									checked: C(G).checked,
-									indeterminate: C(G).indeterminate,
-									"checkbox-props": C(R).customProps?.checkbox
+									onChange: w(Qe),
+									checked: w(G).checked,
+									indeterminate: w(G).indeterminate,
+									"checkbox-props": w(R).customProps?.checkbox
 								}, null, 8, [
 									"size",
 									"onChange",
 									"checked",
 									"indeterminate",
 									"checkbox-props"
-								])) : !e.isSelection && !e.isExpand ? (b(), d("div", D, [
+								])) : !e.isSelection && !e.isExpand ? (b(), d("div", xe, [
 									f("span", O, [p($, { node: e.header }, null, 8, ["node"])]),
 									e.sortable ? (b(), l(ce, {
 										key: 0,
 										sort: e.ariaSort,
-										onClick: (t) => C(Ke)(e.id)
+										onClick: (t) => w($e)(e.id)
 									}, null, 8, ["sort", "onClick"])) : u("", !0),
-									e.filterable ? (b(), l(oe, {
+									e.filterable ? (b(), l(ae, {
 										key: 1,
 										"column-id": e.id,
 										active: e.filterActive,
 										values: e.filterValues,
-										overlay: C(R).filterOverlay,
+										overlay: w(R).filterOverlay,
 										options: e.filterOptions,
 										searchable: e.searchable,
 										multiple: e.filterMultiple,
 										"search-value": e.searchQuery,
-										onApply: (t, n) => C(X)(e.id, t, n)
+										onApply: (t, n) => w(ct)(e.id, t, n)
 									}, null, 8, [
 										"column-id",
 										"active",
@@ -238,54 +259,54 @@ var _e = { class: "min-w-0 flex-1" }, ve = { class: "flex shrink-0 items-center
 								_: 2
 							}, 1040, ["align"]))), 128))]),
 							_: 1
-						}, 16), C(R).loading && C(B) ? (b(), l(C(o), {
+						}, 16), w(R).loading && w(B) ? (b(), l(w(o), {
 							key: 0,
 							classes: { root: "h-0" }
 						}, {
-							default: T(() => [p(C(a), {
-								colspan: C(H),
+							default: E(() => [p(w(a), {
+								colspan: w(H),
 								classes: { root: "relative h-0 border-0 p-0 after:hidden" }
 							}, {
-								default: T(() => [f("div", y(h(C(Je))), [S(e.$slots, "loading", {}, () => [p(C(ee), _({
+								default: E(() => [f("div", y(h(w(nt))), [S(e.$slots, "loading", {}, () => [p(w(ee), _({
 									size: "xs",
 									rounded: "none"
-								}, C(R).customProps?.progress), null, 16)])], 16)]),
+								}, w(R).customProps?.progress), null, 16)])], 16)]),
 								_: 3
 							}, 8, ["colspan"])]),
 							_: 3
 						})) : u("", !0)]),
 						_: 3
 					}, 16),
-					p(C(ue), y(h(C(R).customProps?.body)), {
-						default: T(() => [C(z) ? (b(), l(C(o), { key: 0 }, {
-							default: T(() => [p(C(a), {
+					p(w(ue), y(h(w(R).customProps?.body)), {
+						default: E(() => [w(z) ? (b(), l(w(o), { key: 0 }, {
+							default: E(() => [p(w(a), {
 								align: "center",
-								colspan: C(H)
+								colspan: w(H)
 							}, {
-								default: T(() => [f("div", y(h(C(Me))), [S(e.$slots, "empty", {}, () => [p(C(te), {
+								default: E(() => [f("div", y(h(w(Ie))), [S(e.$slots, "empty", {}, () => [p(w(te), {
 									icon: "inbox",
-									size: C(R).size,
-									title: C(F)("No data")
+									size: w(R).size,
+									title: w(P)("No data")
 								}, null, 8, ["size", "title"])])], 16)]),
 								_: 3
 							}, 8, ["colspan"])]),
 							_: 3
-						})) : u("", !0), C(z) ? u("", !0) : (b(!0), d(s, { key: 1 }, x(C(Ae), (t) => (b(), d(s, { key: t.id }, [p(C(o), _({ ref_for: !0 }, C(R).customProps?.row), {
-							default: T(() => [(b(!0), d(s, null, x(t.cells, (e) => (b(), l(C(a), _({
+						})) : u("", !0), w(z) ? u("", !0) : (b(!0), d(s, { key: 1 }, x(w(Pe), (t) => (b(), d(s, { key: t.id }, [p(w(o), _({ ref_for: !0 }, w(R).customProps?.row), {
+							default: E(() => [(b(!0), d(s, null, x(t.cells, (e) => (b(), l(w(a), _({
 								key: e.id,
-								align: C(U)(e)
-							}, { ref_for: !0 }, C(V)(e)), {
-								default: T(() => [e.isSelection ? (b(), l(i, {
+								align: w(U)(e)
+							}, { ref_for: !0 }, w(V)(e)), {
+								default: E(() => [e.isSelection ? (b(), l(i, {
 									key: 0,
 									kind: "row",
 									value: t.id,
 									size: Z.value,
-									name: C(at),
+									name: w(gt),
 									checked: t.selected,
-									multiple: C(J),
-									"radio-props": C(R).customProps?.radio,
-									"checkbox-props": C(R).customProps?.checkbox,
-									onChange: (e) => C(Be)(t.id, e)
+									multiple: w(Y),
+									"radio-props": w(R).customProps?.radio,
+									"checkbox-props": w(R).customProps?.checkbox,
+									onChange: (e) => w(Ge)(t.id, e)
 								}, null, 8, [
 									"value",
 									"size",
@@ -298,35 +319,35 @@ var _e = { class: "min-w-0 flex-1" }, ve = { class: "flex shrink-0 items-center
 								])) : e.isExpand ? (b(), d("button", {
 									key: 1,
 									type: "button",
-									"aria-label": "Expand row",
 									"aria-expanded": t.expanded,
-									onClick: (e) => C(Qe)(t.id, !t.expanded),
+									"aria-label": w(P)("Expand row"),
+									onClick: (e) => w(at)(t.id, !t.expanded),
 									class: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm leading-none hover:bg-dark-500/10 dark:hover:bg-dark-500/15"
-								}, [f("span", { class: v([{ "rotate-90": t.expanded }, "inline-flex transition-transform duration-200 motion-reduce:transition-none"]) }, [p(C(n), {
+								}, [f("span", { class: v([{ "rotate-90": t.expanded }, "inline-flex transition-transform duration-200 motion-reduce:transition-none"]) }, [p(w(n), {
 									size: "sm",
 									icon: "chevronRight"
-								})], 2)], 8, k)) : (b(), l(ie, {
+								})], 2)], 8, k)) : (b(), l(re, {
 									key: 2,
 									tooltip: e.tooltip,
 									ellipsis: e.ellipsis
 								}, {
-									default: T(() => [p($, { node: nt(t, e) }, null, 8, ["node"])]),
+									default: E(() => [p($, { node: ft(t, e) }, null, 8, ["node"])]),
 									_: 2
 								}, 1032, ["tooltip", "ellipsis"]))]),
 								_: 2
 							}, 1040, ["align"]))), 128))]),
 							_: 2
-						}, 1040), C(qe) ? (b(), l(C(o), { key: 0 }, {
-							default: T(() => [p(C(a), {
-								colspan: C(H),
-								classes: { root: C(E)({
+						}, 1040), w(tt) ? (b(), l(w(o), { key: 0 }, {
+							default: E(() => [p(w(a), {
+								colspan: w(H),
+								classes: { root: w(D)({
 									"p-0": !0,
 									"border-0": !t.expanded
 								}) }
 							}, {
-								default: T(() => [f("div", {
+								default: E(() => [f("div", {
 									"aria-hidden": !t.expanded,
-									class: v(C(E)({
+									class: v(w(D)({
 										"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none": !0,
 										"grid-rows-[1fr]": t.expanded,
 										"grid-rows-[0fr]": !t.expanded
@@ -338,13 +359,13 @@ var _e = { class: "min-w-0 flex-1" }, ve = { class: "flex shrink-0 items-center
 						}, 1024)) : u("", !0)], 64))), 128))]),
 						_: 3
 					}, 16),
-					C(W) ? (b(), l(C(de), { key: 0 }, {
-						default: T(() => [p(C(o), y(h(C(R).customProps?.row)), {
-							default: T(() => [(b(!0), d(s, null, x(C(W), (e) => (b(), l(C(a), _({
+					w(W) ? (b(), l(w(de), { key: 0 }, {
+						default: E(() => [p(w(o), y(h(w(R).customProps?.row)), {
+							default: E(() => [(b(!0), d(s, null, x(w(W), (e) => (b(), l(w(a), _({
 								key: e.id,
-								align: C(U)(e)
-							}, { ref_for: !0 }, C(V)(e)), {
-								default: T(() => [p($, { node: e.content }, null, 8, ["node"])]),
+								align: w(U)(e)
+							}, { ref_for: !0 }, w(V)(e)), {
+								default: E(() => [p($, { node: e.content }, null, 8, ["node"])]),
 								_: 2
 							}, 1040, ["align"]))), 128))]),
 							_: 1
@@ -353,48 +374,50 @@ var _e = { class: "min-w-0 flex-1" }, ve = { class: "flex shrink-0 items-center
 					})) : u("", !0)
 				]),
 				_: 3
-			}, 16), C(R).loading ? (b(), d("div", _({ key: 0 }, C(ze), { "aria-hidden": C(B) || void 0 }), [C(B) ? u("", !0) : S(e.$slots, "loading", {}, () => [r[2] ||= f("span", {
+			}, 16), w(R).loading ? (b(), d("div", _({ key: 0 }, w(We), { "aria-hidden": w(B) || void 0 }), [w(B) ? u("", !0) : S(e.$slots, "loading", {}, () => [f("span", {
 				role: "status",
-				"aria-label": "Loading",
+				"aria-label": w(P)("Loading"),
 				class: "relative inline-block size-5 animate-spin motion-reduce:animate-none"
-			}, [
-				f("span", { class: "absolute inset-s-0 top-0 size-2 rounded-full bg-primary-500 opacity-30 dark:bg-primary-400" }),
-				f("span", { class: "absolute inset-e-0 top-0 size-2 rounded-full bg-primary-500 opacity-50 dark:bg-primary-400" }),
-				f("span", { class: "absolute inset-e-0 bottom-0 size-2 rounded-full bg-primary-500 dark:bg-primary-400" }),
-				f("span", { class: "absolute inset-s-0 bottom-0 size-2 rounded-full bg-primary-500 opacity-70 dark:bg-primary-400" })
-			], -1)], void 0, 0)], 16, N)) : u("", !0)]),
-			C(t)(C(P), "footer") ? (b(), d("div", y(_({ key: 0 }, C(Fe))), [S(e.$slots, "footer")], 16)) : u("", !0),
-			C(Xe) ? (b(), d("div", y(_({ key: 1 }, C(Ye))), [C(He) ? S(e.$slots, "perPage", y(h(C(K))), () => [f("div", xe, [f("span", Se, me(C(F)("Per page:")), 1), p(C(re), _({ size: "sm" }, C(R).customProps?.perPage, {
-				overlay: "menu",
-				clearable: !1,
-				"hide-error-message": "",
-				"aria-label": "Per page",
-				options: rt.value,
-				"custom-props": it.value,
-				"model-value": C(K).perPage,
-				"onUpdate:modelValue": r[0] ||= (e) => C(K).onPerPageChange(Number(e)),
-				classes: {
-					...C(R).customProps?.perPage?.classes,
-					root: C(E)("w-20", C(R).customProps?.perPage?.classes?.root)
-				}
-			}), null, 16, [
-				"options",
-				"custom-props",
-				"model-value",
-				"classes"
-			])])], void 0, 0) : u("", !0), S(e.$slots, "pagination", y(h(C(Y))), () => [C(q) === void 0 ? u("", !0) : (b(), l(C(ne), _({
-				key: 0,
-				modelValue: Q.value,
-				"onUpdate:modelValue": r[1] ||= (e) => Q.value = e,
-				count: C(q),
-				variant: C(Y).variant
-			}, C(R).customProps?.pagination), null, 16, [
-				"modelValue",
-				"count",
-				"variant"
-			]))])], 16)) : u("", !0)
+			}, [...r[1] ||= [
+				f("span", { class: "absolute inset-s-0 top-0 size-2 rounded-full bg-primary-500 opacity-30 dark:bg-primary-400" }, null, -1),
+				f("span", { class: "absolute inset-e-0 top-0 size-2 rounded-full bg-primary-500 opacity-50 dark:bg-primary-400" }, null, -1),
+				f("span", { class: "absolute inset-e-0 bottom-0 size-2 rounded-full bg-primary-500 dark:bg-primary-400" }, null, -1),
+				f("span", { class: "absolute inset-s-0 bottom-0 size-2 rounded-full bg-primary-500 opacity-70 dark:bg-primary-400" }, null, -1)
+			]], 8, Ce)], void 0, 0)], 16, Se)) : u("", !0)]),
+			w(t)(w(N), "footer") ? (b(), d("div", y(_({ key: 0 }, w(Be))), [S(e.$slots, "footer")], 16)) : u("", !0),
+			w(et) ? (b(), d("div", y(_({ key: 1 }, w(rt))), [
+				w(Xe) ? (b(), d("div", y(_({ key: 0 }, w(Ye))), [S(e.$slots, "selected", y(h(w(q))), () => [me(C(ut.value), 1)])], 16)) : u("", !0),
+				w(qe) ? S(e.$slots, "perPage", y(h(w(K))), () => [f("div", we, [f("span", Te, C(w(P)("Rows per page")), 1), p(w(ne), _({ size: "sm" }, w(R).customProps?.perPage, {
+					overlay: "menu",
+					clearable: !1,
+					"hide-error-message": "",
+					options: pt.value,
+					"custom-props": ht.value,
+					"model-value": w(K).perPage,
+					"onUpdate:modelValue": mt,
+					"aria-label": w(P)("Rows per page"),
+					classes: {
+						...w(R).customProps?.perPage?.classes,
+						root: w(D)("w-20", w(R).customProps?.perPage?.classes?.root)
+					}
+				}), null, 16, [
+					"options",
+					"custom-props",
+					"model-value",
+					"aria-label",
+					"classes"
+				])])], void 0, 1) : u("", !0),
+				w(Re) ? (b(), d("div", Ee, [w(J) !== void 0 && !w(t)(w(N), "pagination") ? (b(), d("span", De, C(dt.value), 1)) : u("", !0), S(e.$slots, "pagination", y(h(w(X))), () => [w(J) === void 0 ? u("", !0) : (b(), l(oe, _({
+					key: 0,
+					size: "sm"
+				}, w(R).customProps?.pagination, {
+					modelValue: Q.value,
+					"onUpdate:modelValue": r[0] ||= (e) => Q.value = e,
+					count: w(J)
+				}), null, 16, ["modelValue", "count"]))])])) : u("", !0)
+			], 16)) : u("", !0)
 		], 16)], 16));
 	}
 });
 //#endregion
-export { P as default };
+export { N as default };

package/dist/Components/DataTable/DataTablePagination.js

@@ -0,0 +1,5 @@
+import e from "./DataTablePagination.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/DataTable/DataTablePagination.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/DataTable/DataTablePagination.vue.d.ts

@@ -0,0 +1,24 @@
+import { DataTablePaginationOwnProps, DataTablePaginationSlots } from './dataTablePagination.types';
+type __VLS_Slots = DataTablePaginationSlots;
+type __VLS_Props = DataTablePaginationOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (page: number) => any;
+    "update:modelValue": (...args: unknown[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((page: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/DataTable/DataTablePagination.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,40 @@
+import e from "../Icon/Icon.js";
+import { useDataTablePagination as t } from "./composables/useDataTablePagination.js";
+import { createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, guardReactiveProps as o, mergeModels as s, mergeProps as c, normalizeProps as l, openBlock as u, renderSlot as d, unref as f, useModel as p } from "vue";
+//#region src/Components/DataTable/DataTablePagination.vue?vue&type=script&setup=true&lang.ts
+var m = { class: "contents" }, h = { class: "contents" }, g = { class: "contents" }, _ = { class: "contents" }, v = /*@__PURE__*/ a({
+	inheritAttrs: !1,
+	name: "DataTablePagination",
+	__name: "DataTablePagination",
+	props: /*@__PURE__*/ s({
+		classes: {},
+		count: {},
+		customProps: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		modelValue: {},
+		rounded: {},
+		size: {}
+	}, {
+		modelValue: { default: 1 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["change", "update:modelValue"], ["update:modelValue"]),
+	setup(a, { emit: s }) {
+		let v = s, y = a, b = p(a, "modelValue"), { rootBind: x, listBind: S, prevBind: C, nextBind: w, lastBind: T, firstBind: E, prevIconBind: D, nextIconBind: O, lastIconBind: k, firstIconBind: A } = t(y, {
+			size: "sm",
+			rounded: "md",
+			disabled: !1
+		}, b, v);
+		return (t, a) => (u(), n("nav", l(o(f(x))), [r("ul", l(o(f(S))), [
+			r("li", m, [r("button", l(o(f(E))), [d(t.$slots, "first", {}, () => [i(f(e), c({ icon: "chevronsLeft" }, f(A)), null, 16)])], 16)]),
+			r("li", h, [r("button", l(o(f(C))), [d(t.$slots, "prev", {}, () => [i(f(e), c({ icon: "chevronLeft" }, f(D)), null, 16)])], 16)]),
+			r("li", g, [r("button", l(o(f(w))), [d(t.$slots, "next", {}, () => [i(f(e), c({ icon: "chevronRight" }, f(O)), null, 16)])], 16)]),
+			r("li", _, [r("button", l(o(f(T))), [d(t.$slots, "last", {}, () => [i(f(e), c({ icon: "chevronsRight" }, f(k)), null, 16)])], 16)])
+		], 16)], 16));
+	}
+});
+//#endregion
+export { v as default };

package/dist/Components/DataTable/composables/useDataTable.d.ts

@@ -1,5 +1,5 @@
 import { Ref, VNode, VNodeChild } from 'vue';
-import { getDataTableAriaSort, getDataTableSortIcon, DataTableColumnSearch, DataTableFilterOption, DataTableFilters, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableSorting, DataTableStickyEdge, DataTableStickyInset } from '@bridge-ui/core/Domain';
+import { getDataTableAriaSort, getDataTableSortIcon, DataTableColumnSearch, DataTableFilterOption, DataTableFilters, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableSelectedSlotProps, DataTableSorting, DataTableStickyEdge, DataTableStickyInset } from '@bridge-ui/core/Domain';
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { DataTableColumn, DataTableOwnProps, DataTableProps } from '../dataTable.types';
 type DataTableLibDefaults = LibDefaultsShape<DataTableOwnProps<unknown>, "full" | "size" | "loading" | "rounded" | "striped" | "variant" | "hoverable" | "stickyHeader" | "filterOverlay" | "selectionMode" | "columnsOverlay" | "loadingVariant">;
@@ -73,7 +73,7 @@ export declare function useDataTable<T>(props: DataTableOwnProps<T>, libDefaults
     rowViews: import('vue').ComputedRef<DataTableRowView<T>[]>;
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DataTableProps<T>, "search" | "columns" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "page" | "loading" | "rows" | "filters" | "expanded" | "hoverable" | "stickyHeader" | "striped" | "columnSearch" | "columnsOverlay" | "columnsShowFooter" | "filterOverlay" | "getRowId" | "hiddenColumns" | "loadingVariant" | "pageCount" | "perPage" | "perPageOptions" | "selection" | "selectionMode" | "sorting" | "totalCount">>>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DataTableProps<T>, "search" | "columns" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "page" | "rows" | "loading" | "filters" | "expanded" | "hoverable" | "stickyHeader" | "striped" | "columnSearch" | "columnsOverlay" | "columnsShowFooter" | "filterOverlay" | "getRowId" | "hiddenColumns" | "loadingVariant" | "pageCount" | "perPage" | "perPageOptions" | "selection" | "selectionMode" | "sorting" | "totalCount">>>>;
     emptyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -81,6 +81,7 @@ export declare function useDataTable<T>(props: DataTableOwnProps<T>, libDefaults
     frameBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         class: string;
     }, "class", {}, {}>>;
+    showPager: import('vue').ComputedRef<boolean>;
     tableProps: import('vue').ComputedRef<{
         size: NonNullable<keyof import('@bridge-ui/core/Tokens').TableSize | undefined>;
         variant: NonNullable<keyof import('@bridge-ui/core/Tokens').TableVariant | undefined>;
@@ -523,11 +524,16 @@ export declare function useDataTable<T>(props: DataTableOwnProps<T>, libDefaults
     serverPaged: import('vue').ComputedRef<boolean>;
     showPerPage: import('vue').ComputedRef<boolean>;
     showToolbar: import('vue').ComputedRef<boolean>;
+    selectedBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    showSelected: import('vue').ComputedRef<boolean>;
     getHeadAlign: (header: DataTableHeaderView) => keyof import('@bridge-ui/core/Tokens').TableAlign;
     getCellAlign: (cell: DataTableCellView) => keyof import('@bridge-ui/core/Tokens').TableAlign;
     onTogglePage: (selectAll: boolean) => void;
     onToggleSort: (columnId: string) => void;
     summaryCells: import('vue').ComputedRef<DataTableCellView[] | null>;
+    showFooterBar: import('vue').ComputedRef<boolean>;
     expandEnabled: import('vue').ComputedRef<boolean>;
     onChangeSearch: (query: string) => void;
     loadingBarBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
@@ -542,14 +548,13 @@ export declare function useDataTable<T>(props: DataTableOwnProps<T>, libDefaults
         checked: boolean;
         indeterminate: boolean;
     }>;
-    showPagination: import('vue').ComputedRef<boolean>;
     onToggleExpand: (rowId: string, expanded: boolean) => void;
     visibilityItems: import('vue').ComputedRef<DataTableVisibilityItem[]>;
     onChangePerPage: (next: number) => void;
     resolvedPerPage: import('vue').ComputedRef<number>;
     selectionEnabled: import('vue').ComputedRef<boolean>;
     perPageSlotProps: import('vue').ComputedRef<DataTablePerPageSlotProps>;
-    paginationVariant: import('vue').ComputedRef<import('@bridge-ui/core/Domain').DataTablePaginationVariant>;
+    selectedSlotProps: import('vue').ComputedRef<DataTableSelectedSlotProps>;
     resolvedPageCount: import('vue').ComputedRef<number | undefined>;
     selectionMultiple: import('vue').ComputedRef<boolean>;
     visibilityEnabled: import('vue').ComputedRef<boolean>;