@webitel/ui-sdk 26.8.94 → 26.8.96

package/dist/wt-table-DHpnLu_f.js

@@ -0,0 +1,438 @@
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { l as t } from "./enums-B_9ZBu01.js";
+import { t as n } from "./wt-badge-tosjsmJU.js";
+import { t as r } from "./vue-i18n-B88GcHzn.js";
+import { n as i, t as a } from "./sortQueryAdapters-CyYXvnDN.js";
+import { t as o } from "./wt-icon-btn-DDElLZil.js";
+import { t as s } from "./composables-OP5kSvlh.js";
+import { t as c } from "./wt-popover-DuZFw3bg.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as h, createTextVNode as g, createVNode as _, defineComponent as v, guardReactiveProps as y, nextTick as b, normalizeClass as x, normalizeProps as S, normalizeStyle as C, onMounted as w, onUnmounted as T, openBlock as E, ref as D, renderList as ee, renderSlot as O, resolveComponent as k, resolveDirective as te, toDisplayString as A, unref as j, useSlots as M, useTemplateRef as ne, withCtx as N, withDirectives as P, withModifiers as F } from "vue";
+//#region src/components/wt-table/_internals/wt-table-column-filter.vue?vue&type=script&setup=true&lang.ts
+var I = ["onPointerenter", "onPointerleave"], L = /*#__PURE__*/ e(/* @__PURE__ */ v({
+	__name: "wt-table-column-filter",
+	props: { active: { type: Boolean } },
+	setup(e) {
+		let r = e, i = M(), a = (e, t) => {
+			r.active && i.preview && t(e);
+		}, s = (e, t, n) => {
+			n(), t(e);
+		};
+		return (r, i) => (E(), d(c, { class: "wt-table-column-filter" }, {
+			activator: N(({ toggle: l }) => [_(c, { class: "wt-table-column-filter__preview" }, {
+				activator: N(({ show: r, hide: c }) => [m("div", {
+					class: "wt-table-column-filter__wrapper",
+					"data-pc-section": "columnfilterbutton",
+					onPointerenter: (e) => a(e, r),
+					onPointerleave: c
+				}, [_(n, { hidden: !e.active }, {
+					default: N(() => [_(o, {
+						icon: "table-filter",
+						size: j(t).SM,
+						onClick: (e) => s(e, l, c),
+						onMousedown: i[0] ||= F(() => {}, ["stop"])
+					}, null, 8, ["size", "onClick"])], void 0, !0),
+					_: 2
+				}, 1032, ["hidden"])], 40, I)]),
+				default: N(() => [O(r.$slots, "preview", {}, void 0, !0)]),
+				_: 2
+			}, 1024)]),
+			default: N(({ hide: e }) => [O(r.$slots, "default", S(y({ hide: e })), void 0, !0)]),
+			_: 3
+		}));
+	}
+}), [["__scopeId", "data-v-e55022a4"]]), R = { class: "wt-table" }, z = {
+	key: 0,
+	class: "wt-table__empty"
+}, B = { class: "wt-table__th__title" }, V = { class: "wt-table__td__actions" }, H = /*#__PURE__*/ e(/* @__PURE__ */ v({
+	__name: "wt-table",
+	props: {
+		headers: { default: () => [] },
+		data: { default: () => [] },
+		sortable: {
+			type: Boolean,
+			default: !1
+		},
+		selectable: {
+			type: Boolean,
+			default: !0
+		},
+		selected: {},
+		gridActions: {
+			type: Boolean,
+			default: !0
+		},
+		fixedActions: {
+			type: Boolean,
+			default: !1
+		},
+		headless: {
+			type: Boolean,
+			default: !1
+		},
+		stripedRows: {
+			type: Boolean,
+			default: !1
+		},
+		rowReorder: {
+			type: Boolean,
+			default: !1
+		},
+		dataKey: { default: "" },
+		isRowReorderDisabled: {
+			type: Function,
+			default: () => !1
+		},
+		rowExpansion: {
+			type: Boolean,
+			default: !1
+		},
+		rowClass: {
+			type: Function,
+			default: () => ""
+		},
+		rowStyle: {
+			type: Function,
+			default: () => ({})
+		},
+		resizableColumns: {
+			type: Boolean,
+			default: !1
+		},
+		reorderableColumns: {
+			type: Boolean,
+			default: !1
+		},
+		rowExpansionDisabled: {
+			type: Function,
+			default: () => !1
+		},
+		lazy: {
+			type: Boolean,
+			default: !1
+		},
+		onLoading: {},
+		loading: { type: Boolean },
+		itemSize: { default: 40 },
+		value: {},
+		rows: {},
+		first: {},
+		totalRecords: {},
+		paginator: { type: Boolean },
+		paginatorPosition: {},
+		alwaysShowPaginator: { type: Boolean },
+		paginatorTemplate: {},
+		pageLinkSize: {},
+		rowsPerPageOptions: {},
+		currentPageReportTemplate: {},
+		loadingIcon: {},
+		sortField: {},
+		sortOrder: {},
+		nullSortOrder: {},
+		defaultSortOrder: {},
+		multiSortMeta: {},
+		sortMode: {},
+		removableSort: { type: Boolean },
+		filters: {},
+		filterDisplay: {},
+		globalFilterFields: {},
+		filterLocale: {},
+		selection: {},
+		selectionMode: {},
+		compareSelectionBy: {},
+		metaKeySelection: { type: Boolean },
+		contextMenu: { type: Boolean },
+		contextMenuSelection: {},
+		selectAll: {},
+		rowHover: { type: Boolean },
+		csvSeparator: {},
+		exportFilename: {},
+		exportFunction: {},
+		columnResizeMode: {},
+		expandedRows: {},
+		expandedRowIcon: {},
+		collapsedRowIcon: {},
+		rowGroupMode: {},
+		groupRowsBy: {},
+		expandableRowGroups: { type: Boolean },
+		expandedRowGroups: {},
+		stateStorage: {},
+		stateKey: {},
+		editMode: {},
+		editingRows: {},
+		scrollable: { type: Boolean },
+		scrollHeight: {},
+		virtualScrollerOptions: {},
+		frozenValue: {},
+		breakpoint: {},
+		showHeaders: { type: Boolean },
+		showGridlines: { type: Boolean },
+		highlightOnSelect: { type: Boolean },
+		size: {},
+		tableStyle: {},
+		tableClass: {},
+		tableProps: {},
+		filterInputProps: {},
+		filterButtonProps: {},
+		editButtonProps: {},
+		dt: {},
+		pt: {},
+		ptOptions: {},
+		unstyled: { type: Boolean }
+	},
+	emits: [
+		"sort",
+		"update:selected",
+		"reorder:row",
+		"column-resize",
+		"column-reorder"
+	],
+	setup(e, { emit: t }) {
+		let n = e, { t: o } = r(), c = M(), v = t, y = ({ dragIndex: e, dropIndex: t }) => v("reorder:row", {
+			oldIndex: e,
+			newIndex: t
+		}), S = ne("table"), j = D(0), I = D([]), { addTableDragListener: H, removeTableDragListener: U } = s(S, n.reorderableColumns), W = u(() => n.selectable ? n.selected || n.data.filter((e) => e._isSelected) : []), G = u(() => {
+			let e = n.headers.map((e) => !e.text && e.locale ? {
+				...e,
+				text: typeof e.locale == "string" ? o(e.locale) : o(...e.locale)
+			} : e), t = e.filter((e) => e.reorderable === !1), r = e.filter((e) => e.reorderable !== !1);
+			return [...t, ...r];
+		}), K = [
+			"row-select",
+			"row-reorder",
+			"row-actions",
+			"row-expander"
+		], q = u(() => [...G.value.filter((e) => e.reorderable === !1).map((e) => e.field || e.value), ...K]), J = (e) => e.show === !1, Y = (e) => ({ minWidth: e.width || "140px" }), X = u(() => Object.keys(c).some((e) => e.includes("-footer"))), re = u(() => Object.keys(c).some((e) => e === "footer")), Z = u(() => !!c.empty && !n.loading && !n.data.length), Q = u(() => W.value.length === n.data.length && n.data.length > 0), ie = u(() => n.headers.find((e) => e.sort === a.ASC || e.sort === a.DESC)?.field ?? null), ae = ({ sortField: e }) => {
+			let t = G.value.find((t) => t.field === e);
+			if (!t || !$(t)) return;
+			let n = i(t.sort);
+			v("sort", t, n);
+		}, $ = ({ sort: e }) => n.sortable && e !== void 0, oe = () => {
+			n.selected ? Q.value ? v("update:selected", []) : v("update:selected", [...n.data]) : Q.value ? n.data.forEach((e) => {
+				e._isSelected = !1;
+			}) : n.data.forEach((e) => {
+				e._isSelected = !0;
+			});
+		}, se = (e, t) => {
+			n.selected ? t ? v("update:selected", [...W.value, e]) : v("update:selected", W.value.filter((t) => t !== e)) : e._isSelected = !e._isSelected;
+		}, ce = ({ element: e }) => {
+			let t = e.getAttribute("data-column-field"), n = getComputedStyle(e), r = Number.parseFloat(n.paddingLeft), i = Number.parseFloat(n.paddingRight), a = e.offsetWidth - r - i;
+			v("column-resize", {
+				columnName: t,
+				columnWidth: `${a}px`
+			});
+		}, le = () => {
+			let e = S.value?.$el?.querySelector(".p-datatable-table-container")?.scrollLeft, t = S.value?.d_columnOrder.filter((e) => !q.value.includes(e));
+			j.value += 1, v("column-reorder", t), b(() => {
+				H();
+				let t = S.value?.$el?.querySelector(".p-datatable-table-container");
+				t && (t.scrollLeft = e);
+			});
+		}, ue = (e) => I.value.some((t) => t?.id === e?.id), de = (e) => {
+			let t = I.value.findIndex((t) => t.id === e.id);
+			t === -1 ? I.value.push(e) : I.value.splice(t, 1);
+		}, fe = u(() => {
+			if (n.lazy) return {
+				lazy: n.lazy,
+				onLazyLoad: n.onLoading,
+				itemSize: n.itemSize,
+				numToleratedItems: n.data.length,
+				totalRecords: n.data.length,
+				autoSize: !0
+			};
+		});
+		return w(() => {
+			H();
+		}), T(() => {
+			U();
+		}), (t, r) => {
+			let i = k("wt-icon-btn"), a = k("p-column"), o = k("wt-icon"), s = k("wt-checkbox"), c = k("p-table"), u = te("tooltip");
+			return E(), p("div", R, [Z.value ? (E(), p("div", z, [O(t.$slots, "empty", {}, void 0, !0)])) : f("", !0), (E(), d(c, {
+				key: j.value,
+				ref_key: "table",
+				ref: S,
+				"expanded-rows": I.value,
+				"reorderable-columns": e.reorderableColumns,
+				"resizable-columns": e.resizableColumns,
+				"row-class": e.rowClass,
+				"row-style": e.rowStyle,
+				"show-headers": !e.headless,
+				"striped-rows": e.stripedRows,
+				value: e.data,
+				"sort-field": ie.value,
+				"data-key": n.dataKey,
+				class: x([{ "wt-table__wrapper--overlay": Z.value }, "wt-table"]),
+				"column-resize-mode": "expand",
+				lazy: "",
+				"scroll-height": "flex",
+				scrollable: "",
+				"virtual-scroller-options": fe.value,
+				pt: { tableContainer: "wt-scrollbar" },
+				onSort: ae,
+				"onUpdate:expandedRows": r[0] ||= (e) => I.value = e,
+				onColumnResizeEnd: ce,
+				onColumnReorder: le,
+				onRowReorder: y
+			}, h({
+				expansion: N(({ data: e }) => [m("div", null, [O(t.$slots, "expansion", { item: e }, void 0, !0)])]),
+				default: N(() => [
+					e.rowExpansion ? (E(), d(a, {
+						key: 0,
+						pt: { columnresizer: { class: { hidden: !0 } } },
+						"reorderable-column": !1,
+						"body-style": "width: 1%;",
+						"column-key": "row-expander",
+						"header-style": "width: 1%;"
+					}, {
+						body: N(({ data: e }) => [_(i, {
+							disabled: n.rowExpansionDisabled(e),
+							icon: ue(e) ? "arrow-down" : "arrow-right",
+							onClick: F((t) => de(e), ["stop"])
+						}, null, 8, [
+							"disabled",
+							"icon",
+							"onClick"
+						])]),
+						_: 1
+					})) : f("", !0),
+					e.rowReorder ? (E(), d(a, {
+						key: 1,
+						pt: { columnresizer: { class: { hidden: !0 } } },
+						"reorderable-column": !1,
+						"body-style": "width: 1%;",
+						"column-key": "row-reorder",
+						"header-style": "width: 1%;",
+						"row-reorder": ""
+					}, {
+						body: N(({ data: t }) => [e.isRowReorderDisabled(t) ? f("", !0) : (E(), d(o, {
+							key: 0,
+							"data-pc-section": "reorderablerowhandle",
+							icon: "move"
+						}))]),
+						_: 1
+					})) : f("", !0),
+					e.selectable ? (E(), d(a, {
+						key: 2,
+						pt: { columnresizer: { class: { hidden: !0 } } },
+						"reorderable-column": !1,
+						"body-style": "width: 1%;",
+						"column-key": "row-select",
+						"header-style": "width: 1%;"
+					}, {
+						header: N(() => [_(s, {
+							selected: Q.value,
+							"onUpdate:selected": oe
+						}, null, 8, ["selected"])]),
+						body: N(({ data: e }) => [e ? (E(), d(s, {
+							key: 0,
+							selected: W.value.includes(e),
+							"onUpdate:selected": (t) => se(e, t)
+						}, null, 8, ["selected", "onUpdate:selected"])) : f("", !0)]),
+						_: 1
+					})) : f("", !0),
+					(E(!0), p(l, null, ee(G.value, (e, n) => (E(), d(a, {
+						key: e.value,
+						"column-key": e.field || e.value,
+						field: e.field,
+						"reorderable-column": e.reorderable !== !1,
+						hidden: J(e),
+						pt: { root: { "data-column-field": e.field } },
+						sortable: $(e)
+					}, h({
+						header: N(() => [O(t.$slots, `header-${e.value}`, {
+							index: n,
+							header: e
+						}, () => [m("div", {
+							style: C(Y(e)),
+							class: "wt-table__th__content typo-body-1-bold"
+						}, [
+							P((E(), p("span", B, [g(A(e.text), 1)])), [[u, e.text]]),
+							e.sort === "asc" ? (E(), d(o, {
+								key: 0,
+								class: "wt-table__th__sort-arrow wt-table__th__sort-arrow--asc",
+								icon: "sort-arrow-up",
+								size: "sm"
+							})) : e.sort === "desc" ? (E(), d(o, {
+								key: 1,
+								class: "wt-table__th__sort-arrow wt-table__th__sort-arrow--desc",
+								icon: "sort-arrow-down",
+								size: "sm"
+							})) : f("", !0),
+							e.filter && t.$slots["column-filter"] ? (E(), d(L, {
+								key: 2,
+								active: !!e.filtered
+							}, {
+								default: N(({ hide: n }) => [O(t.$slots, "column-filter", {
+									header: e,
+									hide: n,
+									formView: !0
+								}, void 0, !0)]),
+								preview: N(() => [O(t.$slots, "column-filter", {
+									header: e,
+									formView: !1
+								}, void 0, !0)]),
+								_: 2
+							}, 1032, ["active"])) : f("", !0)
+						], 4)], !0)]),
+						body: N(({ data: n, index: r }) => [m("div", {
+							style: C(Y(e)),
+							class: "wt-table__td__content typo-body-1"
+						}, [n ? O(t.$slots, e.value, {
+							key: 0,
+							index: r,
+							item: n
+						}, () => [g(A(n[e.value]), 1)], !0) : f("", !0)], 4)]),
+						sorticon: N(() => []),
+						_: 2
+					}, [X.value ? {
+						name: "footer",
+						fn: N(() => [O(t.$slots, `${e.value}-footer`, {}, void 0, !0)]),
+						key: "0"
+					} : void 0]), 1032, [
+						"column-key",
+						"field",
+						"reorderable-column",
+						"hidden",
+						"pt",
+						"sortable"
+					]))), 128)),
+					e.gridActions ? (E(), d(a, {
+						key: 3,
+						frozen: e.fixedActions,
+						"reorderable-column": !1,
+						"align-frozen": "right",
+						"column-key": "row-actions",
+						style: { width: "112px" }
+					}, {
+						header: N(() => [O(t.$slots, "actions-header", {}, void 0, !0)]),
+						body: N(({ data: e, index: n }) => [m("div", V, [e ? O(t.$slots, "actions", {
+							key: 0,
+							index: n,
+							item: e
+						}, void 0, !0) : f("", !0)])]),
+						_: 3
+					}, 8, ["frozen"])) : f("", !0)
+				], void 0, !0),
+				_: 2
+			}, [re.value ? {
+				name: "footer",
+				fn: N(() => [O(t.$slots, "footer", {}, void 0, !0)]),
+				key: "0"
+			} : void 0]), 1032, [
+				"expanded-rows",
+				"reorderable-columns",
+				"resizable-columns",
+				"row-class",
+				"row-style",
+				"show-headers",
+				"striped-rows",
+				"value",
+				"sort-field",
+				"data-key",
+				"class",
+				"virtual-scroller-options"
+			]))]);
+		};
+	}
+}), [["__scopeId", "data-v-ac0e4169"]]);
+//#endregion
+export { H as default };

