@platforma-sdk/ui-vue 1.44.14 → 1.45.0

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

@@ -1,10 +1,9 @@
-import { defineComponent as g, mergeModels as D, useModel as O, computed as c, watch as _, resolveComponent as h, createElementBlock as v, createCommentVNode as V, openBlock as u, normalizeClass as P, Fragment as i, renderList as B, createBlock as p, unref as s, withCtx as S, createTextVNode as j, toDisplayString as U } from "vue";
-import { isNil as w } from "../../../lib/util/helpers/dist/utils.js";
-import { PlDropdown as k, PlTextField as x, PlNumberField as T, PlCheckbox as R } from "@milaboratories/uikit";
-import { getFilterUiMetadata as z, getFilterUiTypeOptions as E } from "@platforma-sdk/model";
-const I = { key: 7 }, G = /* @__PURE__ */ g({
+import { defineComponent as D, mergeModels as O, useModel as _, computed as c, watch as h, resolveComponent as P, createElementBlock as v, createCommentVNode as V, openBlock as u, normalizeClass as B, Fragment as i, renderList as S, createBlock as p, unref as s, withCtx as j, createTextVNode as w, toDisplayString as U } from "vue";
+import { isNil as x } from "../../../lib/util/helpers/dist/utils.js";
+import { getFilterUiMetadata as R, getFilterUiTypeOptions as z, PlDropdown as T, PlTextField as E, PlNumberField as k, PlCheckbox as I } from "@milaboratories/uikit";
+const L = { key: 7 }, G = /* @__PURE__ */ D({
   __name: "DynamicForm",
-  props: /* @__PURE__ */ D({
+  props: /* @__PURE__ */ O({
     columns: {},
     formMetadata: {}
   }, {
@@ -13,88 +12,92 @@ const I = { key: 7 }, G = /* @__PURE__ */ g({
   }),
   emits: ["update:modelValue"],
   setup(y) {
-    const t = O(y, "modelValue"), d = y, b = c(() => {
+    const t = _(y, "modelValue"), d = y, b = c(() => {
       var n;
-      const o = t.value;
-      if ("column" in o)
-        return (n = d.columns.find((r) => r.id === o.column)) == null ? void 0 : n.obj;
+      const e = t.value;
+      if ("column" in e)
+        return (n = d.columns.find((r) => r.id === e.column)) == null ? void 0 : n.obj;
     }), F = c(() => {
-      const o = t.value;
-      if (o.type && typeof o.type == "string")
-        return z(o.type);
-    }), M = c(() => E(b.value)), f = c(() => d.columns.map((o) => ({ label: o.label, value: o.id }))), C = c(() => {
-      const o = F.value, n = b.value;
-      return o && n ? d.columns.filter((r) => o.supportedFor(n, r.obj)).map((r) => ({
+      const e = t.value;
+      if (e.type && typeof e.type == "string")
+        return R(e.type);
+    }), M = c(() => z(b.value)), f = c(() => d.columns.map((e) => ({ label: e.label, value: e.id }))), C = c(() => {
+      const e = F.value, n = b.value;
+      return e && n ? d.columns.filter((r) => e.supportedFor(n, r.obj)).map((r) => ({
         label: r.label,
         value: r.id
       })) : [];
-    }), m = (o, n) => {
-      t.value[o] = n;
+    }), m = (e, n) => {
+      t.value[e] = n;
     };
-    return _(
+    h(
       () => d.formMetadata,
-      (o) => {
-        for (const [n, r] of Object.entries(o))
+      (e) => {
+        for (const [n, r] of Object.entries(e))
           if (t.value[n] === void 0) {
-            const l = r.defaultValue();
-            w(l) || (t.value[n] = l);
+            const o = r.defaultValue();
+            x(o) || (t.value[n] = o);
           }
       },
       { immediate: !0, deep: !0 }
-    ), (o, n) => {
-      const r = h("DynamicForm", !0);
-      return o.formMetadata ? (u(), v("div", {
+    );
+    function g(e) {
+      return e === "FilterType" || e === "FilterUiType";
+    }
+    return (e, n) => {
+      const r = P("DynamicForm", !0);
+      return e.formMetadata ? (u(), v("div", {
         key: 0,
-        class: P(o.$style.form)
+        class: B(e.$style.form)
       }, [
-        (u(!0), v(i, null, B(o.formMetadata, (l, e) => (u(), v(i, { key: e }, [
-          l.fieldType === "form" ? (u(), v(i, { key: 0 }, [
-            "form" in l ? (u(), p(r, {
+        (u(!0), v(i, null, S(e.formMetadata, (o, l) => (u(), v(i, { key: l }, [
+          o.fieldType === "form" ? (u(), v(i, { key: 0 }, [
+            "form" in o ? (u(), p(r, {
               key: 0,
-              "model-value": t.value[e],
-              "form-metadata": l.form,
+              "model-value": t.value[l],
+              "form-metadata": o.form,
               columns: d.columns,
-              "onUpdate:modelValue": (a) => m(e, a)
+              "onUpdate:modelValue": (a) => m(l, a)
             }, null, 8, ["model-value", "form-metadata", "columns", "onUpdate:modelValue"])) : V("", !0)
-          ], 64)) : l.fieldType === "FilterUiType" ? (u(), p(s(k), {
+          ], 64)) : g(o.fieldType) ? (u(), p(s(T), {
             key: 1,
-            "model-value": t.value[e],
-            label: l.label ?? e,
+            "model-value": t.value[l],
+            label: o.label ?? l,
             options: M.value,
-            "onUpdate:modelValue": (a) => m(e, a)
-          }, null, 8, ["model-value", "label", "options", "onUpdate:modelValue"])) : l.fieldType === "string" ? (u(), p(s(x), {
+            "onUpdate:modelValue": (a) => m(l, a)
+          }, null, 8, ["model-value", "label", "options", "onUpdate:modelValue"])) : o.fieldType === "string" ? (u(), p(s(E), {
             key: 2,
-            "model-value": t.value[e],
-            label: l.label ?? e,
-            "onUpdate:modelValue": (a) => m(e, a)
-          }, null, 8, ["model-value", "label", "onUpdate:modelValue"])) : l.fieldType === "SUniversalPColumnId" ? (u(), p(s(k), {
+            "model-value": t.value[l],
+            label: o.label ?? l,
+            "onUpdate:modelValue": (a) => m(l, a)
+          }, null, 8, ["model-value", "label", "onUpdate:modelValue"])) : o.fieldType === "SUniversalPColumnId" ? (u(), p(s(T), {
             key: 3,
-            "model-value": t.value[e],
-            label: l.label ?? e,
-            options: e === "column" ? f.value : C.value,
-            "onUpdate:modelValue": (a) => m(e, a)
-          }, null, 8, ["model-value", "label", "options", "onUpdate:modelValue"])) : l.fieldType === "number" ? (u(), p(s(T), {
+            "model-value": t.value[l],
+            label: o.label ?? l,
+            options: l === "column" ? f.value : C.value,
+            "onUpdate:modelValue": (a) => m(l, a)
+          }, null, 8, ["model-value", "label", "options", "onUpdate:modelValue"])) : o.fieldType === "number" ? (u(), p(s(k), {
             key: 4,
-            "model-value": t.value[e],
-            label: l.label ?? e,
-            "onUpdate:modelValue": (a) => m(e, a)
-          }, null, 8, ["model-value", "label", "onUpdate:modelValue"])) : l.fieldType === "number?" ? (u(), p(s(T), {
+            "model-value": t.value[l],
+            label: o.label ?? l,
+            "onUpdate:modelValue": (a) => m(l, a)
+          }, null, 8, ["model-value", "label", "onUpdate:modelValue"])) : o.fieldType === "number?" ? (u(), p(s(k), {
             key: 5,
-            "model-value": t.value[e],
-            label: l.label ?? e,
+            "model-value": t.value[l],
+            label: o.label ?? l,
             clearable: !0,
-            "onUpdate:modelValue": (a) => m(e, a)
-          }, null, 8, ["model-value", "label", "onUpdate:modelValue"])) : l.fieldType === "boolean" || l.fieldType === "boolean?" ? (u(), p(s(R), {
+            "onUpdate:modelValue": (a) => m(l, a)
+          }, null, 8, ["model-value", "label", "onUpdate:modelValue"])) : o.fieldType === "boolean" || o.fieldType === "boolean?" ? (u(), p(s(I), {
             key: 6,
-            "model-value": !!t.value[e],
-            label: l.label ?? e,
-            "onUpdate:modelValue": (a) => m(e, a)
+            "model-value": !!t.value[l],
+            label: o.label ?? l,
+            "onUpdate:modelValue": (a) => m(l, a)
           }, {
-            default: S(() => [
-              j(U(l.label ?? e), 1)
+            default: j(() => [
+              w(U(o.label ?? l), 1)
             ]),
             _: 2
-          }, 1032, ["model-value", "label", "onUpdate:modelValue"])) : (u(), v("pre", I, "TODO:" + U(l.fieldType), 1))
+          }, 1032, ["model-value", "label", "onUpdate:modelValue"])) : (u(), v("pre", L, "TODO:" + U(o.fieldType), 1))
         ], 64))), 128))
       ], 2)) : V("", !0);
     };

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

@@ -1 +1 @@
-{"version":3,"file":"DynamicForm.vue2.js","sources":["../../../../src/components/PlAnnotations/components/DynamicForm.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends FilterUi = FilterUi\">\nimport { computed, watch } from 'vue';\nimport type { FilterUi, SUniversalPColumnId, TypeFieldRecord } from '@platforma-sdk/model';\nimport type { FilterUiType } from '@platforma-sdk/model';\nimport { isNil } from '@milaboratories/helpers';\nimport { PlTextField, PlDropdown, PlNumberField, PlCheckbox } from '@milaboratories/uikit';\nimport { getFilterUiTypeOptions, getFilterUiMetadata } from '@platforma-sdk/model';\nimport type { SimplifiedUniversalPColumnEntry } from '../types';\n\ntype ObjectEntries<T, K extends keyof T = keyof T> = [K, T[K]][];\n\nconst formData = defineModel<T>({ default: () => ({}) });\n\nconst props = defineProps<{\n  columns: SimplifiedUniversalPColumnEntry[];\n  formMetadata: TypeFieldRecord<T>;\n}>();\n\nconst columnSpecRef = computed(() => {\n  const value = formData.value;\n  if ('column' in value) {\n    return props.columns.find((c) => c.id === value.column)?.obj;\n  }\n  return undefined;\n});\n\nconst typeMetadataRef = computed(() => {\n  const value = formData.value;\n  if (value.type && typeof value.type === 'string') {\n    return getFilterUiMetadata(value.type);\n  }\n  return undefined;\n});\n\nconst filterUiTypeOptions = computed(() => {\n  return getFilterUiTypeOptions(columnSpecRef.value);\n});\n\nconst firstColumnsOptions = computed(() => props.columns.map((c) => ({ label: c.label, value: c.id })));\nconst secondColumnOptions = computed(() => {\n  const typeMetadata = typeMetadataRef.value;\n  const columnSpec = columnSpecRef.value;\n  if (typeMetadata && columnSpec) {\n    return props.columns.filter((c) => typeMetadata.supportedFor(columnSpec, c.obj)).map((c) => ({\n      label: c.label,\n      value: c.id,\n    }));\n  }\n  return [];\n});\n\nconst setFieldValue = <K extends keyof T>(fieldName: K, value: T[K]) => {\n  formData.value[fieldName] = value;\n};\n\nwatch(() => props.formMetadata, (newForm) => {\n  for (const [fieldName, field] of Object.entries(newForm) as ObjectEntries<typeof newForm>) {\n    if (formData.value[fieldName] === undefined) {\n      const value = field.defaultValue();\n      if (!isNil(value)) {\n        formData.value[fieldName] = value;\n      }\n    }\n  }\n},\n{ immediate: true, deep: true },\n);\n\n</script>\n\n<template>\n  <div v-if=\"formMetadata\" :class=\"$style.form\">\n    <template v-for=\"(field, fieldName) in formMetadata\" :key=\"fieldName\">\n      <template v-if=\"field.fieldType === 'form'\">\n        <!-- TODO: Nested Form not described in FilterUi, we need to define it later. Even more in type it don't possible situations -->\n        <DynamicForm\n          v-if=\"'form' in field\"\n          :model-value=\"formData[fieldName] as any\"\n          :form-metadata=\"field.form as any\"\n          :columns=\"props.columns\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"field.fieldType === 'FilterUiType'\">\n        <PlDropdown\n          :model-value=\"formData[fieldName] as FilterUiType\"\n          :label=\"field.label ?? fieldName\"\n          :options=\"filterUiTypeOptions\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"field.fieldType === 'string'\">\n        <PlTextField\n          :model-value=\"formData[fieldName] as string\"\n          :label=\"field.label ?? fieldName\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"field.fieldType === 'SUniversalPColumnId'\">\n        <PlDropdown\n          :model-value=\"formData[fieldName] as SUniversalPColumnId\"\n          :label=\"field.label ?? fieldName\"\n          :options=\"fieldName === 'column' ? firstColumnsOptions : secondColumnOptions\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"field.fieldType === 'number'\">\n        <PlNumberField\n          :model-value=\"formData[fieldName] as number\"\n          :label=\"field.label ?? fieldName\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"field.fieldType === 'number?'\">\n        <PlNumberField\n          :model-value=\"formData[fieldName] as (undefined | number)\"\n          :label=\"field.label ?? fieldName\"\n          :clearable=\"true\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"field.fieldType === 'boolean' || field.fieldType === 'boolean?'\">\n        <PlCheckbox\n          :model-value=\"Boolean(formData[fieldName])\"\n          :label=\"field.label ?? fieldName\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        >\n          {{ field.label ?? fieldName }}\n        </PlCheckbox>\n      </template>\n      <template v-else>\n        <pre>TODO:{{ field.fieldType }}</pre>\n      </template>\n    </template>\n  </div>\n</template>\n\n<style module>\n.form {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n</style>\n"],"names":["formData","_useModel","__props","props","columnSpecRef","computed","value","_a","c","typeMetadataRef","getFilterUiMetadata","filterUiTypeOptions","getFilterUiTypeOptions","firstColumnsOptions","secondColumnOptions","typeMetadata","columnSpec","setFieldValue","fieldName","watch","newForm","field","isNil"],"mappings":";;;;;;;;;;;;;;;AAWA,UAAMA,IAAWC,EAAcC,GAAA,YAAwB,GAEjDC,IAAQD,GAKRE,IAAgBC,EAAS,MAAM;;AACnC,YAAMC,IAAQN,EAAS;AACvB,UAAI,YAAYM;AACd,gBAAOC,IAAAJ,EAAM,QAAQ,KAAK,CAACK,MAAMA,EAAE,OAAOF,EAAM,MAAM,MAA/C,gBAAAC,EAAkD;AAAA,IAG7D,CAAC,GAEKE,IAAkBJ,EAAS,MAAM;AACrC,YAAMC,IAAQN,EAAS;AACvB,UAAIM,EAAM,QAAQ,OAAOA,EAAM,QAAS;AACtC,eAAOI,EAAoBJ,EAAM,IAAI;AAAA,IAGzC,CAAC,GAEKK,IAAsBN,EAAS,MAC5BO,EAAuBR,EAAc,KAAK,CAClD,GAEKS,IAAsBR,EAAS,MAAMF,EAAM,QAAQ,IAAI,CAACK,OAAO,EAAE,OAAOA,EAAE,OAAO,OAAOA,EAAE,GAAA,EAAK,CAAC,GAChGM,IAAsBT,EAAS,MAAM;AACzC,YAAMU,IAAeN,EAAgB,OAC/BO,IAAaZ,EAAc;AACjC,aAAIW,KAAgBC,IACXb,EAAM,QAAQ,OAAO,CAACK,MAAMO,EAAa,aAAaC,GAAYR,EAAE,GAAG,CAAC,EAAE,IAAI,CAACA,OAAO;AAAA,QAC3F,OAAOA,EAAE;AAAA,QACT,OAAOA,EAAE;AAAA,MAAA,EACT,IAEG,CAAA;AAAA,IACT,CAAC,GAEKS,IAAgB,CAAoBC,GAAcZ,MAAgB;AACtE,MAAAN,EAAS,MAAMkB,CAAS,IAAIZ;AAAA,IAC9B;AAEA,WAAAa;AAAA,MAAM,MAAMhB,EAAM;AAAA,MAAc,CAACiB,MAAY;AAC3C,mBAAW,CAACF,GAAWG,CAAK,KAAK,OAAO,QAAQD,CAAO;AACrD,cAAIpB,EAAS,MAAMkB,CAAS,MAAM,QAAW;AAC3C,kBAAMZ,IAAQe,EAAM,aAAA;AACpB,YAAKC,EAAMhB,CAAK,MACdN,EAAS,MAAMkB,CAAS,IAAIZ;AAAA,UAEhC;AAAA,MAEJ;AAAA,MACA,EAAE,WAAW,IAAM,MAAM,GAAA;AAAA,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DynamicForm.vue2.js","sources":["../../../../src/components/PlAnnotations/components/DynamicForm.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends FilterSpec = FilterSpec\">\nimport { computed, watch } from 'vue';\n\nimport { isNil } from '@milaboratories/helpers';\nimport type { FilterSpecTypeFieldRecord } from '@milaboratories/uikit';\nimport { getFilterUiMetadata, getFilterUiTypeOptions, PlCheckbox, PlDropdown, PlNumberField, PlTextField } from '@milaboratories/uikit';\nimport type { SimplifiedUniversalPColumnEntry, SUniversalPColumnId } from '@platforma-sdk/model';\n\nimport type { FilterSpec, FilterSpecType } from '../types';\n\ntype ObjectEntries<T, K extends keyof T = keyof T> = [K, T[K]][];\n\nconst formData = defineModel<T>({ default: () => ({}) });\n\nconst props = defineProps<{\n  columns: SimplifiedUniversalPColumnEntry[];\n  formMetadata: FilterSpecTypeFieldRecord<T>;\n}>();\n\nconst columnSpecRef = computed(() => {\n  const value = formData.value;\n  if ('column' in value) {\n    return props.columns.find((c) => c.id === value.column)?.obj;\n  }\n  return undefined;\n});\n\nconst typeMetadataRef = computed(() => {\n  const value = formData.value;\n  if (value.type && typeof value.type === 'string') {\n    return getFilterUiMetadata(value.type);\n  }\n  return undefined;\n});\n\nconst filterUiTypeOptions = computed(() => {\n  return getFilterUiTypeOptions(columnSpecRef.value);\n});\n\nconst firstColumnsOptions = computed(() => props.columns.map((c) => ({ label: c.label, value: c.id })));\nconst secondColumnOptions = computed(() => {\n  const typeMetadata = typeMetadataRef.value;\n  const columnSpec = columnSpecRef.value;\n  if (typeMetadata && columnSpec) {\n    return props.columns.filter((c) => typeMetadata.supportedFor(columnSpec, c.obj)).map((c) => ({\n      label: c.label,\n      value: c.id,\n    }));\n  }\n  return [];\n});\n\nconst setFieldValue = <K extends keyof T>(fieldName: K, value: T[K]) => {\n  formData.value[fieldName] = value;\n};\n\nwatch(() => props.formMetadata, (newForm) => {\n  for (const [fieldName, field] of Object.entries(newForm) as ObjectEntries<typeof newForm>) {\n    if (formData.value[fieldName] === undefined) {\n      const value = field.defaultValue();\n      if (!isNil(value)) {\n        formData.value[fieldName] = value;\n      }\n    }\n  }\n},\n{ immediate: true, deep: true },\n);\n\nfunction isFilterType(type: string | undefined): boolean {\n  return type === 'FilterType'\n    // @deprecated version\n    || type === 'FilterUiType';\n}\n\n</script>\n\n<template>\n  <div v-if=\"formMetadata\" :class=\"$style.form\">\n    <template v-for=\"(field, fieldName) in formMetadata\" :key=\"fieldName\">\n      <template v-if=\"field.fieldType === 'form'\">\n        <!-- TODO: Nested Form not described in FilterUi, we need to define it later. Even more in type it don't possible situations -->\n        <DynamicForm\n          v-if=\"'form' in field\"\n          :model-value=\"formData[fieldName] as any\"\n          :form-metadata=\"field.form as any\"\n          :columns=\"props.columns\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"isFilterType(field.fieldType)\">\n        <PlDropdown\n          :model-value=\"formData[fieldName] as FilterSpecType\"\n          :label=\"field.label ?? fieldName\"\n          :options=\"filterUiTypeOptions\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"field.fieldType === 'string'\">\n        <PlTextField\n          :model-value=\"formData[fieldName] as string\"\n          :label=\"field.label ?? fieldName\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"field.fieldType === 'SUniversalPColumnId'\">\n        <PlDropdown\n          :model-value=\"formData[fieldName] as SUniversalPColumnId\"\n          :label=\"field.label ?? fieldName\"\n          :options=\"fieldName === 'column' ? firstColumnsOptions : secondColumnOptions\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"field.fieldType === 'number'\">\n        <PlNumberField\n          :model-value=\"formData[fieldName] as number\"\n          :label=\"field.label ?? fieldName\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"field.fieldType === 'number?'\">\n        <PlNumberField\n          :model-value=\"formData[fieldName] as (undefined | number)\"\n          :label=\"field.label ?? fieldName\"\n          :clearable=\"true\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        />\n      </template>\n      <template v-else-if=\"field.fieldType === 'boolean' || field.fieldType === 'boolean?'\">\n        <PlCheckbox\n          :model-value=\"Boolean(formData[fieldName])\"\n          :label=\"field.label ?? fieldName\"\n          @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n        >\n          {{ field.label ?? fieldName }}\n        </PlCheckbox>\n      </template>\n      <template v-else>\n        <pre>TODO:{{ field.fieldType }}</pre>\n      </template>\n    </template>\n  </div>\n</template>\n\n<style module>\n.form {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n</style>\n"],"names":["formData","_useModel","__props","props","columnSpecRef","computed","value","_a","c","typeMetadataRef","getFilterUiMetadata","filterUiTypeOptions","getFilterUiTypeOptions","firstColumnsOptions","secondColumnOptions","typeMetadata","columnSpec","setFieldValue","fieldName","watch","newForm","field","isNil","isFilterType","type"],"mappings":";;;;;;;;;;;;;;AAYA,UAAMA,IAAWC,EAAcC,GAAA,YAAwB,GAEjDC,IAAQD,GAKRE,IAAgBC,EAAS,MAAM;;AACnC,YAAMC,IAAQN,EAAS;AACvB,UAAI,YAAYM;AACd,gBAAOC,IAAAJ,EAAM,QAAQ,KAAK,CAACK,MAAMA,EAAE,OAAOF,EAAM,MAAM,MAA/C,gBAAAC,EAAkD;AAAA,IAG7D,CAAC,GAEKE,IAAkBJ,EAAS,MAAM;AACrC,YAAMC,IAAQN,EAAS;AACvB,UAAIM,EAAM,QAAQ,OAAOA,EAAM,QAAS;AACtC,eAAOI,EAAoBJ,EAAM,IAAI;AAAA,IAGzC,CAAC,GAEKK,IAAsBN,EAAS,MAC5BO,EAAuBR,EAAc,KAAK,CAClD,GAEKS,IAAsBR,EAAS,MAAMF,EAAM,QAAQ,IAAI,CAACK,OAAO,EAAE,OAAOA,EAAE,OAAO,OAAOA,EAAE,GAAA,EAAK,CAAC,GAChGM,IAAsBT,EAAS,MAAM;AACzC,YAAMU,IAAeN,EAAgB,OAC/BO,IAAaZ,EAAc;AACjC,aAAIW,KAAgBC,IACXb,EAAM,QAAQ,OAAO,CAACK,MAAMO,EAAa,aAAaC,GAAYR,EAAE,GAAG,CAAC,EAAE,IAAI,CAACA,OAAO;AAAA,QAC3F,OAAOA,EAAE;AAAA,QACT,OAAOA,EAAE;AAAA,MAAA,EACT,IAEG,CAAA;AAAA,IACT,CAAC,GAEKS,IAAgB,CAAoBC,GAAcZ,MAAgB;AACtE,MAAAN,EAAS,MAAMkB,CAAS,IAAIZ;AAAA,IAC9B;AAEA,IAAAa;AAAA,MAAM,MAAMhB,EAAM;AAAA,MAAc,CAACiB,MAAY;AAC3C,mBAAW,CAACF,GAAWG,CAAK,KAAK,OAAO,QAAQD,CAAO;AACrD,cAAIpB,EAAS,MAAMkB,CAAS,MAAM,QAAW;AAC3C,kBAAMZ,IAAQe,EAAM,aAAA;AACpB,YAAKC,EAAMhB,CAAK,MACdN,EAAS,MAAMkB,CAAS,IAAIZ;AAAA,UAEhC;AAAA,MAEJ;AAAA,MACA,EAAE,WAAW,IAAM,MAAM,GAAA;AAAA,IAAK;AAG9B,aAASiB,EAAaC,GAAmC;AACvD,aAAOA,MAAS,gBAEXA,MAAS;AAAA,IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,19 +1,20 @@
-import { AnnotationStepUi, PObjectId } from '@platforma-sdk/model';
-import { SimplifiedUniversalPColumnEntry } from '../types';
-type __VLS_Props = {
+import { PObjectId, SimplifiedUniversalPColumnEntry } from '@platforma-sdk/model';
+import { Filter } from '../types';
+export type Props = {
     columns: SimplifiedUniversalPColumnEntry[];
-    hasSelectedColumns: boolean;
-    getValuesForSelectedColumns: () => Promise<undefined | {
+    hasSelectedColumns?: boolean;
+    getValuesForSelectedColumns?: () => Promise<undefined | {
         columnId: PObjectId;
         values: string[];
     }>;
 };
-type __VLS_PublicProps = {
-    'step': AnnotationStepUi;
-} & __VLS_Props;
-declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:step": (value: AnnotationStepUi) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:step"?: ((value: AnnotationStepUi) => any) | undefined;
+declare const _default: import('vue').DefineComponent<{
+    step: Filter;
+} & Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:step": (value: Filter) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    step: Filter;
+} & Props> & Readonly<{
+    "onUpdate:step"?: ((value: Filter) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,13 +1,12 @@
-import { defineComponent as E, mergeModels as S, useModel as B, createBlock as m, createCommentVNode as M, openBlock as i, unref as n, withCtx as a, createElementVNode as y, normalizeClass as v, createVNode as p, createTextVNode as c, createElementBlock as N, toDisplayString as g } from "vue";
-import { isNil as s } from "../../../lib/util/helpers/dist/utils.js";
-import { randomInt as F } from "../../../lib/util/helpers/dist/random.js";
-import { PlSidebarItem as w, PlBtnSecondary as V, PlElementList as P, PlEditableTitle as U } from "@milaboratories/uikit";
-import { getFilterUiMetadata as $ } from "@platforma-sdk/model";
-import { createDefaultFilterMetadata as D } from "../utils.js";
-import I from "./DynamicForm.vue.js";
-const j = { key: 1 }, H = /* @__PURE__ */ E({
+import { defineComponent as B, mergeModels as w, useModel as M, computed as N, 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 P, 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 U, PlBtnSecondary as C, PlElementList as $, PlEditableTitle as D, getFilterUiMetadata as I } from "@milaboratories/uikit";
+import { createDefaultFilterMetadata as j } from "../utils.js";
+import q from "./DynamicForm.vue.js";
+const L = { key: 1 }, J = /* @__PURE__ */ B({
   __name: "FilterSidebar",
-  props: /* @__PURE__ */ S({
+  props: /* @__PURE__ */ w({
     columns: {},
     hasSelectedColumns: { type: Boolean },
     getValuesForSelectedColumns: { type: Function }
@@ -16,37 +15,38 @@ const j = { key: 1 }, H = /* @__PURE__ */ E({
     stepModifiers: {}
   }),
   emits: ["update:step"],
-  setup(f) {
-    const o = B(f, "step"), d = f, x = () => {
+  setup(c) {
+    const o = M(c, "step"), a = c, S = N(() => a.hasSelectedColumns !== void 0 && a.getValuesForSelectedColumns !== void 0), h = () => {
       o.value.filter.filters.push({
-        id: F(),
+        id: V(),
         isExpanded: !0,
         type: void 0
       });
     };
-    async function b() {
-      const t = await d.getValuesForSelectedColumns();
+    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, r = e.slice(0, 3).join(", ") + (e.length > 3 ? ` and ${e.length - 3} more` : "");
+      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: F(),
-        name: `Selected list (${r})`,
+        id: V(),
+        name: `Selected list (${i})`,
         isExpanded: !1,
         type: "or",
-        filters: e.map((u) => ({
+        filters: e.map((m) => ({
           type: "patternEquals",
           column: l,
-          value: u
+          value: m
         }))
       });
     }
-    const h = (t) => {
+    const k = (t) => {
       var l;
-      return s(t.name) ? ((l = d.columns.find((e) => "column" in t ? e.id === t.column : !1)) == null ? void 0 : l.label) ?? t.type : t.name;
-    }, k = (t) => s(t.type) ? D() : $(t.type).form, C = (t) => t.type === "or" || t.type === "and" ? t.filters.map((l) => "value" in l && !s(l.value) ? l.value : null).filter((l) => !s(l)).join(", ") : null;
-    return (t, l) => o.value ? (i(), m(n(w), { key: 0 }, {
-      "header-content": a(() => [
-        (i(), m(n(U), {
+      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) ? j() : I(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(U), { key: 0 }, {
+      "header-content": n(() => [
+        (d(), r(s(D), {
           key: o.value.id,
           modelValue: o.value.label,
           "onUpdate:modelValue": l[0] || (l[0] = (e) => o.value.label = e),
@@ -56,63 +56,64 @@ const j = { key: 1 }, H = /* @__PURE__ */ E({
           autofocus: o.value.label.length === 0
         }, null, 8, ["modelValue", "autofocus"]))
       ]),
-      "body-content": a(() => [
+      "body-content": n(() => [
         y("div", {
           class: v(t.$style.root)
         }, [
           y("div", {
             class: v(t.$style.actions)
           }, [
-            p(n(V), {
+            g(s(C), {
               style: { width: "100%" },
               icon: "add",
-              onClick: x
+              onClick: h
             }, {
-              default: a(() => l[2] || (l[2] = [
-                c(" Filter ")
+              default: n(() => l[2] || (l[2] = [
+                p(" Filter ")
               ])),
               _: 1
             }),
-            p(n(V), {
+            S.value ? (d(), r(s(C), {
+              key: 0,
               style: { width: "100%" },
               icon: "add",
-              disabled: !d.hasSelectedColumns,
-              onClick: b
+              disabled: !a.hasSelectedColumns,
+              onClick: x
             }, {
-              default: a(() => l[3] || (l[3] = [
-                c(" From selection ")
+              default: n(() => l[3] || (l[3] = [
+                p(" From selection ")
               ])),
               _: 1
-            }, 8, ["disabled"])
+            }, 8, ["disabled"])) : f("", !0)
           ], 2),
-          p(n(P), {
+          g(s($), {
             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": a(({ item: e }) => [
-              c(g(h(e)), 1)
+            "item-title": n(({ item: e }) => [
+              p(F(k(e)), 1)
             ]),
-            "item-content": a(({ item: e, index: r }) => [
-              e.type !== "or" && e.type !== "and" ? (i(), m(I, {
+            "item-content": n(({ item: e, index: i }) => [
+              e.type !== "or" && e.type !== "and" ? (d(), r(q, {
                 key: 0,
-                modelValue: o.value.filter.filters[r],
-                "onUpdate:modelValue": (u) => o.value.filter.filters[r] = u,
-                "form-metadata": k(e),
-                columns: d.columns
-              }, null, 8, ["modelValue", "onUpdate:modelValue", "form-metadata", "columns"])) : (i(), N("div", j, g(C(e)), 1))
+                modelValue: o.value.filter.filters[i],
+                "onUpdate:modelValue": (m) => o.value.filter.filters[i] = m,
+                "form-metadata": b(e),
+                columns: a.columns
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "form-metadata", "columns"])) : (d(), P("div", L, F(E(e)), 1))
             ]),
             _: 1
           }, 8, ["items", "get-item-key", "is-expanded", "on-expand"])
         ], 2)
       ]),
       _: 1
-    })) : M("", !0);
+    })) : f("", !0);
   }
 });
 export {
-  H as default
+  J 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 setup lang=\"ts\">\nimport { isNil, randomInt } from '@milaboratories/helpers';\nimport {\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n} from '@milaboratories/uikit';\nimport type { AnnotationStepUi, FilterUi, PObjectId, SUniversalPColumnId } from '@platforma-sdk/model';\nimport { getFilterUiMetadata } from '@platforma-sdk/model';\nimport type { SimplifiedUniversalPColumnEntry } from '../types';\nimport { createDefaultFilterMetadata } from '../utils';\nimport DynamicForm from './DynamicForm.vue';\n\n// Models\nconst step = defineModel<AnnotationStepUi>('step', { required: true });\n// Props\nconst props = defineProps<{\n  columns: SimplifiedUniversalPColumnEntry[];\n  hasSelectedColumns: boolean;\n  getValuesForSelectedColumns: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;\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  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) => ({\n      type: 'patternEquals',\n      column: columnId as SUniversalPColumnId,\n      value,\n    })),\n  });\n}\n\n// Getters\nconst getColumnLabel = (filter: FilterUi) => {\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: FilterUi) => {\n  return !isNil(filter.type) ? getFilterUiMetadata(filter.type).form : createDefaultFilterMetadata();\n};\n\nconst getFilterValues = (filter: FilterUi) => {\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 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]\"\n                :form-metadata=\"getFormMetadata(item)\"\n                :columns=\"props.columns\"\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","addFilterPlaceholder","randomInt","addFilterFromSelected","data","columnId","values","shortReminder","value","getColumnLabel","filter","isNil","_a","c","getFormMetadata","createDefaultFilterMetadata","getFilterUiMetadata","getFilterValues","f","v"],"mappings":";;;;;;;;;;;;;;;;;;;AAeA,UAAMA,IAAOC,KAA8B,MAA0B,GAE/DC,IAAQC,GAMRC,IAAuB,MAAM;AACjC,MAAAJ,EAAK,MAAM,OAAO,QAAQ,KAAK;AAAA,QAC7B,IAAIK,EAAA;AAAA,QACJ,YAAY;AAAA,QACZ,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAEA,mBAAeC,IAAwB;AACrC,YAAMC,IAAO,MAAML,EAAM,4BAAA;AACzB,UAAI,CAACK,KAAQA,EAAK,OAAO,WAAW,EAAG;AAEvC,YAAM,EAAE,UAAAC,GAAU,QAAAC,EAAA,IAAWF,GACvBG,IAAgBD,EAAO,MAAM,GAAG,CAAC,EAAE,KAAK,IAAI,KAAKA,EAAO,SAAS,IAAI,QAAQA,EAAO,SAAS,CAAC,UAAU;AAE9G,MAAAT,EAAK,MAAM,OAAO,QAAQ,KAAK;AAAA,QAC7B,IAAIK,EAAA;AAAA,QACJ,MAAM,kBAAkBK,CAAa;AAAA,QACrC,YAAY;AAAA,QACZ,MAAM;AAAA,QACN,SAASD,EAAO,IAAI,CAACE,OAAW;AAAA,UAC9B,MAAM;AAAA,UACN,QAAQH;AAAA,UACR,OAAAG;AAAA,QAAA,EACA;AAAA,MAAA,CACH;AAAA,IACH;AAGA,UAAMC,IAAiB,CAACC,MAAqB;;AAC3C,aAAKC,EAAMD,EAAO,IAAI,MACfE,IAAAb,EAAM,QACV,KAAK,CAACc,MAAM,YAAYH,IAASG,EAAE,OAAOH,EAAO,SAAS,EAAK,MAD3D,gBAAAE,EAC8D,UAChEF,EAAO,OAHoBA,EAAO;AAAA,IAIzC,GAEMI,IAAkB,CAACJ,MACfC,EAAMD,EAAO,IAAI,IAA4CK,EAAA,IAAxCC,EAAoBN,EAAO,IAAI,EAAE,MAG1DO,IAAkB,CAACP,MACnBA,EAAO,SAAS,QAAQA,EAAO,SAAS,QACnCA,EAAO,QAAQ,IAAI,CAACQ,MAAM,WAAWA,KAAK,CAACP,EAAMO,EAAE,KAAK,IAAIA,EAAE,QAAQ,IAAI,EAAE,OAAO,CAACC,MAAM,CAACR,EAAMQ,CAAC,CAAC,EAAE,KAAM,IAAI,IAEjH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 {\n  getFilterUiMetadata,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n} from '@milaboratories/uikit';\nimport type { 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) => ({\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) => {\n  return !isNil(filter.type) ? getFilterUiMetadata(filter.type).form : 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]\"\n                :form-metadata=\"getFormMetadata(item)\"\n                :columns=\"props.columns\"\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","getColumnLabel","filter","isNil","_a","c","getFormMetadata","createDefaultFilterMetadata","getFilterUiMetadata","getFilterValues","f","v"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,UAAMA,IAAOC,EAAmBC,GAAC,MAA0B,GAErDC,IAAQD,GAERE,IAAgBC,EAAS,MACtBF,EAAM,uBAAuB,UAAaA,EAAM,gCAAgC,MACxF,GAEKG,IAAuB,MAAM;AACjC,MAAAN,EAAK,MAAM,OAAO,QAAQ,KAAK;AAAA,QAC7B,IAAIO,EAAA;AAAA,QACJ,YAAY;AAAA,QACZ,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAEA,mBAAeC,IAAwB;AACrC,UAAIL,EAAM,uBAAuB,UAAaA,EAAM,gCAAgC,OAAW;AAE/F,YAAMM,IAAO,MAAMN,EAAM,4BAAA;AACzB,UAAI,CAACM,KAAQA,EAAK,OAAO,WAAW,EAAG;AAEvC,YAAM,EAAE,UAAAC,GAAU,QAAAC,EAAA,IAAWF,GACvBG,IAAgBD,EAAO,MAAM,GAAG,CAAC,EAAE,KAAK,IAAI,KAAKA,EAAO,SAAS,IAAI,QAAQA,EAAO,SAAS,CAAC,UAAU;AAE9G,MAAAX,EAAK,MAAM,OAAO,QAAQ,KAAK;AAAA,QAC7B,IAAIO,EAAA;AAAA,QACJ,MAAM,kBAAkBK,CAAa;AAAA,QACrC,YAAY;AAAA,QACZ,MAAM;AAAA,QACN,SAASD,EAAO,IAAI,CAACE,OAAW;AAAA,UAC9B,MAAM;AAAA,UACN,QAAQH;AAAA,UACR,OAAAG;AAAA,QAAA,EACA;AAAA,MAAA,CACH;AAAA,IACH;AAGA,UAAMC,IAAiB,CAACC,MAAuB;;AAC7C,aAAKC,EAAMD,EAAO,IAAI,MACfE,IAAAd,EAAM,QACV,KAAK,CAACe,MAAM,YAAYH,IAASG,EAAE,OAAOH,EAAO,SAAS,EAAK,MAD3D,gBAAAE,EAC8D,UAChEF,EAAO,OAHoBA,EAAO;AAAA,IAIzC,GAEMI,IAAkB,CAACJ,MACfC,EAAMD,EAAO,IAAI,IAA4CK,EAAA,IAAxCC,EAAoBN,EAAO,IAAI,EAAE,MAG1DO,IAAkB,CAACP,MACnBA,EAAO,SAAS,QAAQA,EAAO,SAAS,QACnCA,EAAO,QAAQ,IAAI,CAACQ,MAAM,WAAWA,KAAK,CAACP,EAAMO,EAAE,KAAK,IAAIA,EAAE,QAAQ,IAAI,EAAE,OAAO,CAACC,MAAM,CAACR,EAAMQ,CAAC,CAAC,EAAE,KAAM,IAAI,IAEjH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,19 @@
+import { Annotation } from '../types';
+import { Props as BaseProps } from './FilterSidebar.vue';
+export type Props = BaseProps & {
+    onDeleteSchema?: () => void;
+};
+declare const _default: import('vue').DefineComponent<{
+    annotation: Annotation;
+} & BaseProps & {
+    onDeleteSchema?: () => void;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:annotation": (value: Annotation) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    annotation: Annotation;
+} & BaseProps & {
+    onDeleteSchema?: () => void;
+}> & Readonly<{
+    "onUpdate:annotation"?: ((value: Annotation) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/PlAnnotations/components/PlAnnotations.vue.js

@@ -0,0 +1,10 @@
+import o from "./PlAnnotations.vue2.js";
+import s from "./PlAnnotations.vue3.js";
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const r = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
+export {
+  f as default
+};
+//# sourceMappingURL=PlAnnotations.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlAnnotations.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

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

@@ -0,0 +1,66 @@
+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 { 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({
+  __name: "PlAnnotations",
+  props: /* @__PURE__ */ v({
+    columns: {},
+    hasSelectedColumns: { type: Boolean },
+    getValuesForSelectedColumns: { type: Function },
+    onDeleteSchema: { type: Function }
+  }, {
+    annotation: { required: !0 },
+    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() {
+      t.value === void 0 && n.value.steps.length > 0 && (t.value = n.value.steps[0].id);
+    });
+    const p = V({
+      title: "Reset Schema",
+      message: "Are you sure you want to reset the schema? This action cannot be undone.",
+      confirmLabel: "Yes, reset",
+      cancelLabel: "No, cancel"
+    });
+    async function S() {
+      var e;
+      await p() && (t.value = void 0, (e = o.onDeleteSchema) == null || e.call(o));
+    }
+    return (e, l) => (d(), c(I(D), {
+      class: u(e.$style.sidebarGroup)
+    }, {
+      "item-0": m(() => [
+        F(w, {
+          annotation: n.value,
+          "onUpdate:annotation": l[0] || (l[0] = (s) => n.value = s),
+          selectedStepId: t.value,
+          "onUpdate:selectedStepId": l[1] || (l[1] = (s) => t.value = s),
+          class: u(e.$style.sidebarItem),
+          columns: o.columns,
+          onDeleteSchema: S
+        }, null, 8, ["annotation", "selectedStepId", "class", "columns"])
+      ]),
+      "item-1": m(() => [
+        a.value ? (d(), c(N, {
+          key: 0,
+          step: a.value,
+          "onUpdate:step": l[2] || (l[2] = (s) => a.value = s),
+          class: u(e.$style.sidebarItem),
+          columns: o.columns,
+          selectedStepId: t.value,
+          hasSelectedColumns: o.hasSelectedColumns,
+          getValuesForSelectedColumns: o.getValuesForSelectedColumns
+        }, null, 8, ["step", "class", "columns", "selectedStepId", "hasSelectedColumns", "getValuesForSelectedColumns"])) : g("", !0)
+      ]),
+      _: 1
+    }, 8, ["class"]));
+  }
+});
+export {
+  U as default
+};
+//# sourceMappingURL=PlAnnotations.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlAnnotations.vue2.js","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\n</script>\n\n<template>\n  <PlSidebarGroup :class=\"$style.sidebarGroup\">\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        :selectedStepId=\"selectedStepId\"\n        :hasSelectedColumns=\"props.hasSelectedColumns\"\n        :getValuesForSelectedColumns=\"props.getValuesForSelectedColumns\"\n      />\n    </template>\n  </PlSidebarGroup>\n</template>\n\n<style lang=\"scss\" module>\n.modal {\n  display: flex;\n}\n\n.sidebarGroup {\n  width: 100%;\n  height: 100%;\n}\n\n.sidebarItem {\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"names":["annotation","_useModel","props","__props","selectedStepId","shallowRef","selectedStep","computed","isNil","step","effect","confirmResetSchema","useConfirm","handleDeleteSchema","_a"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,UAAMA,IAAaC,KAAwB,YAAgC,GAErEC,IAAQC,GAERC,IAAiBC,EAA+B,MAAS,GACzDC,IAAeC,EAAS,MACrBC,EAAMJ,EAAe,KAAK,KAAKI,EAAMR,EAAW,KAAK,IACxD,SACAA,EAAW,MAAM,MAAM,KAAK,CAACS,MAASA,EAAK,OAAOL,EAAe,KAAK,CAC3E;AAGD,IAAAM,EAAO,WAA4B;AACjC,MAAIN,EAAe,UAAU,UAAaJ,EAAW,MAAM,MAAM,SAAS,MACxEI,EAAe,QAAQJ,EAAW,MAAM,MAAM,CAAC,EAAE;AAAA,IAErD,CAAC;AAED,UAAMW,IAAqBC,EAAW;AAAA,MACpC,OAAO;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,MACd,aAAa;AAAA,IAAA,CACd;AAED,mBAAeC,IAAqB;;AAClC,MAAI,MAAMF,QACRP,EAAe,QAAQ,SACvBU,IAAAZ,EAAM,mBAAN,QAAAY,EAAA,KAAAZ;AAAA,IAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,13 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._modal_1634u_1{display:flex}._sidebarGroup_1634u_5,._sidebarItem_1634u_10{width:100%;height:100%}")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}})();
+const e = "_modal_1634u_1", s = "_sidebarGroup_1634u_5", a = "_sidebarItem_1634u_10", o = {
+  modal: e,
+  sidebarGroup: s,
+  sidebarItem: a
+};
+export {
+  o as default,
+  e as modal,
+  s as sidebarGroup,
+  a as sidebarItem
+};
+//# sourceMappingURL=PlAnnotations.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlAnnotations.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -1,22 +1,15 @@
-import { AnnotationScriptUi, PObjectId } from '@platforma-sdk/model';
-import { SimplifiedUniversalPColumnEntry } from '../types';
-type __VLS_Props = {
-    columns: SimplifiedUniversalPColumnEntry[];
-    hasSelectedColumns: boolean;
-    getValuesForSelectedColumns: () => Promise<undefined | {
-        columnId: PObjectId;
-        values: string[];
-    }>;
-};
+import { Annotation } from '../types';
+import { Props } from './PlAnnotations.vue';
+type __VLS_Props = Props;
 type __VLS_PublicProps = {
-    'annotation': AnnotationScriptUi;
+    'annotation': Annotation;
     'opened': boolean;
 } & __VLS_Props;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:annotation": (value: AnnotationScriptUi) => any;
+    "update:annotation": (value: Annotation) => any;
     "update:opened": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:annotation"?: ((value: AnnotationScriptUi) => any) | undefined;
+    "onUpdate:annotation"?: ((value: Annotation) => any) | undefined;
     "onUpdate:opened"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;