@bridge-ui/vue 0.2.0 → 0.4.0

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

@@ -0,0 +1,396 @@
+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 { 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 i from "./DataTableSelection.js";
+import se from "./DataTableSortButton.js";
+import ce from "../Table/Table.js";
+import le 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 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";
+//#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 = {
+	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 = {
+	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({
+	inheritAttrs: !1,
+	__name: "DataTable",
+	props: /*@__PURE__*/ g({
+		classes: {},
+		columns: {},
+		columnsOverlay: { default: "auto" },
+		columnsShowFooter: {
+			type: Boolean,
+			default: void 0
+		},
+		customProps: {},
+		filterOverlay: { default: "auto" },
+		full: {
+			type: Boolean,
+			default: !0
+		},
+		getRowId: {},
+		hoverable: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		loadingVariant: { default: "overlay" },
+		pageCount: {},
+		perPageOptions: {},
+		rounded: {},
+		rows: {},
+		selectionMode: {},
+		size: {},
+		stickyHeader: {
+			type: [String, Boolean],
+			default: !1
+		},
+		striped: {
+			type: Boolean,
+			default: !1
+		},
+		totalCount: {},
+		variant: {}
+	}, {
+		page: {},
+		pageModifiers: {},
+		perPage: {},
+		perPageModifiers: {},
+		search: {},
+		searchModifiers: {},
+		expanded: {},
+		expandedModifiers: {},
+		selection: {},
+		selectionModifiers: {},
+		filters: {},
+		filtersModifiers: {},
+		sorting: {},
+		sortingModifiers: {},
+		hiddenColumns: {},
+		hiddenColumnsModifiers: {},
+		columnSearch: {},
+		columnSearchModifiers: {}
+	}),
+	emits: [
+		"update:page",
+		"update:perPage",
+		"update:search",
+		"update:expanded",
+		"update:selection",
+		"update:filters",
+		"update:sorting",
+		"update:hiddenColumns",
+		"update:columnSearch"
+	],
+	setup(m) {
+		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",
+			loading: !1,
+			striped: !1,
+			variant: "plain",
+			hoverable: !1,
+			stickyHeader: !1,
+			filterOverlay: "auto",
+			columnsOverlay: "auto",
+			selectionMode: "multiple",
+			loadingVariant: "overlay"
+		}, {
+			page: I,
+			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,
+				row: e.original,
+				value: t.value
+			}) : t.content;
+		}
+		let Q = c({
+			get: () => I.value ?? 1,
+			set: (e) => {
+				I.value = e;
+			}
+		}), tt = c(() => q.value.options.map((e) => ({
+			value: e,
+			label: String(e)
+		}))), nt = c(() => {
+			let e = R.value.customProps?.perPage?.customProps;
+			return {
+				...e,
+				listbox: {
+					showCheckmark: !1,
+					...e?.listbox,
+					customProps: {
+						...e?.listbox?.customProps,
+						menu: {
+							matchWidth: !0,
+							...e?.listbox?.customProps?.menu
+						}
+					}
+				}
+			};
+		}), 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(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(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(Ue),
+									checked: w(K).checked,
+									indeterminate: w(K).indeterminate,
+									"checkbox-props": w(R).customProps?.checkbox
+								}, null, 8, [
+									"size",
+									"onChange",
+									"checked",
+									"indeterminate",
+									"checkbox-props"
+								])) : !e.isSelection && !e.isExpand ? (b(), d("div", be, [e.sortable ? (b(), l(se, {
+									key: 0,
+									sort: e.ariaSort
+								}, {
+									default: E(() => [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, {
+									key: 2,
+									"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(Qe)(e.id, t, n)
+								}, null, 8, [
+									"column-id",
+									"active",
+									"values",
+									"overlay",
+									"options",
+									"searchable",
+									"multiple",
+									"search-value",
+									"onApply"
+								])) : u("", !0)])) : u("", !0)]),
+								_: 2
+							}, 1040, ["align"]))), 128))]),
+							_: 1
+						}, 16), w(R).loading && w(B) ? (b(), l(w(o), {
+							key: 0,
+							classes: { root: "h-0" }
+						}, {
+							default: E(() => [p(w(a), {
+								colspan: w(U),
+								classes: { root: "relative h-0 border-0 p-0 after:hidden" }
+							}, {
+								default: E(() => [f("div", y(h(w(Ge))), [S(e.$slots, "loading", {}, () => [p(w(ee), _({
+									size: "xs",
+									rounded: "none"
+								}, w(R).customProps?.progress), null, 16)])], 16)]),
+								_: 3
+							}, 8, ["colspan"])]),
+							_: 3
+						})) : u("", !0)]),
+						_: 3
+					}, 16),
+					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(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(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)
+							}, { ref_for: !0 }, w(H)(e)), {
+								default: E(() => [e.isSelection ? (b(), l(i, {
+									key: 0,
+									kind: "row",
+									value: t.id,
+									size: Z.value,
+									name: w(rt),
+									checked: t.selected,
+									multiple: w(Y),
+									"radio-props": w(R).customProps?.radio,
+									"checkbox-props": w(R).customProps?.checkbox,
+									onChange: (e) => w(Re)(t.id, e)
+								}, null, 8, [
+									"value",
+									"size",
+									"name",
+									"checked",
+									"multiple",
+									"radio-props",
+									"checkbox-props",
+									"onChange"
+								])) : e.isExpand ? (b(), d("button", {
+									key: 1,
+									type: "button",
+									"aria-label": "Expand row",
+									"aria-expanded": 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",
+									icon: "chevronRight"
+								})], 2)], 8, O)) : (b(), l(re, {
+									key: 2,
+									tooltip: e.tooltip,
+									ellipsis: e.ellipsis
+								}, {
+									default: E(() => [p($, { node: et(t, e) }, null, 8, ["node"])]),
+									_: 2
+								}, 1032, ["tooltip", "ellipsis"]))]),
+								_: 2
+							}, 1040, ["align"]))), 128))]),
+							_: 2
+						}, 1040), w(We) ? (b(), l(w(o), { key: 0 }, {
+							default: E(() => [p(w(a), {
+								colspan: w(U),
+								classes: { root: w(D)({
+									"p-0": !0,
+									"border-0": !t.expanded
+								}) }
+							}, {
+								default: E(() => [f("div", {
+									"aria-hidden": !t.expanded,
+									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
+									}))
+								}, [f("div", A, [f("div", j, [S(e.$slots, "expanded", { row: t.original })])])], 10, k)]),
+								_: 2
+							}, 1032, ["colspan", "classes"])]),
+							_: 2
+						}, 1024)) : u("", !0)], 64))), 128))]),
+						_: 3
+					}, 16),
+					w(G) ? (b(), l(w(ue), { key: 0 }, {
+						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)
+							}, { ref_for: !0 }, w(H)(e)), {
+								default: E(() => [p($, { node: e.content }, null, 8, ["node"])]),
+								_: 2
+							}, 1040, ["align"]))), 128))]),
+							_: 1
+						}, 16)]),
+						_: 1
+					})) : u("", !0)
+				]),
+				_: 3
+			}, 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"
+			}, [
+				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, M)) : u("", !0)]),
+			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: tt.value,
+				"custom-props": nt.value,
+				"model-value": w(q).perPage,
+				"onUpdate:modelValue": r[0] ||= (e) => w(q).onPerPageChange(Number(e)),
+				classes: {
+					...w(R).customProps?.perPage?.classes,
+					root: w(D)("w-20", w(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), _({
+				key: 0,
+				modelValue: Q.value,
+				"onUpdate:modelValue": r[1] ||= (e) => Q.value = e,
+				count: w(J),
+				variant: w(X).variant
+			}, w(R).customProps?.pagination), null, 16, [
+				"modelValue",
+				"count",
+				"variant"
+			]))])], 16)) : u("", !0)
+		], 16)], 16));
+	}
+});
+//#endregion
+export { P as default };

