@milaboratories/graph-maker 1.1.175 → 1.1.177

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

@@ -0,0 +1,94 @@
+import { defineComponent as R, computed as P, onMounted as _, onUnmounted as x, createElementBlock as L, openBlock as M, createElementVNode as r, createVNode as l, unref as n, normalizeClass as h, withCtx as T } from "vue";
+import { SCATTERPLOT_LASSO_EVENTS as d } from "@milaboratories/miplots4";
+import { PlBtnGhost as c, PlMaskIcon24 as z } from "@platforma-sdk/ui-vue";
+import { useStore as B } from "../../store.js";
+const N = { class: "lasso-controls-container" }, V = { class: "lasso-buttons-group" }, G = /* @__PURE__ */ R({
+  __name: "index",
+  props: {
+    chartRef: {}
+  },
+  setup(E) {
+    const a = E, w = B(), t = P(() => w.value.reactive.lassoControlsState);
+    function i() {
+      var e;
+      (e = a.chartRef) == null || e.updateChartState(d.selectMode, "pen");
+    }
+    function u() {
+      var e;
+      (e = a.chartRef) == null || e.updateChartState(d.selectMode, "selection");
+    }
+    function f() {
+      var e;
+      (e = a.chartRef) == null || e.updateChartState(d.back, null);
+    }
+    function m() {
+      var e;
+      (e = a.chartRef) == null || e.updateChartState(d.forward, null);
+    }
+    function K() {
+      var e;
+      (e = a.chartRef) == null || e.updateChartState(d.delete, null);
+    }
+    function p(e) {
+      var o, s;
+      e.key === "p" && i(), e.key === "v" && u(), (o = t.value) != null && o.backEnabled && e.key === "z" && (e.ctrlKey || e.metaKey) && !e.shiftKey && f(), (s = t.value) != null && s.forwardEnabled && e.key === "z" && (e.ctrlKey || e.metaKey) && e.shiftKey && m();
+    }
+    return _(() => {
+      document.addEventListener("keydown", p);
+    }), x(() => {
+      document.removeEventListener("keydown", p);
+    }), (e, o) => {
+      var s, v, b, k, C, y, S;
+      return M(), L("div", N, [
+        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"
+          }, 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"
+          }, null, 8, ["class"]),
+          o[1] || (o[1] = r("div", { class: "lasso-controls-separator" }, null, -1)),
+          l(n(c), {
+            disabled: !((C = t.value) != null && C.backEnabled),
+            icon: "arrow-left-curved",
+            onClick: f
+          }, null, 8, ["disabled"]),
+          l(n(c), {
+            disabled: !((y = t.value) != null && y.forwardEnabled),
+            onClick: m
+          }, {
+            icon: T(() => [
+              l(n(z), {
+                name: "arrow-left-curved",
+                style: { transform: "scale(-1, 1)" }
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          o[2] || (o[2] = r("div", { class: "lasso-controls-separator" }, null, -1)),
+          l(n(c), {
+            disabled: !((S = t.value) != null && S.deleteEnabled),
+            icon: "delete-bin",
+            onClick: K
+          }, null, 8, ["disabled"])
+        ]),
+        o[3] || (o[3] = r("div", { class: "lasso-hint" }, " Hold Cmd/Ctrl and left-click to pan the canvas ", -1))
+      ]);
+    };
+  }
+});
+export {
+  G as default
+};
+//# sourceMappingURL=index.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../src/components/LassoControls/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ChartInterface, SCATTERPLOT_LASSO_EVENTS } from '@milaboratories/miplots4';\nimport { PlBtnGhost, PlMaskIcon24 } from '@platforma-sdk/ui-vue';\nimport { computed, onMounted, onUnmounted } from 'vue';\nimport { useStore } from '../../store';\n\nconst props = defineProps<{\n  chartRef: ChartInterface | null\n}>();\n\nconst store = useStore();\nconst controlsState = computed(() => store.value.reactive.lassoControlsState);\n\nfunction setPen() {\n  props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.selectMode, 'pen')\n}\nfunction setSelection() {\n  props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.selectMode, 'selection')\n}\nfunction back() {\n  props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.back, null);\n}\nfunction forward() {\n  props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.forward, null);\n}\nfunction deletePolygon() {\n  props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.delete, null)\n}\n\nfunction onKeyDown(e:KeyboardEvent) {\n  if (e.key === 'p') {\n    setPen();\n  }\n  if (e.key === 'v') {\n    setSelection();\n  }\n  if (controlsState.value?.backEnabled && e.key === 'z' && (e.ctrlKey || e.metaKey) && !e.shiftKey) {\n    back();\n  }\n  if (controlsState.value?.forwardEnabled && e.key === 'z' && (e.ctrlKey || e.metaKey) && e.shiftKey) {\n    forward()\n  }\n}\nonMounted(() => {\n  document.addEventListener('keydown', onKeyDown);\n});\nonUnmounted(() => {\n  document.removeEventListener('keydown', onKeyDown);\n});\n\n</script>\n<template>\n  <div class=\"lasso-controls-container\">\n    <div class=\"lasso-buttons-group\">\n      <div class=\"lasso-controls-border\"/>\n      <pl-btn-ghost\n        @click=\"setPen\"\n        :class=\"{\n        'lasso-button-selected': controlsState?.mode === 'pen' || !controlsState,\n        'lasso-button-not-selected': controlsState?.mode !== 'pen' && controlsState,\n      }\"\n        icon=\"cursor-pointer\"\n      />\n      <pl-btn-ghost\n        @click=\"setSelection\"\n        :class=\"{\n        'lasso-button-selected': controlsState?.mode === 'selection',\n        'lasso-button-not-selected': controlsState?.mode !== 'selection',\n      }\"\n        icon=\"pen-tool\"\n      />\n      <div class=\"lasso-controls-separator\"/>\n      <pl-btn-ghost\n        :disabled=\"!controlsState?.backEnabled\"\n        icon=\"arrow-left-curved\"\n        @click=\"back\"\n      />\n      <pl-btn-ghost\n        :disabled=\"!controlsState?.forwardEnabled\"\n        @click=\"forward\"\n      >\n        <template #icon>\n          <PlMaskIcon24 name=\"arrow-left-curved\" :style=\"{transform: 'scale(-1, 1)'}\"/>\n        </template>\n      </pl-btn-ghost>\n      <div class=\"lasso-controls-separator\"/>\n      <pl-btn-ghost\n        :disabled=\"!controlsState?.deleteEnabled\"\n        icon=\"delete-bin\"\n        @click=\"deletePolygon\"\n      />\n    </div>\n    <div class=\"lasso-hint\">\n      Hold Cmd/Ctrl and left-click to pan the canvas\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","store","useStore","controlsState","computed","setPen","_a","SCATTERPLOT_LASSO_EVENTS","setSelection","back","forward","deletePolygon","onKeyDown","_b","onMounted","onUnmounted","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_createVNode","_unref","PlBtnGhost","_normalizeClass","_c","_d","_e","_f","PlMaskIcon24","_g","_cache"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    bottom: number;
+    left: number;
+    right: number;
+    top: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/Loading.vue.js

@@ -0,0 +1,22 @@
+import { defineComponent as l, createElementBlock as o, openBlock as i, normalizeStyle as C, createStaticVNode as a } from "vue";
+const r = /* @__PURE__ */ l({
+  __name: "Loading",
+  props: {
+    top: { default: 0 },
+    left: { default: 0 },
+    right: { default: 0 },
+    bottom: { default: 0 }
+  },
+  setup(t) {
+    return (d, e) => (i(), o("div", {
+      class: "graph-maker__loading",
+      style: C({ top: `${t.top}px`, bottom: `${t.bottom}px`, right: `${t.right}px`, left: `${t.left}px` })
+    }, [...e[0] || (e[0] = [
+      a('<div class="loading-picture"><svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M36.0197 2.29384C37.0053 1.76506 37.7157 1.45481 38.4537 1.29931C39.4734 1.08447 40.5266 1.08447 41.5463 1.29931C42.2843 1.45481 42.9947 1.76506 43.9803 2.29384C44.7026 2.66301 45.5542 3.14998 46.6565 3.78023L68.4201 16.2247C69.3757 16.7711 70.1409 17.2086 70.7708 17.5978C71.8362 18.2367 72.5158 18.7183 73.0579 19.3166C73.7667 20.0989 74.3023 21.0219 74.6298 22.0253C75 23.1595 75 24.4276 75 26.9639V53.0362C75 55.5725 75 56.8407 74.6298 57.9748C74.3023 58.9782 73.7667 59.9012 73.0579 60.6835C72.5154 61.2822 71.8353 61.764 70.7688 62.4035C70.1393 62.7924 69.3748 63.2295 68.4203 63.7753L46.6565 76.2198C45.555 76.8497 44.7037 77.3364 43.9817 77.7055C42.9954 78.2347 42.2847 78.5452 41.5463 78.7008C40.5266 78.9156 39.4734 78.9156 38.4537 78.7008C37.7153 78.5452 37.0045 78.2347 36.0182 77.7054C35.2962 77.3364 34.445 76.8497 33.3436 76.2199L11.5799 63.7754C10.6253 63.2295 9.86069 62.7924 9.23115 62.4035C8.16466 61.764 7.48457 61.2822 6.94208 60.6835C6.23334 59.9012 5.6977 58.9782 5.37018 57.9748C5 56.8407 5 55.5725 5 53.0362V26.9639C5 24.4276 5 23.1595 5.37018 22.0253C5.6977 21.0219 6.23334 20.0989 6.94208 19.3166C7.48422 18.7183 8.16379 18.2367 9.22911 17.5978C9.85904 17.2086 10.6242 16.7711 11.5799 16.2247L33.3435 3.78023C34.4457 3.14998 35.2974 2.663 36.0197 2.29384ZM10 34.9971V24.9907H37.4546V34.9971H10ZM10 45.0036V40.0003H37.4546V45.0036H10ZM37.4546 72.9139L10 57.1541V50.0069H37.4546V72.9139ZM65.0189 60.0134L42.5455 72.9138V60.0134H65.0189ZM70 24.9907V55.0101H42.5455V24.9907H70ZM14.98 19.9874L40 5.62505L65.0201 19.9874H14.98Z" fill="#E1E3EB"></path></svg><div class="loading-progress-bar"><div class="moving-dash"></div></div></div>', 1)
+    ])], 4));
+  }
+});
+export {
+  r as default
+};
+//# sourceMappingURL=Loading.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.vue.js","sources":["../../src/components/Loading.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst props = withDefaults(defineProps<{\n  top?: number,\n  left?: number,\n  right?: number\n  bottom?: number\n}>(), {\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0\n});\n</script>\n<template>\n  <div class=\"graph-maker__loading\"\n       :style=\"{top: `${top}px`, bottom: `${bottom}px`, right: `${right}px`, left: `${left}px`}\">\n    <div class=\"loading-picture\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M36.0197 2.29384C37.0053 1.76506 37.7157 1.45481 38.4537 1.29931C39.4734 1.08447 40.5266 1.08447 41.5463 1.29931C42.2843 1.45481 42.9947 1.76506 43.9803 2.29384C44.7026 2.66301 45.5542 3.14998 46.6565 3.78023L68.4201 16.2247C69.3757 16.7711 70.1409 17.2086 70.7708 17.5978C71.8362 18.2367 72.5158 18.7183 73.0579 19.3166C73.7667 20.0989 74.3023 21.0219 74.6298 22.0253C75 23.1595 75 24.4276 75 26.9639V53.0362C75 55.5725 75 56.8407 74.6298 57.9748C74.3023 58.9782 73.7667 59.9012 73.0579 60.6835C72.5154 61.2822 71.8353 61.764 70.7688 62.4035C70.1393 62.7924 69.3748 63.2295 68.4203 63.7753L46.6565 76.2198C45.555 76.8497 44.7037 77.3364 43.9817 77.7055C42.9954 78.2347 42.2847 78.5452 41.5463 78.7008C40.5266 78.9156 39.4734 78.9156 38.4537 78.7008C37.7153 78.5452 37.0045 78.2347 36.0182 77.7054C35.2962 77.3364 34.445 76.8497 33.3436 76.2199L11.5799 63.7754C10.6253 63.2295 9.86069 62.7924 9.23115 62.4035C8.16466 61.764 7.48457 61.2822 6.94208 60.6835C6.23334 59.9012 5.6977 58.9782 5.37018 57.9748C5 56.8407 5 55.5725 5 53.0362V26.9639C5 24.4276 5 23.1595 5.37018 22.0253C5.6977 21.0219 6.23334 20.0989 6.94208 19.3166C7.48422 18.7183 8.16379 18.2367 9.22911 17.5978C9.85904 17.2086 10.6242 16.7711 11.5799 16.2247L33.3435 3.78023C34.4457 3.14998 35.2974 2.663 36.0197 2.29384ZM10 34.9971V24.9907H37.4546V34.9971H10ZM10 45.0036V40.0003H37.4546V45.0036H10ZM37.4546 72.9139L10 57.1541V50.0069H37.4546V72.9139ZM65.0189 60.0134L42.5455 72.9138V60.0134H65.0189ZM70 24.9907V55.0101H42.5455V24.9907H70ZM14.98 19.9874L40 5.62505L65.0201 19.9874H14.98Z\"\n              fill=\"#E1E3EB\" />\n      </svg>\n      <div class=\"loading-progress-bar\">\n        <div class=\"moving-dash\" />\n      </div>\n    </div>\n  </div>\n</template>"],"names":["_createElementBlock","__props"],"mappings":";;;;;;;;;;2BAcEA,EAYM,OAAA;AAAA,MAZD,OAAM;AAAA,MACL,mBAAgBC,EAAA,GAAG,MAAA,QAAA,GAAiBA,QAAM,MAAA,OAAA,GAAgBA,EAAA,KAAK,eAAeA,EAAA,IAAI,KAAA,CAAA;AAAA,IAAA;;;;;"}

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

@@ -0,0 +1,15 @@
+import { Palette } from './AesSettings/types';
+type __VLS_Props = {
+    label: string;
+    title?: string;
+    palette?: Palette;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "button-click": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onButton-click"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    root: HTMLDivElement;
+    label: HTMLLabelElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/MultiselectButton.vue.js

@@ -0,0 +1,63 @@
+import { defineComponent as f, ref as k, createElementBlock as l, openBlock as t, withModifiers as g, createCommentVNode as a, createVNode as y, createElementVNode as v, toDisplayString as s, createBlock as C, unref as r, Fragment as h, renderList as E, normalizeStyle as u } from "vue";
+import { useLabelNotch as L, PlIcon16 as B } from "@platforma-sdk/ui-vue";
+import _ from "./DoubleContourTemp.vue.js";
+import { isCategorical as $, PALETTE_MAP as m } from "../constantsAesthetic.js";
+const A = { class: "ui-multiselect-button__content" }, I = {
+  key: 0,
+  class: "title"
+}, N = {
+  key: 1,
+  class: "gradient"
+}, S = 6, T = /* @__PURE__ */ f({
+  __name: "MultiselectButton",
+  props: {
+    label: {},
+    title: {},
+    palette: {}
+  },
+  emits: ["button-click"],
+  setup(e, { emit: V }) {
+    const c = k(void 0);
+    L(c);
+    function d(o) {
+      const i = 100 / (o.length - 1);
+      return `background: linear-gradient(to right, ${o.map((n, b) => `${n} ${b * i}%`).join(", ")})`;
+    }
+    return (o, i) => (t(), l("div", {
+      ref_key: "root",
+      ref: c,
+      class: "ui-multiselect-button",
+      onClick: i[0] || (i[0] = g((n) => o.$emit("button-click"), ["stop"]))
+    }, [
+      e.label ? (t(), l("label", {
+        key: 0,
+        ref: "label"
+      }, s(e.label), 513)) : a("", !0),
+      y(_, { class: "ui-multiselect-button__contour" }),
+      v("div", A, [
+        e.title ? (t(), l("div", I, s(e.title), 1)) : a("", !0),
+        e.palette && r($)(e.palette) ? (t(), l("div", N, [
+          (t(!0), l(h, null, E(r(m)[e.palette].colors.slice(
+            0,
+            S
+          ), (n) => (t(), l("div", {
+            class: "gradient__item",
+            style: u({ background: n })
+          }, null, 4))), 256))
+        ])) : e.palette ? (t(), l("div", {
+          key: 2,
+          class: "gradient",
+          style: u(d(r(m)[e.palette].colors))
+        }, null, 4)) : (t(), C(r(B), {
+          key: 3,
+          class: "icon",
+          name: "chevron-right"
+        }))
+      ])
+    ], 512));
+  }
+});
+export {
+  T as default
+};
+//# sourceMappingURL=MultiselectButton.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiselectButton.vue.js","sources":["../../src/components/MultiselectButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon16, useLabelNotch } from \"@platforma-sdk/ui-vue\";\nimport { ref } from \"vue\";\nimport {\n  Palette,\n  PaletteData,\n} from './AesSettings/types';\nimport DoubleContour from './DoubleContourTemp.vue';\nimport {\n  isCategorical,\n  PALETTE_MAP,\n} from '../constantsAesthetic';\n\nconst emit = defineEmits([\"button-click\"]);\nconst props = defineProps<{\n  label: string;\n  title?: string;\n  palette?: Palette;\n}>();\nconst root = ref<HTMLInputElement | undefined>(undefined);\nuseLabelNotch(root);\n\nfunction createCssGradient(palette: PaletteData) {\n  const step = 100 / (palette.length - 1);\n  return `background: linear-gradient(to right, ${palette\n    .map((value, idx) => `${value} ${idx * step}%`)\n    .join(\", \")})`;\n}\n\nconst COLORS_CATEGORICAL_VISIBLE = 6;\n</script>\n\n<template>\n  <div ref=\"root\" class=\"ui-multiselect-button\" @click.stop=\"$emit('button-click')\">\n    <label v-if=\"label\" ref=\"label\">\n      {{ label }}\n    </label>\n    <double-contour class=\"ui-multiselect-button__contour\" />\n    <div class=\"ui-multiselect-button__content\">\n      <div v-if=\"title\" class=\"title\">{{ title }}</div>\n      <div v-if=\"palette && isCategorical(palette)\" class=\"gradient\">\n        <div\n          class=\"gradient__item\"\n          v-for=\"color of PALETTE_MAP[palette].colors.slice(\n            0,\n            COLORS_CATEGORICAL_VISIBLE,\n          )\"\n          :style=\"{ background: color }\"\n        />\n      </div>\n      <div\n        v-else-if=\"palette\"\n        class=\"gradient\"\n        :style=\"createCssGradient(PALETTE_MAP[palette].colors)\"\n      />\n      <PlIcon16 v-else class=\"icon\" name=\"chevron-right\" />\n    </div>\n  </div>\n</template>\n"],"names":["COLORS_CATEGORICAL_VISIBLE","root","ref","useLabelNotch","createCssGradient","palette","step","value","idx","_createElementBlock","$emit","__props","_createVNode","DoubleContour","_createElementVNode","_hoisted_1","_hoisted_2","_toDisplayString","_unref","isCategorical","_openBlock","_hoisted_3","_Fragment","PALETTE_MAP","color","_createBlock","PlIcon16"],"mappings":";;;;;;;;;;GA6BMA,IAA6B;;;;;;;;;AAVnC,UAAMC,IAAOC,EAAkC,MAAS;AACxD,IAAAC,EAAcF,CAAI;AAElB,aAASG,EAAkBC,GAAsB;AAC/C,YAAMC,IAAO,OAAOD,EAAQ,SAAS;AACrC,aAAO,yCAAyCA,EAC7C,IAAI,CAACE,GAAOC,MAAQ,GAAGD,CAAK,IAAIC,IAAMF,CAAI,GAAG,EAC7C,KAAK,IAAI,CAAC;AAAA,IACf;2BAMEG,EAwBM,OAAA;AAAA,eAxBG;AAAA,MAAJ,KAAIR;AAAA,MAAO,OAAM;AAAA,MAAyB,kCAAYS,EAAAA,MAAK,cAAA,GAAA,CAAA,MAAA,CAAA;AAAA,IAAA;MACjDC,EAAA,cAAbF,EAEQ,SAAA;AAAA;QAFY,KAAI;AAAA,MAAA,KACnBE,EAAA,KAAK,GAAA,GAAA;MAEVC,EAAyDC,GAAA,EAAzC,OAAM,kCAAgC;AAAA,MACtDC,EAkBM,OAlBNC,GAkBM;AAAA,QAjBOJ,EAAA,cAAXF,EAAiD,OAAjDO,GAAiDC,EAAdN,EAAA,KAAK,GAAA,CAAA;QAC7BA,EAAA,WAAWO,EAAAC,CAAA,EAAcR,EAAA,OAAO,KAA3CS,EAAA,GAAAX,EASM,OATNY,GASM;AAAA,WARJD,EAAA,EAAA,GAAAX,EAOEa,WALgBJ,EAAAK,CAAA,EAAYZ,SAAO,EAAE,OAAO;AAAA;YAAkCX;AAAA,UAAA,IAAvEwB,YAFTf,EAOE,OAAA;AAAA,YANA,OAAM;AAAA,YAKL,uBAAqBe,GAAK;AAAA,UAAA;cAIlBb,EAAA,gBADbF,EAIE,OAAA;AAAA;UAFA,OAAM;AAAA,UACL,SAAOL,EAAkBc,KAAYP,EAAA,OAAO,EAAE,MAAM,CAAA;AAAA,QAAA,qBAEvDc,EAAqDP,EAAAQ,CAAA,GAAA;AAAA;UAApC,OAAM;AAAA,UAAO,MAAK;AAAA,QAAA;;;;;"}

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

@@ -0,0 +1,27 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            ref: string;
+        }): any;
+    };
+    refs: {
+        rootRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    rootRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelModal.vue.js","sources":["../../src/components/PanelModal.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {PlCloseModalBtn, useClickOutside} from '@platforma-sdk/ui-vue';\nimport {ref} from 'vue';\n\nconst $emit = defineEmits(['close']);\n\nconst rootRef = ref();\n\nuseClickOutside([rootRef],() => $emit('close'));\n</script>\n\n<template>\n  <div ref=\"rootRef\" class=\"panel-modal\">\n    <PlCloseModalBtn class=\"close-panel-modal\" @click=\"$emit('close')\"/>\n    <slot ref=\"contentRef\"/>\n  </div>\n</template>\n"],"names":["$emit","__emit","rootRef","ref","useClickOutside","_createElementBlock","_createVNode","_unref","PlCloseModalBtn","_renderSlot","_ctx"],"mappings":";;;;;;AAIA,UAAMA,IAAQC,GAERC,IAAUC,EAAA;AAEhB,WAAAC,EAAgB,CAACF,CAAO,GAAE,MAAMF,EAAM,OAAO,CAAC,mBAI5CK,EAGM,OAAA;AAAA,eAHG;AAAA,MAAJ,KAAIH;AAAA,MAAU,OAAM;AAAA,IAAA;MACvBI,EAAoEC,EAAAC,CAAA,GAAA;AAAA,QAAnD,OAAM;AAAA,QAAqB,gCAAOR,EAAK,OAAA;AAAA,MAAA;MACxDS,EAAwBC,EAAA,QAAA,WAAA,EAAlB,KAAI,cAAY;AAAA,IAAA;;;"}

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

