@platforma-sdk/ui-vue 1.42.19 → 1.42.21

package/dist/components/PlTableFilters/PlTableFiltersV2.vue2.js

@@ -1,20 +1,13 @@
-import { defineComponent as D, mergeModels as w, useModel as H, toRefs as J, computed as u, ref as f, onMounted as $, watch as O, onBeforeUnmount as W, createElementBlock as b, openBlock as m, Fragment as q, createBlock as E, createCommentVNode as V, createVNode as i, unref as o, Teleport as I, withModifiers as C, withCtx as d, createTextVNode as p, createElementVNode as k, normalizeClass as v, toDisplayString as S } from "vue";
-import "../../sdk/model/dist/index.js";
-import "../../lib/ui/uikit/dist/index.js";
-import { useFilters as j } from "./filters-state.js";
-import G from "./PlTableAddFilterV2.vue.js";
-import K from "./PlTableFilterEntryV2.vue.js";
-import { isJsonEqual as L } from "../../lib/util/helpers/dist/index.js";
-import { usePlBlockPageTitleTeleportTarget as Q } from "../../lib/ui/uikit/dist/layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.js";
-import X from "../../lib/ui/uikit/dist/components/PlBtnGhost/PlBtnGhost.vue.js";
-import Y from "../../lib/ui/uikit/dist/components/PlSlideModal/PlSlideModal.vue.js";
-import Z from "../../lib/ui/uikit/dist/components/PlElementList/PlElementList.vue.js";
-import h from "../../lib/ui/uikit/dist/components/PlIcon16/PlIcon16.vue.js";
-import _ from "../../lib/ui/uikit/dist/components/PlBtnSecondary/PlBtnSecondary.vue.js";
-import { canonicalizeJson as ee } from "../../lib/model/common/dist/index.js";
-const te = ["disabled"], le = { key: 1 }, be = /* @__PURE__ */ D({
+import { defineComponent as D, mergeModels as S, useModel as w, toRefs as E, computed as f, ref as u, onMounted as P, watch as H, onBeforeUnmount as I, createElementBlock as b, openBlock as m, Fragment as J, createBlock as O, createCommentVNode as V, createVNode as r, unref as o, Teleport as W, withModifiers as $, withCtx as d, createTextVNode as p, createElementVNode as k, normalizeClass as v, toDisplayString as q } from "vue";
+import { canonicalizeJson as G } from "@platforma-sdk/model";
+import { usePlBlockPageTitleTeleportTarget as L, PlBtnGhost as h, PlSlideModal as j, PlElementList as K, PlMaskIcon16 as Q, PlBtnSecondary as X } from "@milaboratories/uikit";
+import { useFilters as Y } from "./filters-state.js";
+import Z from "./PlTableAddFilterV2.vue.js";
+import _ from "./PlTableFilterEntryV2.vue.js";
+import { isJsonEqual as ee } from "../../lib/util/helpers/dist/objects.js";
+const le = ["disabled"], te = { key: 1 }, ue = /* @__PURE__ */ D({
   __name: "PlTableFiltersV2",
-  props: /* @__PURE__ */ w({
+  props: /* @__PURE__ */ S({
     settings: {}
   }, {
     modelValue: {
@@ -24,56 +17,56 @@ const te = ["disabled"], le = { key: 1 }, be = /* @__PURE__ */ D({
   }),
   emits: ["update:modelValue"],
   setup(F) {
-    const U = H(F, "modelValue"), B = F, { settings: N } = J(B), r = j(N, U), R = u(() => r.value.some((e) => e.filter && !e.filter.disabled)), y = f(!1);
-    $(() => {
+    const B = w(F, "modelValue"), C = F, { settings: U } = E(C), a = Y(U, B), N = f(() => a.value.some((e) => e.filter && !e.filter.disabled)), y = u(!1);
+    P(() => {
       y.value = !0;
     });
-    const T = Q("PlTableFiltersV2"), c = f(!1), A = f(!1), s = f();
+    const M = L("PlTableFiltersV2"), c = u(!1), A = u(!1), s = u();
     let n;
-    $(() => {
+    P(() => {
       n = new ResizeObserver(() => {
-        var l;
-        const e = (l = s.value) == null ? void 0 : l.parentElement;
+        var t;
+        const e = (t = s.value) == null ? void 0 : t.parentElement;
         e && (A.value = e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth);
       }), s.value && s.value.parentElement && n.observe(s.value.parentElement);
-    }), O(s, (e, l) => {
-      l != null && l.parentElement && n.unobserve(l.parentElement), e != null && e.parentElement && n.observe(e.parentElement);
-    }), W(() => {
+    }), H(s, (e, t) => {
+      t != null && t.parentElement && n.unobserve(t.parentElement), e != null && e.parentElement && n.observe(e.parentElement);
+    }), I(() => {
       n !== void 0 && n.disconnect();
     });
-    const P = u(() => r.value.some((e) => !e.filter)), g = f(!1), x = u(() => r.value.some((e) => {
-      var l, t;
-      return !e.defaultFilter && e.filter || e.defaultFilter && (((l = e.filter) == null ? void 0 : l.disabled) === !0 || !L((t = e.filter) == null ? void 0 : t.value, e.defaultFilter));
+    const R = f(() => a.value.some((e) => !e.filter)), g = u(!1), x = f(() => a.value.some((e) => {
+      var t, l;
+      return !e.defaultFilter && e.filter || e.defaultFilter && (((t = e.filter) == null ? void 0 : t.disabled) === !0 || !ee((l = e.filter) == null ? void 0 : l.value, e.defaultFilter));
     })), z = () => {
-      r.value.forEach((e) => {
+      a.value.forEach((e) => {
         e.defaultFilter ? e.filter = {
           value: e.defaultFilter,
           disabled: !1,
           open: !1
         } : e.filter = null;
       });
-    }, M = u(() => r.value.filter((e) => e.filter !== null));
-    return (e, l) => (m(), b(q, null, [
-      y.value && o(T) ? (m(), E(I, {
+    }, T = f(() => a.value.filter((e) => e.filter !== null));
+    return (e, t) => (m(), b(J, null, [
+      y.value && o(M) ? (m(), O(W, {
         key: 0,
-        to: o(T)
+        to: o(M)
       }, [
-        i(o(X), {
-          icon: R.value ? "filter-on" : "filter",
-          onClick: l[0] || (l[0] = C((t) => c.value = !0, ["stop"]))
+        r(o(h), {
+          icon: N.value ? "filter-on" : "filter",
+          onClick: t[0] || (t[0] = $((l) => c.value = !0, ["stop"]))
         }, {
-          default: d(() => l[5] || (l[5] = [
+          default: d(() => t[5] || (t[5] = [
             p(" Filters ")
           ])),
           _: 1
         }, 8, ["icon"])
       ], 8, ["to"])) : V("", !0),
-      i(o(Y), {
+      r(o(j), {
         modelValue: c.value,
-        "onUpdate:modelValue": l[3] || (l[3] = (t) => c.value = t),
+        "onUpdate:modelValue": t[3] || (t[3] = (l) => c.value = l),
         "close-on-outside-click": !1
       }, {
-        title: d(() => l[6] || (l[6] = [
+        title: d(() => t[6] || (t[6] = [
           p("Manage Filters")
         ])),
         default: d(() => [
@@ -82,79 +75,79 @@ const te = ["disabled"], le = { key: 1 }, be = /* @__PURE__ */ D({
             ref: s,
             class: v(e.$style["filter-manager"])
           }, [
-            i(o(Z), {
-              items: M.value,
-              "onUpdate:items": l[1] || (l[1] = (t) => M.value = t),
-              "on-expand": (t) => {
-                t.filter && (t.filter.open = !t.filter.open);
+            r(o(K), {
+              items: T.value,
+              "onUpdate:items": t[1] || (t[1] = (l) => T.value = l),
+              "on-expand": (l) => {
+                l.filter && (l.filter.open = !l.filter.open);
               },
-              "is-expanded": (t) => {
-                var a;
-                return ((a = t.filter) == null ? void 0 : a.open) ?? !1;
+              "is-expanded": (l) => {
+                var i;
+                return ((i = l.filter) == null ? void 0 : i.open) ?? !1;
               },
-              "on-toggle": (t) => {
-                t.filter && (t.filter.disabled = !t.filter.disabled);
+              "on-toggle": (l) => {
+                l.filter && (l.filter.disabled = !l.filter.disabled);
               },
-              "is-toggled": (t) => {
-                var a;
-                return ((a = t.filter) == null ? void 0 : a.disabled) ?? !1;
+              "is-toggled": (l) => {
+                var i;
+                return ((i = l.filter) == null ? void 0 : i.disabled) ?? !1;
               },
-              "on-remove": (t) => {
-                t.filter && (t.filter = null);
+              "on-remove": (l) => {
+                l.filter && (l.filter = null);
               },
-              "get-item-key": (t) => o(ee)(t.id),
+              "get-item-key": (l) => o(G)(l.id),
               "disable-dragging": ""
             }, {
-              "item-title": d(({ item: t }) => [
-                p(S(t.label), 1)
+              "item-title": d(({ item: l }) => [
+                p(q(l.label), 1)
               ]),
-              "item-content": d(({ index: t }) => [
-                i(K, {
-                  modelValue: o(r).value[t],
-                  "onUpdate:modelValue": (a) => o(r).value[t] = a
+              "item-content": d(({ index: l }) => [
+                r(_, {
+                  modelValue: o(a).value[l],
+                  "onUpdate:modelValue": (i) => o(a).value[l] = i
                 }, null, 8, ["modelValue", "onUpdate:modelValue"])
               ]),
               _: 1
             }, 8, ["items", "on-expand", "is-expanded", "on-toggle", "is-toggled", "on-remove", "get-item-key"]),
-            o(r).value.length ? (m(), b("div", {
+            o(a).value.length ? (m(), b("div", {
               key: 0,
               class: v(e.$style["add-action-wrapper"])
             }, [
               k("button", {
-                disabled: !P.value,
+                disabled: !R.value,
                 class: v(e.$style["add-btn"]),
-                onClick: l[2] || (l[2] = (t) => g.value = !0)
+                onClick: t[2] || (t[2] = (l) => g.value = !0)
               }, [
-                i(o(h), { name: "add" }),
+                r(o(Q), { name: "add" }),
                 k("div", {
                   class: v(e.$style["add-btn-title"])
                 }, "Add Filter", 2)
-              ], 10, te),
-              i(o(_), {
+              ], 10, le),
+              r(o(X), {
                 disabled: !x.value,
-                onClick: C(z, ["stop"])
+                onClick: $(z, ["stop"])
               }, {
-                default: d(() => l[7] || (l[7] = [
+                default: d(() => t[7] || (t[7] = [
                   p(" Reset to defaults ")
                 ])),
                 _: 1
               }, 8, ["disabled"])
             ], 2)) : V("", !0),
-            o(r).value.length ? V("", !0) : (m(), b("div", le, "No filters applicable"))
+            o(a).value.length ? V("", !0) : (m(), b("div", te, "No filters applicable"))
           ], 2)
         ]),
         _: 1
       }, 8, ["modelValue"]),
-      i(G, {
+      r(Z, {
         modelValue: g.value,
-        "onUpdate:modelValue": l[4] || (l[4] = (t) => g.value = t),
-        filters: o(r).value,
-        "set-filter": (t, a) => o(r).value[t] = a
+        "onUpdate:modelValue": t[4] || (t[4] = (l) => g.value = l),
+        filters: o(a).value,
+        "set-filter": (l, i) => o(a).value[l] = i
       }, null, 8, ["modelValue", "filters", "set-filter"])
     ], 64));
   }
 });
 export {
-  be as default
+  ue as default
 };
 //# sourceMappingURL=PlTableFiltersV2.vue2.js.map

package/dist/components/PlTableFilters/PlTableFiltersV2.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTableFiltersV2.vue2.js","sources":["../../../src/components/PlTableFilters/PlTableFiltersV2.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  type PlDataTableFilterState,\n  canonicalizeJson,\n  type PTableColumnId,\n} from '@platforma-sdk/model';\nimport type {\n  PlDataTableFiltersSettings,\n} from './types';\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport {\n  PlBtnGhost,\n  PlSlideModal,\n  PlBtnSecondary,\n  PlMaskIcon16,\n  PlElementList,\n  usePlBlockPageTitleTeleportTarget,\n} from '@milaboratories/uikit';\nimport { useFilters } from './filters-state';\nimport PlTableAddFilterV2 from './PlTableAddFilterV2.vue';\nimport PlTableFilterEntryV2 from './PlTableFilterEntryV2.vue';\nimport { isJsonEqual } from '@milaboratories/helpers';\n\nconst state = defineModel<PlDataTableFilterState[]>({\n  default: [],\n});\nconst props = defineProps<{\n  settings: Readonly<PlDataTableFiltersSettings>;\n}>();\nconst { settings } = toRefs(props);\n\nconst filters = useFilters(settings, state);\n\nconst filtersOn = computed<boolean>(() => filters.value.some((s) => s.filter && !s.filter.disabled));\n\nconst mounted = ref(false);\nonMounted(() => {\n  mounted.value = true;\n});\nconst teleportTarget = usePlBlockPageTitleTeleportTarget('PlTableFiltersV2');\n\nconst showManager = ref(false);\n\nconst scrollIsActive = ref(false);\nconst filterManager = ref<HTMLElement>();\nlet observer: ResizeObserver;\nonMounted(() => {\n  observer = new ResizeObserver(() => {\n    const parent = filterManager.value?.parentElement;\n    if (!parent) return;\n    scrollIsActive.value = parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth;\n  });\n  if (filterManager.value && filterManager.value.parentElement) {\n    observer.observe(filterManager.value!.parentElement);\n  }\n});\n\nwatch(filterManager, (newElement, oldElement) => {\n  if (oldElement?.parentElement) {\n    observer.unobserve(oldElement.parentElement);\n  }\n  if (newElement?.parentElement) {\n    observer.observe(newElement.parentElement);\n  }\n});\n\nonBeforeUnmount(() => {\n  if (observer !== undefined) {\n    observer.disconnect();\n  }\n});\n\nconst canAddFilter = computed<boolean>(() => filters.value.some((s) => !s.filter));\nconst showAddFilter = ref(false);\n\nconst canResetToDefaults = computed<boolean>(() => {\n  return filters.value\n    .some((s) => (!s.defaultFilter && s.filter) || (s.defaultFilter\n      && (s.filter?.disabled === true || !isJsonEqual(s.filter?.value, s.defaultFilter))));\n});\nconst resetToDefaults = () => {\n  filters.value.forEach((s) => {\n    if (s.defaultFilter) {\n      s.filter = {\n        value: s.defaultFilter,\n        disabled: false,\n        open: false,\n      };\n    } else {\n      s.filter = null;\n    }\n  });\n};\n\nconst items = computed(() => filters.value.filter((s) => s.filter !== null));\n</script>\n\n<template>\n  <Teleport v-if=\"mounted && teleportTarget\" :to=\"teleportTarget\">\n    <PlBtnGhost :icon=\"filtersOn ? 'filter-on' : 'filter'\" @click.stop=\"showManager = true\">\n      Filters\n    </PlBtnGhost>\n  </Teleport>\n\n  <PlSlideModal v-model=\"showManager\" :close-on-outside-click=\"false\">\n    <template #title>Manage Filters</template>\n\n    <div ref=\"filterManager\" :class=\"$style['filter-manager']\">\n      <PlElementList\n        v-model:items=\"items\"\n        :on-expand=\"(item) => {\n          if (item.filter) {\n            item.filter.open = !item.filter.open;\n          }\n        }\"\n        :is-expanded=\"(item) => item.filter?.open ?? false\"\n        :on-toggle=\"(item) => {\n          if (item.filter) {\n            item.filter.disabled = !item.filter.disabled;\n          }\n        }\"\n        :is-toggled=\"(item) => item.filter?.disabled ?? false\"\n        :on-remove=\"(item) => {\n          if (item.filter) {\n            item.filter = null;\n          }\n        }\"\n        :get-item-key=\"(item) => canonicalizeJson<PTableColumnId>(item.id)\"\n        disable-dragging\n      >\n        <template #item-title=\"{ item }\">\n          {{ item.label }}\n        </template>\n        <template #item-content=\"{ index }\">\n          <PlTableFilterEntryV2 v-model=\"filters.value[index]\" />\n        </template>\n      </PlElementList>\n\n      <div\n        v-if=\"filters.value.length\"\n        :class=\"$style['add-action-wrapper']\"\n      >\n        <button\n          :disabled=\"!canAddFilter\"\n          :class=\"$style['add-btn']\"\n          @click=\"showAddFilter = true\"\n        >\n          <PlMaskIcon16 name=\"add\" />\n          <div :class=\"$style['add-btn-title']\">Add Filter</div>\n        </button>\n\n        <PlBtnSecondary\n          :disabled=\"!canResetToDefaults\"\n          @click.stop=\"resetToDefaults\"\n        >\n          Reset to defaults\n        </PlBtnSecondary>\n      </div>\n\n      <div v-if=\"!filters.value.length\">No filters applicable</div>\n    </div>\n  </PlSlideModal>\n\n  <PlTableAddFilterV2\n    v-model=\"showAddFilter\"\n    :filters=\"filters.value\"\n    :set-filter=\"(idx, filter) => filters.value[idx] = filter\"\n  />\n</template>\n\n<style lang=\"scss\" module>\n.filter-manager {\n    --expand-icon-rotation: rotate(0deg);\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.add-action-wrapper {\n    position: sticky;\n    bottom: -16px;\n    background-color: var(--bg-elevated-01);\n    transition: all .15s ease-in-out;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.add-btn {\n    height: 40px;\n    background-color: var(--bg-elevated-01);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding-left: 12px;\n    padding-right: 12px;\n    border-radius: 6px;\n    border: 1px dashed var(--border-color-div-grey);\n    line-height: 0;\n    cursor: pointer;\n    text-align: left;\n}\n\n.add-btn:disabled {\n    --icon-color: var(--dis-01);\n    cursor: auto;\n}\n\n.add-btn:not([disabled]):hover {\n    border-radius: 6px;\n    border: 1px dashed var(--border-color-focus, #49CC49);\n    background: rgba(99, 224, 36, 0.12);\n}\n\n.add-btn-title {\n    flex-grow: 1;\n    font-weight: 600;\n}\n\n.expand-icon {\n    transition: all .15s ease-in-out;\n    transform: var(--expand-icon-rotation);\n    line-height: 0;\n    cursor: pointer;\n}\n\n.toggle,\n.delete {\n    line-height: 0;\n    cursor: pointer;\n    display: none;\n}\n\n.toggle .mask-24,\n.delete .mask-24 {\n    --icon-color: var(--ic-02);\n}\n\n.toggle:hover .mask-24 {\n    --icon-color: var(--ic-01);\n}\n\n.delete:hover .mask-24 {\n    --icon-color: var(--ic-01);\n}\n\n.filter:hover .toggle,\n.filter:hover .delete {\n    display: block;\n}\n\n.filter {\n    border-radius: 6px;\n    border: 1px solid var(--border-color-div-grey);\n    background-color: var(--bg-base-light);\n    transition: background-color .15s ease-in-out;\n    overflow: auto;\n}\n\n.filter.disabled .expand-icon,\n.filter.disabled .title {\n    opacity: 0.3;\n}\n\n.filter:hover {\n    background-color: var(--bg-elevated-01);\n}\n\n.filter:global(.open) {\n    background-color: var(--bg-elevated-01);\n    --expand-icon-rotation: rotate(90deg);\n}\n</style>\n"],"names":["state","_useModel","props","__props","settings","toRefs","filters","useFilters","filtersOn","computed","s","mounted","ref","onMounted","teleportTarget","usePlBlockPageTitleTeleportTarget","showManager","scrollIsActive","filterManager","observer","parent","_a","watch","newElement","oldElement","onBeforeUnmount","canAddFilter","showAddFilter","canResetToDefaults","isJsonEqual","_b","resetToDefaults","items"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA8BM,UAAAA,IAAQC,iBAEb,GACKC,IAAQC,GAGR,EAAE,UAAAC,EAAA,IAAaC,EAAOH,CAAK,GAE3BI,IAAUC,EAAWH,GAAUJ,CAAK,GAEpCQ,IAAYC,EAAkB,MAAMH,EAAQ,MAAM,KAAK,CAACI,MAAMA,EAAE,UAAU,CAACA,EAAE,OAAO,QAAQ,CAAC,GAE7FC,IAAUC,EAAI,EAAK;AACzB,IAAAC,EAAU,MAAM;AACd,MAAAF,EAAQ,QAAQ;AAAA,IAAA,CACjB;AACK,UAAAG,IAAiBC,EAAkC,kBAAkB,GAErEC,IAAcJ,EAAI,EAAK,GAEvBK,IAAiBL,EAAI,EAAK,GAC1BM,IAAgBN,EAAiB;AACnC,QAAAO;AACJ,IAAAN,EAAU,MAAM;AACH,MAAAM,IAAA,IAAI,eAAe,MAAM;;AAC5B,cAAAC,KAASC,IAAAH,EAAc,UAAd,gBAAAG,EAAqB;AACpC,QAAKD,MACLH,EAAe,QAAQG,EAAO,eAAeA,EAAO,gBAAgBA,EAAO,cAAcA,EAAO;AAAA,MAAA,CACjG,GACGF,EAAc,SAASA,EAAc,MAAM,iBACpCC,EAAA,QAAQD,EAAc,MAAO,aAAa;AAAA,IACrD,CACD,GAEKI,EAAAJ,GAAe,CAACK,GAAYC,MAAe;AAC/C,MAAIA,KAAA,QAAAA,EAAY,iBACLL,EAAA,UAAUK,EAAW,aAAa,GAEzCD,KAAA,QAAAA,EAAY,iBACLJ,EAAA,QAAQI,EAAW,aAAa;AAAA,IAC3C,CACD,GAEDE,EAAgB,MAAM;AACpB,MAAIN,MAAa,UACfA,EAAS,WAAW;AAAA,IACtB,CACD;AAEK,UAAAO,IAAejB,EAAkB,MAAMH,EAAQ,MAAM,KAAK,CAACI,MAAM,CAACA,EAAE,MAAM,CAAC,GAC3EiB,IAAgBf,EAAI,EAAK,GAEzBgB,IAAqBnB,EAAkB,MACpCH,EAAQ,MACZ,KAAK,CAACI;;AAAO,cAACA,EAAE,iBAAiBA,EAAE,UAAYA,EAAE,oBAC5CW,IAAAX,EAAE,WAAF,gBAAAW,EAAU,cAAa,MAAQ,CAACQ,GAAYC,IAAApB,EAAE,WAAF,gBAAAoB,EAAU,OAAOpB,EAAE,aAAa;AAAA,KAAG,CACxF,GACKqB,IAAkB,MAAM;AACpB,MAAAzB,EAAA,MAAM,QAAQ,CAACI,MAAM;AAC3B,QAAIA,EAAE,gBACJA,EAAE,SAAS;AAAA,UACT,OAAOA,EAAE;AAAA,UACT,UAAU;AAAA,UACV,MAAM;AAAA,QACR,IAEAA,EAAE,SAAS;AAAA,MACb,CACD;AAAA,IACH,GAEMsB,IAAQvB,EAAS,MAAMH,EAAQ,MAAM,OAAO,CAACI,MAAMA,EAAE,WAAW,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlTableFiltersV2.vue2.js","sources":["../../../src/components/PlTableFilters/PlTableFiltersV2.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  type PlDataTableFilterState,\n  canonicalizeJson,\n  type PTableColumnId,\n} from '@platforma-sdk/model';\nimport type {\n  PlDataTableFiltersSettings,\n} from './types';\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport {\n  PlBtnGhost,\n  PlSlideModal,\n  PlBtnSecondary,\n  PlMaskIcon16,\n  PlElementList,\n  usePlBlockPageTitleTeleportTarget,\n} from '@milaboratories/uikit';\nimport { useFilters } from './filters-state';\nimport PlTableAddFilterV2 from './PlTableAddFilterV2.vue';\nimport PlTableFilterEntryV2 from './PlTableFilterEntryV2.vue';\nimport { isJsonEqual } from '@milaboratories/helpers';\n\nconst state = defineModel<PlDataTableFilterState[]>({\n  default: [],\n});\nconst props = defineProps<{\n  settings: Readonly<PlDataTableFiltersSettings>;\n}>();\nconst { settings } = toRefs(props);\n\nconst filters = useFilters(settings, state);\n\nconst filtersOn = computed<boolean>(() => filters.value.some((s) => s.filter && !s.filter.disabled));\n\nconst mounted = ref(false);\nonMounted(() => {\n  mounted.value = true;\n});\nconst teleportTarget = usePlBlockPageTitleTeleportTarget('PlTableFiltersV2');\n\nconst showManager = ref(false);\n\nconst scrollIsActive = ref(false);\nconst filterManager = ref<HTMLElement>();\nlet observer: ResizeObserver;\nonMounted(() => {\n  observer = new ResizeObserver(() => {\n    const parent = filterManager.value?.parentElement;\n    if (!parent) return;\n    scrollIsActive.value = parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth;\n  });\n  if (filterManager.value && filterManager.value.parentElement) {\n    observer.observe(filterManager.value!.parentElement);\n  }\n});\n\nwatch(filterManager, (newElement, oldElement) => {\n  if (oldElement?.parentElement) {\n    observer.unobserve(oldElement.parentElement);\n  }\n  if (newElement?.parentElement) {\n    observer.observe(newElement.parentElement);\n  }\n});\n\nonBeforeUnmount(() => {\n  if (observer !== undefined) {\n    observer.disconnect();\n  }\n});\n\nconst canAddFilter = computed<boolean>(() => filters.value.some((s) => !s.filter));\nconst showAddFilter = ref(false);\n\nconst canResetToDefaults = computed<boolean>(() => {\n  return filters.value\n    .some((s) => (!s.defaultFilter && s.filter) || (s.defaultFilter\n      && (s.filter?.disabled === true || !isJsonEqual(s.filter?.value, s.defaultFilter))));\n});\nconst resetToDefaults = () => {\n  filters.value.forEach((s) => {\n    if (s.defaultFilter) {\n      s.filter = {\n        value: s.defaultFilter,\n        disabled: false,\n        open: false,\n      };\n    } else {\n      s.filter = null;\n    }\n  });\n};\n\nconst items = computed(() => filters.value.filter((s) => s.filter !== null));\n</script>\n\n<template>\n  <Teleport v-if=\"mounted && teleportTarget\" :to=\"teleportTarget\">\n    <PlBtnGhost :icon=\"filtersOn ? 'filter-on' : 'filter'\" @click.stop=\"showManager = true\">\n      Filters\n    </PlBtnGhost>\n  </Teleport>\n\n  <PlSlideModal v-model=\"showManager\" :close-on-outside-click=\"false\">\n    <template #title>Manage Filters</template>\n\n    <div ref=\"filterManager\" :class=\"$style['filter-manager']\">\n      <PlElementList\n        v-model:items=\"items\"\n        :on-expand=\"(item) => {\n          if (item.filter) {\n            item.filter.open = !item.filter.open;\n          }\n        }\"\n        :is-expanded=\"(item) => item.filter?.open ?? false\"\n        :on-toggle=\"(item) => {\n          if (item.filter) {\n            item.filter.disabled = !item.filter.disabled;\n          }\n        }\"\n        :is-toggled=\"(item) => item.filter?.disabled ?? false\"\n        :on-remove=\"(item) => {\n          if (item.filter) {\n            item.filter = null;\n          }\n        }\"\n        :get-item-key=\"(item) => canonicalizeJson<PTableColumnId>(item.id)\"\n        disable-dragging\n      >\n        <template #item-title=\"{ item }\">\n          {{ item.label }}\n        </template>\n        <template #item-content=\"{ index }\">\n          <PlTableFilterEntryV2 v-model=\"filters.value[index]\" />\n        </template>\n      </PlElementList>\n\n      <div\n        v-if=\"filters.value.length\"\n        :class=\"$style['add-action-wrapper']\"\n      >\n        <button\n          :disabled=\"!canAddFilter\"\n          :class=\"$style['add-btn']\"\n          @click=\"showAddFilter = true\"\n        >\n          <PlMaskIcon16 name=\"add\" />\n          <div :class=\"$style['add-btn-title']\">Add Filter</div>\n        </button>\n\n        <PlBtnSecondary\n          :disabled=\"!canResetToDefaults\"\n          @click.stop=\"resetToDefaults\"\n        >\n          Reset to defaults\n        </PlBtnSecondary>\n      </div>\n\n      <div v-if=\"!filters.value.length\">No filters applicable</div>\n    </div>\n  </PlSlideModal>\n\n  <PlTableAddFilterV2\n    v-model=\"showAddFilter\"\n    :filters=\"filters.value\"\n    :set-filter=\"(idx, filter) => filters.value[idx] = filter\"\n  />\n</template>\n\n<style lang=\"scss\" module>\n.filter-manager {\n    --expand-icon-rotation: rotate(0deg);\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.add-action-wrapper {\n    position: sticky;\n    bottom: -16px;\n    background-color: var(--bg-elevated-01);\n    transition: all .15s ease-in-out;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.add-btn {\n    height: 40px;\n    background-color: var(--bg-elevated-01);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding-left: 12px;\n    padding-right: 12px;\n    border-radius: 6px;\n    border: 1px dashed var(--border-color-div-grey);\n    line-height: 0;\n    cursor: pointer;\n    text-align: left;\n}\n\n.add-btn:disabled {\n    --icon-color: var(--dis-01);\n    cursor: auto;\n}\n\n.add-btn:not([disabled]):hover {\n    border-radius: 6px;\n    border: 1px dashed var(--border-color-focus, #49CC49);\n    background: rgba(99, 224, 36, 0.12);\n}\n\n.add-btn-title {\n    flex-grow: 1;\n    font-weight: 600;\n}\n\n.expand-icon {\n    transition: all .15s ease-in-out;\n    transform: var(--expand-icon-rotation);\n    line-height: 0;\n    cursor: pointer;\n}\n\n.toggle,\n.delete {\n    line-height: 0;\n    cursor: pointer;\n    display: none;\n}\n\n.toggle .mask-24,\n.delete .mask-24 {\n    --icon-color: var(--ic-02);\n}\n\n.toggle:hover .mask-24 {\n    --icon-color: var(--ic-01);\n}\n\n.delete:hover .mask-24 {\n    --icon-color: var(--ic-01);\n}\n\n.filter:hover .toggle,\n.filter:hover .delete {\n    display: block;\n}\n\n.filter {\n    border-radius: 6px;\n    border: 1px solid var(--border-color-div-grey);\n    background-color: var(--bg-base-light);\n    transition: background-color .15s ease-in-out;\n    overflow: auto;\n}\n\n.filter.disabled .expand-icon,\n.filter.disabled .title {\n    opacity: 0.3;\n}\n\n.filter:hover {\n    background-color: var(--bg-elevated-01);\n}\n\n.filter:global(.open) {\n    background-color: var(--bg-elevated-01);\n    --expand-icon-rotation: rotate(90deg);\n}\n</style>\n"],"names":["state","_useModel","props","__props","settings","toRefs","filters","useFilters","filtersOn","computed","s","mounted","ref","onMounted","teleportTarget","usePlBlockPageTitleTeleportTarget","showManager","scrollIsActive","filterManager","observer","parent","_a","watch","newElement","oldElement","onBeforeUnmount","canAddFilter","showAddFilter","canResetToDefaults","isJsonEqual","_b","resetToDefaults","items"],"mappings":";;;;;;;;;;;;;;;;;;;AA8BA,UAAMA,IAAQC,iBAEb,GACKC,IAAQC,GAGR,EAAE,UAAAC,EAAA,IAAaC,EAAOH,CAAK,GAE3BI,IAAUC,EAAWH,GAAUJ,CAAK,GAEpCQ,IAAYC,EAAkB,MAAMH,EAAQ,MAAM,KAAK,CAACI,MAAMA,EAAE,UAAU,CAACA,EAAE,OAAO,QAAQ,CAAC,GAE7FC,IAAUC,EAAI,EAAK;AACzB,IAAAC,EAAU,MAAM;AACd,MAAAF,EAAQ,QAAQ;AAAA,IAClB,CAAC;AACD,UAAMG,IAAiBC,EAAkC,kBAAkB,GAErEC,IAAcJ,EAAI,EAAK,GAEvBK,IAAiBL,EAAI,EAAK,GAC1BM,IAAgBN,EAAA;AACtB,QAAIO;AACJ,IAAAN,EAAU,MAAM;AACd,MAAAM,IAAW,IAAI,eAAe,MAAM;;AAClC,cAAMC,KAASC,IAAAH,EAAc,UAAd,gBAAAG,EAAqB;AACpC,QAAKD,MACLH,EAAe,QAAQG,EAAO,eAAeA,EAAO,gBAAgBA,EAAO,cAAcA,EAAO;AAAA,MAClG,CAAC,GACGF,EAAc,SAASA,EAAc,MAAM,iBAC7CC,EAAS,QAAQD,EAAc,MAAO,aAAa;AAAA,IAEvD,CAAC,GAEDI,EAAMJ,GAAe,CAACK,GAAYC,MAAe;AAC/C,MAAIA,KAAA,QAAAA,EAAY,iBACdL,EAAS,UAAUK,EAAW,aAAa,GAEzCD,KAAA,QAAAA,EAAY,iBACdJ,EAAS,QAAQI,EAAW,aAAa;AAAA,IAE7C,CAAC,GAEDE,EAAgB,MAAM;AACpB,MAAIN,MAAa,UACfA,EAAS,WAAA;AAAA,IAEb,CAAC;AAED,UAAMO,IAAejB,EAAkB,MAAMH,EAAQ,MAAM,KAAK,CAACI,MAAM,CAACA,EAAE,MAAM,CAAC,GAC3EiB,IAAgBf,EAAI,EAAK,GAEzBgB,IAAqBnB,EAAkB,MACpCH,EAAQ,MACZ,KAAK,CAACI;;AAAO,cAACA,EAAE,iBAAiBA,EAAE,UAAYA,EAAE,oBAC5CW,IAAAX,EAAE,WAAF,gBAAAW,EAAU,cAAa,MAAQ,CAACQ,IAAYC,IAAApB,EAAE,WAAF,gBAAAoB,EAAU,OAAOpB,EAAE,aAAa;AAAA,KAAG,CACxF,GACKqB,IAAkB,MAAM;AAC5B,MAAAzB,EAAQ,MAAM,QAAQ,CAACI,MAAM;AAC3B,QAAIA,EAAE,gBACJA,EAAE,SAAS;AAAA,UACT,OAAOA,EAAE;AAAA,UACT,UAAU;AAAA,UACV,MAAM;AAAA,QAAA,IAGRA,EAAE,SAAS;AAAA,MAEf,CAAC;AAAA,IACH,GAEMsB,IAAQvB,EAAS,MAAMH,EAAQ,MAAM,OAAO,CAACI,MAAMA,EAAE,WAAW,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlTableFilters/filters-state.d.ts

@@ -4,4 +4,3 @@ import { PlDataTableFilterState } from '@platforma-sdk/model';
 export declare function useFilters(settings: Ref<PlDataTableFiltersSettings>, state: Ref<PlDataTableFilterState[]>): Reactive<{
     value: PlDataTableFilterStateInternal[];
 }>;
-//# sourceMappingURL=filters-state.d.ts.map

package/dist/components/PlTableFilters/filters-state.js

@@ -1,53 +1,52 @@
 import { ref as J, reactive as V, watch as h } from "vue";
-import "../../sdk/model/dist/index.js";
-import { isJsonEqual as b } from "../../lib/util/helpers/dist/index.js";
-import { getFilterOptions as g, makeDiscreteOptions as j, isFilterValid as F, isAlphabetic as k, getColumnName as q } from "./filters_logic.js";
-import { getPTableColumnId as x, canonicalizeJson as f } from "../../lib/model/common/dist/index.js";
+import { getPTableColumnId as k, canonicalizeJson as f } from "@platforma-sdk/model";
+import { isJsonEqual as b } from "../../lib/util/helpers/dist/objects.js";
+import { getFilterOptions as g, makeDiscreteOptions as q, isFilterValid as F, isAlphabetic as x, getColumnName as z } from "./filters_logic.js";
 function K(M, m) {
   const w = J(/* @__PURE__ */ new Map()), o = V({
     value: []
   });
   return h(
     () => M.value,
-    ({ columns: d, config: n, cachedState: a }) => {
-      const p = w.value = new Map(
+    ({ columns: d, config: n, cachedState: i }) => {
+      const c = w.value = new Map(
         d.map((e, t) => {
           try {
-            const i = x(e), l = n(e), r = l.options ? g(e).filter((y) => l.options.includes(y.value)) : g(e);
+            const a = k(e), l = n(e), r = l.options ? g(e).filter((y) => l.options.includes(y.value)) : g(e);
             if (r.length === 0) return null;
-            const u = j(e), c = l.default && F(l.default, r, u) ? l.default : null, S = c ? {
-              value: c,
+            const u = q(e), p = l.default && F(l.default, r, u) ? l.default : null, S = p ? {
+              value: p,
               disabled: !1,
               open: !1
             } : null, C = {
-              id: i,
+              id: a,
               spec: e,
-              label: q(e, t),
-              alphabetic: k(e),
+              label: z(e, t),
+              alphabetic: x(e),
               options: r,
               discreteOptions: u,
-              defaultFilter: c,
+              defaultFilter: p,
               filter: S
             };
-            return [f(i), C];
-          } catch (i) {
-            return console.error(`Filter creation for column ${e.id} has failed`, i), null;
+            return [f(a), C];
+          } catch (a) {
+            return console.error(`Filter creation for column ${e.id} has failed`, a), null;
           }
         }).filter((e) => e !== null)
       ), s = new Map(
-        a.filter((e) => p.has(f(e.id))).map((e) => {
+        i.filter((e) => c.has(f(e.id))).map((e) => {
           var l, r;
-          const t = p.get(f(e.id)), i = {
+          const t = c.get(f(e.id)), a = {
             ...t,
             filter: e.filter && F(e.filter.value, t.options, t.discreteOptions) ? {
               ...e.filter,
               open: ((r = (l = o.value.find((u) => b(u.id, e.id))) == null ? void 0 : l.filter) == null ? void 0 : r.open) ?? !1
             } : null
           };
-          return [f(e.id), i];
+          return [f(e.id), a];
         })
       );
-      for (const [e, t] of p)
+      for (const [e, t] of c)
         s.has(e) || s.set(e, t);
       const v = [...s.values().filter((e) => e.filter)], O = [...s.values().filter((e) => !e.filter)];
       v.push(...O.sort((e, t) => e.label.localeCompare(t.label))), o.value = v;
@@ -56,12 +55,12 @@ function K(M, m) {
   ), h(
     () => o.value,
     (d) => {
-      const n = d.map((a) => ({
-        id: a.id,
-        alphabetic: a.alphabetic,
-        filter: a.filter ? {
-          value: a.filter.value,
-          disabled: a.filter.disabled
+      const n = d.map((i) => ({
+        id: i.id,
+        alphabetic: i.alphabetic,
+        filter: i.filter ? {
+          value: i.filter.value,
+          disabled: i.filter.disabled
         } : null
       }));
       n.length > 0 && !b(n, m.value) && (m.value = n);

package/dist/components/PlTableFilters/filters-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters-state.js","sources":["../../../src/components/PlTableFilters/filters-state.ts"],"sourcesContent":["import type {\n  Reactive,\n  Ref } from 'vue';\nimport {\n  reactive,\n  ref,\n  watch,\n} from 'vue';\nimport type {\n  PlDataTableFiltersSettings,\n  PlDataTableFilterStateInternal,\n} from './types';\nimport {\n  canonicalizeJson,\n  getPTableColumnId,\n  type CanonicalizedJson,\n  type PTableColumnId,\n  type PlDataTableFilterState,\n} from '@platforma-sdk/model';\nimport { isJsonEqual } from '@milaboratories/helpers';\nimport {\n  getFilterOptions,\n  makeDiscreteOptions,\n  isFilterValid,\n  getColumnName,\n  isAlphabetic,\n} from './filters_logic';\n\nexport function useFilters(\n  settings: Ref<PlDataTableFiltersSettings>,\n  state: Ref<PlDataTableFilterState[]>,\n): Reactive<{\n    value: PlDataTableFilterStateInternal[];\n  }> {\n// Watcher instead of computed to preserve open state of filters locally\n  const defaultStateMap = ref<Map<CanonicalizedJson<PTableColumnId>, PlDataTableFilterStateInternal>>(new Map());\n  const filters = reactive<{\n    value: PlDataTableFilterStateInternal[];\n  }>({\n    value: [],\n  });\n  watch(\n    () => settings.value,\n    ({ columns, config: configFn, cachedState }) => {\n      // Comptute default states for columns\n      const defaultStateMapValue = defaultStateMap.value = new Map(\n        columns\n          .map((c, i) => {\n            try {\n              const id = getPTableColumnId(c);\n              const config = configFn(c);\n              const options = config.options\n                ? getFilterOptions(c).filter((o) => config.options!.includes(o.value))\n                : getFilterOptions(c);\n              if (options.length === 0) return null;\n              const discreteOptions = makeDiscreteOptions(c);\n              const defaultFilter = config.default && isFilterValid(config.default, options, discreteOptions) ? config.default : null;\n              const filter = defaultFilter\n                ? {\n                    value: defaultFilter,\n                    disabled: false,\n                    open: false,\n                  }\n                : null;\n              const state: PlDataTableFilterStateInternal = {\n                id,\n                spec: c,\n                label: getColumnName(c, i),\n                alphabetic: isAlphabetic(c),\n                options,\n                discreteOptions,\n                defaultFilter,\n                filter,\n              };\n              return [canonicalizeJson<PTableColumnId>(id), state] as const;\n            } catch (err: unknown) {\n              console.error(`Filter creation for column ${c.id} has failed`, err);\n              return null;\n            }\n          })\n          .filter((e) => e !== null),\n      );\n\n      // Go through cached state, filter out states for not present columns, update state to match valid options\n      const stateMap = new Map<CanonicalizedJson<PTableColumnId>, PlDataTableFilterStateInternal>(\n        cachedState\n          .filter((s) => defaultStateMapValue.has(canonicalizeJson<PTableColumnId>(s.id)))\n          .map((s) => {\n            const defaultState = defaultStateMapValue.get(canonicalizeJson<PTableColumnId>(s.id))!;\n            const state = {\n              ...defaultState,\n              filter: s.filter && isFilterValid(s.filter.value, defaultState.options, defaultState.discreteOptions)\n                ? {\n                    ...s.filter,\n                    open: filters.value.find((f) => isJsonEqual(f.id, s.id))?.filter?.open ?? false,\n                  }\n                : null,\n            } satisfies PlDataTableFilterStateInternal;\n            return [canonicalizeJson<PTableColumnId>(s.id), state] as const;\n          }),\n      );\n\n      // Set default states for columns not present in cached state\n      for (const [idKey, state] of defaultStateMapValue) {\n        if (!stateMap.has(idKey)) {\n          stateMap.set(idKey, state);\n        }\n      }\n\n      // States with not null filters should go first, in order they were added, then follow null filters in alphabetic order\n      const states = [...stateMap.values().filter((s) => s.filter)];\n      const hiddenFilters = [...stateMap.values().filter((s) => !s.filter)];\n      states.push(...hiddenFilters.sort((a, b) => a.label.localeCompare(b.label)));\n      filters.value = states;\n    },\n    { immediate: true },\n  );\n\n  // Persist state on change\n  watch(\n    () => filters.value,\n    (filters) => {\n      const cachedState = filters.map((f) => ({\n        id: f.id,\n        alphabetic: f.alphabetic,\n        filter: f.filter\n          ? {\n              value: f.filter.value,\n              disabled: f.filter.disabled,\n            }\n          : null,\n      } satisfies PlDataTableFilterState));\n      if (cachedState.length > 0 && !isJsonEqual(cachedState, state.value)) {\n        state.value = cachedState;\n      }\n    },\n    {\n      immediate: true,\n      deep: true,\n    },\n  );\n\n  return filters;\n}\n"],"names":["useFilters","settings","state","defaultStateMap","ref","filters","reactive","watch","columns","configFn","cachedState","defaultStateMapValue","c","i","id","getPTableColumnId","config","options","getFilterOptions","o","discreteOptions","makeDiscreteOptions","defaultFilter","isFilterValid","filter","getColumnName","isAlphabetic","canonicalizeJson","err","stateMap","s","defaultState","_b","_a","f","isJsonEqual","idKey","states","hiddenFilters","a","b"],"mappings":"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"}
+{"version":3,"file":"filters-state.js","sources":["../../../src/components/PlTableFilters/filters-state.ts"],"sourcesContent":["import type {\n  Reactive,\n  Ref } from 'vue';\nimport {\n  reactive,\n  ref,\n  watch,\n} from 'vue';\nimport type {\n  PlDataTableFiltersSettings,\n  PlDataTableFilterStateInternal,\n} from './types';\nimport {\n  canonicalizeJson,\n  getPTableColumnId,\n  type CanonicalizedJson,\n  type PTableColumnId,\n  type PlDataTableFilterState,\n} from '@platforma-sdk/model';\nimport { isJsonEqual } from '@milaboratories/helpers';\nimport {\n  getFilterOptions,\n  makeDiscreteOptions,\n  isFilterValid,\n  getColumnName,\n  isAlphabetic,\n} from './filters_logic';\n\nexport function useFilters(\n  settings: Ref<PlDataTableFiltersSettings>,\n  state: Ref<PlDataTableFilterState[]>,\n): Reactive<{\n    value: PlDataTableFilterStateInternal[];\n  }> {\n// Watcher instead of computed to preserve open state of filters locally\n  const defaultStateMap = ref<Map<CanonicalizedJson<PTableColumnId>, PlDataTableFilterStateInternal>>(new Map());\n  const filters = reactive<{\n    value: PlDataTableFilterStateInternal[];\n  }>({\n    value: [],\n  });\n  watch(\n    () => settings.value,\n    ({ columns, config: configFn, cachedState }) => {\n      // Comptute default states for columns\n      const defaultStateMapValue = defaultStateMap.value = new Map(\n        columns\n          .map((c, i) => {\n            try {\n              const id = getPTableColumnId(c);\n              const config = configFn(c);\n              const options = config.options\n                ? getFilterOptions(c).filter((o) => config.options!.includes(o.value))\n                : getFilterOptions(c);\n              if (options.length === 0) return null;\n              const discreteOptions = makeDiscreteOptions(c);\n              const defaultFilter = config.default && isFilterValid(config.default, options, discreteOptions) ? config.default : null;\n              const filter = defaultFilter\n                ? {\n                    value: defaultFilter,\n                    disabled: false,\n                    open: false,\n                  }\n                : null;\n              const state: PlDataTableFilterStateInternal = {\n                id,\n                spec: c,\n                label: getColumnName(c, i),\n                alphabetic: isAlphabetic(c),\n                options,\n                discreteOptions,\n                defaultFilter,\n                filter,\n              };\n              return [canonicalizeJson<PTableColumnId>(id), state] as const;\n            } catch (err: unknown) {\n              console.error(`Filter creation for column ${c.id} has failed`, err);\n              return null;\n            }\n          })\n          .filter((e) => e !== null),\n      );\n\n      // Go through cached state, filter out states for not present columns, update state to match valid options\n      const stateMap = new Map<CanonicalizedJson<PTableColumnId>, PlDataTableFilterStateInternal>(\n        cachedState\n          .filter((s) => defaultStateMapValue.has(canonicalizeJson<PTableColumnId>(s.id)))\n          .map((s) => {\n            const defaultState = defaultStateMapValue.get(canonicalizeJson<PTableColumnId>(s.id))!;\n            const state = {\n              ...defaultState,\n              filter: s.filter && isFilterValid(s.filter.value, defaultState.options, defaultState.discreteOptions)\n                ? {\n                    ...s.filter,\n                    open: filters.value.find((f) => isJsonEqual(f.id, s.id))?.filter?.open ?? false,\n                  }\n                : null,\n            } satisfies PlDataTableFilterStateInternal;\n            return [canonicalizeJson<PTableColumnId>(s.id), state] as const;\n          }),\n      );\n\n      // Set default states for columns not present in cached state\n      for (const [idKey, state] of defaultStateMapValue) {\n        if (!stateMap.has(idKey)) {\n          stateMap.set(idKey, state);\n        }\n      }\n\n      // States with not null filters should go first, in order they were added, then follow null filters in alphabetic order\n      const states = [...stateMap.values().filter((s) => s.filter)];\n      const hiddenFilters = [...stateMap.values().filter((s) => !s.filter)];\n      states.push(...hiddenFilters.sort((a, b) => a.label.localeCompare(b.label)));\n      filters.value = states;\n    },\n    { immediate: true },\n  );\n\n  // Persist state on change\n  watch(\n    () => filters.value,\n    (filters) => {\n      const cachedState = filters.map((f) => ({\n        id: f.id,\n        alphabetic: f.alphabetic,\n        filter: f.filter\n          ? {\n              value: f.filter.value,\n              disabled: f.filter.disabled,\n            }\n          : null,\n      } satisfies PlDataTableFilterState));\n      if (cachedState.length > 0 && !isJsonEqual(cachedState, state.value)) {\n        state.value = cachedState;\n      }\n    },\n    {\n      immediate: true,\n      deep: true,\n    },\n  );\n\n  return filters;\n}\n"],"names":["useFilters","settings","state","defaultStateMap","ref","filters","reactive","watch","columns","configFn","cachedState","defaultStateMapValue","c","i","id","getPTableColumnId","config","options","getFilterOptions","o","discreteOptions","makeDiscreteOptions","defaultFilter","isFilterValid","filter","getColumnName","isAlphabetic","canonicalizeJson","err","stateMap","s","defaultState","_b","_a","f","isJsonEqual","idKey","states","hiddenFilters","a","b"],"mappings":"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"}

package/dist/components/PlTableFilters/filters_logic.d.ts

@@ -21,4 +21,3 @@ export declare function makeWildcardOptions(column: PTableColumnSpec, reference:
 export declare function makeDiscreteOptions(column: PTableColumnSpec): ListOption<number | string>[];
 export declare function isAlphabetic(column: PTableColumnSpec): boolean;
 export declare function makePredicate(alphabetic: boolean, filter: PlTableFilter): SingleValuePredicateV2;
-//# sourceMappingURL=filters_logic.d.ts.map

package/dist/components/PlTableFilters/filters_logic.js

@@ -1,7 +1,6 @@
-import { getRawPlatformaInstance as d } from "../../sdk/model/dist/index.js";
-import h from "../../_virtual/index.js";
-import { readAnnotationJson as p, readDomain as i, readAnnotation as u, parseJson as m, Annotation as a, Domain as c } from "../../lib/model/common/dist/index.js";
-function w(e, r, n) {
+import { readAnnotationJson as p, Annotation as a, readDomain as i, Domain as c, readAnnotation as u, parseJson as d, getRawPlatformaInstance as h } from "@platforma-sdk/model";
+import _ from "../../_virtual/index.js";
+function T(e, r, n) {
   if (!r.some((s) => s.value === e.type)) return !1;
   if (l(e.type) && n.length > 0) {
     const s = g(e);
@@ -9,7 +8,7 @@ function w(e, r, n) {
   }
   return !0;
 }
-function _(e) {
+function m(e) {
   switch (e) {
     case "isNotNA":
       return "Is not NA";
@@ -66,16 +65,16 @@ const b = [
   "string_doesNotMatch",
   "string_containsFuzzyMatch"
 ];
-function A(e) {
-  return ((e.type === "column" ? e.spec.valueType : e.spec.type) === "String" ? f : b).filter((t) => e.type === "axis" ? t !== "isNotNA" && t !== "isNA" : !0).map((t) => ({ value: t, text: _(t) }));
+function w(e) {
+  return ((e.type === "column" ? e.spec.valueType : e.spec.type) === "String" ? f : b).filter((t) => e.type === "axis" ? t !== "isNotNA" && t !== "isNA" : !0).map((t) => ({ value: t, text: m(t) }));
 }
 const N = [
   "number_equals",
   "number_notEquals",
   "string_equals",
   "string_notEquals"
-], l = (e) => N.includes(e), v = (e) => l(e.type);
-function M(e, r) {
+], l = (e) => N.includes(e), A = (e) => l(e.type);
+function v(e, r) {
   var n;
   return ((n = u(e.spec, a.Label)) == null ? void 0 : n.trim()) ?? "Unlabeled " + e.type + " " + r.toString();
 }
@@ -145,11 +144,11 @@ function E(e, r) {
       throw Error(`unsupported filter type: ${e}`);
   }
 }
-function F(e, r, n) {
+function M(e, r, n) {
   let t = g(e);
   return l(r) && n !== void 0 && n.length > 0 && !n.some((s) => s.value === t) && (t = n[0].value), E(r, t);
 }
-function O(e, r) {
+function F(e, r) {
   const n = Number(r);
   if (!Number.isFinite(n)) throw Error("Model value is not a number.");
   const t = e.type === "column" ? e.spec.valueType : e.spec.type;
@@ -162,7 +161,7 @@ function O(e, r) {
     throw Error("Model value is too high.");
   return n;
 }
-function z(e, r) {
+function O(e, r) {
   const n = i(e.spec, c.Alphabet) ?? u(e.spec, a.Alphabet);
   if (n === "nucleotide" && !/^[AaTtGgCcNn]+$/.test(r)) throw Error("Model value is not a nucleotide.");
   if (n === "aminoacid" && !/^[AaCcDdEeFfGgHhIiKkLlMmNnPpQqRrSsTtVvWwYyXx*_]+$/.test(r)) throw Error("Model value is not an aminoacid.");
@@ -175,7 +174,7 @@ function C(e) {
     throw r instanceof SyntaxError ? Error("Model value is not a regexp.") : r;
   }
 }
-function x(e, r) {
+function z(e, r) {
   const n = i(e.spec, c.Alphabet) ?? u(e.spec, a.Alphabet);
   return n === "nucleotide" ? [{
     label: "N",
@@ -188,11 +187,11 @@ function x(e, r) {
     value: s
   }));
 }
-function I(e) {
+function x(e) {
   const r = u(e.spec, a.DiscreteValues);
   if (!r) return [];
   try {
-    return m(r).map((t) => ({
+    return d(r).map((t) => ({
       label: `${t}`,
       value: t
     }));
@@ -200,10 +199,10 @@ function I(e) {
     return console.error(`Column ${e.id} has invalid '${a.DiscreteValues}' annotation: '${r}'`, n), [];
   }
 }
-function S(e) {
-  return h.gt(d().sdkInfo.sdkVersion, "1.14.0") && (e.type === "column" ? e.spec.valueType : e.spec.type) === "String" && (i(e.spec, c.Alphabet) ?? u(e.spec, a.Alphabet)) !== void 0;
+function I(e) {
+  return _.gt(h().sdkInfo.sdkVersion, "1.14.0") && (e.type === "column" ? e.spec.valueType : e.spec.type) === "String" && (i(e.spec, c.Alphabet) ?? u(e.spec, a.Alphabet)) !== void 0;
 }
-function D(e, r) {
+function S(e, r) {
   const n = r.type;
   switch (n) {
     case "isNotNA":
@@ -316,24 +315,24 @@ function D(e, r) {
   }
 }
 export {
-  F as changeFilter,
+  M as changeFilter,
   N as filterTypesDiscrete,
   b as filterTypesNumber,
   f as filterTypesString,
-  M as getColumnName,
+  v as getColumnName,
   E as getFilterDefault,
-  _ as getFilterLabel,
-  A as getFilterOptions,
+  m as getFilterLabel,
+  w as getFilterOptions,
   g as getFilterReference,
-  S as isAlphabetic,
-  v as isFilterDiscrete,
+  I as isAlphabetic,
+  A as isFilterDiscrete,
   l as isFilterDiscreteType,
-  w as isFilterValid,
-  I as makeDiscreteOptions,
-  D as makePredicate,
-  x as makeWildcardOptions,
-  O as parseNumber,
+  T as isFilterValid,
+  x as makeDiscreteOptions,
+  S as makePredicate,
+  z as makeWildcardOptions,
+  F as parseNumber,
   C as parseRegex,
-  z as parseString
+  O as parseString
 };
 //# sourceMappingURL=filters_logic.js.map