@platforma-sdk/ui-vue 1.65.9 → 1.66.0

package/dist/components/PlAnnotations/components/AnnotationsSidebar.vue2.js

@@ -2,73 +2,94 @@ import { randomInt as e } from "../../../lib/util/helpers/dist/random.js";
 import "../../../lib/util/helpers/dist/index.js";
 import t from "./style.module.js";
 import { validateTitle as n } from "../utils.js";
-import { createBlock as r, createElementVNode as i, createSlots as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, toDisplayString as f, unref as p, useModel as m, withCtx as h, withModifiers as g } from "vue";
-import { PlBtnGhost as _, PlBtnSecondary as v, PlEditableTitle as y, PlElementList as b, PlSidebarItem as x, PlTextField as S } from "@milaboratories/uikit";
-import { isEmpty as C } from "es-toolkit/compat";
+import { produce as r } from "immer";
+import { createBlock as i, createElementVNode as a, createSlots as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, toDisplayString as f, unref as p, withCtx as m, withModifiers as h } from "vue";
+import { PlBtnGhost as g, PlBtnSecondary as _, PlEditableTitle as v, PlElementList as y, PlSidebarItem as b, PlTextField as x } from "@milaboratories/uikit";
+import { isEmpty as S } from "es-toolkit/compat";
 //#region src/components/PlAnnotations/components/AnnotationsSidebar.vue?vue&type=script&setup=true&lang.ts
