@milaboratories/graph-maker 1.1.177 → 1.1.179

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

@@ -1 +1 @@
-{"version":3,"file":"DendroTable.vue.js","sources":["../../src/components/DendroTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Column, GridApi, IRowNode } from '@ag-grid-community/core';\nimport {\n  DendroUIState,\n  PValue\n} from '@milaboratories/pf-plots';\nimport { AgGridTheme } from '@platforma-sdk/ui-vue';\nimport { AgGridVue } from 'ag-grid-vue3';\nimport type { HierarchyNode } from 'd3-hierarchy';\nimport { computed, ref, shallowRef, watch } from 'vue';\nimport { useStore } from '../store.ts';\n\nconst emit = defineEmits(['row-select']);\n\nconst store = useStore();\n\nconst props = defineProps<{\n  chartData: Record<string, unknown> | null,\n}>();\n\nconst width = ref(100); // table width\nconst gridApi = shallowRef();\n\nconst columnKeys = computed(() => [\n  'id',\n  ...(store.value.reactive.optionsState as DendroUIState).components.tableContent.selectorStates.map((s) => s.selectedSource)\n]);\n\nconst rowKeys = ref<string[]>([]);\nwatch(() => props.chartData?.hierarchy as HierarchyNode<{ data: Record<string, PValue> }>, (hierarchy) => {\n  if (hierarchy) {\n    const newLeaves = hierarchy.leaves().map(l => (l.data as unknown as {\n      rawData: Record<string, PValue>\n    })['rawData']['id']) as string[];\n    if (newLeaves.length !== rowKeys.value.length || newLeaves.some((l, idx) => l !== rowKeys.value[idx])) {\n      rowKeys.value = newLeaves;\n    }\n  } else {\n    rowKeys.value = [];\n  }\n}, { immediate: true });\n\nconst rowData = ref<Record<string, PValue>[]>([]);\nconst colDefs = ref<{ field: string, sortable: false, resizable: false }[]>([]);\n\nwatch([\n  () => rowKeys.value,\n  () => columnKeys.value,\n  () => store.value.commonHelpersData.dendroTableData.value\n], ([rowKeysValue, columnKeysValue, tableData]) => {\n  if (tableData === null) {\n    colDefs.value = [];\n    rowData.value = [];\n    return;\n  }\n  if (columnKeysValue.some((key) => !tableData[key])) {\n    return;\n  }\n  const rowsByKey = tableData['id'].data.reduce((resultByColumnId: Record<string, Record<string, PValue>>, nodeId, idx) => {\n    const id = nodeId as string;\n    if (resultByColumnId[id]) {\n      console.warn(`More than 1 value for node id ${id} in dendro table`);\n    }\n    resultByColumnId[id] = columnKeysValue.reduce((rowDataByColumns: Record<string, PValue>, columnKey) => {\n      const columnData = tableData[columnKey];\n      if (columnData) {\n        rowDataByColumns[columnKey] = columnData.data[idx];\n      }\n      return rowDataByColumns;\n    }, {});\n    return resultByColumnId;\n  }, {});\n\n  colDefs.value = columnKeysValue.map((key) => ({\n    headerName: tableData[key].label,\n    field: key,\n    sortable: false,\n    resizable: false\n  }));\n  rowData.value = rowKeysValue.map((key) => rowsByKey[key] ?? null);\n  updateContainerWidth();\n}, { immediate: true });\n\n\nconst leafSize = computed(() => {\n  const height = (props.chartData?.chartSizes as { treeHeight: number })?.treeHeight;\n  return rowKeys.value.length ? height / rowKeys.value.length : 0;\n});\n\nconst onGridReady = (params: { api: GridApi }) => {\n  gridApi.value = params.api;\n  updateContainerWidth();\n};\n\nfunction updateContainerWidth() {\n  if (gridApi.value && !gridApi.value.isDestroyed()) {\n    gridApi.value.autoSizeAllColumns();\n    const columns = gridApi.value.getColumns();\n    if (columns) {\n      width.value = columns.reduce((res: number, column: Column) => {\n        return res + column.getActualWidth();\n      }, 2);\n    }\n  }\n}\n\nwatch(() => store.value.reactive.dendroSelectedNodeId, (id) => {\n  if (gridApi.value) {\n    if (id === null) {\n      gridApi.value.deselectAll();\n    } else {\n      gridApi.value.forEachNode((node: IRowNode) => {\n        if (node.data.id === id) {\n          node.setSelected(true, true);\n        }\n      });\n    }\n  }\n});\n\n</script>\n\n<template>\n  <div class=\"dendro-table\" :style=\"{width: width + 'px'}\">\n    <AgGridVue\n      :theme=\"AgGridTheme\"\n      :gridApi=\"gridApi\"\n      :onGridReady=\"onGridReady\"\n      :defaultColDef=\"{ suppressHeaderMenuButton: true }\"\n      :rowData=\"rowData\"\n      :columnDefs=\"colDefs\"\n      :rowHeight=\"leafSize\"\n      :autoSizeStrategy=\"{type: 'fitCellContents'}\"\n      @gridColumnsChanged=\"() => {\n        updateContainerWidth();\n      }\"\n      domLayout=\"autoHeight\"\n    />\n  </div>\n</template>\n"],"names":["store","useStore","props","__props","width","ref","gridApi","shallowRef","columnKeys","computed","s","rowKeys","watch","_a","hierarchy","newLeaves","l","idx","rowData","colDefs","rowKeysValue","columnKeysValue","tableData","key","rowsByKey","resultByColumnId","nodeId","id","rowDataByColumns","columnKey","columnData","updateContainerWidth","leafSize","height","_b","onGridReady","params","columns","res","column","node","_createElementBlock","_createVNode","_unref","AgGridVue","AgGridTheme","_cache"],"mappings":"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"}
+{"version":3,"file":"DendroTable.vue.js","sources":["../../src/components/DendroTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Column, GridApi, IRowNode } from '@ag-grid-community/core';\nimport type {\n  DendroUIState,\n  PValue,\n} from '@milaboratories/pf-plots';\nimport { AgGridTheme } from '@platforma-sdk/ui-vue';\nimport { AgGridVue } from 'ag-grid-vue3';\nimport type { HierarchyNode } from 'd3-hierarchy';\nimport { computed, ref, shallowRef, watch } from 'vue';\nimport { useStore } from '../store.ts';\n\nconst _emit = defineEmits(['row-select']);\n\nconst store = useStore();\n\nconst props = defineProps<{\n  chartData: Record<string, unknown> | null;\n}>();\n\nconst width = ref(100); // table width\nconst gridApi = shallowRef();\n\nconst columnKeys = computed(() => [\n  'id',\n  ...(store.value.reactive.optionsState as DendroUIState).components.tableContent.selectorStates.map((s) => s.selectedSource),\n]);\n\nconst rowKeys = ref<string[]>([]);\nwatch(() => props.chartData?.hierarchy as HierarchyNode<{ data: Record<string, PValue> }>, (hierarchy) => {\n  if (hierarchy) {\n    const newLeaves = hierarchy.leaves().map((l) => (l.data as unknown as {\n      rawData: Record<string, PValue>;\n    })['rawData']['id']) as string[];\n    if (newLeaves.length !== rowKeys.value.length || newLeaves.some((l, idx) => l !== rowKeys.value[idx])) {\n      rowKeys.value = newLeaves;\n    }\n  } else {\n    rowKeys.value = [];\n  }\n}, { immediate: true });\n\nconst rowData = ref<Record<string, PValue>[]>([]);\nconst colDefs = ref<{ field: string; sortable: false; resizable: false }[]>([]);\n\nwatch([\n  () => rowKeys.value,\n  () => columnKeys.value,\n  () => store.value.commonHelpersData.dendroTableData.value,\n], ([rowKeysValue, columnKeysValue, tableData]) => {\n  if (tableData === null) {\n    colDefs.value = [];\n    rowData.value = [];\n    return;\n  }\n  if (columnKeysValue.some((key) => !tableData[key])) {\n    return;\n  }\n  const rowsByKey = tableData['id'].data.reduce((resultByColumnId: Record<string, Record<string, PValue>>, nodeId, idx) => {\n    const id = nodeId as string;\n    if (resultByColumnId[id]) {\n      console.warn(`More than 1 value for node id ${id} in dendro table`);\n    }\n    resultByColumnId[id] = columnKeysValue.reduce((rowDataByColumns: Record<string, PValue>, columnKey) => {\n      const columnData = tableData[columnKey];\n      if (columnData) {\n        rowDataByColumns[columnKey] = columnData.data[idx];\n      }\n      return rowDataByColumns;\n    }, {});\n    return resultByColumnId;\n  }, {});\n\n  colDefs.value = columnKeysValue.map((key) => ({\n    headerName: tableData[key].label,\n    field: key,\n    sortable: false,\n    resizable: false,\n  }));\n  rowData.value = rowKeysValue.map((key) => rowsByKey[key] ?? null);\n  updateContainerWidth();\n}, { immediate: true });\n\nconst leafSize = computed(() => {\n  const height = (props.chartData?.chartSizes as { treeHeight: number })?.treeHeight;\n  return rowKeys.value.length ? height / rowKeys.value.length : 0;\n});\n\nconst onGridReady = (params: { api: GridApi }) => {\n  gridApi.value = params.api;\n  updateContainerWidth();\n};\n\nfunction updateContainerWidth() {\n  if (gridApi.value && !gridApi.value.isDestroyed()) {\n    gridApi.value.autoSizeAllColumns();\n    const columns = gridApi.value.getColumns();\n    if (columns) {\n      width.value = columns.reduce((res: number, column: Column) => {\n        return res + column.getActualWidth();\n      }, 2);\n    }\n  }\n}\n\nwatch(() => store.value.reactive.dendroSelectedNodeId, (id) => {\n  if (gridApi.value) {\n    if (id === null) {\n      gridApi.value.deselectAll();\n    } else {\n      gridApi.value.forEachNode((node: IRowNode) => {\n        if (node.data.id === id) {\n          node.setSelected(true, true);\n        }\n      });\n    }\n  }\n});\n\n</script>\n\n<template>\n  <div class=\"dendro-table\" :style=\"{width: width + 'px'}\">\n    <AgGridVue\n      :theme=\"AgGridTheme\"\n      :gridApi=\"gridApi\"\n      :onGridReady=\"onGridReady\"\n      :defaultColDef=\"{ suppressHeaderMenuButton: true }\"\n      :rowData=\"rowData\"\n      :columnDefs=\"colDefs\"\n      :rowHeight=\"leafSize\"\n      :autoSizeStrategy=\"{type: 'fitCellContents'}\"\n      domLayout=\"autoHeight\"\n      @gridColumnsChanged=\"() => {\n        updateContainerWidth();\n      }\"\n    />\n  </div>\n</template>\n"],"names":["store","useStore","props","__props","width","ref","gridApi","shallowRef","columnKeys","computed","s","rowKeys","watch","_a","hierarchy","newLeaves","l","idx","rowData","colDefs","rowKeysValue","columnKeysValue","tableData","key","rowsByKey","resultByColumnId","nodeId","id","rowDataByColumns","columnKey","columnData","updateContainerWidth","leafSize","height","_b","onGridReady","params","columns","res","column","node","_createElementBlock","_createVNode","_unref","AgGridVue","AgGridTheme","_cache"],"mappings":";;;;;;;;;;;AAcA,UAAMA,IAAQC,EAAA,GAERC,IAAQC,GAIRC,IAAQC,EAAI,GAAG,GACfC,IAAUC,EAAA,GAEVC,IAAaC,EAAS,MAAM;AAAA,MAChC;AAAA,MACA,GAAIT,EAAM,MAAM,SAAS,aAA+B,WAAW,aAAa,eAAe,IAAI,CAACU,MAAMA,EAAE,cAAc;AAAA,IAAA,CAC3H,GAEKC,IAAUN,EAAc,EAAE;AAChC,IAAAO,EAAM,MAAA;;AAAM,cAAAC,IAAAX,EAAM,cAAN,gBAAAW,EAAiB;AAAA,OAA8D,CAACC,MAAc;AACxG,UAAIA,GAAW;AACb,cAAMC,IAAYD,EAAU,OAAA,EAAS,IAAI,CAACE,MAAOA,EAAE,KAEhD,QAAW,EAAK;AACnB,SAAID,EAAU,WAAWJ,EAAQ,MAAM,UAAUI,EAAU,KAAK,CAACC,GAAGC,MAAQD,MAAML,EAAQ,MAAMM,CAAG,CAAC,OAClGN,EAAQ,QAAQI;AAAA,MAEpB;AACE,QAAAJ,EAAQ,QAAQ,CAAA;AAAA,IAEpB,GAAG,EAAE,WAAW,IAAM;AAEtB,UAAMO,IAAUb,EAA8B,EAAE,GAC1Cc,IAAUd,EAA4D,EAAE;AAE9E,IAAAO,EAAM;AAAA,MACJ,MAAMD,EAAQ;AAAA,MACd,MAAMH,EAAW;AAAA,MACjB,MAAMR,EAAM,MAAM,kBAAkB,gBAAgB;AAAA,IAAA,GACnD,CAAC,CAACoB,GAAcC,GAAiBC,CAAS,MAAM;AACjD,UAAIA,MAAc,MAAM;AACtB,QAAAH,EAAQ,QAAQ,CAAA,GAChBD,EAAQ,QAAQ,CAAA;AAChB;AAAA,MACF;AACA,UAAIG,EAAgB,KAAK,CAACE,MAAQ,CAACD,EAAUC,CAAG,CAAC;AAC/C;AAEF,YAAMC,IAAYF,EAAU,GAAM,KAAK,OAAO,CAACG,GAA0DC,GAAQT,MAAQ;AACvH,cAAMU,IAAKD;AACX,eAAID,EAAiBE,CAAE,KACrB,QAAQ,KAAK,iCAAiCA,CAAE,kBAAkB,GAEpEF,EAAiBE,CAAE,IAAIN,EAAgB,OAAO,CAACO,GAA0CC,MAAc;AACrG,gBAAMC,IAAaR,EAAUO,CAAS;AACtC,iBAAIC,MACFF,EAAiBC,CAAS,IAAIC,EAAW,KAAKb,CAAG,IAE5CW;AAAA,QACT,GAAG,CAAA,CAAE,GACEH;AAAA,MACT,GAAG,CAAA,CAAE;AAEL,MAAAN,EAAQ,QAAQE,EAAgB,IAAI,CAACE,OAAS;AAAA,QAC5C,YAAYD,EAAUC,CAAG,EAAE;AAAA,QAC3B,OAAOA;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,MAAA,EACX,GACFL,EAAQ,QAAQE,EAAa,IAAI,CAACG,MAAQC,EAAUD,CAAG,KAAK,IAAI,GAChEQ,EAAA;AAAA,IACF,GAAG,EAAE,WAAW,IAAM;AAEtB,UAAMC,IAAWvB,EAAS,MAAM;;AAC9B,YAAMwB,KAAUC,KAAArB,IAAAX,EAAM,cAAN,gBAAAW,EAAiB,eAAjB,gBAAAqB,EAAwD;AACxE,aAAOvB,EAAQ,MAAM,SAASsB,IAAStB,EAAQ,MAAM,SAAS;AAAA,IAChE,CAAC,GAEKwB,IAAc,CAACC,MAA6B;AAChD,MAAA9B,EAAQ,QAAQ8B,EAAO,KACvBL,EAAA;AAAA,IACF;AAEA,aAASA,IAAuB;AAC9B,UAAIzB,EAAQ,SAAS,CAACA,EAAQ,MAAM,eAAe;AACjD,QAAAA,EAAQ,MAAM,mBAAA;AACd,cAAM+B,IAAU/B,EAAQ,MAAM,WAAA;AAC9B,QAAI+B,MACFjC,EAAM,QAAQiC,EAAQ,OAAO,CAACC,GAAaC,MAClCD,IAAMC,EAAO,eAAA,GACnB,CAAC;AAAA,MAER;AAAA,IACF;AAEA,WAAA3B,EAAM,MAAMZ,EAAM,MAAM,SAAS,sBAAsB,CAAC2B,MAAO;AAC7D,MAAIrB,EAAQ,UACNqB,MAAO,OACTrB,EAAQ,MAAM,YAAA,IAEdA,EAAQ,MAAM,YAAY,CAACkC,MAAmB;AAC5C,QAAIA,EAAK,KAAK,OAAOb,KACnBa,EAAK,YAAY,IAAM,EAAI;AAAA,MAE/B,CAAC;AAAA,IAGP,CAAC,mBAKCC,EAeM,OAAA;AAAA,MAfD,OAAM;AAAA,MAAgB,kBAAerC,EAAA,QAAK,MAAA;AAAA,IAAA;MAC7CsC,EAaEC,EAAAC,CAAA,GAAA;AAAA,QAZC,OAAOD,EAAAE,CAAA;AAAA,QACP,SAASvC,EAAA;AAAA,QACT,aAAA6B;AAAA,QACA,eAAe,EAAA,0BAAA,GAAA;AAAA,QACf,SAASjB,EAAA;AAAA,QACT,YAAYC,EAAA;AAAA,QACZ,WAAWa,EAAA;AAAA,QACX,kBAAkB,EAAA,MAAA,kBAAA;AAAA,QACnB,WAAU;AAAA,QACT,sBAAkBc,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,MAAA;AAAkB,UAAAf,EAAA;AAAA;;;;;"}

