@bridge-ui/vue 0.3.0 → 0.5.0

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

@@ -2,29 +2,30 @@ import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { hasNamedSlot as t } from "../../Utils/slotOrProp.js";
 import n from "../Icon/Icon.js";
 import ee from "../Progress/Progress.js";
-import te from "../Pagination/Pagination.js";
-import ne from "../Select/Select.js";
+import te from "../EmptyState/EmptyState.js";
+import ne from "../Pagination/Pagination.js";
+import re from "../Select/Select.js";
 import { useDataTable as r } from "./composables/useDataTable.js";
-import re from "./DataTableCellContent.js";
-import ie from "./DataTableColumnsMenu.js";
-import ae from "./DataTableFilterMenu.js";
-import oe from "./DataTableSearch.js";
+import ie from "./DataTableCellContent.js";
+import ae from "./DataTableColumnsMenu.js";
+import oe from "./DataTableFilterMenu.js";
+import se from "./DataTableSearch.js";
 import i from "./DataTableSelection.js";
-import se from "./DataTableSortButton.js";
-import ce from "../Table/Table.js";
-import le from "../Table/TableBody.js";
+import ce from "./DataTableSortButton.js";
+import le from "../Table/Table.js";
+import ue from "../Table/TableBody.js";
 import a from "../Table/TableCell.js";
-import ue from "../Table/TableFooter.js";
-import de from "../Table/TableHead.js";
-import fe from "../Table/TableHeader.js";
+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, createTextVNode as pe, 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 me, useModel as T, useSlots as he, withCtx as E } from "vue";
-import { cn as D } from "@bridge-ui/core/Utils";
+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";
 //#region src/Components/DataTable/DataTable.vue?vue&type=script&setup=true&lang.ts