-var w = /* @__PURE__ */ c({
+var C = /* @__PURE__ */ l({
 	__name: "AnnotationsSidebar",
 	props: {
-		annotation: { required: !0 },
-		annotationModifiers: {},
+		annotation: {},
 		selectedStepId: {},
-		selectedStepIdModifiers: {}
+		onUpdateAnnotation: { type: Function },
+		onUpdateSelectedStepId: { type: Function }
 	},
-	emits: /* @__PURE__ */ l(["delete-schema"], ["update:annotation", "update:selectedStepId"]),
-	setup(c, { emit: l }) {
-		let w = m(c, "annotation"), T = m(c, "selectedStepId"), E = l;
-		function D() {
+	emits: ["delete-schema"],
+	setup(l, { emit: C }) {
+		let w = l, T = C;
+		function E(e) {
+			w.onUpdateAnnotation(r(w.annotation, e));
+		}
+		function D(e) {
+			E((t) => {
+				t.title = e;
+			});
+		}
+		function O(e) {
+			E((t) => {
+				t.steps = e;
+			});
+		}
+		function k(e) {
+			E((t) => {
+				t.defaultValue = e === "" ? void 0 : e;
+			});
+		}
+		function A() {
 			let t = e();
-			w.value.steps.push({
-				id: t,
-				label: "",
-				filter: {
-					id: e(),
-					type: "and",
-					filters: []
-				}
-			}), T.value = t;
+			E((n) => {
+				n.steps.push({
+					id: t,
+					label: "",
+					filter: {
+						id: e(),
+						type: "and",
+						filters: []
+					}
+				});
+			}), w.onUpdateSelectedStepId(t);
 		}
-		return (e, c) => (d(), r(p(x), null, a({
-			"header-content": h(() => [s(p(y), {
-				modelValue: w.value.title,
-				"onUpdate:modelValue": c[0] ||= (e) => w.value.title = e,
-				class: u({ [p(t).flashing]: w.value.title.length === 0 }),
+		return (e, r) => (d(), i(p(b), null, o({
+			"header-content": m(() => [c(p(v), {
+				"model-value": w.annotation.title,
+				class: u({ [p(t).flashing]: w.annotation.title.length === 0 }),
 				"max-length": 40,
 				"max-width": "600px",
 				placeholder: "Annotation Title",
-				autofocus: w.value.title.length === 0,
-				validate: p(n)
+				autofocus: w.annotation.title.length === 0,
+				validate: p(n),
+				"onUpdate:modelValue": D
 			}, null, 8, [
-				"modelValue",
+				"model-value",
 				"class",
 				"autofocus",
 				"validate"
 			])]),
-			"footer-content": h(() => [s(p(_), {
+			"footer-content": m(() => [c(p(g), {
 				icon: "delete-bin",
 				reverse: "",
-				disabled: w.value.steps.length === 0,
-				onClick: c[5] ||= g((e) => E("delete-schema"), ["stop"])
+				disabled: w.annotation.steps.length === 0,
+				onClick: r[2] ||= h((e) => T("delete-schema"), ["stop"])
 			}, {
-				default: h(() => [...c[7] ||= [o(" Delete Schema ", -1)]]),
+				default: m(() => [...r[4] ||= [s(" Delete Schema ", -1)]]),
 				_: 1
 			}, 8, ["disabled"])]),
 			_: 2
-		}, [w.value ? {
+		}, [w.annotation ? {
 			name: "body-content",
-			fn: h(() => [i("div", { class: u([e.$style.root, { [p(t).disabled]: w.value.title.length === 0 }]) }, [
-				i("span", { class: u(e.$style.tip) }, "Above annotations override the ones below. Rearrange them by dragging.", 2),
-				s(p(b), {
-					items: w.value.steps,
-					"onUpdate:items": c[1] ||= (e) => w.value.steps = e,
+			fn: m(() => [a("div", { class: u([e.$style.root, { [p(t).disabled]: w.annotation.title.length === 0 }]) }, [
+				a("span", { class: u(e.$style.tip) }, " Above annotations override the ones below. Rearrange them by dragging. ", 2),
+				c(p(y), {
+					items: w.annotation.steps,
 					"get-item-key": (e) => e.id,
-					"is-active": (e) => e.id === T.value,
+					"is-active": (e) => e.id === w.selectedStepId,
 					"item-class": e.$style.stepItem,
 					class: u(e.$style.steps),
-					onItemClick: c[2] ||= (e) => T.value = e.id
+					"onUpdate:items": O,
+					onItemClick: r[0] ||= (e) => w.onUpdateSelectedStepId(e.id)
 				}, {
-					"item-title": h(({ item: e }) => [o(f(e.label), 1)]),
+					"item-title": m(({ item: e }) => [s(f(e.label), 1)]),
 					_: 1
 				}, 8, [
 					"items",
@@ -77,22 +98,22 @@ var w = /* @__PURE__ */ c({
 					"item-class",
 					"class"
 				]),
-				s(p(v), {
+				c(p(_), {
 					icon: "add",
-					onClick: D
+					onClick: A
 				}, {
-					default: h(() => [...c[6] ||= [o(" Add label ", -1)]]),
+					default: m(() => [...r[3] ||= [s(" Add label ", -1)]]),
 					_: 1
 				}),
-				s(p(S), {
-					class: u([e.$style.defaultValue, { [e.$style.emptyDefaultValue]: p(C)(w.value.defaultValue) }]),
-					"model-value": w.value.defaultValue ?? "",
+				c(p(x), {
+					class: u([e.$style.defaultValue, { [e.$style.emptyDefaultValue]: p(S)(w.annotation.defaultValue) }]),
+					"model-value": w.annotation.defaultValue ?? "",
 					label: "Label remaining with",
 					placeholder: "No label",
 					clearable: "",
 					helper: "This label will be applied to the remaining rows, after all other filters are applied.",
-					onClick: c[3] ||= g(() => {}, ["stop"]),
-					"onUpdate:modelValue": c[4] ||= (e) => w.value.defaultValue = e === "" ? void 0 : e
+					onClick: r[1] ||= h(() => {}, ["stop"]),
+					"onUpdate:modelValue": k
 				}, null, 8, ["class", "model-value"])
 			], 2)]),
 			key: "0"
@@ -100,6 +121,6 @@ var w = /* @__PURE__ */ c({
 	}
 });
 //#endregion
-export { w as default };
+export { C as default };
 
 //# sourceMappingURL=AnnotationsSidebar.vue2.js.map

package/dist/components/PlAnnotations/components/AnnotationsSidebar.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationsSidebar.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport $commonStyle from \"./style.module.css\";\n\nimport { randomInt } from \"@milaboratories/helpers\";\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n  PlTextField,\n} from \"@milaboratories/uikit\";\nimport type { Annotation } from \"../types\";\nimport { validateTitle } from \"../utils\";\nimport { isEmpty } from \"es-toolkit/compat\";\n\n// Models\nconst annotation = defineModel<Annotation>(\"annotation\", { required: true });\nconst selectedStepId = defineModel<undefined | number>(\"selectedStepId\");\n// Emits\nconst emits = defineEmits<{\n  (e: \"delete-schema\"): void;\n}>();\n// Actions\nfunction handleAddStep() {\n  const id = randomInt();\n  annotation.value.steps.push({\n    id,\n    label: \"\",\n    filter: {\n      id: randomInt(),\n      type: \"and\",\n      filters: [],\n    },\n  });\n  selectedStepId.value = id;\n}\n</script>\n\n<template>\n  <PlSidebarItem>\n    <template #header-content>\n      <PlEditableTitle\n        v-model=\"annotation.title\"\n        :class=\"{ [$commonStyle.flashing]: annotation.title.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Annotation Title\"\n        :autofocus=\"annotation.title.length === 0\"\n        :validate=\"validateTitle\"\n      />\n    </template>\n    <template v-if=\"annotation\" #body-content>\n      <div :class=\"[$style.root, { [$commonStyle.disabled]: annotation.title.length === 0 }]\">\n        <span :class=\"$style.tip\"\n          >Above annotations override the ones below. Rearrange them by dragging.</span\n        >\n\n        <PlElementList\n          v-model:items=\"annotation.steps\"\n          :get-item-key=\"(item) => item.id\"\n          :is-active=\"(item) => item.id === selectedStepId\"\n          :item-class=\"$style.stepItem\"\n          :class=\"$style.steps\"\n          @item-click=\"(item) => (selectedStepId = item.id)\"\n        >\n          <template #item-title=\"{ item }\">\n            {{ item.label }}\n          </template>\n        </PlElementList>\n\n        <PlBtnSecondary icon=\"add\" @click=\"handleAddStep\"> Add label </PlBtnSecondary>\n\n        <PlTextField\n          :class=\"[\n            $style.defaultValue,\n            { [$style.emptyDefaultValue]: isEmpty(annotation.defaultValue) },\n          ]\"\n          :model-value=\"annotation.defaultValue ?? ''\"\n          label=\"Label remaining with\"\n          placeholder=\"No label\"\n          clearable\n          helper=\"This label will be applied to the remaining rows, after all other filters are applied.\"\n          @click.stop\n          @update:model-value=\"annotation.defaultValue = $event === '' ? undefined : $event\"\n        />\n      </div>\n    </template>\n    <template #footer-content>\n      <PlBtnGhost\n        icon=\"delete-bin\"\n        reverse\n        :disabled=\"annotation.steps.length === 0\"\n        @click.stop=\"emits('delete-schema')\"\n      >\n        Delete Schema\n      </PlBtnGhost>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use \"@milaboratories/uikit/styles/variables\" as *;\n\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tip {\n  color: var(--txt-03);\n}\n\n.steps {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.stepItem {\n  cursor: pointer;\n}\n\n.defaultValue {\n  margin-top: 8px;\n}\n.emptyDefaultValue {\n  opacity: 0.5;\n  transition: opacity 0.2s ease-in-out;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAiBA,IAAM,IAAa,EAAuB,GAAC,aAAiC,EACtE,IAAiB,EAA+B,GAAC,iBAAiB,EAElE,IAAQ;EAId,SAAS,IAAgB;GACvB,IAAM,IAAK,GAAW;AAUtB,GATA,EAAW,MAAM,MAAM,KAAK;IAC1B;IACA,OAAO;IACP,QAAQ;KACN,IAAI,GAAW;KACf,MAAM;KACN,SAAS,EAAE;KACZ;IACF,CAAC,EACF,EAAe,QAAQ;;yBAKvB,EA0DgB,EAAA,EAAA,EAAA,MAAA,EAAA;GAzDH,kBAAc,QASrB,CARF,EAQE,EAAA,EAAA,EAAA;gBAPS,EAAA,MAAW;6CAAX,MAAW,QAAK;IACxB,OAAK,EAAA,GAAK,EAAA,EAAY,CAAC,WAAW,EAAA,MAAW,MAAM,WAAM,GAAA,CAAA;IACzD,cAAY;IACb,aAAU;IACV,aAAY;IACX,WAAW,EAAA,MAAW,MAAM,WAAM;IAClC,UAAU,EAAA,EAAa;;;;;;;GAuCjB,kBAAc,QAQV,CAPb,EAOa,EAAA,EAAA,EAAA;IANX,MAAK;IACL,SAAA;IACC,UAAU,EAAA,MAAW,MAAM,WAAM;IACjC,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAK,gBAAA,EAAA,CAAA,OAAA,CAAA;;qBAGpB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFC,mBAED,GAAA,CAAA,CAAA,CAAA;;;;MA5Cc,EAAA,QAAA;SAAa;eAkCrB,CAjCN,EAiCM,OAAA,EAjCA,OAAK,EAAA,CAAGA,EAAAA,OAAO,MAAI,GAAK,EAAA,EAAY,CAAC,WAAW,EAAA,MAAW,MAAM,WAAM,GAAA,CAAA,CAAA,EAAA,EAAA;IAC3E,EAEC,QAAA,EAFM,OAAK,EAAEA,EAAAA,OAAO,IAAG,EAAA,EACrB,0EAAsE,EAAA;IAGzE,EAWgB,EAAA,EAAA,EAAA;KAVN,OAAO,EAAA,MAAW;yCAAX,MAAW,QAAK;KAC9B,iBAAe,MAAS,EAAK;KAC7B,cAAY,MAAS,EAAK,OAAO,EAAA;KACjC,cAAYA,EAAAA,OAAO;KACnB,OAAK,EAAEA,EAAAA,OAAO,MAAK;KACnB,aAAU,AAAA,EAAA,QAAG,MAAU,EAAA,QAAiB,EAAK;;KAEnC,cAAU,GACH,EADO,cAAI,CAAA,EAAA,EACxB,EAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;;;IAIjB,EAA8E,EAAA,EAAA,EAAA;KAA9D,MAAK;KAAO,SAAO;;sBAA0B,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAX,eAAW,GAAA,CAAA,CAAA,CAAA;;;IAE7D,EAYE,EAAA,EAAA,EAAA;KAXC,OAAK,EAAA,CAAgBA,EAAAA,OAAO,cAAA,GAA6BA,EAAAA,OAAO,oBAAoB,EAAA,EAAO,CAAC,EAAA,MAAW,aAAY,EAAA,CAAA,CAAA;KAInH,eAAa,EAAA,MAAW,gBAAY;KACrC,OAAM;KACN,aAAY;KACZ,WAAA;KACA,QAAO;KACN,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;KACV,uBAAkB,AAAA,EAAA,QAAA,MAAE,EAAA,MAAW,eAAe,MAAM,KAAU,KAAA,IAAY"}
+{"version":3,"file":"AnnotationsSidebar.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport $commonStyle from \"./style.module.css\";\n\nimport { produce } from \"immer\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n  PlTextField,\n} from \"@milaboratories/uikit\";\nimport type { Annotation } from \"../types\";\nimport { validateTitle } from \"../utils\";\nimport { isEmpty } from \"es-toolkit/compat\";\n\nconst props = defineProps<{\n  annotation: Annotation;\n  selectedStepId: undefined | number;\n  onUpdateAnnotation: (annotation: Annotation) => void;\n  onUpdateSelectedStepId: (id: undefined | number) => void;\n}>();\n\nconst emits = defineEmits<{\n  (e: \"delete-schema\"): void;\n}>();\n\nfunction produceAnnotationUpdate(updater: (draft: Annotation) => void) {\n  props.onUpdateAnnotation(produce(props.annotation, updater));\n}\n\nfunction updateTitle(title: string) {\n  produceAnnotationUpdate((draft) => {\n    draft.title = title;\n  });\n}\n\nfunction updateSteps(steps: Annotation[\"steps\"]) {\n  produceAnnotationUpdate((draft) => {\n    draft.steps = steps;\n  });\n}\n\nfunction updateDefaultValue(value: string) {\n  produceAnnotationUpdate((draft) => {\n    draft.defaultValue = value === \"\" ? undefined : value;\n  });\n}\n\nfunction handleAddStep() {\n  const id = randomInt();\n  produceAnnotationUpdate((draft) => {\n    draft.steps.push({\n      id,\n      label: \"\",\n      filter: {\n        id: randomInt(),\n        type: \"and\",\n        filters: [],\n      },\n    });\n  });\n  props.onUpdateSelectedStepId(id);\n}\n</script>\n\n<template>\n  <PlSidebarItem>\n    <template #header-content>\n      <PlEditableTitle\n        :model-value=\"props.annotation.title\"\n        :class=\"{ [$commonStyle.flashing]: props.annotation.title.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Annotation Title\"\n        :autofocus=\"props.annotation.title.length === 0\"\n        :validate=\"validateTitle\"\n        @update:model-value=\"updateTitle\"\n      />\n    </template>\n    <template v-if=\"props.annotation\" #body-content>\n      <div :class=\"[$style.root, { [$commonStyle.disabled]: props.annotation.title.length === 0 }]\">\n        <span :class=\"$style.tip\">\n          Above annotations override the ones below. Rearrange them by dragging.\n        </span>\n        <PlElementList\n          :items=\"props.annotation.steps\"\n          :get-item-key=\"(item) => item.id\"\n          :is-active=\"(item) => item.id === props.selectedStepId\"\n          :item-class=\"$style.stepItem\"\n          :class=\"$style.steps\"\n          @update:items=\"updateSteps\"\n          @item-click=\"(item) => props.onUpdateSelectedStepId(item.id)\"\n        >\n          <template #item-title=\"{ item }\">\n            {{ item.label }}\n          </template>\n        </PlElementList>\n\n        <PlBtnSecondary icon=\"add\" @click=\"handleAddStep\"> Add label </PlBtnSecondary>\n\n        <PlTextField\n          :class=\"[\n            $style.defaultValue,\n            { [$style.emptyDefaultValue]: isEmpty(props.annotation.defaultValue) },\n          ]\"\n          :model-value=\"props.annotation.defaultValue ?? ''\"\n          label=\"Label remaining with\"\n          placeholder=\"No label\"\n          clearable\n          helper=\"This label will be applied to the remaining rows, after all other filters are applied.\"\n          @click.stop\n          @update:model-value=\"updateDefaultValue\"\n        />\n      </div>\n    </template>\n    <template #footer-content>\n      <PlBtnGhost\n        icon=\"delete-bin\"\n        reverse\n        :disabled=\"props.annotation.steps.length === 0\"\n        @click.stop=\"emits('delete-schema')\"\n      >\n        Delete Schema\n      </PlBtnGhost>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use \"@milaboratories/uikit/styles/variables\" as *;\n\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tip {\n  color: var(--txt-03);\n}\n\n.steps {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.stepItem {\n  cursor: pointer;\n}\n\n.defaultValue {\n  margin-top: 8px;\n}\n.emptyDefaultValue {\n  opacity: 0.5;\n  transition: opacity 0.2s ease-in-out;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAiBA,IAAM,IAAQ,GAOR,IAAQ;EAId,SAAS,EAAwB,GAAsC;AACrE,KAAM,mBAAmB,EAAQ,EAAM,YAAY,EAAQ,CAAC;;EAG9D,SAAS,EAAY,GAAe;AAClC,MAAyB,MAAU;AACjC,MAAM,QAAQ;KACd;;EAGJ,SAAS,EAAY,GAA4B;AAC/C,MAAyB,MAAU;AACjC,MAAM,QAAQ;KACd;;EAGJ,SAAS,EAAmB,GAAe;AACzC,MAAyB,MAAU;AACjC,MAAM,eAAe,MAAU,KAAK,KAAA,IAAY;KAChD;;EAGJ,SAAS,IAAgB;GACvB,IAAM,IAAK,GAAW;AAYtB,GAXA,GAAyB,MAAU;AACjC,MAAM,MAAM,KAAK;KACf;KACA,OAAO;KACP,QAAQ;MACN,IAAI,GAAW;MACf,MAAM;MACN,SAAS,EAAE;MACZ;KACF,CAAC;KACF,EACF,EAAM,uBAAuB,EAAG;;yBAKhC,EA2DgB,EAAA,EAAA,EAAA,MAAA,EAAA;GA1DH,kBAAc,QAUrB,CATF,EASE,EAAA,EAAA,EAAA;IARC,eAAa,EAAM,WAAW;IAC9B,OAAK,EAAA,GAAK,EAAA,EAAY,CAAC,WAAW,EAAM,WAAW,MAAM,WAAM,GAAA,CAAA;IAC/D,cAAY;IACb,aAAU;IACV,aAAY;IACX,WAAW,EAAM,WAAW,MAAM,WAAM;IACxC,UAAU,EAAA,EAAa;IACvB,uBAAoB;;;;;;;GAuCd,kBAAc,QAQV,CAPb,EAOa,EAAA,EAAA,EAAA;IANX,MAAK;IACL,SAAA;IACC,UAAU,EAAM,WAAW,MAAM,WAAM;IACvC,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAK,gBAAA,EAAA,CAAA,OAAA,CAAA;;qBAGpB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFC,mBAED,GAAA,CAAA,CAAA,CAAA;;;;MA5Cc,EAAM,aAAA;SAAa;eAkC3B,CAjCN,EAiCM,OAAA,EAjCA,OAAK,EAAA,CAAGA,EAAAA,OAAO,MAAI,GAAK,EAAA,EAAY,CAAC,WAAW,EAAM,WAAW,MAAM,WAAM,GAAA,CAAA,CAAA,EAAA,EAAA;IACjF,EAEO,QAAA,EAFA,OAAK,EAAEA,EAAAA,OAAO,IAAG,EAAA,EAAE,4EAE1B,EAAA;IACA,EAYgB,EAAA,EAAA,EAAA;KAXb,OAAO,EAAM,WAAW;KACxB,iBAAe,MAAS,EAAK;KAC7B,cAAY,MAAS,EAAK,OAAO,EAAM;KACvC,cAAYA,EAAAA,OAAO;KACnB,OAAK,EAAEA,EAAAA,OAAO,MAAK;KACnB,kBAAc;KACd,aAAU,AAAA,EAAA,QAAG,MAAS,EAAM,uBAAuB,EAAK,GAAE;;KAEhD,cAAU,GACH,EADO,cAAI,CAAA,EAAA,EACxB,EAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;;;IAIjB,EAA8E,EAAA,EAAA,EAAA;KAA9D,MAAK;KAAO,SAAO;;sBAA0B,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAX,eAAW,GAAA,CAAA,CAAA,CAAA;;;IAE7D,EAYE,EAAA,EAAA,EAAA;KAXC,OAAK,EAAA,CAAgBA,EAAAA,OAAO,cAAA,GAA6BA,EAAAA,OAAO,oBAAoB,EAAA,EAAO,CAAC,EAAM,WAAW,aAAY,EAAA,CAAA,CAAA;KAIzH,eAAa,EAAM,WAAW,gBAAY;KAC3C,OAAM;KACN,aAAY;KACZ,WAAA;KACA,QAAO;KACN,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;KACV,uBAAoB"}

package/dist/components/PlAnnotations/components/FilterSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSidebar.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type Props = {\n  columns: PlAdvancedFilterItem[];\n\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  hasSelectedColumns?: boolean;\n  getValuesForSelectedColumns?: () => Promise<\n    undefined | { columnId: PObjectId; values: string[] }\n  >;\n};\n</script>\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport { PlBtnSecondary, PlEditableTitle, PlSidebarItem } from \"@milaboratories/uikit\";\nimport type { ListOptionBase, PObjectId, SUniversalPColumnId } from \"@platforma-sdk/model\";\n\nimport { PlAdvancedFilterComponent } from \"../../PlAdvancedFilter\";\nimport type {\n  PlAdvancedFilterItem,\n  PlAdvancedFilterColumnId,\n  PlAdvancedFilterSupportedFilters,\n  PlAdvancedFilter,\n} from \"../../PlAdvancedFilter\";\nimport type { Filter } from \"../types\";\n\nimport $commonStyle from \"./style.module.css\";\nimport { validateTitle } from \"../utils\";\n\n// Models\nconst step = defineModel<Filter>(\"step\", { required: true });\n// Props\nconst props = defineProps<Props>();\n// State\nconst withSelection = computed(() => {\n  return props.hasSelectedColumns !== undefined && props.getValuesForSelectedColumns !== undefined;\n});\n// Actions\nconst addFilterPlaceholder = () => {\n  step.value.filter.filters.push({\n    id: randomInt(),\n    isExpanded: true,\n    type: \"or\",\n    filters: [\n      {\n        id: randomInt(),\n        type: \"isNA\",\n        column: props.columns[0].id as SUniversalPColumnId,\n      },\n    ],\n  });\n};\n\nasync function addFilterFromSelected() {\n  if (props.hasSelectedColumns === undefined || props.getValuesForSelectedColumns === undefined)\n    return;\n\n  const data = await props.getValuesForSelectedColumns();\n  if (!data || data.values.length === 0) return;\n\n  const { columnId, values } = data;\n  const shortReminder =\n    values.slice(0, 3).join(\", \") + (values.length > 3 ? ` and ${values.length - 3} more` : \"\");\n\n  step.value.filter.filters.push({\n    id: randomInt(),\n    name: `Selected list (${shortReminder})`,\n    isExpanded: false,\n    type: \"or\",\n    filters: values.map((value, i) => ({\n      id: i,\n      type: \"patternEquals\",\n      column: columnId as SUniversalPColumnId,\n      value,\n    })),\n  });\n}\n\nconst supportedFilters = [\n  \"isNA\",\n  \"isNotNA\",\n  \"greaterThan\",\n  \"greaterThanOrEqual\",\n  \"lessThan\",\n  \"lessThanOrEqual\",\n  \"patternEquals\",\n  \"patternNotEquals\",\n  \"patternContainSubsequence\",\n  \"patternNotContainSubsequence\",\n  \"equal\",\n  \"notEqual\",\n  \"topN\",\n  \"bottomN\",\n] as (typeof PlAdvancedFilterSupportedFilters)[number][];\n</script>\n\n<template>\n  <PlSidebarItem v-if=\"step\">\n    <template #header-content>\n      <PlEditableTitle\n        :key=\"step.id\"\n        v-model=\"step.label\"\n        :class=\"{ [$commonStyle.flashing]: step.label.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Label\"\n        :autofocus=\"step.label.length === 0\"\n        :validate=\"validateTitle\"\n      />\n    </template>\n    <template #body-content>\n      <PlAdvancedFilterComponent\n        :filters=\"step.filter as PlAdvancedFilter\"\n        :class=\"[$style.root, { [$commonStyle.disabled]: step.label.length === 0 }]\"\n        :options=\"props.columns\"\n        :supported-filters=\"supportedFilters\"\n        :get-suggest-options=\"props.getSuggestOptions\"\n        :enable-dnd=\"false\"\n        :enable-add-group-button=\"true\"\n        @update-filters=\"(v) => (step = { ...step, filter: v as typeof step.filter })\"\n      >\n        <template #add-group-buttons>\n          <div :class=\"$style.actions\">\n            <PlBtnSecondary icon=\"add\" @click=\"addFilterPlaceholder\"> Add Filter </PlBtnSecondary>\n            <PlBtnSecondary\n              v-if=\"withSelection\"\n              icon=\"add\"\n              :disabled=\"!props.hasSelectedColumns\"\n              @click=\"addFilterFromSelected\"\n            >\n              From selection\n            </PlBtnSecondary>\n          </div>\n        </template>\n      </PlAdvancedFilterComponent>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style module>\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.actions {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"FilterSidebar.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type Props = {\n  columns: PlAdvancedFilterItem[];\n\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  hasSelectedColumns?: boolean;\n  getValuesForSelectedColumns?: () => Promise<\n    undefined | { columnId: PObjectId; values: string[] }\n  >;\n};\n</script>\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { produce } from \"immer\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport { PlBtnSecondary, PlEditableTitle, PlSidebarItem } from \"@milaboratories/uikit\";\nimport type { ListOptionBase, PObjectId, SUniversalPColumnId } from \"@platforma-sdk/model\";\n\nimport { PlAdvancedFilterComponent } from \"../../PlAdvancedFilter\";\nimport type {\n  PlAdvancedFilterItem,\n  PlAdvancedFilterColumnId,\n  PlAdvancedFilterSupportedFilters,\n  PlAdvancedFilter,\n} from \"../../PlAdvancedFilter\";\nimport type { Filter } from \"../types\";\nimport { validateTitle } from \"../utils\";\n\nimport $commonStyle from \"./style.module.css\";\n\nconst props = defineProps<\n  Props & {\n    step: Filter;\n    onUpdateStep: (step: Filter) => void;\n  }\n>();\n\nconst withSelection = computed(() => {\n  return props.hasSelectedColumns !== undefined && props.getValuesForSelectedColumns !== undefined;\n});\n\nfunction produceStepUpdate(updater: (draft: Filter) => void) {\n  props.onUpdateStep(produce(props.step, updater));\n}\n\nfunction updateLabel(label: string) {\n  produceStepUpdate((draft) => {\n    draft.label = label;\n  });\n}\n\nfunction updateFilter(filter: PlAdvancedFilter) {\n  produceStepUpdate((draft) => {\n    draft.filter = filter as typeof draft.filter;\n  });\n}\n\nfunction addFilterPlaceholder() {\n  if (props.columns.length === 0) return;\n  produceStepUpdate((draft) => {\n    draft.filter.filters.push({\n      id: randomInt(),\n      isExpanded: true,\n      type: \"or\",\n      filters: [\n        {\n          id: randomInt(),\n          type: \"isNA\",\n          column: props.columns[0].id as SUniversalPColumnId,\n        },\n      ],\n    });\n  });\n}\n\nasync function addFilterFromSelected() {\n  if (props.hasSelectedColumns === undefined || props.getValuesForSelectedColumns === undefined)\n    return;\n\n  const data = await props.getValuesForSelectedColumns();\n  if (!data || data.values.length === 0) return;\n\n  const { columnId, values } = data;\n  const shortReminder =\n    values.slice(0, 3).join(\", \") + (values.length > 3 ? ` and ${values.length - 3} more` : \"\");\n\n  produceStepUpdate((draft) => {\n    draft.filter.filters.push({\n      id: randomInt(),\n      name: `Selected list (${shortReminder})`,\n      isExpanded: false,\n      type: \"or\",\n      filters: values.map((value, i) => ({\n        id: i,\n        type: \"patternEquals\",\n        column: columnId as SUniversalPColumnId,\n        value,\n      })),\n    });\n  });\n}\n\nconst supportedFilters = [\n  \"isNA\",\n  \"isNotNA\",\n  \"greaterThan\",\n  \"greaterThanOrEqual\",\n  \"lessThan\",\n  \"lessThanOrEqual\",\n  \"patternEquals\",\n  \"patternNotEquals\",\n  \"patternContainSubsequence\",\n  \"patternNotContainSubsequence\",\n  \"equal\",\n  \"notEqual\",\n  \"topN\",\n  \"bottomN\",\n] as (typeof PlAdvancedFilterSupportedFilters)[number][];\n</script>\n\n<template>\n  <PlSidebarItem v-if=\"props.step\">\n    <template #header-content>\n      <PlEditableTitle\n        :key=\"props.step.id\"\n        :model-value=\"props.step.label\"\n        :class=\"{ [$commonStyle.flashing]: props.step.label.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Label\"\n        :autofocus=\"props.step.label.length === 0\"\n        :validate=\"validateTitle\"\n        @update:model-value=\"updateLabel\"\n      />\n    </template>\n    <template #body-content>\n      <PlAdvancedFilterComponent\n        :class=\"[$style.root, { [$commonStyle.disabled]: props.step.label.length === 0 }]\"\n        :options=\"props.columns\"\n        :filters=\"props.step.filter as PlAdvancedFilter\"\n        :on-update-filters=\"updateFilter\"\n        :supported-filters=\"supportedFilters\"\n        :get-suggest-options=\"props.getSuggestOptions\"\n        :enable-dnd=\"false\"\n        :enable-add-group-button=\"true\"\n      >\n        <template #add-group-buttons>\n          <div :class=\"$style.actions\">\n            <PlBtnSecondary icon=\"add\" @click=\"addFilterPlaceholder\"> Add Filter </PlBtnSecondary>\n            <PlBtnSecondary\n              v-if=\"withSelection\"\n              icon=\"add\"\n              :disabled=\"props.hasSelectedColumns !== true\"\n              @click=\"addFilterFromSelected\"\n            >\n              From selection\n            </PlBtnSecondary>\n          </div>\n        </template>\n      </PlAdvancedFilterComponent>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style module>\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.actions {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAnnotations/components/FilterSidebar.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSidebar.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type Props = {\n  columns: PlAdvancedFilterItem[];\n\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  hasSelectedColumns?: boolean;\n  getValuesForSelectedColumns?: () => Promise<\n    undefined | { columnId: PObjectId; values: string[] }\n  >;\n};\n</script>\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport { PlBtnSecondary, PlEditableTitle, PlSidebarItem } from \"@milaboratories/uikit\";\nimport type { ListOptionBase, PObjectId, SUniversalPColumnId } from \"@platforma-sdk/model\";\n\nimport { PlAdvancedFilterComponent } from \"../../PlAdvancedFilter\";\nimport type {\n  PlAdvancedFilterItem,\n  PlAdvancedFilterColumnId,\n  PlAdvancedFilterSupportedFilters,\n  PlAdvancedFilter,\n} from \"../../PlAdvancedFilter\";\nimport type { Filter } from \"../types\";\n\nimport $commonStyle from \"./style.module.css\";\nimport { validateTitle } from \"../utils\";\n\n// Models\nconst step = defineModel<Filter>(\"step\", { required: true });\n// Props\nconst props = defineProps<Props>();\n// State\nconst withSelection = computed(() => {\n  return props.hasSelectedColumns !== undefined && props.getValuesForSelectedColumns !== undefined;\n});\n// Actions\nconst addFilterPlaceholder = () => {\n  step.value.filter.filters.push({\n    id: randomInt(),\n    isExpanded: true,\n    type: \"or\",\n    filters: [\n      {\n        id: randomInt(),\n        type: \"isNA\",\n        column: props.columns[0].id as SUniversalPColumnId,\n      },\n    ],\n  });\n};\n\nasync function addFilterFromSelected() {\n  if (props.hasSelectedColumns === undefined || props.getValuesForSelectedColumns === undefined)\n    return;\n\n  const data = await props.getValuesForSelectedColumns();\n  if (!data || data.values.length === 0) return;\n\n  const { columnId, values } = data;\n  const shortReminder =\n    values.slice(0, 3).join(\", \") + (values.length > 3 ? ` and ${values.length - 3} more` : \"\");\n\n  step.value.filter.filters.push({\n    id: randomInt(),\n    name: `Selected list (${shortReminder})`,\n    isExpanded: false,\n    type: \"or\",\n    filters: values.map((value, i) => ({\n      id: i,\n      type: \"patternEquals\",\n      column: columnId as SUniversalPColumnId,\n      value,\n    })),\n  });\n}\n\nconst supportedFilters = [\n  \"isNA\",\n  \"isNotNA\",\n  \"greaterThan\",\n  \"greaterThanOrEqual\",\n  \"lessThan\",\n  \"lessThanOrEqual\",\n  \"patternEquals\",\n  \"patternNotEquals\",\n  \"patternContainSubsequence\",\n  \"patternNotContainSubsequence\",\n  \"equal\",\n  \"notEqual\",\n  \"topN\",\n  \"bottomN\",\n] as (typeof PlAdvancedFilterSupportedFilters)[number][];\n</script>\n\n<template>\n  <PlSidebarItem v-if=\"step\">\n    <template #header-content>\n      <PlEditableTitle\n        :key=\"step.id\"\n        v-model=\"step.label\"\n        :class=\"{ [$commonStyle.flashing]: step.label.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Label\"\n        :autofocus=\"step.label.length === 0\"\n        :validate=\"validateTitle\"\n      />\n    </template>\n    <template #body-content>\n      <PlAdvancedFilterComponent\n        :filters=\"step.filter as PlAdvancedFilter\"\n        :class=\"[$style.root, { [$commonStyle.disabled]: step.label.length === 0 }]\"\n        :options=\"props.columns\"\n        :supported-filters=\"supportedFilters\"\n        :get-suggest-options=\"props.getSuggestOptions\"\n        :enable-dnd=\"false\"\n        :enable-add-group-button=\"true\"\n        @update-filters=\"(v) => (step = { ...step, filter: v as typeof step.filter })\"\n      >\n        <template #add-group-buttons>\n          <div :class=\"$style.actions\">\n            <PlBtnSecondary icon=\"add\" @click=\"addFilterPlaceholder\"> Add Filter </PlBtnSecondary>\n            <PlBtnSecondary\n              v-if=\"withSelection\"\n              icon=\"add\"\n              :disabled=\"!props.hasSelectedColumns\"\n              @click=\"addFilterFromSelected\"\n            >\n              From selection\n            </PlBtnSecondary>\n          </div>\n        </template>\n      </PlAdvancedFilterComponent>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style module>\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.actions {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"FilterSidebar.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type Props = {\n  columns: PlAdvancedFilterItem[];\n\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  hasSelectedColumns?: boolean;\n  getValuesForSelectedColumns?: () => Promise<\n    undefined | { columnId: PObjectId; values: string[] }\n  >;\n};\n</script>\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { produce } from \"immer\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport { PlBtnSecondary, PlEditableTitle, PlSidebarItem } from \"@milaboratories/uikit\";\nimport type { ListOptionBase, PObjectId, SUniversalPColumnId } from \"@platforma-sdk/model\";\n\nimport { PlAdvancedFilterComponent } from \"../../PlAdvancedFilter\";\nimport type {\n  PlAdvancedFilterItem,\n  PlAdvancedFilterColumnId,\n  PlAdvancedFilterSupportedFilters,\n  PlAdvancedFilter,\n} from \"../../PlAdvancedFilter\";\nimport type { Filter } from \"../types\";\nimport { validateTitle } from \"../utils\";\n\nimport $commonStyle from \"./style.module.css\";\n\nconst props = defineProps<\n  Props & {\n    step: Filter;\n    onUpdateStep: (step: Filter) => void;\n  }\n>();\n\nconst withSelection = computed(() => {\n  return props.hasSelectedColumns !== undefined && props.getValuesForSelectedColumns !== undefined;\n});\n\nfunction produceStepUpdate(updater: (draft: Filter) => void) {\n  props.onUpdateStep(produce(props.step, updater));\n}\n\nfunction updateLabel(label: string) {\n  produceStepUpdate((draft) => {\n    draft.label = label;\n  });\n}\n\nfunction updateFilter(filter: PlAdvancedFilter) {\n  produceStepUpdate((draft) => {\n    draft.filter = filter as typeof draft.filter;\n  });\n}\n\nfunction addFilterPlaceholder() {\n  if (props.columns.length === 0) return;\n  produceStepUpdate((draft) => {\n    draft.filter.filters.push({\n      id: randomInt(),\n      isExpanded: true,\n      type: \"or\",\n      filters: [\n        {\n          id: randomInt(),\n          type: \"isNA\",\n          column: props.columns[0].id as SUniversalPColumnId,\n        },\n      ],\n    });\n  });\n}\n\nasync function addFilterFromSelected() {\n  if (props.hasSelectedColumns === undefined || props.getValuesForSelectedColumns === undefined)\n    return;\n\n  const data = await props.getValuesForSelectedColumns();\n  if (!data || data.values.length === 0) return;\n\n  const { columnId, values } = data;\n  const shortReminder =\n    values.slice(0, 3).join(\", \") + (values.length > 3 ? ` and ${values.length - 3} more` : \"\");\n\n  produceStepUpdate((draft) => {\n    draft.filter.filters.push({\n      id: randomInt(),\n      name: `Selected list (${shortReminder})`,\n      isExpanded: false,\n      type: \"or\",\n      filters: values.map((value, i) => ({\n        id: i,\n        type: \"patternEquals\",\n        column: columnId as SUniversalPColumnId,\n        value,\n      })),\n    });\n  });\n}\n\nconst supportedFilters = [\n  \"isNA\",\n  \"isNotNA\",\n  \"greaterThan\",\n  \"greaterThanOrEqual\",\n  \"lessThan\",\n  \"lessThanOrEqual\",\n  \"patternEquals\",\n  \"patternNotEquals\",\n  \"patternContainSubsequence\",\n  \"patternNotContainSubsequence\",\n  \"equal\",\n  \"notEqual\",\n  \"topN\",\n  \"bottomN\",\n] as (typeof PlAdvancedFilterSupportedFilters)[number][];\n</script>\n\n<template>\n  <PlSidebarItem v-if=\"props.step\">\n    <template #header-content>\n      <PlEditableTitle\n        :key=\"props.step.id\"\n        :model-value=\"props.step.label\"\n        :class=\"{ [$commonStyle.flashing]: props.step.label.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Label\"\n        :autofocus=\"props.step.label.length === 0\"\n        :validate=\"validateTitle\"\n        @update:model-value=\"updateLabel\"\n      />\n    </template>\n    <template #body-content>\n      <PlAdvancedFilterComponent\n        :class=\"[$style.root, { [$commonStyle.disabled]: props.step.label.length === 0 }]\"\n        :options=\"props.columns\"\n        :filters=\"props.step.filter as PlAdvancedFilter\"\n        :on-update-filters=\"updateFilter\"\n        :supported-filters=\"supportedFilters\"\n        :get-suggest-options=\"props.getSuggestOptions\"\n        :enable-dnd=\"false\"\n        :enable-add-group-button=\"true\"\n      >\n        <template #add-group-buttons>\n          <div :class=\"$style.actions\">\n            <PlBtnSecondary icon=\"add\" @click=\"addFilterPlaceholder\"> Add Filter </PlBtnSecondary>\n            <PlBtnSecondary\n              v-if=\"withSelection\"\n              icon=\"add\"\n              :disabled=\"props.hasSelectedColumns !== true\"\n              @click=\"addFilterFromSelected\"\n            >\n              From selection\n            </PlBtnSecondary>\n          </div>\n        </template>\n      </PlAdvancedFilterComponent>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style module>\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.actions {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAnnotations/components/FilterSidebar.vue.d.ts

@@ -15,14 +15,12 @@ export type Props = {
         values: string[];
     }>;
 };
-declare const _default: import('vue').DefineComponent<{
+declare const _default: import('vue').DefineComponent<Props & {
     step: Filter;
-} & Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:step": (value: Filter) => any;
-}, string, import('vue').PublicProps, Readonly<{
+    onUpdateStep: (step: Filter) => void;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props & {
     step: Filter;
-} & Props> & Readonly<{
-    "onUpdate:step"?: ((value: Filter) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+    onUpdateStep: (step: Filter) => void;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=FilterSidebar.vue.d.ts.map

package/dist/components/PlAnnotations/components/FilterSidebar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSidebar.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"names":[],"mappings":"AAmKA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAuB,MAAM,sBAAsB,CAAC;AAG3F,OAAO,KAAK,EACV,oBAAoB,EACpB,wBAAwB,EAGzB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMvC,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAEhC,iBAAiB,EAAE,CAAC,MAAM,EAAE;QAC1B,QAAQ,EAAE,wBAAwB,CAAC;QACnC,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC;KAC/B,KAAK,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;IAErF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,2BAA2B,CAAC,EAAE,MAAM,OAAO,CACzC,SAAS,GAAG;QAAE,QAAQ,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE,CACtD,CAAC;CACH,CAAC;;UA0EM,MAAM;;;;UAAN,MAAM;;;;AAxEd,wBA8PK"}
+{"version":3,"file":"FilterSidebar.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"names":[],"mappings":"AA6LA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAuB,MAAM,sBAAsB,CAAC;AAG3F,OAAO,KAAK,EACV,oBAAoB,EACpB,wBAAwB,EAGzB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMvC,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAEhC,iBAAiB,EAAE,CAAC,MAAM,EAAE;QAC1B,QAAQ,EAAE,wBAAwB,CAAC;QACnC,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC;KAC/B,KAAK,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;IAErF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,2BAA2B,CAAC,EAAE,MAAM,OAAO,CACzC,SAAS,GAAG;QAAE,QAAQ,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE,CACtD,CAAC;CACH,CAAC;;UAIQ,MAAM;kBACE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;;UAD9B,MAAM;kBACE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;;AAHxC,wBA+QK"}

package/dist/components/PlAnnotations/components/FilterSidebar.vue2.js

@@ -4,53 +4,70 @@ import t from "../../PlAdvancedFilter/PlAdvancedFilter.js";
 import "../../PlAdvancedFilter/index.js";
 import n from "./style.module.js";
 import { validateTitle as r } from "../utils.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, unref as m, useModel as h, withCtx as g } from "vue";
-import { PlBtnSecondary as _, PlEditableTitle as v, PlSidebarItem as y } from "@milaboratories/uikit";
+import { produce as i } from "immer";
+import { computed as a, createBlock as o, createCommentVNode as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, unref as m, withCtx as h } from "vue";
+import { PlBtnSecondary as g, PlEditableTitle as _, PlSidebarItem as v } from "@milaboratories/uikit";
 //#region src/components/PlAnnotations/components/FilterSidebar.vue?vue&type=script&setup=true&lang.ts
-var b = /* @__PURE__ */ u({
+var y = /* @__PURE__ */ d({
 	__name: "FilterSidebar",
-	props: /* @__PURE__ */ d({
+	props: {
 		columns: {},
 		getSuggestOptions: { type: Function },
 		hasSelectedColumns: { type: Boolean },
-		getValuesForSelectedColumns: { type: Function }
-	}, {
-		step: { required: !0 },
-		stepModifiers: {}
-	}),
-	emits: ["update:step"],
-	setup(u) {
-		let d = h(u, "step"), b = u, x = i(() => b.hasSelectedColumns !== void 0 && b.getValuesForSelectedColumns !== void 0), S = () => {
-			d.value.filter.filters.push({
-				id: e(),
-				isExpanded: !0,
-				type: "or",
-				filters: [{
+		getValuesForSelectedColumns: { type: Function },
+		step: {},
+		onUpdateStep: { type: Function }
+	},
+	setup(d) {
+		let y = d, b = a(() => y.hasSelectedColumns !== void 0 && y.getValuesForSelectedColumns !== void 0);
+		function x(e) {
+			y.onUpdateStep(i(y.step, e));
+		}
+		function S(e) {
+			x((t) => {
+				t.label = e;
+			});
+		}
+		function C(e) {
+			x((t) => {
+				t.filter = e;
+			});
+		}
+		function w() {
+			y.columns.length !== 0 && x((t) => {
+				t.filter.filters.push({
 					id: e(),
-					type: "isNA",
-					column: b.columns[0].id
-				}]
+					isExpanded: !0,
+					type: "or",
+					filters: [{
+						id: e(),
+						type: "isNA",
+						column: y.columns[0].id
+					}]
+				});
 			});
-		};
-		async function C() {
-			if (b.hasSelectedColumns === void 0 || b.getValuesForSelectedColumns === void 0) return;
-			let t = await b.getValuesForSelectedColumns();
+		}
+		async function T() {
+			if (y.hasSelectedColumns === void 0 || y.getValuesForSelectedColumns === void 0) return;
+			let t = await y.getValuesForSelectedColumns();
 			if (!t || t.values.length === 0) return;
 			let { columnId: n, values: r } = t, i = r.slice(0, 3).join(", ") + (r.length > 3 ? ` and ${r.length - 3} more` : "");
-			d.value.filter.filters.push({
-				id: e(),
-				name: `Selected list (${i})`,
-				isExpanded: !1,
-				type: "or",
-				filters: r.map((e, t) => ({
-					id: t,
-					type: "patternEquals",
-					column: n,
-					value: e
-				}))
+			x((t) => {
+				t.filter.filters.push({
+					id: e(),
+					name: `Selected list (${i})`,
+					isExpanded: !1,
+					type: "or",
+					filters: r.map((e, t) => ({
+						id: t,
+						type: "patternEquals",
+						column: n,
+						value: e
+					}))
+				});
 			});
 		}
-		let w = [
+		let E = [
 			"isNA",
 			"isNotNA",
 			"greaterThan",
@@ -66,63 +83,60 @@ var b = /* @__PURE__ */ u({
 			"topN",
 			"bottomN"
 		];
-		return (e, i) => d.value ? (p(), a(m(y), { key: 0 }, {
-			"header-content": g(() => [(p(), a(m(v), {
-				key: d.value.id,
-				modelValue: d.value.label,
-				"onUpdate:modelValue": i[0] ||= (e) => d.value.label = e,
-				class: f({ [m(n).flashing]: d.value.label.length === 0 }),
+		return (e, i) => y.step ? (p(), o(m(v), { key: 0 }, {
+			"header-content": h(() => [(p(), o(m(_), {
+				key: y.step.id,
+				"model-value": y.step.label,
+				class: f({ [m(n).flashing]: y.step.label.length === 0 }),
 				"max-length": 40,
 				"max-width": "600px",
 				placeholder: "Label",
-				autofocus: d.value.label.length === 0,
-				validate: m(r)
+				autofocus: y.step.label.length === 0,
+				validate: m(r),
+				"onUpdate:modelValue": S
 			}, null, 8, [
-				"modelValue",
+				"model-value",
 				"class",
 				"autofocus",
 				"validate"
 			]))]),
-			"body-content": g(() => [l(m(t), {
-				filters: d.value.filter,
-				class: f([e.$style.root, { [m(n).disabled]: d.value.label.length === 0 }]),
-				options: b.columns,
-				"supported-filters": w,
-				"get-suggest-options": b.getSuggestOptions,
+			"body-content": h(() => [u(m(t), {
+				class: f([e.$style.root, { [m(n).disabled]: y.step.label.length === 0 }]),
+				options: y.columns,
+				filters: y.step.filter,
+				"on-update-filters": C,
+				"supported-filters": E,
+				"get-suggest-options": y.getSuggestOptions,
 				"enable-dnd": !1,
-				"enable-add-group-button": !0,
-				onUpdateFilters: i[1] ||= (e) => d.value = {
-					...d.value,
-					filter: e
-				}
+				"enable-add-group-button": !0
 			}, {
-				"add-group-buttons": g(() => [s("div", { class: f(e.$style.actions) }, [l(m(_), {
+				"add-group-buttons": h(() => [c("div", { class: f(e.$style.actions) }, [u(m(g), {
 					icon: "add",
-					onClick: S
+					onClick: w
 				}, {
-					default: g(() => [...i[2] ||= [c(" Add Filter ", -1)]]),
+					default: h(() => [...i[0] ||= [l(" Add Filter ", -1)]]),
 					_: 1
-				}), x.value ? (p(), a(m(_), {
+				}), b.value ? (p(), o(m(g), {
 					key: 0,
 					icon: "add",
-					disabled: !b.hasSelectedColumns,
-					onClick: C
+					disabled: y.hasSelectedColumns !== !0,
+					onClick: T
 				}, {
-					default: g(() => [...i[3] ||= [c(" From selection ", -1)]]),
+					default: h(() => [...i[1] ||= [l(" From selection ", -1)]]),
 					_: 1
-				}, 8, ["disabled"])) : o("", !0)], 2)]),
+				}, 8, ["disabled"])) : s("", !0)], 2)]),
 				_: 1
 			}, 8, [
-				"filters",
 				"class",
 				"options",
+				"filters",
 				"get-suggest-options"
 			])]),
 			_: 1
-		})) : o("", !0);
+		})) : s("", !0);
 	}
 });
 //#endregion
-export { b as default };
+export { y as default };
 
 //# sourceMappingURL=FilterSidebar.vue2.js.map

package/dist/components/PlAnnotations/components/FilterSidebar.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSidebar.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type Props = {\n  columns: PlAdvancedFilterItem[];\n\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  hasSelectedColumns?: boolean;\n  getValuesForSelectedColumns?: () => Promise<\n    undefined | { columnId: PObjectId; values: string[] }\n  >;\n};\n</script>\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport { PlBtnSecondary, PlEditableTitle, PlSidebarItem } from \"@milaboratories/uikit\";\nimport type { ListOptionBase, PObjectId, SUniversalPColumnId } from \"@platforma-sdk/model\";\n\nimport { PlAdvancedFilterComponent } from \"../../PlAdvancedFilter\";\nimport type {\n  PlAdvancedFilterItem,\n  PlAdvancedFilterColumnId,\n  PlAdvancedFilterSupportedFilters,\n  PlAdvancedFilter,\n} from \"../../PlAdvancedFilter\";\nimport type { Filter } from \"../types\";\n\nimport $commonStyle from \"./style.module.css\";\nimport { validateTitle } from \"../utils\";\n\n// Models\nconst step = defineModel<Filter>(\"step\", { required: true });\n// Props\nconst props = defineProps<Props>();\n// State\nconst withSelection = computed(() => {\n  return props.hasSelectedColumns !== undefined && props.getValuesForSelectedColumns !== undefined;\n});\n// Actions\nconst addFilterPlaceholder = () => {\n  step.value.filter.filters.push({\n    id: randomInt(),\n    isExpanded: true,\n    type: \"or\",\n    filters: [\n      {\n        id: randomInt(),\n        type: \"isNA\",\n        column: props.columns[0].id as SUniversalPColumnId,\n      },\n    ],\n  });\n};\n\nasync function addFilterFromSelected() {\n  if (props.hasSelectedColumns === undefined || props.getValuesForSelectedColumns === undefined)\n    return;\n\n  const data = await props.getValuesForSelectedColumns();\n  if (!data || data.values.length === 0) return;\n\n  const { columnId, values } = data;\n  const shortReminder =\n    values.slice(0, 3).join(\", \") + (values.length > 3 ? ` and ${values.length - 3} more` : \"\");\n\n  step.value.filter.filters.push({\n    id: randomInt(),\n    name: `Selected list (${shortReminder})`,\n    isExpanded: false,\n    type: \"or\",\n    filters: values.map((value, i) => ({\n      id: i,\n      type: \"patternEquals\",\n      column: columnId as SUniversalPColumnId,\n      value,\n    })),\n  });\n}\n\nconst supportedFilters = [\n  \"isNA\",\n  \"isNotNA\",\n  \"greaterThan\",\n  \"greaterThanOrEqual\",\n  \"lessThan\",\n  \"lessThanOrEqual\",\n  \"patternEquals\",\n  \"patternNotEquals\",\n  \"patternContainSubsequence\",\n  \"patternNotContainSubsequence\",\n  \"equal\",\n  \"notEqual\",\n  \"topN\",\n  \"bottomN\",\n] as (typeof PlAdvancedFilterSupportedFilters)[number][];\n</script>\n\n<template>\n  <PlSidebarItem v-if=\"step\">\n    <template #header-content>\n      <PlEditableTitle\n        :key=\"step.id\"\n        v-model=\"step.label\"\n        :class=\"{ [$commonStyle.flashing]: step.label.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Label\"\n        :autofocus=\"step.label.length === 0\"\n        :validate=\"validateTitle\"\n      />\n    </template>\n    <template #body-content>\n      <PlAdvancedFilterComponent\n        :filters=\"step.filter as PlAdvancedFilter\"\n        :class=\"[$style.root, { [$commonStyle.disabled]: step.label.length === 0 }]\"\n        :options=\"props.columns\"\n        :supported-filters=\"supportedFilters\"\n        :get-suggest-options=\"props.getSuggestOptions\"\n        :enable-dnd=\"false\"\n        :enable-add-group-button=\"true\"\n        @update-filters=\"(v) => (step = { ...step, filter: v as typeof step.filter })\"\n      >\n        <template #add-group-buttons>\n          <div :class=\"$style.actions\">\n            <PlBtnSecondary icon=\"add\" @click=\"addFilterPlaceholder\"> Add Filter </PlBtnSecondary>\n            <PlBtnSecondary\n              v-if=\"withSelection\"\n              icon=\"add\"\n              :disabled=\"!props.hasSelectedColumns\"\n              @click=\"addFilterFromSelected\"\n            >\n              From selection\n            </PlBtnSecondary>\n          </div>\n        </template>\n      </PlAdvancedFilterComponent>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style module>\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.actions {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAoCA,IAAM,IAAO,EAAmB,GAAC,OAA2B,EAEtD,IAAQ,GAER,IAAgB,QACb,EAAM,uBAAuB,KAAA,KAAa,EAAM,gCAAgC,KAAA,EACvF,EAEI,UAA6B;AACjC,KAAK,MAAM,OAAO,QAAQ,KAAK;IAC7B,IAAI,GAAW;IACf,YAAY;IACZ,MAAM;IACN,SAAS,CACP;KACE,IAAI,GAAW;KACf,MAAM;KACN,QAAQ,EAAM,QAAQ,GAAG;KAC1B,CACF;IACF,CAAC;;EAGJ,eAAe,IAAwB;AACrC,OAAI,EAAM,uBAAuB,KAAA,KAAa,EAAM,gCAAgC,KAAA,EAClF;GAEF,IAAM,IAAO,MAAM,EAAM,6BAA6B;AACtD,OAAI,CAAC,KAAQ,EAAK,OAAO,WAAW,EAAG;GAEvC,IAAM,EAAE,aAAU,cAAW,GACvB,IACJ,EAAO,MAAM,GAAG,EAAE,CAAC,KAAK,KAAK,IAAI,EAAO,SAAS,IAAI,QAAQ,EAAO,SAAS,EAAE,SAAS;AAE1F,KAAK,MAAM,OAAO,QAAQ,KAAK;IAC7B,IAAI,GAAW;IACf,MAAM,kBAAkB,EAAc;IACtC,YAAY;IACZ,MAAM;IACN,SAAS,EAAO,KAAK,GAAO,OAAO;KACjC,IAAI;KACJ,MAAM;KACN,QAAQ;KACR;KACD,EAAE;IACJ,CAAC;;EAGJ,IAAM,IAAmB;GACvB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;mBAIsB,EAAA,SAAA,GAAA,EAArB,EAuCgB,EAAA,EAAA,EAAA,EAAA,KAAA,GAAA,EAAA;GAtCH,kBAAc,QAUrB,EAAA,GAAA,EATF,EASE,EAAA,EAAA,EAAA;IARC,KAAK,EAAA,MAAK;gBACF,EAAA,MAAK;6CAAL,MAAK,QAAK;IAClB,OAAK,EAAA,GAAK,EAAA,EAAY,CAAC,WAAW,EAAA,MAAK,MAAM,WAAM,GAAA,CAAA;IACnD,cAAY;IACb,aAAU;IACV,aAAY;IACX,WAAW,EAAA,MAAK,MAAM,WAAM;IAC5B,UAAU,EAAA,EAAa;;;;;;;GAGjB,gBAAY,QAwBO,CAvB5B,EAuB4B,EAAA,EAAA,EAAA;IAtBzB,SAAS,EAAA,MAAK;IACd,OAAK,EAAA,CAAGA,EAAAA,OAAO,MAAI,GAAK,EAAA,EAAY,CAAC,WAAW,EAAA,MAAK,MAAM,WAAM,GAAA,CAAA,CAAA;IACjE,SAAS,EAAM;IACf,qBAAmB;IACnB,uBAAqB,EAAM;IAC3B,cAAY;IACZ,2BAAyB;IACzB,iBAAc,AAAA,EAAA,QAAG,MAAO,EAAA,QAAI;KAAA,GAAQ,EAAA;KAAI,QAAU;KAAC;;IAEzC,qBAAiB,QAWpB,CAVN,EAUM,OAAA,EAVA,OAAK,EAAEA,EAAAA,OAAO,QAAO,EAAA,EAAA,CACzB,EAAsF,EAAA,EAAA,EAAA;KAAtE,MAAK;KAAO,SAAO;;sBAAkC,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAZ,gBAAY,GAAA,CAAA,CAAA,CAAA;;QAE7D,EAAA,SAAA,GAAA,EADR,EAOiB,EAAA,EAAA,EAAA;;KALf,MAAK;KACJ,UAAQ,CAAG,EAAM;KACjB,SAAO;;sBAGV,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFC,oBAED,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"FilterSidebar.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type Props = {\n  columns: PlAdvancedFilterItem[];\n\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  hasSelectedColumns?: boolean;\n  getValuesForSelectedColumns?: () => Promise<\n    undefined | { columnId: PObjectId; values: string[] }\n  >;\n};\n</script>\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { produce } from \"immer\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport { PlBtnSecondary, PlEditableTitle, PlSidebarItem } from \"@milaboratories/uikit\";\nimport type { ListOptionBase, PObjectId, SUniversalPColumnId } from \"@platforma-sdk/model\";\n\nimport { PlAdvancedFilterComponent } from \"../../PlAdvancedFilter\";\nimport type {\n  PlAdvancedFilterItem,\n  PlAdvancedFilterColumnId,\n  PlAdvancedFilterSupportedFilters,\n  PlAdvancedFilter,\n} from \"../../PlAdvancedFilter\";\nimport type { Filter } from \"../types\";\nimport { validateTitle } from \"../utils\";\n\nimport $commonStyle from \"./style.module.css\";\n\nconst props = defineProps<\n  Props & {\n    step: Filter;\n    onUpdateStep: (step: Filter) => void;\n  }\n>();\n\nconst withSelection = computed(() => {\n  return props.hasSelectedColumns !== undefined && props.getValuesForSelectedColumns !== undefined;\n});\n\nfunction produceStepUpdate(updater: (draft: Filter) => void) {\n  props.onUpdateStep(produce(props.step, updater));\n}\n\nfunction updateLabel(label: string) {\n  produceStepUpdate((draft) => {\n    draft.label = label;\n  });\n}\n\nfunction updateFilter(filter: PlAdvancedFilter) {\n  produceStepUpdate((draft) => {\n    draft.filter = filter as typeof draft.filter;\n  });\n}\n\nfunction addFilterPlaceholder() {\n  if (props.columns.length === 0) return;\n  produceStepUpdate((draft) => {\n    draft.filter.filters.push({\n      id: randomInt(),\n      isExpanded: true,\n      type: \"or\",\n      filters: [\n        {\n          id: randomInt(),\n          type: \"isNA\",\n          column: props.columns[0].id as SUniversalPColumnId,\n        },\n      ],\n    });\n  });\n}\n\nasync function addFilterFromSelected() {\n  if (props.hasSelectedColumns === undefined || props.getValuesForSelectedColumns === undefined)\n    return;\n\n  const data = await props.getValuesForSelectedColumns();\n  if (!data || data.values.length === 0) return;\n\n  const { columnId, values } = data;\n  const shortReminder =\n    values.slice(0, 3).join(\", \") + (values.length > 3 ? ` and ${values.length - 3} more` : \"\");\n\n  produceStepUpdate((draft) => {\n    draft.filter.filters.push({\n      id: randomInt(),\n      name: `Selected list (${shortReminder})`,\n      isExpanded: false,\n      type: \"or\",\n      filters: values.map((value, i) => ({\n        id: i,\n        type: \"patternEquals\",\n        column: columnId as SUniversalPColumnId,\n        value,\n      })),\n    });\n  });\n}\n\nconst supportedFilters = [\n  \"isNA\",\n  \"isNotNA\",\n  \"greaterThan\",\n  \"greaterThanOrEqual\",\n  \"lessThan\",\n  \"lessThanOrEqual\",\n  \"patternEquals\",\n  \"patternNotEquals\",\n  \"patternContainSubsequence\",\n  \"patternNotContainSubsequence\",\n  \"equal\",\n  \"notEqual\",\n  \"topN\",\n  \"bottomN\",\n] as (typeof PlAdvancedFilterSupportedFilters)[number][];\n</script>\n\n<template>\n  <PlSidebarItem v-if=\"props.step\">\n    <template #header-content>\n      <PlEditableTitle\n        :key=\"props.step.id\"\n        :model-value=\"props.step.label\"\n        :class=\"{ [$commonStyle.flashing]: props.step.label.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Label\"\n        :autofocus=\"props.step.label.length === 0\"\n        :validate=\"validateTitle\"\n        @update:model-value=\"updateLabel\"\n      />\n    </template>\n    <template #body-content>\n      <PlAdvancedFilterComponent\n        :class=\"[$style.root, { [$commonStyle.disabled]: props.step.label.length === 0 }]\"\n        :options=\"props.columns\"\n        :filters=\"props.step.filter as PlAdvancedFilter\"\n        :on-update-filters=\"updateFilter\"\n        :supported-filters=\"supportedFilters\"\n        :get-suggest-options=\"props.getSuggestOptions\"\n        :enable-dnd=\"false\"\n        :enable-add-group-button=\"true\"\n      >\n        <template #add-group-buttons>\n          <div :class=\"$style.actions\">\n            <PlBtnSecondary icon=\"add\" @click=\"addFilterPlaceholder\"> Add Filter </PlBtnSecondary>\n            <PlBtnSecondary\n              v-if=\"withSelection\"\n              icon=\"add\"\n              :disabled=\"props.hasSelectedColumns !== true\"\n              @click=\"addFilterFromSelected\"\n            >\n              From selection\n            </PlBtnSecondary>\n          </div>\n        </template>\n      </PlAdvancedFilterComponent>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style module>\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.actions {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAoCA,IAAM,IAAQ,GAOR,IAAgB,QACb,EAAM,uBAAuB,KAAA,KAAa,EAAM,gCAAgC,KAAA,EACvF;EAEF,SAAS,EAAkB,GAAkC;AAC3D,KAAM,aAAa,EAAQ,EAAM,MAAM,EAAQ,CAAC;;EAGlD,SAAS,EAAY,GAAe;AAClC,MAAmB,MAAU;AAC3B,MAAM,QAAQ;KACd;;EAGJ,SAAS,EAAa,GAA0B;AAC9C,MAAmB,MAAU;AAC3B,MAAM,SAAS;KACf;;EAGJ,SAAS,IAAuB;AAC1B,KAAM,QAAQ,WAAW,KAC7B,GAAmB,MAAU;AAC3B,MAAM,OAAO,QAAQ,KAAK;KACxB,IAAI,GAAW;KACf,YAAY;KACZ,MAAM;KACN,SAAS,CACP;MACE,IAAI,GAAW;MACf,MAAM;MACN,QAAQ,EAAM,QAAQ,GAAG;MAC1B,CACF;KACF,CAAC;KACF;;EAGJ,eAAe,IAAwB;AACrC,OAAI,EAAM,uBAAuB,KAAA,KAAa,EAAM,gCAAgC,KAAA,EAClF;GAEF,IAAM,IAAO,MAAM,EAAM,6BAA6B;AACtD,OAAI,CAAC,KAAQ,EAAK,OAAO,WAAW,EAAG;GAEvC,IAAM,EAAE,aAAU,cAAW,GACvB,IACJ,EAAO,MAAM,GAAG,EAAE,CAAC,KAAK,KAAK,IAAI,EAAO,SAAS,IAAI,QAAQ,EAAO,SAAS,EAAE,SAAS;AAE1F,MAAmB,MAAU;AAC3B,MAAM,OAAO,QAAQ,KAAK;KACxB,IAAI,GAAW;KACf,MAAM,kBAAkB,EAAc;KACtC,YAAY;KACZ,MAAM;KACN,SAAS,EAAO,KAAK,GAAO,OAAO;MACjC,IAAI;MACJ,MAAM;MACN,QAAQ;MACR;MACD,EAAE;KACJ,CAAC;KACF;;EAGJ,IAAM,IAAmB;GACvB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;mBAIsB,EAAM,QAAA,GAAA,EAA3B,EAwCgB,EAAA,EAAA,EAAA,EAAA,KAAA,GAAA,EAAA;GAvCH,kBAAc,QAWrB,EAAA,GAAA,EAVF,EAUE,EAAA,EAAA,EAAA;IATC,KAAK,EAAM,KAAK;IAChB,eAAa,EAAM,KAAK;IACxB,OAAK,EAAA,GAAK,EAAA,EAAY,CAAC,WAAW,EAAM,KAAK,MAAM,WAAM,GAAA,CAAA;IACzD,cAAY;IACb,aAAU;IACV,aAAY;IACX,WAAW,EAAM,KAAK,MAAM,WAAM;IAClC,UAAU,EAAA,EAAa;IACvB,uBAAoB;;;;;;;GAGd,gBAAY,QAwBO,CAvB5B,EAuB4B,EAAA,EAAA,EAAA;IAtBzB,OAAK,EAAA,CAAGA,EAAAA,OAAO,MAAI,GAAK,EAAA,EAAY,CAAC,WAAW,EAAM,KAAK,MAAM,WAAM,GAAA,CAAA,CAAA;IACvE,SAAS,EAAM;IACf,SAAS,EAAM,KAAK;IACpB,qBAAmB;IACnB,qBAAmB;IACnB,uBAAqB,EAAM;IAC3B,cAAY;IACZ,2BAAyB;;IAEf,qBAAiB,QAWpB,CAVN,EAUM,OAAA,EAVA,OAAK,EAAEA,EAAAA,OAAO,QAAO,EAAA,EAAA,CACzB,EAAsF,EAAA,EAAA,EAAA;KAAtE,MAAK;KAAO,SAAO;;sBAAkC,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAZ,gBAAY,GAAA,CAAA,CAAA,CAAA;;QAE7D,EAAA,SAAA,GAAA,EADR,EAOiB,EAAA,EAAA,EAAA;;KALf,MAAK;KACJ,UAAU,EAAM,uBAAkB;KAClC,SAAO;;sBAGV,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFC,oBAED,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/PlAnnotations/components/PlAnnotations.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAnnotations.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/PlAnnotations.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Props as BaseProps } from \"./FilterSidebar.vue\";\nexport type Props = BaseProps & {\n  onDeleteSchema?: () => void;\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, effect, shallowRef } from \"vue\";\n\nimport { isNil } from \"@milaboratories/helpers\";\nimport { PlSidebarGroup, useConfirm } from \"@milaboratories/uikit\";\n\nimport type { Annotation } from \"../types\";\nimport AnnotationsSidebar from \"./AnnotationsSidebar.vue\";\nimport FilterSidebar from \"./FilterSidebar.vue\";\n\n// Models\nconst annotation = defineModel<Annotation>(\"annotation\", { required: true });\n// Props\nconst props = defineProps<Props>();\n// State\nconst selectedStepId = shallowRef<number | undefined>(undefined);\nconst selectedStep = computed(() => {\n  return isNil(selectedStepId.value) || isNil(annotation.value)\n    ? undefined\n    : annotation.value.steps.find((step) => step.id === selectedStepId.value);\n});\n\n// Watchers\neffect(function setDefaultStepId() {\n  if (selectedStepId.value === undefined && annotation.value.steps.length > 0) {\n    selectedStepId.value = annotation.value.steps[0].id;\n  }\n});\n// Hooks\nconst confirmResetSchema = useConfirm({\n  title: \"Reset Schema\",\n  message: \"Are you sure you want to reset the schema? This action cannot be undone.\",\n  confirmLabel: \"Yes, reset\",\n  cancelLabel: \"No, cancel\",\n});\n// Actions\nasync function handleDeleteSchema() {\n  if (await confirmResetSchema()) {\n    selectedStepId.value = undefined;\n    props.onDeleteSchema?.();\n  }\n}\n</script>\n\n<template>\n  <PlSidebarGroup>\n    <template #item-0>\n      <AnnotationsSidebar\n        v-model:annotation=\"annotation\"\n        v-model:selectedStepId=\"selectedStepId\"\n        :class=\"$style.sidebarItem\"\n        :columns=\"props.columns\"\n        @delete-schema=\"handleDeleteSchema\"\n      />\n    </template>\n    <template #item-1>\n      <FilterSidebar\n        v-if=\"selectedStep\"\n        v-model:step=\"selectedStep\"\n        :class=\"$style.sidebarItem\"\n        :columns=\"props.columns\"\n        :get-suggest-options=\"props.getSuggestOptions\"\n        :selectedStepId=\"selectedStepId\"\n        :hasSelectedColumns=\"props.hasSelectedColumns\"\n        :getValuesForSelectedColumns=\"props.getValuesForSelectedColumns\"\n      />\n    </template>\n  </PlSidebarGroup>\n</template>\n\n<style module>\n.sidebarItem {\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlAnnotations.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/PlAnnotations.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Props as BaseProps } from \"./FilterSidebar.vue\";\nexport type Props = Omit<BaseProps, \"step\" | \"onUpdateStep\"> & {\n  annotation: Annotation;\n  onUpdateAnnotation: (annotation: Annotation) => void;\n  onDeleteSchema?: () => void;\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, effect, shallowRef } from \"vue\";\n\nimport { isNil } from \"@milaboratories/helpers\";\nimport { produce } from \"immer\";\nimport { PlSidebarGroup, useConfirm } from \"@milaboratories/uikit\";\n\nimport type { Annotation, Filter } from \"../types\";\nimport AnnotationsSidebar from \"./AnnotationsSidebar.vue\";\nimport FilterSidebar from \"./FilterSidebar.vue\";\n\nconst props = defineProps<Props>();\n\nconst selectedStepId = shallowRef<undefined | number>(undefined);\n\nconst selectedStep = computed(() => {\n  return isNil(selectedStepId.value) || isNil(props.annotation)\n    ? undefined\n    : props.annotation.steps.find((step) => step.id === selectedStepId.value);\n});\n\neffect(function setDefaultStepId() {\n  if (selectedStepId.value === undefined && props.annotation.steps.length > 0) {\n    selectedStepId.value = props.annotation.steps[0].id;\n  }\n});\n\nconst confirmResetSchema = useConfirm({\n  title: \"Reset Schema\",\n  message: \"Are you sure you want to reset the schema? This action cannot be undone.\",\n  confirmLabel: \"Yes, reset\",\n  cancelLabel: \"No, cancel\",\n});\n\nasync function handleDeleteSchema() {\n  if (await confirmResetSchema()) {\n    selectedStepId.value = undefined;\n    props.onDeleteSchema?.();\n  }\n}\n\nfunction updateSelectedStepId(id: undefined | number) {\n  selectedStepId.value = id;\n}\n\nfunction updateSelectedStep(step: Filter) {\n  props.onUpdateAnnotation(\n    produce(props.annotation, (draft) => {\n      const idx = draft.steps.findIndex((s) => s.id === step.id);\n      if (idx !== -1) {\n        draft.steps[idx] = step;\n      }\n    }),\n  );\n}\n</script>\n\n<template>\n  <PlSidebarGroup>\n    <template #item-0>\n      <AnnotationsSidebar\n        :annotation=\"props.annotation\"\n        :selected-step-id=\"selectedStepId\"\n        :on-update-annotation=\"props.onUpdateAnnotation\"\n        :on-update-selected-step-id=\"updateSelectedStepId\"\n        :class=\"$style.sidebarItem\"\n        @delete-schema=\"handleDeleteSchema\"\n      />\n    </template>\n    <template #item-1>\n      <FilterSidebar\n        v-if=\"selectedStep\"\n        :step=\"selectedStep\"\n        :on-update-step=\"updateSelectedStep\"\n        :class=\"$style.sidebarItem\"\n        :columns=\"props.columns\"\n        :get-suggest-options=\"props.getSuggestOptions\"\n        :hasSelectedColumns=\"props.hasSelectedColumns\"\n        :getValuesForSelectedColumns=\"props.getValuesForSelectedColumns\"\n      />\n    </template>\n  </PlSidebarGroup>\n</template>\n\n<style module>\n.sidebarItem {\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAnnotations/components/PlAnnotations.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAnnotations.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/PlAnnotations.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Props as BaseProps } from \"./FilterSidebar.vue\";\nexport type Props = BaseProps & {\n  onDeleteSchema?: () => void;\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, effect, shallowRef } from \"vue\";\n\nimport { isNil } from \"@milaboratories/helpers\";\nimport { PlSidebarGroup, useConfirm } from \"@milaboratories/uikit\";\n\nimport type { Annotation } from \"../types\";\nimport AnnotationsSidebar from \"./AnnotationsSidebar.vue\";\nimport FilterSidebar from \"./FilterSidebar.vue\";\n\n// Models\nconst annotation = defineModel<Annotation>(\"annotation\", { required: true });\n// Props\nconst props = defineProps<Props>();\n// State\nconst selectedStepId = shallowRef<number | undefined>(undefined);\nconst selectedStep = computed(() => {\n  return isNil(selectedStepId.value) || isNil(annotation.value)\n    ? undefined\n    : annotation.value.steps.find((step) => step.id === selectedStepId.value);\n});\n\n// Watchers\neffect(function setDefaultStepId() {\n  if (selectedStepId.value === undefined && annotation.value.steps.length > 0) {\n    selectedStepId.value = annotation.value.steps[0].id;\n  }\n});\n// Hooks\nconst confirmResetSchema = useConfirm({\n  title: \"Reset Schema\",\n  message: \"Are you sure you want to reset the schema? This action cannot be undone.\",\n  confirmLabel: \"Yes, reset\",\n  cancelLabel: \"No, cancel\",\n});\n// Actions\nasync function handleDeleteSchema() {\n  if (await confirmResetSchema()) {\n    selectedStepId.value = undefined;\n    props.onDeleteSchema?.();\n  }\n}\n</script>\n\n<template>\n  <PlSidebarGroup>\n    <template #item-0>\n      <AnnotationsSidebar\n        v-model:annotation=\"annotation\"\n        v-model:selectedStepId=\"selectedStepId\"\n        :class=\"$style.sidebarItem\"\n        :columns=\"props.columns\"\n        @delete-schema=\"handleDeleteSchema\"\n      />\n    </template>\n    <template #item-1>\n      <FilterSidebar\n        v-if=\"selectedStep\"\n        v-model:step=\"selectedStep\"\n        :class=\"$style.sidebarItem\"\n        :columns=\"props.columns\"\n        :get-suggest-options=\"props.getSuggestOptions\"\n        :selectedStepId=\"selectedStepId\"\n        :hasSelectedColumns=\"props.hasSelectedColumns\"\n        :getValuesForSelectedColumns=\"props.getValuesForSelectedColumns\"\n      />\n    </template>\n  </PlSidebarGroup>\n</template>\n\n<style module>\n.sidebarItem {\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlAnnotations.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/PlAnnotations.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Props as BaseProps } from \"./FilterSidebar.vue\";\nexport type Props = Omit<BaseProps, \"step\" | \"onUpdateStep\"> & {\n  annotation: Annotation;\n  onUpdateAnnotation: (annotation: Annotation) => void;\n  onDeleteSchema?: () => void;\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, effect, shallowRef } from \"vue\";\n\nimport { isNil } from \"@milaboratories/helpers\";\nimport { produce } from \"immer\";\nimport { PlSidebarGroup, useConfirm } from \"@milaboratories/uikit\";\n\nimport type { Annotation, Filter } from \"../types\";\nimport AnnotationsSidebar from \"./AnnotationsSidebar.vue\";\nimport FilterSidebar from \"./FilterSidebar.vue\";\n\nconst props = defineProps<Props>();\n\nconst selectedStepId = shallowRef<undefined | number>(undefined);\n\nconst selectedStep = computed(() => {\n  return isNil(selectedStepId.value) || isNil(props.annotation)\n    ? undefined\n    : props.annotation.steps.find((step) => step.id === selectedStepId.value);\n});\n\neffect(function setDefaultStepId() {\n  if (selectedStepId.value === undefined && props.annotation.steps.length > 0) {\n    selectedStepId.value = props.annotation.steps[0].id;\n  }\n});\n\nconst confirmResetSchema = useConfirm({\n  title: \"Reset Schema\",\n  message: \"Are you sure you want to reset the schema? This action cannot be undone.\",\n  confirmLabel: \"Yes, reset\",\n  cancelLabel: \"No, cancel\",\n});\n\nasync function handleDeleteSchema() {\n  if (await confirmResetSchema()) {\n    selectedStepId.value = undefined;\n    props.onDeleteSchema?.();\n  }\n}\n\nfunction updateSelectedStepId(id: undefined | number) {\n  selectedStepId.value = id;\n}\n\nfunction updateSelectedStep(step: Filter) {\n  props.onUpdateAnnotation(\n    produce(props.annotation, (draft) => {\n      const idx = draft.steps.findIndex((s) => s.id === step.id);\n      if (idx !== -1) {\n        draft.steps[idx] = step;\n      }\n    }),\n  );\n}\n</script>\n\n<template>\n  <PlSidebarGroup>\n    <template #item-0>\n      <AnnotationsSidebar\n        :annotation=\"props.annotation\"\n        :selected-step-id=\"selectedStepId\"\n        :on-update-annotation=\"props.onUpdateAnnotation\"\n        :on-update-selected-step-id=\"updateSelectedStepId\"\n        :class=\"$style.sidebarItem\"\n        @delete-schema=\"handleDeleteSchema\"\n      />\n    </template>\n    <template #item-1>\n      <FilterSidebar\n        v-if=\"selectedStep\"\n        :step=\"selectedStep\"\n        :on-update-step=\"updateSelectedStep\"\n        :class=\"$style.sidebarItem\"\n        :columns=\"props.columns\"\n        :get-suggest-options=\"props.getSuggestOptions\"\n        :hasSelectedColumns=\"props.hasSelectedColumns\"\n        :getValuesForSelectedColumns=\"props.getValuesForSelectedColumns\"\n      />\n    </template>\n  </PlSidebarGroup>\n</template>\n\n<style module>\n.sidebarItem {\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":""}