package/dist/components/DendroTooltip.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as B, ref as H, computed as n, createElementBlock as i, openBlock as l, normalizeStyle as y, createElementVNode as c, createVNode as f, createCommentVNode as C, unref as v, Fragment as O, renderList as N, normalizeClass as D, toDisplayString as p, withCtx as I, createTextVNode as w } from "vue";
-import { useClickOutside as z, PlMaskIcon24 as P, PlMaskIcon16 as V, PlBtnSecondary as W } from "@platforma-sdk/ui-vue";
+import { defineComponent as B, ref as H, computed as n, createElementBlock as i, openBlock as l, normalizeStyle as y, createElementVNode as c, createVNode as f, createCommentVNode as b, unref as v, Fragment as O, renderList as N, normalizeClass as D, toDisplayString as p, withCtx as I, createTextVNode as z } from "vue";
+import { useClickOutside as P, PlMaskIcon24 as V, PlMaskIcon16 as w, PlBtnSecondary as W } from "@platforma-sdk/ui-vue";
 import { useStore as $ } from "../store.js";
 const K = { class: "graph-info-tooltip-title" }, L = ["title"], M = {
   key: 1,
@@ -11,7 +11,7 @@ const K = { class: "graph-info-tooltip-title" }, L = ["title"], M = {
   key: 0,
   "data-theme": "dark",
   class: "graph-info-tooltip-button"
-}, A = 48, G = 62.5, J = 26, X = 16, b = 24, Y = 20, ot = /* @__PURE__ */ B({
+}, A = 48, G = 62.5, J = 26, X = 16, C = 24, Y = 20, ot = /* @__PURE__ */ B({
   __name: "DendroTooltip",
   props: {
     info: {},
@@ -21,7 +21,7 @@ const K = { class: "graph-info-tooltip-title" }, L = ["title"], M = {
   emits: ["close", "tooltip-btn-click"],
   setup(u, { emit: x }) {
     const s = u, m = $(), d = x, g = H();
-    z([g], () => d("close"));
+    P([g], () => d("close"));
     const T = n(() => {
       const o = (a) => m.value.reactive.optionsState.components[a].selectorStates.map((r) => r.selectedSource), e = ["tableContent", "labels", "nodeColor", "nodeSize", "nodeShape", "lineColor"], t = ["id"];
       return e.forEach((a) => {
@@ -47,9 +47,9 @@ const K = { class: "graph-info-tooltip-title" }, L = ["title"], M = {
       }) : [];
     }), _ = n(() => S.value.reduce((o, e) => o + (e.isSequence ? G : J), 0) + X * 2 + (s.tooltipBtn ? A : 0)), F = n(() => ({
       left: s.info.x + Y + "px",
-      top: s.info.y + b + "px"
+      top: s.info.y + C + "px"
     })), R = n(() => {
-      const o = s.containerRef.scrollHeight, e = _.value / 2, t = s.info.y + b;
+      const o = s.containerRef.scrollHeight, e = _.value / 2, t = s.info.y + C;
       return t < e ? -t : o - e < t ? -(_.value - (o - t)) : -e;
     });
     function q(o) {
@@ -57,24 +57,25 @@ const K = { class: "graph-info-tooltip-title" }, L = ["title"], M = {
       (e = window == null ? void 0 : window.navigator) == null || e.clipboard.writeText(o);
     }
     return (o, e) => (l(), i("div", {
-      class: "graph-info-tooltip__container",
       ref: "",
+      class: "graph-info-tooltip__container",
       style: y(F.value)
     }, [
       e[3] || (e[3] = c("div", { class: "graph-info-tooltip__tail" }, null, -1)),
       c("div", {
-        class: "graph-info-tooltip",
         ref_key: "rootRef",
         ref: g,
+        class: "graph-info-tooltip",
         style: y({ transform: `translate(0,${R.value}px)` }),
         onClick: e[2] || (e[2] = (t) => t.stopPropagation())
       }, [
-        f(v(P), {
+        f(v(V), {
           class: "graph-info-tooltip-close",
           name: "close",
           onClick: e[0] || (e[0] = (t) => d("close"))
         }),
         (l(!0), i(O, null, N(S.value, (t) => (l(), i("div", {
+          key: t.label,
           class: D(["graph-info-tooltip-row", { "graph-info-tooltip-row__sequence": t.isSequence }])
         }, [
           c("div", K, p(t.label + ":"), 1),
@@ -84,18 +85,18 @@ const K = { class: "graph-info-tooltip-title" }, L = ["title"], M = {
               title: String(t.value)
             }, p(t.value), 9, U),
             t.isSequence ? (l(), i("div", Q, [
-              f(v(V), {
+              f(v(w), {
                 class: "graph-info-tooltip-clipboard",
                 name: "clipboard",
                 onClick: () => q(String(t.value))
               }, null, 8, ["onClick"])
-            ])) : C("", !0)
+            ])) : b("", !0)
           ])) : (l(), i("div", {
             key: 0,
             class: "graph-info-tooltip-value",
             title: String(t.value)
           }, p(t.value), 9, L))
-        ], 2))), 256)),
+        ], 2))), 128)),
         u.tooltipBtn ? (l(), i("div", j, [
           f(v(W), {
             icon: "arrow-right",
@@ -103,11 +104,11 @@ const K = { class: "graph-info-tooltip-title" }, L = ["title"], M = {
             onClick: e[1] || (e[1] = () => d("tooltip-btn-click", h.value))
           }, {
             default: I(() => [
-              w(p(u.tooltipBtn), 1)
+              z(p(u.tooltipBtn), 1)
             ]),
             _: 1
           })
-        ])) : C("", !0)
+        ])) : b("", !0)
       ], 4)
     ], 4));
   }

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

