@bridge-ui/vue 0.1.1 → 0.3.0

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

@@ -0,0 +1,382 @@
+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: {},
+		customProps: {},
+		full: {
+			type: Boolean,
+			default: !0
+		},
+		getRowId: {},
+		hoverable: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		loadingVariant: { default: "overlay" },
+		pageCount: {},
+		paginationAlign: { default: "end" },
+		perPageOptions: {},
+		rounded: {},
+		rows: {},
+		selectionMode: {},
+		size: {},
+		stickyHeader: {
+			type: [String, Boolean],
+			default: !1
+		},
+		striped: {
+			type: Boolean,
+			default: !1
+		},
+		totalCount: {},
+		variant: {}
+	}, {
+		page: {},
+		pageModifiers: {},
+		perPage: {},
+		perPageModifiers: {},
+		expanded: {},
+		expandedModifiers: {},
+		selection: {},
+		selectionModifiers: {},
+		filters: {},
+		filtersModifiers: {},
+		sorting: {},
+		sortingModifiers: {},
+		hiddenColumns: {},
+		hiddenColumnsModifiers: {},
+		columnSearch: {},
+		columnSearchModifiers: {},
+		search: {},
+		searchModifiers: {}
+	}),
+	emits: [
+		"update:page",
+		"update:perPage",
+		"update:expanded",
+		"update:selection",
+		"update:filters",
+		"update:sorting",
+		"update:hiddenColumns",
+		"update:columnSearch",
+		"update:search"
+	],
+	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, {
+			size: "md",
+			full: !0,
+			rounded: "lg",
+			loading: !1,
+			striped: !1,
+			variant: "plain",
+			hoverable: !1,
+			stickyHeader: !1,
+			paginationAlign: "end",
+			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) {
+			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;
+			}
+		}), et = c(() => q.value.options.map((e) => ({
+			value: e,
+			label: String(e)
+		}))), tt = c(() => {
+			let e = z.value.customProps?.perPage?.customProps;
+			return {
+				...e,
+				listbox: {
+					showCheckmark: !1,
+					...e?.listbox,
+					customProps: {
+						...e?.listbox?.customProps,
+						menu: {
+							matchWidth: !0,
+							...e?.listbox?.customProps?.menu
+						}
+					}
+				}
+			};
+		}), 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), _({
+								key: e.id,
+								align: w(Ve)(e)
+							}, { ref_for: !0 }, w(Pe)(e)), {
+								default: E(() => [e.isSelection && w(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
+								}, 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,
+									options: e.filterOptions,
+									searchable: e.searchable,
+									multiple: e.filterMultiple,
+									"search-value": e.searchQuery,
+									onApply: (t, n) => w(Ze)(e.id, t, n)
+								}, null, 8, [
+									"column-id",
+									"active",
+									"values",
+									"options",
+									"searchable",
+									"multiple",
+									"search-value",
+									"onApply"
+								])) : u("", !0)])) : u("", !0)]),
+								_: 2
+							}, 1040, ["align"]))), 128))]),
+							_: 1
+						}, 16), w(z).loading && w(V) ? (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(We))), [S(e.$slots, "loading", {}, () => [p(w(ee), _({
+									size: "xs",
+									rounded: "none"
+								}, w(z).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), {
+								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)]),
+								_: 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), _({
+								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(nt),
+									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)
+								}, 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(Je)(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: $e(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)({
+									"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(z).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(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", {
+				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: 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, {
+				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)),
+				classes: {
+					...w(z).customProps?.perPage?.classes,
+					root: w(D)("w-20", w(z).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(z).customProps?.pagination), null, 16, [
+				"modelValue",
+				"count",
+				"variant"
+			]))])], 16)) : u("", !0)
+		], 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,11 @@
+import { DataTableVisibilityItem } from './composables/useDataTable';
+type __VLS_Props = {
+    items: DataTableVisibilityItem[];
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    toggle: (columnId: string, hide: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((columnId: string, hide: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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,47 @@
+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";
+//#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({
+	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"
+		}, {
+			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", {
+				key: e.id,
+				role: "menuitemcheckbox",
+				"aria-checked": !e.hidden,
+				onClick: (t) => e.hideable && v("toggle", e.id, !e.hidden),
+				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",
+				"hide-error-message": "",
+				"end-label": e.label,
+				disabled: !e.hideable,
+				"model-value": !e.hidden,
+				classes: { root: "pointer-events-none" }
+			}, null, 8, [
+				"end-label",
+				"disabled",
+				"model-value"
+			])], 8, g))), 128))])]),
+			_: 1
+		}, 8, ["modelValue"]));
+	}
+});
+//#endregion
+export { _ 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,17 @@
+import { DataTableFilterOption } from '@bridge-ui/core/Domain';
+type __VLS_Props = {
+    active: boolean;
+    columnId: string;
+    multiple: boolean;
+    options: DataTableFilterOption[];
+    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;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,132 @@
+import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
+import t from "../Icon/Icon.js";
+import n from "../Button/Button.js";
+import r from "../Menu/Menu.js";
+import i from "../Checkbox/Checkbox.js";
+import a from "../TextField/TextField.js";
+import o from "./DataTableFilterOptions.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, openBlock as g, ref as _, unref as v, watch as y, withCtx as b } from "vue";
+import { flattenDataTableFilterOptionValues as x, setDataTableFilterDraftAll as S, toggleDataTableFilterDraft as C } from "@bridge-ui/core/Domain";
+import { cn as w } from "@bridge-ui/core/Utils";
+//#region src/Components/DataTable/DataTableFilterMenu.vue?vue&type=script&setup=true&lang.ts
+var T = ["aria-pressed"], E = { class: "min-w-52 px-1 pb-0.5 pt-2.5" }, D = {
+	key: 0,
+	class: "px-1 pb-1.5"
+}, O = {
+	key: 1,
+	class: "flex max-h-60 flex-col gap-0.5 overflow-y-auto pb-2"
+}, k = ["aria-checked"], A = { class: "flex justify-end gap-2 border-t border-dark-200 px-2 pb-1 pt-1.5 dark:border-dark-700" }, j = /*@__PURE__*/ m({
+	inheritAttrs: !1,
+	name: "DataTableFilterMenu",
+	__name: "DataTableFilterMenu",
+	props: {
+		active: { type: Boolean },
+		columnId: {},
+		multiple: { type: Boolean },
+		options: {},
+		searchable: { type: Boolean },
+		searchValue: {},
+		values: {}
+	},
+	emits: ["apply"],
+	setup(m, { emit: j }) {
+		let M = m, N = j, P = _(!1), F = _([]), I = _(""), L = e(), R = s(() => L("Search")), z = s(() => x(M.options)), B = s(() => z.value.length > 0 && z.value.every((e) => F.value.includes(e))), V = s(() => {
+			let e = z.value.filter((e) => F.value.includes(e)).length;
+			return e > 0 && e < z.value.length;
+		});
+		y(P, (e) => {
+			e && (I.value = M.searchValue, F.value = [...M.values]);
+		});
+		function H(e, t) {
+			F.value = C(F.value, e, t, M.multiple);
+		}
+		function U() {
+			F.value = S(F.value, z.value, !B.value);
+		}
+		function W() {
+			F.value = [], I.value = "";
+		}
+		function G() {
+			N("apply", F.value, I.value), P.value = !1;
+		}
+		return (e, s) => (g(), c(v(r), {
+			modelValue: P.value,
+			"onUpdate:modelValue": s[1] ||= (e) => P.value = e,
+			placement: "bottom",
+			"custom-props": {
+				root: { class: "relative z-[2] inline-flex items-center leading-none" },
+				trigger: { class: "inline-flex items-center leading-none" }
+			}
+		}, {
+			trigger: b(() => [d("button", {
+				type: "button",
+				"aria-pressed": m.active,
+				"aria-label": "Filter column",
+				class: h(v(w)({
+					"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": !0,
+					"text-primary-600": m.active
+				}))
+			}, [p(v(t), {
+				size: "sm",
+				icon: "filter"
+			})], 10, T)]),
+			default: b(() => [d("div", E, [
+				m.searchable ? (g(), u("div", D, [p(v(a), {
+					size: "sm",
+					"hide-error-message": "",
+					"start-icon": "search",
+					modelValue: I.value,
+					"onUpdate:modelValue": s[0] ||= (e) => I.value = e,
+					"aria-label": R.value,
+					placeholder: R.value
+				}, null, 8, [
+					"modelValue",
+					"aria-label",
+					"placeholder"
+				])])) : l("", !0),
+				m.options.length > 0 ? (g(), u("div", O, [m.multiple && z.value.length > 0 ? (g(), u("div", {
+					key: 0,
+					role: "menuitemcheckbox",
+					"aria-checked": B.value,
+					onClick: U,
+					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"
+				}, [p(v(i), {
+					size: "sm",
+					"hide-error-message": "",
+					"model-value": B.value,
+					"end-label": "Select all items",
+					indeterminate: V.value,
+					classes: { root: "pointer-events-none" }
+				}, null, 8, ["model-value", "indeterminate"])], 8, k)) : l("", !0), p(o, {
+					options: m.options,
+					draft: F.value,
+					multiple: m.multiple,
+					onToggle: H,
+					name: `filter-${m.columnId}`
+				}, null, 8, [
+					"options",
+					"draft",
+					"multiple",
+					"name"
+				])])) : l("", !0),
+				d("div", A, [p(v(n), {
+					size: "sm",
+					variant: "outline",
+					onClick: W
+				}, {
+					default: b(() => [...s[2] ||= [f(" Reset ", -1)]]),
+					_: 1
+				}), p(v(n), {
+					size: "sm",
+					onClick: G
+				}, {
+					default: b(() => [...s[3] ||= [f("OK", -1)]]),
+					_: 1
+				})])
+			])]),
+			_: 1
+		}, 8, ["modelValue"]));
+	}
+});
+//#endregion
+export { j as default };

package/dist/Components/DataTable/DataTableFilterOptions.js

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