@platforma-sdk/ui-vue 1.45.42 → 1.45.45

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

@@ -1,7 +1,8 @@
-import { defineComponent as y, mergeModels as S, useModel as u, createBlock as b, openBlock as I, unref as a, createSlots as k, withCtx as o, createVNode as s, withModifiers as h, createTextVNode as d, createElementVNode as p, normalizeClass as r, toDisplayString as C } from "vue";
-import { randomInt as v } from "../../../lib/util/helpers/dist/random.js";
-import { PlSidebarItem as V, PlBtnGhost as $, PlEditableTitle as M, PlBtnSecondary as P, PlElementList as w } from "@milaboratories/uikit";
-const x = /* @__PURE__ */ y({
+import { defineComponent as y, mergeModels as S, useModel as u, createBlock as I, openBlock as h, unref as o, createSlots as k, withCtx as s, createVNode as a, withModifiers as C, createTextVNode as r, normalizeClass as i, createElementVNode as p, toDisplayString as V } from "vue";
+import { randomInt as f } from "../../../lib/util/helpers/dist/random.js";
+import { PlSidebarItem as $, PlBtnGhost as M, PlEditableTitle as P, PlElementList as w, PlBtnSecondary as A } from "@milaboratories/uikit";
+import v from "./style.module.css.js";
+const T = /* @__PURE__ */ y({
   __name: "AnnotationsSidebar",
   props: {
     annotation: { required: !0 },
@@ -10,40 +11,41 @@ const x = /* @__PURE__ */ y({
     selectedStepIdModifiers: {}
   },
   emits: /* @__PURE__ */ S(["delete-schema"], ["update:annotation", "update:selectedStepId"]),
-  setup(m, { emit: f }) {
-    const l = u(m, "annotation"), i = u(m, "selectedStepId"), c = f;
-    function g() {
-      const n = v();
+  setup(m, { emit: c }) {
+    const l = u(m, "annotation"), d = u(m, "selectedStepId"), g = c;
+    function b() {
+      const n = f();
       l.value.steps.push({
         id: n,
-        label: `Filter #${l.value.steps.length + 1}`,
+        label: "",
         filter: {
-          id: v(),
+          id: f(),
           type: "and",
           filters: []
         }
-      }), i.value = n;
+      }), d.value = n;
     }
-    return (n, e) => (I(), b(a(V), null, k({
-      "header-content": o(() => [
-        s(a(M), {
+    return (n, e) => (h(), I(o($), null, k({
+      "header-content": s(() => [
+        a(o(P), {
           modelValue: l.value.title,
           "onUpdate:modelValue": e[0] || (e[0] = (t) => l.value.title = t),
+          class: i({ [o(v).flashing]: l.value.title.length === 0 }),
           "max-length": 40,
           "max-width": "600px",
-          placeholder: "Annotation Name",
+          placeholder: "Annotation Title",
           autofocus: l.value.title.length === 0
-        }, null, 8, ["modelValue", "autofocus"])
+        }, null, 8, ["modelValue", "class", "autofocus"])
       ]),
-      "footer-content": o(() => [
-        s(a($), {
+      "footer-content": s(() => [
+        a(o(M), {
           icon: "delete-bin",
           reverse: "",
           disabled: l.value.steps.length === 0,
-          onClick: e[3] || (e[3] = h((t) => c("delete-schema"), ["stop"]))
+          onClick: e[3] || (e[3] = C((t) => g("delete-schema"), ["stop"]))
         }, {
-          default: o(() => [...e[5] || (e[5] = [
-            d(" Delete Schema ", -1)
+          default: s(() => [...e[5] || (e[5] = [
+            r(" Delete Schema ", -1)
           ])]),
           _: 1
         }, 8, ["disabled"])
@@ -52,36 +54,36 @@ const x = /* @__PURE__ */ y({
     }, [
       l.value ? {
         name: "body-content",
-        fn: o(() => [
+        fn: s(() => [
           p("div", {
-            class: r(n.$style.root)
+            class: i([n.$style.root, { [o(v).disabled]: l.value.title.length === 0 }])
           }, [
-            s(a(P), {
-              icon: "add",
-              onClick: g
-            }, {
-              default: o(() => [...e[4] || (e[4] = [
-                d(" Add annotation ", -1)
-              ])]),
-              _: 1
-            }),
             p("span", {
-              class: r(n.$style.tip)
+              class: i(n.$style.tip)
             }, "Lower annotations override the ones above. Rearrange them by dragging.", 2),
-            s(a(w), {
+            a(o(w), {
               items: l.value.steps,
               "onUpdate:items": e[1] || (e[1] = (t) => l.value.steps = t),
               "get-item-key": (t) => t.id,
-              "is-active": (t) => t.id === i.value,
+              "is-active": (t) => t.id === d.value,
               "item-class": n.$style.stepItem,
-              class: r(n.$style.steps),
-              onItemClick: e[2] || (e[2] = (t) => i.value = t.id)
+              class: i(n.$style.steps),
+              onItemClick: e[2] || (e[2] = (t) => d.value = t.id)
             }, {
-              "item-title": o(({ item: t }) => [
-                d(C(t.label), 1)
+              "item-title": s(({ item: t }) => [
+                r(V(t.label), 1)
               ]),
               _: 1
-            }, 8, ["items", "get-item-key", "is-active", "item-class", "class"])
+            }, 8, ["items", "get-item-key", "is-active", "item-class", "class"]),
+            a(o(A), {
+              icon: "add",
+              onClick: b
+            }, {
+              default: s(() => [...e[4] || (e[4] = [
+                r(" Add label ", -1)
+              ])]),
+              _: 1
+            })
           ], 2)
         ]),
         key: "0"
@@ -90,6 +92,6 @@ const x = /* @__PURE__ */ y({
   }
 });
 export {
-  x as default
+  T as default
 };
 //# sourceMappingURL=AnnotationsSidebar.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AnnotationsSidebar.vue2.js","sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { randomInt } from '@milaboratories/helpers';\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n} from '@milaboratories/uikit';\nimport type { Annotation } from '../types';\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: `Filter #${annotation.value.steps.length + 1}`,\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        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Annotation Name\"\n        :autofocus=\"annotation.title.length === 0\"\n      />\n    </template>\n    <template v-if=\"annotation\" #body-content>\n      <div :class=\"$style.root\">\n        <PlBtnSecondary icon=\"add\" @click=\"handleAddStep\">\n          Add annotation\n        </PlBtnSecondary>\n\n        <span :class=\"$style.tip\">Lower annotations override the ones above. Rearrange them by dragging.</span>\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      </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  margin-top: 12px;\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</style>\n"],"names":["annotation","_useModel","selectedStepId","__props","emits","__emit","handleAddStep","id","randomInt","_createBlock","_unref","PlSidebarItem","_createSlots","_createVNode","PlEditableTitle","_cache","$event","PlBtnGhost","_createElementVNode","_normalizeClass","$style","PlBtnSecondary","PlElementList","item","_withCtx","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;;;;;;;AAYA,UAAMA,IAAaC,KAAwB,YAAgC,GACrEC,IAAiBD,EAA+BE,GAAC,gBAAgB,GAEjEC,IAAQC;AAId,aAASC,IAAgB;AACvB,YAAMC,IAAKC,EAAA;AACX,MAAAR,EAAW,MAAM,MAAM,KAAK;AAAA,QAC1B,IAAAO;AAAA,QACA,OAAO,WAAWP,EAAW,MAAM,MAAM,SAAS,CAAC;AAAA,QACnD,QAAQ;AAAA,UACN,IAAIQ,EAAA;AAAA,UACJ,MAAM;AAAA,UACN,SAAS,CAAA;AAAA,QAAC;AAAA,MACZ,CACD,GACDN,EAAe,QAAQK;AAAA,IACzB;2BAIEE,EA0CgBC,EAAAC,CAAA,GAAA,MAAAC,EAAA;AAAA,MAzCH,oBACT,MAME;AAAA,QANFC,EAMEH,EAAAI,CAAA,GAAA;AAAA,UALS,YAAAd,EAAA,MAAW;AAAA,UAAX,uBAAAe,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAhB,EAAA,MAAW,QAAKgB;AAAA,UACxB,cAAY;AAAA,UACb,aAAU;AAAA,UACV,aAAY;AAAA,UACX,WAAWhB,EAAA,MAAW,MAAM,WAAM;AAAA,QAAA;;MAyB5B,oBACT,MAOa;AAAA,QAPba,EAOaH,EAAAO,CAAA,GAAA;AAAA,UANX,MAAK;AAAA,UACL,SAAA;AAAA,UACC,UAAUjB,EAAA,MAAW,MAAM,WAAM;AAAA,UACjC,kCAAYI,EAAK,eAAA,GAAA,CAAA,MAAA,CAAA;AAAA,QAAA;qBACnB,MAED,CAAA,GAAAW,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,cAFC,mBAED,EAAA;AAAA,UAAA;;;;;;MA9Bcf,EAAA;cAAa;AAAA,cAC3B,MAmBM;AAAA,UAnBNkB,EAmBM,OAAA;AAAA,YAnBA,OAAKC,EAAEC,EAAAA,OAAO,IAAI;AAAA,UAAA;YACtBP,EAEiBH,EAAAW,CAAA,GAAA;AAAA,cAFD,MAAK;AAAA,cAAO,SAAOf;AAAA,YAAA;yBAAe,MAElD,CAAA,GAAAS,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,kBAFkD,oBAElD,EAAA;AAAA,cAAA;;;YAEAG,EAAuG,QAAA;AAAA,cAAhG,OAAKC,EAAEC,EAAAA,OAAO,GAAG;AAAA,YAAA,GAAE,0EAAsE,CAAA;AAAA,YAEhGP,EAWgBH,EAAAY,CAAA,GAAA;AAAA,cAVN,OAAOtB,EAAA,MAAW;AAAA,cAAX,kBAAAe,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAhB,EAAA,MAAW,QAAKgB;AAAA,cAC9B,gBAAY,CAAGO,MAASA,EAAK;AAAA,cAC7B,cAAYA,MAASA,EAAK,OAAOrB,EAAA;AAAA,cACjC,cAAYkB,EAAAA,OAAO;AAAA,cACnB,OAAKD,EAAEC,EAAAA,OAAO,KAAK;AAAA,cACnB,8BAAaG,MAASrB,UAAiBqB,EAAK;AAAA,YAAA;cAElC,cAAUC,EACnB,CAAgB,EADO,MAAAD,QAAI;AAAA,gBACxBE,EAAAC,EAAAH,EAAK,KAAK,GAAA,CAAA;AAAA,cAAA;;;;;;;;;;"}
+{"version":3,"file":"AnnotationsSidebar.vue2.js","sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { randomInt } from '@milaboratories/helpers';\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n} from '@milaboratories/uikit';\nimport type { Annotation } from '../types';\nimport $commonStyle from './style.module.css';\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      />\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\">Lower annotations override the ones above. Rearrange them by dragging.</span>\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        <PlBtnSecondary icon=\"add\" @click=\"handleAddStep\">\n          Add label\n        </PlBtnSecondary>\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</style>\n"],"names":["annotation","_useModel","selectedStepId","__props","emits","__emit","handleAddStep","id","randomInt","_createBlock","_unref","PlSidebarItem","_createSlots","_createVNode","PlEditableTitle","_cache","$event","_normalizeClass","PlBtnGhost","_createElementVNode","$style","$commonStyle","PlElementList","item","_withCtx","_createTextVNode","_toDisplayString","PlBtnSecondary"],"mappings":";;;;;;;;;;;;;;AAaA,UAAMA,IAAaC,KAAwB,YAAgC,GACrEC,IAAiBD,EAA+BE,GAAC,gBAAgB,GAEjEC,IAAQC;AAId,aAASC,IAAgB;AACvB,YAAMC,IAAKC,EAAA;AACX,MAAAR,EAAW,MAAM,MAAM,KAAK;AAAA,QAC1B,IAAAO;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,UACN,IAAIC,EAAA;AAAA,UACJ,MAAM;AAAA,UACN,SAAS,CAAA;AAAA,QAAC;AAAA,MACZ,CACD,GACDN,EAAe,QAAQK;AAAA,IACzB;2BAIEE,EA0CgBC,EAAAC,CAAA,GAAA,MAAAC,EAAA;AAAA,MAzCH,oBACT,MAOE;AAAA,QAPFC,EAOEH,EAAAI,CAAA,GAAA;AAAA,UANS,YAAAd,EAAA,MAAW;AAAA,UAAX,uBAAAe,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAhB,EAAA,MAAW,QAAKgB;AAAA,UACxB,OAAKC,EAAA,EAAA,CAAKP,KAAa,QAAQ,GAAGV,EAAA,MAAW,MAAM,WAAM,GAAA;AAAA,UACzD,cAAY;AAAA,UACb,aAAU;AAAA,UACV,aAAY;AAAA,UACX,WAAWA,EAAA,MAAW,MAAM,WAAM;AAAA,QAAA;;MAwB5B,oBACT,MAOa;AAAA,QAPba,EAOaH,EAAAQ,CAAA,GAAA;AAAA,UANX,MAAK;AAAA,UACL,SAAA;AAAA,UACC,UAAUlB,EAAA,MAAW,MAAM,WAAM;AAAA,UACjC,kCAAYI,EAAK,eAAA,GAAA,CAAA,MAAA,CAAA;AAAA,QAAA;qBACnB,MAED,CAAA,GAAAW,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,cAFC,mBAED,EAAA;AAAA,UAAA;;;;;;MA7Bcf,EAAA;cAAa;AAAA,cAC3B,MAkBM;AAAA,UAlBNmB,EAkBM,OAAA;AAAA,YAlBA,OAAKF,EAAA,CAAGG,EAAAA,OAAO,MAAI,EAAA,CAAKV,EAAAW,CAAA,EAAa,QAAQ,GAAGrB,EAAA,MAAW,MAAM,WAAM,GAAA,CAAA;AAAA,UAAA;YAC3EmB,EAAuG,QAAA;AAAA,cAAhG,OAAKF,EAAEG,EAAAA,OAAO,GAAG;AAAA,YAAA,GAAE,0EAAsE,CAAA;AAAA,YAEhGP,EAWgBH,EAAAY,CAAA,GAAA;AAAA,cAVN,OAAOtB,EAAA,MAAW;AAAA,cAAX,kBAAAe,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAhB,EAAA,MAAW,QAAKgB;AAAA,cAC9B,gBAAY,CAAGO,MAASA,EAAK;AAAA,cAC7B,cAAYA,MAASA,EAAK,OAAOrB,EAAA;AAAA,cACjC,cAAYkB,EAAAA,OAAO;AAAA,cACnB,OAAKH,EAAEG,EAAAA,OAAO,KAAK;AAAA,cACnB,8BAAaG,MAASrB,UAAiBqB,EAAK;AAAA,YAAA;cAElC,cAAUC,EACnB,CAAgB,EADO,MAAAD,QAAI;AAAA,gBACxBE,EAAAC,EAAAH,EAAK,KAAK,GAAA,CAAA;AAAA,cAAA;;;YAGjBV,EAEiBH,EAAAiB,CAAA,GAAA;AAAA,cAFD,MAAK;AAAA,cAAO,SAAOrB;AAAA,YAAA;yBAAe,MAElD,CAAA,GAAAS,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,kBAFkD,eAElD,EAAA;AAAA,cAAA;;;;;;;;;;"}

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

@@ -1,5 +1,5 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(":root{--txt-00: #ffffff;--txt-01: light-dark(#110529, #ffffff);--txt-02: #231842;--txt-03: #9d9eae;--txt-mask: #cfd1db;--txt-focus: #07ad3e;--txt-error: #f1222f;--txt-link: #5f31cc;--ic-00: #ffffff;--ic-01: #110529;--ic-02: #cfd1db;--ic-accent: #07ad3e;--border-color-default: #110529;--border-color-hover: #231842;--border-color-focus: #49cc49;--border-color-error: #ff5c5c;--border-color-div-grey: #e1e3eb;--border-color-div-bw: #ffffff;--btn-accent-default: #845cff;--btn-accent-hover: #9470ff;--btn-accent-press: #6f4dd6;--btn-primary-default: #110529;--btn-primary-hover: #231842;--btn-primary-press: #080214;--btn-sec-hover-white: rgba(255, 255, 255, .5);--btn-sec-hover-grey: light-dark(rgba(155, 171, 204, .16), rgba(131, 131, 163, .16));--btn-sec-press-grey: rgba(155, 171, 204, .24);--btn-active-select: rgba(99, 224, 36, .24);--btn-switcher: linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--btn-accent-positive-500: #ECFBE5;--dis-00: #ffffff;--dis-01: light-dark(#cfd1db, #3d3d42);--bg-base-dark: #110529;--bg-base-light: #f7f8fa;--bg-elevated-01: #ffffff;--bg-elevated-02: #e1e3eb;--bg-error: #FFF5F5;--filled-V-BG: #d0f0c0;--filled-D-BG: #ffcecc;--filled-N-BG: #faf5aa;--filled-J-BG: #dedbff;--notification-neutral: linear-gradient(90deg, #d6d9ff 0%, #fff 100%);--notification-success: linear-gradient(90deg, #c9f0b6 0%, #fff 100%);--notification-warning: linear-gradient(90deg, #fee0a3 0%, #fff 100%);--notification-error: linear-gradient(90deg, #ffb8b8 0%, #fff 100%);--gradient-blue-green: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime: linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--gradient-blue-violet: linear-gradient(180deg, #adb8ff 0%, #d6e9ff 100%);--gradient-blue-clear: linear-gradient(180deg, #85beff 0%, #cef 100%);--gradient-orange: linear-gradient(180deg, #ffb766 0%, #ffeaa3 100%);--gradient-mint: linear-gradient(180deg, #7dd1d1 0%, #c8fae9 100%);--gradient-lime: linear-gradient(180deg, #bfe062 0%, #e4ffad 100%);--gradient-rose: linear-gradient(0deg, #ffddd6 0%, #ff99c9 100%);--gradient-red: linear-gradient(0deg, #ffd5cc 0%, #ff9494 100%);--gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--TT-gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--gradient-light-lime: linear-gradient(180deg, #EBFFEB 0%, transparent 100%);--shadow-l: 0px 8px 16px -4px rgba(15, 36, 77, .16), 0px 12px 32px -4px rgba(15, 36, 77, .16);--main-spacing: 24px;--gap-v: 24px;--gap-h: 12px;--border-radius: 6px;--z-splash: 50;--z-slide-shadow: 80;--z-slide-dialog: 81;--z-dialog: 100;--z-dropdown-options: 110;--z-tooltip: 120;--z-context-menu: 1001;--scrollbar-width: 6px}[data-theme=dark]{--txt-00: #ffffff;--txt-01: #FFFFFF;--txt-02: #adaeb8;--txt-03: #60616b;--txt-mask: #3D3D42;--txt-focus: #87e087;--txt-error: #ff5c5c;--txt-link: #9470ff;--ic-00: #ffffff;--ic-01: #FFFFFF;--ic-02: #60616b;--ic-accent: #87e087;--border-color-default: #60616b;--border-color-hover: #adaeb8;--border-color-focus: #49cc49;--border-color-error: #ff5c5c;--border-color-div-grey: #232329;--border-color-div-bw: #000000;--btn-accent-default: #5f31cc;--btn-accent-hover: #5f31cc;--btn-accent-press: #5f31cc;--btn-primary-default: #5f31cc;--btn-primary-hover: #6d3ddb;--btn-primary-press: #5328b8;--btn-sec-hover-white: rgba(131, 131, 163, .16);--btn-sec-hover-grey: rgba(131, 131, 163, .16);--btn-sec-press-grey: rgba(131, 131, 163, .24);--btn-active-select: rgba(99, 224, 36, .24);--btn-switcher: #5e5e70;--dis-00: #65656b;--dis-01: #3D3D42;--bg-base-dark: #0d0d0f;--bg-base-light: #0d0d0f;--bg-elevated-01: #1b1b1f;--bg-elevated-02: #2d2d33;--bg-error: #FFF5F5;--filled-V-BG: rgba(66, 184, 66, .4);--filled-D-BG: rgba(229, 83, 229, .4);--filled-N-BG: rgba(83, 82, 102, .4);--filled-J-BG: rgba(132, 92, 255, .4);--notification-neutral: linear-gradient(90deg, #4d4d8f 0%, #292933 100%);--notification-success: linear-gradient(90deg, #305c3e 0%, #292933 100%);--notification-warning: linear-gradient(90deg, #754f2d 0%, #292933 100%);--notification-error: linear-gradient(90deg, #8f3343 0%, #292933 100%);--gradient-blue-green: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-violet: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-clear: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-orange: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-mint: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-lime: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-rose: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-red: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-violet: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%)}._root_1i4x0_131{display:flex;flex-direction:column;gap:12px}._tip_1i4x0_137{margin-top:12px;color:var(--txt-03)}._steps_1i4x0_142{display:flex;flex-direction:column;gap:6px}._stepItem_1i4x0_148{cursor:pointer}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-const t = "_root_1i4x0_131", s = "_tip_1i4x0_137", e = "_steps_1i4x0_142", o = "_stepItem_1i4x0_148", _ = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(":root{--txt-00: #ffffff;--txt-01: light-dark(#110529, #ffffff);--txt-02: #231842;--txt-03: #9d9eae;--txt-mask: #cfd1db;--txt-focus: #07ad3e;--txt-error: #f1222f;--txt-link: #5f31cc;--ic-00: #ffffff;--ic-01: #110529;--ic-02: #cfd1db;--ic-accent: #07ad3e;--border-color-default: #110529;--border-color-hover: #231842;--border-color-focus: #49cc49;--border-color-error: #ff5c5c;--border-color-div-grey: #e1e3eb;--border-color-div-bw: #ffffff;--btn-accent-default: #845cff;--btn-accent-hover: #9470ff;--btn-accent-press: #6f4dd6;--btn-primary-default: #110529;--btn-primary-hover: #231842;--btn-primary-press: #080214;--btn-sec-hover-white: rgba(255, 255, 255, .5);--btn-sec-hover-grey: light-dark(rgba(155, 171, 204, .16), rgba(131, 131, 163, .16));--btn-sec-press-grey: rgba(155, 171, 204, .24);--btn-active-select: rgba(99, 224, 36, .24);--btn-switcher: linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--btn-accent-positive-500: #ECFBE5;--dis-00: #ffffff;--dis-01: light-dark(#cfd1db, #3d3d42);--bg-base-dark: #110529;--bg-base-light: #f7f8fa;--bg-elevated-01: #ffffff;--bg-elevated-02: #e1e3eb;--bg-error: #FFF5F5;--filled-V-BG: #d0f0c0;--filled-D-BG: #ffcecc;--filled-N-BG: #faf5aa;--filled-J-BG: #dedbff;--notification-neutral: linear-gradient(90deg, #d6d9ff 0%, #fff 100%);--notification-success: linear-gradient(90deg, #c9f0b6 0%, #fff 100%);--notification-warning: linear-gradient(90deg, #fee0a3 0%, #fff 100%);--notification-error: linear-gradient(90deg, #ffb8b8 0%, #fff 100%);--gradient-blue-green: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime: linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--gradient-blue-violet: linear-gradient(180deg, #adb8ff 0%, #d6e9ff 100%);--gradient-blue-clear: linear-gradient(180deg, #85beff 0%, #cef 100%);--gradient-orange: linear-gradient(180deg, #ffb766 0%, #ffeaa3 100%);--gradient-mint: linear-gradient(180deg, #7dd1d1 0%, #c8fae9 100%);--gradient-lime: linear-gradient(180deg, #bfe062 0%, #e4ffad 100%);--gradient-rose: linear-gradient(0deg, #ffddd6 0%, #ff99c9 100%);--gradient-red: linear-gradient(0deg, #ffd5cc 0%, #ff9494 100%);--gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--TT-gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--gradient-light-lime: linear-gradient(180deg, #EBFFEB 0%, transparent 100%);--shadow-l: 0px 8px 16px -4px rgba(15, 36, 77, .16), 0px 12px 32px -4px rgba(15, 36, 77, .16);--main-spacing: 24px;--gap-v: 24px;--gap-h: 12px;--border-radius: 6px;--z-splash: 50;--z-slide-shadow: 80;--z-slide-dialog: 81;--z-dialog: 100;--z-dropdown-options: 110;--z-tooltip: 120;--z-context-menu: 1001;--scrollbar-width: 6px}[data-theme=dark]{--txt-00: #ffffff;--txt-01: #FFFFFF;--txt-02: #adaeb8;--txt-03: #60616b;--txt-mask: #3D3D42;--txt-focus: #87e087;--txt-error: #ff5c5c;--txt-link: #9470ff;--ic-00: #ffffff;--ic-01: #FFFFFF;--ic-02: #60616b;--ic-accent: #87e087;--border-color-default: #60616b;--border-color-hover: #adaeb8;--border-color-focus: #49cc49;--border-color-error: #ff5c5c;--border-color-div-grey: #232329;--border-color-div-bw: #000000;--btn-accent-default: #5f31cc;--btn-accent-hover: #5f31cc;--btn-accent-press: #5f31cc;--btn-primary-default: #5f31cc;--btn-primary-hover: #6d3ddb;--btn-primary-press: #5328b8;--btn-sec-hover-white: rgba(131, 131, 163, .16);--btn-sec-hover-grey: rgba(131, 131, 163, .16);--btn-sec-press-grey: rgba(131, 131, 163, .24);--btn-active-select: rgba(99, 224, 36, .24);--btn-switcher: #5e5e70;--dis-00: #65656b;--dis-01: #3D3D42;--bg-base-dark: #0d0d0f;--bg-base-light: #0d0d0f;--bg-elevated-01: #1b1b1f;--bg-elevated-02: #2d2d33;--bg-error: #FFF5F5;--filled-V-BG: rgba(66, 184, 66, .4);--filled-D-BG: rgba(229, 83, 229, .4);--filled-N-BG: rgba(83, 82, 102, .4);--filled-J-BG: rgba(132, 92, 255, .4);--notification-neutral: linear-gradient(90deg, #4d4d8f 0%, #292933 100%);--notification-success: linear-gradient(90deg, #305c3e 0%, #292933 100%);--notification-warning: linear-gradient(90deg, #754f2d 0%, #292933 100%);--notification-error: linear-gradient(90deg, #8f3343 0%, #292933 100%);--gradient-blue-green: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-violet: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-clear: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-orange: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-mint: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-lime: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-rose: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-red: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-violet: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%)}._root_126m8_131{display:flex;flex-direction:column;gap:12px}._tip_126m8_137{color:var(--txt-03)}._steps_126m8_141{display:flex;flex-direction:column;gap:6px}._stepItem_126m8_147{cursor:pointer}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+const t = "_root_126m8_131", s = "_tip_126m8_137", e = "_steps_126m8_141", o = "_stepItem_126m8_147", _ = {
   root: t,
   tip: s,
   steps: e,

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

@@ -1,7 +1,19 @@
-import { PObjectId, SimplifiedUniversalPColumnEntry } from '@platforma-sdk/model';
+import { ListOptionBase, PObjectId } from '@platforma-sdk/model';
+import { PlAdvancedFilterItem } from '../../PlAdvancedFilter';
+import { PlAdvancedFilterColumnId } from '../../PlAdvancedFilter/types';
 import { Filter } from '../types';
 export type Props = {
-    columns: SimplifiedUniversalPColumnEntry[];
+    columns: PlAdvancedFilterItem[];
+    getSuggestOptions: (params: {
+        columnId: PlAdvancedFilterColumnId;
+        searchStr: string;
+        axisIdx?: number;
+    }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;
+    getSuggestModel?: (params: {
+        columnId: PlAdvancedFilterColumnId;
+        searchStr: string;
+        axisIdx?: number;
+    }) => ListOptionBase<string | number> | Promise<ListOptionBase<string | number>>;
     hasSelectedColumns?: boolean;
     getValuesForSelectedColumns?: () => Promise<undefined | {
         columnId: PObjectId;

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

@@ -1,13 +1,14 @@
-import { defineComponent as w, mergeModels as M, useModel as N, computed as P, createBlock as r, createCommentVNode as f, openBlock as d, unref as s, withCtx as n, createElementVNode as y, normalizeClass as v, createVNode as g, createTextVNode as p, createElementBlock as U, toDisplayString as F } from "vue";
-import { isNil as u } from "../../../lib/util/helpers/dist/utils.js";
-import { randomInt as V } from "../../../lib/util/helpers/dist/random.js";
-import { PlSidebarItem as $, PlBtnSecondary as C, PlElementList as D, PlEditableTitle as I, getFilterUiMetadata as j } from "@milaboratories/uikit";
-import { createDefaultFilterMetadata as q } from "../utils.js";
-import L from "./DynamicForm.vue.js";
-const T = { key: 1 }, K = /* @__PURE__ */ w({
+import { defineComponent as V, mergeModels as q, useModel as E, computed as k, createBlock as r, createCommentVNode as p, openBlock as u, unref as s, withCtx as a, createVNode as c, normalizeClass as d, createElementVNode as x, createTextVNode as g } from "vue";
+import { randomInt as i } from "../../../lib/util/helpers/dist/random.js";
+import { PlSidebarItem as T, PlBtnSecondary as f, PlEditableTitle as A } from "@milaboratories/uikit";
+import M from "../../PlAdvancedFilter/PlAdvancedFilter.vue.js";
+import S from "./style.module.css.js";
+const I = /* @__PURE__ */ V({
   __name: "FilterSidebar",
-  props: /* @__PURE__ */ M({
+  props: /* @__PURE__ */ q({
     columns: {},
+    getSuggestOptions: { type: Function },
+    getSuggestModel: { type: Function },
     hasSelectedColumns: { type: Boolean },
     getValuesForSelectedColumns: { type: Function }
   }, {
@@ -15,106 +16,114 @@ const T = { key: 1 }, K = /* @__PURE__ */ w({
     stepModifiers: {}
   }),
   emits: ["update:step"],
-  setup(c) {
-    const o = N(c, "step"), a = c, S = P(() => a.hasSelectedColumns !== void 0 && a.getValuesForSelectedColumns !== void 0), h = () => {
-      o.value.filter.filters.push({
-        id: V(),
+  setup(m) {
+    const e = E(m, "step"), t = m, v = k(() => t.hasSelectedColumns !== void 0 && t.getValuesForSelectedColumns !== void 0), b = () => {
+      e.value.filter.filters.push({
+        id: i(),
         isExpanded: !0,
-        type: void 0
+        type: "or",
+        filters: [
+          {
+            id: i(),
+            type: "isNA",
+            column: t.columns[0].id
+          }
+        ]
       });
     };
-    async function x() {
-      if (a.hasSelectedColumns === void 0 || a.getValuesForSelectedColumns === void 0) return;
-      const t = await a.getValuesForSelectedColumns();
-      if (!t || t.values.length === 0) return;
-      const { columnId: l, values: e } = t, i = e.slice(0, 3).join(", ") + (e.length > 3 ? ` and ${e.length - 3} more` : "");
-      o.value.filter.filters.push({
-        id: V(),
-        name: `Selected list (${i})`,
+    async function h() {
+      if (t.hasSelectedColumns === void 0 || t.getValuesForSelectedColumns === void 0) return;
+      const n = await t.getValuesForSelectedColumns();
+      if (!n || n.values.length === 0) return;
+      const { columnId: l, values: o } = n, C = o.slice(0, 3).join(", ") + (o.length > 3 ? ` and ${o.length - 3} more` : "");
+      e.value.filter.filters.push({
+        id: i(),
+        name: `Selected list (${C})`,
         isExpanded: !1,
         type: "or",
-        filters: e.map((m, B) => ({
-          id: B,
+        filters: o.map((F, N) => ({
+          id: N,
           type: "patternEquals",
           column: l,
-          value: m
+          value: F
         }))
       });
     }
-    const k = (t) => {
-      var l;
-      return u(t.name) ? ((l = a.columns.find((e) => "column" in t ? e.id === t.column : !1)) == null ? void 0 : l.label) ?? t.type : t.name;
-    }, b = (t) => u(t.type) ? q() : j(t.type).form, E = (t) => t.type === "or" || t.type === "and" ? t.filters.map((l) => "value" in l && !u(l.value) ? l.value : null).filter((l) => !u(l)).join(", ") : null;
-    return (t, l) => o.value ? (d(), r(s($), { key: 0 }, {
-      "header-content": n(() => [
-        (d(), r(s(I), {
-          key: o.value.id,
-          modelValue: o.value.label,
-          "onUpdate:modelValue": l[0] || (l[0] = (e) => o.value.label = e),
+    const y = [
+      "isNA",
+      "isNotNA",
+      "greaterThan",
+      "greaterThanOrEqual",
+      "lessThan",
+      "lessThanOrEqual",
+      "patternEquals",
+      "patternNotEquals",
+      "patternContainSubsequence",
+      "patternNotContainSubsequence",
+      "equal",
+      "notEqual",
+      "topN",
+      "bottomN"
+    ];
+    return (n, l) => e.value ? (u(), r(s(T), { key: 0 }, {
+      "header-content": a(() => [
+        (u(), r(s(A), {
+          key: e.value.id,
+          modelValue: e.value.label,
+          "onUpdate:modelValue": l[0] || (l[0] = (o) => e.value.label = o),
+          class: d({ [s(S).flashing]: e.value.label.length === 0 }),
           "max-length": 40,
           "max-width": "600px",
-          placeholder: "Annotation Name",
-          autofocus: o.value.label.length === 0
-        }, null, 8, ["modelValue", "autofocus"]))
+          placeholder: "Filter Name",
+          autofocus: e.value.label.length === 0
+        }, null, 8, ["modelValue", "class", "autofocus"]))
       ]),
-      "body-content": n(() => [
-        y("div", {
-          class: v(t.$style.root)
-        }, [
-          y("div", {
-            class: v(t.$style.actions)
-          }, [
-            g(s(C), {
-              style: { width: "100%" },
-              icon: "add",
-              onClick: h
-            }, {
-              default: n(() => [...l[2] || (l[2] = [
-                p(" Filter ", -1)
-              ])]),
-              _: 1
-            }),
-            S.value ? (d(), r(s(C), {
-              key: 0,
-              style: { width: "100%" },
-              icon: "add",
-              disabled: !a.hasSelectedColumns,
-              onClick: x
-            }, {
-              default: n(() => [...l[3] || (l[3] = [
-                p(" From selection ", -1)
-              ])]),
-              _: 1
-            }, 8, ["disabled"])) : f("", !0)
-          ], 2),
-          g(s(D), {
-            items: o.value.filter.filters,
-            "onUpdate:items": l[1] || (l[1] = (e) => o.value.filter.filters = e),
-            "get-item-key": (e) => e.id,
-            "is-expanded": (e) => !!e.isExpanded,
-            "on-expand": (e) => e.isExpanded = !e.isExpanded
-          }, {
-            "item-title": n(({ item: e }) => [
-              p(F(k(e)), 1)
-            ]),
-            "item-content": n(({ item: e, index: i }) => [
-              e.type !== "or" && e.type !== "and" ? (d(), r(L, {
+      "body-content": a(() => [
+        c(s(M), {
+          filters: e.value.filter,
+          "onUpdate:filters": l[1] || (l[1] = (o) => e.value.filter = o),
+          class: d([n.$style.root, { [s(S).disabled]: e.value.label.length === 0 }]),
+          items: t.columns,
+          "supported-filters": y,
+          "get-suggest-model": t.getSuggestModel,
+          "get-suggest-options": t.getSuggestOptions,
+          "enable-dnd": !1,
+          "enable-add-group-button": !0
+        }, {
+          "add-group-buttons": a(() => [
+            x("div", {
+              class: d(n.$style.actions)
+            }, [
+              c(s(f), {
+                icon: "add",
+                onClick: b
+              }, {
+                default: a(() => [...l[2] || (l[2] = [
+                  g(" Add Filter ", -1)
+                ])]),
+                _: 1
+              }),
+              v.value ? (u(), r(s(f), {
                 key: 0,
-                modelValue: o.value.filter.filters[i],
-                "onUpdate:modelValue": (m) => o.value.filter.filters[i] = m,
-                columns: a.columns,
-                "form-metadata": b(e)
-              }, null, 8, ["modelValue", "onUpdate:modelValue", "columns", "form-metadata"])) : (d(), U("div", T, F(E(e)), 1))
-            ]),
-            _: 1
-          }, 8, ["items", "get-item-key", "is-expanded", "on-expand"])
-        ], 2)
+                icon: "add",
+                disabled: !t.hasSelectedColumns,
+                onClick: h
+              }, {
+                default: a(() => [...l[3] || (l[3] = [
+                  g(" From selection ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"])) : p("", !0)
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["filters", "class", "items", "get-suggest-model", "get-suggest-options"])
       ]),
       _: 1
-    })) : f("", !0);
+    })) : p("", !0);
   }
 });
 export {
-  K as default
+  I as default
 };
 //# sourceMappingURL=FilterSidebar.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterSidebar.vue2.js","sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type Props = {\n  columns: SimplifiedUniversalPColumnEntry[];\n  hasSelectedColumns?: boolean;\n  getValuesForSelectedColumns?: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;\n};\n</script>\n<script setup lang=\"ts\">\nimport { isNil, randomInt } from '@milaboratories/helpers';\nimport type {\n  FilterSpecTypeFieldRecord,\n} from '@milaboratories/uikit';\nimport {\n  getFilterUiMetadata,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n} from '@milaboratories/uikit';\nimport type { FilterSpecLeaf, PObjectId, SimplifiedUniversalPColumnEntry, SUniversalPColumnId } from '@platforma-sdk/model';\nimport { computed } from 'vue';\nimport type { Filter, FilterSpec } from '../types';\nimport { createDefaultFilterMetadata } from '../utils';\nimport DynamicForm from './DynamicForm.vue';\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: undefined,\n  });\n};\n\nasync function addFilterFromSelected() {\n  if (props.hasSelectedColumns === undefined || props.getValuesForSelectedColumns === undefined) 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 = 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\n// Getters\nconst getColumnLabel = (filter: FilterSpec) => {\n  if (!isNil(filter.name)) return filter.name;\n  return props.columns\n    .find((c) => 'column' in filter ? c.id === filter.column : false)?.label\n    ?? filter.type;\n};\n\nconst getFormMetadata = (filter: FilterSpec): FilterSpecTypeFieldRecord<FilterSpecLeaf> => {\n  return !isNil(filter.type)\n    ? getFilterUiMetadata(filter.type).form as FilterSpecTypeFieldRecord<FilterSpecLeaf>\n    : createDefaultFilterMetadata();\n};\n\nconst getFilterValues = (filter: FilterSpec) => {\n  if (filter.type === 'or' || filter.type === 'and') {\n    return filter.filters.map((f) => 'value' in f && !isNil(f.value) ? f.value : null).filter((v) => !isNil(v)).join (', ');\n  }\n  return null;\n};\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        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Annotation Name\"\n        :autofocus=\"step.label.length === 0\"\n      />\n    </template>\n    <template #body-content>\n      <div :class=\"$style.root\">\n        <div :class=\"$style.actions\">\n          <PlBtnSecondary style=\"width: 100%;\" icon=\"add\" @click=\"addFilterPlaceholder\">\n            Filter\n          </PlBtnSecondary>\n          <PlBtnSecondary v-if=\"withSelection\" style=\"width: 100%;\" icon=\"add\" :disabled=\"!props.hasSelectedColumns\" @click=\"addFilterFromSelected\">\n            From selection\n          </PlBtnSecondary>\n        </div>\n\n        <PlElementList\n          v-model:items=\"step.filter.filters\"\n          :get-item-key=\"(item) => item.id\"\n          :is-expanded=\"(item) => Boolean(item.isExpanded)\"\n          :on-expand=\"(item) => item.isExpanded = !Boolean(item.isExpanded)\"\n        >\n          <template #item-title=\"{ item }\">\n            {{ getColumnLabel(item) }}\n          </template>\n          <template #item-content=\"{ item, index }\">\n            <template v-if=\"item.type !== 'or' && item.type !== 'and'\">\n              <DynamicForm\n                v-model=\"(step.filter.filters[index] as FilterSpecLeaf)\"\n                :columns=\"props.columns\"\n                :form-metadata=\"getFormMetadata(item)\"\n              />\n            </template>\n            <template v-else>\n              <div>{{ getFilterValues(item) }}</div>\n            </template>\n          </template>\n        </PlElementList>\n      </div>\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.actions {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n</style>\n"],"names":["step","_useModel","__props","props","withSelection","computed","addFilterPlaceholder","randomInt","addFilterFromSelected","data","columnId","values","shortReminder","value","i","getColumnLabel","filter","isNil","_a","c","getFormMetadata","createDefaultFilterMetadata","getFilterUiMetadata","getFilterValues","f","v","_createBlock","_unref","PlSidebarItem","PlEditableTitle","_cache","$event","_createElementVNode","_normalizeClass","$style","_createVNode","PlBtnSecondary","PlElementList","item","_withCtx","_createTextVNode","_toDisplayString","index","DynamicForm","_createElementBlock","_hoisted_1"],"mappings":"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"}
+{"version":3,"file":"FilterSidebar.vue2.js","sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type Props = {\n  columns: PlAdvancedFilterItem[];\n\n  getSuggestOptions: (params: { columnId: PlAdvancedFilterColumnId; searchStr: string; axisIdx?: number }) =>\n    ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  // @todo: can be optional\n  getSuggestModel?: (params: { columnId: PlAdvancedFilterColumnId; searchStr: string; axisIdx?: number }) =>\n    ListOptionBase<string | number> | Promise<ListOptionBase<string | number>>;\n\n  hasSelectedColumns?: boolean;\n  getValuesForSelectedColumns?: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;\n};\n</script>\n<script setup lang=\"ts\">\nimport { randomInt } from '@milaboratories/helpers';\nimport {\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlSidebarItem,\n} from '@milaboratories/uikit';\nimport type { ListOptionBase, PObjectId, SUniversalPColumnId } from '@platforma-sdk/model';\nimport { computed } from 'vue';\nimport type { PlAdvancedFilterFilter, PlAdvancedFilterSupportedFilters } from '../../PlAdvancedFilter';\nimport { PlAdvancedFilter, type PlAdvancedFilterItem } from '../../PlAdvancedFilter';\nimport type { PlAdvancedFilterColumnId } from '../../PlAdvancedFilter/types';\nimport type { Filter } from '../types';\n\nimport $commonStyle from './style.module.css';\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) 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 = 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=\"Filter Name\"\n        :autofocus=\"step.label.length === 0\"\n      />\n    </template>\n    <template #body-content>\n      <PlAdvancedFilter\n        v-model:filters=\"(step.filter as PlAdvancedFilterFilter)\"\n        :class=\"[$style.root, { [$commonStyle.disabled]: step.label.length === 0 }]\"\n        :items=\"props.columns\"\n        :supported-filters=\"supportedFilters\"\n        :get-suggest-model=\"props.getSuggestModel\"\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\">\n              Add Filter\n            </PlBtnSecondary>\n            <PlBtnSecondary v-if=\"withSelection\" icon=\"add\" :disabled=\"!props.hasSelectedColumns\" @click=\"addFilterFromSelected\">\n              From selection\n            </PlBtnSecondary>\n          </div>\n        </template>\n      </PlAdvancedFilter>\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"],"names":["step","_useModel","__props","props","withSelection","computed","addFilterPlaceholder","randomInt","addFilterFromSelected","data","columnId","values","shortReminder","value","i","supportedFilters","_createBlock","_unref","PlSidebarItem","PlEditableTitle","_cache","$event","_normalizeClass","_createVNode","PlAdvancedFilter","$style","$commonStyle","_createElementVNode","PlBtnSecondary"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(":root{--txt-00: #ffffff;--txt-01: light-dark(#110529, #ffffff);--txt-02: #231842;--txt-03: #9d9eae;--txt-mask: #cfd1db;--txt-focus: #07ad3e;--txt-error: #f1222f;--txt-link: #5f31cc;--ic-00: #ffffff;--ic-01: #110529;--ic-02: #cfd1db;--ic-accent: #07ad3e;--border-color-default: #110529;--border-color-hover: #231842;--border-color-focus: #49cc49;--border-color-error: #ff5c5c;--border-color-div-grey: #e1e3eb;--border-color-div-bw: #ffffff;--btn-accent-default: #845cff;--btn-accent-hover: #9470ff;--btn-accent-press: #6f4dd6;--btn-primary-default: #110529;--btn-primary-hover: #231842;--btn-primary-press: #080214;--btn-sec-hover-white: rgba(255, 255, 255, .5);--btn-sec-hover-grey: light-dark(rgba(155, 171, 204, .16), rgba(131, 131, 163, .16));--btn-sec-press-grey: rgba(155, 171, 204, .24);--btn-active-select: rgba(99, 224, 36, .24);--btn-switcher: linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--btn-accent-positive-500: #ECFBE5;--dis-00: #ffffff;--dis-01: light-dark(#cfd1db, #3d3d42);--bg-base-dark: #110529;--bg-base-light: #f7f8fa;--bg-elevated-01: #ffffff;--bg-elevated-02: #e1e3eb;--bg-error: #FFF5F5;--filled-V-BG: #d0f0c0;--filled-D-BG: #ffcecc;--filled-N-BG: #faf5aa;--filled-J-BG: #dedbff;--notification-neutral: linear-gradient(90deg, #d6d9ff 0%, #fff 100%);--notification-success: linear-gradient(90deg, #c9f0b6 0%, #fff 100%);--notification-warning: linear-gradient(90deg, #fee0a3 0%, #fff 100%);--notification-error: linear-gradient(90deg, #ffb8b8 0%, #fff 100%);--gradient-blue-green: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime: linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--gradient-blue-violet: linear-gradient(180deg, #adb8ff 0%, #d6e9ff 100%);--gradient-blue-clear: linear-gradient(180deg, #85beff 0%, #cef 100%);--gradient-orange: linear-gradient(180deg, #ffb766 0%, #ffeaa3 100%);--gradient-mint: linear-gradient(180deg, #7dd1d1 0%, #c8fae9 100%);--gradient-lime: linear-gradient(180deg, #bfe062 0%, #e4ffad 100%);--gradient-rose: linear-gradient(0deg, #ffddd6 0%, #ff99c9 100%);--gradient-red: linear-gradient(0deg, #ffd5cc 0%, #ff9494 100%);--gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--TT-gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--gradient-light-lime: linear-gradient(180deg, #EBFFEB 0%, transparent 100%);--shadow-l: 0px 8px 16px -4px rgba(15, 36, 77, .16), 0px 12px 32px -4px rgba(15, 36, 77, .16);--main-spacing: 24px;--gap-v: 24px;--gap-h: 12px;--border-radius: 6px;--z-splash: 50;--z-slide-shadow: 80;--z-slide-dialog: 81;--z-dialog: 100;--z-dropdown-options: 110;--z-tooltip: 120;--z-context-menu: 1001;--scrollbar-width: 6px}[data-theme=dark]{--txt-00: #ffffff;--txt-01: #FFFFFF;--txt-02: #adaeb8;--txt-03: #60616b;--txt-mask: #3D3D42;--txt-focus: #87e087;--txt-error: #ff5c5c;--txt-link: #9470ff;--ic-00: #ffffff;--ic-01: #FFFFFF;--ic-02: #60616b;--ic-accent: #87e087;--border-color-default: #60616b;--border-color-hover: #adaeb8;--border-color-focus: #49cc49;--border-color-error: #ff5c5c;--border-color-div-grey: #232329;--border-color-div-bw: #000000;--btn-accent-default: #5f31cc;--btn-accent-hover: #5f31cc;--btn-accent-press: #5f31cc;--btn-primary-default: #5f31cc;--btn-primary-hover: #6d3ddb;--btn-primary-press: #5328b8;--btn-sec-hover-white: rgba(131, 131, 163, .16);--btn-sec-hover-grey: rgba(131, 131, 163, .16);--btn-sec-press-grey: rgba(131, 131, 163, .24);--btn-active-select: rgba(99, 224, 36, .24);--btn-switcher: #5e5e70;--dis-00: #65656b;--dis-01: #3D3D42;--bg-base-dark: #0d0d0f;--bg-base-light: #0d0d0f;--bg-elevated-01: #1b1b1f;--bg-elevated-02: #2d2d33;--bg-error: #FFF5F5;--filled-V-BG: rgba(66, 184, 66, .4);--filled-D-BG: rgba(229, 83, 229, .4);--filled-N-BG: rgba(83, 82, 102, .4);--filled-J-BG: rgba(132, 92, 255, .4);--notification-neutral: linear-gradient(90deg, #4d4d8f 0%, #292933 100%);--notification-success: linear-gradient(90deg, #305c3e 0%, #292933 100%);--notification-warning: linear-gradient(90deg, #754f2d 0%, #292933 100%);--notification-error: linear-gradient(90deg, #8f3343 0%, #292933 100%);--gradient-blue-green: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-violet: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-clear: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-orange: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-mint: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-lime: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-rose: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-red: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-violet: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%)}._root_aq5ub_131{display:flex;flex-direction:column;gap:12px}._actions_aq5ub_137{display:flex;flex-direction:row;gap:12px}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-const o = "_root_aq5ub_131", t = "_actions_aq5ub_137", s = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._root_ynuss_2{display:flex;flex-direction:column;gap:12px}._actions_ynuss_8{display:flex;flex-direction:row;gap:12px}")),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+const o = "_root_ynuss_2", s = "_actions_ynuss_8", t = {
   root: o,
-  actions: t
+  actions: s
 };
 export {
-  t as actions,
-  s as default,
+  s as actions,
+  t as default,
   o as root
 };
 //# sourceMappingURL=FilterSidebar.vue3.js.map

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

@@ -1,12 +1,14 @@
-import { defineComponent as f, mergeModels as v, useModel as C, shallowRef as h, computed as y, effect as b, createBlock as c, openBlock as d, unref as I, normalizeClass as u, withCtx as m, createCommentVNode as g, createVNode as F } from "vue";
+import { defineComponent as S, mergeModels as f, useModel as v, shallowRef as C, computed as h, effect as y, createBlock as i, openBlock as d, unref as F, withCtx as c, createCommentVNode as I, normalizeClass as m, createVNode as b } from "vue";
 import { isNil as r } from "../../../lib/util/helpers/dist/utils.js";
 import { useConfirm as V, PlSidebarGroup as D } from "@milaboratories/uikit";
-import w from "./AnnotationsSidebar.vue.js";
-import N from "./FilterSidebar.vue.js";
-const U = /* @__PURE__ */ f({
+import M from "./AnnotationsSidebar.vue.js";
+import w from "./FilterSidebar.vue.js";
+const U = /* @__PURE__ */ S({
   __name: "PlAnnotations",
-  props: /* @__PURE__ */ v({
+  props: /* @__PURE__ */ f({
     columns: {},
+    getSuggestOptions: { type: Function },
+    getSuggestModel: { type: Function },
     hasSelectedColumns: { type: Boolean },
     getValuesForSelectedColumns: { type: Function },
     onDeleteSchema: { type: Function }
@@ -15,9 +17,9 @@ const U = /* @__PURE__ */ f({
     annotationModifiers: {}
   }),
   emits: ["update:annotation"],
-  setup(i) {
-    const n = C(i, "annotation"), o = i, t = h(void 0), a = y(() => r(t.value) || r(n.value) ? void 0 : n.value.steps.find((e) => e.id === t.value));
-    b(function() {
+  setup(u) {
+    const n = v(u, "annotation"), e = u, t = C(void 0), a = h(() => r(t.value) || r(n.value) ? void 0 : n.value.steps.find((o) => o.id === t.value));
+    y(function() {
       t.value === void 0 && n.value.steps.length > 0 && (t.value = n.value.steps[0].id);
     });
     const p = V({
@@ -26,38 +28,38 @@ const U = /* @__PURE__ */ f({
       confirmLabel: "Yes, reset",
       cancelLabel: "No, cancel"
     });
-    async function S() {
-      var e;
-      await p() && (t.value = void 0, (e = o.onDeleteSchema) == null || e.call(o));
+    async function g() {
+      var o;
+      await p() && (t.value = void 0, (o = e.onDeleteSchema) == null || o.call(e));
     }
-    return (e, l) => (d(), c(I(D), {
-      class: u(e.$style.sidebarGroup)
-    }, {
-      "item-0": m(() => [
-        F(w, {
+    return (o, s) => (d(), i(F(D), null, {
+      "item-0": c(() => [
+        b(M, {
           annotation: n.value,
-          "onUpdate:annotation": l[0] || (l[0] = (s) => n.value = s),
+          "onUpdate:annotation": s[0] || (s[0] = (l) => n.value = l),
           selectedStepId: t.value,
-          "onUpdate:selectedStepId": l[1] || (l[1] = (s) => t.value = s),
-          class: u(e.$style.sidebarItem),
-          columns: o.columns,
-          onDeleteSchema: S
+          "onUpdate:selectedStepId": s[1] || (s[1] = (l) => t.value = l),
+          class: m(o.$style.sidebarItem),
+          columns: e.columns,
+          onDeleteSchema: g
         }, null, 8, ["annotation", "selectedStepId", "class", "columns"])
       ]),
-      "item-1": m(() => [
-        a.value ? (d(), c(N, {
+      "item-1": c(() => [
+        a.value ? (d(), i(w, {
           key: 0,
           step: a.value,
-          "onUpdate:step": l[2] || (l[2] = (s) => a.value = s),
-          class: u(e.$style.sidebarItem),
-          columns: o.columns,
+          "onUpdate:step": s[2] || (s[2] = (l) => a.value = l),
+          class: m(o.$style.sidebarItem),
+          columns: e.columns,
+          "get-suggest-model": e.getSuggestModel,
+          "get-suggest-options": e.getSuggestOptions,
           selectedStepId: t.value,
-          hasSelectedColumns: o.hasSelectedColumns,
-          getValuesForSelectedColumns: o.getValuesForSelectedColumns
-        }, null, 8, ["step", "class", "columns", "selectedStepId", "hasSelectedColumns", "getValuesForSelectedColumns"])) : g("", !0)
+          hasSelectedColumns: e.hasSelectedColumns,
+          getValuesForSelectedColumns: e.getValuesForSelectedColumns
+        }, null, 8, ["step", "class", "columns", "get-suggest-model", "get-suggest-options", "selectedStepId", "hasSelectedColumns", "getValuesForSelectedColumns"])) : I("", !0)
       ]),
       _: 1
-    }, 8, ["class"]));
+    }));
   }
 });
 export {