@@ -1 +1 @@
-{"version":3,"file":"DendroTooltip.vue.js","sources":["../../src/components/DendroTooltip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { DendroUIState } from '@milaboratories/pf-plots';\nimport { PlBtnSecondary, PlMaskIcon16, PlMaskIcon24, useClickOutside } from '@platforma-sdk/ui-vue';\nimport { computed, ref } from 'vue';\nimport { useStore } from '../store';\nimport { DendroNodeInfo } from '../types';\n\nconst props = defineProps<{\n  info: DendroNodeInfo,\n  tooltipBtn?: string,\n  containerRef: Element\n}>();\nconst store = useStore();\n\nconst $emit = defineEmits(['close', 'tooltip-btn-click']);\n\nconst rootRef = ref();\nuseClickOutside([rootRef], () => $emit('close'));\n\nconst columnKeys = computed(() => {\n  const getColumnKeysFromInput = (inputName: keyof DendroUIState['components']) => {\n    return (store.value.reactive.optionsState as DendroUIState).components[inputName].selectorStates.map((s) => s.selectedSource);\n  };\n  const inputs: (keyof DendroUIState['components'])[] = ['tableContent', 'labels', 'nodeColor', 'nodeSize', 'nodeShape', 'lineColor'];\n  const keys = ['id'];\n  inputs.forEach(inputName => {\n    const newKeys = getColumnKeysFromInput(inputName);\n    newKeys.forEach(key => {\n      if (!keys.includes(key)) {\n        keys.push(key);\n      }\n    });\n  });\n  return keys;\n});\n\nconst firstRowFromNode = computed(() => props.info.info[0]);\nconst id = computed(() => firstRowFromNode.value?.id);\nconst infoList = computed(() => {\n  const tableData = store.value.commonHelpersData.dendroTableData.value;\n  if (!tableData) {\n    return [];\n  }\n  const rowIdx = tableData['id'].data.findIndex(v => String(v) === String(id.value));\n  if (rowIdx !== -1) {\n    return columnKeys.value.map((columnKey) => ({\n      label: tableData[columnKey].label,\n      value: tableData[columnKey].data[rowIdx],\n      isSequence: tableData[columnKey].spec?.annotations?.['pl7.app/type'] === 'sequence'\n    }));\n  }\n  return [];\n});\n\nconst BTN_H = 48;\nconst SEQ_ROW_H = 62.5;\nconst ROW_H = 26;\nconst OFFSET = 16;\nconst height = computed(() => {\n  return infoList.value.reduce((sum, row) => sum + (row.isSequence ? SEQ_ROW_H : ROW_H), 0) + OFFSET * 2 + (props.tooltipBtn ? BTN_H : 0);\n});\n\nconst OUTER_OFFSET_H = 24;\nconst OUTER_OFFSET_W = 20;\n\nconst position = computed(() => {\n  return {\n    left: props.info.x + OUTER_OFFSET_W + 'px',\n    top: props.info.y + OUTER_OFFSET_H + 'px'\n  };\n});\n\nconst verticalShift = computed(() => {\n  const parentHeight = props.containerRef.scrollHeight;\n  const halfHeight = height.value / 2;\n  const y = props.info.y + OUTER_OFFSET_H;\n  if (y < halfHeight) {\n    return -y;\n  }\n  if (parentHeight - halfHeight < y) {\n    return -(height.value - (parentHeight - y));\n  }\n  return -halfHeight;\n});\n\nfunction copyToClipboard(text: string) {\n  window?.navigator?.clipboard.writeText(text);\n}\n\n</script>\n\n<template>\n  <div class=\"graph-info-tooltip__container\" ref=\"\" :style=\"position\">\n    <div class=\"graph-info-tooltip__tail\" />\n    <div class=\"graph-info-tooltip\" ref=\"rootRef\" :style=\"{transform: `translate(0,${verticalShift}px)`}\"\n         @click=\"(e) => e.stopPropagation()\">\n      <PlMaskIcon24 class=\"graph-info-tooltip-close\" name=\"close\" @click=\"$emit('close')\" />\n      <div v-for=\"row in infoList\" class=\"graph-info-tooltip-row\"\n           :class=\"{'graph-info-tooltip-row__sequence': row.isSequence}\">\n        <div class=\"graph-info-tooltip-title\">{{ row.label + ':' }}</div>\n        <div v-if=\"!row.isSequence\" class=\"graph-info-tooltip-value\" :title=\"String(row.value)\">\n          {{ row.value }}\n        </div>\n        <div v-else class=\"graph-info-tooltip-sequence-row\">\n          <div class=\"graph-info-tooltip-value\" :title=\"String(row.value)\">\n            {{ row.value }}\n          </div>\n          <div v-if=\"row.isSequence\" class=\"graph-info-tooltip-icon\">\n            <PlMaskIcon16\n              class=\"graph-info-tooltip-clipboard\"\n              name=\"clipboard\"\n              @click=\"() => copyToClipboard(String(row.value))\"\n            />\n          </div>\n        </div>\n      </div>\n      <div v-if=\"tooltipBtn\" data-theme=\"dark\" class=\"graph-info-tooltip-button\">\n        <PlBtnSecondary\n          icon=\"arrow-right\"\n          size=\"small\"\n          @click=\"() => $emit('tooltip-btn-click', id)\"\n        >{{ tooltipBtn }}\n        </PlBtnSecondary>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["BTN_H","SEQ_ROW_H","ROW_H","OFFSET","OUTER_OFFSET_H","OUTER_OFFSET_W","props","__props","store","useStore","$emit","__emit","rootRef","ref","useClickOutside","columnKeys","computed","getColumnKeysFromInput","inputName","s","inputs","keys","key","firstRowFromNode","id","_a","infoList","tableData","rowIdx","v","columnKey","_b","height","sum","row","position","verticalShift","parentHeight","halfHeight","y","copyToClipboard","text","_createElementBlock","_createElementVNode","_cache","e","_createVNode","_unref","PlMaskIcon24","_Fragment","_renderList","_normalizeClass","_hoisted_1","_toDisplayString","_openBlock","_hoisted_3","_hoisted_4","_hoisted_5","PlMaskIcon16","_hoisted_2","_hoisted_6","PlBtnSecondary"],"mappings":"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"}
+{"version":3,"file":"DendroTooltip.vue.js","sources":["../../src/components/DendroTooltip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { DendroUIState } from '@milaboratories/pf-plots';\nimport { PlBtnSecondary, PlMaskIcon16, PlMaskIcon24, useClickOutside } from '@platforma-sdk/ui-vue';\nimport { computed, ref } from 'vue';\nimport { useStore } from '../store';\nimport type { DendroNodeInfo } from '../types';\n\nconst props = defineProps<{\n  info: DendroNodeInfo;\n  tooltipBtn?: string;\n  containerRef: Element;\n}>();\nconst store = useStore();\n\nconst $emit = defineEmits(['close', 'tooltip-btn-click']);\n\nconst rootRef = ref();\nuseClickOutside([rootRef], () => $emit('close'));\n\nconst columnKeys = computed(() => {\n  const getColumnKeysFromInput = (inputName: keyof DendroUIState['components']) => {\n    return (store.value.reactive.optionsState as DendroUIState).components[inputName].selectorStates.map((s) => s.selectedSource);\n  };\n  const inputs: (keyof DendroUIState['components'])[] = ['tableContent', 'labels', 'nodeColor', 'nodeSize', 'nodeShape', 'lineColor'];\n  const keys = ['id'];\n  inputs.forEach((inputName) => {\n    const newKeys = getColumnKeysFromInput(inputName);\n    newKeys.forEach((key) => {\n      if (!keys.includes(key)) {\n        keys.push(key);\n      }\n    });\n  });\n  return keys;\n});\n\nconst firstRowFromNode = computed(() => props.info.info[0]);\nconst id = computed(() => firstRowFromNode.value?.id);\nconst infoList = computed(() => {\n  const tableData = store.value.commonHelpersData.dendroTableData.value;\n  if (!tableData) {\n    return [];\n  }\n  const rowIdx = tableData['id'].data.findIndex((v) => String(v) === String(id.value));\n  if (rowIdx !== -1) {\n    return columnKeys.value.map((columnKey) => ({\n      label: tableData[columnKey].label,\n      value: tableData[columnKey].data[rowIdx],\n      isSequence: tableData[columnKey].spec?.annotations?.['pl7.app/type'] === 'sequence',\n    }));\n  }\n  return [];\n});\n\nconst BTN_H = 48;\nconst SEQ_ROW_H = 62.5;\nconst ROW_H = 26;\nconst OFFSET = 16;\nconst height = computed(() => {\n  return infoList.value.reduce((sum, row) => sum + (row.isSequence ? SEQ_ROW_H : ROW_H), 0) + OFFSET * 2 + (props.tooltipBtn ? BTN_H : 0);\n});\n\nconst OUTER_OFFSET_H = 24;\nconst OUTER_OFFSET_W = 20;\n\nconst position = computed(() => {\n  return {\n    left: props.info.x + OUTER_OFFSET_W + 'px',\n    top: props.info.y + OUTER_OFFSET_H + 'px',\n  };\n});\n\nconst verticalShift = computed(() => {\n  const parentHeight = props.containerRef.scrollHeight;\n  const halfHeight = height.value / 2;\n  const y = props.info.y + OUTER_OFFSET_H;\n  if (y < halfHeight) {\n    return -y;\n  }\n  if (parentHeight - halfHeight < y) {\n    return -(height.value - (parentHeight - y));\n  }\n  return -halfHeight;\n});\n\nfunction copyToClipboard(text: string) {\n  window?.navigator?.clipboard.writeText(text);\n}\n\n</script>\n\n<template>\n  <div ref=\"\" class=\"graph-info-tooltip__container\" :style=\"position\">\n    <div class=\"graph-info-tooltip__tail\" />\n    <div\n      ref=\"rootRef\" class=\"graph-info-tooltip\" :style=\"{transform: `translate(0,${verticalShift}px)`}\"\n      @click=\"(e) => e.stopPropagation()\"\n    >\n      <PlMaskIcon24 class=\"graph-info-tooltip-close\" name=\"close\" @click=\"$emit('close')\" />\n      <div\n        v-for=\"row in infoList\"\n        :key=\"row.label\"\n        class=\"graph-info-tooltip-row\"\n        :class=\"{'graph-info-tooltip-row__sequence': row.isSequence}\"\n      >\n        <div class=\"graph-info-tooltip-title\">{{ row.label + ':' }}</div>\n        <div v-if=\"!row.isSequence\" class=\"graph-info-tooltip-value\" :title=\"String(row.value)\">\n          {{ row.value }}\n        </div>\n        <div v-else class=\"graph-info-tooltip-sequence-row\">\n          <div class=\"graph-info-tooltip-value\" :title=\"String(row.value)\">\n            {{ row.value }}\n          </div>\n          <div v-if=\"row.isSequence\" class=\"graph-info-tooltip-icon\">\n            <PlMaskIcon16\n              class=\"graph-info-tooltip-clipboard\"\n              name=\"clipboard\"\n              @click=\"() => copyToClipboard(String(row.value))\"\n            />\n          </div>\n        </div>\n      </div>\n      <div v-if=\"tooltipBtn\" data-theme=\"dark\" class=\"graph-info-tooltip-button\">\n        <PlBtnSecondary\n          icon=\"arrow-right\"\n          size=\"small\"\n          @click=\"() => $emit('tooltip-btn-click', id)\"\n        >\n          {{ tooltipBtn }}\n        </PlBtnSecondary>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["BTN_H","SEQ_ROW_H","ROW_H","OFFSET","OUTER_OFFSET_H","OUTER_OFFSET_W","props","__props","store","useStore","$emit","__emit","rootRef","ref","useClickOutside","columnKeys","computed","getColumnKeysFromInput","inputName","s","inputs","keys","key","firstRowFromNode","id","_a","infoList","tableData","rowIdx","v","columnKey","_b","height","sum","row","position","verticalShift","parentHeight","halfHeight","y","copyToClipboard","text","_createElementBlock","_createElementVNode","_cache","e","_createVNode","_unref","PlMaskIcon24","_Fragment","_renderList","_normalizeClass","_hoisted_1","_toDisplayString","_openBlock","_hoisted_3","_hoisted_4","_hoisted_5","PlMaskIcon16","_hoisted_2","_hoisted_6","PlBtnSecondary"],"mappings":"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"}

package/dist/components/DragAndDrop/DnDBasketChip.vue.js

@@ -53,9 +53,9 @@ const C = {
           }, m(r.value), 9, V)) : a("", !0)
         ]),
         n("div", {
-          innerHTML: o(_),
           class: "dnd-basket-chip__icon-close",
-          onClick: k
+          onClick: k,
+          innerHTML: o(_)
         }, null, 8, x)
       ], 2)
     ], 512));

