@ironsource/shared-ui 2.1.12-test.76 → 2.1.12-test.78
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.
- package/ChartPlane.vue_vue_type_style_index_0_scoped_e31a8fcd_lang.css +1 -0
- package/DropdownV4.vue_vue_type_style_index_0_scoped_1f7f7f9c_lang.css +1 -0
- package/OptionV4.vue_vue_type_style_index_0_scoped_a8de6151_lang.css +1 -0
- package/components/chart/ChartPlane.vue.js +4 -4
- package/components/chart/ChartPlane.vue2.js +49 -49
- package/components/chart/utils/utils.d.ts +1 -1
- package/components/chart/utils/utils.js +10 -10
- package/components/dropdown/v4/DropdownV4.vue.d.ts +5 -0
- package/components/dropdown/v4/DropdownV4.vue.js +3 -3
- package/components/dropdown/v4/DropdownV4.vue2.js +41 -39
- package/components/dropdown/v4/OptionV4.vue.js +4 -4
- package/components/dropdown/v4/OptionV4.vue2.js +9 -8
- package/components/dropdown/v4/dropdownStoryArgs.d.ts +8 -0
- package/components/dropdown/v4/index.d.ts +20 -1
- package/components/includeExclude/IncludeExclude.vue.d.ts +1 -1
- package/components/includeExclude/IncludeExcludeDragDrop.vue.d.ts +1 -1
- package/components/includeExclude/index.d.ts +40 -40
- package/index.d.ts +40 -2
- package/index.js +1 -1
- package/package.json +1 -1
- package/ChartPlane.vue_vue_type_style_index_0_scoped_a4130027_lang.css +0 -1
- package/DropdownV4.vue_vue_type_style_index_0_scoped_92ead583_lang.css +0 -1
- package/OptionV4.vue_vue_type_style_index_0_scoped_3dc741c1_lang.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-plane-container[data-v-e31a8fcd]{--headerHeight: var(--e6d08782);width:100%;height:var(--7183a92a);position:relative}.header-wrapper[data-v-e31a8fcd]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-e31a8fcd]{padding-top:var(--headerHeight);height:100%}.chart[data-v-e31a8fcd]{width:100%;height:100%;position:relative}.chart__canvas[data-v-e31a8fcd]{width:100%;height:100%}.chart__tooltip[data-v-e31a8fcd]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.v-enter-active[data-v-1f7f7f9c],.v-leave-active[data-v-1f7f7f9c]{transition:opacity .25s ease}ol[data-v-1f7f7f9c],ul[data-v-1f7f7f9c],menu[data-v-1f7f7f9c]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-1f7f7f9c],.dropdown.full-width .button__container[data-v-1f7f7f9c]{width:100%}.dropdown-list-wrapper[data-v-1f7f7f9c]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-1f7f7f9c]{padding:.5rem}.list-container--multi[data-v-1f7f7f9c]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-1f7f7f9c]{display:flex;gap:4px;padding-bottom:.25rem}.inline-search .inline-search-wrapper .search-container[data-v-1f7f7f9c]{width:100%}.inline-search .list-container[data-v-1f7f7f9c]{padding-top:0}.no-result-container[data-v-1f7f7f9c]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-1f7f7f9c]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-1f7f7f9c]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-1f7f7f9c]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.list--with-conditions[data-v-1f7f7f9c]{min-height:0;margin-bottom:0}.image-slot[data-v-1f7f7f9c]{margin-right:.5rem}.actions-wrapper[data-v-1f7f7f9c]{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-1f7f7f9c]{margin-left:.5rem}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.label[data-v-a8de6151]{color:#41454d}.item-container[data-v-a8de6151]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-a8de6151]{cursor:initial;color:var(--text-disabled)}.item-container[data-v-a8de6151]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-a8de6151],.item-container[data-v-a8de6151]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-a8de6151]{background-color:var(--action-selected)}.subtitle[data-v-a8de6151]{color:#7b838c;line-height:1rem}.clear-button[data-v-a8de6151]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-a8de6151]:hover{color:#3083ff}.item[data-v-a8de6151]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-a8de6151],.item--multi[data-v-a8de6151]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-a8de6151]{width:20px;height:20px;flex:none}.item .image img[data-v-a8de6151]{width:20px;height:20px;border-radius:4px}.item .flag[data-v-a8de6151]{width:16px;height:16px}.item .flag img[data-v-a8de6151]{width:16px;height:16px;border-radius:50%}.item .start-icon[data-v-a8de6151],.item .end-icon[data-v-a8de6151]{display:flex;color:var(--action-active)}.item .end-text-icon[data-v-a8de6151]{display:inline-flex}.item .option-text[data-v-a8de6151]{line-height:1.1875rem}.text-container[data-v-a8de6151]{width:100%;text-overflow:ellipsis;overflow:hidden}.v4-tooltip.tooltip-option[data-v-a8de6151]{display:block}.tooltip-option[data-v-a8de6151] .container{width:100%}.app-trigger--icon[data-v-a8de6151]{color:var(--action-active);transform:rotate(-90deg);transition:transform .2s}.app-trigger--icon.expanded[data-v-a8de6151]{transform:rotate(0)}.option-warning[data-v-a8de6151]{display:flex}.option-warning__icon[data-v-a8de6151]{color:var(--warning-main)}.option-content[data-v-a8de6151]{display:flex}.option-content[data-v-a8de6151]:not(.option-content-vertical){gap:.5rem;align-items:center}.option-content-horizontal[data-v-a8de6151]{justify-content:space-between;gap:.5rem}.option-content-vertical[data-v-a8de6151]{flex-direction:column}.option-text .main-text[data-v-a8de6151]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.option-text .main-text .conditional-option-label[data-v-a8de6151]{color:var(--text-secondary);display:inline-flex}.option-text .main-text .conditional-option-value[data-v-a8de6151]{margin-left:4px;display:inline-flex;color:var(--primary-main)}.option-text .caption-text[data-v-a8de6151]{color:var(--text-secondary)}.multiline-tooltip[data-v-a8de6151]{display:flex;flex-direction:column}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
/* empty css */import
|
|
3
|
-
// import "../../ChartPlane.
|
|
4
|
-
const s = /* @__PURE__ */ e
|
|
1
|
+
import e from "./ChartPlane.vue2.js";
|
|
2
|
+
/* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_e31a8fcd_lang.css"; //*');
|
|
4
|
+
const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-e31a8fcd"]]);
|
|
5
5
|
export {
|
|
6
6
|
s as default
|
|
7
7
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import "../../ChartPlane.
|
|
2
|
-
import { Chart as N, ArcElement as me, LineElement as ve, BarElement as ye, PointElement as Te, LineController as Ce, BarController as
|
|
1
|
+
import "../../ChartPlane.vue_vue_type_style_index_0_scoped_e31a8fcd_lang.css"; import { defineComponent as re, useCssVars as ie, unref as s, computed as l, ref as S, onMounted as ne, watch as T, nextTick as se, openBlock as f, createElementBlock as A, createVNode as ue, isRef as ce, createSlots as de, withCtx as pe, renderSlot as fe, createCommentVNode as L, createElementVNode as E, normalizeStyle as he, createBlock as R } from "vue";
|
|
2
|
+
import { Chart as N, ArcElement as me, LineElement as ve, BarElement as ye, PointElement as Te, LineController as Ce, BarController as ge, PieController as be, ScatterController as xe, CategoryScale as ke, LinearScale as Se, Filler as Ae, Tooltip as Le } from "chart.js";
|
|
3
3
|
import { HoverVerticalLine as Ee } from "./plugins/HoverVerticalLine.js";
|
|
4
4
|
import { prepareTickLabel as Re, formatValue as Be, calcStepSize as De } from "./utils/utils.js";
|
|
5
5
|
import { DEFAULT_TICK_COUNT as Oe, TOTALS_HELPER_KEY as F, BASE_COLOR_KEY as K, CHART_PADDING as Ie, POINT_BORDER_COLOR as He, TICK_LABEL_COLOR as M, TICK_LABEL_FONT as U, TICKS_EXTRA_PADDING as Pe, GRID_LINE_COLOR as z, HEADER_HEIGHT as Ve, COMPACT_HEADER_HEIGHT as we, HOVER_AREA_TRANSPARENCY as Ne, HOVER_TRANSPARENCY as C } from "./consts.js";
|
|
@@ -22,7 +22,7 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
22
22
|
}, tt = {
|
|
23
23
|
key: 1,
|
|
24
24
|
class: "chart-plane"
|
|
25
|
-
}, at = { class: "chart" },
|
|
25
|
+
}, at = { class: "chart" }, bt = /* @__PURE__ */ re({
|
|
26
26
|
__name: "ChartPlane",
|
|
27
27
|
props: {
|
|
28
28
|
dataSets: { default: () => [] },
|
|
@@ -64,8 +64,8 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
64
64
|
setup(o, { emit: G }) {
|
|
65
65
|
const e = o;
|
|
66
66
|
ie((t) => ({
|
|
67
|
-
|
|
68
|
-
"
|
|
67
|
+
e6d08782: s(ee),
|
|
68
|
+
"7183a92a": o.height
|
|
69
69
|
}));
|
|
70
70
|
const $ = _e(Re);
|
|
71
71
|
N.register(
|
|
@@ -74,8 +74,8 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
74
74
|
ye,
|
|
75
75
|
Te,
|
|
76
76
|
Ce,
|
|
77
|
-
be,
|
|
78
77
|
ge,
|
|
78
|
+
be,
|
|
79
79
|
xe,
|
|
80
80
|
ke,
|
|
81
81
|
Se,
|
|
@@ -83,17 +83,17 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
83
83
|
Le,
|
|
84
84
|
Ee
|
|
85
85
|
);
|
|
86
|
-
const
|
|
86
|
+
const g = Ge(e, "chartType", G), W = l(
|
|
87
87
|
() => e.withAnimation ? "" : "none"
|
|
88
|
-
), m =
|
|
88
|
+
), m = S(null);
|
|
89
89
|
let n = null;
|
|
90
|
-
const
|
|
91
|
-
m.value && (n && n.destroy(), n = new N(m.value,
|
|
90
|
+
const B = l(() => e.empty || e.dataSets.length === 0), d = l(() => !e.loading && !B.value), b = () => {
|
|
91
|
+
m.value && (n && n.destroy(), n = new N(m.value, H.value));
|
|
92
92
|
}, Z = () => {
|
|
93
|
-
n && (n.data.datasets =
|
|
93
|
+
n && (n.data.datasets = I.value, n.options = H.value.options, n.update(W.value));
|
|
94
94
|
};
|
|
95
|
-
ne(
|
|
96
|
-
t && (await se(),
|
|
95
|
+
ne(b), T(() => e.chartType, b), T(d, async (t) => {
|
|
96
|
+
t && (await se(), b());
|
|
97
97
|
}), T(
|
|
98
98
|
[
|
|
99
99
|
() => e.visibleIds,
|
|
@@ -107,7 +107,7 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
107
107
|
() => e.chartType === u.StackedLine || e.chartType === u.StackedBar || p.value
|
|
108
108
|
), x = l(
|
|
109
109
|
() => e.chartType === u.Line || e.chartType === u.StackedLine
|
|
110
|
-
),
|
|
110
|
+
), D = l(() => p.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: F } : e.parsing), X = l(() => p.value ? e.dataSets.map((t) => ({
|
|
111
111
|
...t,
|
|
112
112
|
data: t.data.map((i) => ({
|
|
113
113
|
...i,
|
|
@@ -115,11 +115,11 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
115
115
|
}))
|
|
116
116
|
})) : e.dataSets), y = l(
|
|
117
117
|
() => X.value.filter((t) => e.visibleIds.includes(t.id))
|
|
118
|
-
), j = (t) => e.colorsMap[t] || Ze,
|
|
118
|
+
), j = (t) => e.colorsMap[t] || Ze, O = l(
|
|
119
119
|
() => y.value.length && y.value.every(
|
|
120
120
|
(t) => t.data.length === 1
|
|
121
121
|
)
|
|
122
|
-
),
|
|
122
|
+
), I = l(() => y.value.map((t, i) => {
|
|
123
123
|
const a = j(t.id), r = v.value ? i !== 0 ? "-1" : "start" : void 0;
|
|
124
124
|
return {
|
|
125
125
|
...t,
|
|
@@ -141,15 +141,15 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
141
141
|
};
|
|
142
142
|
})), q = l(
|
|
143
143
|
() => e.tooltipTotalType === _.Total ? "Total" : "Mean"
|
|
144
|
-
),
|
|
144
|
+
), H = l(() => ({
|
|
145
145
|
type: e.chartType == u.Bar || e.chartType === u.StackedBar ? "bar" : "line",
|
|
146
146
|
// Chart Data
|
|
147
147
|
data: {
|
|
148
|
-
datasets:
|
|
148
|
+
datasets: I.value
|
|
149
149
|
},
|
|
150
150
|
// Chart Options
|
|
151
151
|
options: {
|
|
152
|
-
parsing:
|
|
152
|
+
parsing: D.value,
|
|
153
153
|
interaction: {
|
|
154
154
|
intersect: !1,
|
|
155
155
|
mode: p.value ? "point" : "index",
|
|
@@ -198,7 +198,7 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
198
198
|
tension: 0.3
|
|
199
199
|
},
|
|
200
200
|
point: {
|
|
201
|
-
radius:
|
|
201
|
+
radius: O.value ? 3 : 1,
|
|
202
202
|
hitRadius: 8,
|
|
203
203
|
borderWidth: 0,
|
|
204
204
|
hoverRadius: 4,
|
|
@@ -213,7 +213,7 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
213
213
|
// Horizontal Axis (X)
|
|
214
214
|
x: {
|
|
215
215
|
beginAtZero: !0,
|
|
216
|
-
offset: !x.value ||
|
|
216
|
+
offset: !x.value || O.value,
|
|
217
217
|
border: { display: !1 },
|
|
218
218
|
stacked: v.value,
|
|
219
219
|
// stack on top of each other
|
|
@@ -256,10 +256,10 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
256
256
|
color: M,
|
|
257
257
|
font: U,
|
|
258
258
|
padding: 8,
|
|
259
|
-
stepSize:
|
|
260
|
-
min:
|
|
261
|
-
max:
|
|
262
|
-
callback: (t) => e.valuePrefix + Be(t, e.yAxisFormat) + e.valueSuffix
|
|
259
|
+
stepSize: k.value,
|
|
260
|
+
min: w.value,
|
|
261
|
+
max: k.value * e.tickCount,
|
|
262
|
+
callback: (t) => e.valuePrefix + Be(t, e.yAxisFormat, k.value < 1) + e.valueSuffix
|
|
263
263
|
},
|
|
264
264
|
// grid lines
|
|
265
265
|
grid: {
|
|
@@ -270,21 +270,21 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
}
|
|
273
|
-
})),
|
|
273
|
+
})), P = S(null), c = S(null), { position: V } = Me(
|
|
274
274
|
m,
|
|
275
|
-
|
|
275
|
+
P,
|
|
276
276
|
c,
|
|
277
277
|
e.tooltipRespectsTopEdge
|
|
278
278
|
), J = l(() => ({
|
|
279
|
-
left: `${
|
|
280
|
-
top: `${
|
|
279
|
+
left: `${V.value.left}px`,
|
|
280
|
+
top: `${V.value.top}px`,
|
|
281
281
|
opacity: c.value?.opacity || 0
|
|
282
|
-
})), { minValue:
|
|
283
|
-
parsingConfig:
|
|
282
|
+
})), { minValue: w, maxValue: Q } = ze({
|
|
283
|
+
parsingConfig: D.value,
|
|
284
284
|
dataSets: y,
|
|
285
285
|
isStacked: v
|
|
286
|
-
}),
|
|
287
|
-
() => De(
|
|
286
|
+
}), k = l(
|
|
287
|
+
() => De(w.value, Q.value, e.tickCount)
|
|
288
288
|
), ee = l(
|
|
289
289
|
() => (e.compactHeader ? we : Ve) + "px"
|
|
290
290
|
);
|
|
@@ -306,11 +306,11 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
306
306
|
}, ae = () => {
|
|
307
307
|
(n?.data.datasets || []).forEach(Je);
|
|
308
308
|
};
|
|
309
|
-
return (t, i) => (f(),
|
|
310
|
-
s(d) || o.keepSubheaderVisible ? (f(),
|
|
309
|
+
return (t, i) => (f(), A("div", Qe, [
|
|
310
|
+
s(d) || o.keepSubheaderVisible ? (f(), A("div", et, [
|
|
311
311
|
ue(Ye, {
|
|
312
|
-
"chart-type": s(
|
|
313
|
-
"onUpdate:chart-type": i[0] || (i[0] = (a) => ce(
|
|
312
|
+
"chart-type": s(g),
|
|
313
|
+
"onUpdate:chart-type": i[0] || (i[0] = (a) => ce(g) ? g.value = a : null),
|
|
314
314
|
"type-switcher": s(d) ? o.typeSwitcher : !1,
|
|
315
315
|
header: s(d) ? o.header : null,
|
|
316
316
|
subheader: o.subheader,
|
|
@@ -328,21 +328,21 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
328
328
|
key: "0"
|
|
329
329
|
} : void 0
|
|
330
330
|
]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction"])
|
|
331
|
-
])) :
|
|
332
|
-
s(d) ? (f(),
|
|
333
|
-
|
|
334
|
-
|
|
331
|
+
])) : L("", !0),
|
|
332
|
+
s(d) ? (f(), A("section", tt, [
|
|
333
|
+
E("div", at, [
|
|
334
|
+
E("canvas", {
|
|
335
335
|
ref_key: "chartRef",
|
|
336
336
|
ref: m,
|
|
337
337
|
class: "chart__canvas"
|
|
338
338
|
}, null, 512),
|
|
339
|
-
|
|
339
|
+
E("div", {
|
|
340
340
|
ref_key: "tooltipRef",
|
|
341
|
-
ref:
|
|
341
|
+
ref: P,
|
|
342
342
|
class: "chart__tooltip",
|
|
343
343
|
style: he(s(J))
|
|
344
344
|
}, [
|
|
345
|
-
c.value ? (f(),
|
|
345
|
+
c.value ? (f(), R(Ue, {
|
|
346
346
|
key: 0,
|
|
347
347
|
"totals-chart": s(p),
|
|
348
348
|
title: String(c.value.title),
|
|
@@ -354,23 +354,23 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
354
354
|
"total-value": Number(c.value.footer?.[1]),
|
|
355
355
|
"value-suffix": o.valueSuffix,
|
|
356
356
|
"value-prefix": o.valuePrefix
|
|
357
|
-
}, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "x-axis-date-interval", "total-label", "total-value", "value-suffix", "value-prefix"])) :
|
|
357
|
+
}, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "x-axis-date-interval", "total-label", "total-value", "value-suffix", "value-prefix"])) : L("", !0)
|
|
358
358
|
], 4)
|
|
359
359
|
])
|
|
360
|
-
])) : o.loading ? (f(),
|
|
360
|
+
])) : o.loading ? (f(), R(We, {
|
|
361
361
|
key: 2,
|
|
362
362
|
class: "chart-loading"
|
|
363
|
-
})) : s(
|
|
363
|
+
})) : s(B) ? (f(), R(s($e), {
|
|
364
364
|
key: 3,
|
|
365
365
|
class: "chart-empty",
|
|
366
366
|
variant: null,
|
|
367
367
|
title: o.noDataTitle,
|
|
368
368
|
subtitle: o.noDataSubtitle,
|
|
369
369
|
"icon-name": o.noDataIcon
|
|
370
|
-
}, null, 8, ["title", "subtitle", "icon-name"])) :
|
|
370
|
+
}, null, 8, ["title", "subtitle", "icon-name"])) : L("", !0)
|
|
371
371
|
]));
|
|
372
372
|
}
|
|
373
373
|
});
|
|
374
374
|
export {
|
|
375
|
-
|
|
375
|
+
bt as default
|
|
376
376
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { PrepareTicksLabelArgs, ValueFormat } from '@/components/chart/types';
|
|
2
2
|
export declare const calcStepSize: (min: number, max: number, tickCount: number) => number;
|
|
3
|
-
export declare const formatValue: (value: number | string | Date, valueFormat: ValueFormat) => string;
|
|
3
|
+
export declare const formatValue: (value: number | string | Date, valueFormat: ValueFormat, formatLowDigits?: boolean) => string;
|
|
4
4
|
export declare const prepareTickLabel: ({ label, format, availableSpace, truncate, }: PrepareTicksLabelArgs) => string | string[];
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import { format as
|
|
1
|
+
import { format as m } from "date-fns";
|
|
2
2
|
import { TICK_LABEL_FONT as c } from "../consts.js";
|
|
3
|
-
import { nFormatter as
|
|
4
|
-
import { truncateTextToFit as
|
|
3
|
+
import { nFormatter as p } from "../../../utils/formatNumbers.js";
|
|
4
|
+
import { truncateTextToFit as d } from "../../../utils/text.js";
|
|
5
5
|
import { REGEX_LINEBREAK as i } from "../../../consts/regex.js";
|
|
6
6
|
const g = (r, t, e) => {
|
|
7
7
|
if (e === 0)
|
|
8
8
|
return 0;
|
|
9
|
-
const n = t - r,
|
|
9
|
+
const n = Math.max(t - r, 1), f = n / e, o = n > 1 ? f * 0.4 : 0;
|
|
10
10
|
return (n + o) / e;
|
|
11
|
-
},
|
|
11
|
+
}, E = (r, t, e = !1) => t === "day" ? m(new Date(r), "EEEE") : t === "number" ? p(r, e) : t === "date" ? m(new Date(r), "MMM dd") : t === "dateLong" ? m(new Date(r), "MMM dd, yyyy") : String(r), w = ({
|
|
12
12
|
label: r,
|
|
13
13
|
format: t,
|
|
14
14
|
availableSpace: e,
|
|
15
15
|
truncate: n = !1
|
|
16
16
|
}) => {
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
return n && e > 0 ?
|
|
17
|
+
const f = i.test(r), o = (a) => {
|
|
18
|
+
const s = E(a, t);
|
|
19
|
+
return n && e > 0 ? d(s, c, e) : s;
|
|
20
20
|
};
|
|
21
|
-
return
|
|
21
|
+
return f ? r.split(i).map(o) : o(r);
|
|
22
22
|
};
|
|
23
23
|
export {
|
|
24
24
|
g as calcStepSize,
|
|
25
|
-
|
|
25
|
+
E as formatValue,
|
|
26
26
|
w as prepareTickLabel
|
|
27
27
|
};
|
|
@@ -13,6 +13,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
13
13
|
isOpen?: boolean;
|
|
14
14
|
options: unknown[];
|
|
15
15
|
showSelectAll?: boolean;
|
|
16
|
+
showClearAll?: boolean;
|
|
16
17
|
defaultOpen?: boolean;
|
|
17
18
|
keepOpen?: boolean;
|
|
18
19
|
autoSize?: boolean;
|
|
@@ -94,6 +95,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
94
95
|
disableKeyboardEvents: boolean;
|
|
95
96
|
testId: string;
|
|
96
97
|
showSelectAll: boolean;
|
|
98
|
+
showClearAll: boolean;
|
|
97
99
|
dynamicFilterMode: boolean;
|
|
98
100
|
minSelections: number;
|
|
99
101
|
maxSelections: any;
|
|
@@ -159,6 +161,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
159
161
|
isOpen?: boolean;
|
|
160
162
|
options: unknown[];
|
|
161
163
|
showSelectAll?: boolean;
|
|
164
|
+
showClearAll?: boolean;
|
|
162
165
|
defaultOpen?: boolean;
|
|
163
166
|
keepOpen?: boolean;
|
|
164
167
|
autoSize?: boolean;
|
|
@@ -240,6 +243,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
240
243
|
disableKeyboardEvents: boolean;
|
|
241
244
|
testId: string;
|
|
242
245
|
showSelectAll: boolean;
|
|
246
|
+
showClearAll: boolean;
|
|
243
247
|
dynamicFilterMode: boolean;
|
|
244
248
|
minSelections: number;
|
|
245
249
|
maxSelections: any;
|
|
@@ -307,6 +311,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
307
311
|
multi: boolean;
|
|
308
312
|
infiniteLoading: boolean;
|
|
309
313
|
showSelectAll: boolean;
|
|
314
|
+
showClearAll: boolean;
|
|
310
315
|
defaultOpen: boolean;
|
|
311
316
|
keepOpen: boolean;
|
|
312
317
|
autoSize: boolean;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./DropdownV4.vue2.js";
|
|
2
|
-
/* empty css *//* empty css */import
|
|
3
|
-
// import "../../../DropdownV4.
|
|
2
|
+
/* empty css *//* empty css */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_1f7f7f9c_lang.css"; //*');
|
|
4
4
|
// import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css"; //');
|
|
5
|
-
const r = /* @__PURE__ */
|
|
5
|
+
const r = /* @__PURE__ */ _(o, [["__scopeId", "data-v-1f7f7f9c"]]);
|
|
6
6
|
export {
|
|
7
7
|
r as default
|
|
8
8
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import "../../../DropdownV4.
|
|
2
|
-
import
|
|
1
|
+
import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_1f7f7f9c_lang.css"; import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css"; import { defineComponent as ke, computed as E, watch as Te, toRaw as I, openBlock as d, createElementBlock as r, mergeProps as f, unref as t, renderSlot as m, createElementVNode as p, createVNode as a, withCtx as u, Transition as we, normalizeClass as B, normalizeStyle as be, createTextVNode as T, createCommentVNode as s, isRef as Ie, toDisplayString as X, withModifiers as q, Fragment as ve, renderList as Se, createSlots as Ce, createBlock as x, resolveDynamicComponent as Ke } from "vue";
|
|
2
|
+
import F from "../../button/v4/ButtonV4.vue.js";
|
|
3
3
|
import "../../button/v4/IconButtonV4.vue.js";
|
|
4
4
|
import "../../button/v4/ButtonGroup.vue.js";
|
|
5
5
|
import "../../button/v4/ToggleButtonGroupAB.vue.js";
|
|
@@ -52,6 +52,7 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
52
52
|
isOpen: { type: Boolean },
|
|
53
53
|
options: null,
|
|
54
54
|
showSelectAll: { type: Boolean, default: !0 },
|
|
55
|
+
showClearAll: { type: Boolean, default: !0 },
|
|
55
56
|
defaultOpen: { type: Boolean, default: !1 },
|
|
56
57
|
keepOpen: { type: Boolean, default: !1 },
|
|
57
58
|
autoSize: { type: Boolean, default: !1 },
|
|
@@ -107,8 +108,8 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
107
108
|
withConditions: { type: Boolean, default: !1 }
|
|
108
109
|
},
|
|
109
110
|
emits: ["update:selected", "update:isOpen", "closed", "opened", "apply", "selectAll", "clear", "copyToClipboard", "onsearch", "loadMore", "allSelectedChanged", "unsavedSelectionUpdate"],
|
|
110
|
-
setup(e, { expose: J, emit:
|
|
111
|
-
const o = e,
|
|
111
|
+
setup(e, { expose: J, emit: N }) {
|
|
112
|
+
const o = e, V = {
|
|
112
113
|
MULTILINE_LIST_HEIGHT: 48,
|
|
113
114
|
LIST_HEIGHT: 32 + 4,
|
|
114
115
|
MAX_NUMBER_OF_OPTIONS: 7.5,
|
|
@@ -119,36 +120,36 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
119
120
|
onKeydown: b,
|
|
120
121
|
open: c,
|
|
121
122
|
toggleMenu: v,
|
|
122
|
-
onButtonKeydown:
|
|
123
|
+
onButtonKeydown: D,
|
|
123
124
|
query: S,
|
|
124
125
|
containerProps: Q,
|
|
125
126
|
calculateTableHeight: Z,
|
|
126
127
|
wrapperProps: _,
|
|
127
128
|
filteredOptions: ee,
|
|
128
|
-
allSelected:
|
|
129
|
+
allSelected: P,
|
|
129
130
|
allSelectedApplied: K,
|
|
130
131
|
isIndeterminate: te,
|
|
131
132
|
onSelectAll: oe,
|
|
132
|
-
virtualOptions:
|
|
133
|
+
virtualOptions: R,
|
|
133
134
|
isSelected: A,
|
|
134
135
|
selectedOption: k,
|
|
135
136
|
selectedOptionPrevious: O,
|
|
136
137
|
selectedValue: ne,
|
|
137
|
-
onSelect:
|
|
138
|
-
activeIndex:
|
|
138
|
+
onSelect: z,
|
|
139
|
+
activeIndex: $,
|
|
139
140
|
onCancel: ie,
|
|
140
141
|
onApply: le,
|
|
141
142
|
scrollTo: ae,
|
|
142
143
|
listRef: de,
|
|
143
|
-
buttonRef:
|
|
144
|
+
buttonRef: M,
|
|
144
145
|
apply: se,
|
|
145
146
|
cancel: re,
|
|
146
147
|
el: ue,
|
|
147
|
-
onClearAllSelections:
|
|
148
|
+
onClearAllSelections: W,
|
|
148
149
|
clearAll: ce,
|
|
149
150
|
isGroup: ye,
|
|
150
151
|
flattenAndMarkGroupOptions: me
|
|
151
|
-
} = Fe(o,
|
|
152
|
+
} = Fe(o, N, V), h = Ne(o.testId, g), G = E(() => !o.predefinedTrigger || o.predefinedTrigger === w.DEFAULT ? Ae : o.predefinedTrigger === w.APP ? Ee : null), { width: H } = Ve(M), fe = E(() => o.optionsListWidth ? o.optionsListWidth : !o.predefinedTrigger || o.predefinedTrigger === w.DEFAULT || o.predefinedTrigger === w.APP ? H.value - 2 > 240 ? `${H.value - 2}px` : `${V.DROPLIST_MIN_WIDTH}px` : "auto");
|
|
152
153
|
Te(
|
|
153
154
|
() => o.optionsListWidth,
|
|
154
155
|
() => {
|
|
@@ -158,7 +159,7 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
158
159
|
);
|
|
159
160
|
}
|
|
160
161
|
);
|
|
161
|
-
const
|
|
162
|
+
const U = () => {
|
|
162
163
|
v();
|
|
163
164
|
}, pe = E(() => {
|
|
164
165
|
if (o.multi && o.comparingKey) {
|
|
@@ -185,7 +186,7 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
185
186
|
);
|
|
186
187
|
}, L = (i) => i[o.disabledOptionKey] || ge(i);
|
|
187
188
|
return J({
|
|
188
|
-
selectItem:
|
|
189
|
+
selectItem: z,
|
|
189
190
|
scrollTo: ae
|
|
190
191
|
}), (i, l) => (d(), r("div", f({
|
|
191
192
|
ref_key: "el",
|
|
@@ -281,7 +282,7 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
281
282
|
!t(ee).length && !e.loading && !e.withConditions ? (d(), r("li", Ue, [
|
|
282
283
|
a(t(j), f({ variant: "body2" }, t(h)[t(g).NO_RESULT]), {
|
|
283
284
|
default: u(() => [
|
|
284
|
-
T(
|
|
285
|
+
T(X(e.noResultsText), 1)
|
|
285
286
|
]),
|
|
286
287
|
_: 1
|
|
287
288
|
}, 16)
|
|
@@ -290,16 +291,16 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
290
291
|
p("li", null, [
|
|
291
292
|
a(t(Y), f(
|
|
292
293
|
{
|
|
293
|
-
"aria-selected": t(
|
|
294
|
+
"aria-selected": t(P),
|
|
294
295
|
"aria-disabled": !!e.disabled,
|
|
295
|
-
"selected-prop": t(
|
|
296
|
+
"selected-prop": t(P),
|
|
296
297
|
"is-indeterminate": t(te),
|
|
297
298
|
"is-multi": e.multi,
|
|
298
299
|
"select-all-option": ""
|
|
299
300
|
},
|
|
300
301
|
t(h)[t(g).SELECT_ALL],
|
|
301
302
|
{
|
|
302
|
-
onClick: l[5] || (l[5] =
|
|
303
|
+
onClick: l[5] || (l[5] = q((n) => t(oe)(), ["stop"]))
|
|
303
304
|
}
|
|
304
305
|
), {
|
|
305
306
|
default: u(() => [
|
|
@@ -309,19 +310,19 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
309
310
|
}, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate", "is-multi"])
|
|
310
311
|
])
|
|
311
312
|
], !0) : s("", !0),
|
|
312
|
-
t(
|
|
313
|
+
t(R).length && !e.loading ? (d(!0), r(ve, { key: 2 }, Se(t(R), ({ data: n, index: y }) => (d(), r("li", {
|
|
313
314
|
key: y,
|
|
314
315
|
"aria-selected": t(A)(I(t(k)), n),
|
|
315
316
|
"aria-disabled": !!e.disabled,
|
|
316
|
-
onClick:
|
|
317
|
-
() => !L(n) && t(
|
|
317
|
+
onClick: q(
|
|
318
|
+
() => !L(n) && t(z)(n, y),
|
|
318
319
|
["stop"]
|
|
319
320
|
)
|
|
320
321
|
}, [
|
|
321
322
|
e.groupedOptions && t(ye)(n) ? m(i.$slots, "group-option", { key: 0 }, () => [
|
|
322
323
|
a(Pe, null, {
|
|
323
324
|
default: u(() => [
|
|
324
|
-
T(
|
|
325
|
+
T(X(e.displayValue(n) || n[e.optionNameKey]), 1)
|
|
325
326
|
]),
|
|
326
327
|
_: 2
|
|
327
328
|
}, 1024)
|
|
@@ -330,13 +331,13 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
330
331
|
option: n,
|
|
331
332
|
index: y,
|
|
332
333
|
selected: t(A)(I(t(k)), n),
|
|
333
|
-
active: I(t(
|
|
334
|
+
active: I(t($)) === y,
|
|
334
335
|
disabled: L(n)
|
|
335
336
|
}, () => [
|
|
336
337
|
a(t(Y), {
|
|
337
338
|
option: n,
|
|
338
339
|
"selected-prop": t(A)(t(k), n),
|
|
339
|
-
active: I(t(
|
|
340
|
+
active: I(t($)) === y,
|
|
340
341
|
disabled: L(n),
|
|
341
342
|
"name-key": e.optionNameKey,
|
|
342
343
|
"image-key": e.optionImageKey,
|
|
@@ -371,8 +372,9 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
371
372
|
], 16),
|
|
372
373
|
e.multi ? (d(), r("div", Ye, [
|
|
373
374
|
p("div", je, [
|
|
374
|
-
|
|
375
|
+
e.showClearAll ? (d(), x(t(F), f(
|
|
375
376
|
{
|
|
377
|
+
key: 0,
|
|
376
378
|
ref_key: "clearAll",
|
|
377
379
|
ref: ce,
|
|
378
380
|
size: "small",
|
|
@@ -381,17 +383,17 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
381
383
|
},
|
|
382
384
|
t(h)[t(g).ACTION_CLEAR_ALL],
|
|
383
385
|
{
|
|
384
|
-
onClick: l[6] || (l[6] = () => t(
|
|
386
|
+
onClick: l[6] || (l[6] = () => t(W)(!1))
|
|
385
387
|
}
|
|
386
388
|
), {
|
|
387
389
|
default: u(() => [
|
|
388
390
|
T(" Clear all ")
|
|
389
391
|
]),
|
|
390
392
|
_: 1
|
|
391
|
-
}, 16)
|
|
393
|
+
}, 16)) : s("", !0)
|
|
392
394
|
]),
|
|
393
395
|
p("div", Je, [
|
|
394
|
-
a(t(
|
|
396
|
+
a(t(F), f(
|
|
395
397
|
{
|
|
396
398
|
ref_key: "cancel",
|
|
397
399
|
ref: re,
|
|
@@ -407,7 +409,7 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
407
409
|
]),
|
|
408
410
|
_: 1
|
|
409
411
|
}, 16, ["onClick"]),
|
|
410
|
-
a(t(
|
|
412
|
+
a(t(F), f({
|
|
411
413
|
ref_key: "apply",
|
|
412
414
|
ref: se,
|
|
413
415
|
"data-testid": "mutli-apply",
|
|
@@ -437,7 +439,7 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
437
439
|
}, [
|
|
438
440
|
p("div", {
|
|
439
441
|
ref_key: "buttonRef",
|
|
440
|
-
ref:
|
|
442
|
+
ref: M
|
|
441
443
|
}, [
|
|
442
444
|
m(i.$slots, "dropdown-trigger", {
|
|
443
445
|
buttonTriggerProps: {
|
|
@@ -472,12 +474,12 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
472
474
|
size: e.size,
|
|
473
475
|
showAllSelectedText: e.triggerShowAllSelectedText,
|
|
474
476
|
allSelected: t(K),
|
|
475
|
-
onKeydown: t(
|
|
476
|
-
onClick:
|
|
477
|
+
onKeydown: t(D),
|
|
478
|
+
onClick: U
|
|
477
479
|
}
|
|
478
480
|
}, () => [
|
|
479
|
-
t(
|
|
480
|
-
(d(),
|
|
481
|
+
t(G) ? (d(), r("div", $e, [
|
|
482
|
+
(d(), x(Ke(t(G)), {
|
|
481
483
|
placeholder: e.placeholder,
|
|
482
484
|
open: t(c),
|
|
483
485
|
label: e.triggerLabel,
|
|
@@ -503,9 +505,9 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
503
505
|
size: e.size,
|
|
504
506
|
"show-all-selected-text": e.triggerShowAllSelectedText,
|
|
505
507
|
"all-selected": t(K),
|
|
506
|
-
onKeydown: t(
|
|
507
|
-
onClick:
|
|
508
|
-
onCopyToClipboard: l[0] || (l[0] = (n) =>
|
|
508
|
+
onKeydown: t(D),
|
|
509
|
+
onClick: U,
|
|
510
|
+
onCopyToClipboard: l[0] || (l[0] = (n) => N("copyToClipboard"))
|
|
509
511
|
}, null, 40, ["placeholder", "open", "label", "show-feedback-icon", "mandatory", "test-id", "multi", "disabled", "selected-option", "display-value", "options", "option-name-key", "option-image-key", "option-icon-key", "option-icon-type", "option-end-icon-key", "option-end-icon-type", "options-end-text-icon-key", "option-flag-key", "feedback-variant", "value-to-copy", "status-dot-type", "size", "show-all-selected-text", "all-selected", "onKeydown"]))
|
|
510
512
|
])) : s("", !0),
|
|
511
513
|
e.predefinedTrigger === t(w).ICON_BUTTON ? (d(), r("div", Me, [
|
|
@@ -525,7 +527,7 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
525
527
|
"all-selected": t(K),
|
|
526
528
|
"shown-values-count": e.triggerShownValuesCount,
|
|
527
529
|
onClick: l[2] || (l[2] = (n) => t(v)()),
|
|
528
|
-
onClear: l[3] || (l[3] = (n) => t(
|
|
530
|
+
onClear: l[3] || (l[3] = (n) => t(W)())
|
|
529
531
|
}, null, 8, ["open", "label", "test-id", "options", "selected-option", "display-value", "multi", "all-selected", "shown-values-count"])
|
|
530
532
|
])) : s("", !0)
|
|
531
533
|
], !0)
|
|
@@ -534,7 +536,7 @@ const Re = ["tabindex"], ze = { style: { width: "100%" } }, $e = { key: 0 }, Me
|
|
|
534
536
|
]),
|
|
535
537
|
_: 3
|
|
536
538
|
}, 16, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size"]),
|
|
537
|
-
e.triggerFeedbackText ? (d(),
|
|
539
|
+
e.triggerFeedbackText ? (d(), x(De, {
|
|
538
540
|
key: 0,
|
|
539
541
|
text: e.triggerFeedbackText,
|
|
540
542
|
variant: e.triggerFeedbackVariant,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./OptionV4.vue2.js";
|
|
2
|
-
/* empty css */import
|
|
3
|
-
// import "../../../OptionV4.
|
|
4
|
-
const
|
|
2
|
+
/* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_a8de6151_lang.css"; //*');
|
|
4
|
+
const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a8de6151"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
s as default
|
|
7
7
|
};
|