@bridge-ui/vue 0.3.0 → 0.4.0

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

@@ -33,7 +33,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 +55,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 +75,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 +88,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 = he(), F = e(), I = T(m, "page"), Se = T(m, "perPage"), L = T(m, "search"), Ce = T(m, "expanded"), we = T(m, "selection"), Te = T(m, "filters"), Ee = T(m, "sorting"), De = T(m, "hiddenColumns"), Oe = T(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 +111,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 +139,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,40 +158,46 @@ 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))), {
+		}), rt = me(), $ = (e) => e.node ?? null;
+		return (e, r) => (b(), d("div", y(h(w(Ae))), [w(Ve) ? (b(), d("div", y(_({ key: 0 }, w(ze))), [f("div", ge, [S(e.$slots, "toolbar")]), f("div", _e, [
+			w(Ze) ? (b(), d("div", ve, [p(ie, {
+				items: w(Xe),
+				overlay: w(R).columnsOverlay,
+				onChange: w($e),
+				"show-footer": w(R).columnsShowFooter
+			}, null, 8, [
+				"items",
+				"overlay",
+				"onChange",
+				"show-footer"
+			])])) : u("", !0),
+			S(e.$slots, "toolbarActions"),
+			w(V) ? S(e.$slots, "search", {}, () => [p(oe, {
+				"model-value": L.value ?? "",
+				"onUpdate:modelValue": w(Je),
+				"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(w(Me))), [
+			f("div", ye, [p(w(ce), y(h(w(Ne))), {
 				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), _({
+					p(w(fe), 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(Ie), (e) => (b(), l(w(de), _({
 								key: e.id,
-								align: w(Ve)(e)
-							}, { ref_for: !0 }, w(Pe)(e)), {
+								align: w(He)(e)
+							}, { ref_for: !0 }, w(Fe)(e)), {
 								default: E(() => [e.isSelection && w(Y) ? (b(), l(i, {
 									key: 0,
 									kind: "page",
 									size: Z.value,
-									onChange: w(He),
+									onChange: w(Ue),
 									checked: w(K).checked,
 									indeterminate: w(K).indeterminate,
-									"checkbox-props": w(z).customProps?.checkbox
+									"checkbox-props": w(R).customProps?.checkbox
 								}, null, 8, [
 									"size",
 									"onChange",
@@ -206,15 +218,17 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 									"column-id": e.id,
 									active: e.filterActive,
 									values: e.filterValues,
+									overlay: w(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) => w(Qe)(e.id, t, n)
 								}, null, 8, [
 									"column-id",
 									"active",
 									"values",
+									"overlay",
 									"options",
 									"searchable",
 									"multiple",
@@ -224,7 +238,7 @@ 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), w(R).loading && w(B) ? (b(), l(w(o), {
 							key: 0,
 							classes: { root: "h-0" }
 						}, {
@@ -232,27 +246,27 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 								colspan: w(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: E(() => [f("div", y(h(w(Ge))), [S(e.$slots, "loading", {}, () => [p(w(ee), _({
 									size: "xs",
 									rounded: "none"
-								}, w(z).customProps?.progress), null, 16)])], 16)]),
+								}, w(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 }, {
+					p(w(le), y(h(w(R).customProps?.body)), {
+						default: E(() => [w(z) ? (b(), l(w(o), { key: 0 }, {
 							default: E(() => [p(w(a), {
 								align: "center",
 								colspan: w(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: E(() => [f("div", y(h(w(je))), [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)]),
 								_: 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), {
+						})) : u("", !0), w(z) ? u("", !0) : (b(!0), d(s, { key: 1 }, x(w(ke), (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: w(W)(e)
@@ -262,12 +276,12 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 									kind: "row",
 									value: t.id,
 									size: Z.value,
-									name: w(nt),
+									name: w(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)
+									"radio-props": w(R).customProps?.radio,
+									"checkbox-props": w(R).customProps?.checkbox,
+									onChange: (e) => w(Re)(t.id, e)
 								}, null, 8, [
 									"value",
 									"size",
@@ -282,7 +296,7 @@ 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) => w(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), {
 									size: "sm",
@@ -292,13 +306,13 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 									tooltip: e.tooltip,
 									ellipsis: e.ellipsis
 								}, {
-									default: E(() => [p($, { node: $e(t, e) }, null, 8, ["node"])]),
+									default: E(() => [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 }, {
+						}, 1040), w(We) ? (b(), l(w(o), { key: 0 }, {
 							default: E(() => [p(w(a), {
 								colspan: w(U),
 								classes: { root: w(D)({
@@ -321,7 +335,7 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 						_: 3
 					}, 16),
 					w(G) ? (b(), l(w(ue), { key: 0 }, {
-						default: E(() => [p(w(o), y(h(w(z).customProps?.row)), {
+						default: E(() => [p(w(o), y(h(w(R).customProps?.row)), {
 							default: E(() => [(b(!0), d(s, null, x(w(G), (e) => (b(), l(w(a), _({
 								key: e.id,
 								align: w(W)(e)
@@ -335,7 +349,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), w(R).loading ? (b(), d("div", _({ key: 0 }, w(Le), { "aria-hidden": w(B) || void 0 }), [w(B) ? u("", !0) : S(e.$slots, "loading", {}, () => [r[3] ||= f("span", {
 				role: "status",
 				"aria-label": "Loading",
 				class: "relative inline-block size-5 animate-spin motion-reduce:animate-none"
@@ -345,19 +359,19 @@ 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, {
+			w(t)(w(P), "footer") ? (b(), d("div", y(_({ key: 0 }, w(Pe))), [S(e.$slots, "footer")], 16)) : u("", !0),
+			w(qe) ? (b(), d("div", y(_({ key: 1 }, w(Ke))), [w(Be) ? 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(R).customProps?.perPage, {
 				overlay: "menu",
 				clearable: !1,
 				"hide-error-message": "",
 				"aria-label": "Per page",
-				options: et.value,
-				"custom-props": tt.value,
+				options: tt.value,
+				"custom-props": nt.value,
 				"model-value": w(q).perPage,
 				"onUpdate:modelValue": r[0] ||= (e) => w(q).onPerPageChange(Number(e)),
 				classes: {
-					...w(z).customProps?.perPage?.classes,
-					root: w(D)("w-20", w(z).customProps?.perPage?.classes?.root)
+					...w(R).customProps?.perPage?.classes,
+					root: w(D)("w-20", w(R).customProps?.perPage?.classes?.root)
 				}
 			}), null, 16, [
 				"options",
@@ -370,12 +384,12 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 				"onUpdate:modelValue": r[1] ||= (e) => Q.value = e,
 				count: w(J),
 				variant: w(X).variant
-			}, w(z).customProps?.pagination), null, 16, [
+			}, w(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;