package/dist/components/DragAndDrop/DnDBasketChip.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DnDBasketChip.vue.js","sources":["../../../src/components/DragAndDrop/DnDBasketChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { PlIcon16 } from '@platforma-sdk/ui-vue';\nimport { computed, ref } from 'vue';\nimport { ChipInfo } from './types.ts';\nimport CloseChipIcon from '../../assets/drag-and-drop/img/chip-close.svg?raw';\n\nconst props = defineProps<{\n  error: boolean;\n  info: ChipInfo;\n  sortable?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: 'close-chip', item: ChipInfo['id']): void;\n}>();\n\nconst chipRoot = ref<HTMLElement>();\n\nconst dimensionsTitle = computed(() =>\n  props.info.uniqueValues.join('/')\n);\n\nfunction closeChip() {\n  emit('close-chip', props.info['id']);\n}\n\n</script>\n<template>\n  <div ref=\"chipRoot\" class=\"dnd-basket-chip__group\">\n    <div :class=\"{ error, sortable }\" class=\"dnd-basket-chip\">\n      <div class=\"dnd-basket-chip__icon\" :class=\"{error}\">\n        <PlIcon16 v-if=\"error\" name=\"warning\" :class=\"{error}\" />\n        <PlIcon16 v-else :name=\"info.isSubsetFilter ? 'cell-type-subset' : info.type === 'String' ? 'cell-type-txt' : 'cell-type-num'\"/>\n      </div>\n      <div v-if=\"sortable\" class=\"dnd-basket-chip__handler\"></div>\n      <PlIcon16 name=\"drag-dots\" />\n      <div class=\"dnd-basket-chip__title-wrapper\">\n        <div class=\"dnd-basket-chip__title\" :title=\"info.title\">\n          {{ info.title }}\n        </div>\n        <div\n          v-if=\"info.nonHomogenous\"\n          class=\"dnd-basket-chip__sub-title\"\n          :title=\"dimensionsTitle\"\n        >\n          {{ dimensionsTitle }}\n        </div>\n      </div>\n      <div\n        v-html=\"CloseChipIcon\"\n        class=\"dnd-basket-chip__icon-close\"\n        @click=\"closeChip\"\n      />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","chipRoot","ref","dimensionsTitle","computed","closeChip","_createElementBlock","_createElementVNode","_normalizeClass","_createBlock","_unref","PlIcon16","_openBlock","_hoisted_1","_createVNode","_hoisted_2","_toDisplayString","_hoisted_3","_hoisted_4","CloseChipIcon"],"mappings":";;;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAMRC,IAAOC,GAIPC,IAAWC,EAAA,GAEXC,IAAkBC;AAAA,MAAS,MAC/BP,EAAM,KAAK,aAAa,KAAK,GAAG;AAAA,IAAA;AAGlC,aAASQ,IAAY;AACnB,MAAAN,EAAK,cAAcF,EAAM,KAAK,EAAK;AAAA,IACrC;2BAIES,EA0BM,OAAA;AAAA,eA1BG;AAAA,MAAJ,KAAIL;AAAA,MAAW,OAAM;AAAA,IAAA;MACxBM,EAwBM,OAAA;AAAA,QAxBA,OAAKC,EAAA,CAAA,EAAA,OAAIV,EAAA,OAAK,UAAEA,EAAA,SAAA,GAAkB,iBAAiB,CAAA;AAAA,MAAA;QACvDS,EAGM,OAAA;AAAA,UAHD,OAAKC,EAAA,CAAC,yBAAuB,EAAA,OAAUV,EAAA,OAAK,CAAA;AAAA,QAAA;UAC/BA,EAAA,cAAhBW,EAAyDC,EAAAC,CAAA,GAAA;AAAA;YAAlC,MAAK;AAAA,YAAW,kBAAQb,EAAA,OAAK;AAAA,UAAA,gCACpDW,EAAgIC,EAAAC,CAAA,GAAA;AAAA;YAA9G,MAAMb,EAAA,KAAK,iBAAc,qBAAwBA,EAAA,KAAK,SAAI,WAAA,kBAAA;AAAA,UAAA;;QAEnEA,EAAA,YAAXc,EAAA,GAAAN,EAA4D,OAA5DO,CAA4D;QAC5DC,EAA6BJ,EAAAC,CAAA,GAAA,EAAnB,MAAK,aAAW;AAAA,QAC1BJ,EAWM,OAXNQ,GAWM;AAAA,UAVJR,EAEM,OAAA;AAAA,YAFD,OAAM;AAAA,YAA0B,OAAOT,EAAA,KAAK;AAAA,UAAA,GAC5CkB,EAAAlB,EAAA,KAAK,KAAK,GAAA,GAAAmB,CAAA;AAAA,UAGPnB,EAAA,KAAK,sBADbQ,EAMM,OAAA;AAAA;YAJJ,OAAM;AAAA,YACL,OAAOH,EAAA;AAAA,UAAA,KAELA,EAAA,KAAe,GAAA,GAAAe,CAAA;;QAGtBX,EAIE,OAAA;AAAA,UAHA,WAAQG,EAAAS,CAAA;AAAA,UACR,OAAM;AAAA,UACL,SAAOd;AAAA,QAAA;;;;;"}
+{"version":3,"file":"DnDBasketChip.vue.js","sources":["../../../src/components/DragAndDrop/DnDBasketChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { PlIcon16 } from '@platforma-sdk/ui-vue';\nimport { computed, ref } from 'vue';\nimport type { ChipInfo } from './types.ts';\nimport CloseChipIcon from '../../assets/drag-and-drop/img/chip-close.svg?raw';\n\nconst props = defineProps<{\n  error: boolean;\n  info: ChipInfo;\n  sortable?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: 'close-chip', item: ChipInfo['id']): void;\n}>();\n\nconst chipRoot = ref<HTMLElement>();\n\nconst dimensionsTitle = computed(() =>\n  props.info.uniqueValues.join('/'),\n);\n\nfunction closeChip() {\n  emit('close-chip', props.info['id']);\n}\n\n</script>\n<template>\n  <div ref=\"chipRoot\" class=\"dnd-basket-chip__group\">\n    <div :class=\"{ error, sortable }\" class=\"dnd-basket-chip\">\n      <div class=\"dnd-basket-chip__icon\" :class=\"{error}\">\n        <PlIcon16 v-if=\"error\" name=\"warning\" :class=\"{error}\" />\n        <PlIcon16 v-else :name=\"info.isSubsetFilter ? 'cell-type-subset' : info.type === 'String' ? 'cell-type-txt' : 'cell-type-num'\"/>\n      </div>\n      <div v-if=\"sortable\" class=\"dnd-basket-chip__handler\"/>\n      <PlIcon16 name=\"drag-dots\" />\n      <div class=\"dnd-basket-chip__title-wrapper\">\n        <div class=\"dnd-basket-chip__title\" :title=\"info.title\">\n          {{ info.title }}\n        </div>\n        <div\n          v-if=\"info.nonHomogenous\"\n          class=\"dnd-basket-chip__sub-title\"\n          :title=\"dimensionsTitle\"\n        >\n          {{ dimensionsTitle }}\n        </div>\n      </div>\n      <div\n        class=\"dnd-basket-chip__icon-close\"\n        @click=\"closeChip\"\n        v-html=\"CloseChipIcon\"\n      />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","chipRoot","ref","dimensionsTitle","computed","closeChip","_createElementBlock","_createElementVNode","_normalizeClass","_createBlock","_unref","PlIcon16","_openBlock","_hoisted_1","_createVNode","_hoisted_2","_toDisplayString","_hoisted_3","_hoisted_4","CloseChipIcon"],"mappings":";;;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAMRC,IAAOC,GAIPC,IAAWC,EAAA,GAEXC,IAAkBC;AAAA,MAAS,MAC/BP,EAAM,KAAK,aAAa,KAAK,GAAG;AAAA,IAAA;AAGlC,aAASQ,IAAY;AACnB,MAAAN,EAAK,cAAcF,EAAM,KAAK,EAAK;AAAA,IACrC;2BAIES,EA0BM,OAAA;AAAA,eA1BG;AAAA,MAAJ,KAAIL;AAAA,MAAW,OAAM;AAAA,IAAA;MACxBM,EAwBM,OAAA;AAAA,QAxBA,OAAKC,EAAA,CAAA,EAAA,OAAIV,EAAA,OAAK,UAAEA,EAAA,SAAA,GAAkB,iBAAiB,CAAA;AAAA,MAAA;QACvDS,EAGM,OAAA;AAAA,UAHD,OAAKC,EAAA,CAAC,yBAAuB,EAAA,OAAUV,EAAA,OAAK,CAAA;AAAA,QAAA;UAC/BA,EAAA,cAAhBW,EAAyDC,EAAAC,CAAA,GAAA;AAAA;YAAlC,MAAK;AAAA,YAAW,kBAAQb,EAAA,OAAK;AAAA,UAAA,gCACpDW,EAAgIC,EAAAC,CAAA,GAAA;AAAA;YAA9G,MAAMb,EAAA,KAAK,iBAAc,qBAAwBA,EAAA,KAAK,SAAI,WAAA,kBAAA;AAAA,UAAA;;QAEnEA,EAAA,YAAXc,EAAA,GAAAN,EAAuD,OAAvDO,CAAuD;QACvDC,EAA6BJ,EAAAC,CAAA,GAAA,EAAnB,MAAK,aAAW;AAAA,QAC1BJ,EAWM,OAXNQ,GAWM;AAAA,UAVJR,EAEM,OAAA;AAAA,YAFD,OAAM;AAAA,YAA0B,OAAOT,EAAA,KAAK;AAAA,UAAA,GAC5CkB,EAAAlB,EAAA,KAAK,KAAK,GAAA,GAAAmB,CAAA;AAAA,UAGPnB,EAAA,KAAK,sBADbQ,EAMM,OAAA;AAAA;YAJJ,OAAM;AAAA,YACL,OAAOH,EAAA;AAAA,UAAA,KAELA,EAAA,KAAe,GAAA,GAAAe,CAAA;;QAGtBX,EAIE,OAAA;AAAA,UAHA,OAAM;AAAA,UACL,SAAOF;AAAA,UACR,WAAQK,EAAAS,CAAA;AAAA,QAAA;;;;;"}

package/dist/components/DragAndDrop/DnDRangeChip.vue.d.ts

@@ -4,15 +4,24 @@ type __VLS_Props = {
     error: boolean;
 };
 type __VLS_PublicProps = {
-    'filter': any;
+    'filter': number[] | {
+        min: number | undefined;
+        max: number | undefined;
+    };
 } & __VLS_Props;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:filter": (value: any) => any;
+    "update:filter": (value: number[] | {
+        min: number | undefined;
+        max: number | undefined;
+    }) => any;
 } & {
     "close-chip": (id: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onClose-chip"?: ((id: string) => any) | undefined;
-    "onUpdate:filter"?: ((value: any) => any) | undefined;
+    "onUpdate:filter"?: ((value: number[] | {
+        min: number | undefined;
+        max: number | undefined;
+    }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     chipRoot: HTMLDivElement;
 }, HTMLDivElement>;

package/dist/components/DragAndDrop/DnDRangeChip.vue.js

@@ -41,26 +41,26 @@ const k = {
             e("div", E, V(o.info.title), 1)
           ], 8, w),
           e("div", {
-            innerHTML: n(C),
             class: "dnd-double-chip__icon-close",
-            onClick: t[0] || (t[0] = (i) => s.$emit("close-chip", p.info.id))
+            onClick: t[0] || (t[0] = (i) => s.$emit("close-chip", p.info.id)),
+            innerHTML: n(C)
           }, null, 8, I)
         ]),
         e("div", y, [
           e("div", D, [
             r(n(m), {
-              label: "Min",
               modelValue: l.min,
               "onUpdate:modelValue": t[1] || (t[1] = (i) => l.min = i),
+              label: "Min",
               updateOnEnterOrClickOutside: !0,
               useIncrementButtons: !1
             }, null, 8, ["modelValue"])
           ]),
           e("div", N, [
             r(n(m), {
-              label: "Max",
               modelValue: l.max,
               "onUpdate:modelValue": t[2] || (t[2] = (i) => l.max = i),
+              label: "Max",
               updateOnEnterOrClickOutside: !0,
               useIncrementButtons: !1
             }, null, 8, ["modelValue"])

package/dist/components/DragAndDrop/DnDRangeChip.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DnDRangeChip.vue.js","sources":["../../../src/components/DragAndDrop/DnDRangeChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ChipInfo } from './types.ts';\nimport CloseIcon from '../../assets/drag-and-drop/img/chip-close.svg?raw';\nimport { reactive, watch } from 'vue';\nimport { PlIcon16, PlNumberField } from '@platforma-sdk/ui-vue';\n\nconst props = defineProps<{\n  info: ChipInfo;\n  error: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: 'close-chip', id: ChipInfo['id']): void;\n}>();\n\nconst filterModel = defineModel('filter', { required: true });\n\nconst range = reactive({\n  min: (filterModel.value as number[])?.[0] as number | undefined,\n  max: (filterModel.value as number[])?.[1] as number | undefined\n});\n\nwatch(() => range, (rangeValue) => {\n    filterModel.value = rangeValue;\n  }, { deep: true }\n);\n\n</script>\n\n<template>\n  <div ref=\"chipRoot\" class=\"dnd-double-chip__group\">\n  <div :class=\"{ error }\" class=\"dnd-double-chip\">\n    <div class=\"dnd-double-chip__top\">\n      <div class=\"dnd-double-chip__icon\">\n        <PlIcon16 name=\"cell-type-num\" />\n      </div>\n      <div class=\"dnd-double-chip__title-wrapper\" :title=\"info.title\">\n        <div class=\"dnd-double-chip__title\">\n          {{ info.title }}\n        </div>\n      </div>\n      <div\n        v-html=\"CloseIcon\"\n        class=\"dnd-double-chip__icon-close\"\n        @click=\"$emit('close-chip', props.info.id)\"\n      />\n    </div>\n    <div class=\"dnd-double-chip__bottom-range\">\n      <div class=\"dnd-double-chip__bottom-range-row\">\n        <PlNumberField\n          label=\"Min\"\n          v-model=\"range.min\"\n          :updateOnEnterOrClickOutside=\"true\"\n          :useIncrementButtons=\"false\"\n        />\n      </div>\n      <div class=\"dnd-double-chip__bottom-range-row\">\n        <PlNumberField\n          label=\"Max\"\n          v-model=\"range.max\"\n          :updateOnEnterOrClickOutside=\"true\"\n          :useIncrementButtons=\"false\"\n        />\n      </div>\n    </div>\n  </div>\n  </div>\n</template>\n"],"names":["props","__props","filterModel","_useModel","range","reactive","_a","_b","watch","rangeValue","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_createVNode","_unref","PlIcon16","_hoisted_5","_toDisplayString","CloseIcon","$emit","_hoisted_7","_hoisted_8","PlNumberField","_cache","$event","_hoisted_9"],"mappings":";;;;;;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GASRC,IAAcC,EAAWF,GAAC,QAA4B,GAEtDG,IAAQC,EAAS;AAAA,MACrB,MAAMC,IAAAJ,EAAY,UAAZ,gBAAAI,EAAiC;AAAA,MACvC,MAAMC,IAAAL,EAAY,UAAZ,gBAAAK,EAAiC;AAAA,IAAC,CACzC;AAED,WAAAC;AAAA,MAAM,MAAMJ;AAAA,MAAO,CAACK,MAAe;AAC/B,QAAAP,EAAY,QAAQO;AAAA,MACtB;AAAA,MAAG,EAAE,MAAM,GAAA;AAAA,IAAK,cAMhBC,EAAA,GAAAC,EAoCM,OApCNC,GAoCM;AAAA,MAnCNC,EAkCM,OAAA;AAAA,QAlCA,OAAKC,EAAA,CAAA,EAAA,OAAIb,EAAA,MAAA,GAAe,iBAAiB,CAAA;AAAA,MAAA;QAC7CY,EAcM,OAdNE,GAcM;AAAA,UAbJF,EAEM,OAFNG,GAEM;AAAA,YADJC,EAAiCC,EAAAC,CAAA,GAAA,EAAvB,MAAK,iBAAe;AAAA,UAAA;UAEhCN,EAIM,OAAA;AAAA,YAJD,OAAM;AAAA,YAAkC,OAAOZ,EAAA,KAAK;AAAA,UAAA;YACvDY,EAEM,OAFNO,GAEMC,EADDpB,EAAA,KAAK,KAAK,GAAA,CAAA;AAAA,UAAA;UAGjBY,EAIE,OAAA;AAAA,YAHA,WAAQK,EAAAI,CAAA;AAAA,YACR,OAAM;AAAA,YACL,gCAAOC,EAAAA,MAAK,cAAevB,EAAM,KAAK,EAAE;AAAA,UAAA;;QAG7Ca,EAiBM,OAjBNW,GAiBM;AAAA,UAhBJX,EAOM,OAPNY,GAOM;AAAA,YANJR,EAKEC,EAAAQ,CAAA,GAAA;AAAA,cAJA,OAAM;AAAA,cACG,YAAAtB,EAAM;AAAA,cAAN,uBAAAuB,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAxB,EAAM,MAAGwB;AAAA,cACjB,6BAA6B;AAAA,cAC7B,qBAAqB;AAAA,YAAA;;UAG1Bf,EAOM,OAPNgB,GAOM;AAAA,YANJZ,EAKEC,EAAAQ,CAAA,GAAA;AAAA,cAJA,OAAM;AAAA,cACG,YAAAtB,EAAM;AAAA,cAAN,uBAAAuB,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAxB,EAAM,MAAGwB;AAAA,cACjB,6BAA6B;AAAA,cAC7B,qBAAqB;AAAA,YAAA;;;;;;;"}
+{"version":3,"file":"DnDRangeChip.vue.js","sources":["../../../src/components/DragAndDrop/DnDRangeChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChipInfo } from './types.ts';\nimport CloseIcon from '../../assets/drag-and-drop/img/chip-close.svg?raw';\nimport { reactive, watch } from 'vue';\nimport { PlIcon16, PlNumberField } from '@platforma-sdk/ui-vue';\n\nconst props = defineProps<{\n  info: ChipInfo;\n  error: boolean;\n}>();\n\nconst _emit = defineEmits<{\n  (e: 'close-chip', id: ChipInfo['id']): void;\n}>();\n\nconst filterModel = defineModel<number[] | { min: number | undefined; max: number | undefined }>('filter', { required: true });\n\nconst range = reactive({\n  min: (filterModel.value as number[])?.[0] as number | undefined,\n  max: (filterModel.value as number[])?.[1] as number | undefined,\n});\n\nwatch(() => range, (rangeValue) => {\n  filterModel.value = rangeValue;\n}, { deep: true },\n);\n\n</script>\n\n<template>\n  <div ref=\"chipRoot\" class=\"dnd-double-chip__group\">\n    <div :class=\"{ error }\" class=\"dnd-double-chip\">\n      <div class=\"dnd-double-chip__top\">\n        <div class=\"dnd-double-chip__icon\">\n          <PlIcon16 name=\"cell-type-num\" />\n        </div>\n        <div class=\"dnd-double-chip__title-wrapper\" :title=\"info.title\">\n          <div class=\"dnd-double-chip__title\">\n            {{ info.title }}\n          </div>\n        </div>\n        <div\n          class=\"dnd-double-chip__icon-close\"\n          @click=\"$emit('close-chip', props.info.id)\"\n          v-html=\"CloseIcon\"\n        />\n      </div>\n      <div class=\"dnd-double-chip__bottom-range\">\n        <div class=\"dnd-double-chip__bottom-range-row\">\n          <PlNumberField\n            v-model=\"range.min\"\n            label=\"Min\"\n            :updateOnEnterOrClickOutside=\"true\"\n            :useIncrementButtons=\"false\"\n          />\n        </div>\n        <div class=\"dnd-double-chip__bottom-range-row\">\n          <PlNumberField\n            v-model=\"range.max\"\n            label=\"Max\"\n            :updateOnEnterOrClickOutside=\"true\"\n            :useIncrementButtons=\"false\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","filterModel","_useModel","range","reactive","_a","_b","watch","rangeValue","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_createVNode","_unref","PlIcon16","_hoisted_5","_toDisplayString","$emit","CloseIcon","_hoisted_7","_hoisted_8","PlNumberField","_cache","$event","_hoisted_9"],"mappings":";;;;;;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GASRC,IAAcC,EAA4EF,GAAC,QAA4B,GAEvHG,IAAQC,EAAS;AAAA,MACrB,MAAMC,IAAAJ,EAAY,UAAZ,gBAAAI,EAAiC;AAAA,MACvC,MAAMC,IAAAL,EAAY,UAAZ,gBAAAK,EAAiC;AAAA,IAAC,CACzC;AAED,WAAAC;AAAA,MAAM,MAAMJ;AAAA,MAAO,CAACK,MAAe;AACjC,QAAAP,EAAY,QAAQO;AAAA,MACtB;AAAA,MAAG,EAAE,MAAM,GAAA;AAAA,IAAK,cAMdC,EAAA,GAAAC,EAoCM,OApCNC,GAoCM;AAAA,MAnCJC,EAkCM,OAAA;AAAA,QAlCA,OAAKC,EAAA,CAAA,EAAA,OAAIb,EAAA,MAAA,GAAe,iBAAiB,CAAA;AAAA,MAAA;QAC7CY,EAcM,OAdNE,GAcM;AAAA,UAbJF,EAEM,OAFNG,GAEM;AAAA,YADJC,EAAiCC,EAAAC,CAAA,GAAA,EAAvB,MAAK,iBAAe;AAAA,UAAA;UAEhCN,EAIM,OAAA;AAAA,YAJD,OAAM;AAAA,YAAkC,OAAOZ,EAAA,KAAK;AAAA,UAAA;YACvDY,EAEM,OAFNO,GAEMC,EADDpB,EAAA,KAAK,KAAK,GAAA,CAAA;AAAA,UAAA;UAGjBY,EAIE,OAAA;AAAA,YAHA,OAAM;AAAA,YACL,gCAAOS,EAAAA,MAAK,cAAetB,EAAM,KAAK,EAAE;AAAA,YACzC,WAAQkB,EAAAK,CAAA;AAAA,UAAA;;QAGZV,EAiBM,OAjBNW,GAiBM;AAAA,UAhBJX,EAOM,OAPNY,GAOM;AAAA,YANJR,EAKEC,EAAAQ,CAAA,GAAA;AAAA,cAJS,YAAAtB,EAAM;AAAA,cAAN,uBAAAuB,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAxB,EAAM,MAAGwB;AAAA,cAClB,OAAM;AAAA,cACL,6BAA6B;AAAA,cAC7B,qBAAqB;AAAA,YAAA;;UAG1Bf,EAOM,OAPNgB,GAOM;AAAA,YANJZ,EAKEC,EAAAQ,CAAA,GAAA;AAAA,cAJS,YAAAtB,EAAM;AAAA,cAAN,uBAAAuB,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAxB,EAAM,MAAGwB;AAAA,cAClB,OAAM;AAAA,cACL,6BAA6B;AAAA,cAC7B,qBAAqB;AAAA,YAAA;;;;;;;"}

