@ironsource/shared-ui 2.1.8-test.1 → 2.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css +1 -0
  2. package/ChartHeader.vue_vue_type_style_index_0_scoped_4c37736e_lang.css +1 -0
  3. package/ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css +1 -0
  4. package/DropdownV4.vue_vue_type_style_index_0_scoped_62a620ee_lang.css +1 -0
  5. package/GroupOption.vue_vue_type_style_index_0_scoped_5f372a81_lang.css +1 -0
  6. package/components/chart/Chart.vue.d.ts +5 -0
  7. package/components/chart/Chart.vue.js +4 -4
  8. package/components/chart/Chart.vue2.js +51 -49
  9. package/components/chart/ChartHeader.vue.d.ts +5 -0
  10. package/components/chart/ChartHeader.vue.js +2 -2
  11. package/components/chart/ChartHeader.vue2.js +35 -22
  12. package/components/chart/ChartLegend.vue.js +3 -3
  13. package/components/chart/ChartLegend.vue2.js +35 -28
  14. package/components/chart/index.d.ts +20 -1
  15. package/components/dropdown/common/Dropdown.common.d.ts +1 -0
  16. package/components/dropdown/common/Dropdown.common.js +207 -178
  17. package/components/dropdown/common/consts.d.ts +1 -0
  18. package/components/dropdown/common/consts.js +4 -0
  19. package/components/dropdown/common/useGroupedOptions.d.ts +10 -0
  20. package/components/dropdown/common/useGroupedOptions.js +57 -0
  21. package/components/dropdown/v4/DropdownV4.vue.d.ts +6 -0
  22. package/components/dropdown/v4/DropdownV4.vue.js +4 -4
  23. package/components/dropdown/v4/DropdownV4.vue2.js +136 -125
  24. package/components/dropdown/v4/GroupOption.vue.d.ts +9 -0
  25. package/components/dropdown/v4/GroupOption.vue.js +7 -0
  26. package/components/dropdown/v4/GroupOption.vue2.js +29 -0
  27. package/components/dropdown/v4/dropdownStoryArgs.d.ts +8 -0
  28. package/components/dropdown/v4/index.d.ts +21 -1
  29. package/index.d.ts +42 -3
  30. package/index.js +111 -116
  31. package/mocks/apps.d.ts +7 -0
  32. package/package.json +1 -1
  33. package/utils/formatNumbers.js +7 -15
  34. package/Chart.vue_vue_type_style_index_0_scoped_df85e0af_lang.css +0 -1
  35. package/ChartHeader.vue_vue_type_style_index_0_scoped_2e3de9c5_lang.css +0 -1
  36. package/ChartLegend.vue_vue_type_style_index_0_scoped_efc608f9_lang.css +0 -1
  37. package/DropdownV4.vue_vue_type_style_index_0_scoped_00ccab6b_lang.css +0 -1
@@ -0,0 +1 @@
1
+ .chart-container[data-v-ea1e5c3e]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;height:388px;border-radius:0 0 6px 6px}.header-wrapper[data-v-ea1e5c3e]{height:76px}.chart-content[data-v-ea1e5c3e]{flex:1}.chart-sidebar[data-v-ea1e5c3e]{border-left:1px solid var(--common-divider)}.chart[data-v-ea1e5c3e]{width:100%;height:312px;position:relative}.chart__canvas[data-v-ea1e5c3e]{width:100%;height:100%}.chart__tooltip[data-v-ea1e5c3e]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px}
@@ -0,0 +1 @@
1
+ .chart-header[data-v-4c37736e]{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 0}.chart-header .subheader[data-v-4c37736e]{color:var(--text-secondary)}.header-texts[data-v-4c37736e]{display:flex;flex-direction:column;color:var(--text-primary);gap:4px}.type-switch[data-v-4c37736e]{display:flex;align-items:center;gap:4px}
@@ -0,0 +1 @@
1
+ .chart-legend[data-v-c0f71a49]{display:flex;flex-direction:column;width:220px;height:100%;padding-bottom:8px}.search-box[data-v-c0f71a49]{padding:12px 12px 4px}.legend[data-v-c0f71a49]{overflow-y:auto;color:var(--text-primary)}.legend__list[data-v-c0f71a49]{list-style:none;padding:0 12px 0 20px}.legend__list>li[data-v-c0f71a49]{display:flex;align-items:center;gap:8px;height:32px}.legend__list>li .legend-label[data-v-c0f71a49]{width:80%}
@@ -0,0 +1 @@
1
+ .v-enter-active[data-v-62a620ee],.v-leave-active[data-v-62a620ee]{transition:opacity .25s ease}ol[data-v-62a620ee],ul[data-v-62a620ee],menu[data-v-62a620ee]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-62a620ee],.dropdown.full-width .button__container[data-v-62a620ee]{width:100%}.dropdown-list-wrapper[data-v-62a620ee]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-62a620ee]{padding:.5rem}.list-container--multi[data-v-62a620ee]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-62a620ee]{padding-bottom:.25rem}.inline-search .list-container[data-v-62a620ee]{padding-top:0}.no-result-container[data-v-62a620ee]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-62a620ee]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-62a620ee]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-62a620ee]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.image-slot[data-v-62a620ee]{margin-right:.5rem}.actions-wrapper[data-v-62a620ee]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-62a620ee]{margin-left:.5rem}
@@ -0,0 +1 @@
1
+ .group-option[data-v-5f372a81]{padding:0 .5rem;box-sizing:border-box;height:35px;display:flex;align-items:center;color:var(--text-secondary)}
@@ -9,6 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
9
9
  tickCount?: number;
