@topvisor/ui 1.0.12-jquery → 1.0.13

package/charts/charts.js

@@ -1,12 +1,12 @@
-import { Core as S } from "../core/app.js";
-import { defineComponent as L, mergeModels as T, useModel as I, computed as l, openBlock as n, createElementBlock as r, normalizeClass as m, createElementVNode as i, toDisplayString as c, Fragment as C, renderList as v, normalizeStyle as F, unref as N, createCommentVNode as $ } from "vue";
-import { d as w, b as B } from "../.chunks/forms-CIeG_5LP.es.js";
-import { percentOfNumber as _ } from "../utils/number.js";
-const H = ["../assets/charts.css"].map((d) => import.meta.resolve(d));
-S.insertCSSLinkToPage(H, !0);
-const E = 90, y = 10, z = ["data-top-icon"], O = { class: "top-miniChart_chart" }, P = ["onMouseenter"], A = { class: "top-miniChart_data" }, j = { class: "top-miniChart_dataValue" }, q = ["innerHTML"], J = /* @__PURE__ */ L({
+import { Core as P } from "../core/app.js";
+import { defineComponent as D, mergeModels as S, useModel as $, computed as p, openBlock as a, createElementBlock as s, normalizeClass as f, createElementVNode as r, toDisplayString as g, Fragment as k, renderList as w, normalizeStyle as L, unref as F, createCommentVNode as H, ref as b, watch as V, onMounted as N, onUnmounted as R, renderSlot as z, createBlock as G, Teleport as O } from "vue";
+import { d as X } from "../.chunks/forms-FHMqYVvM.es.js";
+import { percentOfNumber as I } from "../utils/number.js";
+const E = ["../assets/charts.css"].map((v) => import.meta.resolve(v));
+P.insertCSSLinkToPage(E, !0);
+const A = 90, T = 10, U = ["data-top-icon"], W = { class: "top-miniChart_chart" }, Y = ["onMouseenter"], j = { class: "top-miniChart_data" }, q = { class: "top-miniChart_dataValue" }, J = ["innerHTML"], K = /* @__PURE__ */ D({
   __name: "miniChart",
-  props: /* @__PURE__ */ T({
+  props: /* @__PURE__ */ S({
     title: {},
     gIcon: {},
     color: { default: "blue" },
@@ -15,106 +15,159 @@ const E = 90, y = 10, z = ["data-top-icon"], O = { class: "top-miniChart_chart"
     activeDates: {},
     keysForDyn: {},
     isInvert: { type: Boolean },
-    numberCols: { default: E },
+    numberCols: { default: A },
     additionalHTML: {},
     modelValue: {},
-    valueSuffix: {}
+    valueSuffix: {},
+    hideChartInMobile: { type: Boolean }
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(d) {
-    const e = d, p = I(d, "modelValue"), f = (t) => {
-      let a = g.value;
-      e.isInvert && (t -= 1, a -= 1);
-      let o = a > 0 ? Math.round(t / a * (100 - y)) : 0;
-      return e.isInvert ? 100 - o : o + y;
-    }, M = (t) => e.activeDates.includes(t), g = l(() => Math.max(...e.values)), D = l(() => e.dates.slice().reverse()), V = l(() => e.dates.length ? e.numberCols - e.dates.length : 0), h = () => {
-      p.value = null;
-    }, b = (t, a, o) => {
-      p.value = {
-        elCol: t.target,
-        date: w(a),
-        value: o === null ? "--" : o + (e.valueSuffix ?? "")
-      };
-    }, s = l(() => {
-      const t = e.values[e.keysForDyn.start], o = e.values[e.keysForDyn.end] - t;
-      return (o < 0 ? -1 : 1) * _(Math.abs(o));
-    }), k = l(() => {
-      let t = "stay";
-      return e.isInvert ? (s.value > 0 && (t = "down"), s.value < 0 && (t = "up")) : (s.value > 0 && (t = "up"), s.value < 0 && (t = "down")), t;
+  setup(v) {
+    const t = v, d = $(v, "modelValue"), u = (e) => {
+      let o = c.value;
+      t.isInvert && (e -= 1, o -= 1);
+      let l = o > 0 ? Math.round(e / o * (100 - T)) : 0;
+      return t.isInvert ? 100 - l : l + T;
+    }, C = (e) => t.activeDates.includes(e), c = p(() => Math.max(...t.values)), m = p(() => t.dates.slice().reverse()), M = p(() => t.dates.length ? t.numberCols - t.dates.length : 0), y = () => {
+      d.value = null;
+    }, i = (e, o, l) => {
+      e.target instanceof HTMLElement && (d.value = {
+        elCol: e.target,
+        date: X(o),
+        value: l === null ? "--" : l + (t.valueSuffix ?? "")
+      });
+    }, n = p(() => {
+      const e = t.values[t.keysForDyn.start], l = t.values[t.keysForDyn.end] - e;
+      return (l < 0 ? -1 : 1) * I(Math.abs(l));
+    }), h = p(() => {
+      let e = "stay";
+      return t.isInvert ? (n.value > 0 && (e = "down"), n.value < 0 && (e = "up")) : (n.value > 0 && (e = "up"), n.value < 0 && (e = "down")), e;
     });
-    return (t, a) => (n(), r("div", {
-      class: m({
+    return (e, o) => (a(), s("div", {
+      class: f({
         "top-miniChart": !0,
-        [`top-color_${t.color}`]: !0
+        "top-miniChart_hideChartInMobile": e.hideChartInMobile,
+        [`top-color_${e.color}`]: !0
       })
     }, [
-      i("div", {
-        class: "top-miniChart_title",
-        "data-top-icon": t.gIcon
-      }, c(t.title), 9, z),
-      i("div", O, [
-        i("div", {
+      r("div", {
+        class: "top-miniChart_title top-ellipsis",
+        "data-top-icon": e.gIcon
+      }, g(e.title), 9, U),
+      r("div", W, [
+        r("div", {
           class: "top-miniChart_chartGrid",
-          onMouseleave: a[1] || (a[1] = (o) => h())
+          onMouseleave: o[1] || (o[1] = (l) => y())
         }, [
-          (n(!0), r(C, null, v(D.value, (o, u) => (n(), r("div", {
-            key: u,
-            class: m({
+          (a(!0), s(k, null, w(m.value, (l, _) => (a(), s("div", {
+            class: f({
               "top-miniChart_chartGridCol": !0,
-              "top-active": M(o)
+              "top-active": C(l)
             }),
-            onMouseenter: (G) => b(G, o, t.values[t.values.length - u - 1])
+            onMouseenter: (B) => i(B, l, e.values[e.values.length - _ - 1])
           }, [
-            i("div", {
-              style: F("height:" + f(t.values[t.values.length - u - 1]) + "%")
+            r("div", {
+              style: L("height:" + u(e.values[e.values.length - _ - 1]) + "%")
             }, null, 4)
-          ], 42, P))), 128)),
-          (n(!0), r(C, null, v(V.value, () => (n(), r("div", {
+          ], 42, Y))), 256)),
+          (a(!0), s(k, null, w(M.value, () => (a(), s("div", {
             class: "top-miniChart_chartGridCol top-miniChart_chartGridCol-none",
-            onMouseenter: a[0] || (a[0] = (o) => h())
-          }, a[2] || (a[2] = [
-            i("div", null, null, -1)
+            onMouseenter: o[0] || (o[0] = (l) => y())
+          }, o[2] || (o[2] = [
+            r("div", null, null, -1)
           ]), 32))), 256))
         ], 32)
       ]),
-      i("div", A, [
-        i("span", {
-          class: m({
+      r("div", j, [
+        r("span", {
+          class: f({
             "top-miniChart_dataDynamic": !0,
-            [`top-miniChart_dataDynamic-direction_${k.value}`]: !0
+            [`top-miniChart_dataDynamic-direction_${h.value}`]: !0
           })
-        }, c(Math.abs(s.value) || ""), 3),
-        i("span", j, c(N(_)(t.values[t.values.length - 1]) || 0), 1)
+        }, g(Math.abs(n.value) || ""), 3),
+        r("span", q, g(F(I)(e.values[e.values.length - 1]) || 0), 1)
       ]),
-      t.additionalHTML ? (n(), r("div", {
+      e.additionalHTML ? (a(), s("div", {
         key: 0,
-        innerHTML: t.additionalHTML
-      }, null, 8, q)) : $("", !0)
+        innerHTML: e.additionalHTML
+      }, null, 8, J)) : H("", !0)
+    ], 2));
+  }
+}), Q = {
+  key: 0,
+  class: "top-miniCharts_pages"
+}, Z = ["onClick"], x = /* @__PURE__ */ D({
+  __name: "miniCharts",
+  props: /* @__PURE__ */ S({
+    modelValue: {},
+    countCharts: {},
+    hideChartInMobile: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(v) {
+    const t = v, d = $(v, "modelValue"), u = b(null);
+    let C;
+    const c = b(1), m = b(1), M = () => {
+      c.value = Math.round(u.value.scrollHeight / u.value.clientHeight);
+    };
+    V(c, () => {
+      c.value < m.value && (m.value = 1);
+    }), V(
+      () => t.countCharts,
+      () => M(),
+      { flush: "post" }
+    );
+    const y = p(() => {
+      if (!d.value) return {};
+      const i = d.value.elCol.getBoundingClientRect(), n = {
+        top: i.bottom + window.scrollY + "px"
+      };
+      return document.documentElement.clientWidth / 2 > i.right ? n.left = i.right + window.scrollX + 10 + "px" : (n.left = i.left + window.scrollX - 10 + "px", n.transform = "translate(-100%, 0)"), n;
+    });
+    return N(() => {
+      C = new ResizeObserver(() => M()), C.observe(u.value), V(m, () => {
+        const h = (u.value.children[0].clientHeight + parseInt(window.getComputedStyle(u.value).getPropertyValue("row-gap"))) * (m.value - 1);
+        u.value.scrollTo({ top: h, behavior: "smooth" });
+      });
+    }), R(() => {
+      C.disconnect();
+    }), (i, n) => (a(), s("div", {
+      class: f(["top-miniCharts", {
+        "top-miniCharts": !0,
+        scrollable: c.value > 1,
+        "top-miniCharts_hideChartInMobile": i.hideChartInMobile
+      }]),
+      ref_key: "elRef",
+      ref: u
+    }, [
+      z(i.$slots, "default"),
+      c.value > 1 ? (a(), s("div", Q, [
+        (a(!0), s(k, null, w(c.value, (h) => (a(), s("span", {
+          class: f({ "top-active": h === m.value }),
+          onClick: (e) => m.value = h
+        }, null, 10, Z))), 256))
+      ])) : H("", !0),
+      (a(), G(O, { to: "body" }, [
+        d.value ? (a(), s("div", {
+          key: 0,
+          class: "top-miniCharts_tooltip",
+          style: L(y.value)
+        }, [
+          r("span", null, g(d.value.date), 1),
+          r("span", null, g(d.value.value), 1)
+        ], 4)) : H("", !0)
+      ]))
     ], 2));
   }
-}), K = {
-  "top-miniChart": "top-miniChart",
-  "top-miniChart_title": "top-miniChart_title",
-  "top-color_orange": "top-color_orange",
-  "top-color_pink": "top-color_pink",
-  "top-color_blue": "top-color_blue",
-  "top-miniChart_data": "top-miniChart_data",
-  "top-miniChart_dataDynamic": "top-miniChart_dataDynamic",
-  "top-miniChart_dataDynamic-direction_up": "top-miniChart_dataDynamic-direction_up",
-  "top-miniChart_dataDynamic-direction_stay": "top-miniChart_dataDynamic-direction_stay",
-  "top-miniChart_dataDynamic-direction_down": "top-miniChart_dataDynamic-direction_down",
-  "top-miniChart_chartGrid": "top-miniChart_chartGrid",
-  "top-miniChart_chartGridCol": "top-miniChart_chartGridCol",
-  "top-active": "top-active",
-  "top-miniChart_chartGridCol-none": "top-miniChart_chartGridCol-none",
-  "top-miniChart_chart": "top-miniChart_chart"
-}, Q = {
-  $style: K
-}, R = /* @__PURE__ */ B(J, [["__cssModules", Q]]), Z = R;
+}), ne = K, ae = x;
 export {
-  Z as TopMiniChart
+  ne as TopMiniChart,
+  ae as TopMiniCharts
 };
 //# sourceMappingURL=charts.js.map

package/charts/charts.js.map

@@ -1 +1 @@
-{"version":3,"file":"charts.js","sources":["../../src/components/charts/miniChart/utils/consts.ts","../../src/components/charts/miniChart/miniChart.vue","../../src/components/charts/charts.ts"],"sourcesContent":["/**\n * Кол-во столбцов по умолчанию\n */\nexport const defaultNumberCols = 90;\n\n/**\n * Минимальная высота колонки (в процентах)\n */\nexport const minHeight = 10; // %","<script setup lang=\"ts\">\nimport type { Props } from './miniChart';\nimport { computed } from 'vue';\nimport { dateFormat } from '@/core/utils/date';\nimport { percentOfNumber } from '@/core/utils/number';\nimport { defaultNumberCols, minHeight } from './utils/consts';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcolor: 'blue',\n\tnumberCols: defaultNumberCols,\n});\nconst model = defineModel<Props['modelValue']>();\n\n/**\n * Расчет высоты колонки (в процентах)\n */\nconst genColHeight = (value: number): number => {\n\tlet maximumValue = maxValue.value;\n\n\t// для графиков средней и медианной делаем максимум 1\n\tif (props.isInvert) {\n\t\tvalue -= 1;\n\t\tmaximumValue -= 1;\n\t}\n\n\tlet height = maximumValue > 0 ? Math.round((value / maximumValue) * (100 - minHeight)) : 0;\n\tif (props.isInvert) return 100 - height;\n\n\treturn height + minHeight;\n};\n\nconst isActiveDate = (date: string) => props.activeDates.includes(date);\n\nconst maxValue = computed(() => Math.max(...props.values));\n\n/**\n * Из-за стиля .top-miniChart_chartGrid - direction: rtl\n */\nconst reversedDates = computed(() => props.dates.slice().reverse());\n\n/**\n * Кол-во пустых колонок\n */\nconst numOfEmptyCols = computed(() => {\n\tif (!props.dates.length) return 0;\n\n\treturn props.numberCols - props.dates.length;\n});\n\nconst resetModel = () => {\n\tmodel.value = null;\n};\n\nconst setModel = (e: Event, date: string, value: number | null) => {\n\tmodel.value = {\n\t\telCol: e.target,\n\t\tdate: dateFormat(date),\n\t\tvalue: value === null ? '--' : value + (props.valueSuffix ?? ''),\n\t};\n};\n\n/**\n * Возвращает численный показатель динамики графика\n */\nconst dynamic = computed(() => {\n\tconst prevPeriodValue = props.values[props.keysForDyn.start];\n\tconst currentValue = props.values[props.keysForDyn.end];\n\tconst dynValue = currentValue - prevPeriodValue;\n\tconst sign = dynValue < 0 ? -1 : 1;\n\n\treturn sign * (percentOfNumber(Math.abs(dynValue)) as number);\n});\n\nconst dynamicDirection = computed(() => {\n\tlet direction: 'up' | 'stay' | 'down' = 'stay';\n\n\tif (!props.isInvert) {\n\t\tif (dynamic.value > 0) direction = 'up';\n\t\tif (dynamic.value < 0) direction = 'down';\n\t} else {\n\t\tif (dynamic.value > 0) direction = 'down';\n\t\tif (dynamic.value < 0) direction = 'up';\n\t}\n\n\treturn direction;\n});\n\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t['top-miniChart']: true,\n\t\t\t[`top-color_${color}`]: true,\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tclass=\"top-miniChart_title\"\n\t\t\t:data-top-icon=\"gIcon\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_chart\">\n\t\t\t<div\n\t\t\t\tclass=\"top-miniChart_chartGrid\"\n\t\t\t\t@mouseleave=\"resetModel()\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"(date, i) in reversedDates\"\n\t\t\t\t\t:key=\"i\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t['top-miniChart_chartGridCol']: true,\n\t\t\t\t\t\t['top-active']: isActiveDate(date)\n\t\t\t\t\t}\"\n\t\t\t\t\t@mouseenter=\"setModel($event, date, values[values.length - i - 1])\"\n\t\t\t\t>\n\t\t\t\t\t<div :style=\"'height:' + genColHeight(values[values.length - i - 1]) + '%'\"/>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"() in numOfEmptyCols\"\n\t\t\t\t\tclass=\"top-miniChart_chartGridCol top-miniChart_chartGridCol-none\"\n\t\t\t\t\t@mouseenter=\"resetModel()\"\n\t\t\t\t>\n\t\t\t\t\t<div></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_data\">\n\t\t\t<span :class=\"{\n\t\t\t\t['top-miniChart_dataDynamic']: true,\n\t\t\t\t[`top-miniChart_dataDynamic-direction_${dynamicDirection}`]: true,\n\t\t\t}\">\n\t\t\t\t{{ Math.abs(dynamic) || '' }}\n\t\t\t</span>\n\t\t\t<span class=\"top-miniChart_dataValue\">\n\t\t\t\t{{ percentOfNumber(values[values.length - 1]) || 0 }}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<div\n\t\t\tv-if=\"additionalHTML\"\n\t\t\tv-html=\"additionalHTML\"\n\t\t/>\n\t</div>\n\n</template>\n<style module src=\"./styles/miniChart.css\"></style>\n","import type { ComponentCustomProps } from 'vue';\n\nimport MiniChart from './miniChart/miniChart.vue';\n\nexport const TopMiniChart = MiniChart as typeof MiniChart & ComponentCustomProps"],"names":["defaultNumberCols","minHeight","props","__props","model","useModel","genColHeight","value","maximumValue","maxValue","height","isActiveDate","date","computed","reversedDates","numOfEmptyCols","resetModel","setModel","e","dateFormat","dynamic","prevPeriodValue","dynValue","percentOfNumber","dynamicDirection","direction","TopMiniChart","MiniChart"],"mappings":";;;;;;AAGO,MAAAA,IAAA,IAKAC,IAAA;;;;;;;;;;;;;;;;;;;;;ACDP,UAAAC,IAAAC,GAIAC,IAAAC,EAAAF,GAAA,YAAA,GAKAG,IAAA,CAAAC,MAAA;AACC,UAAAC,IAAAC,EAAA;AAGA,MAAAP,EAAA,aACCK,KAAA,GACAC,KAAA;AAGD,UAAAE,IAAAF,IAAA,IAAA,KAAA,MAAAD,IAAAC,KAAA,MAAAP,EAAA,IAAA;AACA,aAAAC,EAAA,WAAA,MAAAQ,IAEAA,IAAAT;AAAA,IAAgB,GAGjBU,IAAA,CAAAC,MAAAV,EAAA,YAAA,SAAAU,CAAA,GAEAH,IAAAI,EAAA,MAAA,KAAA,IAAA,GAAAX,EAAA,MAAA,CAAA,GAKAY,IAAAD,EAAA,MAAAX,EAAA,MAAA,MAAA,EAAA,QAAA,CAAA,GAKAa,IAAAF,EAAA,MACCX,EAAA,MAAA,SAEAA,EAAA,aAAAA,EAAA,MAAA,SAFA,CAEsC,GAGvCc,IAAA,MAAA;AACC,MAAAZ,EAAA,QAAA;AAAA,IAAc,GAGfa,IAAA,CAAAC,GAAAN,GAAAL,MAAA;AACC,MAAAH,EAAA,QAAA;AAAA,QAAc,OAAAc,EAAA;AAAA,QACJ,MAAAC,EAAAP,CAAA;AAAA,QACY,OAAAL,MAAA,OAAA,OAAAA,KAAAL,EAAA,eAAA;AAAA,MACwC;AAAA,IAC9D,GAMDkB,IAAAP,EAAA,MAAA;AACC,YAAAQ,IAAAnB,EAAA,OAAAA,EAAA,WAAA,KAAA,GAEAoB,IADApB,EAAA,OAAAA,EAAA,WAAA,GAAA,IACAmB;AAGA,cAFAC,IAAA,IAAA,KAAA,KAEAC,EAAA,KAAA,IAAAD,CAAA,CAAA;AAAA,IAAiD,CAAA,GAGlDE,IAAAX,EAAA,MAAA;AACC,UAAAY,IAAA;AAEA,aAAAvB,EAAA,YAICkB,EAAA,QAAA,MAAAK,IAAA,SACAL,EAAA,QAAA,MAAAK,IAAA,UAJAL,EAAA,QAAA,MAAAK,IAAA,OACAL,EAAA,QAAA,MAAAK,IAAA,UAMDA;AAAA,IAAO,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDChFDC,IAAAC;"}
+{"version":3,"file":"charts.js","sources":["../../src/components/charts/miniChart/utils/consts.ts","../../src/components/charts/miniChart/miniChart.vue","../../src/components/charts/miniCharts/miniCharts.vue","../../src/components/charts/charts.ts"],"sourcesContent":["/**\n * Кол-во столбцов по умолчанию\n */\nexport const defaultNumberCols = 90;\n\n/**\n * Минимальная высота колонки (в процентах)\n */\nexport const minHeight = 10; // %","<script setup lang=\"ts\">\nimport type { Props } from './miniChart';\nimport { computed } from 'vue';\nimport { dateFormat } from '@/core/utils/date';\nimport { percentOfNumber } from '@/core/utils/number';\nimport { defaultNumberCols, minHeight } from './utils/consts';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcolor: 'blue',\n\tnumberCols: defaultNumberCols,\n});\nconst model = defineModel<Props['modelValue']>();\n\n/**\n * Расчет высоты колонки (в процентах)\n */\nconst genColHeight = (value: number): number => {\n\tlet maximumValue = maxValue.value;\n\n\t// для графиков средней и медианной делаем максимум 1\n\tif (props.isInvert) {\n\t\tvalue -= 1;\n\t\tmaximumValue -= 1;\n\t}\n\n\tlet height = maximumValue > 0 ? Math.round((value / maximumValue) * (100 - minHeight)) : 0;\n\tif (props.isInvert) return 100 - height;\n\n\treturn height + minHeight;\n};\n\nconst isActiveDate = (date: string) => props.activeDates.includes(date);\n\nconst maxValue = computed(() => Math.max(...props.values));\n\n/**\n * Из-за стиля .top-miniChart_chartGrid - direction: rtl\n */\nconst reversedDates = computed(() => props.dates.slice().reverse());\n\n/**\n * Кол-во пустых колонок\n */\nconst numOfEmptyCols = computed(() => {\n\tif (!props.dates.length) return 0;\n\n\treturn props.numberCols - props.dates.length;\n});\n\nconst resetModel = () => {\n\tmodel.value = null;\n};\n\nconst setModel = (e: Event, date: string, value: number | null) => {\n\tif (!(e.target instanceof HTMLElement)) return;\n\n\tmodel.value = {\n\t\telCol: e.target,\n\t\tdate: dateFormat(date),\n\t\tvalue: value === null ? '--' : value + (props.valueSuffix ?? ''),\n\t};\n};\n\n/**\n * Возвращает численный показатель динамики графика\n */\nconst dynamic = computed(() => {\n\tconst prevPeriodValue = props.values[props.keysForDyn.start];\n\tconst currentValue = props.values[props.keysForDyn.end];\n\tconst dynValue = currentValue - prevPeriodValue;\n\tconst sign = dynValue < 0 ? -1 : 1;\n\n\treturn sign * (percentOfNumber(Math.abs(dynValue)) as number);\n});\n\nconst dynamicDirection = computed(() => {\n\tlet direction: 'up' | 'stay' | 'down' = 'stay';\n\n\tif (!props.isInvert) {\n\t\tif (dynamic.value > 0) direction = 'up';\n\t\tif (dynamic.value < 0) direction = 'down';\n\t} else {\n\t\tif (dynamic.value > 0) direction = 'down';\n\t\tif (dynamic.value < 0) direction = 'up';\n\t}\n\n\treturn direction;\n});\n\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t['top-miniChart']: true,\n\t\t\t['top-miniChart_hideChartInMobile']: hideChartInMobile,\n\t\t\t[`top-color_${color}`]: true,\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tclass=\"top-miniChart_title top-ellipsis\"\n\t\t\t:data-top-icon=\"gIcon\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_chart\">\n\t\t\t<div\n\t\t\t\tclass=\"top-miniChart_chartGrid\"\n\t\t\t\t@mouseleave=\"resetModel()\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"(date, i) in reversedDates\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t['top-miniChart_chartGridCol']: true,\n\t\t\t\t\t\t['top-active']: isActiveDate(date)\n\t\t\t\t\t}\"\n\t\t\t\t\t@mouseenter=\"setModel($event, date, values[values.length - i - 1])\"\n\t\t\t\t>\n\t\t\t\t\t<div :style=\"'height:' + genColHeight(values[values.length - i - 1]) + '%'\"/>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"() in numOfEmptyCols\"\n\t\t\t\t\tclass=\"top-miniChart_chartGridCol top-miniChart_chartGridCol-none\"\n\t\t\t\t\t@mouseenter=\"resetModel()\"\n\t\t\t\t>\n\t\t\t\t\t<div></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_data\">\n\t\t\t<span :class=\"{\n\t\t\t\t['top-miniChart_dataDynamic']: true,\n\t\t\t\t[`top-miniChart_dataDynamic-direction_${dynamicDirection}`]: true,\n\t\t\t}\">\n\t\t\t\t{{ Math.abs(dynamic) || '' }}\n\t\t\t</span>\n\t\t\t<span class=\"top-miniChart_dataValue\">\n\t\t\t\t{{ percentOfNumber(values[values.length - 1]) || 0 }}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<div\n\t\t\tv-if=\"additionalHTML\"\n\t\t\tv-html=\"additionalHTML\"\n\t\t/>\n\t</div>\n\n</template>\n<style>\n@import \"./styles/miniChart.css\";\n</style>\n","<script setup lang=\"ts\">\nimport { ref, computed, watch, onMounted, onUnmounted } from 'vue';\nimport type { Style, Props } from './miniCharts';\n\nconst props = defineProps<Props>();\nconst model = defineModel<Props['modelValue']>();\n\nconst elRef = ref<HTMLElement | null>(null);\n\nlet pagesResizeObserver: ResizeObserver;\n\n/**\n * Количество страниц\n */\nconst countPages = ref(1);\n\n/**\n * Активная страница\n */\nconst activePage = ref(1);\n\n/**\n * Установка количества страниц в блоке\n */\nconst setCountPages = () => {\n\tcountPages.value = Math.round(elRef.value!.scrollHeight / elRef.value!.clientHeight);\n};\n\nwatch(countPages, () => {\n\tif (countPages.value < activePage.value) {\n\t\tactivePage.value = 1;\n\t}\n});\n\nwatch(\n\t() => props.countCharts,\n\t() => setCountPages(),\n\t{ flush: 'post' }\n);\n\n/**\n * Расчет положения для подсказки\n */\nconst tooltipStyle = computed(() => {\n\tif (!model.value) return {};\n\n\tconst box = model.value.elCol.getBoundingClientRect();\n\n\tconst style: Style = {\n\t\ttop: box.bottom + window.scrollY + 'px',\n\t};\n\n\tif (document.documentElement.clientWidth / 2 > box.right) {\n\t\tstyle.left = box.right + window.scrollX + 10 + 'px';\n\t} else {\n\t\tstyle.left = box.left + window.scrollX - 10 + 'px';\n\t\tstyle.transform = 'translate(-100%, 0)';\n\t}\n\n\treturn style;\n});\n\nonMounted(() => {\n\t/**\n\t * Функционал переключения экранов графиков\n\t */\n\tpagesResizeObserver = new ResizeObserver(() => setCountPages());\n\tpagesResizeObserver.observe(elRef.value!);\n\n\twatch(activePage, () => {\n\t\tconst elMiniChart = elRef.value!.children[0];\n\t\tconst pageHeight = elMiniChart.clientHeight + parseInt(window.getComputedStyle(elRef.value!).getPropertyValue('row-gap'));\n\t\tconst scrollTop = pageHeight * (activePage.value - 1);\n\n\t\telRef.value!.scrollTo({ top: scrollTop, behavior: 'smooth' });\n\t});\n});\n\nonUnmounted(() => {\n\tpagesResizeObserver.disconnect();\n});\n</script>\n\n<template>\n\t<div\n\t\tclass=\"top-miniCharts\"\n\t\t:class=\"{\n\t\t\t['top-miniCharts']: true,\n\t\t\t['scrollable']: countPages > 1,\n\t\t\t['top-miniCharts_hideChartInMobile']: hideChartInMobile,\n\t\t}\"\n\t\tref=\"elRef\"\n\t>\n\n\t\t<slot></slot>\n\n\t\t<div\n\t\t\tv-if=\"countPages > 1\"\n\t\t\tclass=\"top-miniCharts_pages\"\n\t\t>\n\t\t\t<span\n\t\t\t\tv-for=\"n in countPages\"\n\t\t\t\t:class=\"{['top-active']: n === activePage}\"\n\t\t\t\t@click=\"activePage = n\"\n\t\t\t></span>\n\t\t</div>\n\n\t\t<Teleport to=\"body\">\n\t\t\t<div\n\t\t\t\tv-if=\"model\"\n\t\t\t\tclass=\"top-miniCharts_tooltip\"\n\t\t\t\t:style=\"tooltipStyle\"\n\t\t\t>\n\t\t\t\t<span>{{ model.date }}</span>\n\t\t\t\t<span>{{ model.value }}</span>\n\t\t\t</div>\n\t\t</Teleport>\n\t</div>\n\n</template>\n\n<style>\n@import \"./styles/miniCharts.css\";\n</style>\n\n\n\n\n","import type { ComponentCustomProps } from 'vue';\n\nimport MiniChart from './miniChart/miniChart.vue';\nimport MiniCharts from './miniCharts/miniCharts.vue';\n\nexport const TopMiniChart = MiniChart as typeof MiniChart & ComponentCustomProps;\n\nexport const TopMiniCharts = MiniCharts as typeof MiniCharts & ComponentCustomProps;\n"],"names":["defaultNumberCols","minHeight","props","__props","model","useModel","genColHeight","value","maximumValue","maxValue","height","isActiveDate","date","computed","reversedDates","numOfEmptyCols","resetModel","setModel","dateFormat","dynamic","prevPeriodValue","dynValue","percentOfNumber","dynamicDirection","direction","elRef","ref","pagesResizeObserver","countPages","activePage","setCountPages","watch","tooltipStyle","box","style","onMounted","scrollTop","onUnmounted","TopMiniChart","_sfc_main$1","TopMiniCharts","_sfc_main"],"mappings":"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"}

package/components/charts/charts.d.ts

@@ -1,3 +1,5 @@
 import { ComponentCustomProps } from 'vue';
 import { default as MiniChart } from './miniChart/miniChart.vue';
+import { default as MiniCharts } from './miniCharts/miniCharts.vue';
 export declare const TopMiniChart: typeof MiniChart & ComponentCustomProps;
+export declare const TopMiniCharts: typeof MiniCharts & ComponentCustomProps;

package/components/charts/miniChart/miniChart.d.ts

@@ -54,6 +54,13 @@ export interface Props {
      * Суффикс для значения
      */
     valueSuffix?: string;
+    /**
+     * Скрыть график на адаптиве
+     *
+     * - true - скрыть
+     * - false - показать
+     */
+    hideChartInMobile?: boolean;
 }
 /**
  * Интерфейс проверки (используется для передачи данных о выбранной проверке через v-model)
@@ -62,7 +69,7 @@ export interface Item {
     /**
      * Эл-т колонки выбранной проверки
      */
-    elCol: EventTarget | null;
+    elCol: HTMLElement;
     /**
      * Дата/время проверки
      */

package/components/charts/miniCharts/miniCharts.d.ts

@@ -0,0 +1,20 @@
+import { Item } from '../miniChart/miniChart';
+export interface Props {
+    modelValue?: Item | null;
+    /**
+     * Кол-во миниграфиков (TopMiniChart)
+     */
+    countCharts: number;
+    /**
+     * Скрывать графики на адаптиве
+     *
+     * - true - скрыть
+     * - false - показать
+     */
+    hideChartInMobile?: boolean;
+}
+export interface Style {
+    top: string;
+    left?: string;
+    transform?: string;
+}

package/components/charts/miniCharts/miniCharts.vue.d.ts

@@ -0,0 +1,29 @@
+import { Props } from './miniCharts';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { Item } from '../miniChart/miniChart';
+declare let __VLS_typeProps: Props;
+type __VLS_PublicProps = {
+    modelValue?: Props['modelValue'];
+} & typeof __VLS_typeProps;
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        elRef: HTMLDivElement;
+    };
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: Item | null | undefined) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: Item | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, 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/components/charts/miniCharts/stories/dummy.d.ts

@@ -0,0 +1,6 @@
+import { Props as MiniChartProps } from '../../miniChart/miniChart';
+/**
+ * Список объектов props для мини графиков
+ */
+declare const propsForMiniCharts: MiniChartProps[];
+export { propsForMiniCharts };

package/components/dialog/dialog/composables/asyncDialogWorker.d.ts

@@ -0,0 +1,51 @@
+import { Ref } from 'vue';
+import { AsyncTopDialogComponentLoader, TopDialogComponent } from './types';
+import { TopDialogHandle } from './dialogWorker';
+/**
+ * Объект для работы с асинхронным диалоговым окном
+ *
+ * Является прослойкой для доступа к TopDialogHandle
+ */
+export declare class AsyncTopDialogHandle<T extends TopDialogComponent> {
+    /**
+     * Функция, определяющая компонент TopDialogComponent
+     */
+    readonly resolve: AsyncTopDialogComponentLoader<T>;
+    /**
+     * Реактивная Сссылка на объект worker,
+     *
+     * Ссылка не будет указывать на объект, если диалоговое окно еще не загружено
+     */
+    readonly worker: Ref<TopDialogHandle<T> | null>;
+    constructor(resolve: AsyncTopDialogComponentLoader<T>);
+    /**
+     * Получить доступ к TopDialogHandle
+     */
+    get(): Promise<TopDialogHandle<T>>;
+    /**
+     * Открыть диалоговое окно
+     */
+    open(...args: Parameters<TopDialogHandle<T>['open']>): Promise<void>;
+    /**
+     * Открыть диалоговое окно как ссылку, для хеш-навигации
+     *
+     * Только общедоступные диалоговые окна, расположенные в @/dialogs
+     */
+    openAsLink(...args: Parameters<TopDialogHandle<T>['open']>): Promise<void>;
+    /**
+     * Закрыть диалоговое окно
+     *
+     * Не меняет состояние компонента диалогового окна
+     */
+    close(...args: Parameters<TopDialogHandle<T>['close']>): Promise<void>;
+    /**
+     * Размонтировать виджет диалогового окна
+     */
+    destroy(...args: Parameters<TopDialogHandle<T>['close']>): Promise<void>;
+    /**
+     * Устанвоить props
+     *
+     * Полностью сбрасывается состояние props
+     */
+    setProps(...args: Parameters<TopDialogHandle<T>['setProps']>): Promise<void>;
+}

package/components/dialog/dialog/composables/dialogWorker.d.ts

@@ -0,0 +1,108 @@
+import { ComponentInstance, ComponentInternalInstance, Ref } from 'vue';
+import { default as TopDialog } from '../dialog.vue';
+import { MoveDirection } from '../../lib/types';
+import { TopDialogComponent } from './types';
+/**
+ * Объект для работы с диалоговым окном
+ *
+ * Каждое окно уникально и может быть открыто одновременно только один раз
+ *
+ * Можно определить много окон, после чего с ними можно вести работу в любой части приложения
+ */
+export declare class TopDialogHandle<T extends TopDialogComponent> {
+    /**
+     * Индентификатор, определяется на уровне компонента TopDialogComponent
+     *
+     * Может использоваться в навигации для открытия нужных окон с нужными настройками
+     */
+    id: string;
+    /**
+     * ID, используемый в верстке диалогового окна
+     */
+    idAttr: string;
+    /**
+     * Пользовательский компонент диалогового окна
+     */
+    Component: T;
+    /**
+     * Компонент инициирован
+     *
+     * Устанавливается после первого вызова useTopDialog()
+     */
+    isMounted: Ref<boolean, boolean>;
+    /**
+     * Компонент готов к использованию
+     *
+     * Используется для внутренних преобразований после отрисовки
+     */
+    isReady: Ref<boolean, boolean>;
+    /**
+     * Диалоговое окно открыто
+     */
+    isOpened: Ref<boolean, boolean>;
+    /**
+     * Имя активной страницы дилогового окна
+     */
+    pageActive: Ref<string, string>;
+    /**
+     * Диалоговое окно находится в состоянии загрузки своей страницы
+     */
+    isLoadingPage: Ref<boolean, boolean>;
+    /**
+     * Следующая активная страница
+     *
+     * В один момент времени может потребоваться отобразить две страницы, чтобы воспроизвести анимацию
+     */
+    pageActiveNext: Ref<string, string>;
+    /**
+     * props компонента, доступны после инициализации
+     */
+    props?: ComponentInstance<T>['$props'];
+    /**
+     * emit базового компонента `TopDialog`
+     */
+    emit?: ComponentInstance<typeof TopDialog>['$emit'];
+    /**
+     * Одноразовое событие на закрытие диалогового окна
+     *
+     * Используется для привязки окна к сценариям использования
+     */
+    onCloseOnce?: (props: typeof this.props, pageName: string) => void;
+    constructor(TopDialogComponent: T);
+    /**
+     * Событие - компонент инициирован
+     */
+    onMounted(topDialogComponent: ComponentInternalInstance, topDialogBaseComponent: ComponentInternalInstance): void;
+    /**
+     * Открыть диалоговое окно
+     *
+     * Учтите, что props в диалоговом окне будут доступны не сразу, а только после инициализации vue компонента
+     */
+    open(pageName?: string, props?: {}, args?: [], onCloseOnce?: typeof this.onCloseOnce, moveDirection?: MoveDirection): Promise<void>;
+    /**
+     * Открыть диалоговое окно как ссылку, для хеш-навигации
+     *
+     * Диалоговые окна загружаются по имени, см. настройку плагина Core topDialogLoader
+     */
+    openAsLink(pageName?: string, props?: {}, _args?: string[], onCloseOnce?: typeof this.onCloseOnce, moveDirection?: MoveDirection): Promise<void>;
+    /**
+     * Закрыть диалоговое окно
+     *
+     * Не меняет состояние компонента диалогового окна
+     */
+    close(): Promise<void>;
+    /**
+     * Размонтировать $.dialog
+     */
+    destroy(): Promise<void>;
+    /**
+     * Устанвоить props
+     *
+     * Полностью сбрасывается состояние props
+     */
+    setProps(props?: ComponentInstance<T>['$props']): Promise<void>;
+    /**
+     * Проверить, есть ли необходимость отрисовки страницы диалогового окна
+     */
+    needShowPage(pageName: string): boolean;
+}

package/components/dialog/dialog/composables/types.d.ts

@@ -0,0 +1,11 @@
+import { Component } from 'vue';
+/**
+ * Компонент с определением конкретного диалогового окна с использованием компонента `TopDialog`
+ */
+export type TopDialogComponent = Component & {
+    id?: string;
+};
+export type AsyncDialogComponentResolveResult<T extends TopDialogComponent> = {
+    default: T;
+};
+export type AsyncTopDialogComponentLoader<T extends TopDialogComponent> = () => Promise<AsyncDialogComponentResolveResult<T>>;

package/components/dialog/dialog/composables/utils.d.ts

@@ -0,0 +1,21 @@
+import { TopDialogHandle } from './dialogWorker';
+import { AsyncTopDialogHandle } from './asyncDialogWorker';
+import { AsyncTopDialogComponentLoader, TopDialogComponent } from './types';
+/**
+ * Получить объект управленя текущим диалоговым окном
+ */
+export declare const useTopDialogSelf: () => TopDialogHandle<TopDialogComponent>;
+/**
+ * Получить объект управленя диалоговым окном
+ *
+ * При первом вызове компонент диалогового окна будет внедрен в компонент DialogWrapper
+ */
+export declare const useTopDialog: <T extends TopDialogComponent>(DialogComponent: T) => TopDialogHandle<T>;
+/**
+ * Получить объект управленя асинхронным диалоговым окном
+ *
+ * Компонент диалогового окна будет загружен и инициирован при первом взаимодействии с объектом
+ *
+ * Использует useTopDialog()
+ */
+export declare const useAsyncTopDialog: <T extends TopDialogComponent>(resolve: AsyncTopDialogComponentLoader<T>) => AsyncTopDialogHandle<T>;

package/components/dialog/dialog/dialog.vue.d.ts

@@ -0,0 +1,27 @@
+import { Props, Slots } from './types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    slots: Readonly<Slots> & Slots;
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    close: (pageName: string) => any;
+    open: (pageName: string) => any;
+}, string, PublicProps, Readonly<Props> & Readonly<{
+    onClose?: ((pageName: string) => any) | undefined;
+    onOpen?: ((pageName: string) => any) | undefined;
+}>, {
+    width: string;
+    height: string;
+    modal: boolean;
+    historyType: "push" | "replace";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, 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/components/dialog/dialog/dialogs/dialogs.vue.d.ts

@@ -0,0 +1,10 @@
+import { TopDialogHandle } from '../composables/dialogWorker';
+import { TopDialogComponent } from '../composables/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+export declare const getDialogWorker: (id: string) => TopDialogHandle<TopDialogComponent> | undefined;
+/**
+ * Добавить компонент диалогового окна для использования
+ */
+export declare const addDialogWorker: <T extends TopDialogComponent>(TopDialogComponent: T) => TopDialogHandle<T>;
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;