package/dist/{wt-toast-BcgNZFCD.js → wt-toast-DKjRJFE2.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./wt-icon-iRDqWkjp.js";
+import { t as e } from "./wt-icon-ClDNfV5I.js";
 import { i as t, l as n } from "./enums-B_9ZBu01.js";
 import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, normalizeProps as d, normalizeStyle as f, openBlock as p, resolveComponent as m, toDisplayString as h, unref as g, useAttrs as _, withCtx as v } from "vue";
 //#region node_modules/mitt/dist/mitt.mjs

package/dist/{wt-tree-table-D4nCNUq_.js → wt-tree-table-DDH6vMh7.js}

@@ -1,6 +1,7 @@
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { n as t } from "./sortQueryAdapters-CyYXvnDN.js";
-import { n, t as r } from "./wt-icon-btn-BzraLc-w.js";
+import { t as n } from "./wt-checkbox-BBdi-1oS.js";
+import { t as r } from "./wt-icon-btn-DDElLZil.js";
 import { t as i } from "./useWtTable-CUpN0LZ5.js";
 import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, onMounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveComponent as S, toDisplayString as C, toRef as w, unref as T, withCtx as E, withModifiers as D } from "vue";
 //#region src/components/wt-tree-table-row/wt-tree-table-row.vue?vue&type=script&setup=true&lang.ts