10
10
  header?: string;
11
11
  subheader?: string;
12
+ subheaderTooltip?: string;
12
13
  hideLegend?: boolean;
13
14
  minVisible?: number;
14
15
  maxVisible?: number;
@@ -27,6 +28,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
27
28
  tickCount: number;
28
29
  header: string;
29
30
  subheader: string;
31
+ subheaderTooltip: string;
30
32
  hideLegend: boolean;
31
33
  minVisible: number;
32
34
  maxVisible: number;
@@ -48,6 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
48
50
  tickCount?: number;
49
51
  header?: string;
50
52
  subheader?: string;
53
+ subheaderTooltip?: string;
51
54
  hideLegend?: boolean;
52
55
  minVisible?: number;
53
56
  maxVisible?: number;
@@ -66,6 +69,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
66
69
  tickCount: number;
67
70
  header: string;
68
71
  subheader: string;
72
+ subheaderTooltip: string;
69
73
  hideLegend: boolean;
70
74
  minVisible: number;
71
75
  maxVisible: number;
@@ -89,6 +93,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
89
93
  chartType: ChartType;
90
94
  withSettingsHeader: boolean;
91
95
  subheader: string;
96
+ subheaderTooltip: string;
92
97
  dataSets: ChartDataSet[];
93
98
  hideLegend: boolean;
94
99
  tickCount: number;
