@platforma-sdk/ui-vue 1.63.12 → 1.65.0

package/dist/components/PlAdvancedFilter/PlAdvancedFilter.vue2.js

@@ -2,13 +2,16 @@ import { DEFAULT_FILTERS as e, DEFAULT_FILTER_TYPE as t, SUPPORTED_FILTER_TYPES
 import r from "./OperandButton.js";
 import { createNewGroup as i, getNewId as a, isValidColumnId as o } from "./utils.js";
 import s from "./FilterEditor.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeModels as _, normalizeClass as v, openBlock as y, renderList as b, renderSlot as x, toRaw as S, unref as C, useModel as w, withCtx as T } from "vue";
-import { PlBtnSecondary as E, PlCheckbox as D, PlElementList as O } from "@milaboratories/uikit";
+import { produce as c } from "immer";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, openBlock as y, renderList as b, renderSlot as x, unref as S, withCtx as C } from "vue";
+import { PlBtnSecondary as w, PlCheckbox as T, PlElementList as E } from "@milaboratories/uikit";
 //#region src/components/PlAdvancedFilter/PlAdvancedFilter.vue?vue&type=script&setup=true&lang.ts
-var k = ["onDrop"], A = /* @__PURE__ */ g({
+var D = ["onDrop"], O = /* @__PURE__ */ _({
 	__name: "PlAdvancedFilter",
-	props: /* @__PURE__ */ _({
-		items: {},
+	props: {
+		filters: {},
+		onUpdateFilters: {},
+		options: {},
 		supportedFilters: { default: () => n },
 		enableDnd: {
 			type: Boolean,
@@ -18,143 +21,200 @@ var k = ["onDrop"], A = /* @__PURE__ */ g({
 			type: Boolean,
 			default: !1
 		},
+		enableToggling: {
+			type: Boolean,
+			default: !1
+		},
+		isPinned: {
+			type: Function,
+			default: () => !1
+		},
+		isRemovable: {
+			type: Function,
+			default: () => !0
+		},
+		isDraggable: {
+			type: Function,
+			default: () => !0
+		},
+		isCompletedGroup: {
+			type: Function,
+			default: () => !1
+		},
 		getSuggestOptions: {}
-	}, {
-		filters: { required: !0 },
-		filtersModifiers: {}
-	}),
-	emits: ["update:filters"],
+	},
 	setup(n) {
-		let g = w(n, "filters"), _ = n, A = l(() => _.items[0]?.id), j = [{
+		let _ = n, O = (e) => {
+			_.onUpdateFilters(c(_.filters, e));
+		}, k = u(() => _.options[0]?.id), A = [{
 			id: -1,
 			type: "and",
 			filters: [],
 			isExpanded: !0
-		}];
+		}], j = u({
+			get: () => _.filters.filters,
+			set: (e) => _.onUpdateFilters({
+				..._.filters,
+				filters: e
+			})
+		});
 		function M() {
-			if (g.value.type !== "or" && g.value.type !== "and") throw Error("Invalid model structure, expected root to be \"or\" or \"and\" group");
-			return g.value.filters;
+			if (_.filters.type !== "or" && _.filters.type !== "and") throw Error("Invalid model structure, expected root to be \"or\" or \"and\" group");
+			return _.filters.filters;
 		}
-		function N(e) {
-			let t = M()[e];
-			if (t.type !== "and" && t.type !== "or" && t.type !== "not") throw Error("Invalid group structure, expected \"and\", \"or\" or \"not\" group");
-			return t;
+		function N(e, t) {
+			let n = e.filters[t];
+			if (n.type === "not") {
+				if (n.filter.type !== "and" && n.filter.type !== "or") throw Error("Invalid group structure, expected \"and\" or \"or\" group inside \"not\"");
+				return n.filter;
+			}
+			if (n.type !== "and" && n.type !== "or") throw Error("Invalid group structure, expected \"and\", \"or\" or \"not\" group");
+			return n;
 		}
 		function P(e) {
-			let t = N(e);
-			if (t.type !== "not") return t;
-			if (t.filter.type !== "and" && t.filter.type !== "or") throw Error("Invalid group structure, expected \"and\" or \"or\" group inside \"not\"");
-			return t.filter;
+			return e.type === "not" ? e.filter : e;
 		}
 		function F(n, r) {
-			P(n).filters.push({
-				...e[t],
-				column: r,
-				id: a(),
-				isExpanded: !0
+			O((i) => {
+				N(i, n).filters.push({
+					...e[t],
+					column: r,
+					id: a(),
+					isExpanded: !0
+				});
 			});
 		}
 		function I(e, t) {
-			let n = P(e);
-			n.filters.length === 1 && t === 0 ? z(e) : n.filters.splice(t, 1);
+			O((n) => {
+				let r = N(n, e);
+				r.filters.length === 1 && t === 0 ? n.filters.splice(e, 1) : r.filters.splice(t, 1);
+			});
 		}
 		function L(e) {
-			let t = M(), n = t[e];
-			if (n.type === "not") {
-				if (n.filter.type !== "and" && n.filter.type !== "or") throw Error("Invalid group structure, expected \"and\" or \"or\" group inside \"not\"");
-				t[e] = n.filter;
-			} else {
-				let n = t[e].type;
-				if (n !== "and" && n !== "or" && n !== "not") throw Error("Invalid group structure, expected \"and\", \"or\" or \"not\" group");
-				t[e] = {
-					id: a(),
-					isExpanded: !0,
-					type: "not",
-					filter: t[e]
-				};
-			}
+			O((t) => {
+				let n = t.filters[e];
+				if (n.type === "not") {
+					if (n.filter.type !== "and" && n.filter.type !== "or") throw Error("Invalid group structure, expected \"and\" or \"or\" group inside \"not\"");
+					t.filters[e] = {
+						...t.filters[e],
+						...n.filter
+					};
+				} else {
+					let n = t.filters[e].type;
+					if (n !== "and" && n !== "or" && n !== "not") throw Error("Invalid group structure, expected \"and\", \"or\" or \"not\" group");
+					t.filters[e] = {
+						...t.filters[e],
+						id: a(),
+						type: "not",
+						filter: t.filters[e]
+					};
+				}
+			});
 		}
 		function R(e) {
-			return e.type === "not" ? e.filter : e;
-		}
-		function z(e) {
-			M().splice(e, 1);
+			O((t) => {
+				t.filters.push(i(e));
+			});
 		}
-		function B(e) {
-			let t = i(e);
-			M().push(t);
+		function z(e, t, n) {
+			O((r) => {
+				N(r, e).filters[t] = n;
+			});
 		}
-		function V(e, t) {
+		function B(e, t) {
 			let n = t.dataTransfer;
 			if (n?.getData("text/plain")) {
 				let t = n.getData("text/plain");
 				o(t) && F(e, t);
 			}
 		}
-		function H(e) {
+		function V(e) {
 			let t = e.dataTransfer;
 			if (t?.getData("text/plain")) {
 				let e = t.getData("text/plain");
-				o(e) && B(e);
+				o(e) && R(e);
 			}
 		}
-		function U(e) {
+		function H(e) {
 			e.preventDefault();
 		}
-		function W(e) {
+		function U(e, t) {
+			O((e) => {
+				e.filters[t].isExpanded = !e.filters[t].isExpanded;
+			});
+		}
+		function W(e, t) {
+			O((e) => {
+				e.filters[t].isSuppressed = !e.filters[t].isSuppressed;
+			});
+		}
+		function G(e, t) {
+			O((n) => {
+				N(n, e).type = t;
+			});
+		}
+		function K(e) {
+			O((t) => {
+				t.type = e;
+			});
+		}
+		function q(e) {
 			if (e.type === "and" || e.type === "or" || e.type === "not") throw Error("Invalid filter structure, expected leaf filter");
 			return e;
 		}
-		function G(e, t, n) {
-			e[t] = S(n);
-		}
-		return (e, t) => (y(), f("div", null, [h(C(O), {
-			items: g.value.filters,
-			"onUpdate:items": t[0] ||= (e) => g.value.filters = e,
+		return (e, t) => (y(), p("div", null, [g(S(E), {
+			items: j.value,
+			"onUpdate:items": t[0] ||= (e) => j.value = e,
 			"get-item-key": (e) => e.id,
 			"item-class": e.$style.filterGroup,
 			"item-class-content": e.$style.filterGroupContent,
 			"item-class-title": e.$style.filterGroupTitle,
 			"is-expanded": (e) => e.isExpanded === !0,
-			"on-expand": (e) => {
-				e.isExpanded = !e.isExpanded;
-			},
-			disableDragging: !1,
-			disableRemoving: !1,
-			disableToggling: !0,
-			disablePinning: !0
+			"on-expand": U,
+			"is-toggled": (e) => e.isSuppressed === !0,
+			"on-toggle": W,
+			"is-pinned": (e, t) => _.isPinned?.(e, t) === !0,
+			"is-pinnable": () => !1,
+			"is-removable": (e, t) => _.isRemovable?.(e, t) === !0,
+			"is-draggable": (e, t) => _.isDraggable?.(e, t) === !0,
+			"disable-toggling": _.enableToggling !== !0,
+			"disable-dragging": !1,
+			"disable-removing": !1
 		}, {
-			"item-title": T(() => [...t[2] ||= [m(" Filter group ", -1)]]),
-			"item-content": T(({ item: r, index: i }) => [p("div", {
-				class: v(e.$style.groupContent),
+			"item-title": C(({ item: n, index: r }) => [x(e.$slots, "group-title", {
+				item: n,
+				index: r
+			}, () => [t[2] ||= h("Filter group", -1)])]),
+			"item-content": C(({ item: r, index: i }) => [m("div", {
+				class: v([e.$style.groupContent, { [e.$style.suppressedLabel]: r.isSuppressed }]),
 				dropzone: "true",
-				onDrop: (e) => V(i, e),
-				onDragover: U
+				onDrop: (e) => B(i, e),
+				onDragover: H
 			}, [
-				h(C(D), {
+				g(S(T), {
 					"model-value": r.type === "not",
 					class: v(e.$style.notCheckbox),
 					"onUpdate:modelValue": (e) => L(i)
 				}, {
-					default: T(() => [...t[3] ||= [m(" Filter Out ", -1)]]),
+					default: C(() => [...t[3] ||= [h(" Filter Out ", -1)]]),
 					_: 1
 				}, 8, [
 					"model-value",
 					"class",
 					"onUpdate:modelValue"
 				]),
-				(y(!0), f(c, null, b(R(r).filters, (e, t) => (y(), u(s, {
+				(y(!0), p(l, null, b(P(r).filters, (e, t) => (y(), d(s, {
 					key: t,
-					filter: W(R(r).filters[t]),
-					operand: R(r).type,
-					"column-options": n.items,
+					filter: q(P(r).filters[t]),
+					operand: P(r).type,
+					"column-options": n.options,
 					"supported-filters": _.supportedFilters,
 					"get-suggest-options": _.getSuggestOptions,
 					"enable-dnd": !!_.enableDnd,
-					"is-last": t === R(r).filters.length - 1,
-					"on-change-operand": (e) => R(r).type = e,
-					"on-delete": () => I(i, t),
-					"onUpdate:filter": (e) => G(R(r).filters, t, e)
+					"is-last": t === P(r).filters.length - 1,
+					onDelete: () => I(i, t),
+					onUpdateFilter: (e) => z(i, t, e),
+					onChangeOperand: (e) => G(i, e)
 				}, null, 8, [
 					"filter",
 					"operand",
@@ -163,35 +223,34 @@ var k = ["onDrop"], A = /* @__PURE__ */ g({
 					"get-suggest-options",
 					"enable-dnd",
 					"is-last",
-					"on-change-operand",
-					"on-delete",
-					"onUpdate:filter"
+					"onDelete",
+					"onUpdateFilter",
+					"onChangeOperand"
 				]))), 128)),
-				_.enableDnd ? (y(), f("div", {
+				_.enableDnd ? (y(), p("div", {
 					key: 0,
 					class: v(e.$style.dropzone)
-				}, [...t[4] ||= [p("div", null, "Drop dimensions here", -1)]], 2)) : (y(), u(C(E), {
+				}, [...t[4] ||= [m("div", null, "Drop dimensions here", -1)]], 2)) : _.isCompletedGroup(r, i) ? f("", !0) : (y(), d(S(w), {
 					key: 1,
 					icon: "add",
-					onClick: (e) => F(i, A.value)
+					onClick: (e) => F(i, k.value)
 				}, {
-					default: T(() => [...t[5] ||= [m(" Add filter ", -1)]]),
+					default: C(() => [...t[5] ||= [h(" Add filter ", -1)]]),
 					_: 1
 				}, 8, ["onClick"]))
-			], 42, k)]),
-			"item-after": T(({ index: t }) => [_.enableAddGroupButton || t < M().length - 1 ? (y(), u(r, {
+			], 42, D)]),
+			"item-after": C(({ index: t }) => [_.enableAddGroupButton || t < M().length - 1 ? (y(), d(r, {
 				key: 0,
 				class: v(e.$style.buttonWrapper),
-				active: g.value.type,
+				active: _.filters.type,
 				disabled: t === M().length - 1,
-				"on-select": (e) => g.value.type = e
+				"on-select": K
 			}, null, 8, [
 				"class",
 				"active",
-				"disabled",
-				"on-select"
-			])) : d("", !0)]),
-			_: 1
+				"disabled"
+			])) : f("", !0)]),
+			_: 3
 		}, 8, [
 			"items",
 			"get-item-key",
@@ -199,10 +258,14 @@ var k = ["onDrop"], A = /* @__PURE__ */ g({
 			"item-class-content",
 			"item-class-title",
 			"is-expanded",
-			"on-expand"
-		]), _.enableAddGroupButton ? (y(), u(C(O), {
+			"is-toggled",
+			"is-pinned",
+			"is-removable",
+			"is-draggable",
+			"disable-toggling"
+		]), _.enableAddGroupButton ? (y(), d(S(E), {
 			key: 0,
-			items: j,
+			items: A,
 			"get-item-key": (e) => e.id,
 			"item-class": e.$style.filterGroup,
 			"item-class-content": e.$style.filterGroupContent,
@@ -213,18 +276,21 @@ var k = ["onDrop"], A = /* @__PURE__ */ g({
 			disableToggling: !0,
 			disablePinning: !0,
 			dropzone: "true",
-			onDrop: H,
-			onDragover: U
+			onDrop: V,
+			onDragover: H
 		}, {
-			"item-title": T(() => [...t[6] ||= [m("Filter group", -1)]]),
-			"item-content": T(() => [n.enableDnd ? (y(), f("div", {
+			"item-title": C(({ item: n, index: r }) => [x(e.$slots, "group-title", {
+				item: n,
+				index: r + M().length
+			}, () => [t[6] ||= h("Filter group", -1)])]),
+			"item-content": C(() => [n.enableDnd ? (y(), p("div", {
 				key: 0,
 				class: v(e.$style.dropzone)
-			}, [...t[7] ||= [p("div", null, "Drop dimensions here", -1)]], 2)) : x(e.$slots, "add-group-buttons", { key: 1 }, () => [h(C(E), {
+			}, [...t[7] ||= [m("div", null, "Drop dimensions here", -1)]], 2)) : x(e.$slots, "add-group-buttons", { key: 1 }, () => [g(S(w), {
 				icon: "add",
-				onClick: t[1] ||= (e) => B(A.value)
+				onClick: t[1] ||= (e) => R(k.value)
 			}, {
-				default: T(() => [...t[8] ||= [m(" Add filter ", -1)]]),
+				default: C(() => [...t[8] ||= [h(" Add filter ", -1)]]),
 				_: 1
 			})])]),
 			_: 3
@@ -233,10 +299,10 @@ var k = ["onDrop"], A = /* @__PURE__ */ g({
 			"item-class",
 			"item-class-content",
 			"item-class-title"
-		])) : d("", !0)]));
+		])) : f("", !0)]));
 	}
 });
 //#endregion
-export { A as default };
+export { O as default };
 
 //# sourceMappingURL=PlAdvancedFilter.vue2.js.map

package/dist/components/PlAdvancedFilter/PlAdvancedFilter.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAdvancedFilter.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlAdvancedFilter/PlAdvancedFilter.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends RootFilter\">\nimport { PlBtnSecondary, PlCheckbox, PlElementList } from \"@milaboratories/uikit\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { computed, toRaw } from \"vue\";\nimport FilterEditor from \"./FilterEditor.vue\";\nimport OperandButton from \"./OperandButton.vue\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS, SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport type {\n  CommonFilter,\n  EditableFilter,\n  NodeFilter,\n  PlAdvancedFilterColumnId,\n  RootFilter,\n  SourceOptionInfo,\n} from \"./types\";\nimport { createNewGroup, getNewId, isValidColumnId } from \"./utils\";\n\nconst model = defineModel<T>(\"filters\", { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    /** List of ids of sources (columns, axes) that can be selected in filters */\n    items: SourceOptionInfo[];\n    /** List of supported filter types */\n    supportedFilters?: typeof SUPPORTED_FILTER_TYPES;\n    /** If true - new filter can be added by droppind element into filter group; else new column is added by button click */\n    enableDnd?: boolean;\n    /** If true - \"Add group\" button is shown below the filter groups */\n    enableAddGroupButton?: boolean;\n    /** Loading function for unique values for Equal/InSet filters and fixed axes options. */\n    getSuggestOptions: (params: {\n      columnId: PlAdvancedFilterColumnId;\n      axisIdx?: number;\n      searchStr: string;\n      searchType: \"value\" | \"label\";\n    }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  }>(),\n  {\n    supportedFilters: () => SUPPORTED_FILTER_TYPES,\n    getSuggestModel: undefined,\n\n    enableDnd: false,\n    enableAddGroupButton: false,\n  },\n);\n\nconst firstColumnId = computed(() => props.items[0]?.id);\nconst emptyGroup: NodeFilter[] = [\n  {\n    id: -1,\n    type: \"and\",\n    filters: [],\n    isExpanded: true,\n  },\n];\n\nfunction getRootGroups() {\n  if (model.value.type !== \"or\" && model.value.type !== \"and\") {\n    throw new Error('Invalid model structure, expected root to be \"or\" or \"and\" group');\n  }\n  return model.value.filters;\n}\n\nfunction getRootGroup(idx: number): NodeFilter {\n  const groups = getRootGroups();\n  const group = groups[idx];\n  if (group.type !== \"and\" && group.type !== \"or\" && group.type !== \"not\") {\n    throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n  }\n  return group;\n}\n\nfunction getRootGroupContent(idx: number): Exclude<NodeFilter, { type: \"not\" }> {\n  const group = getRootGroup(idx);\n\n  if (group.type !== \"not\") {\n    return group;\n  }\n\n  if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n    throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n  }\n\n  return group.filter;\n}\n\nfunction addColumnToGroup(groupIdx: number, selectedSourceId: PlAdvancedFilterColumnId) {\n  const group = getRootGroupContent(groupIdx);\n\n  group.filters.push({\n    ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n    column: selectedSourceId,\n    id: getNewId(),\n    isExpanded: true,\n  } as CommonFilter);\n}\n\nfunction removeFilterFromGroup(groupIdx: number, filterIdx: number) {\n  const group = getRootGroupContent(groupIdx);\n\n  if (group.filters.length === 1 && filterIdx === 0) {\n    removeGroup(groupIdx);\n  } else {\n    group.filters.splice(filterIdx, 1);\n  }\n}\nfunction inverseRootNode(groupIdx: number) {\n  const groups = getRootGroups();\n  const group = groups[groupIdx];\n  if (group.type === \"not\") {\n    if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n      throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n    }\n    groups[groupIdx] = group.filter;\n  } else {\n    const type = groups[groupIdx].type;\n    if (type !== \"and\" && type !== \"or\" && type !== \"not\") {\n      throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n    }\n\n    groups[groupIdx] = {\n      id: getNewId(),\n      isExpanded: true,\n      type: \"not\",\n      filter: groups[groupIdx],\n    };\n  }\n}\n\nfunction getNotContent<T extends CommonFilter>(item: T): Exclude<T, { type: \"not\" }> {\n  return item.type === \"not\"\n    ? (item.filter as Exclude<T, { type: \"not\" }>)\n    : (item as Exclude<T, { type: \"not\" }>);\n}\n\nfunction removeGroup(groupIdx: number) {\n  const groups = getRootGroups();\n  groups.splice(groupIdx, 1);\n}\nfunction addGroup(selectedSourceId: PlAdvancedFilterColumnId) {\n  const newGroup = createNewGroup(selectedSourceId);\n  const groups = getRootGroups();\n  groups.push(newGroup);\n}\n\nfunction handleDropToExistingGroup(groupIdx: number, event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addColumnToGroup(groupIdx, draggedId);\n    }\n  }\n}\nfunction handleDropToNewGroup(event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addGroup(draggedId);\n    }\n  }\n}\nfunction dragOver(event: DragEvent) {\n  event.preventDefault();\n}\n\nfunction validateFilter<T extends CommonFilter>(item: T): EditableFilter {\n  if (item.type === \"and\" || item.type === \"or\" || item.type === \"not\") {\n    throw new Error(\"Invalid filter structure, expected leaf filter\");\n  }\n\n  return item as EditableFilter;\n}\n\nfunction updateFilter(filters: CommonFilter[], idx: number, updatedFilter: EditableFilter) {\n  filters[idx] = toRaw(updatedFilter as CommonFilter);\n}\n</script>\n<template>\n  <div>\n    <PlElementList\n      v-model:items=\"model.filters\"\n      :get-item-key=\"(filter) => filter.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"(filter) => filter.isExpanded === true\"\n      :on-expand=\"\n        (group) => {\n          group.isExpanded = !group.isExpanded;\n        }\n      \"\n      :disableDragging=\"false\"\n      :disableRemoving=\"false\"\n      :disableToggling=\"true\"\n      :disablePinning=\"true\"\n    >\n      <template #item-title> Filter group </template>\n      <template #item-content=\"{ item, index }\">\n        <div\n          :class=\"$style.groupContent\"\n          dropzone=\"true\"\n          @drop=\"(event) => handleDropToExistingGroup(index, event)\"\n          @dragover=\"dragOver\"\n        >\n          <PlCheckbox\n            :model-value=\"item.type === 'not'\"\n            :class=\"$style.notCheckbox\"\n            @update:model-value=\"inverseRootNode(index)\"\n          >\n            Filter Out\n          </PlCheckbox>\n          <template v-for=\"(_, filterIdx) in getNotContent(item).filters\" :key=\"filterIdx\">\n            <FilterEditor\n              :filter=\"validateFilter(getNotContent(item).filters[filterIdx])\"\n              :operand=\"getNotContent(item).type\"\n              :column-options=\"items\"\n              :supported-filters=\"props.supportedFilters\"\n              :get-suggest-options=\"props.getSuggestOptions\"\n              :enable-dnd=\"Boolean(props.enableDnd)\"\n              :is-last=\"filterIdx === getNotContent(item).filters.length - 1\"\n              :on-change-operand=\"(v) => (getNotContent(item).type = v)\"\n              :on-delete=\"() => removeFilterFromGroup(index, filterIdx)\"\n              @update:filter=\"\n                (value) => updateFilter(getNotContent(item).filters, filterIdx, value)\n              \"\n            />\n          </template>\n          <div v-if=\"props.enableDnd\" :class=\"$style.dropzone\">\n            <div>Drop dimensions here</div>\n          </div>\n          <PlBtnSecondary v-else icon=\"add\" @click=\"addColumnToGroup(index, firstColumnId)\">\n            Add filter\n          </PlBtnSecondary>\n        </div>\n      </template>\n      <template #item-after=\"{ index }\">\n        <OperandButton\n          v-if=\"props.enableAddGroupButton || index < getRootGroups().length - 1\"\n          :class=\"$style.buttonWrapper\"\n          :active=\"model.type\"\n          :disabled=\"index === getRootGroups().length - 1\"\n          :on-select=\"(v) => (model.type = v)\"\n        />\n      </template>\n    </PlElementList>\n\n    <!-- Last group - always empty, just for adding new groups -->\n    <PlElementList\n      v-if=\"props.enableAddGroupButton\"\n      :items=\"emptyGroup\"\n      :get-item-key=\"(group) => group.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"() => true\"\n      :disableDragging=\"true\"\n      :disableRemoving=\"true\"\n      :disableToggling=\"true\"\n      :disablePinning=\"true\"\n      dropzone=\"true\"\n      @drop=\"handleDropToNewGroup\"\n      @dragover=\"dragOver\"\n    >\n      <template #item-title>Filter group</template>\n      <template #item-content>\n        <div v-if=\"enableDnd\" :class=\"$style.dropzone\">\n          <div>Drop dimensions here</div>\n        </div>\n        <slot v-else name=\"add-group-buttons\">\n          <PlBtnSecondary icon=\"add\" @click=\"addGroup(firstColumnId)\"> Add filter </PlBtnSecondary>\n        </slot>\n      </template>\n    </PlElementList>\n  </div>\n</template>\n<style module>\n.filterGroup {\n  background: var(--bg-base-light);\n}\n.filterGroup:hover {\n  background: rgba(99, 224, 36, 0.12);\n}\n.filterGroupTitle {\n  background: none;\n}\n.filterGroupContent {\n  padding: 4px 24px 24px 24px;\n}\n.groupContent {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.notCheckbox {\n  margin: 4px 0;\n}\n.dropzone {\n  border-radius: 6px;\n  border: 1.5px dashed var(--color-div-grey);\n  color: var(--txt-03);\n  font-family: Manrope;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  height: 40px;\n  cursor: default;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.buttonWrapper {\n  margin-top: 8px;\n  height: 56px;\n  display: flex;\n  align-items: center;\n}\n:global(.sortable-chosen) .buttonWrapper {\n  visibility: hidden;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"PlAdvancedFilter.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlAdvancedFilter/PlAdvancedFilter.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends RootFilter\">\nimport { PlBtnSecondary, PlCheckbox, PlElementList } from \"@milaboratories/uikit\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { produce } from \"immer\";\nimport { computed } from \"vue\";\nimport FilterEditor from \"./FilterEditor.vue\";\nimport OperandButton from \"./OperandButton.vue\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS, SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport type {\n  CommonFilter,\n  EditableFilter,\n  NodeFilter,\n  Operand,\n  PlAdvancedFilterColumnId,\n  RootFilter,\n  SourceOptionInfo,\n} from \"./types\";\nimport { createNewGroup, getNewId, isValidColumnId } from \"./utils\";\n\nconst props = withDefaults(\n  defineProps<{\n    filters: T;\n    onUpdateFilters: (filters: T) => void;\n    /** List of ids of sources (columns, axes) that can be selected in filters */\n    options: SourceOptionInfo[];\n    /** List of supported filter types */\n    supportedFilters?: typeof SUPPORTED_FILTER_TYPES;\n    /** If true - new filter can be added by droppind element into filter group; else new column is added by button click */\n    enableDnd?: boolean;\n    /** If true - \"Add group\" button is shown below the filter groups */\n    enableAddGroupButton?: boolean;\n    /** If true - eye icon is shown per group to toggle suppression */\n    enableToggling?: boolean;\n    /** Function to determine if a filter is pinned */\n    isPinned?: (item: NodeFilter, index: number) => boolean;\n    /** Function to determine if a filter is removable */\n    isRemovable?: (item: NodeFilter, index: number) => boolean;\n    /** Function to determine if a filter is draggable */\n    isDraggable?: (item: NodeFilter, index: number) => boolean;\n    /** Function to determine if a group is complete */\n    isCompletedGroup?: (group: NodeFilter, index: number) => boolean;\n    /** Loading function for unique values for Equal/InSet filters and fixed axes options. */\n    getSuggestOptions: (params: {\n      columnId: PlAdvancedFilterColumnId;\n      axisIdx?: number;\n      searchStr: string;\n      searchType: \"value\" | \"label\";\n    }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  }>(),\n  {\n    supportedFilters: () => SUPPORTED_FILTER_TYPES,\n    isCompletedGroup: () => false,\n    isPinned: () => false,\n    isRemovable: () => true,\n    isDraggable: () => true,\n\n    getSuggestModel: undefined,\n\n    enableDnd: false,\n    enableAddGroupButton: false,\n    enableToggling: false,\n  },\n);\nconst produceFiltersUpdate = (updater: (draft: T) => void) => {\n  props.onUpdateFilters(produce(props.filters, updater));\n};\n\nconst firstColumnId = computed(() => props.options[0]?.id);\nconst emptyGroup: NodeFilter[] = [\n  {\n    id: -1,\n    type: \"and\",\n    filters: [],\n    isExpanded: true,\n  },\n];\n\nconst rootFilters = computed({\n  get: () => props.filters.filters,\n  set: (filters) => props.onUpdateFilters({ ...props.filters, filters: filters }),\n});\n\nfunction getRootGroups() {\n  if (props.filters.type !== \"or\" && props.filters.type !== \"and\") {\n    throw new Error('Invalid model structure, expected root to be \"or\" or \"and\" group');\n  }\n  return props.filters.filters;\n}\n\nfunction getDraftGroupContent(\n  draft: RootFilter,\n  idx: number,\n): Exclude<NodeFilter, { type: \"not\" }> {\n  const group = draft.filters[idx];\n  if (group.type === \"not\") {\n    if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n      throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n    }\n    return group.filter;\n  }\n  if (group.type !== \"and\" && group.type !== \"or\") {\n    throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n  }\n  return group;\n}\n\nfunction getNotContent<T extends CommonFilter>(item: T): Exclude<T, { type: \"not\" }> {\n  return item.type === \"not\"\n    ? (item.filter as Exclude<T, { type: \"not\" }>)\n    : (item as Exclude<T, { type: \"not\" }>);\n}\n\nfunction addColumnToGroup(groupIdx: number, selectedSourceId: PlAdvancedFilterColumnId) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    const group = getDraftGroupContent(draft, groupIdx);\n    group.filters.push({\n      ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n      column: selectedSourceId,\n      id: getNewId(),\n      isExpanded: true,\n    } as CommonFilter);\n  });\n}\n\nfunction removeFilterFromGroup(groupIdx: number, filterIdx: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    const group = getDraftGroupContent(draft, groupIdx);\n    if (group.filters.length === 1 && filterIdx === 0) {\n      draft.filters.splice(groupIdx, 1);\n    } else {\n      group.filters.splice(filterIdx, 1);\n    }\n  });\n}\n\nfunction inverseRootNode(groupIdx: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    const group = draft.filters[groupIdx];\n    if (group.type === \"not\") {\n      if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n        throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n      }\n      draft.filters[groupIdx] = {\n        ...draft.filters[groupIdx],\n        ...group.filter,\n      };\n    } else {\n      const type = draft.filters[groupIdx].type;\n      if (type !== \"and\" && type !== \"or\" && type !== \"not\") {\n        throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n      }\n      draft.filters[groupIdx] = {\n        ...draft.filters[groupIdx],\n        id: getNewId(),\n        type: \"not\",\n        filter: draft.filters[groupIdx],\n      };\n    }\n  });\n}\n\nfunction addGroup(selectedSourceId: PlAdvancedFilterColumnId) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.filters.push(createNewGroup(selectedSourceId));\n  });\n}\n\nfunction updateFilter(groupIdx: number, filterIdx: number, updatedFilter: EditableFilter) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    getDraftGroupContent(draft, groupIdx).filters[filterIdx] = updatedFilter as CommonFilter;\n  });\n}\n\nfunction handleDropToExistingGroup(groupIdx: number, event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addColumnToGroup(groupIdx, draggedId);\n    }\n  }\n}\n\nfunction handleDropToNewGroup(event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addGroup(draggedId);\n    }\n  }\n}\n\nfunction dragOver(event: DragEvent) {\n  event.preventDefault();\n}\n\nfunction toggleExpand(_: NodeFilter, index: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.filters[index].isExpanded = !draft.filters[index].isExpanded;\n  });\n}\n\nfunction toggleSuppress(_: NodeFilter, index: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.filters[index].isSuppressed = !draft.filters[index].isSuppressed;\n  });\n}\n\nfunction changeGroupOperand(index: number, v: Operand) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    getDraftGroupContent(draft, index).type = v;\n  });\n}\n\nfunction changeRootOperand(v: Operand) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.type = v;\n  });\n}\n\nfunction validateFilter<T extends CommonFilter>(item: T): EditableFilter {\n  if (item.type === \"and\" || item.type === \"or\" || item.type === \"not\") {\n    throw new Error(\"Invalid filter structure, expected leaf filter\");\n  }\n\n  return item as EditableFilter;\n}\n</script>\n<template>\n  <div>\n    <PlElementList\n      v-model:items=\"rootFilters\"\n      :get-item-key=\"(filter) => filter.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"(filter) => filter.isExpanded === true\"\n      :on-expand=\"toggleExpand\"\n      :is-toggled=\"(item) => item.isSuppressed === true\"\n      :on-toggle=\"toggleSuppress\"\n      :is-pinned=\"(item, index) => props.isPinned?.(item, index) === true\"\n      :is-pinnable=\"() => false\"\n      :is-removable=\"(item, index) => props.isRemovable?.(item, index) === true\"\n      :is-draggable=\"(item, index) => props.isDraggable?.(item, index) === true\"\n      :disable-toggling=\"props.enableToggling !== true\"\n      :disable-dragging=\"false\"\n      :disable-removing=\"false\"\n    >\n      <template #item-title=\"{ item, index }\">\n        <slot name=\"group-title\" :item=\"item\" :index=\"index\">Filter group</slot>\n      </template>\n      <template #item-content=\"{ item, index }\">\n        <div\n          :class=\"[\n            $style.groupContent,\n            {\n              [$style.suppressedLabel]: item.isSuppressed,\n            },\n          ]\"\n          dropzone=\"true\"\n          @drop=\"(event) => handleDropToExistingGroup(index, event)\"\n          @dragover=\"dragOver\"\n        >\n          <PlCheckbox\n            :model-value=\"item.type === 'not'\"\n            :class=\"$style.notCheckbox\"\n            @update:model-value=\"inverseRootNode(index)\"\n          >\n            Filter Out\n          </PlCheckbox>\n          <template v-for=\"(_, filterIdx) in getNotContent(item).filters\" :key=\"filterIdx\">\n            <FilterEditor\n              :filter=\"validateFilter(getNotContent(item).filters[filterIdx])\"\n              :operand=\"getNotContent(item).type\"\n              :column-options=\"options\"\n              :supported-filters=\"props.supportedFilters\"\n              :get-suggest-options=\"props.getSuggestOptions\"\n              :enable-dnd=\"Boolean(props.enableDnd)\"\n              :is-last=\"filterIdx === getNotContent(item).filters.length - 1\"\n              @delete=\"() => removeFilterFromGroup(index, filterIdx)\"\n              @update-filter=\"(value) => updateFilter(index, filterIdx, value)\"\n              @change-operand=\"(v) => changeGroupOperand(index, v)\"\n            />\n          </template>\n          <div v-if=\"props.enableDnd\" :class=\"$style.dropzone\">\n            <div>Drop dimensions here</div>\n          </div>\n          <PlBtnSecondary\n            v-else-if=\"!props.isCompletedGroup(item, index)\"\n            icon=\"add\"\n            @click=\"addColumnToGroup(index, firstColumnId)\"\n          >\n            Add filter\n          </PlBtnSecondary>\n        </div>\n      </template>\n      <template #item-after=\"{ index }\">\n        <OperandButton\n          v-if=\"props.enableAddGroupButton || index < getRootGroups().length - 1\"\n          :class=\"$style.buttonWrapper\"\n          :active=\"props.filters.type\"\n          :disabled=\"index === getRootGroups().length - 1\"\n          :on-select=\"changeRootOperand\"\n        />\n      </template>\n    </PlElementList>\n\n    <!-- Last group - always empty, just for adding new groups -->\n    <PlElementList\n      v-if=\"props.enableAddGroupButton\"\n      :items=\"emptyGroup\"\n      :get-item-key=\"(group) => group.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"() => true\"\n      :disableDragging=\"true\"\n      :disableRemoving=\"true\"\n      :disableToggling=\"true\"\n      :disablePinning=\"true\"\n      dropzone=\"true\"\n      @drop=\"handleDropToNewGroup\"\n      @dragover=\"dragOver\"\n    >\n      <template #item-title=\"{ item, index }\">\n        <slot name=\"group-title\" :item=\"item\" :index=\"index + getRootGroups().length\"\n          >Filter group</slot\n        >\n      </template>\n      <template #item-content>\n        <div v-if=\"enableDnd\" :class=\"$style.dropzone\">\n          <div>Drop dimensions here</div>\n        </div>\n        <slot v-else name=\"add-group-buttons\">\n          <PlBtnSecondary icon=\"add\" @click=\"addGroup(firstColumnId)\"> Add filter </PlBtnSecondary>\n        </slot>\n      </template>\n    </PlElementList>\n  </div>\n</template>\n<style module>\n.filterGroup {\n  background: var(--bg-base-light);\n}\n.filterGroup:hover {\n  background: rgba(99, 224, 36, 0.12);\n}\n.filterGroupTitle {\n  background: none;\n}\n.filterGroupContent {\n  padding: 4px 24px 24px 24px;\n}\n.groupContent {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.notCheckbox {\n  margin: 4px 0;\n}\n.suppressedLabel {\n  filter: grayscale(100%);\n  pointer-events: none;\n}\n.dropzone {\n  border-radius: 6px;\n  border: 1.5px dashed var(--color-div-grey);\n  color: var(--txt-03);\n  font-family: Manrope;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  height: 40px;\n  cursor: default;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.buttonWrapper {\n  margin-top: 8px;\n  height: 56px;\n  display: flex;\n  align-items: center;\n}\n:global(.sortable-chosen) .buttonWrapper {\n  visibility: hidden;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/PlAdvancedFilter/types.d.ts

@@ -5,6 +5,8 @@ export type PlAdvancedFilterColumnId = SUniversalPColumnId | CanonicalizedJson<A
 export type RequiredMeta = {
     id: number;
     isExpanded?: boolean;
+    isSuppressed?: boolean;
+    source?: string;
 };
 export type FilterLeafContent = Extract<FilterSpecLeaf<PlAdvancedFilterColumnId>, {
     type: SupportedFilterTypes;

package/dist/components/PlAdvancedFilter/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PlAdvancedFilter/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PlAdvancedFilter/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,MAAM,EACN,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,cAAc,EACd,WAAW,EACX,cAAc,EACd,mBAAmB,EACpB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAE1D,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,KAAK,CAAC;AAGnC,MAAM,MAAM,wBAAwB,GAChC,mBAAmB,GACnB,iBAAiB,CAAC,MAAM,CAAC,GACzB,iBAAiB,CAAC,cAAc,CAAC,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACrC,cAAc,CAAC,wBAAwB,CAAC,EACxC;IAAE,IAAI,EAAE,oBAAoB,CAAA;CAAE,CAC/B,CAAC;AACF,MAAM,MAAM,YAAY,CAAC,IAAI,SAAS,YAAY,GAAG,YAAY,IAAI,UAAU,CAC7E,iBAAiB,EACjB,IAAI,CACL,CAAC;AACF,MAAM,MAAM,UAAU,CAAC,IAAI,SAAS,YAAY,GAAG,YAAY,IAAI,OAAO,CACxE,YAAY,CAAC,IAAI,CAAC,EAClB;IAAE,IAAI,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,CAC1B,CAAC;AACF,MAAM,MAAM,UAAU,CAAC,IAAI,SAAS,YAAY,GAAG,YAAY,IAAI,OAAO,CACxE,YAAY,CAAC,IAAI,CAAC,EAClB;IAAE,IAAI,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,CAC1B,CAAC;AACF,MAAM,MAAM,UAAU,CAAC,IAAI,SAAS,YAAY,GAAG,YAAY,IAAI,IAAI,CACrE,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,EAC5C,SAAS,CACV,GAAG;IACF,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;CAC7B,CAAC;AAIF,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3E,KAAK,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC7E,KAAK,cAAc,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAE7E,KAAK,sBAAsB,GAAG,MAAM,GAAG,SAAS,CAAC;AACjD,KAAK,sBAAsB,GACvB,UAAU,GACV,iBAAiB,GACjB,aAAa,GACb,oBAAoB,GACpB,OAAO,GACP,UAAU,CAAC;AACf,KAAK,uBAAuB,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAEpE,KAAK,WAAW,GACZ,gCAAgC,GAChC,sBAAsB,GACtB,uBAAuB,GACvB,sBAAsB,CAAC;AAC3B,MAAM,MAAM,cAAc,GACtB,OAAO,CAAC,iBAAiB,EAAE;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAAC,GACjD,aAAa,CACX,OAAO,CAAC,iBAAiB,EAAE;IAAE,IAAI,EAAE,gCAAgC,CAAA;CAAE,CAAC,EACtE,UAAU,GAAG,mBAAmB,CACjC,GACD,cAAc,CAAC,OAAO,CAAC,iBAAiB,EAAE;IAAE,IAAI,EAAE,sBAAsB,CAAA;CAAE,CAAC,EAAE,GAAG,CAAC,GACjF,cAAc,CAAC,OAAO,CAAC,iBAAiB,EAAE;IAAE,IAAI,EAAE,sBAAsB,CAAA;CAAE,CAAC,EAAE,GAAG,CAAC,GACjF,cAAc,CAAC,OAAO,CAAC,iBAAiB,EAAE;IAAE,IAAI,EAAE,uBAAuB,CAAA;CAAE,CAAC,EAAE,OAAO,CAAC,CAAC;AAE3F,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,wBAAwB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,GAAG,QAAQ,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,YAAY,GAAG,WAAW,GAAG,MAAM,CAAC;IAC/C,aAAa,CAAC,EAAE,aAAa,EAAE,CAAC;CACjC,CAAC"}

package/dist/components/PlAgDataTable/PlAgDataTableV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAgDataTableV2.js","names":[],"sources":["../../../src/components/PlAgDataTable/PlAgDataTableV2.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { promiseTimeout, isJsonEqual } from \"@milaboratories/helpers\";\nimport type {\n  AxisId,\n  PlDataTableGridStateCore,\n  PlDataTableStateV2,\n  PlSelectionModel,\n  PlTableColumnIdJson,\n  PTableColumnSpec,\n  PTableKey,\n} from \"@platforma-sdk/model\";\nimport {\n  getRawPlatformaInstance,\n  createPlSelectionModel,\n  matchAxisId,\n  getAxisId,\n  canonicalizeJson,\n  isAbortError,\n  isColumnOptional,\n} from \"@platforma-sdk/model\";\nimport type { CellRendererSelectorFunc, GridApi, GridState } from \"ag-grid-enterprise\";\nimport { AgGridVue } from \"ag-grid-vue3\";\nimport { computed, effectScope, nextTick, ref, toRefs, watch, watchEffect } from \"vue\";\nimport PlAgCsvExporter from \"../PlAgCsvExporter/PlAgCsvExporter.vue\";\nimport { PlAgGridColumnManager } from \"../PlAgGridColumnManager\";\nimport PlTableFiltersV2 from \"../PlTableFilters/PlTableFiltersV2.vue\";\nimport { PlTableFastSearch } from \"../PlTableFastSearch\";\nimport PlAgDataTableSheets from \"./PlAgDataTableSheets.vue\";\nimport PlAgRowCount from \"./PlAgRowCount.vue\";\nimport { DeferredCircular, ensureNodeVisible } from \"./sources/focus-row\";\nimport { PlAgDataTableRowNumberColId } from \"./sources/row-number\";\nimport type { PlAgCellButtonAxisParams } from \"./sources/table-source-v2\";\nimport { calculateGridOptions } from \"./sources/table-source-v2\";\nimport { useTableState } from \"./sources/table-state-v2\";\nimport type {\n  PlAgDataTableV2Controller,\n  PlAgDataTableV2Row,\n  PlAgOverlayLoadingParams,\n  PlAgOverlayNoRowsParams,\n  PlDataTableSettingsV2,\n  PlDataTableSheetsSettings,\n  PlTableRowId,\n} from \"./types\";\nimport { useFilterableColumns } from \"./compositions/useFilterableColumns\";\nimport { useGrid } from \"./compositions/useGrid\";\nimport { AgGridTheme } from \"../../AgGridVue/AgGridTheme\";\n\nconst tableState = defineModel<PlDataTableStateV2>({\n  required: true,\n});\n/** Warning: selection model value updates are ignored, use updateSelection instead */\nconst selection = defineModel<PlSelectionModel>(\"selection\");\nconst props = defineProps<{\n  /** Required component settings */\n  settings: Readonly<PlDataTableSettingsV2>;\n\n  /**\n   * The disableColumnsPanel prop controls the display of a button that activates\n   * the columns management panel in the table. To make the button functional\n   * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n   * This component serves as the target for teleporting the button.\n   */\n  disableColumnsPanel?: boolean;\n\n  /**\n   * The disableFiltersPanel prop controls the display of a button that activates\n   * the filters management panel in the table. To make the button functional\n   * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n   * This component serves as the target for teleporting the button.\n   */\n  disableFiltersPanel?: boolean;\n\n  /**\n   * The showExportButton prop controls the display of a button that allows\n   * to export table data in CSV format. To make the button functional\n   * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n   * This component serves as the target for teleporting the button.\n   */\n  showExportButton?: boolean;\n\n  /**\n   * The AxisId property is used to configure and display the PlAgTextAndButtonCell component\n   */\n  showCellButtonForAxisId?: AxisId;\n\n  /**\n   * If cellButtonInvokeRowsOnDoubleClick = true, clicking a button inside the row\n   * triggers the doubleClick event for the entire row.\n   *\n   * If cellButtonInvokeRowsOnDoubleClick = false, the doubleClick event for the row\n   * is not triggered, but will triggered cellButtonClicked event with (key: PTableRowKey) argument.\n   */\n  cellButtonInvokeRowsOnDoubleClick?: boolean;\n\n  /** @see {@link PlAgOverlayLoadingParams.loadingText} */\n  loadingText?: string;\n\n  /** @see {@link PlAgOverlayLoadingParams.runningText} */\n  runningText?: string;\n\n  /** @see {@link PlAgOverlayLoadingParams.notReadyText} */\n  notReadyText?: string;\n\n  /** @see {@link PlAgOverlayNoRowsParams.text} */\n  noRowsText?: string;\n\n  /**\n   * Callback to override the default renderer for a given cell.\n   * @see https://www.ag-grid.com/vue-data-grid/component-cell-renderer/#dynamic-component-selection\n   */\n  cellRendererSelector?: CellRendererSelectorFunc<PlAgDataTableV2Row>;\n}>();\nconst { settings } = toRefs(props);\nconst emit = defineEmits<{\n  rowDoubleClicked: [key?: PTableKey];\n  cellButtonClicked: [key?: PTableKey];\n  newDataRendered: [];\n}>();\n\nconst dataRenderedTracker = new DeferredCircular<GridApi<PlAgDataTableV2Row>>();\nconst { gridApi, gridOptions } = useGrid({\n  selection,\n  noRowsText: props.noRowsText,\n  runningText: props.runningText,\n  loadingText: props.loadingText,\n  notReadyText: props.notReadyText,\n  cellRendererSelector: props.cellRendererSelector,\n});\nlet isReloading = false;\ngridOptions.value.onGridPreDestroyed = (event) => {\n  if (!isReloading) {\n    gridOptions.value.initialState = gridState.value = normalizeColumnVisibility(\n      makePartialState(event.api.getState()),\n      gridState.value,\n      event.api,\n    );\n  }\n  gridApi.value = null;\n};\ngridOptions.value.onRowDoubleClicked = (event) => {\n  if (event.data && event.data.axesKey) emit(\"rowDoubleClicked\", event.data.axesKey);\n};\ngridOptions.value.onStateUpdated = (event) => {\n  const partialState = normalizeColumnVisibility(\n    makePartialState(event.state),\n    gridState.value,\n    event.api,\n  );\n  // We have to keep initialState synchronized with gridState for gridState recovery after key updating.\n  gridOptions.value.initialState = gridState.value = partialState;\n\n  if (!isJsonEqual(event.sources, [\"columnSizing\"])) {\n    event.api.autoSizeColumns(\n      event.api\n        .getAllDisplayedColumns()\n        .filter((column) => column.getColId() !== PlAgDataTableRowNumberColId),\n    );\n  }\n};\n\nconst [filterableColumns, visibleFilterableColumns] = useFilterableColumns(\n  () => settings.value.sourceId,\n  () => gridOptions.value.columnDefs ?? null,\n);\nconst { gridState, sheetsState, filtersState, searchString } = useTableState(\n  tableState,\n  settings,\n  visibleFilterableColumns,\n);\nconst sheetsSettings = computed<PlDataTableSheetsSettings>(() => {\n  const settingsCopy = { ...settings.value };\n  return settingsCopy.sourceId !== null\n    ? {\n        sheets: settingsCopy.sheets ?? [],\n        cachedState: [...sheetsState.value],\n      }\n    : {\n        sheets: [],\n        cachedState: [],\n      };\n});\ngridOptions.value.initialState = gridState.value;\n\n// Restore proper types erased by AgGrid\nfunction makePartialState(state: GridState): PlDataTableGridStateCore {\n  return {\n    columnOrder: state.columnOrder as\n      | {\n          orderedColIds: PlTableColumnIdJson[];\n        }\n      | undefined,\n    sort: state.sort as\n      | {\n          sortModel: {\n            colId: PlTableColumnIdJson;\n            sort: \"asc\" | \"desc\";\n          }[];\n        }\n      | undefined,\n    columnVisibility: state.columnVisibility as\n      | {\n          hiddenColIds: PlTableColumnIdJson[];\n        }\n      | undefined,\n  };\n}\n\n// AG Grid returns columnVisibility: undefined when all columns are visible.\n// We need to distinguish \"no state yet\" (use isColumnOptional defaults) from\n// \"user explicitly showed all columns\" (store []). This function normalizes\n// the undefined from AG Grid based on the previous state.\nfunction normalizeColumnVisibility(\n  partialState: PlDataTableGridStateCore,\n  prevState: PlDataTableGridStateCore,\n  api: GridApi<PlAgDataTableV2Row>,\n): PlDataTableGridStateCore {\n  if (partialState.columnVisibility !== undefined) return partialState;\n\n  if (prevState.columnVisibility !== undefined) {\n    // Had explicit visibility state before → user made all columns visible → store [].\n    return { ...partialState, columnVisibility: { hiddenColIds: [] } };\n  }\n\n  // No previous explicit state → compute defaults from current columns\n  // to replicate: hide: hiddenColIds?.includes(colId) ?? isColumnOptional(spec.spec)\n  const defaultHidden = getDefaultHiddenColIds(api);\n  if (defaultHidden.length > 0) {\n    return { ...partialState, columnVisibility: { hiddenColIds: defaultHidden } };\n  }\n\n  return partialState;\n}\n\nfunction getDefaultHiddenColIds(api: GridApi<PlAgDataTableV2Row>): PlTableColumnIdJson[] {\n  const cols = api.getAllGridColumns();\n  if (!cols) return [];\n  return cols\n    .filter((col) => {\n      const spec = col.getColDef().context as PTableColumnSpec | undefined;\n      return spec && isColumnOptional(spec.spec);\n    })\n    .map((col) => col.getColId() as PlTableColumnIdJson);\n}\n\n// Normalize columnVisibility for comparison: undefined and { hiddenColIds: [] } are equivalent.\nfunction stateForReloadCompare(state: PlDataTableGridStateCore): PlDataTableGridStateCore {\n  const cv = state.columnVisibility;\n  const normalizedCv = !cv || cv.hiddenColIds.length === 0 ? undefined : state.columnVisibility;\n  return { ...state, columnVisibility: normalizedCv };\n}\n\n// Reload AgGrid when new state arrives from server\nconst reloadKey = ref(0);\nwatch(\n  () => [gridApi.value, gridState.value] as const,\n  ([gridApi, gridState]) => {\n    if (!gridApi || gridApi.isDestroyed()) return;\n    const selfState = makePartialState(gridApi.getState());\n    if (\n      !isJsonEqual(gridState, {}) &&\n      !isJsonEqual(stateForReloadCompare(gridState), stateForReloadCompare(selfState))\n    ) {\n      isReloading = true;\n      gridOptions.value.initialState = gridState;\n      ++reloadKey.value;\n      nextTick(() => {\n        isReloading = false;\n      });\n    }\n  },\n);\n\n// Make cellRendererSelector reactive\nconst cellRendererSelector = computed(() => props.cellRendererSelector ?? null);\nwatch(\n  () => [gridApi.value, cellRendererSelector.value] as const,\n  ([gridApi, cellRendererSelector]) => {\n    if (!gridApi || gridApi.isDestroyed()) return;\n    gridApi.setGridOption(\"defaultColDef\", {\n      ...gridOptions.value.defaultColDef,\n      cellRendererSelector: cellRendererSelector ?? undefined,\n    });\n  },\n);\n\ndefineExpose<PlAgDataTableV2Controller>({\n  focusRow: async (rowKey) => {\n    const gridApi = await dataRenderedTracker.promise;\n    if (gridApi.isDestroyed()) return false;\n\n    return ensureNodeVisible(gridApi, (row) => isJsonEqual(row.data?.axesKey, rowKey));\n  },\n  updateSelection: async ({ axesSpec, selectedKeys }) => {\n    const gridApi = await dataRenderedTracker.promise;\n    if (gridApi.isDestroyed()) return false;\n\n    const axes = selection.value?.axesSpec;\n    if (!axes || axes.length !== axesSpec.length) return false;\n\n    const mapping = axesSpec.map((spec) => {\n      const id = getAxisId(spec);\n      return axes.findIndex((axis) => matchAxisId(axis, id));\n    });\n    const mappingSet = new Set(mapping);\n    if (mappingSet.has(-1) || mappingSet.size !== axesSpec.length) return false;\n\n    const selectedNodes = selectedKeys.map((key) =>\n      canonicalizeJson<PlTableRowId>(mapping.map((index) => key[index])),\n    );\n    const oldSelectedKeys = gridApi.getServerSideSelectionState()?.toggledNodes ?? [];\n    if (!isJsonEqual(oldSelectedKeys, selectedNodes)) {\n      gridApi.setServerSideSelectionState({\n        selectAll: false,\n        toggledNodes: selectedNodes,\n      });\n\n      // wait for `onSelectionChanged` to update `selection` model\n      const scope = effectScope();\n      const { resolve, promise } = Promise.withResolvers();\n      scope.run(() => watch(selection, resolve, { once: true }));\n      try {\n        await promiseTimeout(promise, 500);\n      } catch {\n        return false;\n      } finally {\n        scope.stop();\n      }\n    }\n    return true;\n  },\n});\n\n// Update AgGrid when settings change\nconst defaultSelection = createPlSelectionModel();\nlet oldSettings: PlDataTableSettingsV2 | null = null;\nconst generation = ref(0);\nwatch(\n  () => [gridApi.value, settings.value] as const,\n  ([gridApi, settings]) => {\n    // Wait for AgGrid reinitialization, gridApi will eventually become initialized\n    if (!gridApi || gridApi.isDestroyed()) return;\n    // Verify that this is not a false watch trigger\n    if (isJsonEqual(settings, oldSettings)) return;\n    ++generation.value;\n    try {\n      // Hide no rows overlay if it is shown, or else loading overlay will not be shown\n      gridApi.hideOverlay();\n      dataRenderedTracker.reset();\n\n      // No data source selected -> reset state to default\n      if (settings.sourceId === null) {\n        gridApi.updateGridOptions({\n          loading: true,\n          loadingOverlayComponentParams: {\n            ...gridOptions.value.loadingOverlayComponentParams,\n            variant: settings.pending ? \"running\" : \"not-ready\",\n          } satisfies PlAgOverlayLoadingParams,\n          columnDefs: undefined,\n          serverSideDatasource: undefined,\n        });\n        if (selection.value) {\n          if (selection.value && !isJsonEqual(selection.value, defaultSelection)) {\n            selection.value = createPlSelectionModel();\n          }\n          gridApi.setServerSideSelectionState({\n            selectAll: false,\n            toggledNodes: [],\n          });\n        }\n        return;\n      }\n\n      // Data source changed -> show full page loader, clear selection\n      if (settings.sourceId !== oldSettings?.sourceId) {\n        gridApi.updateGridOptions({\n          loading: true,\n          loadingOverlayComponentParams: {\n            ...gridOptions.value.loadingOverlayComponentParams,\n            variant: \"loading\",\n          } satisfies PlAgOverlayLoadingParams,\n        });\n        if (selection.value && oldSettings?.sourceId) {\n          if (selection.value && !isJsonEqual(selection.value, defaultSelection)) {\n            selection.value = createPlSelectionModel();\n          }\n          gridApi.setServerSideSelectionState({\n            selectAll: false,\n            toggledNodes: [],\n          });\n        }\n      }\n\n      // Model updated -> show skeletons instead of data\n      const sourceChanged =\n        settings.model?.sourceId && settings.model.sourceId !== settings.sourceId;\n      if (!settings.model || sourceChanged) {\n        const state = gridApi.getServerSideGroupLevelState();\n        const rowCount = !sourceChanged && state.length > 0 ? state[0].rowCount : 1;\n        return gridApi.updateGridOptions({\n          serverSideDatasource: {\n            getRows: (params) => {\n              params.success({ rowData: [], rowCount });\n            },\n          },\n        });\n      }\n\n      // Model ready -> calculate new state\n      const stateGeneration = generation.value;\n      calculateGridOptions({\n        generation,\n        pfDriver: getRawPlatformaInstance().pFrameDriver,\n        model: settings.model,\n        sheets: settings.sheets ?? [],\n        dataRenderedTracker,\n        hiddenColIds: gridState.value.columnVisibility?.hiddenColIds,\n        cellButtonAxisParams: {\n          showCellButtonForAxisId: props.showCellButtonForAxisId,\n          cellButtonInvokeRowsOnDoubleClick: props.cellButtonInvokeRowsOnDoubleClick,\n          trigger: (key?: PTableKey) => emit(\"cellButtonClicked\", key),\n        } satisfies PlAgCellButtonAxisParams,\n      })\n        .then((result) => {\n          if (gridApi.isDestroyed() || stateGeneration !== generation.value) return;\n          const { axesSpec, ...options } = result;\n          gridApi.updateGridOptions({\n            ...options,\n          });\n          if (selection.value) {\n            // Update selection if axesSpec changed, as order of axes may have changed and so we need to remap selected keys\n            const { axesSpec: oldAxesSpec, selectedKeys: oldSelectedKeys } = selection.value;\n            if (!isJsonEqual(oldAxesSpec, axesSpec)) {\n              if (!oldAxesSpec || axesSpec.length !== oldAxesSpec.length) {\n                const newSelection: PlSelectionModel = { axesSpec, selectedKeys: [] };\n                if (!isJsonEqual(selection.value, newSelection)) {\n                  selection.value = newSelection;\n                }\n                return gridApi.setServerSideSelectionState({\n                  selectAll: false,\n                  toggledNodes: [],\n                });\n              }\n\n              const mapping = oldAxesSpec\n                .map(getAxisId)\n                .map((id) => axesSpec.findIndex((axis) => matchAxisId(axis, id)));\n              const mappingSet = new Set(mapping);\n              if (mappingSet.has(-1) || mappingSet.size !== axesSpec.length) {\n                const newSelection: PlSelectionModel = { axesSpec, selectedKeys: [] };\n                if (!isJsonEqual(selection.value, newSelection)) {\n                  selection.value = newSelection;\n                }\n                return gridApi.setServerSideSelectionState({\n                  selectAll: false,\n                  toggledNodes: [],\n                });\n              }\n\n              const selectedNodes = oldSelectedKeys.map((key) =>\n                mapping.map((index) => key[index]),\n              );\n              const newSelection: PlSelectionModel = { axesSpec, selectedKeys: selectedNodes };\n              if (!isJsonEqual(selection.value, newSelection)) {\n                selection.value = newSelection;\n              }\n              return gridApi.setServerSideSelectionState({\n                selectAll: false,\n                toggledNodes: selectedNodes.map((key) => canonicalizeJson<PlTableRowId>(key)),\n              });\n            }\n          }\n        })\n        .catch((error: unknown) => {\n          if (gridApi.isDestroyed() || stateGeneration !== generation.value) return;\n          if (isAbortError(error)) return;\n          console.trace(error);\n        })\n        .finally(() => {\n          if (gridApi.isDestroyed() || stateGeneration !== generation.value) return;\n          gridApi.updateGridOptions({\n            loading: false,\n          });\n        });\n      dataRenderedTracker.promise.then(() => emit(\"newDataRendered\"));\n    } catch (error: unknown) {\n      console.trace(error);\n    } finally {\n      oldSettings = settings;\n    }\n  },\n);\n\nwatch(\n  () => ({\n    gridApi: gridApi.value,\n    loadingText: props.loadingText,\n    runningText: props.runningText,\n    notReadyText: props.notReadyText,\n    noRowsText: props.noRowsText,\n  }),\n  ({ gridApi, loadingText, runningText, notReadyText, noRowsText }) => {\n    if (!gridApi || gridApi.isDestroyed()) return;\n    gridApi.updateGridOptions({\n      loadingOverlayComponentParams: {\n        ...gridOptions.value.loadingOverlayComponentParams,\n        loadingText,\n        runningText,\n        notReadyText,\n      },\n      noRowsOverlayComponentParams: {\n        ...gridOptions.value.noRowsOverlayComponentParams,\n        text: noRowsText,\n      },\n    });\n  },\n);\n\nwatchEffect(() => {\n  if (!gridApi.value || gridApi.value?.isDestroyed()) return;\n  gridApi.value.updateGridOptions({\n    statusBar: gridOptions.value.loading\n      ? undefined\n      : {\n          statusPanels: [{ statusPanel: PlAgRowCount, align: \"left\" }],\n        },\n  });\n});\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <PlAgGridColumnManager v-if=\"gridApi && !disableColumnsPanel\" :api=\"gridApi\" />\n    <PlTableFiltersV2\n      v-if=\"!disableFiltersPanel\"\n      v-model=\"filtersState\"\n      :pframe-handle=\"'model' in settings ? settings?.model?.fullPframeHandle : undefined\"\n      :columns=\"filterableColumns\"\n    />\n    <PlAgCsvExporter v-if=\"gridApi && showExportButton\" :api=\"gridApi\" />\n    <PlAgDataTableSheets v-model=\"sheetsState\" :settings=\"sheetsSettings\">\n      <template v-if=\"$slots['before-sheets']\" #before>\n        <slot name=\"before-sheets\" />\n      </template>\n      <template v-if=\"$slots['after-sheets']\" #after>\n        <slot name=\"after-sheets\" />\n      </template>\n    </PlAgDataTableSheets>\n    <PlTableFastSearch v-model=\"searchString\" />\n    <AgGridVue\n      :key=\"reloadKey\"\n      :theme=\"AgGridTheme\"\n      :class=\"$style.grid\"\n      :grid-options=\"gridOptions\"\n    />\n  </div>\n</template>\n\n<style lang=\"css\" module>\n.container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  gap: 12px;\n}\n\n.grid {\n  flex: 1;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlAgDataTableV2.js","names":[],"sources":["../../../src/components/PlAgDataTable/PlAgDataTableV2.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { promiseTimeout, isJsonEqual } from \"@milaboratories/helpers\";\nimport type {\n  AxisId,\n  PlDataTableGridStateCore,\n  PlDataTableStateV2,\n  PlSelectionModel,\n  PlTableColumnIdJson,\n  PTableColumnSpec,\n  PTableKey,\n} from \"@platforma-sdk/model\";\nimport {\n  getRawPlatformaInstance,\n  createPlSelectionModel,\n  matchAxisId,\n  getAxisId,\n  canonicalizeJson,\n  isAbortError,\n  isColumnOptional,\n} from \"@platforma-sdk/model\";\nimport type { CellRendererSelectorFunc, GridApi, GridState } from \"ag-grid-enterprise\";\nimport { AgGridVue } from \"ag-grid-vue3\";\nimport { computed, effectScope, nextTick, ref, toRefs, watch, watchEffect } from \"vue\";\nimport PlAgCsvExporter from \"../PlAgCsvExporter/PlAgCsvExporter.vue\";\nimport { PlAgGridColumnManager } from \"../PlAgGridColumnManager\";\nimport PlTableFiltersV2 from \"../PlTableFilters/PlTableFiltersV2.vue\";\nimport { PlTableFastSearch } from \"../PlTableFastSearch\";\nimport PlAgDataTableSheets from \"./PlAgDataTableSheets.vue\";\nimport PlAgRowCount from \"./PlAgRowCount.vue\";\nimport { DeferredCircular, ensureNodeVisible } from \"./sources/focus-row\";\nimport { PlAgDataTableRowNumberColId } from \"./sources/row-number\";\nimport type { PlAgCellButtonAxisParams } from \"./sources/table-source-v2\";\nimport { calculateGridOptions } from \"./sources/table-source-v2\";\nimport { useTableState } from \"./sources/table-state-v2\";\nimport type {\n  PlAgDataTableV2Controller,\n  PlAgDataTableV2Row,\n  PlAgOverlayLoadingParams,\n  PlAgOverlayNoRowsParams,\n  PlDataTableSettingsV2,\n  PlDataTableSheetsSettings,\n  PlTableRowId,\n} from \"./types\";\nimport { useFilterableColumns } from \"./compositions/useFilterableColumns\";\nimport { useGrid } from \"./compositions/useGrid\";\nimport { AgGridTheme } from \"../../AgGridVue/AgGridTheme\";\n\nconst tableState = defineModel<PlDataTableStateV2>({\n  required: true,\n});\n/** Warning: selection model value updates are ignored, use updateSelection instead */\nconst selection = defineModel<PlSelectionModel>(\"selection\");\nconst props = defineProps<{\n  /** Required component settings */\n  settings: Readonly<PlDataTableSettingsV2>;\n\n  /**\n   * The disableColumnsPanel prop controls the display of a button that activates\n   * the columns management panel in the table. To make the button functional\n   * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n   * This component serves as the target for teleporting the button.\n   */\n  disableColumnsPanel?: boolean;\n\n  /**\n   * The disableFiltersPanel prop controls the display of a button that activates\n   * the filters management panel in the table. To make the button functional\n   * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n   * This component serves as the target for teleporting the button.\n   */\n  disableFiltersPanel?: boolean;\n\n  /**\n   * The showExportButton prop controls the display of a button that allows\n   * to export table data in CSV format. To make the button functional\n   * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n   * This component serves as the target for teleporting the button.\n   */\n  showExportButton?: boolean;\n\n  /**\n   * The AxisId property is used to configure and display the PlAgTextAndButtonCell component\n   */\n  showCellButtonForAxisId?: AxisId;\n\n  /**\n   * If cellButtonInvokeRowsOnDoubleClick = true, clicking a button inside the row\n   * triggers the doubleClick event for the entire row.\n   *\n   * If cellButtonInvokeRowsOnDoubleClick = false, the doubleClick event for the row\n   * is not triggered, but will triggered cellButtonClicked event with (key: PTableRowKey) argument.\n   */\n  cellButtonInvokeRowsOnDoubleClick?: boolean;\n\n  /** @see {@link PlAgOverlayLoadingParams.loadingText} */\n  loadingText?: string;\n\n  /** @see {@link PlAgOverlayLoadingParams.runningText} */\n  runningText?: string;\n\n  /** @see {@link PlAgOverlayLoadingParams.notReadyText} */\n  notReadyText?: string;\n\n  /** @see {@link PlAgOverlayNoRowsParams.text} */\n  noRowsText?: string;\n\n  /**\n   * Callback to override the default renderer for a given cell.\n   * @see https://www.ag-grid.com/vue-data-grid/component-cell-renderer/#dynamic-component-selection\n   */\n  cellRendererSelector?: CellRendererSelectorFunc<PlAgDataTableV2Row>;\n}>();\nconst { settings } = toRefs(props);\nconst emit = defineEmits<{\n  rowDoubleClicked: [key?: PTableKey];\n  cellButtonClicked: [key?: PTableKey];\n  newDataRendered: [];\n}>();\n\nconst dataRenderedTracker = new DeferredCircular<GridApi<PlAgDataTableV2Row>>();\nconst { gridApi, gridOptions } = useGrid({\n  selection,\n  noRowsText: props.noRowsText,\n  runningText: props.runningText,\n  loadingText: props.loadingText,\n  notReadyText: props.notReadyText,\n  cellRendererSelector: props.cellRendererSelector,\n});\nlet isReloading = false;\ngridOptions.value.onGridPreDestroyed = (event) => {\n  if (!isReloading) {\n    gridOptions.value.initialState = gridState.value = normalizeColumnVisibility(\n      makePartialState(event.api.getState()),\n      gridState.value,\n      event.api,\n    );\n  }\n  gridApi.value = null;\n};\ngridOptions.value.onRowDoubleClicked = (event) => {\n  if (event.data && event.data.axesKey) emit(\"rowDoubleClicked\", event.data.axesKey);\n};\ngridOptions.value.onStateUpdated = (event) => {\n  const partialState = normalizeColumnVisibility(\n    makePartialState(event.state),\n    gridState.value,\n    event.api,\n  );\n  // We have to keep initialState synchronized with gridState for gridState recovery after key updating.\n  gridOptions.value.initialState = gridState.value = partialState;\n\n  if (!isJsonEqual(event.sources, [\"columnSizing\"])) {\n    event.api.autoSizeColumns(\n      event.api\n        .getAllDisplayedColumns()\n        .filter((column) => column.getColId() !== PlAgDataTableRowNumberColId),\n    );\n  }\n};\n\nconst [filterableColumns, visibleFilterableColumns] = useFilterableColumns(\n  () => settings.value.sourceId,\n  () => gridOptions.value.columnDefs ?? null,\n);\nconst defaultFilters = computed(() =>\n  settings.value.sourceId !== null ? settings.value.model?.defaultFilters : undefined,\n);\nconst {\n  gridState,\n  sheetsState,\n  searchString,\n  filtersState,\n  defaultFiltersState,\n  resetDefaultFilters,\n} = useTableState(tableState, settings, visibleFilterableColumns, defaultFilters);\nconst sheetsSettings = computed<PlDataTableSheetsSettings>(() => {\n  const settingsCopy = { ...settings.value };\n  return settingsCopy.sourceId !== null\n    ? {\n        sheets: settingsCopy.sheets ?? [],\n        cachedState: [...sheetsState.value],\n      }\n    : {\n        sheets: [],\n        cachedState: [],\n      };\n});\ngridOptions.value.initialState = gridState.value;\n\n// Restore proper types erased by AgGrid\nfunction makePartialState(state: GridState): PlDataTableGridStateCore {\n  return {\n    columnOrder: state.columnOrder as\n      | {\n          orderedColIds: PlTableColumnIdJson[];\n        }\n      | undefined,\n    sort: state.sort as\n      | {\n          sortModel: {\n            colId: PlTableColumnIdJson;\n            sort: \"asc\" | \"desc\";\n          }[];\n        }\n      | undefined,\n    columnVisibility: state.columnVisibility as\n      | {\n          hiddenColIds: PlTableColumnIdJson[];\n        }\n      | undefined,\n  };\n}\n\n// AG Grid returns columnVisibility: undefined when all columns are visible.\n// We need to distinguish \"no state yet\" (use isColumnOptional defaults) from\n// \"user explicitly showed all columns\" (store []). This function normalizes\n// the undefined from AG Grid based on the previous state.\nfunction normalizeColumnVisibility(\n  partialState: PlDataTableGridStateCore,\n  prevState: PlDataTableGridStateCore,\n  api: GridApi<PlAgDataTableV2Row>,\n): PlDataTableGridStateCore {\n  if (partialState.columnVisibility !== undefined) return partialState;\n\n  if (prevState.columnVisibility !== undefined) {\n    // Had explicit visibility state before → user made all columns visible → store [].\n    return { ...partialState, columnVisibility: { hiddenColIds: [] } };\n  }\n\n  // No previous explicit state → compute defaults from current columns\n  // to replicate: hide: hiddenColIds?.includes(colId) ?? isColumnOptional(spec.spec)\n  const defaultHidden = getDefaultHiddenColIds(api);\n  if (defaultHidden.length > 0) {\n    return { ...partialState, columnVisibility: { hiddenColIds: defaultHidden } };\n  }\n\n  return partialState;\n}\n\nfunction getDefaultHiddenColIds(api: GridApi<PlAgDataTableV2Row>): PlTableColumnIdJson[] {\n  const cols = api.getAllGridColumns();\n  if (!cols) return [];\n\n  return cols\n    .filter((col) => {\n      const spec = col.getColDef().context as PTableColumnSpec | undefined;\n      return spec !== undefined && spec.type === \"column\" && isColumnOptional(spec.spec);\n    })\n    .map((col) => col.getColId() as PlTableColumnIdJson);\n}\n\n// Normalize columnVisibility for comparison: undefined and { hiddenColIds: [] } are equivalent.\nfunction stateForReloadCompare(state: PlDataTableGridStateCore): PlDataTableGridStateCore {\n  const cv = state.columnVisibility;\n  const normalizedCv = !cv || cv.hiddenColIds.length === 0 ? undefined : state.columnVisibility;\n  return { ...state, columnVisibility: normalizedCv };\n}\n\n// Reload AgGrid when new state arrives from server\nconst reloadKey = ref(0);\nwatch(\n  () => [gridApi.value, gridState.value] as const,\n  ([gridApi, gridState]) => {\n    if (!gridApi || gridApi.isDestroyed()) return;\n    const selfState = makePartialState(gridApi.getState());\n    if (\n      !isJsonEqual(gridState, {}) &&\n      !isJsonEqual(stateForReloadCompare(gridState), stateForReloadCompare(selfState))\n    ) {\n      isReloading = true;\n      gridOptions.value.initialState = gridState;\n      ++reloadKey.value;\n      nextTick(() => {\n        isReloading = false;\n      });\n    }\n  },\n);\n\n// Make cellRendererSelector reactive\nconst cellRendererSelector = computed(() => props.cellRendererSelector ?? null);\nwatch(\n  () => [gridApi.value, cellRendererSelector.value] as const,\n  ([gridApi, cellRendererSelector]) => {\n    if (!gridApi || gridApi.isDestroyed()) return;\n    gridApi.setGridOption(\"defaultColDef\", {\n      ...gridOptions.value.defaultColDef,\n      cellRendererSelector: cellRendererSelector ?? undefined,\n    });\n  },\n);\n\ndefineExpose<PlAgDataTableV2Controller>({\n  focusRow: async (rowKey) => {\n    const gridApi = await dataRenderedTracker.promise;\n    if (gridApi.isDestroyed()) return false;\n\n    return ensureNodeVisible(gridApi, (row) => isJsonEqual(row.data?.axesKey, rowKey));\n  },\n  updateSelection: async ({ axesSpec, selectedKeys }) => {\n    const gridApi = await dataRenderedTracker.promise;\n    if (gridApi.isDestroyed()) return false;\n\n    const axes = selection.value?.axesSpec;\n    if (!axes || axes.length !== axesSpec.length) return false;\n\n    const mapping = axesSpec.map((spec) => {\n      const id = getAxisId(spec);\n      return axes.findIndex((axis) => matchAxisId(axis, id));\n    });\n    const mappingSet = new Set(mapping);\n    if (mappingSet.has(-1) || mappingSet.size !== axesSpec.length) return false;\n\n    const selectedNodes = selectedKeys.map((key) =>\n      canonicalizeJson<PlTableRowId>(mapping.map((index) => key[index])),\n    );\n    const oldSelectedKeys = gridApi.getServerSideSelectionState()?.toggledNodes ?? [];\n    if (!isJsonEqual(oldSelectedKeys, selectedNodes)) {\n      gridApi.setServerSideSelectionState({\n        selectAll: false,\n        toggledNodes: selectedNodes,\n      });\n\n      // wait for `onSelectionChanged` to update `selection` model\n      const scope = effectScope();\n      const { resolve, promise } = Promise.withResolvers();\n      scope.run(() => watch(selection, resolve, { once: true }));\n      try {\n        await promiseTimeout(promise, 500);\n      } catch {\n        return false;\n      } finally {\n        scope.stop();\n      }\n    }\n    return true;\n  },\n});\n\n// Update AgGrid when settings change\nconst defaultSelection = createPlSelectionModel();\nlet oldSettings: PlDataTableSettingsV2 | null = null;\nconst generation = ref(0);\nwatch(\n  () => [gridApi.value, settings.value] as const,\n  ([gridApi, settings]) => {\n    // Wait for AgGrid reinitialization, gridApi will eventually become initialized\n    if (!gridApi || gridApi.isDestroyed()) return;\n    // Verify that this is not a false watch trigger\n    if (isJsonEqual(settings, oldSettings)) return;\n    ++generation.value;\n    try {\n      // Hide no rows overlay if it is shown, or else loading overlay will not be shown\n      gridApi.hideOverlay();\n      dataRenderedTracker.reset();\n\n      // No data source selected -> reset state to default\n      if (settings.sourceId === null) {\n        gridApi.updateGridOptions({\n          loading: true,\n          loadingOverlayComponentParams: {\n            ...gridOptions.value.loadingOverlayComponentParams,\n            variant: settings.pending ? \"running\" : \"not-ready\",\n          } satisfies PlAgOverlayLoadingParams,\n          columnDefs: undefined,\n          serverSideDatasource: undefined,\n        });\n        if (selection.value) {\n          if (selection.value && !isJsonEqual(selection.value, defaultSelection)) {\n            selection.value = createPlSelectionModel();\n          }\n          gridApi.setServerSideSelectionState({\n            selectAll: false,\n            toggledNodes: [],\n          });\n        }\n        return;\n      }\n\n      if (\n        settings.model?.fullTableHandle === undefined ||\n        settings.model?.visibleTableHandle === undefined\n      ) {\n        return;\n      }\n\n      // Data source changed -> show full page loader, clear selection\n      if (settings.sourceId !== oldSettings?.sourceId) {\n        gridApi.updateGridOptions({\n          loading: true,\n          loadingOverlayComponentParams: {\n            ...gridOptions.value.loadingOverlayComponentParams,\n            variant: \"loading\",\n          } satisfies PlAgOverlayLoadingParams,\n        });\n        if (selection.value && oldSettings?.sourceId) {\n          if (selection.value && !isJsonEqual(selection.value, defaultSelection)) {\n            selection.value = createPlSelectionModel();\n          }\n          gridApi.setServerSideSelectionState({\n            selectAll: false,\n            toggledNodes: [],\n          });\n        }\n      }\n\n      // Model updated -> show skeletons instead of data\n      const sourceChanged =\n        settings.model?.sourceId && settings.model.sourceId !== settings.sourceId;\n      if (!settings.model || sourceChanged) {\n        const state = gridApi.getServerSideGroupLevelState();\n        const rowCount = !sourceChanged && state.length > 0 ? state[0].rowCount : 1;\n        return gridApi.updateGridOptions({\n          serverSideDatasource: {\n            getRows: (params) => {\n              params.success({ rowData: [], rowCount });\n            },\n          },\n        });\n      }\n\n      // Model ready -> calculate new state\n      const stateGeneration = generation.value;\n      calculateGridOptions({\n        generation,\n        pfDriver: getRawPlatformaInstance().pFrameDriver,\n        fullTableHandle: settings.model?.fullTableHandle,\n        visibleTableHandle: settings.model?.visibleTableHandle,\n        sheets: settings.sheets ?? [],\n        dataRenderedTracker,\n        hiddenColIds: gridState.value.columnVisibility?.hiddenColIds,\n        cellButtonAxisParams: {\n          showCellButtonForAxisId: props.showCellButtonForAxisId,\n          cellButtonInvokeRowsOnDoubleClick: props.cellButtonInvokeRowsOnDoubleClick,\n          trigger: (key?: PTableKey) => emit(\"cellButtonClicked\", key),\n        } satisfies PlAgCellButtonAxisParams,\n      })\n        .then((result) => {\n          if (gridApi.isDestroyed() || stateGeneration !== generation.value) return;\n          const { axesSpec, ...options } = result;\n          gridApi.updateGridOptions({\n            ...options,\n          });\n          if (selection.value) {\n            // Update selection if axesSpec changed, as order of axes may have changed and so we need to remap selected keys\n            const { axesSpec: oldAxesSpec, selectedKeys: oldSelectedKeys } = selection.value;\n            if (!isJsonEqual(oldAxesSpec, axesSpec)) {\n              if (!oldAxesSpec || axesSpec.length !== oldAxesSpec.length) {\n                const newSelection: PlSelectionModel = { axesSpec, selectedKeys: [] };\n                if (!isJsonEqual(selection.value, newSelection)) {\n                  selection.value = newSelection;\n                }\n                return gridApi.setServerSideSelectionState({\n                  selectAll: false,\n                  toggledNodes: [],\n                });\n              }\n\n              const mapping = oldAxesSpec\n                .map(getAxisId)\n                .map((id) => axesSpec.findIndex((axis) => matchAxisId(axis, id)));\n              const mappingSet = new Set(mapping);\n              if (mappingSet.has(-1) || mappingSet.size !== axesSpec.length) {\n                const newSelection: PlSelectionModel = { axesSpec, selectedKeys: [] };\n                if (!isJsonEqual(selection.value, newSelection)) {\n                  selection.value = newSelection;\n                }\n                return gridApi.setServerSideSelectionState({\n                  selectAll: false,\n                  toggledNodes: [],\n                });\n              }\n\n              const selectedNodes = oldSelectedKeys.map((key) =>\n                mapping.map((index) => key[index]),\n              );\n              const newSelection: PlSelectionModel = { axesSpec, selectedKeys: selectedNodes };\n              if (!isJsonEqual(selection.value, newSelection)) {\n                selection.value = newSelection;\n              }\n              return gridApi.setServerSideSelectionState({\n                selectAll: false,\n                toggledNodes: selectedNodes.map((key) => canonicalizeJson<PlTableRowId>(key)),\n              });\n            }\n          }\n        })\n        .catch((error: unknown) => {\n          if (gridApi.isDestroyed() || stateGeneration !== generation.value) return;\n          if (isAbortError(error)) return;\n          console.trace(error);\n        })\n        .finally(() => {\n          if (gridApi.isDestroyed() || stateGeneration !== generation.value) return;\n          gridApi.updateGridOptions({\n            loading: false,\n          });\n        });\n      dataRenderedTracker.promise.then(() => emit(\"newDataRendered\"));\n    } catch (error: unknown) {\n      console.trace(error);\n    } finally {\n      oldSettings = settings;\n    }\n  },\n);\n\nwatch(\n  () => ({\n    gridApi: gridApi.value,\n    loadingText: props.loadingText,\n    runningText: props.runningText,\n    notReadyText: props.notReadyText,\n    noRowsText: props.noRowsText,\n  }),\n  ({ gridApi, loadingText, runningText, notReadyText, noRowsText }) => {\n    if (!gridApi || gridApi.isDestroyed()) return;\n    gridApi.updateGridOptions({\n      loadingOverlayComponentParams: {\n        ...gridOptions.value.loadingOverlayComponentParams,\n        loadingText,\n        runningText,\n        notReadyText,\n      },\n      noRowsOverlayComponentParams: {\n        ...gridOptions.value.noRowsOverlayComponentParams,\n        text: noRowsText,\n      },\n    });\n  },\n);\n\nwatchEffect(() => {\n  if (!gridApi.value || gridApi.value?.isDestroyed()) return;\n  gridApi.value.updateGridOptions({\n    statusBar: gridOptions.value.loading\n      ? undefined\n      : {\n          statusPanels: [{ statusPanel: PlAgRowCount, align: \"left\" }],\n        },\n  });\n});\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <PlAgGridColumnManager v-if=\"gridApi && !disableColumnsPanel\" :api=\"gridApi\" />\n    <PlTableFiltersV2\n      v-if=\"!disableFiltersPanel\"\n      :filters=\"filtersState\"\n      :default-filters=\"defaultFiltersState\"\n      :pframe-handle=\"'model' in settings ? settings?.model?.fullPframeHandle : undefined\"\n      :columns=\"filterableColumns\"\n      @updateFilters=\"(v) => (filtersState = v)\"\n      @resetDefaultFilters=\"resetDefaultFilters\"\n      @updateDefaultFilters=\"(v) => (defaultFiltersState = v)\"\n    />\n    <PlAgCsvExporter v-if=\"gridApi && showExportButton\" :api=\"gridApi\" />\n    <PlAgDataTableSheets v-model=\"sheetsState\" :settings=\"sheetsSettings\">\n      <template v-if=\"$slots['before-sheets']\" #before>\n        <slot name=\"before-sheets\" />\n      </template>\n      <template v-if=\"$slots['after-sheets']\" #after>\n        <slot name=\"after-sheets\" />\n      </template>\n    </PlAgDataTableSheets>\n    <PlTableFastSearch v-model=\"searchString\" />\n    <AgGridVue\n      :key=\"reloadKey\"\n      :theme=\"AgGridTheme\"\n      :class=\"$style.grid\"\n      :grid-options=\"gridOptions\"\n    />\n  </div>\n</template>\n\n<style lang=\"css\" module>\n.container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  gap: 12px;\n}\n\n.grid {\n  flex: 1;\n}\n</style>\n"],"mappings":""}