@milaboratories/graph-maker 1.2.5 → 1.2.6

package/dist/components/GraphStatusScreen.vue2.js

@@ -1,66 +1,45 @@
-import { defineComponent as x, computed as e, createElementBlock as T, createCommentVNode as g, openBlock as u, normalizeStyle as I, normalizeClass as $, createBlock as s, unref as i } from "vue";
-import { PlPlaceholder as v, PlAgOverlayLoading as M, PlAgOverlayNoRows as k } from "@platforma-sdk/ui-vue";
-import { DEFAULT_STATUS_TEXT as h } from "../constantsCommon.js";
-const E = /* @__PURE__ */ x({
-  __name: "GraphStatusScreen",
-  props: {
-    graphStatus: {},
-    customStatusText: { default: void 0 },
-    errorInfo: { default: null },
-    top: { default: 0 },
-    left: { default: 0 },
-    right: { default: 0 },
-    bottom: { default: 0 }
-  },
-  setup(n) {
-    const t = n, d = e(() => {
-      var r, o, m, p, c, y;
-      return ((r = t.errorInfo) == null ? void 0 : r.type) === "tooManyFacets" ? `Too many facets (${t.errorInfo.info.count}).
-Maximum count is ${t.errorInfo.info.maxCount}.
-Try to filter the data.` : ((o = t.errorInfo) == null ? void 0 : o.type) === "tooManyPrimaryGroups" ? `Too many primary groups (${t.errorInfo.info.count}).
-Maximum count is ${t.errorInfo.info.maxCount}.
-Try to filter the data.` : ((m = t.errorInfo) == null ? void 0 : m.type) === "tooManySecondaryGroups" ? `Too many secondary groups (${t.errorInfo.info.count}).
-Maximum count is ${t.errorInfo.info.maxCount}.
-Try to filter the data.` : ((p = t.errorInfo) == null ? void 0 : p.type) === "tooManyScatterplotGroupsX" ? `Too many categories on X axis (${t.errorInfo.info.count}).
-Maximum count is ${t.errorInfo.info.maxCount}.
-Try to filter the data.` : ((c = t.errorInfo) == null ? void 0 : c.type) === "tooManyScatterplotGroupsY" ? `Too many categories on Y axis (${t.errorInfo.info.count}).
-Maximum count is ${t.errorInfo.info.maxCount}.
-Try to filter the data.` : ((y = t.errorInfo) == null ? void 0 : y.type) === "tooManyHistogramGroups" ? `Too many groups (${t.errorInfo.info.count}).
-Maximum count is ${t.errorInfo.info.maxCount}.
-Try to filter the data.` : "";
-    }), l = e(() => t.graphStatus === "noPframe" || t.graphStatus === "empty"), f = e(() => t.graphStatus === "notReady" || t.graphStatus === "inconsistent" || t.graphStatus === "knownError" || t.graphStatus === "unknownError"), a = e(() => {
-      var r, o;
-      return t.graphStatus === "knownError" ? d.value : ((o = (r = t.customStatusText) == null ? void 0 : r[t.graphStatus]) == null ? void 0 : o.title) ?? h[t.graphStatus].title;
-    }), S = e(() => {
-      var r, o;
-      return t.graphStatus !== "loading" && t.graphStatus !== "running" ? "" : ((o = (r = t.customStatusText) == null ? void 0 : r[t.graphStatus]) == null ? void 0 : o.subtitle) ?? h[t.graphStatus].subtitle;
-    });
-    return (r, o) => n.graphStatus !== "ready" ? (u(), T("div", {
-      key: 0,
-      class: $(["graph-maker__loading", [r.$style.loaderContainer, { [r.$style.withBorder]: l.value || f.value }]]),
-      style: I({
-        top: `${t.top}px`,
-        bottom: `${t.bottom}px`,
-        right: `${t.right}px`,
-        left: `${t.left}px`
-      })
-    }, [
-      n.graphStatus === "loading" || n.graphStatus === "running" ? (u(), s(i(v), {
-        key: 0,
-        variant: "graph",
-        title: a.value,
-        subtitle: S.value
-      }, null, 8, ["title", "subtitle"])) : l.value ? (u(), s(i(M), {
-        key: a.value + "catInBag",
-        params: { variant: "not-ready", notReadyText: a.value }
-      }, null, 8, ["params"])) : f.value ? (u(), s(i(k), {
-        key: a.value + "catNoData",
-        params: { text: a.value }
-      }, null, 8, ["params"])) : g("", !0)
-    ], 6)) : g("", !0);
-  }
+import { DEFAULT_STATUS_TEXT as e } from "../constantsCommon.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, unref as l } from "vue";
+import { PlAgOverlayLoading as u, PlAgOverlayNoRows as d, PlPlaceholder as f } from "@platforma-sdk/ui-vue";
+var p = /* @__PURE__ */ a({
+	__name: "GraphStatusScreen",
+	props: {
+		graphStatus: {},
+		customStatusText: { default: void 0 },
+		errorInfo: { default: null },
+		top: { default: 0 },
+		left: { default: 0 },
+		right: { default: 0 },
+		bottom: { default: 0 }
+	},
+	setup(a) {
+		let p = a, m = t(() => p.errorInfo?.type === "tooManyFacets" ? `Too many facets (${p.errorInfo.info.count}).\nMaximum count is\u00A0${p.errorInfo.info.maxCount}.\nTry to\u00A0filter the\u00A0data.` : p.errorInfo?.type === "tooManyPrimaryGroups" ? `Too many primary groups\u00A0(${p.errorInfo.info.count}).\nMaximum count is\u00A0${p.errorInfo.info.maxCount}.\nTry to\u00A0filter the\u00A0data.` : p.errorInfo?.type === "tooManySecondaryGroups" ? `Too many secondary groups\u00A0(${p.errorInfo.info.count}).\nMaximum count is\u00A0${p.errorInfo.info.maxCount}.\nTry to\u00A0filter the\u00A0data.` : p.errorInfo?.type === "tooManyScatterplotGroupsX" ? `Too many categories on X axis\u00A0(${p.errorInfo.info.count}).\nMaximum count is\u00A0${p.errorInfo.info.maxCount}.\nTry to\u00A0filter the\u00A0data.` : p.errorInfo?.type === "tooManyScatterplotGroupsY" ? `Too many categories on Y axis\u00A0(${p.errorInfo.info.count}).\nMaximum count is\u00A0${p.errorInfo.info.maxCount}.\nTry to\u00A0filter the\u00A0data.` : p.errorInfo?.type === "tooManyHistogramGroups" ? `Too many groups\u00A0(${p.errorInfo.info.count}).\nMaximum count is\u00A0${p.errorInfo.info.maxCount}.\nTry to\u00A0filter the\u00A0data.` : ""), h = t(() => p.graphStatus === "noPframe" || p.graphStatus === "empty"), g = t(() => p.graphStatus === "notReady" || p.graphStatus === "inconsistent" || p.graphStatus === "knownError" || p.graphStatus === "unknownError"), _ = t(() => p.graphStatus === "knownError" ? m.value : p.customStatusText?.[p.graphStatus]?.title ?? e[p.graphStatus].title), v = t(() => p.graphStatus !== "loading" && p.graphStatus !== "running" ? "" : p.customStatusText?.[p.graphStatus]?.subtitle ?? e[p.graphStatus].subtitle);
+		return (e, t) => a.graphStatus === "ready" ? r("", !0) : (c(), i("div", {
+			key: 0,
+			class: o(["graph-maker__loading", [e.$style.loaderContainer, { [e.$style.withBorder]: h.value || g.value }]]),
+			style: s({
+				top: `${p.top}px`,
+				bottom: `${p.bottom}px`,
+				right: `${p.right}px`,
+				left: `${p.left}px`
+			})
+		}, [a.graphStatus === "loading" || a.graphStatus === "running" ? (c(), n(l(f), {
+			key: 0,
+			variant: "graph",
+			title: _.value,
+			subtitle: v.value
+		}, null, 8, ["title", "subtitle"])) : h.value ? (c(), n(l(u), {
+			key: _.value + "catInBag",
+			params: {
+				variant: "not-ready",
+				notReadyText: _.value
+			}
+		}, null, 8, ["params"])) : g.value ? (c(), n(l(d), {
+			key: _.value + "catNoData",
+			params: { text: _.value }
+		}, null, 8, ["params"])) : r("", !0)], 6));
+	}
 });
-export {
-  E as default
-};
-//# sourceMappingURL=GraphStatusScreen.vue2.js.map
+export { p as default };
+
+//# sourceMappingURL=GraphStatusScreen.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GraphStatusScreen.vue2.js","sources":["../../src/components/GraphStatusScreen.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlPlaceholder, PlAgOverlayLoading, PlAgOverlayNoRows } from '@platforma-sdk/ui-vue';\nimport { computed } from 'vue';\nimport { DEFAULT_STATUS_TEXT } from '../constantsCommon';\nimport type { GraphStatus, StatusTextData } from '../types';\nimport type { ErrorInfo } from '@milaboratories/miplots4';\n\nconst props = withDefaults(defineProps<{\n  graphStatus: GraphStatus;\n  customStatusText?: Partial<StatusTextData>;\n  errorInfo?: ErrorInfo | null;\n  top?: number;\n  left?: number;\n  right?: number;\n  bottom?: number;\n}>(), {\n  customStatusText: undefined,\n  errorInfo: null,\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n});\n\nconst errorMessage = computed(() => {\n  if (props.errorInfo?.type === 'tooManyFacets') {\n    return `Too many facets (${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  if (props.errorInfo?.type === 'tooManyPrimaryGroups') {\n    return `Too many primary groups\\u00A0(${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  if (props.errorInfo?.type === 'tooManySecondaryGroups') {\n    return `Too many secondary groups\\u00A0(${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  if (props.errorInfo?.type === 'tooManyScatterplotGroupsX') {\n    return `Too many categories on X axis\\u00A0(${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  if (props.errorInfo?.type === 'tooManyScatterplotGroupsY') {\n    return `Too many categories on Y axis\\u00A0(${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  if (props.errorInfo?.type === 'tooManyHistogramGroups') {\n    return `Too many groups\\u00A0(${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  return '';\n});\n\nconst catInBagStatus = computed(() => props.graphStatus === 'noPframe' || props.graphStatus === 'empty');\nconst catNoDataStatus = computed(() => props.graphStatus === 'notReady' || props.graphStatus === 'inconsistent' || props.graphStatus === 'knownError' || props.graphStatus === 'unknownError');\n\nconst statusText = computed(() => {\n  if (props.graphStatus === 'knownError') {\n    return errorMessage.value;\n  }\n  return props.customStatusText?.[props.graphStatus]?.title ?? DEFAULT_STATUS_TEXT[props.graphStatus].title;\n});\n\nconst subtitle = computed(() => {\n  if (props.graphStatus !== 'loading' && props.graphStatus !== 'running') {\n    return '';\n  }\n  return props.customStatusText?.[props.graphStatus]?.subtitle ?? DEFAULT_STATUS_TEXT[props.graphStatus].subtitle;\n});\n\n</script>\n<template>\n  <div\n    v-if=\"graphStatus !== 'ready'\"\n    class=\"graph-maker__loading\"\n    :class=\"[$style.loaderContainer, {[$style.withBorder]: catInBagStatus || catNoDataStatus}]\"\n    :style=\"{\n      top: `${props.top}px`,\n      bottom: `${props.bottom}px`,\n      right: `${props.right}px`,\n      left: `${props.left}px`\n    }\"\n  >\n    <PlPlaceholder v-if=\"graphStatus === 'loading' || graphStatus === 'running'\" variant=\"graph\" :title=\"statusText\" :subtitle=\"subtitle\" />\n    <PlAgOverlayLoading v-else-if=\"catInBagStatus\" :key=\"statusText + 'catInBag'\" :params=\"{variant: 'not-ready', notReadyText: statusText}\"/>\n    <PlAgOverlayNoRows v-else-if=\"catNoDataStatus\" :key=\"statusText + 'catNoData'\" :params=\"{text: statusText}\"/>\n  </div>\n</template>\n<style module>\n.loaderContainer {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.withBorder {\n    border: 1px solid #E1E3EB;\n    border-radius: 8px;\n    overflow: 'hidden';\n}\n</style>\n"],"names":["props","__props","errorMessage","computed","_a","_b","_c","_d","_e","_f","catInBagStatus","catNoDataStatus","statusText","DEFAULT_STATUS_TEXT","subtitle","_createElementBlock","_normalizeClass","$style","_normalizeStyle","_createBlock","_unref","PlPlaceholder","PlAgOverlayLoading","PlAgOverlayNoRows"],"mappings":";;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAiBRC,IAAeC,EAAS,MAAM;;AAClC,eAAIC,IAAAJ,EAAM,cAAN,gBAAAI,EAAiB,UAAS,kBACrB,oBAAoBJ,EAAM,UAAU,KAAK,KAAK;AAAA,mBAA6BA,EAAM,UAAU,KAAK,QAAQ;AAAA,6BAE7GK,IAAAL,EAAM,cAAN,gBAAAK,EAAiB,UAAS,yBACrB,4BAAiCL,EAAM,UAAU,KAAK,KAAK;AAAA,mBAA6BA,EAAM,UAAU,KAAK,QAAQ;AAAA,6BAE1HM,IAAAN,EAAM,cAAN,gBAAAM,EAAiB,UAAS,2BACrB,8BAAmCN,EAAM,UAAU,KAAK,KAAK;AAAA,mBAA6BA,EAAM,UAAU,KAAK,QAAQ;AAAA,6BAE5HO,IAAAP,EAAM,cAAN,gBAAAO,EAAiB,UAAS,8BACrB,kCAAuCP,EAAM,UAAU,KAAK,KAAK;AAAA,mBAA6BA,EAAM,UAAU,KAAK,QAAQ;AAAA,6BAEhIQ,IAAAR,EAAM,cAAN,gBAAAQ,EAAiB,UAAS,8BACrB,kCAAuCR,EAAM,UAAU,KAAK,KAAK;AAAA,mBAA6BA,EAAM,UAAU,KAAK,QAAQ;AAAA,6BAEhIS,IAAAT,EAAM,cAAN,gBAAAS,EAAiB,UAAS,2BACrB,oBAAyBT,EAAM,UAAU,KAAK,KAAK;AAAA,mBAA6BA,EAAM,UAAU,KAAK,QAAQ;AAAA,2BAE/G;AAAA,IACT,CAAC,GAEKU,IAAiBP,EAAS,MAAMH,EAAM,gBAAgB,cAAcA,EAAM,gBAAgB,OAAO,GACjGW,IAAkBR,EAAS,MAAMH,EAAM,gBAAgB,cAAcA,EAAM,gBAAgB,kBAAkBA,EAAM,gBAAgB,gBAAgBA,EAAM,gBAAgB,cAAc,GAEvLY,IAAaT,EAAS,MAAM;;AAChC,aAAIH,EAAM,gBAAgB,eACjBE,EAAa,UAEfG,KAAAD,IAAAJ,EAAM,qBAAN,gBAAAI,EAAyBJ,EAAM,iBAA/B,gBAAAK,EAA6C,UAASQ,EAAoBb,EAAM,WAAW,EAAE;AAAA,IACtG,CAAC,GAEKc,IAAWX,EAAS,MAAM;;AAC9B,aAAIH,EAAM,gBAAgB,aAAaA,EAAM,gBAAgB,YACpD,OAEFK,KAAAD,IAAAJ,EAAM,qBAAN,gBAAAI,EAAyBJ,EAAM,iBAA/B,gBAAAK,EAA6C,aAAYQ,EAAoBb,EAAM,WAAW,EAAE;AAAA,IACzG,CAAC;qBAKSC,EAAA,gBAAW,gBADnBc,EAcM,OAAA;AAAA;MAZJ,OAAKC,EAAA,CAAC,wBAAsB,CACnBC,EAAAA,OAAO,iBAAe,EAAA,CAAIA,EAAAA,OAAO,UAAU,GAAGP,EAAA,SAAkBC,EAAA,MAAA,CAAe,CAAA,CAAA;AAAA,MACvF,OAAKO,EAAA;AAAA,QAAkB,KAAA,GAAAlB,EAAM,GAAG;AAAA,QAAuB,QAAA,GAAAA,EAAM,MAAM;AAAA,QAAsB,OAAA,GAAAA,EAAM,KAAK;AAAA,QAAqB,MAAA,GAAAA,EAAM,IAAI;AAAA,MAAA;;MAO/GC,EAAA,6BAA6BA,EAAA,gBAAW,kBAA7DkB,EAAwIC,EAAAC,CAAA,GAAA;AAAA;QAA3D,SAAQ;AAAA,QAAS,OAAOT,EAAA;AAAA,QAAa,UAAUE,EAAA;AAAA,MAAA,sCAC7FJ,EAAA,cAA/BS,EAA0IC,EAAAE,CAAA,GAAA;AAAA,QAA1F,KAAKV,EAAA,QAAU;AAAA,QAAgB,8CAA6CA,EAAA,MAAA;AAAA,MAAU,2BACxGD,EAAA,cAA9BQ,EAA6GC,EAAAG,CAAA,GAAA;AAAA,QAA7D,KAAKX,EAAA,QAAU;AAAA,QAAiB,gBAAeA,EAAA,MAAA;AAAA,MAAU;;;;"}
+{"version":3,"file":"GraphStatusScreen.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../src/components/GraphStatusScreen.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlPlaceholder, PlAgOverlayLoading, PlAgOverlayNoRows } from '@platforma-sdk/ui-vue';\nimport { computed } from 'vue';\nimport { DEFAULT_STATUS_TEXT } from '../constantsCommon';\nimport type { GraphStatus, StatusTextData } from '../types';\nimport type { ErrorInfo } from '@milaboratories/miplots4';\n\nconst props = withDefaults(defineProps<{\n  graphStatus: GraphStatus;\n  customStatusText?: Partial<StatusTextData>;\n  errorInfo?: ErrorInfo | null;\n  top?: number;\n  left?: number;\n  right?: number;\n  bottom?: number;\n}>(), {\n  customStatusText: undefined,\n  errorInfo: null,\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n});\n\nconst errorMessage = computed(() => {\n  if (props.errorInfo?.type === 'tooManyFacets') {\n    return `Too many facets (${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  if (props.errorInfo?.type === 'tooManyPrimaryGroups') {\n    return `Too many primary groups\\u00A0(${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  if (props.errorInfo?.type === 'tooManySecondaryGroups') {\n    return `Too many secondary groups\\u00A0(${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  if (props.errorInfo?.type === 'tooManyScatterplotGroupsX') {\n    return `Too many categories on X axis\\u00A0(${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  if (props.errorInfo?.type === 'tooManyScatterplotGroupsY') {\n    return `Too many categories on Y axis\\u00A0(${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  if (props.errorInfo?.type === 'tooManyHistogramGroups') {\n    return `Too many groups\\u00A0(${props.errorInfo.info.count}).\\nMaximum count is\\u00A0${props.errorInfo.info.maxCount}.\\nTry to\\u00A0filter the\\u00A0data.`;\n  }\n  return '';\n});\n\nconst catInBagStatus = computed(() => props.graphStatus === 'noPframe' || props.graphStatus === 'empty');\nconst catNoDataStatus = computed(() => props.graphStatus === 'notReady' || props.graphStatus === 'inconsistent' || props.graphStatus === 'knownError' || props.graphStatus === 'unknownError');\n\nconst statusText = computed(() => {\n  if (props.graphStatus === 'knownError') {\n    return errorMessage.value;\n  }\n  return props.customStatusText?.[props.graphStatus]?.title ?? DEFAULT_STATUS_TEXT[props.graphStatus].title;\n});\n\nconst subtitle = computed(() => {\n  if (props.graphStatus !== 'loading' && props.graphStatus !== 'running') {\n    return '';\n  }\n  return props.customStatusText?.[props.graphStatus]?.subtitle ?? DEFAULT_STATUS_TEXT[props.graphStatus].subtitle;\n});\n\n</script>\n<template>\n  <div\n    v-if=\"graphStatus !== 'ready'\"\n    class=\"graph-maker__loading\"\n    :class=\"[$style.loaderContainer, {[$style.withBorder]: catInBagStatus || catNoDataStatus}]\"\n    :style=\"{\n      top: `${props.top}px`,\n      bottom: `${props.bottom}px`,\n      right: `${props.right}px`,\n      left: `${props.left}px`\n    }\"\n  >\n    <PlPlaceholder v-if=\"graphStatus === 'loading' || graphStatus === 'running'\" variant=\"graph\" :title=\"statusText\" :subtitle=\"subtitle\" />\n    <PlAgOverlayLoading v-else-if=\"catInBagStatus\" :key=\"statusText + 'catInBag'\" :params=\"{variant: 'not-ready', notReadyText: statusText}\"/>\n    <PlAgOverlayNoRows v-else-if=\"catNoDataStatus\" :key=\"statusText + 'catNoData'\" :params=\"{text: statusText}\"/>\n  </div>\n</template>\n<style module>\n.loaderContainer {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.withBorder {\n    border: 1px solid #E1E3EB;\n    border-radius: 8px;\n    overflow: 'hidden';\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GAiBR,IAAe,QACf,EAAM,WAAW,SAAS,kBACrB,oBAAoB,EAAM,UAAU,KAAK,MAAM,4BAA4B,EAAM,UAAU,KAAK,SAAS,wCAE9G,EAAM,WAAW,SAAS,yBACrB,iCAAiC,EAAM,UAAU,KAAK,MAAM,4BAA4B,EAAM,UAAU,KAAK,SAAS,wCAE3H,EAAM,WAAW,SAAS,2BACrB,mCAAmC,EAAM,UAAU,KAAK,MAAM,4BAA4B,EAAM,UAAU,KAAK,SAAS,wCAE7H,EAAM,WAAW,SAAS,8BACrB,uCAAuC,EAAM,UAAU,KAAK,MAAM,4BAA4B,EAAM,UAAU,KAAK,SAAS,wCAEjI,EAAM,WAAW,SAAS,8BACrB,uCAAuC,EAAM,UAAU,KAAK,MAAM,4BAA4B,EAAM,UAAU,KAAK,SAAS,wCAEjI,EAAM,WAAW,SAAS,2BACrB,yBAAyB,EAAM,UAAU,KAAK,MAAM,4BAA4B,EAAM,UAAU,KAAK,SAAS,wCAEhH,GACP,EAEI,IAAiB,QAAe,EAAM,gBAAgB,cAAc,EAAM,gBAAgB,QAAQ,EAClG,IAAkB,QAAe,EAAM,gBAAgB,cAAc,EAAM,gBAAgB,kBAAkB,EAAM,gBAAgB,gBAAgB,EAAM,gBAAgB,eAAe,EAExL,IAAa,QACb,EAAM,gBAAgB,eACjB,EAAa,QAEf,EAAM,mBAAmB,EAAM,cAAc,SAAS,EAAoB,EAAM,aAAa,MACpG,EAEI,IAAW,QACX,EAAM,gBAAgB,aAAa,EAAM,gBAAgB,YACpD,KAEF,EAAM,mBAAmB,EAAM,cAAc,YAAY,EAAoB,EAAM,aAAa,SACvG;mBAKQ,EAAA,gBAAW,uBAAA,GAAA,EADnB,EAcM,OAAA;;GAZJ,OAAK,EAAA,CAAC,wBAAsB,CACnBA,EAAAA,OAAO,iBAAe,GAAIA,EAAAA,OAAO,aAAa,EAAA,SAAkB,EAAA,OAAe,CAAA,CAAA,CAAA;GACvF,OAAK,EAAA;YAAkB,EAAM,IAAG;eAAuB,EAAM,OAAM;cAAsB,EAAM,MAAK;aAAqB,EAAM,KAAI;;MAO/G,EAAA,gBAAW,aAAkB,EAAA,gBAAW,aAAA,GAAA,EAA7D,EAAwI,EAAA,EAAA,EAAA;;GAA3D,SAAQ;GAAS,OAAO,EAAA;GAAa,UAAU,EAAA;wCAC7F,EAAA,SAAA,GAAA,EAA/B,EAA0I,EAAA,EAAA,EAAA;GAA1F,KAAK,EAAA,QAAU;GAAgB,QAAM;IAAA,SAAA;IAAA,cAAuC,EAAA;IAAU;6BACxG,EAAA,SAAA,GAAA,EAA9B,EAA6G,EAAA,EAAA,EAAA;GAA7D,KAAK,EAAA,QAAU;GAAiB,QAAM,EAAA,MAAS,EAAA,OAAU"}

package/dist/components/LassoControls/index.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./index.vue2.js";
+import n from "./index.style.js";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+export { r as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/LassoControls/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChartInterface } from '@milaboratories/miplots4';\nimport { SCATTERPLOT_CONTROLS_EVENTS } from '@milaboratories/miplots4';\nimport { PlBtnGhost, PlMaskIcon24, PlTooltip } from '@platforma-sdk/ui-vue';\nimport { computed, onMounted, onUnmounted } from 'vue';\nimport { useStore } from '../../store';\n\nconst props = defineProps<{\n  chartRef: ChartInterface | null;\n  isScatterplotZoomChanged?: boolean;\n}>();\n\nconst store = useStore();\nconst controlsState = computed(() => store.value.reactive.lassoControlsState);\n\nfunction setPen() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, 'pen');\n}\nfunction setSelection() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, 'selection');\n}\nfunction back() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoBack, null);\n}\nfunction forward() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoForward, null);\n}\nfunction deletePolygon() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoDelete, null);\n}\n\nfunction onKeyDown(e: KeyboardEvent) {\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\nfunction resetViewport() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.resetViewport, null);\n}\n\n</script>\n<template>\n  <div :class=\"$style.lassoControlsContainer\">\n    <div :class=\"$style.lassoButtonsGroup\">\n      <div :class=\"$style.lassoControlsBorder\"/>\n      <PlBtnGhost\n        :class=\"{\n          [$style.lassoButtonSelected]: controlsState?.mode === 'pen' || !controlsState,\n          [$style.lassoButtonNotSelected]: controlsState?.mode !== 'pen' && controlsState,\n        }\"\n        icon=\"cursor-pointer\"\n        @click=\"setPen\"\n      />\n      <PlBtnGhost\n        :class=\"{\n          [$style.lassoButtonSelected]: controlsState?.mode === 'selection',\n          [$style.lassoButtonNotSelected]: controlsState?.mode !== 'selection',\n        }\"\n        icon=\"pen-tool\"\n        @click=\"setSelection\"\n      />\n      <div :class=\"$style.lassoControlsSeparator\"/>\n      <PlBtnGhost\n        :disabled=\"!controlsState?.backEnabled\"\n        icon=\"arrow-left-curved\"\n        @click=\"back\"\n      />\n      <PlBtnGhost\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      </PlBtnGhost>\n      <div :class=\"$style.lassoControlsSeparator\"/>\n      <PlBtnGhost\n        :disabled=\"!controlsState?.deleteEnabled\"\n        icon=\"delete-bin\"\n        @click=\"deletePolygon\"\n      />\n    </div>\n    <PlBtnGhost v-if=\"store.reactive.chartType === 'scatterplot-umap'\" :class=\"$style.resetViewport\" :disabled=\"!isScatterplotZoomChanged\" @click=\"resetViewport\" >\n      <PlMaskIcon24 name=\"restart\" :class=\"$style.resetIcon\"/>\n      <PlTooltip class=\"info\" :class=\"$style.resetHintIcon\">\n        <template #tooltip>\n          Return to default pan & zoom\n        </template>\n      </PlTooltip>\n    </PlBtnGhost>\n    <div :class=\"$style.lassoHint\">\n      Hold Cmd/Ctrl and left-click to pan the canvas\n    </div>\n  </div>\n</template>\n<style module>\n.lassoControlsContainer {\n  display: flex;\n  align-items: baseline;\n}\n.lassoButtonsGroup {\n  background: white;\n  display: flex;\n  position: relative;\n}\n.lassoControlsBorder {\n    position: absolute;\n    border: 1px solid var(--color-div-grey);\n    border-radius: var(--border-radius-control);\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n}\n.lassoButtonSelected {\n  border: 2px solid var(--border-color-focus);\n}\n.lassoButtonNotSelected {\n  border: 2px solid transparent;\n}\n.lassoControlsSeparator {\n  width: 1px;\n  height: 32px;\n  background-color: var(--color-div-grey);\n  margin: 4px;\n}\n.lassoHint {\n  color: var(--txt-03);\n  font-size: 14px;\n  margin-left: 8px;\n}\n.resetViewport {\n  width: 58px;\n  min-width: 58px;\n  margin-left: 24px;\n  border: 1px solid var(--color-div-grey);\n}\n.resetIcon {\n  margin-left: -6px;\n}\n.resetHintIcon {\n  align-self: center;\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,15 @@
+import './index.vue.css';var e = {
+	lassoControlsContainer: "_lassoControlsContainer_1w3e4_2",
+	lassoButtonsGroup: "_lassoButtonsGroup_1w3e4_6",
+	lassoControlsBorder: "_lassoControlsBorder_1w3e4_11",
+	lassoButtonSelected: "_lassoButtonSelected_1w3e4_20",
+	lassoButtonNotSelected: "_lassoButtonNotSelected_1w3e4_23",
+	lassoControlsSeparator: "_lassoControlsSeparator_1w3e4_26",
+	lassoHint: "_lassoHint_1w3e4_32",
+	resetViewport: "_resetViewport_1w3e4_37",
+	resetIcon: "_resetIcon_1w3e4_43",
+	resetHintIcon: "_resetHintIcon_1w3e4_46"
+};
+export { e as default };
+
+//# sourceMappingURL=index.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/LassoControls/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChartInterface } from '@milaboratories/miplots4';\nimport { SCATTERPLOT_CONTROLS_EVENTS } from '@milaboratories/miplots4';\nimport { PlBtnGhost, PlMaskIcon24, PlTooltip } from '@platforma-sdk/ui-vue';\nimport { computed, onMounted, onUnmounted } from 'vue';\nimport { useStore } from '../../store';\n\nconst props = defineProps<{\n  chartRef: ChartInterface | null;\n  isScatterplotZoomChanged?: boolean;\n}>();\n\nconst store = useStore();\nconst controlsState = computed(() => store.value.reactive.lassoControlsState);\n\nfunction setPen() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, 'pen');\n}\nfunction setSelection() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, 'selection');\n}\nfunction back() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoBack, null);\n}\nfunction forward() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoForward, null);\n}\nfunction deletePolygon() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoDelete, null);\n}\n\nfunction onKeyDown(e: KeyboardEvent) {\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\nfunction resetViewport() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.resetViewport, null);\n}\n\n</script>\n<template>\n  <div :class=\"$style.lassoControlsContainer\">\n    <div :class=\"$style.lassoButtonsGroup\">\n      <div :class=\"$style.lassoControlsBorder\"/>\n      <PlBtnGhost\n        :class=\"{\n          [$style.lassoButtonSelected]: controlsState?.mode === 'pen' || !controlsState,\n          [$style.lassoButtonNotSelected]: controlsState?.mode !== 'pen' && controlsState,\n        }\"\n        icon=\"cursor-pointer\"\n        @click=\"setPen\"\n      />\n      <PlBtnGhost\n        :class=\"{\n          [$style.lassoButtonSelected]: controlsState?.mode === 'selection',\n          [$style.lassoButtonNotSelected]: controlsState?.mode !== 'selection',\n        }\"\n        icon=\"pen-tool\"\n        @click=\"setSelection\"\n      />\n      <div :class=\"$style.lassoControlsSeparator\"/>\n      <PlBtnGhost\n        :disabled=\"!controlsState?.backEnabled\"\n        icon=\"arrow-left-curved\"\n        @click=\"back\"\n      />\n      <PlBtnGhost\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      </PlBtnGhost>\n      <div :class=\"$style.lassoControlsSeparator\"/>\n      <PlBtnGhost\n        :disabled=\"!controlsState?.deleteEnabled\"\n        icon=\"delete-bin\"\n        @click=\"deletePolygon\"\n      />\n    </div>\n    <PlBtnGhost v-if=\"store.reactive.chartType === 'scatterplot-umap'\" :class=\"$style.resetViewport\" :disabled=\"!isScatterplotZoomChanged\" @click=\"resetViewport\" >\n      <PlMaskIcon24 name=\"restart\" :class=\"$style.resetIcon\"/>\n      <PlTooltip class=\"info\" :class=\"$style.resetHintIcon\">\n        <template #tooltip>\n          Return to default pan & zoom\n        </template>\n      </PlTooltip>\n    </PlBtnGhost>\n    <div :class=\"$style.lassoHint\">\n      Hold Cmd/Ctrl and left-click to pan the canvas\n    </div>\n  </div>\n</template>\n<style module>\n.lassoControlsContainer {\n  display: flex;\n  align-items: baseline;\n}\n.lassoButtonsGroup {\n  background: white;\n  display: flex;\n  position: relative;\n}\n.lassoControlsBorder {\n    position: absolute;\n    border: 1px solid var(--color-div-grey);\n    border-radius: var(--border-radius-control);\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n}\n.lassoButtonSelected {\n  border: 2px solid var(--border-color-focus);\n}\n.lassoButtonNotSelected {\n  border: 2px solid transparent;\n}\n.lassoControlsSeparator {\n  width: 1px;\n  height: 32px;\n  background-color: var(--color-div-grey);\n  margin: 4px;\n}\n.lassoHint {\n  color: var(--txt-03);\n  font-size: 14px;\n  margin-left: 8px;\n}\n.resetViewport {\n  width: 58px;\n  min-width: 58px;\n  margin-left: 24px;\n  border: 1px solid var(--color-div-grey);\n}\n.resetIcon {\n  margin-left: -6px;\n}\n.resetHintIcon {\n  align-self: center;\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1 @@
+._lassoControlsContainer_1w3e4_2{align-items:baseline;display:flex}._lassoButtonsGroup_1w3e4_6{background:#fff;display:flex;position:relative}._lassoControlsBorder_1w3e4_11{border:1px solid var(--color-div-grey);border-radius:var(--border-radius-control);position:absolute;inset:0}._lassoButtonSelected_1w3e4_20{border:2px solid var(--border-color-focus)}._lassoButtonNotSelected_1w3e4_23{border:2px solid #0000}._lassoControlsSeparator_1w3e4_26{background-color:var(--color-div-grey);width:1px;height:32px;margin:4px}._lassoHint_1w3e4_32{color:var(--txt-03);margin-left:8px;font-size:14px}._resetViewport_1w3e4_37{border:1px solid var(--color-div-grey);width:58px;min-width:58px;margin-left:24px}._resetIcon_1w3e4_43{margin-left:-6px}._resetHintIcon_1w3e4_46{align-self:center}

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

@@ -1,134 +1,102 @@
-import { defineComponent as V, computed as K, onMounted as P, onUnmounted as z, createElementBlock as L, openBlock as $, normalizeClass as l, createElementVNode as i, createBlock as M, createCommentVNode as g, createVNode as a, unref as o, withCtx as u, createTextVNode as H } from "vue";
-import { SCATTERPLOT_CONTROLS_EVENTS as n } from "@milaboratories/miplots4";
-import { PlBtnGhost as r, PlMaskIcon24 as B, PlTooltip as I } from "@platforma-sdk/ui-vue";
-import { useStore as O } from "../../store.js";
-const F = /* @__PURE__ */ V({
-  __name: "index",
-  props: {
-    chartRef: {},
-    isScatterplotZoomChanged: { type: Boolean }
-  },
-  setup(p) {
-    const s = p, f = O(), t = K(() => f.value.reactive.lassoControlsState);
-    function E() {
-      var e;
-      (e = s.chartRef) == null || e.updateChartState(n.lassoSelectMode, "pen");
-    }
-    function R() {
-      var e;
-      (e = s.chartRef) == null || e.updateChartState(n.lassoSelectMode, "selection");
-    }
-    function m() {
-      var e;
-      (e = s.chartRef) == null || e.updateChartState(n.lassoBack, null);
-    }
-    function y() {
-      var e;
-      (e = s.chartRef) == null || e.updateChartState(n.lassoForward, null);
-    }
-    function N() {
-      var e;
-      (e = s.chartRef) == null || e.updateChartState(n.lassoDelete, null);
-    }
-    function C(e) {
-      var c, d;
-      (c = t.value) != null && c.backEnabled && e.key === "z" && (e.ctrlKey || e.metaKey) && !e.shiftKey && m(), (d = t.value) != null && d.forwardEnabled && e.key === "z" && (e.ctrlKey || e.metaKey) && e.shiftKey && y();
-    }
-    P(() => {
-      document.addEventListener("keydown", C);
-    }), z(() => {
-      document.removeEventListener("keydown", C);
-    });
-    function T() {
-      var e;
-      (e = s.chartRef) == null || e.updateChartState(n.resetViewport, null);
-    }
-    return (e, c) => {
-      var d, v, S, h, k, b, w;
-      return $(), L("div", {
-        class: l(e.$style.lassoControlsContainer)
-      }, [
-        i("div", {
-          class: l(e.$style.lassoButtonsGroup)
-        }, [
-          i("div", {
-            class: l(e.$style.lassoControlsBorder)
-          }, null, 2),
-          a(o(r), {
-            class: l({
-              [e.$style.lassoButtonSelected]: ((d = t.value) == null ? void 0 : d.mode) === "pen" || !t.value,
-              [e.$style.lassoButtonNotSelected]: ((v = t.value) == null ? void 0 : v.mode) !== "pen" && t.value
-            }),
-            icon: "cursor-pointer",
-            onClick: E
-          }, null, 8, ["class"]),
-          a(o(r), {
-            class: l({
-              [e.$style.lassoButtonSelected]: ((S = t.value) == null ? void 0 : S.mode) === "selection",
-              [e.$style.lassoButtonNotSelected]: ((h = t.value) == null ? void 0 : h.mode) !== "selection"
-            }),
-            icon: "pen-tool",
-            onClick: R
-          }, null, 8, ["class"]),
-          i("div", {
-            class: l(e.$style.lassoControlsSeparator)
-          }, null, 2),
-          a(o(r), {
-            disabled: !((k = t.value) != null && k.backEnabled),
-            icon: "arrow-left-curved",
-            onClick: m
-          }, null, 8, ["disabled"]),
-          a(o(r), {
-            disabled: !((b = t.value) != null && b.forwardEnabled),
-            onClick: y
-          }, {
-            icon: u(() => [
-              a(o(B), {
-                name: "arrow-left-curved",
-                style: { transform: "scale(-1, 1)" }
-              })
-            ]),
-            _: 1
-          }, 8, ["disabled"]),
-          i("div", {
-            class: l(e.$style.lassoControlsSeparator)
-          }, null, 2),
-          a(o(r), {
-            disabled: !((w = t.value) != null && w.deleteEnabled),
-            icon: "delete-bin",
-            onClick: N
-          }, null, 8, ["disabled"])
-        ], 2),
-        o(f).reactive.chartType === "scatterplot-umap" ? ($(), M(o(r), {
-          key: 0,
-          class: l(e.$style.resetViewport),
-          disabled: !p.isScatterplotZoomChanged,
-          onClick: T
-        }, {
-          default: u(() => [
-            a(o(B), {
-              name: "restart",
-              class: l(e.$style.resetIcon)
-            }, null, 8, ["class"]),
-            a(o(I), {
-              class: l(["info", e.$style.resetHintIcon])
-            }, {
-              tooltip: u(() => [...c[0] || (c[0] = [
-                H(" Return to default pan & zoom ", -1)
-              ])]),
-              _: 1
-            }, 8, ["class"])
-          ]),
-          _: 1
-        }, 8, ["class", "disabled"])) : g("", !0),
-        i("div", {
-          class: l(e.$style.lassoHint)
-        }, " Hold Cmd/Ctrl and left-click to pan the canvas ", 2)
-      ], 2);
-    };
-  }
+import { useStore as e } from "../../store.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, onMounted as u, onUnmounted as d, openBlock as f, unref as p, withCtx as m } from "vue";
+import { SCATTERPLOT_CONTROLS_EVENTS as h } from "@milaboratories/miplots4";
+import { PlBtnGhost as g, PlMaskIcon24 as _, PlTooltip as v } from "@platforma-sdk/ui-vue";
+var y = /* @__PURE__ */ c({
+	__name: "index",
+	props: {
+		chartRef: {},
+		isScatterplotZoomChanged: { type: Boolean }
+	},
+	setup(c) {
+		let y = c, b = e(), x = t(() => b.value.reactive.lassoControlsState);
+		function S() {
+			y.chartRef?.updateChartState(h.lassoSelectMode, "pen");
+		}
+		function C() {
+			y.chartRef?.updateChartState(h.lassoSelectMode, "selection");
+		}
+		function w() {
+			y.chartRef?.updateChartState(h.lassoBack, null);
+		}
+		function T() {
+			y.chartRef?.updateChartState(h.lassoForward, null);
+		}
+		function E() {
+			y.chartRef?.updateChartState(h.lassoDelete, null);
+		}
+		function D(e) {
+			x.value?.backEnabled && e.key === "z" && (e.ctrlKey || e.metaKey) && !e.shiftKey && w(), x.value?.forwardEnabled && e.key === "z" && (e.ctrlKey || e.metaKey) && e.shiftKey && T();
+		}
+		u(() => {
+			document.addEventListener("keydown", D);
+		}), d(() => {
+			document.removeEventListener("keydown", D);
+		});
+		function O() {
+			y.chartRef?.updateChartState(h.resetViewport, null);
+		}
+		return (e, t) => (f(), i("div", { class: l(e.$style.lassoControlsContainer) }, [
+			a("div", { class: l(e.$style.lassoButtonsGroup) }, [
+				a("div", { class: l(e.$style.lassoControlsBorder) }, null, 2),
+				s(p(g), {
+					class: l({
+						[e.$style.lassoButtonSelected]: x.value?.mode === "pen" || !x.value,
+						[e.$style.lassoButtonNotSelected]: x.value?.mode !== "pen" && x.value
+					}),
+					icon: "cursor-pointer",
+					onClick: S
+				}, null, 8, ["class"]),
+				s(p(g), {
+					class: l({
+						[e.$style.lassoButtonSelected]: x.value?.mode === "selection",
+						[e.$style.lassoButtonNotSelected]: x.value?.mode !== "selection"
+					}),
+					icon: "pen-tool",
+					onClick: C
+				}, null, 8, ["class"]),
+				a("div", { class: l(e.$style.lassoControlsSeparator) }, null, 2),
+				s(p(g), {
+					disabled: !x.value?.backEnabled,
+					icon: "arrow-left-curved",
+					onClick: w
+				}, null, 8, ["disabled"]),
+				s(p(g), {
+					disabled: !x.value?.forwardEnabled,
+					onClick: T
+				}, {
+					icon: m(() => [s(p(_), {
+						name: "arrow-left-curved",
+						style: { transform: "scale(-1, 1)" }
+					})]),
+					_: 1
+				}, 8, ["disabled"]),
+				a("div", { class: l(e.$style.lassoControlsSeparator) }, null, 2),
+				s(p(g), {
+					disabled: !x.value?.deleteEnabled,
+					icon: "delete-bin",
+					onClick: E
+				}, null, 8, ["disabled"])
+			], 2),
+			p(b).reactive.chartType === "scatterplot-umap" ? (f(), n(p(g), {
+				key: 0,
+				class: l(e.$style.resetViewport),
+				disabled: !c.isScatterplotZoomChanged,
+				onClick: O
+			}, {
+				default: m(() => [s(p(_), {
+					name: "restart",
+					class: l(e.$style.resetIcon)
+				}, null, 8, ["class"]), s(p(v), { class: l(["info", e.$style.resetHintIcon]) }, {
+					tooltip: m(() => [...t[0] ||= [o(" Return to default pan & zoom ", -1)]]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, ["class", "disabled"])) : r("", !0),
+			a("div", { class: l(e.$style.lassoHint) }, " Hold Cmd/Ctrl and left-click to pan the canvas ", 2)
+		], 2));
+	}
 });
-export {
-  F as default
-};
-//# sourceMappingURL=index.vue2.js.map
+export { y as default };
+
+//# sourceMappingURL=index.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue2.js","sources":["../../../src/components/LassoControls/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChartInterface } from '@milaboratories/miplots4';\nimport { SCATTERPLOT_CONTROLS_EVENTS } from '@milaboratories/miplots4';\nimport { PlBtnGhost, PlMaskIcon24, PlTooltip } from '@platforma-sdk/ui-vue';\nimport { computed, onMounted, onUnmounted } from 'vue';\nimport { useStore } from '../../store';\n\nconst props = defineProps<{\n  chartRef: ChartInterface | null;\n  isScatterplotZoomChanged?: boolean;\n}>();\n\nconst store = useStore();\nconst controlsState = computed(() => store.value.reactive.lassoControlsState);\n\nfunction setPen() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, 'pen');\n}\nfunction setSelection() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, 'selection');\n}\nfunction back() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoBack, null);\n}\nfunction forward() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoForward, null);\n}\nfunction deletePolygon() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoDelete, null);\n}\n\nfunction onKeyDown(e: KeyboardEvent) {\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\nfunction resetViewport() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.resetViewport, null);\n}\n\n</script>\n<template>\n  <div :class=\"$style.lassoControlsContainer\">\n    <div :class=\"$style.lassoButtonsGroup\">\n      <div :class=\"$style.lassoControlsBorder\"/>\n      <PlBtnGhost\n        :class=\"{\n          [$style.lassoButtonSelected]: controlsState?.mode === 'pen' || !controlsState,\n          [$style.lassoButtonNotSelected]: controlsState?.mode !== 'pen' && controlsState,\n        }\"\n        icon=\"cursor-pointer\"\n        @click=\"setPen\"\n      />\n      <PlBtnGhost\n        :class=\"{\n          [$style.lassoButtonSelected]: controlsState?.mode === 'selection',\n          [$style.lassoButtonNotSelected]: controlsState?.mode !== 'selection',\n        }\"\n        icon=\"pen-tool\"\n        @click=\"setSelection\"\n      />\n      <div :class=\"$style.lassoControlsSeparator\"/>\n      <PlBtnGhost\n        :disabled=\"!controlsState?.backEnabled\"\n        icon=\"arrow-left-curved\"\n        @click=\"back\"\n      />\n      <PlBtnGhost\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      </PlBtnGhost>\n      <div :class=\"$style.lassoControlsSeparator\"/>\n      <PlBtnGhost\n        :disabled=\"!controlsState?.deleteEnabled\"\n        icon=\"delete-bin\"\n        @click=\"deletePolygon\"\n      />\n    </div>\n    <PlBtnGhost v-if=\"store.reactive.chartType === 'scatterplot-umap'\" :class=\"$style.resetViewport\" :disabled=\"!isScatterplotZoomChanged\" @click=\"resetViewport\" >\n      <PlMaskIcon24 name=\"restart\" :class=\"$style.resetIcon\"/>\n      <PlTooltip class=\"info\" :class=\"$style.resetHintIcon\">\n        <template #tooltip>\n          Return to default pan & zoom\n        </template>\n      </PlTooltip>\n    </PlBtnGhost>\n    <div :class=\"$style.lassoHint\">\n      Hold Cmd/Ctrl and left-click to pan the canvas\n    </div>\n  </div>\n</template>\n<style module>\n.lassoControlsContainer {\n  display: flex;\n  align-items: baseline;\n}\n.lassoButtonsGroup {\n  background: white;\n  display: flex;\n  position: relative;\n}\n.lassoControlsBorder {\n    position: absolute;\n    border: 1px solid var(--color-div-grey);\n    border-radius: var(--border-radius-control);\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n}\n.lassoButtonSelected {\n  border: 2px solid var(--border-color-focus);\n}\n.lassoButtonNotSelected {\n  border: 2px solid transparent;\n}\n.lassoControlsSeparator {\n  width: 1px;\n  height: 32px;\n  background-color: var(--color-div-grey);\n  margin: 4px;\n}\n.lassoHint {\n  color: var(--txt-03);\n  font-size: 14px;\n  margin-left: 8px;\n}\n.resetViewport {\n  width: 58px;\n  min-width: 58px;\n  margin-left: 24px;\n  border: 1px solid var(--color-div-grey);\n}\n.resetIcon {\n  margin-left: -6px;\n}\n.resetHintIcon {\n  align-self: center;\n}\n</style>\n"],"names":["props","__props","store","useStore","controlsState","computed","setPen","_a","SCATTERPLOT_CONTROLS_EVENTS","setSelection","back","forward","deletePolygon","onKeyDown","_b","onMounted","onUnmounted","resetViewport","_createElementBlock","_normalizeClass","$style","_createElementVNode","_createVNode","_unref","PlBtnGhost","_c","_d","_e","_f","PlMaskIcon24","_g","_createBlock","PlTooltip","_cache"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/LassoControls/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChartInterface } from '@milaboratories/miplots4';\nimport { SCATTERPLOT_CONTROLS_EVENTS } from '@milaboratories/miplots4';\nimport { PlBtnGhost, PlMaskIcon24, PlTooltip } from '@platforma-sdk/ui-vue';\nimport { computed, onMounted, onUnmounted } from 'vue';\nimport { useStore } from '../../store';\n\nconst props = defineProps<{\n  chartRef: ChartInterface | null;\n  isScatterplotZoomChanged?: boolean;\n}>();\n\nconst store = useStore();\nconst controlsState = computed(() => store.value.reactive.lassoControlsState);\n\nfunction setPen() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, 'pen');\n}\nfunction setSelection() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, 'selection');\n}\nfunction back() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoBack, null);\n}\nfunction forward() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoForward, null);\n}\nfunction deletePolygon() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.lassoDelete, null);\n}\n\nfunction onKeyDown(e: KeyboardEvent) {\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\nfunction resetViewport() {\n  props.chartRef?.updateChartState(SCATTERPLOT_CONTROLS_EVENTS.resetViewport, null);\n}\n\n</script>\n<template>\n  <div :class=\"$style.lassoControlsContainer\">\n    <div :class=\"$style.lassoButtonsGroup\">\n      <div :class=\"$style.lassoControlsBorder\"/>\n      <PlBtnGhost\n        :class=\"{\n          [$style.lassoButtonSelected]: controlsState?.mode === 'pen' || !controlsState,\n          [$style.lassoButtonNotSelected]: controlsState?.mode !== 'pen' && controlsState,\n        }\"\n        icon=\"cursor-pointer\"\n        @click=\"setPen\"\n      />\n      <PlBtnGhost\n        :class=\"{\n          [$style.lassoButtonSelected]: controlsState?.mode === 'selection',\n          [$style.lassoButtonNotSelected]: controlsState?.mode !== 'selection',\n        }\"\n        icon=\"pen-tool\"\n        @click=\"setSelection\"\n      />\n      <div :class=\"$style.lassoControlsSeparator\"/>\n      <PlBtnGhost\n        :disabled=\"!controlsState?.backEnabled\"\n        icon=\"arrow-left-curved\"\n        @click=\"back\"\n      />\n      <PlBtnGhost\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      </PlBtnGhost>\n      <div :class=\"$style.lassoControlsSeparator\"/>\n      <PlBtnGhost\n        :disabled=\"!controlsState?.deleteEnabled\"\n        icon=\"delete-bin\"\n        @click=\"deletePolygon\"\n      />\n    </div>\n    <PlBtnGhost v-if=\"store.reactive.chartType === 'scatterplot-umap'\" :class=\"$style.resetViewport\" :disabled=\"!isScatterplotZoomChanged\" @click=\"resetViewport\" >\n      <PlMaskIcon24 name=\"restart\" :class=\"$style.resetIcon\"/>\n      <PlTooltip class=\"info\" :class=\"$style.resetHintIcon\">\n        <template #tooltip>\n          Return to default pan & zoom\n        </template>\n      </PlTooltip>\n    </PlBtnGhost>\n    <div :class=\"$style.lassoHint\">\n      Hold Cmd/Ctrl and left-click to pan the canvas\n    </div>\n  </div>\n</template>\n<style module>\n.lassoControlsContainer {\n  display: flex;\n  align-items: baseline;\n}\n.lassoButtonsGroup {\n  background: white;\n  display: flex;\n  position: relative;\n}\n.lassoControlsBorder {\n    position: absolute;\n    border: 1px solid var(--color-div-grey);\n    border-radius: var(--border-radius-control);\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n}\n.lassoButtonSelected {\n  border: 2px solid var(--border-color-focus);\n}\n.lassoButtonNotSelected {\n  border: 2px solid transparent;\n}\n.lassoControlsSeparator {\n  width: 1px;\n  height: 32px;\n  background-color: var(--color-div-grey);\n  margin: 4px;\n}\n.lassoHint {\n  color: var(--txt-03);\n  font-size: 14px;\n  margin-left: 8px;\n}\n.resetViewport {\n  width: 58px;\n  min-width: 58px;\n  margin-left: 24px;\n  border: 1px solid var(--color-div-grey);\n}\n.resetIcon {\n  margin-left: -6px;\n}\n.resetHintIcon {\n  align-self: center;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/MultiselectButton.js

@@ -0,0 +1,5 @@
+import e from "./MultiselectButton.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=MultiselectButton.js.map

package/dist/components/MultiselectButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiselectButton.js","names":[],"sources":["../../src/components/MultiselectButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon16, useLabelNotch } from '@platforma-sdk/ui-vue';\nimport { ref } from 'vue';\nimport type {\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=\"props.label\" ref=\"label\">\n      {{ props.label }}\n    </label>\n    <DoubleContour class=\"ui-multiselect-button__contour\" />\n    <div class=\"ui-multiselect-button__content\">\n      <div v-if=\"props.title\" class=\"title\">{{ props.title }}</div>\n      <div v-if=\"props.palette && isCategorical(props.palette)\" class=\"gradient\">\n        <div\n          v-for=\"color of PALETTE_MAP[props.palette].colors.slice(\n            0,\n            COLORS_CATEGORICAL_VISIBLE,\n          )\"\n          :key=\"color\"\n          class=\"gradient__item\"\n          :style=\"{ background: color }\"\n        />\n      </div>\n      <div\n        v-else-if=\"props.palette\"\n        class=\"gradient\"\n        :style=\"createCssGradient(PALETTE_MAP[props.palette].colors)\"\n      />\n      <PlIcon16 v-else class=\"icon\" name=\"chevron-right\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/MultiselectButton.vue2.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"MultiselectButton.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"MultiselectButton.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../src/components/MultiselectButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon16, useLabelNotch } from '@platforma-sdk/ui-vue';\nimport { ref } from 'vue';\nimport type {\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=\"props.label\" ref=\"label\">\n      {{ props.label }}\n    </label>\n    <DoubleContour class=\"ui-multiselect-button__contour\" />\n    <div class=\"ui-multiselect-button__content\">\n      <div v-if=\"props.title\" class=\"title\">{{ props.title }}</div>\n      <div v-if=\"props.palette && isCategorical(props.palette)\" class=\"gradient\">\n        <div\n          v-for=\"color of PALETTE_MAP[props.palette].colors.slice(\n            0,\n            COLORS_CATEGORICAL_VISIBLE,\n          )\"\n          :key=\"color\"\n          class=\"gradient__item\"\n          :style=\"{ background: color }\"\n        />\n      </div>\n      <div\n        v-else-if=\"props.palette\"\n        class=\"gradient\"\n        :style=\"createCssGradient(PALETTE_MAP[props.palette].colors)\"\n      />\n      <PlIcon16 v-else class=\"icon\" name=\"chevron-right\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;GA6BM,IAA6B;;;;;;;;;EAfnC,IAAM,IAAQ,GAKR,IAAO,EAAkC,KAAA,EAAU;AACzD,IAAc,EAAK;EAEnB,SAAS,EAAkB,GAAsB;GAC/C,IAAM,IAAO,OAAO,EAAQ,SAAS;AACrC,UAAO,yCAAyC,EAC7C,KAAK,GAAO,MAAQ,GAAG,EAAM,GAAG,IAAM,EAAK,GAAE,CAC7C,KAAK,KAAK,CAAC;;yBAOd,EAyBM,OAAA;YAzBG;GAAJ,KAAI;GAAO,OAAM;GAAyB,SAAK,AAAA,EAAA,OAAA,GAAA,MAAOA,EAAAA,MAAK,eAAA,EAAA,CAAA,OAAA,CAAA;;GACjD,EAAM,SAAA,GAAA,EAAnB,EAEQ,SAAA;;IAFkB,KAAI;QACzB,EAAM,MAAK,EAAA,IAAA,IAAA,EAAA,IAAA,GAAA;GAEhB,EAAwD,GAAA,EAAzC,OAAM,kCAAgC,CAAA;GACrD,EAmBM,OAnBN,GAmBM,CAlBO,EAAM,SAAA,GAAA,EAAjB,EAA6D,OAA7D,GAA6D,EAApB,EAAM,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EACzC,EAAM,WAAW,EAAA,EAAa,CAAC,EAAM,QAAO,IAAA,GAAA,EAAvD,EAUM,OAVN,GAUM,EAAA,EAAA,GAAA,EATJ,EAQE,GAAA,MAAA,EAPgB,EAAA,EAAW,CAAC,EAAM,SAAS,OAAO,MAAA,GAAkC,EAAA,GAA7E,YADT,EAQE,OAAA;IAHC,KAAK;IACN,OAAM;IACL,OAAK,EAAA,EAAA,YAAgB,GAAK,CAAA;6BAIlB,EAAM,WAAA,GAAA,EADnB,EAIE,OAAA;;IAFA,OAAM;IACL,OAAK,EAAE,EAAkB,EAAA,EAAW,CAAC,EAAM,SAAS,OAAM,CAAA;wBAE7D,EAAqD,EAAA,EAAA,EAAA;;IAApC,OAAM;IAAO,MAAK"}

package/dist/components/PanelModal.js

@@ -0,0 +1,5 @@
+import e from "./PanelModal.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=PanelModal.js.map

package/dist/components/PanelModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelModal.js","names":[],"sources":["../../src/components/PanelModal.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlCloseModalBtn, useClickOutside } from '@platforma-sdk/ui-vue';\nimport { nextTick, ref, watch } from 'vue';\nimport { useStore } from '../store';\n\nconst $emit = defineEmits(['close']);\n\nconst rootRef = ref();\nconst store = useStore();\n\nuseClickOutside([rootRef], () => $emit('close'));\n\nwatch(\n  () => store.value.reactive.currentTab === 'axes' && store.value.reactive.tabDefaultState.axes?.scrollToBottom,\n  (shouldScroll) => {\n    if (!shouldScroll) return;\n    nextTick(() => {\n      const el = rootRef.value?.querySelector?.('.axes-settings-list, .inputs-block') as HTMLElement | null;\n      if (el) {\n        el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });\n      }\n      store.value.reactive.tabDefaultState.axes.scrollToBottom = false;\n    });\n  },\n  { immediate: true },\n);\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"],"mappings":""}