@ironsource/shared-ui 2.1.11-rc.6 → 2.1.11-rc.60

package/components/chart/ChartLegend.vue2.js

@@ -1,72 +1,132 @@
- import "../../ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css"; import { defineComponent as E, ref as T, computed as r, openBlock as d, createElementBlock as n, createElementVNode as c, createVNode as u, unref as i, mergeProps as p, Fragment as y, renderList as w, withCtx as S, createTextVNode as U, toDisplayString as B } from "vue";
-import { useVirtualList as D } from "@vueuse/core";
-import N from "../typography/v4/Typography.vue.js";
-import A from "../checkbox/v4/CheckboxV4.vue.js";
-import F from "../search/v4/SearchV4.vue.js";
-import { DEFAULT_MIN_VISIBLE as H, DEFAULT_MAX_VISIBLE as M } from "./consts.js";
-const P = { class: "chart-legend" }, R = { class: "search-box" }, K = /* @__PURE__ */ E({
+ import "../../ChartLegend.vue_vue_type_style_index_0_scoped_aa32a103_lang.css"; import { defineComponent as D, ref as M, computed as m, openBlock as n, createElementBlock as d, createElementVNode as r, createVNode as s, unref as o, mergeProps as I, withCtx as c, createTextVNode as b, Fragment as S, renderList as P, normalizeClass as A, withModifiers as F, createBlock as H, createCommentVNode as U, toDisplayString as L } from "vue";
+import { useVirtualList as z } from "@vueuse/core";
+import f from "../typography/v4/Typography.vue.js";
+import R from "../checkbox/v4/CheckboxV4.vue.js";
+import q from "../search/v4/SearchV4.vue.js";
+import { DEFAULT_MIN_VISIBLE as G, DEFAULT_MAX_VISIBLE as X } from "./consts.js";
+import $ from "../icon/v4/IconV4.vue.js";
+import "../icon/v4/IconFlag.vue.js";
+import j from "../tooltip/v4/TooltipV4.vue.js";
+const J = { class: "chart-legend" }, K = { class: "search-box" }, O = {
+  key: 0,
+  class: "empty-list"
+}, Q = ["onClick"], W = { class: "label-container" }, ne = /* @__PURE__ */ D({
   __name: "ChartLegend",
   props: {
     items: { default: () => [] },
     visibleIds: { default: () => [] },
-    minVisible: { default: H },
-    maxVisible: { default: M }
+    minVisible: { default: G },
+    maxVisible: { default: X },
+    maxLimitTooltipText: { default: "" }
   },
   emits: ["update:visibleIds"],
-  setup(m, { emit: b }) {
-    const s = m, h = 32, o = T(""), f = r(() => {
-      const t = o.value.toLowerCase();
-      return s.items.filter(
-        (l) => l.label.toLowerCase().includes(t)
+  setup(v, { emit: g }) {
+    const l = v, k = 32, p = M(""), T = m(() => {
+      const t = p.value.toLowerCase();
+      return l.items.filter(
+        (i) => i.label.toLowerCase().includes(t)
       );
-    }), a = (t) => s.visibleIds.includes(t.id), v = r(
-      () => s.visibleIds.length >= s.maxVisible
-    ), I = r(
-      () => s.visibleIds.length <= s.minVisible
-    ), _ = (t) => I.value && a(t) || v.value && !a(t), V = (t, l) => {
-      b(
+    }), a = (t) => l.visibleIds.includes(t.id), h = m(
+      () => l.visibleIds.length >= l.maxVisible
+    ), y = m(
+      () => l.visibleIds.length <= l.minVisible
+    ), u = (t) => y.value && a(t) || h.value && !a(t), C = (t) => !l.maxLimitTooltipText || a(t) || !h.value, V = (t, i) => {
+      g(
         "update:visibleIds",
-        t ? [...s.visibleIds, l.id] : s.visibleIds.filter((e) => e !== l.id)
+        t ? [...l.visibleIds, i.id] : l.visibleIds.filter((e) => e !== i.id)
       );
-    }, { list: g, containerProps: L, wrapperProps: x } = D(f, {
-      itemHeight: h,
+    }, { list: x, containerProps: w, wrapperProps: E } = z(T, {
+      itemHeight: k,
       overscan: 10
-    });
-    return (t, l) => (d(), n("div", P, [
-      c("div", R, [
-        u(i(F), {
-          modelValue: o.value,
-          "onUpdate:modelValue": l[0] || (l[0] = (e) => o.value = e)
+    }), N = (t) => {
+      u(t) || V(!a(t), t);
+    };
+    return (t, i) => (n(), d("div", J, [
+      r("div", K, [
+        s(o(q), {
+          modelValue: p.value,
+          "onUpdate:modelValue": i[0] || (i[0] = (e) => p.value = e)
         }, null, 8, ["modelValue"])
       ]),
-      c("div", p({ class: "legend" }, i(L)), [
-        c("ul", p({ class: "legend__list" }, i(x)), [
-          (d(!0), n(y, null, w(i(g), ({ data: e, index: k }) => (d(), n("li", { key: k }, [
-            u(i(A), {
-              color: e.color,
-              "is-checked": a(e),
-              disabled: _(e),
-              "onUpdate:isChecked": (C) => V(C, e)
-            }, null, 8, ["color", "is-checked", "disabled", "onUpdate:isChecked"]),
-            u(i(N), {
-              variant: "body2",
-              "is-truncated": "",
-              class: "legend-label",
-              "with-tooltip": "",
-              "tooltip-text": e.label,
-              "tooltip-placement": "top"
+      r("div", I({ class: "legend" }, o(w)), [
+        r("ul", I({ class: "legend__list" }, o(E)), [
+          o(x).length === 0 ? (n(), d("li", O, [
+            s(o(f), { variant: "body2" }, {
+              default: c(() => [
+                b("No results")
+              ]),
+              _: 1
+            })
+          ])) : (n(!0), d(S, { key: 1 }, P(o(x), ({ data: e, index: B }) => (n(), d("li", {
+            key: B,
+            class: A({ "disabled-item": u(e) })
+          }, [
+            s(o(j), {
+              text: v.maxLimitTooltipText,
+              disabled: C(e),
+              class: "disabled-tooltip"
             }, {
-              default: S(() => [
-                U(B(e.label), 1)
+              default: c(() => [
+                r("div", {
+                  class: "item-wrapper",
+                  onClick: (_) => N(e)
+                }, [
+                  s(o(R), {
+                    color: e.color,
+                    "is-checked": a(e),
+                    disabled: u(e),
+                    onClick: i[1] || (i[1] = F(
+                      (_) => {
+                        _.stopPropagation();
+                      },
+                      ["stop"]
+                    ))
+                  }, null, 8, ["color", "is-checked", "disabled"]),
+                  e.icon ? (n(), H(o($), {
+                    key: 0,
+                    class: "icon-color",
+                    type: e.iconType,
+                    name: e.icon,
+                    size: "16px"
+                  }, null, 8, ["type", "name"])) : U("", !0),
+                  r("div", W, [
+                    s(o(f), {
+                      variant: "body2",
+                      class: "legend-label",
+                      "is-truncated": "",
+                      "with-tooltip": "",
+                      "tooltip-text": e.label,
+                      "tooltip-placement": "left"
+                    }, {
+                      default: c(() => [
+                        b(L(e.label), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["tooltip-text"]),
+                    s(o(f), {
+                      variant: "caption",
+                      class: "legend-caption legend-label",
+                      "is-truncated": "",
+                      "with-tooltip": "",
+                      "tooltip-text": e.caption,
+                      "tooltip-placement": "left"
+                    }, {
+                      default: c(() => [
+                        b(L(e.caption), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["tooltip-text"])
+                  ])
+                ], 8, Q)
               ]),
               _: 2
-            }, 1032, ["tooltip-text"])
-          ]))), 128))
+            }, 1032, ["text", "disabled"])
+          ], 2))), 128))
         ], 16)
       ], 16)
     ]));
   }
 });
 export {
-  K as default
+  ne as default
 };

package/components/chart/ChartLoader.vue.js

@@ -1,25 +1,7 @@
-import { openBlock as o, createElementBlock as c, pushScopeId as r, popScopeId as s, createElementVNode as t } from "vue";
-/* empty css                  */import a from "../../_virtual/_plugin-vue_export-helper.js";
-const d = {}, i = (e) => (r("data-v-142c444a"), e = e(), s(), e), n = { class: "chart-loader" }, p = /* @__PURE__ */ i(() => /* @__PURE__ */ t("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 1072 275",
-  preserveAspectRatio: "none",
-  width: "100%",
-  height: "100%",
-  fill: "none"
-}, [
-  /* @__PURE__ */ t("path", {
-    d: "M499.744 87.7024L499 87.4816C399.137 70.0475 293 138.418 218 173.72C120 219.848 87 235.892 0 275L1072 275C979 -57.3526 836.258 -31.5829 732 59.404C648.885 131.939 570.549 108.704 499.744 87.7024Z",
-    fill: "black",
-    "fill-opacity": "0.05"
-  })
-], -1)), _ = [
-  p
-];
-function l(e, h) {
-  return o(), c("div", n, _);
-}
-const w = /* @__PURE__ */ a(d, [["render", l], ["__scopeId", "data-v-142c444a"]]);
+import o from "./ChartLoader.vue2.js";
+/* empty css                  */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../ChartLoader.vue_vue_type_style_index_0_scoped_ffa4cc66_lang.css"; //*');
+const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-ffa4cc66"]]);
 export {
-  w as default
+  c as default
 };

package/components/chart/ChartLoader.vue2.js

@@ -0,0 +1,15 @@
+ import "../../ChartLoader.vue_vue_type_style_index_0_scoped_ffa4cc66_lang.css"; import { defineComponent as e, openBlock as o, createElementBlock as r, createElementVNode as t, createVNode as a } from "vue";
+import c from "../loader/v4/Loader.vue.js";
+const n = { class: "chart-loader" }, s = { class: "chart-loader-wrapper" }, i = /* @__PURE__ */ e({
+  __name: "ChartLoader",
+  setup(d) {
+    return (_, p) => (o(), r("div", n, [
+      t("div", s, [
+        a(c)
+      ])
+    ]));
+  }
+});
+export {
+  i as default
+};

package/components/chart/ChartTooltip.vue.d.ts

@@ -1,8 +1,7 @@
-import { TooltipItem } from 'chart.js';
-import { ValueFormat } from '@/components/chart/types';
+import { MyTooltipItem, ValueFormat } from '@/components/chart/types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string;
-    dataPoints: TooltipItem<'line'>[];
+    dataPoints: MyTooltipItem<'line'>[];
     xAxisFormat?: ValueFormat;
     yAxisFormat?: ValueFormat;
     totalLabel?: string;
@@ -16,7 +15,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     totalValue: any;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string;
-    dataPoints: TooltipItem<'line'>[];
+    dataPoints: MyTooltipItem<'line'>[];
     xAxisFormat?: ValueFormat;
     yAxisFormat?: ValueFormat;
     totalLabel?: string;
@@ -30,7 +29,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     totalValue: any;
 }>>>, {
     title: string;
-    dataPoints: TooltipItem<'line'>[];
+    dataPoints: MyTooltipItem<'line'>[];
     xAxisFormat: ValueFormat;
     yAxisFormat: ValueFormat;
     totalLabel: string;

package/components/chart/ChartTooltip.vue.js

@@ -1,7 +1,7 @@
 import o from "./ChartTooltip.vue2.js";
 /* empty css                   */import t from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_ec636f18_lang.css"; //*');
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ec636f18"]]);
+// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_6744325c_lang.css"; //*');
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6744325c"]]);
 export {
   s as default
 };

package/components/chart/ChartTooltip.vue2.js

@@ -1,10 +1,15 @@
- import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_ec636f18_lang.css"; import { defineComponent as y, computed as b, openBlock as a, createElementBlock as s, createElementVNode as u, createBlock as g, unref as e, withCtx as l, createTextVNode as o, toDisplayString as r, createCommentVNode as f, Fragment as h, renderList as k, normalizeStyle as v, createVNode as d } from "vue";
-import i from "../typography/v4/Typography.vue.js";
-import { formatValue as c } from "./utils/utils.js";
-const F = { class: "chart-tooltip" }, V = { class: "tooltip-title" }, p = { class: "list" }, A = {
+ import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_6744325c_lang.css"; import { defineComponent as b, computed as x, openBlock as l, createElementBlock as c, createVNode as o, unref as t, withCtx as r, createTextVNode as i, toDisplayString as s, createCommentVNode as m, createElementVNode as f, Fragment as v, renderList as F, normalizeStyle as h, createBlock as g } from "vue";
+import n from "../typography/v4/Typography.vue.js";
+import { formatValue as d } from "./utils/utils.js";
+import k from "../icon/v4/IconV4.vue.js";
+import "../icon/v4/IconFlag.vue.js";
+const A = { class: "chart-tooltip" }, V = {
   key: 0,
+  class: "tooltip-title-wrapper"
+}, C = { class: "list" }, T = { class: "popover-label-wrapper" }, _ = {
+  key: 1,
   class: "tooltip-footer"
-}, T = /* @__PURE__ */ y({
+}, I = /* @__PURE__ */ b({
   __name: "ChartTooltip",
   props: {
     title: { default: "" },
@@ -14,68 +19,84 @@ const F = { class: "chart-tooltip" }, V = { class: "tooltip-title" }, p = { clas
     totalLabel: { default: "Total" },
     totalValue: { default: null }
   },
-  setup(t) {
-    const m = t, x = b(() => m.xAxisFormat === "date" ? "dateLong" : m.xAxisFormat);
-    return (C, _) => (a(), s("div", F, [
-      u("div", V, [
-        t.title ? (a(), g(e(i), {
-          key: 0,
-          variant: "subtitle2"
+  setup(e) {
+    const u = e, y = x(() => u.xAxisFormat === "date" ? "dateLong" : u.xAxisFormat), p = x(() => u.xAxisFormat === "date" ? "day" : u.xAxisFormat);
+    return (w, B) => (l(), c("div", A, [
+      e.title ? (l(), c("div", V, [
+        o(t(n), { variant: "subtitle2" }, {
+          default: r(() => [
+            i(s(t(d)(e.title, t(y))), 1)
+          ]),
+          _: 1
+        }),
+        o(t(n), {
+          class: "tooltip-sub-title",
+          variant: "caption"
         }, {
-          default: l(() => [
-            o(r(e(c)(t.title, e(x))), 1)
+          default: r(() => [
+            i(s(t(d)(e.title, t(p))), 1)
           ]),
           _: 1
-        })) : f("", !0)
-      ]),
-      u("ul", p, [
-        (a(!0), s(h, null, k(t.dataPoints, (n) => (a(), s("li", {
-          key: n.datasetIndex,
+        })
+      ])) : m("", !0),
+      f("ul", C, [
+        (l(!0), c(v, null, F(e.dataPoints, (a) => (l(), c("li", {
+          key: a.datasetIndex,
           class: "list__item"
         }, [
-          u("span", {
+          f("span", {
             class: "color-box",
-            style: v({
-              backgroundColor: String(n.dataset.pointBackgroundColor)
+            style: h({
+              backgroundColor: String(a.dataset.pointBackgroundColor)
             })
           }, null, 4),
-          d(e(i), {
-            variant: "body2",
-            class: "flex-grow"
-          }, {
-            default: l(() => [
-              o(r(n.dataset.label), 1)
-            ]),
-            _: 2
-          }, 1024),
-          d(e(i), { variant: "body2" }, {
-            default: l(() => [
-              o(r(e(c)(n.parsed.y, t.yAxisFormat)), 1)
+          a.dataset.icon ? (l(), g(t(k), {
+            key: 0,
+            class: "platform-icon",
+            type: a.dataset.iconType,
+            name: a.dataset.icon,
+            size: "16px"
+          }, null, 8, ["type", "name"])) : m("", !0),
+          f("div", T, [
+            o(t(n), {
+              variant: "body2",
+              class: "flex-grow truncated-label",
+              "is-truncated": ""
+            }, {
+              default: r(() => [
+                i(s(a.dataset.label), 1)
+              ]),
+              _: 2
+            }, 1024)
+          ]),
+          o(t(n), { variant: "body2" }, {
+            default: r(() => [
+              i(s(t(d)(a.parsed.y, e.yAxisFormat)), 1)
             ]),
             _: 2
           }, 1024)
         ]))), 128))
       ]),
-      t.totalValue !== null ? (a(), s("div", A, [
-        d(e(i), {
+      e.totalValue !== null ? (l(), c("div", _, [
+        o(t(n), {
           variant: "body2",
           class: "flex-grow"
         }, {
-          default: l(() => [
-            o(r(t.totalLabel), 1)
+          default: r(() => [
+            i(s(e.totalLabel), 1)
           ]),
           _: 1
         }),
-        d(e(i), { variant: "body2" }, {
-          default: l(() => [
-            o(r(e(c)(t.totalValue, t.yAxisFormat)), 1)
+        o(t(n), { variant: "body2" }, {
+          default: r(() => [
+            i(s(t(d)(e.totalValue, e.yAxisFormat)), 1)
           ]),
           _: 1
         })
-      ])) : f("", !0)
+      ])) : m("", !0)
     ]));
   }
 });
 export {
-  T as default
+  I as default
 };

package/components/chart/SettingsHeader.vue.js

@@ -1,7 +1,7 @@
 import e from "./SettingsHeader.vue2.js";
 /* empty css                     */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_1791e4fe_lang.css"; //*');
-const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-1791e4fe"]]);
+// import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_9b6cd9d9_lang.css"; //*');
+const d = /* @__PURE__ */ o(e, [["__scopeId", "data-v-9b6cd9d9"]]);
 export {
-  p as default
+  d as default
 };

package/components/chart/SettingsHeader.vue2.js

@@ -1,57 +1,65 @@
- import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_1791e4fe_lang.css"; import { defineComponent as u, computed as h, openBlock as y, createElementBlock as f, createElementVNode as t, normalizeClass as i, createVNode as v, unref as r, isRef as g, renderSlot as a } from "vue";
-import T from "../dropdown/v4/DropdownV4.vue.js";
+ import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_9b6cd9d9_lang.css"; import { defineComponent as h, computed as g, openBlock as y, createElementBlock as f, createElementVNode as r, normalizeClass as a, createVNode as l, unref as t, isRef as v, withCtx as T, mergeProps as w, renderSlot as p } from "vue";
+import b from "../dropdown/v4/DropdownV4.vue.js";
 import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
 import "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
 import "../dropdown/v4/ChipDropdownTrigger.vue.js";
 import "../dropdown/v4/AppDropdownTrigger.vue.js";
-import "../dropdown/v4/ButtonDropdownTrigger.vue.js";
+import k from "../dropdown/v4/ButtonDropdownTrigger.vue.js";
 import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
 import "../dropdown/v4/TreeDropdown.vue.js";
 import "../dropdown/v4/OptionV4.vue.js";
-import { DROPDOWN_TYPE_OPTIONS as d } from "./consts.js";
-const k = { class: "settings-header-container" }, b = { class: "chart-type-selection" }, V = /* @__PURE__ */ u({
+import "../dropdown/v4/ConditionalDropdown.vue.js";
+import { DROPDOWN_TYPE_OPTIONS as c } from "./consts.js";
+const _ = { class: "settings-header-container" }, B = { class: "chart-type-selection" }, x = /* @__PURE__ */ h({
   __name: "SettingsHeader",
   props: {
     chartType: null,
     hideLegend: { type: Boolean }
   },
   emits: ["update:chartType"],
-  setup(o, { emit: l }) {
-    const p = o, s = h({
+  setup(s, { emit: m }) {
+    const u = s, o = g({
       get() {
-        return d.find(({ id: e }) => e === p.chartType);
+        return c.find(({ id: e }) => e === u.chartType);
       },
       set(e) {
-        l("update:chartType", e.id);
+        m("update:chartType", e.id);
       }
-    }), c = (e) => `Chart: ${e.name}`;
-    return (e, n) => (y(), f("div", k, [
-      t("div", {
-        class: i(["settings", { "settings-spacer": !o.hideLegend }])
+    }), i = (e) => `Chart: ${e.name}`;
+    return (e, d) => (y(), f("div", _, [
+      r("div", {
+        class: a(["settings", { "settings-spacer": !s.hideLegend }])
       }, [
-        t("div", b, [
-          v(r(T), {
-            selected: r(s),
-            "onUpdate:selected": n[0] || (n[0] = (m) => g(s) ? s.value = m : null),
-            options: r(d),
+        r("div", B, [
+          l(t(b), {
+            selected: t(o),
+            "onUpdate:selected": d[0] || (d[0] = (n) => v(o) ? o.value = n : null),
+            options: t(c),
             "option-name-key": "name",
-            "display-value": c,
+            "display-value": i,
             placeholder: "Select chart type",
             size: "small"
-          }, null, 8, ["selected", "options"])
+          }, {
+            "dropdown-trigger": T(({ buttonTriggerProps: n }) => [
+              l(t(k), w(n, {
+                label: i(t(o))
+              }), null, 16, ["label"])
+            ]),
+            _: 1
+          }, 8, ["selected", "options"])
         ]),
-        t("div", null, [
-          a(e.$slots, "metric", {}, void 0, !0)
+        r("div", null, [
+          p(e.$slots, "metric", {}, void 0, !0)
         ])
       ], 2),
-      t("div", {
-        class: i(["breakdowns", { "breakdowns-border": !o.hideLegend }])
+      r("div", {
+        class: a(["breakdowns", { "breakdowns-border": !s.hideLegend }])
       }, [
-        a(e.$slots, "breakdowns", {}, void 0, !0)
+        p(e.$slots, "breakdowns", {}, void 0, !0)
       ], 2)
     ]));
   }
 });
 export {
-  V as default
+  x as default
 };