@@ -0,0 +1,22 @@
+type PropsType = {
+    colors: string[];
+    modelValue: number[];
+    getColorForPercent: (percent: number) => string;
+    active: number | null;
+};
+declare const _default: import('vue').DefineComponent<PropsType, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (v: number[]) => any;
+    active: (v: {
+        index: number;
+        status: boolean;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<PropsType> & Readonly<{
+    "onUpdate:modelValue"?: ((v: number[]) => any) | undefined;
+    onActive?: ((v: {
+        index: number;
+        status: boolean;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    barRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/PlColorSlider.vue.js

@@ -0,0 +1,74 @@
+import { defineComponent as k, ref as v, reactive as y, watch as p, computed as u, onMounted as C, createElementBlock as f, openBlock as d, createElementVNode as i, normalizeStyle as $, createCommentVNode as w, Fragment as B, renderList as F, createBlock as E } from "vue";
+import M from "./PlColorSliderThumb.vue.js";
+const P = { class: "pl-color-slider" }, R = { class: "pl-color-slider__wrapper" }, j = { class: "pl-color-slider__thumbs-contaier" }, S = /* @__PURE__ */ k({
+  __name: "PlColorSlider",
+  props: {
+    colors: {},
+    modelValue: {},
+    getColorForPercent: { type: Function },
+    active: {}
+  },
+  emits: ["update:modelValue", "active"],
+  setup(r, { emit: _ }) {
+    const a = r, g = _, c = v(), n = y({}), o = v(-1);
+    p(
+      () => a.modelValue,
+      () => {
+        a.modelValue.forEach((e, l) => n[l] = e);
+      },
+      { immediate: !0 }
+    );
+    const h = u(
+      () => Math.floor(o.value !== -1 ? 0 - o.value : 0)
+    ), V = u(
+      () => Math.floor(o.value !== -1 ? 100 + o.value : 100)
+    );
+    p(
+      () => n,
+      (e) => {
+        g("update:modelValue", Object.values(e));
+      },
+      { deep: !0 }
+    );
+    const b = u(() => {
+      const e = 100 / (a.colors.length - 1);
+      return `linear-gradient(to right, ${a.colors.map((m, t) => `${m} ${e * t}%`).join(", ")})`;
+    });
+    return C(() => {
+      let e = 16, l = c.value.getBoundingClientRect().width - e * 2;
+      o.value = e / l * 100;
+    }), (e, l) => (d(), f("div", P, [
+      i("div", R, [
+        i("div", {
+          ref_key: "barRef",
+          ref: c,
+          class: "pl-color-slider__color-contaier"
+        }, [
+          i("div", {
+            style: $({ background: b.value }),
+            class: "pl-color-slider__gradient"
+          }, null, 4)
+        ], 512),
+        i("div", j, [
+          c.value ? (d(!0), f(B, { key: 0 }, F(r.modelValue, (m, t) => (d(), E(M, {
+            modelValue: n[t],
+            "onUpdate:modelValue": (s) => n[t] = s,
+            "is-active": r.active === t,
+            key: t,
+            min: h.value,
+            max: V.value,
+            "bar-ref": c.value,
+            "get-color-for-percent": r.getColorForPercent,
+            class: "pl-color-slider__thumb",
+            tabindex: "0",
+            onActive: (s) => e.$emit("active", { index: t, status: s })
+          }, null, 8, ["modelValue", "onUpdate:modelValue", "is-active", "min", "max", "bar-ref", "get-color-for-percent", "onActive"]))), 128)) : w("", !0)
+        ])
+      ])
+    ]));
+  }
+});
+export {
+  S as default
+};
+//# sourceMappingURL=PlColorSlider.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlColorSlider.vue.js","sources":["../../src/components/PlColorSlider.vue"],"sourcesContent":["<template>\n  <div class=\"pl-color-slider\">\n    <div class=\"pl-color-slider__wrapper\">\n      <div ref=\"barRef\" class=\"pl-color-slider__color-contaier\">\n        <div\n          :style=\"{ background: gradient }\"\n          class=\"pl-color-slider__gradient\"\n        />\n      </div>\n      <div class=\"pl-color-slider__thumbs-contaier\">\n        <template v-if=\"barRef\">\n          <PlColorSliderThumb\n            v-for=\"(val, index) in modelValue\"\n            v-model=\"models[index]\"\n            :is-active=\"active === index\"\n            :key=\"index\"\n            :min=\"min\"\n            :max=\"max\"\n            :bar-ref=\"barRef\"\n            :get-color-for-percent=\"getColorForPercent\"\n            class=\"pl-color-slider__thumb\"\n            tabindex=\"0\"\n            @active=\"$emit('active', { index: index, status: $event })\"\n          />\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch, onMounted } from 'vue';\nimport PlColorSliderThumb from './PlColorSliderThumb.vue';\n\ntype PropsType = {\n  colors: string[];\n  modelValue: number[];\n  getColorForPercent: (percent: number) => string;\n  active: number | null;\n};\n\nconst props = defineProps<PropsType>();\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: PropsType['modelValue']): void;\n  (e: 'active', v: { index: number; status: boolean }): void;\n}>();\nconst barRef = ref<HTMLElement>();\nconst models = reactive<{ [key: string]: number }>({});\nconst paddingDelta = ref(-1);\n\nwatch(\n  () => props.modelValue,\n  () => {\n    props.modelValue.forEach((value, index) => (models[index] = value));\n  },\n  { immediate: true },\n);\n\nconst min = computed(() =>\n  Math.floor(paddingDelta.value !== -1 ? 0 - paddingDelta.value : 0),\n);\n\nconst max = computed(() =>\n  Math.floor(paddingDelta.value !== -1 ? 100 + paddingDelta.value : 100),\n);\nwatch(\n  () => models,\n  (val) => {\n    emit('update:modelValue', Object.values(val));\n  },\n  { deep: true },\n);\n\nconst gradient = computed(() => {\n  const portion = 100 / (props.colors.length - 1);\n  const result = props.colors\n    .map((color, index) => {\n      return `${color} ${portion * index}%`;\n    })\n    .join(', ');\n\n  return `linear-gradient(to right, ${result})`;\n});\n\nonMounted(() => {\n  let padding = 16;\n  let w =\n    (barRef.value as HTMLElement).getBoundingClientRect().width - padding * 2;\n  paddingDelta.value = (padding / w) * 100;\n});\n</script>\n"],"names":["props","__props","emit","__emit","barRef","ref","models","reactive","paddingDelta","watch","value","index","min","computed","max","val","gradient","portion","color","onMounted","padding","w","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_Fragment","_renderList","_createBlock","PlColorSliderThumb","$event","$emit"],"mappings":";;;;;;;;;;;;AAyCA,UAAMA,IAAQC,GACRC,IAAOC,GAIPC,IAASC,EAAA,GACTC,IAASC,EAAoC,EAAE,GAC/CC,IAAeH,EAAI,EAAE;AAE3B,IAAAI;AAAA,MACE,MAAMT,EAAM;AAAA,MACZ,MAAM;AACJ,QAAAA,EAAM,WAAW,QAAQ,CAACU,GAAOC,MAAWL,EAAOK,CAAK,IAAID,CAAM;AAAA,MACpE;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,UAAME,IAAMC;AAAA,MAAS,MACnB,KAAK,MAAML,EAAa,UAAU,KAAK,IAAIA,EAAa,QAAQ,CAAC;AAAA,IAAA,GAG7DM,IAAMD;AAAA,MAAS,MACnB,KAAK,MAAML,EAAa,UAAU,KAAK,MAAMA,EAAa,QAAQ,GAAG;AAAA,IAAA;AAEvE,IAAAC;AAAA,MACE,MAAMH;AAAA,MACN,CAACS,MAAQ;AACP,QAAAb,EAAK,qBAAqB,OAAO,OAAOa,CAAG,CAAC;AAAA,MAC9C;AAAA,MACA,EAAE,MAAM,GAAA;AAAA,IAAK;AAGf,UAAMC,IAAWH,EAAS,MAAM;AAC9B,YAAMI,IAAU,OAAOjB,EAAM,OAAO,SAAS;AAO7C,aAAO,6BANQA,EAAM,OAClB,IAAI,CAACkB,GAAOP,MACJ,GAAGO,CAAK,IAAID,IAAUN,CAAK,GACnC,EACA,KAAK,IAAI,CAE8B;AAAA,IAC5C,CAAC;AAED,WAAAQ,EAAU,MAAM;AACd,UAAIC,IAAU,IACVC,IACDjB,EAAO,MAAsB,sBAAA,EAAwB,QAAQgB,IAAU;AAC1E,MAAAZ,EAAa,QAASY,IAAUC,IAAK;AAAA,IACvC,CAAC,cAxFCC,EAAA,GAAAC,EA0BM,OA1BNC,GA0BM;AAAA,MAzBJC,EAwBM,OAxBNC,GAwBM;AAAA,QAvBJD,EAKM,OAAA;AAAA,mBALG;AAAA,UAAJ,KAAIrB;AAAA,UAAS,OAAM;AAAA,QAAA;UACtBqB,EAGE,OAAA;AAAA,YAFC,uBAAqBT,EAAA,OAAQ;AAAA,YAC9B,OAAM;AAAA,UAAA;;QAGVS,EAgBM,OAhBNE,GAgBM;AAAA,UAfYvB,EAAA,SACdkB,EAAA,EAAA,GAAAC,EAYEK,GAAA,EAAA,KAAA,EAAA,GAAAC,EAXuB5B,EAAA,YAAU,CAAzBc,GAAKJ,YADfmB,EAYEC,GAAA;AAAA,YAVS,YAAAzB,EAAOK,CAAK;AAAA,YAAZ,uBAAA,CAAAqB,MAAA1B,EAAOK,CAAK,IAAAqB;AAAA,YACpB,aAAW/B,EAAA,WAAWU;AAAA,YACtB,KAAKA;AAAA,YACL,KAAKC,EAAA;AAAA,YACL,KAAKE,EAAA;AAAA,YACL,WAASV,EAAA;AAAA,YACT,yBAAuBH,EAAA;AAAA,YACxB,OAAM;AAAA,YACN,UAAS;AAAA,YACR,UAAM,CAAA+B,MAAEC,EAAAA,MAAK,UAAA,EAAA,OAAAtB,WAAmCqB,EAAA,CAAM;AAAA,UAAA;;;;;;"}

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

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    barRef: HTMLElement;
+    modelValue: number;
+    min: number;
+    max: number;
+    getColorForPercent: (percent: number) => string;
+    padding?: number;
+    isActive: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: number) => any;
+    active: (v: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    onActive?: ((v: boolean) => any) | undefined;
+}>, {
+    padding: number;
+    min: number;
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    wrapper: HTMLDivElement;
+    thumb: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/PlColorSliderThumb.vue.js

@@ -0,0 +1,81 @@
+import { defineComponent as k, ref as d, computed as b, unref as B, createElementBlock as S, openBlock as _, normalizeClass as y, normalizeStyle as A, createElementVNode as C } from "vue";
+import { utils as u } from "@milaboratories/helpers";
+import { useMouseCapture as F } from "@platforma-sdk/ui-vue";
+const c = 1, I = /* @__PURE__ */ k({
+  __name: "PlColorSliderThumb",
+  props: {
+    barRef: {},
+    modelValue: {},
+    min: { default: 0 },
+    max: { default: 100 },
+    getColorForPercent: {},
+    padding: { default: 16 },
+    isActive: { type: Boolean }
+  },
+  emits: ["update:modelValue", "active"],
+  setup(m, { emit: L }) {
+    const l = m, a = L, w = d(), p = d(), i = d(!1), n = l.min, r = l.max;
+    let f = d(0);
+    const V = r - n, x = l.padding / l.barRef.getBoundingClientRect().width * 100 / 2, v = b(() => u.clamp(
+      (l.modelValue ?? 0) + f.value,
+      Math.ceil(n + x),
+      Math.ceil(r - x)
+    )), M = b(() => ({
+      right: `calc(${Math.ceil((1 - E.value) * 100)}%) `
+    })), E = b(() => (v.value - n) / V);
+    function R(t) {
+      const e = u.clamp(t, n, r);
+      return Math.round((e + Number.EPSILON) * (1 / c)) / (1 / c);
+    }
+    function s() {
+      i.value = !1;
+    }
+    function g(t) {
+      t ? (document.addEventListener("mouseup", s), document.addEventListener("focusout", s)) : (document.removeEventListener("mouseup", s), document.removeEventListener("focusout", s)), i.value = t, a("active", t);
+    }
+    F(w, (t) => {
+      var e;
+      u.tapIf((e = B(l.barRef)) == null ? void 0 : e.getBoundingClientRect(), (o) => {
+        const { dx: $ } = t;
+        f.value = $ / o.width * V, t.stop && (a("update:modelValue", R(v.value)), f.value = 0);
+      });
+    });
+    function P(t) {
+      ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Enter"].includes(
+        t.code
+      ) && t.preventDefault(), t.code === "ArrowLeft" && a("update:modelValue", u.clamp(l.modelValue - c, n, r)), t.code === "ArrowRight" && a("update:modelValue", u.clamp(l.modelValue + c, n, r));
+    }
+    function h(t) {
+      var e, o;
+      t ? (e = p.value) == null || e.classList.add("pl-color-slider__top-index") : (o = p.value) == null || o.classList.remove("pl-color-slider__top-index");
+    }
+    return (t, e) => (_(), S("div", {
+      ref_key: "wrapper",
+      ref: p,
+      style: A(M.value),
+      class: y([{ "active-thumb": i.value || m.isActive }, "pl-color-slider__thumb"]),
+      tabindex: "0",
+      onMousedown: e[2] || (e[2] = (o) => g(!0)),
+      onMouseup: e[3] || (e[3] = (o) => g(!1)),
+      onKeydown: P,
+      onFocus: e[4] || (e[4] = (o) => g(!0))
+    }, [
+      C("div", {
+        ref_key: "thumb",
+        ref: w,
+        class: y([{ active: i.value }, "pl-color-slider__thumb-roof"]),
+        onMouseover: e[0] || (e[0] = (o) => h(!0)),
+        onMouseout: e[1] || (e[1] = (o) => h(!1))
+      }, [
+        C("div", {
+          class: "pl-color-slider__thumb-color-indicator",
+          style: A({ backgroundColor: m.getColorForPercent(v.value) })
+        }, null, 4)
+      ], 34)
+    ], 38));
+  }
+});
+export {
+  I as default
+};
+//# sourceMappingURL=PlColorSliderThumb.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlColorSliderThumb.vue.js","sources":["../../src/components/PlColorSliderThumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { utils } from '@milaboratories/helpers';\nimport { useMouseCapture } from '@platforma-sdk/ui-vue';\nimport { computed, ref, unref } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    barRef: HTMLElement;\n    modelValue: number;\n    min: number;\n    max: number;\n    getColorForPercent: (percent: number) => string;\n    padding?: number;\n    isActive: boolean;\n  }>(),\n  { min: 0, max: 100, padding: 16 }\n);\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: number): void;\n  (e: 'active', v: boolean): void;\n}>();\n\nconst thumb = ref<HTMLElement>();\nconst wrapper = ref<HTMLElement>();\nconst active = ref(false);\nconst min = props.min;\nconst max = props.max;\nconst step = 1;\nlet deltaValue = ref(0);\nconst range = max - min;\n\nconst onePerc =\n  ((props.padding / props.barRef.getBoundingClientRect().width) * 100) / 2;\n\nconst localValue = computed(() => {\n  return utils.clamp(\n    (props.modelValue ?? 0) + deltaValue.value,\n    Math.ceil(min + onePerc),\n    Math.ceil(max - onePerc)\n  );\n});\n\nconst thumbStyle = computed(() => {\n  let value = Math.ceil((1 - position.value) * 100);\n  return {\n    right: `calc(${value}%) `\n  };\n});\n\nconst position = computed(() => {\n  return (localValue.value - min) / range;\n});\n\nfunction round(value: number) {\n  const v = utils.clamp(value, min, max);\n  return Math.round((v + Number.EPSILON) * (1 / step)) / (1 / step);\n}\n\nfunction upHandler() {\n  active.value = false;\n}\n\nfunction emitActive(val: boolean) {\n  if (val) {\n    document.addEventListener('mouseup', upHandler);\n    document.addEventListener('focusout', upHandler);\n  } else {\n    document.removeEventListener('mouseup', upHandler);\n    document.removeEventListener('focusout', upHandler);\n  }\n  active.value = val;\n  emit('active', val);\n}\n\nuseMouseCapture(thumb, (ev) => {\n  utils.tapIf(unref(props.barRef)?.getBoundingClientRect(), (rect: DOMRect) => {\n    const { dx } = ev;\n    deltaValue.value = (dx / rect.width) * range;\n    if (ev.stop) {\n      emit('update:modelValue', round(localValue.value));\n      deltaValue.value = 0;\n    }\n  });\n});\n\nfunction handleKeyPress(e: KeyboardEvent) {\n  if (\n    ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Enter'].includes(\n      e.code\n    )\n  ) {\n    e.preventDefault();\n  }\n\n  if (e.code === 'ArrowLeft') {\n    emit('update:modelValue', utils.clamp(props.modelValue - step, min, max));\n  }\n  if (e.code === 'ArrowRight') {\n    emit('update:modelValue', utils.clamp(props.modelValue + step, min, max));\n  }\n}\n\nfunction toggleZindex(mode: boolean) {\n  if (mode) {\n    wrapper.value?.classList.add('pl-color-slider__top-index');\n  } else {\n    wrapper.value?.classList.remove('pl-color-slider__top-index');\n  }\n}\n</script>\n<template>\n  <div\n    ref=\"wrapper\"\n    :style=\"thumbStyle\"\n    :class=\"{ 'active-thumb': active || isActive }\"\n    class=\"pl-color-slider__thumb\"\n    tabindex=\"0\"\n    @mousedown=\"emitActive(true)\"\n    @mouseup=\"emitActive(false)\"\n    @keydown=\"handleKeyPress\"\n    @focus=\"emitActive(true)\"\n  >\n    <div\n      ref=\"thumb\"\n      :class=\"{ active: active }\"\n      class=\"pl-color-slider__thumb-roof\"\n      @mouseover=\"toggleZindex(true)\"\n      @mouseout=\"toggleZindex(false)\"\n    >\n      <div\n        class=\"pl-color-slider__thumb-color-indicator\"\n        :style=\"{ backgroundColor: getColorForPercent(localValue) }\"\n      ></div>\n    </div>\n  </div>\n</template>\n"],"names":["step","props","__props","emit","__emit","thumb","ref","wrapper","active","min","max","deltaValue","range","onePerc","localValue","computed","utils","thumbStyle","position","round","value","v","upHandler","emitActive","val","useMouseCapture","ev","_a","unref","rect","dx","handleKeyPress","e","toggleZindex","mode","_b","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle"],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    gap?: number;
+    targetRef?: HTMLElement;
+    width?: number;
+    height?: number;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        popup: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "popup:close": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onPopup:close"?: ((...args: any[]) => any) | undefined;
+}>, {
+    width: number;
+    gap: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    popup: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Popup.vue.js

@@ -0,0 +1,70 @@
+import { defineComponent as $, ref as l, createBlock as k, openBlock as m, Teleport as H, createElementVNode as i, normalizeStyle as h, normalizeClass as Y, createElementBlock as P, renderSlot as B } from "vue";
+import { useClickOutside as C, usePosition as E } from "@platforma-sdk/ui-vue";
+const z = /* @__PURE__ */ $({
+  __name: "Popup",
+  props: {
+    gap: { default: 8 },
+    targetRef: {},
+    width: { default: 258 },
+    height: {}
+  },
+  emits: ["popup:close"],
+  setup(a, { emit: d }) {
+    const v = d, o = a;
+    function x() {
+      v("popup:close");
+    }
+    const c = l(), r = l(o.targetRef), n = l("bottom"), s = l(""), p = l("");
+    function w(u, e = 8) {
+      E(u, (t) => {
+        if (o.height && t.offsetY + t.height + 3 * e + o.height > t.clientHeight) {
+          const g = t.right - t.width - e;
+          if (t.clientHeight - t.offsetY > o.height + e) {
+            const f = t.offsetY;
+            s.value = `left: ${g}px; top: ${f}px;`, p.value = "top: 16px;", n.value = "left-bottom";
+          } else {
+            const f = t.clientHeight - o.height - 2 * e;
+            s.value = `left: ${g}px; top: ${f}px;`;
+            const b = t.offsetY + 2 * Math.floor(t.height / 2), y = t.clientHeight - b;
+            p.value = `bottom: ${y}px;`, n.value = "left-bottom";
+          }
+        } else
+          s.value = `left: ${t.right}px; top: ${t.offsetY + t.height + e}px;`, p.value = "", n.value = "bottom";
+      });
+    }
+    return w(r, o.gap), C([r, c], () => x()), (u, e) => (m(), k(H, { to: "body" }, [
+      i("div", {
+        class: "popup",
+        style: h(s.value),
+        onClick: e[0] || (e[0] = (t) => t.stopPropagation())
+      }, [
+        i("div", {
+          ref_key: "popup",
+          ref: c,
+          class: Y(["popup__content", n.value]),
+          style: h({ width: `${a.width}px` })
+        }, [
+          i("div", null, [
+            B(u.$slots, "default")
+          ]),
+          (m(), P("svg", {
+            style: h(p.value),
+            class: "beak",
+            width: "5",
+            height: "9",
+            viewBox: "0 0 3 8",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, [...e[1] || (e[1] = [
+            i("path", { d: "M4 8L0 4L4 0L4 8 Z" }, null, -1),
+            i("polyline", { points: "4,8 0,4 4,0" }, null, -1)
+          ])], 4))
+        ], 6)
+      ], 4)
+    ]));
+  }
+});
+export {
+  z as default
+};
+//# sourceMappingURL=Popup.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.vue.js","sources":["../../src/components/Popup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Ref } from \"vue\";\nimport { ref } from \"vue\";\nimport { useClickOutside, usePosition } from \"@platforma-sdk/ui-vue\";\n\nconst emit = defineEmits([\"popup:close\"]);\n\nconst props = withDefaults(\n  defineProps<{\n    gap?: number;\n    targetRef?: HTMLElement;\n    width?: number;\n    height?: number;\n  }>(),\n  {\n    gap: 8,\n    width: 258,\n  },\n);\n\nfunction closeTooltip() {\n  emit(\"popup:close\");\n}\n\nconst popup = ref<HTMLElement | undefined>();\nconst root = ref<HTMLElement | undefined>(props.targetRef);\n\nconst position = ref<\"left-bottom\" | \"bottom\">(\"bottom\");\n\nconst style = ref(\"\");\nconst beakStyle = ref(\"\");\n\nfunction usePopupPosition(el: Ref<HTMLElement | undefined>, gap = 8) {\n  usePosition(el, (pos) => {\n    const notEnoughHeight =\n      props.height &&\n        (pos.offsetY + pos.height + 3 * gap + props.height > pos.clientHeight);\n    if (notEnoughHeight) {\n      const left = pos.right - pos.width - gap;\n      if (pos.clientHeight - pos.offsetY > props.height + gap) {\n        const top = pos.offsetY\n        style.value = `left: ${left}px; top: ${top}px;`;\n        beakStyle.value = \"top: 16px;\";\n        position.value = \"left-bottom\";\n      } else {\n        const top = pos.clientHeight - props.height - 2 * gap;\n        style.value = `left: ${left}px; top: ${top}px;`;\n        const offsetMiddleY = pos.offsetY + 2 * Math.floor(pos.height / 2);\n        const bottom = pos.clientHeight - offsetMiddleY;\n        beakStyle.value = `bottom: ${bottom}px;`;\n        position.value = \"left-bottom\";\n      }\n    } else {\n      style.value = `left: ${pos.right}px; top: ${pos.offsetY + pos.height + gap}px;`;\n      beakStyle.value = '';\n      position.value = \"bottom\";\n    }\n  });\n}\n\nusePopupPosition(root, props.gap);\nuseClickOutside([root, popup], () => closeTooltip());\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div class=\"popup\" :style=\"style\" @click=\"(e) => e.stopPropagation()\">\n      <div\n        ref=\"popup\"\n        class=\"popup__content\"\n        :class=\"position\"\n        :style=\"{ width: `${width}px` }\"\n      >\n        <div>\n          <slot />\n        </div>\n        <svg\n          :style=\"beakStyle\"\n          class=\"beak\"\n          width=\"5\"\n          height=\"9\"\n          viewBox=\"0 0 3 8\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M4 8L0 4L4 0L4 8 Z\" />\n          <polyline points=\"4,8 0,4 4,0\" />\n        </svg>\n      </div>\n    </div>\n  </Teleport>\n</template>\n"],"names":["emit","__emit","props","__props","closeTooltip","popup","ref","root","position","style","beakStyle","usePopupPosition","el","gap","usePosition","pos","left","top","offsetMiddleY","bottom","useClickOutside","_createBlock","_Teleport","_createElementVNode","_cache","e","_normalizeClass","_renderSlot","_ctx","_createElementBlock"],"mappings":";;;;;;;;;;;;AAKA,UAAMA,IAAOC,GAEPC,IAAQC;AAad,aAASC,IAAe;AACtB,MAAAJ,EAAK,aAAa;AAAA,IACpB;AAEA,UAAMK,IAAQC,EAAA,GACRC,IAAOD,EAA6BJ,EAAM,SAAS,GAEnDM,IAAWF,EAA8B,QAAQ,GAEjDG,IAAQH,EAAI,EAAE,GACdI,IAAYJ,EAAI,EAAE;AAExB,aAASK,EAAiBC,GAAkCC,IAAM,GAAG;AACnE,MAAAC,EAAYF,GAAI,CAACG,MAAQ;AAIvB,YAFEb,EAAM,UACHa,EAAI,UAAUA,EAAI,SAAS,IAAIF,IAAMX,EAAM,SAASa,EAAI,cACxC;AACnB,gBAAMC,IAAOD,EAAI,QAAQA,EAAI,QAAQF;AACrC,cAAIE,EAAI,eAAeA,EAAI,UAAUb,EAAM,SAASW,GAAK;AACvD,kBAAMI,IAAMF,EAAI;AAChB,YAAAN,EAAM,QAAQ,SAASO,CAAI,YAAYC,CAAG,OAC1CP,EAAU,QAAQ,cAClBF,EAAS,QAAQ;AAAA,UACnB,OAAO;AACL,kBAAMS,IAAMF,EAAI,eAAeb,EAAM,SAAS,IAAIW;AAClD,YAAAJ,EAAM,QAAQ,SAASO,CAAI,YAAYC,CAAG;AAC1C,kBAAMC,IAAgBH,EAAI,UAAU,IAAI,KAAK,MAAMA,EAAI,SAAS,CAAC,GAC3DI,IAASJ,EAAI,eAAeG;AAClC,YAAAR,EAAU,QAAQ,WAAWS,CAAM,OACnCX,EAAS,QAAQ;AAAA,UACnB;AAAA,QACF;AACE,UAAAC,EAAM,QAAQ,SAASM,EAAI,KAAK,YAAYA,EAAI,UAAUA,EAAI,SAASF,CAAG,OAC1EH,EAAU,QAAQ,IAClBF,EAAS,QAAQ;AAAA,MAErB,CAAC;AAAA,IACH;AAEA,WAAAG,EAAiBJ,GAAML,EAAM,GAAG,GAChCkB,EAAgB,CAACb,GAAMF,CAAK,GAAG,MAAMD,GAAc,mBAIjDiB,EAyBWC,GAAA,EAzBD,IAAG,UAAM;AAAA,MACjBC,EAuBM,OAAA;AAAA,QAvBD,OAAM;AAAA,QAAS,SAAOd,EAAA,KAAK;AAAA,QAAG,SAAKe,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAGC,MAAMA,EAAE,gBAAA;AAAA,MAAe;QAChEF,EAqBM,OAAA;AAAA,mBApBA;AAAA,UAAJ,KAAIlB;AAAA,UACJ,OAAKqB,EAAA,CAAC,kBACElB,EAAA,KAAQ,CAAA;AAAA,UACf,qBAAmBL,EAAA,KAAK,MAAA;AAAA,QAAA;UAEzBoB,EAEM,OAAA,MAAA;AAAA,YADJI,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;gBAEVC,EAWM,OAAA;AAAA,YAVH,SAAOnB,EAAA,KAAS;AAAA,YACjB,OAAM;AAAA,YACN,OAAM;AAAA,YACN,QAAO;AAAA,YACP,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,UAAA;YAENa,EAA+B,QAAA,EAAzB,GAAE,qBAAA,GAAoB,MAAA,EAAA;AAAA,YAC5BA,EAAiC,YAAA,EAAvB,QAAO,cAAA,GAAa,MAAA,EAAA;AAAA,UAAA;;;;;;"}