package/dist/components/DragAndDrop/DndBasket.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as E, ref as v, reactive as g, computed as L, watch as h, createElementBlock as i, openBlock as o, normalizeClass as M, createElementVNode as f, createCommentVNode as B, createTextVNode as N, toDisplayString as P, Fragment as D, renderList as z, createBlock as b, unref as u } from "vue";
+import { defineComponent as E, ref as m, reactive as v, computed as C, watch as L, createElementBlock as i, openBlock as o, normalizeClass as M, createElementVNode as f, createCommentVNode as h, createTextVNode as N, toDisplayString as P, Fragment as B, renderList as z, createBlock as g, unref as D } from "vue";
 import { useSortable as A } from "@platforma-sdk/ui-vue";
 import H from "./DnDBasketChip.vue.js";
 import K from "./DndDoubleChip.vue.js";
@@ -32,37 +32,37 @@ const Z = { class: "dnd-basket__title" }, j = {
   },
   emits: ["drop-item", "remove-item", "select-filter-value", "select-filter-range", "reorder"],
   setup(e, { emit: $ }) {
-    const n = e, y = $, d = v(), k = v(), F = v(0);
-    let c = g(n.selectedFilters ?? {}), p = g(n.selectedRanges ?? {});
-    const m = L(() => !(n.disabled || !n.multiple && n.droppedIds.length > 0)), w = L(() => n.disabled ? "1 true" : !m.value && n.draggedId ? "2 true" : !1);
-    h(
+    const n = e, b = $, d = m(), y = m(), k = m(0);
+    let u = v(n.selectedFilters ?? {});
+    const F = v(n.selectedRanges ?? {}), c = C(() => !(n.disabled || !n.multiple && n.droppedIds.length > 0)), w = C(() => n.disabled ? "1 true" : !c.value && n.draggedId ? "2 true" : !1);
+    L(
       () => n.selectedFilters,
       () => {
-        c = g(n.selectedFilters ?? {});
+        u = v(n.selectedFilters ?? {});
       }
-    ), n.sortable && (h(
+    ), n.sortable && (L(
       () => n.droppedIds,
       () => {
-        F.value++;
+        k.value++;
       },
       { deep: !0 }
-    ), A(k, {
+    ), A(y, {
       handle: ".dnd-basket-chip__handler",
       onChange(r) {
-        y(
+        b(
           "reorder",
           r.map((s) => n.droppedIds[s])
         );
       }
     }));
     function R() {
-      d.value && !n.disabled && m.value && d.value.classList.add("active");
+      d.value && !n.disabled && c.value && d.value.classList.add("active");
     }
-    function C() {
+    function p() {
       d.value && d.value.classList.remove("active");
     }
     function V(r) {
-      r.stopPropagation(), m.value && (n.draggedId && y("drop-item", { draggedId: n.draggedId, id: n.id }), C());
+      r.stopPropagation(), c.value && (n.draggedId && b("drop-item", { draggedId: n.draggedId, id: n.id }), p());
     }
     function O(r) {
       r.preventDefault();
@@ -83,7 +83,7 @@ const Z = { class: "dnd-basket__title" }, j = {
       onDrop: V,
       onDragenter: O,
       onDragover: S,
-      onDragleave: C
+      onDragleave: p
     }, [
       f("div", Z, [
         e.required ? (o(), i("span", j, [...s[0] || (s[0] = [
@@ -99,27 +99,27 @@ const Z = { class: "dnd-basket__title" }, j = {
               fill: "#F1222F"
             })
           ], -1)
-        ])])) : B("", !0),
+        ])])) : h("", !0),
         N(" " + P(e.title), 1)
       ]),
       f("div", G, [
         (o(), i("div", {
           ref_key: "listRef",
-          ref: k,
-          key: F.value,
+          ref: y,
+          key: k.value,
           class: "dnd-basket__chip-wrapper"
         }, [
-          (o(!0), i(D, null, z(e.droppedIds, (t, a) => (o(), i(D, null, [
-            !e.isFilter || e.info[t].isSubsetFilter ? (o(), b(H, {
+          (o(!0), i(B, null, z(e.droppedIds, (t, a) => (o(), i(B, null, [
+            !e.isFilter || e.info[t].isSubsetFilter ? (o(), g(H, {
               key: t + "_subset",
               sortable: e.sortable,
               error: e.consistency[t] === !1,
               info: e.info[t],
               onCloseChip: (l) => r.$emit("remove-item", { chipId: t, basketId: e.id })
-            }, null, 8, ["sortable", "error", "info", "onCloseChip"])) : e.info[t].isDiscreteFilter ? (o(), b(K, {
+            }, null, 8, ["sortable", "error", "info", "onCloseChip"])) : e.info[t].isDiscreteFilter ? (o(), g(K, {
               key: t + "_double",
-              filter: u(c)[t],
-              "onUpdate:filter": [(l) => u(c)[t] = l, (l) => r.$emit("select-filter-value", { v: l, idx: a })],
+              filter: D(u)[t],
+              "onUpdate:filter": [(l) => D(u)[t] = l, (l) => r.$emit("select-filter-value", { v: l, idx: a })],
               info: e.info[t],
               error: e.consistency[t] === !1,
               sortable: e.sortable,
@@ -127,17 +127,17 @@ const Z = { class: "dnd-basket__title" }, j = {
               "search-model": q,
               "load-options": e.loadOptionsFn,
               onCloseChip: (l) => r.$emit("remove-item", { chipId: t, basketId: e.id })
-            }, null, 8, ["filter", "onUpdate:filter", "info", "error", "sortable", "load-options", "onCloseChip"])) : (o(), b(T, {
+            }, null, 8, ["filter", "onUpdate:filter", "info", "error", "sortable", "load-options", "onCloseChip"])) : (o(), g(T, {
               key: t + "_range",
-              filter: u(p)[t],
-              "onUpdate:filter": [(l) => u(p)[t] = l, (l) => r.$emit("select-filter-range", { v: l, idx: a })],
+              filter: F[t],
+              "onUpdate:filter": [(l) => F[t] = l, (l) => r.$emit("select-filter-range", { v: l, idx: a })],
               info: e.info[t],
               error: e.consistency[t] === !1,
               onCloseChip: (l) => r.$emit("remove-item", { chipId: t, basketId: e.id })
             }, null, 8, ["filter", "onUpdate:filter", "info", "error", "onCloseChip"]))
           ], 64))), 256))
         ])),
-        !e.droppedIds.length || e.multiple ? (o(), i("div", J, " Drop dimensions here ")) : B("", !0)
+        !e.droppedIds.length || e.multiple ? (o(), i("div", J, " Drop dimensions here ")) : h("", !0)
       ])
     ], 34));
   }

package/dist/components/DragAndDrop/DndBasket.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DndBasket.vue.js","sources":["../../../src/components/DragAndDrop/DndBasket.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useSortable } from '@platforma-sdk/ui-vue';\nimport { computed, reactive, ref, watch } from 'vue';\nimport DndBasketChip from './DnDBasketChip.vue';\nimport DndDoubleChip from './DndDoubleChip.vue';\nimport DnDRangeChip from './DnDRangeChip.vue';\nimport {\n  DndBasketEmits,\n  DndBasketProps,\n  SelectFilterValueEvent\n} from './types';\n\nconst props = defineProps<DndBasketProps>();\n\nconst emit = defineEmits<DndBasketEmits>();\n\nconst basketRoot = ref<HTMLElement>();\nconst listRef = ref<HTMLElement>();\nconst listKey = ref(0);\n\nlet selectedFilterValues = reactive(props.selectedFilters ?? {});\nlet selectedFilterRanges = reactive(props.selectedRanges ?? {});\n\nconst canPutOneMore = computed(() => {\n  if (props.disabled) {\n    return false;\n  }\n  if (!props.multiple && props.droppedIds.length > 0) {\n    return false;\n  }\n\n  return true;\n});\n\nconst isBasketDisable = computed(() => {\n  if (props.disabled) {\n    return '1 true';\n  }\n  if (!canPutOneMore.value && props.draggedId) {\n    return '2 true';\n  }\n  return false;\n});\n\nwatch(\n  () => props.selectedFilters,\n  () => {\n    selectedFilterValues = reactive(props.selectedFilters ?? {});\n  }\n);\n\nif (props.sortable) {\n  watch(\n    () => props.droppedIds,\n    () => {\n      listKey.value++;\n    },\n    { deep: true }\n  );\n  useSortable(listRef, {\n    handle: '.dnd-basket-chip__handler',\n    onChange(indices) {\n      emit(\n        'reorder',\n        indices.map((i) => props.droppedIds[i])\n      );\n    }\n  });\n}\n\nfunction addActiveClass() {\n  if (basketRoot.value && !props.disabled && canPutOneMore.value) {\n    basketRoot.value.classList.add('active');\n  }\n}\n\nfunction removeActiveClass() {\n  if (basketRoot.value) {\n    basketRoot.value.classList.remove('active');\n  }\n}\n\nfunction handleDrop(event: DragEvent) {\n  event.stopPropagation();\n  if (canPutOneMore.value) {\n    if (props.draggedId) {\n      emit('drop-item', { draggedId: props.draggedId, id: props.id });\n    }\n    removeActiveClass();\n  }\n}\n\nfunction dragEnter(event: DragEvent) {\n  event.preventDefault();\n}\n\nfunction dragOver(event: DragEvent) {\n  event.preventDefault();\n  addActiveClass();\n}\nconst filterOptions = async (sourceId: string, searchStr: string) => {\n  return props.searchFn(sourceId, searchStr);\n};\nconst searchModel = async (sourceId: string, selectedValues: string[]) => {\n  const result = await Promise.all(selectedValues.map(v => props.searchSelectedValueFn(sourceId, v)));\n  return result.map(r => r[0]);\n}\n\n</script>\n<template>\n  <div\n    ref=\"basketRoot\"\n    :class=\"{\n      disabled: isBasketDisable,\n      empty: droppedIds.length === 0,\n      readonly\n    }\"\n    class=\"dnd-basket\"\n    dropzone=\"true\"\n    @drop=\"handleDrop\"\n    @dragenter=\"dragEnter\"\n    @dragover=\"dragOver\"\n    @dragleave=\"removeActiveClass\"\n  >\n    <div class=\"dnd-basket__title\">\n      <span v-if=\"required\" class=\"dnd-basket__required\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"6\"\n          height=\"16\"\n          viewBox=\"0 0 6 16\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M2.01685 6.8L3 5.34159L3.97612 6.8L4.89607 6.12743L3.81461 4.7469L5.5 4.25133L5.14888 3.16106L3.50562 3.77699L3.56882 2H2.43118L2.49438 3.77699L0.851124 3.16106L0.5 4.25133L2.18539 4.7469L1.09691 6.12743L2.01685 6.8Z\"\n            fill=\"#F1222F\"\n          />\n        </svg>\n      </span>\n      {{ title }}\n    </div>\n    <div class=\"dnd-basket__drop-container\">\n      <div ref=\"listRef\" :key=\"listKey\" class=\"dnd-basket__chip-wrapper\">\n        <template v-for=\"(chipId, idx) in droppedIds\">\n          <DndBasketChip\n            v-if=\"!isFilter || info[chipId].isSubsetFilter\"\n            :key=\"chipId + '_subset'\"\n            :sortable=\"sortable\"\n            :error=\"consistency[chipId] === false\"\n            :info=\"info[chipId]\"\n            @close-chip=\"$emit('remove-item', { chipId, basketId: id })\"\n          />\n          <DndDoubleChip\n            v-else-if=\"info[chipId].isDiscreteFilter\"\n            :key=\"chipId + '_double'\"\n            v-model:filter=\"selectedFilterValues[chipId]\"\n            :info=\"info[chipId]\"\n            :error=\"consistency[chipId] === false\"\n            :sortable=\"sortable\"\n            :search-options=\"filterOptions\"\n            :search-model=\"searchModel\"\n            :load-options=\"loadOptionsFn\"\n            @close-chip=\"$emit('remove-item', { chipId, basketId: id })\"\n            @update:filter=\"(v: SelectFilterValueEvent['v']) => $emit('select-filter-value', { v, idx })\"\n          />\n          <DnDRangeChip\n            v-else\n            :key=\"chipId + '_range'\"\n            v-model:filter=\"selectedFilterRanges[chipId]\"\n            :info=\"info[chipId]\"\n            :error=\"consistency[chipId] === false\"\n            @close-chip=\"$emit('remove-item', { chipId, basketId: id })\"\n            @update:filter=\"(v:SelectFilterValueEvent['v']) => $emit('select-filter-range', { v, idx })\"\n          />\n        </template>\n      </div>\n      <div v-if=\"!droppedIds.length || multiple\" class=\"dnd-basket__placeholder\">\n        Drop dimensions here\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","basketRoot","ref","listRef","listKey","selectedFilterValues","reactive","selectedFilterRanges","canPutOneMore","computed","isBasketDisable","watch","useSortable","indices","i","addActiveClass","removeActiveClass","handleDrop","event","dragEnter","dragOver","filterOptions","sourceId","searchStr","searchModel","selectedValues","v","r","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_openBlock","_hoisted_2","_cache","_createTextVNode","_hoisted_3","_Fragment","_renderList","chipId","idx","_createBlock","DndBasketChip","$event","$emit","DndDoubleChip","_unref","DnDRangeChip","_hoisted_4"],"mappings":"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"}
+{"version":3,"file":"DndBasket.vue.js","sources":["../../../src/components/DragAndDrop/DndBasket.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useSortable } from '@platforma-sdk/ui-vue';\nimport { computed, reactive, ref, watch } from 'vue';\nimport DndBasketChip from './DnDBasketChip.vue';\nimport DndDoubleChip from './DndDoubleChip.vue';\nimport DnDRangeChip from './DnDRangeChip.vue';\nimport type {\n  DndBasketEmits,\n  DndBasketProps,\n  SelectFilterValueEvent,\n} from './types';\n\nconst props = defineProps<DndBasketProps>();\n\nconst emit = defineEmits<DndBasketEmits>();\n\nconst basketRoot = ref<HTMLElement>();\nconst listRef = ref<HTMLElement>();\nconst listKey = ref(0);\n\nlet selectedFilterValues = reactive(props.selectedFilters ?? {});\nconst selectedFilterRanges = reactive(props.selectedRanges ?? {});\n\nconst canPutOneMore = computed(() => {\n  if (props.disabled) {\n    return false;\n  }\n  if (!props.multiple && props.droppedIds.length > 0) {\n    return false;\n  }\n\n  return true;\n});\n\nconst isBasketDisable = computed(() => {\n  if (props.disabled) {\n    return '1 true';\n  }\n  if (!canPutOneMore.value && props.draggedId) {\n    return '2 true';\n  }\n  return false;\n});\n\nwatch(\n  () => props.selectedFilters,\n  () => {\n    selectedFilterValues = reactive(props.selectedFilters ?? {});\n  },\n);\n\nif (props.sortable) {\n  watch(\n    () => props.droppedIds,\n    () => {\n      listKey.value++;\n    },\n    { deep: true },\n  );\n  useSortable(listRef, {\n    handle: '.dnd-basket-chip__handler',\n    onChange(indices) {\n      emit(\n        'reorder',\n        indices.map((i) => props.droppedIds[i]),\n      );\n    },\n  });\n}\n\nfunction addActiveClass() {\n  if (basketRoot.value && !props.disabled && canPutOneMore.value) {\n    basketRoot.value.classList.add('active');\n  }\n}\n\nfunction removeActiveClass() {\n  if (basketRoot.value) {\n    basketRoot.value.classList.remove('active');\n  }\n}\n\nfunction handleDrop(event: DragEvent) {\n  event.stopPropagation();\n  if (canPutOneMore.value) {\n    if (props.draggedId) {\n      emit('drop-item', { draggedId: props.draggedId, id: props.id });\n    }\n    removeActiveClass();\n  }\n}\n\nfunction dragEnter(event: DragEvent) {\n  event.preventDefault();\n}\n\nfunction dragOver(event: DragEvent) {\n  event.preventDefault();\n  addActiveClass();\n}\nconst filterOptions = async (sourceId: string, searchStr: string) => {\n  return props.searchFn(sourceId, searchStr);\n};\nconst searchModel = async (sourceId: string, selectedValues: string[]) => {\n  const result = await Promise.all(selectedValues.map((v) => props.searchSelectedValueFn(sourceId, v)));\n  return result.map((r) => r[0]);\n};\n\n</script>\n<template>\n  <div\n    ref=\"basketRoot\"\n    :class=\"{\n      disabled: isBasketDisable,\n      empty: droppedIds.length === 0,\n      readonly\n    }\"\n    class=\"dnd-basket\"\n    dropzone=\"true\"\n    @drop=\"handleDrop\"\n    @dragenter=\"dragEnter\"\n    @dragover=\"dragOver\"\n    @dragleave=\"removeActiveClass\"\n  >\n    <div class=\"dnd-basket__title\">\n      <span v-if=\"required\" class=\"dnd-basket__required\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"6\"\n          height=\"16\"\n          viewBox=\"0 0 6 16\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M2.01685 6.8L3 5.34159L3.97612 6.8L4.89607 6.12743L3.81461 4.7469L5.5 4.25133L5.14888 3.16106L3.50562 3.77699L3.56882 2H2.43118L2.49438 3.77699L0.851124 3.16106L0.5 4.25133L2.18539 4.7469L1.09691 6.12743L2.01685 6.8Z\"\n            fill=\"#F1222F\"\n          />\n        </svg>\n      </span>\n      {{ title }}\n    </div>\n    <div class=\"dnd-basket__drop-container\">\n      <div ref=\"listRef\" :key=\"listKey\" class=\"dnd-basket__chip-wrapper\">\n        <template v-for=\"(chipId, idx) in droppedIds\">\n          <DndBasketChip\n            v-if=\"!isFilter || info[chipId].isSubsetFilter\"\n            :key=\"chipId + '_subset'\"\n            :sortable=\"sortable\"\n            :error=\"consistency[chipId] === false\"\n            :info=\"info[chipId]\"\n            @close-chip=\"$emit('remove-item', { chipId, basketId: id })\"\n          />\n          <DndDoubleChip\n            v-else-if=\"info[chipId].isDiscreteFilter\"\n            :key=\"chipId + '_double'\"\n            v-model:filter=\"selectedFilterValues[chipId]\"\n            :info=\"info[chipId]\"\n            :error=\"consistency[chipId] === false\"\n            :sortable=\"sortable\"\n            :search-options=\"filterOptions\"\n            :search-model=\"searchModel\"\n            :load-options=\"loadOptionsFn\"\n            @close-chip=\"$emit('remove-item', { chipId, basketId: id })\"\n            @update:filter=\"(v: SelectFilterValueEvent['v']) => $emit('select-filter-value', { v, idx })\"\n          />\n          <DnDRangeChip\n            v-else\n            :key=\"chipId + '_range'\"\n            v-model:filter=\"selectedFilterRanges[chipId]\"\n            :info=\"info[chipId]\"\n            :error=\"consistency[chipId] === false\"\n            @close-chip=\"$emit('remove-item', { chipId, basketId: id })\"\n            @update:filter=\"(v:SelectFilterValueEvent['v']) => $emit('select-filter-range', { v, idx })\"\n          />\n        </template>\n      </div>\n      <div v-if=\"!droppedIds.length || multiple\" class=\"dnd-basket__placeholder\">\n        Drop dimensions here\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","basketRoot","ref","listRef","listKey","selectedFilterValues","reactive","selectedFilterRanges","canPutOneMore","computed","isBasketDisable","watch","useSortable","indices","i","addActiveClass","removeActiveClass","handleDrop","event","dragEnter","dragOver","filterOptions","sourceId","searchStr","searchModel","selectedValues","v","r","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_openBlock","_hoisted_2","_cache","_createTextVNode","_hoisted_3","_Fragment","_renderList","chipId","idx","_createBlock","DndBasketChip","$event","$emit","DndDoubleChip","_unref","DnDRangeChip","_hoisted_4"],"mappings":"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"}

package/dist/components/DragAndDrop/DndChip.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DndChip.vue.js","sources":["../../../src/components/DragAndDrop/DndChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { ChipInfo } from './types.ts';\nimport { PlIcon16 } from '@platforma-sdk/ui-vue';\n\nconst props = defineProps<{\n  info: ChipInfo;\n}>();\n\nconst emit = defineEmits<{\n  (e: 'dragstart', item: ChipInfo['id']): void;\n  (e: 'dragend', item: ChipInfo['id']): void;\n}>();\n\nconst chipRoot = ref<HTMLElement>();\n\nconst dimensionsTitle = computed(() =>\n  props.info.uniqueValues.join('/'),\n);\nfunction dragStart(event: DragEvent) {\n  event.dataTransfer?.clearData();\n  event.dataTransfer?.setData('text/plain', props.info.id);\n  // console.log('dragStart', props.info);\n  emit('dragstart', props.info.id);\n  (event.target as HTMLElement).style.opacity = '0.4';\n  if (chipRoot.value) {\n    chipRoot.value.classList.toggle('drag-active');\n  }\n}\n\nfunction dragEnd(event: DragEvent) {\n  emit('dragend', props.info.id);\n  (event.target as HTMLElement).style.opacity = '1';\n  if (chipRoot.value) {\n    chipRoot.value.classList.toggle('drag-active');\n  }\n}\n</script>\n<template>\n  <div\n    ref=\"chipRoot\"\n    draggable=\"true\"\n    class=\"dnd-chip\"\n    @dragstart=\"dragStart\"\n    @dragend=\"dragEnd\"\n  >\n    <div class=\"dnd-chip__icon\" >\n      <PlIcon16 :name=\"info.isSubsetFilter ? 'cell-type-subset' : info.type === 'String' ? 'cell-type-txt' : 'cell-type-num'\"/>\n    </div>\n    <div class=\"dnd-chip__title-wrapper\">\n      <div class=\"dnd-chip__title\" :title=\"info.title\">{{ info.title }}</div>\n      <div v-if=\"info.nonHomogenous\" class=\"dnd-chip__sub-title\" :title=\"dimensionsTitle\">\n        {{ dimensionsTitle }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","chipRoot","ref","dimensionsTitle","computed","dragStart","event","_a","_b","dragEnd","_createElementBlock","_createElementVNode","_hoisted_1","_createVNode","_unref","PlIcon16","_hoisted_2","_toDisplayString","_hoisted_3","_hoisted_4"],"mappings":";;;;;;;;;AAKA,UAAMA,IAAQC,GAIRC,IAAOC,GAKPC,IAAWC,EAAA,GAEXC,IAAkBC;AAAA,MAAS,MAC/BP,EAAM,KAAK,aAAa,KAAK,GAAG;AAAA,IAAA;AAElC,aAASQ,EAAUC,GAAkB;;AACnC,OAAAC,IAAAD,EAAM,iBAAN,QAAAC,EAAoB,cACpBC,IAAAF,EAAM,iBAAN,QAAAE,EAAoB,QAAQ,cAAcX,EAAM,KAAK,KAErDE,EAAK,aAAaF,EAAM,KAAK,EAAE,GAC9BS,EAAM,OAAuB,MAAM,UAAU,OAC1CL,EAAS,SACXA,EAAS,MAAM,UAAU,OAAO,aAAa;AAAA,IAEjD;AAEA,aAASQ,EAAQH,GAAkB;AACjC,MAAAP,EAAK,WAAWF,EAAM,KAAK,EAAE,GAC5BS,EAAM,OAAuB,MAAM,UAAU,KAC1CL,EAAS,SACXA,EAAS,MAAM,UAAU,OAAO,aAAa;AAAA,IAEjD;2BAGES,EAgBM,OAAA;AAAA,eAfA;AAAA,MAAJ,KAAIT;AAAA,MACJ,WAAU;AAAA,MACV,OAAM;AAAA,MACL,aAAWI;AAAA,MACX,WAASI;AAAA,IAAA;MAEVE,EAEM,OAFNC,GAEM;AAAA,QADJC,EAAyHC,EAAAC,CAAA,GAAA;AAAA,UAA9G,MAAMjB,EAAA,KAAK,iBAAc,qBAAwBA,EAAA,KAAK,SAAI,WAAA,kBAAA;AAAA,QAAA;;MAEvEa,EAKM,OALNK,GAKM;AAAA,QAJJL,EAAuE,OAAA;AAAA,UAAlE,OAAM;AAAA,UAAmB,OAAOb,EAAA,KAAK;AAAA,QAAA,GAAUmB,EAAAnB,EAAA,KAAK,KAAK,GAAA,GAAAoB,CAAA;AAAA,QACnDpB,EAAA,KAAK,sBAAhBY,EAEM,OAAA;AAAA;UAFyB,OAAM;AAAA,UAAuB,OAAOP,EAAA;AAAA,QAAA,KAC9DA,EAAA,KAAe,GAAA,GAAAgB,CAAA;;;;;"}
+{"version":3,"file":"DndChip.vue.js","sources":["../../../src/components/DragAndDrop/DndChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport type { ChipInfo } from './types.ts';\nimport { PlIcon16 } from '@platforma-sdk/ui-vue';\n\nconst props = defineProps<{\n  info: ChipInfo;\n}>();\n\nconst emit = defineEmits<{\n  (e: 'dragstart', item: ChipInfo['id']): void;\n  (e: 'dragend', item: ChipInfo['id']): void;\n}>();\n\nconst chipRoot = ref<HTMLElement>();\n\nconst dimensionsTitle = computed(() =>\n  props.info.uniqueValues.join('/'),\n);\nfunction dragStart(event: DragEvent) {\n  event.dataTransfer?.clearData();\n  event.dataTransfer?.setData('text/plain', props.info.id);\n  // console.log('dragStart', props.info);\n  emit('dragstart', props.info.id);\n  (event.target as HTMLElement).style.opacity = '0.4';\n  if (chipRoot.value) {\n    chipRoot.value.classList.toggle('drag-active');\n  }\n}\n\nfunction dragEnd(event: DragEvent) {\n  emit('dragend', props.info.id);\n  (event.target as HTMLElement).style.opacity = '1';\n  if (chipRoot.value) {\n    chipRoot.value.classList.toggle('drag-active');\n  }\n}\n</script>\n<template>\n  <div\n    ref=\"chipRoot\"\n    draggable=\"true\"\n    class=\"dnd-chip\"\n    @dragstart=\"dragStart\"\n    @dragend=\"dragEnd\"\n  >\n    <div class=\"dnd-chip__icon\" >\n      <PlIcon16 :name=\"info.isSubsetFilter ? 'cell-type-subset' : info.type === 'String' ? 'cell-type-txt' : 'cell-type-num'\"/>\n    </div>\n    <div class=\"dnd-chip__title-wrapper\">\n      <div class=\"dnd-chip__title\" :title=\"info.title\">{{ info.title }}</div>\n      <div v-if=\"info.nonHomogenous\" class=\"dnd-chip__sub-title\" :title=\"dimensionsTitle\">\n        {{ dimensionsTitle }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","chipRoot","ref","dimensionsTitle","computed","dragStart","event","_a","_b","dragEnd","_createElementBlock","_createElementVNode","_hoisted_1","_createVNode","_unref","PlIcon16","_hoisted_2","_toDisplayString","_hoisted_3","_hoisted_4"],"mappings":";;;;;;;;;AAKA,UAAMA,IAAQC,GAIRC,IAAOC,GAKPC,IAAWC,EAAA,GAEXC,IAAkBC;AAAA,MAAS,MAC/BP,EAAM,KAAK,aAAa,KAAK,GAAG;AAAA,IAAA;AAElC,aAASQ,EAAUC,GAAkB;;AACnC,OAAAC,IAAAD,EAAM,iBAAN,QAAAC,EAAoB,cACpBC,IAAAF,EAAM,iBAAN,QAAAE,EAAoB,QAAQ,cAAcX,EAAM,KAAK,KAErDE,EAAK,aAAaF,EAAM,KAAK,EAAE,GAC9BS,EAAM,OAAuB,MAAM,UAAU,OAC1CL,EAAS,SACXA,EAAS,MAAM,UAAU,OAAO,aAAa;AAAA,IAEjD;AAEA,aAASQ,EAAQH,GAAkB;AACjC,MAAAP,EAAK,WAAWF,EAAM,KAAK,EAAE,GAC5BS,EAAM,OAAuB,MAAM,UAAU,KAC1CL,EAAS,SACXA,EAAS,MAAM,UAAU,OAAO,aAAa;AAAA,IAEjD;2BAGES,EAgBM,OAAA;AAAA,eAfA;AAAA,MAAJ,KAAIT;AAAA,MACJ,WAAU;AAAA,MACV,OAAM;AAAA,MACL,aAAWI;AAAA,MACX,WAASI;AAAA,IAAA;MAEVE,EAEM,OAFNC,GAEM;AAAA,QADJC,EAAyHC,EAAAC,CAAA,GAAA;AAAA,UAA9G,MAAMjB,EAAA,KAAK,iBAAc,qBAAwBA,EAAA,KAAK,SAAI,WAAA,kBAAA;AAAA,QAAA;;MAEvEa,EAKM,OALNK,GAKM;AAAA,QAJJL,EAAuE,OAAA;AAAA,UAAlE,OAAM;AAAA,UAAmB,OAAOb,EAAA,KAAK;AAAA,QAAA,GAAUmB,EAAAnB,EAAA,KAAK,KAAK,GAAA,GAAAoB,CAAA;AAAA,QACnDpB,EAAA,KAAK,sBAAhBY,EAEM,OAAA;AAAA;UAFyB,OAAM;AAAA,UAAuB,OAAOP,EAAA;AAAA,QAAA,KAC9DA,EAAA,KAAe,GAAA,GAAAgB,CAAA;;;;;"}

package/dist/components/DragAndDrop/DndDoubleChip.vue.js

@@ -59,9 +59,9 @@ const P = {
             i("div", H, C(e.info.title), 1)
           ], 8, E),
           i("div", {
-            innerHTML: r(B),
             class: "dnd-double-chip__icon-close",
-            onClick: t[0] || (t[0] = (l) => n.$emit("close-chip", o.info.id))
+            onClick: t[0] || (t[0] = (l) => n.$emit("close-chip", o.info.id)),
+            innerHTML: r(B)
           }, null, 8, I)
         ]),
         i("div", L, [

package/dist/components/DragAndDrop/DndDoubleChip.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DndDoubleChip.vue.js","sources":["../../../src/components/DragAndDrop/DndDoubleChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport type { ListOption, ListOptionBase } from '@platforma-sdk/ui-vue';\nimport { PlAutocompleteMulti, PlDropdownMulti, PlIcon16 } from '@platforma-sdk/ui-vue';\nimport { ChipInfo } from './types';\n// @ts-ignore\nimport CloseIcon from '../../assets/drag-and-drop/img/chip-close.svg?raw';\nimport { useStore } from '../../store.ts';\n\nconst props = defineProps<{\n  info: ChipInfo;\n  error: boolean;\n  searchModel: (sourceId:string, selectedValues:string[]) => Promise<ListOptionBase<string>[]>;\n  searchOptions: (sourceId:string, searchStr:string) => Promise<ListOptionBase<string>[]>;\n  loadOptions: (sourceId:string) => Promise<{values: ListOption<string>[], overflow: boolean}>;\n  sortable?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: 'close-chip', id: ChipInfo['id']): void;\n  (e: 'update:filter', id: unknown): void;\n}>();\n\nconst store = useStore();\n\nconst filterModel = defineModel<string[]>('filter', {required: true});\n\nconst preloadedOptions = ref<ListOption[] | undefined>(store.value.filterSuggestionsData.value[props.info.id]?.values);\nconst optionsOverflow = ref(store.value.filterSuggestionsData.value[props.info.id]?.overflow ?? false);\n\nwatch(() => store.value.loading.inputGuide, async (loading) => {\n  if (loading) {\n    return;\n  }\n  const {values, overflow} = await props.loadOptions(props.info.id);\n  preloadedOptions.value = values;\n  optionsOverflow.value = overflow;\n}, {immediate: true});\n\nfunction searchOptions(str: string): Promise<ListOptionBase<string>[]> {\n  if (str === '') {\n    return Promise.resolve((preloadedOptions.value ?? []) as ListOptionBase<string>[]);\n  }\n  return props.searchOptions(props.info.id, str);\n}\n\n</script>\n\n<template>\n  <div ref=\"chipRoot\" class=\"dnd-double-chip__group\">\n    <div :class=\"{ error, sortable }\" class=\"dnd-double-chip\">\n      <div class=\"dnd-double-chip__top\">\n        <div class=\"dnd-double-chip__icon\" :class=\"{error}\">\n          <PlIcon16 v-if=\"error\" name=\"warning\"/>\n          <PlIcon16 v-else :name=\"info.isSubsetFilter ? 'cell-type-subset' : info.type === 'String' ? 'cell-type-txt' : 'cell-type-num'\"/>\n        </div>\n        <div v-if=\"sortable\" class=\"dnd-basket-chip__handler\"></div>\n        <PlIcon16 name=\"drag-dots\" />\n        <div class=\"dnd-double-chip__title-wrapper\" :title=\"info.title\">\n          <div class=\"dnd-double-chip__title\">\n            {{ info.title }}\n          </div>\n        </div>\n\n        <div\n          v-html=\"CloseIcon\"\n          class=\"dnd-double-chip__icon-close\"\n          @click=\"$emit('close-chip', props.info.id)\"\n        />\n      </div>\n      <div class=\"dnd-double-chip__bottom\">\n        <PlDropdownMulti v-if=\"!optionsOverflow\" v-model=\"filterModel\" :options=\"preloadedOptions\" />\n        <PlAutocompleteMulti\n          v-else\n          v-model=\"filterModel\"\n          :options-search=\"searchOptions\"\n          :model-search=\"(v) => searchModel(props.info.id, v as string[])\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","store","useStore","filterModel","_useModel","preloadedOptions","ref","_a","optionsOverflow","_b","watch","loading","values","overflow","searchOptions","str","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_2","_createBlock","_unref","PlIcon16","_hoisted_3","_createVNode","_hoisted_5","_toDisplayString","CloseIcon","$emit","_hoisted_7","PlAutocompleteMulti","$event","v","PlDropdownMulti"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AASA,UAAMA,IAAQC,GAcRC,IAAQC,EAAA,GAERC,IAAcC,EAAqBJ,GAAC,QAA0B,GAE9DK,IAAmBC,GAA8BC,IAAAN,EAAM,MAAM,sBAAsB,MAAMF,EAAM,KAAK,EAAE,MAArD,gBAAAQ,EAAwD,MAAM,GAC/GC,IAAkBF,IAAIG,IAAAR,EAAM,MAAM,sBAAsB,MAAMF,EAAM,KAAK,EAAE,MAArD,gBAAAU,EAAwD,aAAY,EAAK;AAErG,IAAAC,EAAM,MAAMT,EAAM,MAAM,QAAQ,YAAY,OAAOU,MAAY;AAC7D,UAAIA;AACF;AAEF,YAAM,EAAC,QAAAC,GAAQ,UAAAC,MAAY,MAAMd,EAAM,YAAYA,EAAM,KAAK,EAAE;AAChE,MAAAM,EAAiB,QAAQO,GACzBJ,EAAgB,QAAQK;AAAA,IAC1B,GAAG,EAAC,WAAW,IAAK;AAEpB,aAASC,EAAcC,GAAgD;AACrE,aAAIA,MAAQ,KACH,QAAQ,QAASV,EAAiB,SAAS,CAAA,CAA+B,IAE5EN,EAAM,cAAcA,EAAM,KAAK,IAAIgB,CAAG;AAAA,IAC/C;sBAKEC,EAAA,GAAAC,EA+BM,OA/BNC,GA+BM;AAAA,MA9BJC,EA6BM,OAAA;AAAA,QA7BA,OAAKC,EAAA,CAAA,EAAA,OAAIpB,EAAA,OAAK,UAAEA,EAAA,SAAA,GAAkB,iBAAiB,CAAA;AAAA,MAAA;QACvDmB,EAkBM,OAlBNE,GAkBM;AAAA,UAjBJF,EAGM,OAAA;AAAA,YAHD,OAAKC,EAAA,CAAC,yBAAuB,EAAA,OAAUpB,EAAA,OAAK,CAAA;AAAA,UAAA;YAC/BA,EAAA,cAAhBsB,EAAuCC,EAAAC,CAAA,GAAA;AAAA;cAAhB,MAAK;AAAA,YAAA,YAC5BF,EAAgIC,EAAAC,CAAA,GAAA;AAAA;cAA9G,MAAMxB,EAAA,KAAK,iBAAc,qBAAwBA,EAAA,KAAK,SAAI,WAAA,kBAAA;AAAA,YAAA;;UAEnEA,EAAA,YAAXgB,EAAA,GAAAC,EAA4D,OAA5DQ,CAA4D;UAC5DC,EAA6BH,EAAAC,CAAA,GAAA,EAAnB,MAAK,aAAW;AAAA,UAC1BL,EAIM,OAAA;AAAA,YAJD,OAAM;AAAA,YAAkC,OAAOnB,EAAA,KAAK;AAAA,UAAA;YACvDmB,EAEM,OAFNQ,GAEMC,EADD5B,EAAA,KAAK,KAAK,GAAA,CAAA;AAAA,UAAA;UAIjBmB,EAIE,OAAA;AAAA,YAHA,WAAQI,EAAAM,CAAA;AAAA,YACR,OAAM;AAAA,YACL,gCAAOC,EAAAA,MAAK,cAAe/B,EAAM,KAAK,EAAE;AAAA,UAAA;;QAG7CoB,EAQM,OARNY,GAQM;AAAA,UAPoBvB,EAAA,cACxBc,EAKEC,EAAAS,CAAA,GAAA;AAAA;wBAHS7B,EAAA;AAAA,0DAAAA,EAAW,QAAA8B;AAAA,YACnB,kBAAgBnB;AAAA,YAChB,gBAAY,CAAGoB,MAAMlC,EAAA,YAAYD,EAAM,KAAK,IAAImC,CAAC;AAAA,UAAA,qDALpDZ,EAA6FC,EAAAY,CAAA,GAAA;AAAA;wBAA3ChC,EAAA;AAAA,0DAAAA,EAAW,QAAA8B;AAAA,YAAG,SAAS5B,EAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"DndDoubleChip.vue.js","sources":["../../../src/components/DragAndDrop/DndDoubleChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport type { ListOption, ListOptionBase } from '@platforma-sdk/ui-vue';\nimport { PlAutocompleteMulti, PlDropdownMulti, PlIcon16 } from '@platforma-sdk/ui-vue';\nimport type { ChipInfo } from './types';\nimport CloseIcon from '../../assets/drag-and-drop/img/chip-close.svg?raw';\nimport { useStore } from '../../store.ts';\n\nconst props = defineProps<{\n  info: ChipInfo;\n  error: boolean;\n  searchModel: (sourceId: string, selectedValues: string[]) => Promise<ListOptionBase<string>[]>;\n  searchOptions: (sourceId: string, searchStr: string) => Promise<ListOptionBase<string>[]>;\n  loadOptions: (sourceId: string) => Promise<{ values: ListOption<string>[]; overflow: boolean }>;\n  sortable?: boolean;\n}>();\n\nconst _emit = defineEmits<{\n  (e: 'close-chip', id: ChipInfo['id']): void;\n  (e: 'update:filter', id: unknown): void;\n}>();\n\nconst store = useStore();\n\nconst filterModel = defineModel<string[]>('filter', { required: true });\n\nconst preloadedOptions = ref<ListOption[] | undefined>(store.value.filterSuggestionsData.value[props.info.id]?.values);\nconst optionsOverflow = ref(store.value.filterSuggestionsData.value[props.info.id]?.overflow ?? false);\n\nwatch(() => store.value.loading.inputGuide, async (loading) => {\n  if (loading) {\n    return;\n  }\n  const { values, overflow } = await props.loadOptions(props.info.id);\n  preloadedOptions.value = values;\n  optionsOverflow.value = overflow;\n}, { immediate: true });\n\nfunction searchOptionsFn(str: string): Promise<ListOptionBase<string>[]> {\n  if (str === '') {\n    return Promise.resolve((preloadedOptions.value ?? []) as ListOptionBase<string>[]);\n  }\n  return props.searchOptions(props.info.id, str);\n}\n\n</script>\n\n<template>\n  <div ref=\"chipRoot\" class=\"dnd-double-chip__group\">\n    <div :class=\"{ error, sortable }\" class=\"dnd-double-chip\">\n      <div class=\"dnd-double-chip__top\">\n        <div class=\"dnd-double-chip__icon\" :class=\"{error}\">\n          <PlIcon16 v-if=\"error\" name=\"warning\"/>\n          <PlIcon16 v-else :name=\"info.isSubsetFilter ? 'cell-type-subset' : info.type === 'String' ? 'cell-type-txt' : 'cell-type-num'\"/>\n        </div>\n        <div v-if=\"sortable\" class=\"dnd-basket-chip__handler\"/>\n        <PlIcon16 name=\"drag-dots\" />\n        <div class=\"dnd-double-chip__title-wrapper\" :title=\"info.title\">\n          <div class=\"dnd-double-chip__title\">\n            {{ info.title }}\n          </div>\n        </div>\n\n        <div\n          class=\"dnd-double-chip__icon-close\"\n          @click=\"$emit('close-chip', props.info.id)\"\n          v-html=\"CloseIcon\"\n        />\n      </div>\n      <div class=\"dnd-double-chip__bottom\">\n        <PlDropdownMulti v-if=\"!optionsOverflow\" v-model=\"filterModel\" :options=\"preloadedOptions\" />\n        <PlAutocompleteMulti\n          v-else\n          v-model=\"filterModel\"\n          :options-search=\"searchOptionsFn\"\n          :model-search=\"(v) => searchModel(props.info.id, v as string[])\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","store","useStore","filterModel","_useModel","preloadedOptions","ref","_a","optionsOverflow","_b","watch","loading","values","overflow","searchOptionsFn","str","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_2","_createBlock","_unref","PlIcon16","_hoisted_3","_createVNode","_hoisted_5","_toDisplayString","$emit","CloseIcon","_hoisted_7","PlAutocompleteMulti","$event","v","PlDropdownMulti"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAMA,IAAQC,GAcRC,IAAQC,EAAA,GAERC,IAAcC,EAAqBJ,GAAC,QAA4B,GAEhEK,IAAmBC,GAA8BC,IAAAN,EAAM,MAAM,sBAAsB,MAAMF,EAAM,KAAK,EAAE,MAArD,gBAAAQ,EAAwD,MAAM,GAC/GC,IAAkBF,IAAIG,IAAAR,EAAM,MAAM,sBAAsB,MAAMF,EAAM,KAAK,EAAE,MAArD,gBAAAU,EAAwD,aAAY,EAAK;AAErG,IAAAC,EAAM,MAAMT,EAAM,MAAM,QAAQ,YAAY,OAAOU,MAAY;AAC7D,UAAIA;AACF;AAEF,YAAM,EAAE,QAAAC,GAAQ,UAAAC,MAAa,MAAMd,EAAM,YAAYA,EAAM,KAAK,EAAE;AAClE,MAAAM,EAAiB,QAAQO,GACzBJ,EAAgB,QAAQK;AAAA,IAC1B,GAAG,EAAE,WAAW,IAAM;AAEtB,aAASC,EAAgBC,GAAgD;AACvE,aAAIA,MAAQ,KACH,QAAQ,QAASV,EAAiB,SAAS,CAAA,CAA+B,IAE5EN,EAAM,cAAcA,EAAM,KAAK,IAAIgB,CAAG;AAAA,IAC/C;sBAKEC,EAAA,GAAAC,EA+BM,OA/BNC,GA+BM;AAAA,MA9BJC,EA6BM,OAAA;AAAA,QA7BA,OAAKC,EAAA,CAAA,EAAA,OAAIpB,EAAA,OAAK,UAAEA,EAAA,SAAA,GAAkB,iBAAiB,CAAA;AAAA,MAAA;QACvDmB,EAkBM,OAlBNE,GAkBM;AAAA,UAjBJF,EAGM,OAAA;AAAA,YAHD,OAAKC,EAAA,CAAC,yBAAuB,EAAA,OAAUpB,EAAA,OAAK,CAAA;AAAA,UAAA;YAC/BA,EAAA,cAAhBsB,EAAuCC,EAAAC,CAAA,GAAA;AAAA;cAAhB,MAAK;AAAA,YAAA,YAC5BF,EAAgIC,EAAAC,CAAA,GAAA;AAAA;cAA9G,MAAMxB,EAAA,KAAK,iBAAc,qBAAwBA,EAAA,KAAK,SAAI,WAAA,kBAAA;AAAA,YAAA;;UAEnEA,EAAA,YAAXgB,EAAA,GAAAC,EAAuD,OAAvDQ,CAAuD;UACvDC,EAA6BH,EAAAC,CAAA,GAAA,EAAnB,MAAK,aAAW;AAAA,UAC1BL,EAIM,OAAA;AAAA,YAJD,OAAM;AAAA,YAAkC,OAAOnB,EAAA,KAAK;AAAA,UAAA;YACvDmB,EAEM,OAFNQ,GAEMC,EADD5B,EAAA,KAAK,KAAK,GAAA,CAAA;AAAA,UAAA;UAIjBmB,EAIE,OAAA;AAAA,YAHA,OAAM;AAAA,YACL,gCAAOU,EAAAA,MAAK,cAAe9B,EAAM,KAAK,EAAE;AAAA,YACzC,WAAQwB,EAAAO,CAAA;AAAA,UAAA;;QAGZX,EAQM,OARNY,GAQM;AAAA,UAPoBvB,EAAA,cACxBc,EAKEC,EAAAS,CAAA,GAAA;AAAA;wBAHS7B,EAAA;AAAA,0DAAAA,EAAW,QAAA8B;AAAA,YACnB,kBAAgBnB;AAAA,YAChB,gBAAY,CAAGoB,MAAMlC,EAAA,YAAYD,EAAM,KAAK,IAAImC,CAAC;AAAA,UAAA,qDALpDZ,EAA6FC,EAAAY,CAAA,GAAA;AAAA;wBAA3ChC,EAAA;AAAA,0DAAAA,EAAW,QAAA8B;AAAA,YAAG,SAAS5B,EAAA;AAAA,UAAA;;;;;;"}

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

@@ -50,7 +50,7 @@ export type RemoveItemEvent<T = any> = {
     basketId: DndBasketProps<T>['id'];
 };
 export type SelectFilterValueEvent = {
-    v: any;
+    v: unknown;
     idx: number;
 };
 export type DndBasketEmits = {

package/dist/components/LassoControls/index.vue.js

@@ -43,20 +43,20 @@ const N = { class: "lasso-controls-container" }, V = { class: "lasso-buttons-gro
         r("div", V, [
           o[0] || (o[0] = r("div", { class: "lasso-controls-border" }, null, -1)),
           l(n(c), {
-            onClick: i,
             class: h({
               "lasso-button-selected": ((s = t.value) == null ? void 0 : s.mode) === "pen" || !t.value,
               "lasso-button-not-selected": ((v = t.value) == null ? void 0 : v.mode) !== "pen" && t.value
             }),
-            icon: "cursor-pointer"
+            icon: "cursor-pointer",
+            onClick: i
           }, null, 8, ["class"]),
           l(n(c), {
-            onClick: u,
             class: h({
               "lasso-button-selected": ((b = t.value) == null ? void 0 : b.mode) === "selection",
               "lasso-button-not-selected": ((k = t.value) == null ? void 0 : k.mode) !== "selection"
             }),
-            icon: "pen-tool"
+            icon: "pen-tool",
+            onClick: u
           }, null, 8, ["class"]),
           o[1] || (o[1] = r("div", { class: "lasso-controls-separator" }, null, -1)),
           l(n(c), {