@@ -1,7 +1,7 @@
1
- import o from "./Chart.vue2.js";
2
- /* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../Chart.vue_vue_type_style_index_0_scoped_df85e0af_lang.css"; //*');
4
- const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-df85e0af"]]);
1
+ import e from "./Chart.vue2.js";
2
+ /* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css"; //*');
4
+ const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-ea1e5c3e"]]);
5
5
  export {
6
6
  a as default
7
7
  };
@@ -1,16 +1,16 @@
1
- import "../../Chart.vue_vue_type_style_index_0_scoped_df85e0af_lang.css"; import { defineComponent as X, ref as g, computed as i, onMounted as j, watch as C, nextTick as q, openBlock as d, createElementBlock as k, Fragment as R, createBlock as h, unref as c, isRef as V, withCtx as O, renderSlot as D, createCommentVNode as v, createElementVNode as f, createVNode as F, normalizeStyle as J } from "vue";
1
+ import "../../Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css"; import { defineComponent as X, ref as g, computed as i, onMounted as j, watch as C, nextTick as q, openBlock as d, createElementBlock as k, Fragment as R, createBlock as m, unref as u, isRef as V, withCtx as O, renderSlot as D, createCommentVNode as v, createElementVNode as f, createVNode as F, normalizeStyle as J } from "vue";
2
2
  import { useVModel as Q } from "@vueuse/core";
3
- import { Chart as N, ArcElement as Y, LineElement as ee, BarElement as te, PointElement as ae, LineController as oe, BarController as re, PieController as ie, ScatterController as le, CategoryScale as ne, LinearScale as se, Filler as de, Tooltip as ce } from "chart.js";
4
- import { HoverVerticalLine as ue } from "./plugins/HoverVerticalLine.js";
3
+ import { Chart as N, ArcElement as Y, LineElement as ee, BarElement as te, PointElement as ae, LineController as oe, BarController as re, PieController as ie, ScatterController as le, CategoryScale as ne, LinearScale as se, Filler as de, Tooltip as ue } from "chart.js";
4
+ import { HoverVerticalLine as ce } from "./plugins/HoverVerticalLine.js";
5
5
  import { formatValue as H, calcStepSize as fe } from "./utils/utils.js";
6
- import { DEFAULT_TICK_COUNT as pe, DEFAULT_MIN_VISIBLE as me, DEFAULT_MAX_VISIBLE as he, COLOR_PALETTE as ve, POINT_BORDER_COLOR as ye, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as U, GRID_LINE_COLOR as M } from "./consts.js";
6
+ import { DEFAULT_TICK_COUNT as pe, DEFAULT_MIN_VISIBLE as he, DEFAULT_MAX_VISIBLE as me, COLOR_PALETTE as ve, POINT_BORDER_COLOR as be, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as U, GRID_LINE_COLOR as M } from "./consts.js";
7
7
  import { ChartType as n } from "./types.js";
8
- import { useTooltipPosition as be } from "./composables/useTooltipPosition.js";
8
+ import { useTooltipPosition as ye } from "./composables/useTooltipPosition.js";
9
9
  import ge from "./ChartTooltip.vue.js";
10
10
  import Ce from "./ChartLegend.vue.js";
11
11
  import ke from "./ChartHeader.vue.js";
12
- import { hexColorToRgba as Se } from "../../utils/color.js";
13
- import { useChartValues as Te } from "./composables/useChartValues.js";
12
+ import { hexColorToRgba as Te } from "../../utils/color.js";
13
+ import { useChartValues as Se } from "./composables/useChartValues.js";
14
14
  import Le from "./ChartLoader.vue.js";
15
15
  import xe from "../emptyState/v4/EmptyStateV4.vue.js";
16
16
  import Be from "./SettingsHeader.vue.js";
@@ -29,9 +29,10 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
29
29
  tickCount: { default: pe },
30
30
  header: { default: "" },
31
31
  subheader: { default: "" },
32
+ subheaderTooltip: { default: "" },
32
33
  hideLegend: { type: Boolean, default: !1 },
33
- minVisible: { default: me },
34
- maxVisible: { default: he },
34
+ minVisible: { default: he },
35
+ maxVisible: { default: me },
35
36
  loading: { type: Boolean, default: !1 },
36
37
  noDataIcon: { default: "file-x" },
37
38
  noDataTitle: { default: "No data to display" },
@@ -39,7 +40,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
39
40
  withSettingsHeader: { type: Boolean, default: !0 }
40
41
  },
41
42
  emits: ["update:chartType", "update:visibleIds"],
42
- setup(a, { emit: S }) {
43
+ setup(a, { emit: T }) {
43
44
  const t = a;
44
45
  N.register(
45
46
  Y,
@@ -53,31 +54,31 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
53
54
  ne,
54
55
  se,
55
56
  de,
56
- ce,
57
- ue
57
+ ue,
58
+ ce
58
59
  );
59
- const u = Q(t, "chartType", S), p = g(null);
60
+ const c = Q(t, "chartType", T), p = g(null);
60
61
  let s = null;
61
- const T = i(() => t.dataSets.length === 0), L = i(() => !t.loading && !T.value), y = () => {
62
+ const S = i(() => t.dataSets.length === 0), L = i(() => !t.loading && !S.value), b = () => {
62
63
  p.value && (s && s.destroy(), s = new N(p.value, B.value));
63
64
  }, z = () => {
64
- s && (s.data.datasets = b.value, s.options = B.value.options, s.update());
65
+ s && (s.data.datasets = y.value, s.options = B.value.options, s.update());
65
66
  };
66
- j(y), C(() => t.chartType, y), C(L, async (e) => {
67
- e && (await q(), y());
67
+ j(b), C(() => t.chartType, b), C(L, async (e) => {
68
+ e && (await q(), b());
68
69
  }), C([() => t.visibleIds, () => t.dataSets], z);
69
- const m = i(
70
+ const h = i(
70
71
  () => t.chartType === n.StackedLine || t.chartType === n.StackedBar
71
- ), _ = i(
72
+ ), $ = i(
72
73
  () => t.chartType === n.Line || t.chartType === n.StackedLine
73
74
  ), x = i(
74
75
  () => t.dataSets.filter((e) => t.visibleIds.includes(e.id))
75
- ), b = i(() => x.value.map((e, o) => {
76
+ ), y = i(() => x.value.map((e, o) => {
76
77
  const r = e.color || ve[o] || "#000000";
77
78
  return {
78
79
  ...e,
79
- fill: m.value ? "start" : void 0,
80
- backgroundColor: Se(
80
+ fill: h.value ? "start" : void 0,
81
+ backgroundColor: Te(
81
82
  r,
82
83
  t.chartType === n.StackedLine ? 10 : 70
83
84
  ),
@@ -93,7 +94,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
93
94
  type: t.chartType == n.Bar || t.chartType === n.StackedBar ? "bar" : "line",
94
95
  // Chart Data
95
96
  data: {
96
- datasets: b.value
97
+ datasets: y.value
97
98
  },
98
99
  // Chart Options
99
100
  options: {
@@ -107,7 +108,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
107
108
  plugins: {
108
109
  legend: { display: !1 },
109
110
  title: { display: !1 },
110
- hoverVerticalLine: _.value,
111
+ hoverVerticalLine: $.value,
111
112
  // tooltip
112
113
  tooltip: {
113
114
  enabled: !1,
@@ -145,7 +146,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
145
146
  borderWidth: 0,
146
147
  hoverRadius: 4,
147
148
  hoverBorderWidth: 2,
148
- pointHoverBackgroundColor: ye
149
+ pointHoverBackgroundColor: be
149
150
  },
150
151
  bar: {
151
152
  borderRadius: 4
@@ -156,7 +157,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
156
157
  x: {
157
158
  beginAtZero: !0,
158
159
  border: { display: !1 },
159
- stacked: m.value,
160
+ stacked: h.value,
160
161
  // stack on top of each other
161
162
  // ticks
162
163
  ticks: {
@@ -184,7 +185,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
184
185
  beginAtZero: !0,
185
186
  border: { display: !1 },
186
187
  // hide left borderline
187
- stacked: m.value,
188
+ stacked: h.value,
188
189
  // stack on top of each other
189
190
  // ticks
190
191
  ticks: {
@@ -206,32 +207,32 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
206
207
  }
207
208
  }
208
209
  })
209
- ), $ = i(
210
- () => b.value.reduce((e, o) => (e[o.id] = o.borderColor, e), {})
211
- ), K = i(() => t.dataSets.map((e) => ({
210
+ ), K = i(
211
+ () => y.value.reduce((e, o) => (e[o.id] = o.borderColor, e), {})
212
+ ), W = i(() => t.dataSets.map((e) => ({
212
213
  id: e.id,
213
214
  label: e.label,
214
- color: $.value[e.id] || null
215
- }))), I = g(null), l = g(null), { position: w } = be(
215
+ color: K.value[e.id] || null
216
+ }))), I = g(null), l = g(null), { position: w } = ye(
216
217
  p,
217
218
  I,
218
219
  l
219
- ), W = i(() => ({
220
+ ), Z = i(() => ({
220
221
  left: `${w.value.left}px`,
221
222
  top: `${w.value.top}px`,
222
223
  opacity: l.value?.opacity || 0
223
- })), { minValue: A, maxValue: Z } = Te({
224
+ })), { minValue: A, maxValue: _ } = Se({
224
225
  parsingConfig: t.parsing,
225
226
  dataSets: x,
226
- isStacked: m
227
+ isStacked: h
227
228
  }), E = i(
228
- () => fe(A.value, Z.value, t.tickCount)
229
+ () => fe(A.value, _.value, t.tickCount)
229
230
  );
230
231
  return (e, o) => (d(), k(R, null, [
231
- a.withSettingsHeader ? (d(), h(Be, {
232
+ a.withSettingsHeader ? (d(), m(Be, {
232
233
  key: 0,
233
- "chart-type": c(u),
234
- "onUpdate:chart-type": o[0] || (o[0] = (r) => V(u) ? u.value = r : null),
234
+ "chart-type": u(c),
235
+ "onUpdate:chart-type": o[0] || (o[0] = (r) => V(c) ? c.value = r : null),
235
236
  "hide-legend": a.hideLegend
236
237
  }, {
237
238
  metric: O(() => [
@@ -243,16 +244,17 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
243
244
  _: 3
244
245
  }, 8, ["chart-type", "hide-legend"])) : v("", !0),
245
246
  f("div", Ie, [
246
- c(L) ? (d(), k(R, { key: 0 }, [
247
+ u(L) ? (d(), k(R, { key: 0 }, [
247
248
  f("section", we, [
248
249
  f("div", Ae, [
249
250
  F(ke, {
250
- "chart-type": c(u),
251
- "onUpdate:chart-type": o[1] || (o[1] = (r) => V(u) ? u.value = r : null),
251
+ "chart-type": u(c),
252
+ "onUpdate:chart-type": o[1] || (o[1] = (r) => V(c) ? c.value = r : null),
252
253
  "with-settings-header": a.withSettingsHeader,
253
254
  header: a.header,
254
- subheader: a.subheader
255
- }, null, 8, ["chart-type", "with-settings-header", "header", "subheader"])
255
+ subheader: a.subheader,
256
+ "subheader-tooltip": a.subheaderTooltip
257
+ }, null, 8, ["chart-type", "with-settings-header", "header", "subheader", "subheader-tooltip"])
256
258
  ]),
257
259
  f("div", Ee, [
258
260
  f("canvas", {
@@ -264,9 +266,9 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
264
266
  ref_key: "tooltipRef",
265
267
  ref: I,
266
268
  class: "chart__tooltip",
267
- style: J(c(W))
269
+ style: J(u(Z))
268
270
  }, [
269
- l.value ? (d(), h(ge, {
271
+ l.value ? (d(), m(ge, {
270
272
  key: 0,
271
273
  title: String(l.value.title),
272
274
  "data-points": l.value.dataPoints,
@@ -280,12 +282,12 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
280
282
  ]),
281
283
  a.hideLegend ? v("", !0) : (d(), k("section", Re, [
282
284
  F(Ce, {
283
- items: c(K),
285
+ items: u(W),
284
286
  "visible-ids": a.visibleIds,
285
- "onUpdate:visibleIds": o[2] || (o[2] = (r) => S("update:visibleIds", r))
287
+ "onUpdate:visibleIds": o[2] || (o[2] = (r) => T("update:visibleIds", r))
286
288
  }, null, 8, ["items", "visible-ids"])
287
289
  ]))
288
- ], 64)) : a.loading ? (d(), h(Le, { key: 1 })) : c(T) ? (d(), h(c(xe), {
290
+ ], 64)) : a.loading ? (d(), m(Le, { key: 1 })) : u(S) ? (d(), m(u(xe), {
289
291
  key: 2,
290
292
  title: a.noDataTitle,
291
293
  subtitle: a.noDataSubtitle,
@@ -4,11 +4,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
4
4
  withSettingsHeader: boolean;
5
5
  header?: string;
6
6
  subheader?: string;
7
+ subheaderTooltip?: string;
7
8
  }>, {
8
9
  chartType: ChartType;
9
10
  withSettingsHeader: boolean;
10
11
  header: string;
11
12
  subheader: string;
13
+ subheaderTooltip: string;
12
14
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
13
15
  "update:chartType": (type: ChartType) => void;
14
16
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -16,11 +18,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
16
18
  withSettingsHeader: boolean;
17
19
  header?: string;
18
20
  subheader?: string;
21
+ subheaderTooltip?: string;
19
22
  }>, {
20
23
  chartType: ChartType;
21
24
  withSettingsHeader: boolean;
22
25
  header: string;
23
26
  subheader: string;
27
+ subheaderTooltip: string;
24
28
  }>>> & {
25
29
  "onUpdate:chartType"?: (type: ChartType) => any;
26
30
  }, {
@@ -28,6 +32,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
28
32
  chartType: ChartType;
29
33
  withSettingsHeader: boolean;
30
34
  subheader: string;
35
+ subheaderTooltip: string;
31
36
  }>;
32
37
  export default _default;
33
38
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -1,7 +1,7 @@
1
1
  import e from "./ChartHeader.vue2.js";
2
2
  /* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../ChartHeader.vue_vue_type_style_index_0_scoped_2e3de9c5_lang.css"; //*');
4
- const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-2e3de9c5"]]);
3
+ // import "../../ChartHeader.vue_vue_type_style_index_0_scoped_4c37736e_lang.css"; //*');
4
+ const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-4c37736e"]]);
5
5
  export {
6
6
  s as default
7
7
  };
@@ -1,53 +1,66 @@
1
- import "../../ChartHeader.vue_vue_type_style_index_0_scoped_2e3de9c5_lang.css"; import { defineComponent as y, computed as T, openBlock as i, createElementBlock as V, createElementVNode as g, createVNode as c, unref as a, withCtx as l, createTextVNode as s, toDisplayString as u, createBlock as k, isRef as v, createCommentVNode as x } from "vue";
2
- import p from "../typography/v4/Typography.vue.js";
3
- import B from "../switch/v4/SwitchV4.vue.js";
1
+ import "../../ChartHeader.vue_vue_type_style_index_0_scoped_4c37736e_lang.css"; import { defineComponent as y, computed as T, openBlock as c, createElementBlock as x, createElementVNode as V, createVNode as d, unref as t, withCtx as i, createTextVNode as u, toDisplayString as s, createBlock as b, isRef as g, createCommentVNode as k } from "vue";
2
+ import h from "../typography/v4/Typography.vue.js";
3
+ import v from "../switch/v4/SwitchV4.vue.js";
4
4
  import { ChartType as r } from "./types.js";
5
- const C = { class: "chart-header" }, S = { class: "header-texts" }, H = /* @__PURE__ */ y({
5
+ import B from "../tooltip/v4/TooltipV4.vue.js";
6
+ const C = { class: "chart-header" }, S = { class: "header-texts" }, E = /* @__PURE__ */ y({
6
7
  __name: "ChartHeader",
7
8
  props: {
8
9
  chartType: { default: r.Line },
9
10
  withSettingsHeader: { type: Boolean, default: !0 },
10
11
  header: { default: "" },
11
- subheader: { default: "" }
12
+ subheader: { default: "" },
13
+ subheaderTooltip: { default: "" }
12
14
  },
13
15
  emits: ["update:chartType"],
14
- setup(e, { emit: h }) {
16
+ setup(e, { emit: p }) {
15
17
  const m = e, n = [
16
18
  { id: r.Line, icon: "chart-line-up" },
17
19
  { id: r.Bar, icon: "chart-bar" },
18
20
  { id: r.StackedLine, icon: "chart-line" }
19
21
  ], o = T({
20
22
  get() {
21
- return n.find(({ id: t }) => t === m.chartType);
23
+ return n.find(({ id: a }) => a === m.chartType);
22
24
  },
23
- set(t) {
24
- h("update:chartType", t.id);
25
+ set(a) {
26
+ p("update:chartType", a.id);
25
27
  }
26
28
  });
27
- return (t, d) => (i(), V("div", C, [
28
- g("div", S, [
29
- c(a(p), { variant: "chart2" }, {
30
- default: l(() => [
31
- s(u(e.header), 1)
29
+ return (a, l) => (c(), x("div", C, [
30
+ V("div", S, [
31
+ d(t(B), {
32
+ text: e.subheaderTooltip,
33
+ placement: "right"
34
+ }, {
35
+ default: i(() => [
36
+ d(t(h), {
37
+ class: "subheader",
38
+ variant: "h5"
39
+ }, {
40
+ default: i(() => [
41
+ u(s(e.subheader), 1)
42
+ ]),
43
+ _: 1
44
+ })
32
45
  ]),
33
46
  _: 1
34
- }),
35
- c(a(p), { variant: "caption" }, {
36
- default: l(() => [
37
- s(u(e.subheader), 1)
47
+ }, 8, ["text"]),
48
+ d(t(h), { variant: "chart2" }, {
49
+ default: i(() => [
50
+ u(s(e.header), 1)
38
51
  ]),
39
52
  _: 1
40
53
  })
41
54
  ]),
42
- e.withSettingsHeader ? x("", !0) : (i(), k(a(B), {
55
+ e.withSettingsHeader ? k("", !0) : (c(), b(t(v), {
43
56
  key: 0,
44
- modelValue: a(o),
45
- "onUpdate:modelValue": d[0] || (d[0] = (f) => v(o) ? o.value = f : null),
57
+ modelValue: t(o),
58
+ "onUpdate:modelValue": l[0] || (l[0] = (f) => g(o) ? o.value = f : null),
46
59
  options: n
47
60
  }, null, 8, ["modelValue"]))
48
61
  ]));
49
62
  }
50
63
  });
51
64
  export {
52
- H as default
65
+ E as default
53
66
  };
@@ -1,7 +1,7 @@
1
1
  import e from "./ChartLegend.vue2.js";
2
2
  /* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../ChartLegend.vue_vue_type_style_index_0_scoped_efc608f9_lang.css"; //*');
4
- const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-efc608f9"]]);
3
+ // import "../../ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css"; //*');
4
+ const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-c0f71a49"]]);
5
5
  export {
6
- c as default
6
+ a as default
7
7
  };
@@ -1,4 +1,4 @@
1
- import "../../ChartLegend.vue_vue_type_style_index_0_scoped_efc608f9_lang.css"; import { defineComponent as E, ref as T, computed as a, openBlock as d, createElementBlock as n, createElementVNode as c, createVNode as u, unref as l, mergeProps as m, Fragment as y, renderList as S, withCtx as U, createTextVNode as w, toDisplayString as B } from "vue";
1
+ 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";
2
2
  import { useVirtualList as D } from "@vueuse/core";
3
3
  import N from "../typography/v4/Typography.vue.js";
4
4
  import A from "../checkbox/v4/CheckboxV4.vue.js";
@@ -13,47 +13,54 @@ const P = { class: "chart-legend" }, R = { class: "search-box" }, K = /* @__PURE
13
13
  maxVisible: { default: M }
14
14
  },
15
15
  emits: ["update:visibleIds"],
16
- setup(p, { emit: b }) {
17
- const t = p, h = 32, o = T(""), f = a(() => {
18
- const e = o.value.toLowerCase();
19
- return t.items.filter(
20
- (i) => i.label.toLowerCase().includes(e)
16
+ setup(m, { emit: b }) {
17
+ const s = m, h = 32, o = T(""), f = r(() => {
18
+ const t = o.value.toLowerCase();
19
+ return s.items.filter(
20
+ (l) => l.label.toLowerCase().includes(t)
21
21
  );
22
- }), r = (e) => t.visibleIds.includes(e.id), v = a(
23
- () => t.visibleIds.length >= t.maxVisible
24
- ), I = a(
25
- () => t.visibleIds.length <= t.minVisible
26
- ), _ = (e) => I.value && r(e) || v.value && !r(e), V = (e, i) => {
22
+ }), a = (t) => s.visibleIds.includes(t.id), v = r(
23
+ () => s.visibleIds.length >= s.maxVisible
24
+ ), I = r(
25
+ () => s.visibleIds.length <= s.minVisible
26
+ ), _ = (t) => I.value && a(t) || v.value && !a(t), V = (t, l) => {
27
27
  b(
28
28
  "update:visibleIds",
29
- e ? [...t.visibleIds, i.id] : t.visibleIds.filter((s) => s !== i.id)
29
+ t ? [...s.visibleIds, l.id] : s.visibleIds.filter((e) => e !== l.id)
30
30
  );
31
- }, { list: L, containerProps: g, wrapperProps: k } = D(f, {
31
+ }, { list: g, containerProps: L, wrapperProps: x } = D(f, {
32
32
  itemHeight: h,
33
33
  overscan: 10
34
34
  });
35
- return (e, i) => (d(), n("div", P, [
35
+ return (t, l) => (d(), n("div", P, [
36
36
  c("div", R, [
37
- u(l(F), {
37
+ u(i(F), {
38
38
  modelValue: o.value,
39
- "onUpdate:modelValue": i[0] || (i[0] = (s) => o.value = s)
39
+ "onUpdate:modelValue": l[0] || (l[0] = (e) => o.value = e)
40
40
  }, null, 8, ["modelValue"])
41
41
  ]),
42
- c("div", m({ class: "legend" }, l(g)), [
43
- c("ul", m({ class: "legend__list" }, l(k)), [
44
- (d(!0), n(y, null, S(l(L), ({ data: s, index: C }) => (d(), n("li", { key: C }, [
45
- u(l(A), {
46
- color: s.color,
47
- "is-checked": r(s),
48
- disabled: _(s),
49
- "onUpdate:isChecked": (x) => V(x, s)
42
+ c("div", p({ class: "legend" }, i(L)), [
43
+ c("ul", p({ class: "legend__list" }, i(x)), [
44
+ (d(!0), n(y, null, w(i(g), ({ data: e, index: k }) => (d(), n("li", { key: k }, [
45
+ u(i(A), {
46
+ color: e.color,
47
+ "is-checked": a(e),
48
+ disabled: _(e),
49
+ "onUpdate:isChecked": (C) => V(C, e)
50
50
  }, null, 8, ["color", "is-checked", "disabled", "onUpdate:isChecked"]),
51
- u(l(N), { variant: "body2" }, {
52
- default: U(() => [
53
- w(B(s.label), 1)
51
+ u(i(N), {
52
+ variant: "body2",
53
+ "is-truncated": "",
54
+ class: "legend-label",
55
+ "with-tooltip": "",
56
+ "tooltip-text": e.label,
57
+ "tooltip-placement": "top"
58
+ }, {
59
+ default: S(() => [
60
+ U(B(e.label), 1)
54
61
  ]),
55
62
  _: 2
56
- }, 1024)
63
+ }, 1032, ["tooltip-text"])
57
64
  ]))), 128))
58
65
  ], 16)
59
66
  ], 16)
@@ -15,6 +15,7 @@ declare const ChartTypes: () => ({
15
15
  chartType: import("./types").ChartType;
16
16
  withSettingsHeader: boolean;
17
17
  subheader: string;
18
+ subheaderTooltip: string;
18
19
  dataSets: import("./types").ChartDataSet[];
19
20
  hideLegend: boolean;
20
21
  tickCount: number;
@@ -67,6 +68,10 @@ declare const ChartTypes: () => ({
67
68
  type: import("vue").PropType<string>;
68
69
  default: string;
69
70
  };
71
+ subheaderTooltip: {
72
+ type: import("vue").PropType<string>;
73
+ default: string;
74
+ };
70
75
  dataSets: {
71
76
  type: import("vue").PropType<import("./types").ChartDataSet[]>;
72
77
  required: true;
@@ -95,7 +100,7 @@ declare const ChartTypes: () => ({
95
100
  }>> & {
96
101
  "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
97
102
  "onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
98
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "xAxisFormat" | "yAxisFormat" | "parsing" | "visibleIds" | "minVisible" | "maxVisible" | "chartType" | "withSettingsHeader" | "subheader" | "dataSets" | "hideLegend" | "tickCount" | "noDataIcon" | "noDataTitle" | "noDataSubtitle">;
103
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "xAxisFormat" | "yAxisFormat" | "parsing" | "visibleIds" | "minVisible" | "maxVisible" | "chartType" | "withSettingsHeader" | "subheader" | "subheaderTooltip" | "dataSets" | "hideLegend" | "tickCount" | "noDataIcon" | "noDataTitle" | "noDataSubtitle">;
99
104
  $attrs: {
100
105
  [x: string]: unknown;
101
106
  };
@@ -155,6 +160,10 @@ declare const ChartTypes: () => ({
155
160
  type: import("vue").PropType<string>;
156
161
  default: string;
157
162
  };
163
+ subheaderTooltip: {
164
+ type: import("vue").PropType<string>;
165
+ default: string;
166
+ };
158
167
  dataSets: {
159
168
  type: import("vue").PropType<import("./types").ChartDataSet[]>;
160
169
  required: true;
@@ -198,6 +207,7 @@ declare const ChartTypes: () => ({
198
207
  chartType: import("./types").ChartType;
199
208
  withSettingsHeader: boolean;
200
209
  subheader: string;
210
+ subheaderTooltip: string;
201
211
  dataSets: import("./types").ChartDataSet[];
202
212
  hideLegend: boolean;
203
213
  tickCount: number;
@@ -270,6 +280,10 @@ declare const ChartTypes: () => ({
270
280
  type: import("vue").PropType<string>;
271
281
  default: string;
272
282
  };
283
+ subheaderTooltip: {
284
+ type: import("vue").PropType<string>;
285
+ default: string;
286
+ };
273
287
  dataSets: {
274
288
  type: import("vue").PropType<import("./types").ChartDataSet[]>;
275
289
  required: true;
@@ -348,6 +362,10 @@ declare const ChartTypes: () => ({
348
362
  type: import("vue").PropType<string>;
349
363
  default: string;
350
364
  };
365
+ subheaderTooltip: {
366
+ type: import("vue").PropType<string>;
367
+ default: string;
368
+ };
351
369
  dataSets: {
352
370
  type: import("vue").PropType<import("./types").ChartDataSet[]>;
353
371
  required: true;
@@ -391,6 +409,7 @@ declare const ChartTypes: () => ({
391
409
  chartType: import("./types").ChartType;
392
410
  withSettingsHeader: boolean;
393
411
  subheader: string;
412
+ subheaderTooltip: string;
394
413
  dataSets: import("./types").ChartDataSet[];
395
414
  hideLegend: boolean;
396
415
  tickCount: number;
@@ -44,4 +44,5 @@ export declare const dropdownCommon: (props: any, emit: any, commonOptions: any)
44
44
  triggerRef: Ref<any>;
45
45
  clearAll: Ref<HTMLButtonElement>;
46
46
  onClearAllSelections: (applyChanges?: boolean) => void;
47
+ isGroup: (option: any) => boolean;
47
48
  };