package/dist/{wt-type-extension-value-input-CnKUoOuC.js → wt-type-extension-value-input-ZqfUFvcs.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./clients-Pw9u3exJ.js";
-import { a as t, o as n, r, s as i } from "./components-DuzJmfos.js";
+import { t as e } from "./clients-9rILOBrM.js";
+import { a as t, o as n, r, s as i } from "./components-Dost4BNg.js";
 import { t as a } from "./enums-B_9ZBu01.js";
 import { t as o } from "./vue-i18n-B88GcHzn.js";
 import { computed as s, createBlock as c, createCommentVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, openBlock as m, renderSlot as h, resolveComponent as g, unref as _, useModel as v } from "vue";

package/dist/{wt-vidstack-player-BBRsZ-GL.js → wt-vidstack-player-BtSrpzDY.js}

@@ -1,8 +1,8 @@
-import { D as e } from "./components-DuzJmfos.js";
+import { D as e } from "./components-Dost4BNg.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as n } from "./enums-B_9ZBu01.js";
-import "./wt-button-BwPz__rU.js";
-import { t as r } from "./wt-icon-btn-BzraLc-w.js";
+import "./wt-button-CNQAK85M.js";
+import { t as r } from "./wt-icon-btn-DDElLZil.js";
 import { $ as i, C as a, D as o, F as s, G as c, H as l, I as u, J as d, K as f, L as p, M as m, N as h, O as g, P as ee, Q as _, R as te, S as v, U as ne, V as y, W as b, X as x, Y as re, Z as S, _ as C, a as ie, b as ae, c as oe, d as se, et as ce, f as le, g as ue, h as de, i as w, it as fe, j as pe, k as me, l as T, m as he, n as E, nt as D, o as O, ot as ge, p as k, q as A, r as j, rt as _e, t as ve, tt as ye, u as be, v as M, w as xe, y as Se, z as Ce } from "./vidstack-D9mvYVIz-DesuYgKV.js";
 import { _ as N, a as we, c as Te, d as Ee, f as De, g as Oe, h as ke, i as Ae, l as je, m as Me, n as Ne, o as Pe, p as Fe, r as Ie, s as Le, t as P, u as Re } from "./vidstack-CgfrU1hS-CNTJkyzm.js";
 import { _ as ze, a as Be, c as Ve, f as He, g as Ue, h as We, i as Ge, l as Ke, n as qe, r as Je, s as Ye, t as Xe, u as Ze, v as Qe, x as $e, y as et } from "./useVidstackSrc-aQcqC_v0.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.94",
+	"version": "26.8.96",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",

package/src/assets/icons/sprite/index.ts

@@ -222,6 +222,7 @@ import stt from './stt.svg?raw';
 import sttDownload from './stt-download.svg?raw';
 import sttSearch from './stt-search.svg?raw';
 import table from './table.svg?raw';
+import tableFilter from './table-filter.svg?raw';
 import telegramBot from './telegram-bot.svg?raw';
 import tick from './tick.svg?raw';
 import tile from './tile.svg?raw';
@@ -354,6 +355,7 @@ export default objCamelToKebab({
 	exportExel,
 	'eye--closed': eyeClosed,
 	'eye--opened': eyeOpened,
+	'table-filter': tableFilter,
 	filter,
 	flipCamera,
 	flows,

package/src/assets/icons/sprite/table-filter.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 12.3428C13.0001 11.6758 13.2223 11.0275 13.6319 10.501L17.9102 5H6.08986L10.3682 10.501C10.7777 11.0275 10.9999 11.6758 11 12.3428V19H13V12.3428ZM15 20C15 20.5177 14.6067 20.9438 14.1026 20.9951L14 21H10C9.48234 21 9.05623 20.6067 9.0049 20.1025L9.00001 20V12.3428C8.99996 12.1762 8.95821 12.0132 8.8799 11.8682L8.78908 11.7295L3.2549 4.61426C2.77603 3.99857 3.15764 3.11857 3.89259 3.01074L4.04494 3H19.9551C20.7872 3 21.256 3.9574 20.7451 4.61426L15.211 11.7295C15.0745 11.9049 15.0001 12.1205 15 12.3428V20Z"/>
+</svg>

package/src/components/wt-table/_internals/wt-table-column-filter.vue

@@ -0,0 +1,76 @@
+<template>
+  <wt-popover class="wt-table-column-filter">
+    <template #activator="{ toggle }">
+      <wt-popover class="wt-table-column-filter__preview">
+        <template #activator="{ show, hide }">
+          <div
+            class="wt-table-column-filter__wrapper"
+            data-pc-section="columnfilterbutton"
+            @pointerenter="showPreview($event, show)"
+            @pointerleave="hide"
+          >
+            <wt-badge :hidden="!active">
+              <wt-icon-btn
+                icon="table-filter"
+                :size="ComponentSize.SM"
+                @click="openFilter($event, toggle, hide)"
+                @mousedown.stop
+              />
+            </wt-badge>
+          </div>
+        </template>
+
+        <template #default>
+          <slot name="preview" />
+        </template>
+      </wt-popover>
+    </template>
+
+    <template #default="{ hide }">
+      <slot v-bind="{ hide }" />
+    </template>
+  </wt-popover>
+</template>
+
+<script setup lang="ts">
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { useSlots } from 'vue';
+import WtBadge from '../../wt-badge/wt-badge.vue';
+import WtIconBtn from '../../wt-icon-btn/wt-icon-btn.vue';
+import WtPopover from '../../wt-popover/wt-popover.vue';
+
+/**
+ * Column header filter icon: popover content from the default slot (scope `hide`); while
+ * `active`, hovering shows the `preview` slot in a second popover instead.
+ * `data-pc-section="columnfilterbutton"` stops PrimeVue sorting on click here while still
+ * bubbling to `document` (closes other popovers); `@mousedown.stop` blocks column drag.
+ *
+ * [WTEL-7727](https://webitel.atlassian.net/browse/WTEL-7727)
+ */
+const props = defineProps<{
+	/** Shows the badge on the icon (a filter is applied to this column) */
+	active?: boolean;
+}>();
+
+const slots = useSlots();
+
+const showPreview = (event: Event, show: (event: Event) => void) => {
+	if (props.active && slots.preview) show(event);
+};
+
+const openFilter = (
+	event: Event,
+	toggle: (event: Event) => void,
+	hide: () => void,
+) => {
+	hide();
+	toggle(event);
+};
+</script>
+
+<style scoped>
+.wt-table-column-filter__wrapper {
+  display: flex;
+  align-items: center;
+}
+</style>

package/src/components/wt-table/types/WtTable.ts

@@ -3,6 +3,12 @@ import type { SortSymbols } from '../../../scripts/sortQueryAdapters';
 /** derived so adding a symbol to `SortSymbols` widens this automatically */
 export type WtTableSortOrder = (typeof SortSymbols)[keyof typeof SortSymbols];
 
+export type WtTableHeaderFilter =
+	| string
+	| {
+			name: string;
+	  };
+
 export type WtTableHeader = {
 	value: string;
 	/**
@@ -19,6 +25,20 @@ export type WtTableHeader = {
 	show?: boolean;
 	/** `false` excludes the column from drag-to-reorder and pins it to the start */
 	reorderable?: boolean;
+	/**
+	 * Filter shown in the column header popover (`column-filter` slot).
+	 * Set only on columns that have a header filter.
+	 *
+	 * [WTEL-7727](https://webitel.atlassian.net/browse/WTEL-7727)
+	 */
+	filter?: WtTableHeaderFilter;
+	/**
+	 * Shows the badge on the filter icon. Set by whoever owns `headers` (mirrors `sort`: read
+	 * here, written by the caller), not derived from a separate table-wide prop.
+	 *
+	 * [WTEL-7727](https://webitel.atlassian.net/browse/WTEL-7727)
+	 */
+	filtered?: boolean;
 };
 
 /** TODO(types): every cell is read through a header-driven runtime `field` key. */