package/dist/Components/DataTable/DataTableCellContent.js

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

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    ellipsis: boolean;
+    tooltip?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/DataTableCellContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import e from "../Tooltip/Tooltip.js";
+import { createBlock as t, createElementBlock as n, createElementVNode as r, defineComponent as i, openBlock as a, ref as o, renderSlot as s, unref as c, withCtx as l } from "vue";
+//#region src/Components/DataTable/DataTableCellContent.vue?vue&type=script&setup=true&lang.ts
+var u = {
+	key: 1,
+	class: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
+}, d = { class: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap" }, f = { class: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap" }, p = /*@__PURE__*/ i({
+	inheritAttrs: !1,
+	name: "DataTableCellContent",
+	__name: "DataTableCellContent",
+	props: {
+		ellipsis: { type: Boolean },
+		tooltip: {}
+	},
+	setup(i) {
+		let p = o(!1), m = o(!1);
+		function h() {
+			p.value = !0, m.value = !0;
+		}
+		return (o, g) => i.ellipsis ? i.tooltip ? m.value ? (a(), t(c(e), {
+			key: 3,
+			content: i.tooltip,
+			modelValue: p.value,
+			"onUpdate:modelValue": g[0] ||= (e) => p.value = e,
+			"custom-props": { trigger: { class: "block min-w-0 w-full max-w-full" } }
+		}, {
+			trigger: l(() => [r("div", f, [s(o.$slots, "default")])]),
+			_: 3
+		}, 8, ["content", "modelValue"])) : (a(), n("div", {
+			key: 2,
+			onFocusin: h,
+			onPointerenter: h,
+			class: "block min-w-0 w-full max-w-full"
+		}, [r("div", d, [s(o.$slots, "default")])], 32)) : (a(), n("div", u, [s(o.$slots, "default")])) : s(o.$slots, "default", {}, void 0, void 0, 0);
+	}
+});
+//#endregion
+export { p as default };

package/dist/Components/DataTable/DataTableColumnsMenu.js

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

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

@@ -0,0 +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, {
+    change: (hiddenIds: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    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

@@ -0,0 +1,92 @@
+import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
+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 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: {},
+		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)
+		}, {
+			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": !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"
+			}, [d(v(r), {
+				"hide-error-message": "",
+				size: v(N),
+				"end-label": e.label,
+				disabled: !e.hideable,
+				"model-value": !v(j)(e),
+				classes: { root: "pointer-events-none" }
+			}, null, 8, [
+				"size",
+				"end-label",
+				"disabled",
+				"model-value"
+			])], 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",
+			"overlay",
+			"custom-props"
+		])]));
+	}
+});
+//#endregion
+export { w as default };

package/dist/Components/DataTable/DataTableFilterMenu.js

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

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

@@ -0,0 +1,20 @@
+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[];
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    apply: (values: string[], query: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onApply?: ((values: string[], query: string) => any) | undefined;
+}>, {
+    overlay: FieldOverlayMode;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;