-var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center gap-2" }, ve = {
+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"
-}, ye = { class: "relative" }, be = {
+}, be = { class: "relative" }, D = {
 	key: 1,
 	class: "flex w-full min-w-0 items-center gap-1.5 leading-none"
 }, O = ["aria-expanded", "onClick"], k = ["aria-hidden"], A = { class: "min-h-0 overflow-hidden" }, j = { class: "p-3" }, M = ["aria-hidden"], N = { class: "flex shrink-0 items-center gap-2" }, xe = { class: "text-sm whitespace-nowrap text-dark-500 dark:text-dark-400" }, P = /*@__PURE__*/ m({
@@ -33,7 +34,13 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 	props: /*@__PURE__*/ g({
 		classes: {},
 		columns: {},
+		columnsOverlay: { default: "auto" },
+		columnsShowFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		customProps: {},
+		filterOverlay: { default: "auto" },
 		full: {
 			type: Boolean,
 			default: !0
@@ -49,7 +56,6 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 		},
 		loadingVariant: { default: "overlay" },
 		pageCount: {},
-		paginationAlign: { default: "end" },
 		perPageOptions: {},
 		rounded: {},
 		rows: {},
@@ -70,6 +76,8 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 		pageModifiers: {},
 		perPage: {},
 		perPageModifiers: {},
+		search: {},
+		searchModifiers: {},
 		expanded: {},
 		expandedModifiers: {},
 		selection: {},
@@ -81,23 +89,21 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 		hiddenColumns: {},
 		hiddenColumnsModifiers: {},
 		columnSearch: {},
-		columnSearchModifiers: {},
-		search: {},
-		searchModifiers: {}
+		columnSearchModifiers: {}
 	}),
 	emits: [
 		"update:page",
 		"update:perPage",
+		"update:search",
 		"update:expanded",
 		"update:selection",
 		"update:filters",
 		"update:sorting",
 		"update:hiddenColumns",
-		"update:columnSearch",
-		"update:search"
+		"update:columnSearch"
 	],
 	setup(m) {
-		let g = m, P = he(), F = e(), I = T(m, "page"), L = T(m, "perPage"), Se = T(m, "expanded"), Ce = T(m, "selection"), we = T(m, "filters"), Te = T(m, "sorting"), Ee = T(m, "hiddenColumns"), De = T(m, "columnSearch"), R = T(m, "search"), { merged: z, rowViews: Oe, rootBind: ke, emptyBind: Ae, showEmpty: B, tableProps: je, footerBind: Me, loadingBar: V, showSearch: Ne, getHeadBind: Pe, headerViews: Fe, loadingBind: Ie, onToggleRow: Le, toolbarBind: Re, getCellBind: H, columnCount: U, showPerPage: ze, showToolbar: Be, getHeadAlign: Ve, getCellAlign: W, onTogglePage: He, summaryCells: G, expandEnabled: Ue, loadingBarBind: We, paginationBind: Ge, selectAllState: K, showPagination: Ke, onChangeSearch: qe, onToggleExpand: Je, visibilityItems: Ye, perPageSlotProps: q, resolvedPageCount: J, selectionMultiple: Y, visibilityEnabled: Xe, paginationSlotProps: X, onCommitColumnFilter: Ze, onToggleColumnVisibility: Qe } = r(g, {
+		let g = m, P = ge(), F = e(), I = w(m, "page"), Se = w(m, "perPage"), L = w(m, "search"), Ce = w(m, "expanded"), we = w(m, "selection"), Te = w(m, "filters"), Ee = w(m, "sorting"), De = w(m, "hiddenColumns"), Oe = w(m, "columnSearch"), { merged: R, rowViews: ke, rootBind: Ae, emptyBind: je, showEmpty: z, frameBind: Me, tableProps: Ne, footerBind: Pe, loadingBar: B, showSearch: V, getHeadBind: Fe, headerViews: Ie, loadingBind: Le, onToggleRow: Re, toolbarBind: ze, getCellBind: H, columnCount: U, showPerPage: Be, showToolbar: Ve, getHeadAlign: He, getCellAlign: W, onTogglePage: Ue, summaryCells: G, expandEnabled: We, loadingBarBind: Ge, paginationBind: Ke, selectAllState: K, showPagination: qe, onChangeSearch: Je, onToggleExpand: Ye, visibilityItems: Xe, perPageSlotProps: q, resolvedPageCount: J, selectionMultiple: Y, visibilityEnabled: Ze, paginationSlotProps: X, onCommitColumnFilter: Qe, onHiddenColumnsChange: $e } = r(g, {
 			size: "md",
 			full: !0,
 			rounded: "lg",
@@ -106,21 +112,22 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 			variant: "plain",
 			hoverable: !1,
 			stickyHeader: !1,
-			paginationAlign: "end",
+			filterOverlay: "auto",
+			columnsOverlay: "auto",
 			selectionMode: "multiple",
 			loadingVariant: "overlay"
 		}, {
 			page: I,
-			search: R,
-			perPage: L,
-			filters: we,
-			sorting: Te,
-			expanded: Se,
-			selection: Ce,
-			columnSearch: De,
-			hiddenColumns: Ee
-		}), Z = c(() => z.value.size === "lg" ? "md" : "sm");
-		function $e(e, t) {
+			search: L,
+			perPage: Se,
+			filters: Te,
+			sorting: Ee,
+			expanded: Ce,
+			selection: we,
+			columnSearch: Oe,
+			hiddenColumns: De
+		}), Z = c(() => R.value.size === "lg" ? "md" : "sm");
+		function et(e, t) {
 			let n = P[`item.${t.id}`] ?? P.item;
 			return n ? n({
 				id: t.id,
@@ -133,11 +140,11 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 			set: (e) => {
 				I.value = e;
 			}
-		}), et = c(() => q.value.options.map((e) => ({
+		}), tt = c(() => q.value.options.map((e) => ({
 			value: e,
 			label: String(e)
-		}))), tt = c(() => {
-			let e = z.value.customProps?.perPage?.customProps;
+		}))), nt = c(() => {
+			let e = R.value.customProps?.perPage?.customProps;
 			return {
 				...e,
 				listbox: {
@@ -152,69 +159,77 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 					}
 				}
 			};
-		}), nt = me(), $ = (e) => e.node ?? null;
-		return (e, r) => (b(), d("div", y(h(w(ke))), [
-			w(Be) ? (b(), d("div", y(_({ key: 0 }, w(Re))), [f("div", ge, [S(e.$slots, "toolbar")]), f("div", _e, [
-				w(Xe) ? (b(), d("div", ve, [p(ie, {
-					items: w(Ye),
-					onToggle: w(Qe)
-				}, null, 8, ["items", "onToggle"])])) : u("", !0),
-				S(e.$slots, "toolbarActions"),
-				w(Ne) ? S(e.$slots, "search", {}, () => [p(oe, {
-					"model-value": R.value ?? "",
-					"onUpdate:modelValue": w(qe),
-					"field-props": w(z).customProps?.search
-				}, null, 8, [
-					"model-value",
-					"onUpdate:modelValue",
-					"field-props"
-				])], void 0, 1) : u("", !0)
-			])], 16)) : u("", !0),
-			f("div", ye, [p(w(ce), y(h(w(je))), {
-				default: E(() => [
-					p(w(fe), y(h(w(z).customProps?.header)), {
-						default: E(() => [p(w(o), y(h(w(z).customProps?.row)), {
-							default: E(() => [(b(!0), d(s, null, x(w(Fe), (e) => (b(), l(w(de), _({
+		}), rt = he(), $ = (e) => e.node ?? null;
+		return (e, r) => (b(), d("div", y(h(C(Ae))), [C(Ve) ? (b(), d("div", y(_({ key: 0 }, C(ze))), [f("div", _e, [S(e.$slots, "toolbar")]), f("div", ve, [
+			C(Ze) ? (b(), d("div", ye, [p(ae, {
+				items: C(Xe),
+				overlay: C(R).columnsOverlay,
+				onChange: C($e),
+				"show-footer": C(R).columnsShowFooter
+			}, null, 8, [
+				"items",
+				"overlay",
+				"onChange",
+				"show-footer"
+			])])) : u("", !0),
+			S(e.$slots, "toolbarActions"),
+			C(V) ? S(e.$slots, "search", {}, () => [p(se, {
+				"model-value": L.value ?? "",
+				"onUpdate:modelValue": C(Je),
+				"field-props": C(R).customProps?.search
+			}, null, 8, [
+				"model-value",
+				"onUpdate:modelValue",
+				"field-props"
+			])], void 0, 1) : u("", !0)
+		])], 16)) : u("", !0), f("div", y(h(C(Me))), [
+			f("div", be, [p(C(le), y(h(C(Ne))), {
+				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(Ie), (e) => (b(), l(C(fe), _({
 								key: e.id,
-								align: w(Ve)(e)
-							}, { ref_for: !0 }, w(Pe)(e)), {
-								default: E(() => [e.isSelection && w(Y) ? (b(), l(i, {
+								align: C(He)(e)
+							}, { ref_for: !0 }, C(Fe)(e)), {
+								default: T(() => [e.isSelection && C(Y) ? (b(), l(i, {
 									key: 0,
 									kind: "page",
 									size: Z.value,
-									onChange: w(He),
-									checked: w(K).checked,
-									indeterminate: w(K).indeterminate,
-									"checkbox-props": w(z).customProps?.checkbox
+									onChange: C(Ue),
+									checked: C(K).checked,
+									indeterminate: C(K).indeterminate,
+									"checkbox-props": C(R).customProps?.checkbox
 								}, null, 8, [
 									"size",
 									"onChange",
 									"checked",
 									"indeterminate",
 									"checkbox-props"
-								])) : !e.isSelection && !e.isExpand ? (b(), d("div", be, [e.sortable ? (b(), l(se, {
+								])) : !e.isSelection && !e.isExpand ? (b(), d("div", D, [e.sortable ? (b(), l(ce, {
 									key: 0,
 									sort: e.ariaSort
 								}, {
-									default: E(() => [p($, { node: e.header }, null, 8, ["node"])]),
+									default: T(() => [p($, { node: e.header }, null, 8, ["node"])]),
 									_: 2
 								}, 1032, ["sort"])) : (b(), l($, {
 									key: 1,
 									node: e.header
-								}, null, 8, ["node"])), e.filterable ? (b(), l(ae, {
+								}, null, 8, ["node"])), e.filterable ? (b(), l(oe, {
 									key: 2,
 									"column-id": e.id,
 									active: e.filterActive,
 									values: e.filterValues,
+									overlay: C(R).filterOverlay,
 									options: e.filterOptions,
 									searchable: e.searchable,
 									multiple: e.filterMultiple,
 									"search-value": e.searchQuery,
-									onApply: (t, n) => w(Ze)(e.id, t, n)
+									onApply: (t, n) => C(Qe)(e.id, t, n)
 								}, null, 8, [
 									"column-id",
 									"active",
 									"values",
+									"overlay",
 									"options",
 									"searchable",
 									"multiple",
@@ -224,50 +239,53 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 								_: 2
 							}, 1040, ["align"]))), 128))]),
 							_: 1
-						}, 16), w(z).loading && w(V) ? (b(), l(w(o), {
+						}, 16), C(R).loading && C(B) ? (b(), l(C(o), {
 							key: 0,
 							classes: { root: "h-0" }
 						}, {
-							default: E(() => [p(w(a), {
-								colspan: w(U),
+							default: T(() => [p(C(a), {
+								colspan: C(U),
 								classes: { root: "relative h-0 border-0 p-0 after:hidden" }
 							}, {
-								default: E(() => [f("div", y(h(w(We))), [S(e.$slots, "loading", {}, () => [p(w(ee), _({
+								default: T(() => [f("div", y(h(C(Ge))), [S(e.$slots, "loading", {}, () => [p(C(ee), _({
 									size: "xs",
 									rounded: "none"
-								}, w(z).customProps?.progress), null, 16)])], 16)]),
+								}, C(R).customProps?.progress), null, 16)])], 16)]),
 								_: 3
 							}, 8, ["colspan"])]),
 							_: 3
 						})) : u("", !0)]),
 						_: 3
 					}, 16),
-					p(w(le), y(h(w(z).customProps?.body)), {
-						default: E(() => [w(B) ? (b(), l(w(o), { key: 0 }, {
-							default: E(() => [p(w(a), {
+					p(C(ue), y(h(C(R).customProps?.body)), {
+						default: T(() => [C(z) ? (b(), l(C(o), { key: 0 }, {
+							default: T(() => [p(C(a), {
 								align: "center",
-								colspan: w(U)
+								colspan: C(U)
 							}, {
-								default: E(() => [f("div", y(h(w(Ae))), [S(e.$slots, "empty", {}, () => [r[2] ||= f("span", { class: "relative mb-1 block h-10 w-12 rounded-md border-2 border-dark-300 dark:border-dark-600" }, [f("span", { class: "absolute -top-1.5 left-2 right-2 h-2 rounded-sm border-2 border-dark-300 bg-white dark:border-dark-600 dark:bg-dark-900" })], -1), pe(" " + C(w(F)("No data")), 1)])], 16)]),
+								default: T(() => [f("div", y(h(C(je))), [S(e.$slots, "empty", {}, () => [p(C(te), {
+									size: C(R).size,
+									title: C(F)("No data")
+								}, null, 8, ["size", "title"])])], 16)]),
 								_: 3
 							}, 8, ["colspan"])]),
 							_: 3
-						})) : u("", !0), w(B) ? u("", !0) : (b(!0), d(s, { key: 1 }, x(w(Oe), (t) => (b(), d(s, { key: t.id }, [p(w(o), _({ ref_for: !0 }, w(z).customProps?.row), {
-							default: E(() => [(b(!0), d(s, null, x(t.cells, (e) => (b(), l(w(a), _({
+						})) : u("", !0), C(z) ? u("", !0) : (b(!0), d(s, { key: 1 }, x(C(ke), (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), _({
 								key: e.id,
-								align: w(W)(e)
-							}, { ref_for: !0 }, w(H)(e)), {
-								default: E(() => [e.isSelection ? (b(), l(i, {
+								align: C(W)(e)
+							}, { ref_for: !0 }, C(H)(e)), {
+								default: T(() => [e.isSelection ? (b(), l(i, {
 									key: 0,
 									kind: "row",
 									value: t.id,
 									size: Z.value,
-									name: w(nt),
+									name: C(rt),
 									checked: t.selected,
-									multiple: w(Y),
-									"radio-props": w(z).customProps?.radio,
-									"checkbox-props": w(z).customProps?.checkbox,
-									onChange: (e) => w(Le)(t.id, e)
+									multiple: C(Y),
+									"radio-props": C(R).customProps?.radio,
+									"checkbox-props": C(R).customProps?.checkbox,
+									onChange: (e) => C(Re)(t.id, e)
 								}, null, 8, [
 									"value",
 									"size",
@@ -282,33 +300,33 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 									type: "button",
 									"aria-label": "Expand row",
 									"aria-expanded": t.expanded,
-									onClick: (e) => w(Je)(t.id, !t.expanded),
+									onClick: (e) => C(Ye)(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(w(n), {
+								}, [f("span", { class: v([{ "rotate-90": t.expanded }, "inline-flex transition-transform duration-200 motion-reduce:transition-none"]) }, [p(C(n), {
 									size: "sm",
 									icon: "chevronRight"
-								})], 2)], 8, O)) : (b(), l(re, {
+								})], 2)], 8, O)) : (b(), l(ie, {
 									key: 2,
 									tooltip: e.tooltip,
 									ellipsis: e.ellipsis
 								}, {
-									default: E(() => [p($, { node: $e(t, e) }, null, 8, ["node"])]),
+									default: T(() => [p($, { node: et(t, e) }, null, 8, ["node"])]),
 									_: 2
 								}, 1032, ["tooltip", "ellipsis"]))]),
 								_: 2
 							}, 1040, ["align"]))), 128))]),
 							_: 2
-						}, 1040), w(Ue) ? (b(), l(w(o), { key: 0 }, {
-							default: E(() => [p(w(a), {
-								colspan: w(U),
-								classes: { root: w(D)({
+						}, 1040), C(We) ? (b(), l(C(o), { key: 0 }, {
+							default: T(() => [p(C(a), {
+								colspan: C(U),
+								classes: { root: C(E)({
 									"p-0": !0,
 									"border-0": !t.expanded
 								}) }
 							}, {
-								default: E(() => [f("div", {
+								default: T(() => [f("div", {
 									"aria-hidden": !t.expanded,
-									class: v(w(D)({
+									class: v(C(E)({
 										"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none": !0,
 										"grid-rows-[1fr]": t.expanded,
 										"grid-rows-[0fr]": !t.expanded
@@ -320,13 +338,13 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 						}, 1024)) : u("", !0)], 64))), 128))]),
 						_: 3
 					}, 16),
-					w(G) ? (b(), l(w(ue), { key: 0 }, {
-						default: E(() => [p(w(o), y(h(w(z).customProps?.row)), {
-							default: E(() => [(b(!0), d(s, null, x(w(G), (e) => (b(), l(w(a), _({
+					C(G) ? (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(G), (e) => (b(), l(C(a), _({
 								key: e.id,
-								align: w(W)(e)
-							}, { ref_for: !0 }, w(H)(e)), {
-								default: E(() => [p($, { node: e.content }, null, 8, ["node"])]),
+								align: C(W)(e)
+							}, { ref_for: !0 }, C(H)(e)), {
+								default: T(() => [p($, { node: e.content }, null, 8, ["node"])]),
 								_: 2
 							}, 1040, ["align"]))), 128))]),
 							_: 1
@@ -335,7 +353,7 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 					})) : u("", !0)
 				]),
 				_: 3
-			}, 16), w(z).loading ? (b(), d("div", _({ key: 0 }, w(Ie), { "aria-hidden": w(V) || void 0 }), [w(V) ? u("", !0) : S(e.$slots, "loading", {}, () => [r[3] ||= f("span", {
+			}, 16), C(R).loading ? (b(), d("div", _({ key: 0 }, C(Le), { "aria-hidden": C(B) || void 0 }), [C(B) ? u("", !0) : S(e.$slots, "loading", {}, () => [r[2] ||= f("span", {
 				role: "status",
 				"aria-label": "Loading",
 				class: "relative inline-block size-5 animate-spin motion-reduce:animate-none"
@@ -345,37 +363,37 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 				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, M)) : u("", !0)]),
-			w(t)(w(P), "footer") ? (b(), d("div", y(_({ key: 1 }, w(Me))), [S(e.$slots, "footer")], 16)) : u("", !0),
-			w(Ke) ? (b(), d("div", y(_({ key: 2 }, w(Ge))), [w(ze) ? S(e.$slots, "perPage", y(h(w(q))), () => [f("div", N, [f("span", xe, C(w(F)("Per page:")), 1), p(w(ne), _({ size: "sm" }, w(z).customProps?.perPage, {
+			C(t)(C(P), "footer") ? (b(), d("div", y(_({ key: 0 }, C(Pe))), [S(e.$slots, "footer")], 16)) : u("", !0),
+			C(qe) ? (b(), d("div", y(_({ key: 1 }, C(Ke))), [C(Be) ? S(e.$slots, "perPage", y(h(C(q))), () => [f("div", N, [f("span", xe, 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: et.value,
-				"custom-props": tt.value,
-				"model-value": w(q).perPage,
-				"onUpdate:modelValue": r[0] ||= (e) => w(q).onPerPageChange(Number(e)),
+				options: tt.value,
+				"custom-props": nt.value,
+				"model-value": C(q).perPage,
+				"onUpdate:modelValue": r[0] ||= (e) => C(q).onPerPageChange(Number(e)),
 				classes: {
-					...w(z).customProps?.perPage?.classes,
-					root: w(D)("w-20", w(z).customProps?.perPage?.classes?.root)
+					...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(w(X))), () => [w(J) === void 0 ? u("", !0) : (b(), l(w(te), _({
+			])])], void 0, 0) : u("", !0), S(e.$slots, "pagination", y(h(C(X))), () => [C(J) === void 0 ? u("", !0) : (b(), l(C(ne), _({
 				key: 0,
 				modelValue: Q.value,
 				"onUpdate:modelValue": r[1] ||= (e) => Q.value = e,
-				count: w(J),
-				variant: w(X).variant
-			}, w(z).customProps?.pagination), null, 16, [
+				count: C(J),
+				variant: C(X).variant
+			}, C(R).customProps?.pagination), null, 16, [
 				"modelValue",
 				"count",
 				"variant"
 			]))])], 16)) : u("", !0)
-		], 16));
+		], 16)], 16));
 	}
 });
 //#endregion

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

@@ -1,11 +1,17 @@
+import { FieldOverlayMode } from '@bridge-ui/core/Domain';
 import { DataTableVisibilityItem } from './composables/useDataTable';
 type __VLS_Props = {
     items: DataTableVisibilityItem[];
+    overlay?: FieldOverlayMode;
+    showFooter?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    toggle: (columnId: string, hide: boolean) => any;
+    change: (hiddenIds: string[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: ((columnId: string, hide: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+    onChange?: ((hiddenIds: string[]) => any) | undefined;
+}>, {
+    overlay: FieldOverlayMode;
+    showFooter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,47 +1,92 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
-import t from "../Menu/Menu.js";
-import n from "../Checkbox/Checkbox.js";
-import r from "./DataTableToolbarButton.js";
-import { Fragment as i, createBlock as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, openBlock as u, ref as d, renderList as f, unref as p, withCtx as m } from "vue";
+import t from "../Button/Button.js";
+import n from "../FieldOverlay/FieldOverlay.js";
+import r from "../Checkbox/Checkbox.js";
+import { useDataTableColumnsMenu as i } from "./composables/useDataTableColumnsMenu.js";
+import a from "./DataTableToolbarButton.js";
+import { Fragment as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, isRef as p, normalizeClass as m, openBlock as h, renderList as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+import { cn as b } from "@bridge-ui/core/Utils";
 //#region src/Components/DataTable/DataTableColumnsMenu.vue?vue&type=script&setup=true&lang.ts
-var h = { class: "min-w-52 p-1" }, g = ["aria-checked", "onClick"], _ = /*@__PURE__*/ l({
+var x = { class: "relative inline-flex items-center" }, S = ["aria-checked", "onClick"], C = {
+	key: 0,
+	class: "flex justify-end gap-2 border-t border-dark-200 px-2 pb-1 pt-1.5 dark:border-dark-700"
+}, w = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	name: "DataTableColumnsMenu",
 	__name: "DataTableColumnsMenu",
-	props: { items: {} },
-	emits: ["toggle"],
-	setup(l, { emit: _ }) {
-		let v = _, y = d(!1), b = e();
-		return (e, d) => (u(), a(p(t), {
-			modelValue: y.value,
-			"onUpdate:modelValue": d[0] ||= (e) => y.value = e,
-			placement: "bottom"
+	props: {
+		items: {},
+		overlay: { default: "auto" },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["change"],
+	setup(f, { emit: w }) {
+		let T = f, E = w, D = e(), { show: O, onApply: k, onReset: A, isHidden: j, triggerRef: M, controlSize: N, onToggleItem: P, onToggleShow: F, overlayCustomProps: I, showFooter: L } = i(T, (e) => {
+			E("change", e);
+		});
+		return (e, i) => (h(), c("span", x, [l("span", {
+			ref_key: "triggerRef",
+			ref: M,
+			class: "inline-flex"
+		}, [d(a, {
+			icon: "columns",
+			onClick: v(F),
+			label: v(D)("Columns")
+		}, null, 8, ["onClick", "label"])], 512), d(v(n), {
+			modelValue: v(O),
+			"onUpdate:modelValue": i[0] ||= (e) => p(O) ? O.value = e : null,
+			overlay: f.overlay,
+			"custom-props": v(I)
 		}, {
-			trigger: m(() => [c(r, {
-				icon: "columns",
-				label: p(b)("Columns")
-			}, null, 8, ["label"])]),
-			default: m(() => [s("div", h, [(u(!0), o(i, null, f(l.items, (e) => (u(), o("div", {
+			default: y(() => [l("div", { class: m(v(b)({
+				"min-w-52 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10": !0,
+				"p-1": !v(L),
+				"px-1 pb-0.5 pt-1": v(L)
+			})) }, [l("div", { class: m(v(b)({
+				"flex max-h-60 flex-col overflow-y-auto overscroll-contain bridge-soft-scrollbar": !0,
+				"pb-2": v(L)
+			})) }, [(h(!0), c(o, null, g(f.items, (e) => (h(), c("div", {
 				key: e.id,
 				role: "menuitemcheckbox",
-				"aria-checked": !e.hidden,
-				onClick: (t) => e.hideable && v("toggle", e.id, !e.hidden),
+				"aria-checked": !v(j)(e),
+				onClick: (t) => v(P)(e),
 				class: "flex w-full cursor-pointer items-center rounded-md px-2 py-1.5 text-start hover:bg-dark-500/5 dark:hover:bg-dark-500/10"
-			}, [c(p(n), {
-				size: "sm",
+			}, [d(v(r), {
 				"hide-error-message": "",
+				size: v(N),
 				"end-label": e.label,
 				disabled: !e.hideable,
-				"model-value": !e.hidden,
+				"model-value": !v(j)(e),
 				classes: { root: "pointer-events-none" }
 			}, null, 8, [
+				"size",
 				"end-label",
 				"disabled",
 				"model-value"
-			])], 8, g))), 128))])]),
+			])], 8, S))), 128))], 2), v(L) ? (h(), c("div", C, [d(v(t), {
+				size: "sm",
+				variant: "outline",
+				onClick: v(A)
+			}, {
+				default: y(() => [u(_(v(D)("Reset")), 1)]),
+				_: 1
+			}, 8, ["onClick"]), d(v(t), {
+				size: "sm",
+				onClick: v(k)
+			}, {
+				default: y(() => [u(_(v(D)("OK")), 1)]),
+				_: 1
+			}, 8, ["onClick"])])) : s("", !0)], 2)]),
 			_: 1
-		}, 8, ["modelValue"]));
+		}, 8, [
+			"modelValue",
+			"overlay",
+			"custom-props"
+		])]));
 	}
 });
 //#endregion
-export { _ as default };
+export { w as default };

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

@@ -1,9 +1,10 @@
-import { DataTableFilterOption } from '@bridge-ui/core/Domain';
+import { DataTableFilterOption, FieldOverlayMode } from '@bridge-ui/core/Domain';
 type __VLS_Props = {
     active: boolean;
     columnId: string;
     multiple: boolean;
     options: DataTableFilterOption[];
+    overlay?: FieldOverlayMode;
     searchable: boolean;
     searchValue: string;
     values: string[];
@@ -12,6 +13,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     apply: (values: string[], query: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onApply?: ((values: string[], query: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    overlay: FieldOverlayMode;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;