@ironsource/shared-ui 2.1.11-test.26 → 2.1.11-test.41
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/ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_604dfc6f_lang.css +1 -0
- package/Chart.vue_vue_type_style_index_0_scoped_04b9d6b3_lang.css +1 -0
- package/ChartHeader.vue_vue_type_style_index_0_scoped_b8213498_lang.css +1 -0
- package/ChartLegend.vue_vue_type_style_index_0_scoped_a1c626cd_lang.css +1 -0
- package/ChartTooltip.vue_vue_type_style_index_0_scoped_6744325c_lang.css +1 -0
- package/CheckboxV4.vue_vue_type_style_index_0_scoped_af4ae3c3_lang.css +1 -0
- package/DataGrid.vue_vue_type_style_index_0_scoped_2406226b_lang.css +1 -0
- package/DialogV4.vue_vue_type_style_index_0_scoped_c65df8d7_lang.css +1 -0
- package/SnackbarV4.vue_vue_type_style_index_0_scoped_89fe8aa1_lang.css +1 -0
- package/components/chart/Chart.vue.d.ts +11 -3
- package/components/chart/Chart.vue.js +2 -2
- package/components/chart/Chart.vue2.js +108 -96
- package/components/chart/ChartHeader.vue.d.ts +13 -6
- package/components/chart/ChartHeader.vue.js +2 -2
- package/components/chart/ChartHeader.vue2.js +32 -29
- package/components/chart/ChartLegend.vue.d.ts +5 -0
- package/components/chart/ChartLegend.vue.js +3 -3
- package/components/chart/ChartLegend.vue2.js +99 -49
- package/components/chart/ChartTooltip.vue.d.ts +4 -5
- package/components/chart/ChartTooltip.vue.js +2 -2
- package/components/chart/ChartTooltip.vue2.js +64 -43
- package/components/chart/index.d.ts +36 -16
- package/components/chart/mockData.d.ts +15 -2
- package/components/chart/types.d.ts +15 -1
- package/components/chart/utils/utils.js +5 -5
- package/components/checkbox/v4/CheckboxV4.vue.js +3 -3
- package/components/checkbox/v4/CheckboxV4.vue2.js +2 -2
- package/components/dialog/v4/DialogV4.vue.d.ts +10 -0
- package/components/dialog/v4/DialogV4.vue.js +3 -3
- package/components/dialog/v4/DialogV4.vue2.js +64 -60
- package/components/dialog/v4/index.d.ts +39 -1
- package/components/dropdown/v4/ButtonDropdownTrigger.vue.d.ts +15 -0
- package/components/dropdown/v4/ButtonDropdownTrigger.vue.js +3 -3
- package/components/dropdown/v4/ButtonDropdownTrigger.vue2.js +42 -20
- package/components/snackbar/v4/SnackbarV4.vue.d.ts +7 -116
- package/components/snackbar/v4/SnackbarV4.vue.js +5 -5
- package/components/snackbar/v4/SnackbarV4.vue2.js +62 -60
- package/components/table/v4/DataGrid.vue.js +3 -3
- package/components/table/v4/DataGrid.vue2.js +5 -5
- package/index.d.ts +136 -3
- package/index.js +1 -1
- package/package.json +1 -1
- package/ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_f9a13e27_lang.css +0 -1
- package/Chart.vue_vue_type_style_index_0_scoped_8f471697_lang.css +0 -1
- package/ChartHeader.vue_vue_type_style_index_0_scoped_4c37736e_lang.css +0 -1
- package/ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css +0 -1
- package/ChartTooltip.vue_vue_type_style_index_0_scoped_ec636f18_lang.css +0 -1
- package/CheckboxV4.vue_vue_type_style_index_0_scoped_8e5b619a_lang.css +0 -1
- package/DataGrid.vue_vue_type_style_index_0_scoped_e7591db4_lang.css +0 -1
- package/DialogV4.vue_vue_type_style_index_0_scoped_09c488cf_lang.css +0 -1
- package/SnackbarV4.vue_vue_type_style_index_0_scoped_49c5ccea_lang.css +0 -1
|
@@ -12,10 +12,11 @@ declare const ChartTypes: () => ({
|
|
|
12
12
|
visibleIds: unknown[];
|
|
13
13
|
minVisible: number;
|
|
14
14
|
maxVisible: number;
|
|
15
|
+
maxLimitTooltipText: string;
|
|
15
16
|
chartType: import("./types").ChartType;
|
|
16
17
|
withSettingsHeader: boolean;
|
|
17
18
|
subheader: string;
|
|
18
|
-
|
|
19
|
+
withSubheaderTooltip: boolean;
|
|
19
20
|
dataSets: import("./types").ChartDataSet[];
|
|
20
21
|
hideLegend: boolean;
|
|
21
22
|
tickCount: number;
|
|
@@ -56,6 +57,10 @@ declare const ChartTypes: () => ({
|
|
|
56
57
|
type: import("vue").PropType<number>;
|
|
57
58
|
default: number;
|
|
58
59
|
};
|
|
60
|
+
maxLimitTooltipText: {
|
|
61
|
+
type: import("vue").PropType<string>;
|
|
62
|
+
default: string;
|
|
63
|
+
};
|
|
59
64
|
chartType: {
|
|
60
65
|
type: import("vue").PropType<import("./types").ChartType>;
|
|
61
66
|
default: import("./types").ChartType;
|
|
@@ -68,9 +73,9 @@ declare const ChartTypes: () => ({
|
|
|
68
73
|
type: import("vue").PropType<string>;
|
|
69
74
|
default: string;
|
|
70
75
|
};
|
|
71
|
-
|
|
72
|
-
type: import("vue").PropType<
|
|
73
|
-
default:
|
|
76
|
+
withSubheaderTooltip: {
|
|
77
|
+
type: import("vue").PropType<boolean>;
|
|
78
|
+
default: boolean;
|
|
74
79
|
};
|
|
75
80
|
dataSets: {
|
|
76
81
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
@@ -100,7 +105,7 @@ declare const ChartTypes: () => ({
|
|
|
100
105
|
}>> & {
|
|
101
106
|
"onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
|
|
102
107
|
"onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
|
|
103
|
-
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "xAxisFormat" | "yAxisFormat" | "parsing" | "visibleIds" | "minVisible" | "maxVisible" | "chartType" | "withSettingsHeader" | "subheader" | "
|
|
108
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "xAxisFormat" | "yAxisFormat" | "parsing" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "chartType" | "withSettingsHeader" | "subheader" | "withSubheaderTooltip" | "dataSets" | "hideLegend" | "tickCount" | "noDataIcon" | "noDataTitle" | "noDataSubtitle">;
|
|
104
109
|
$attrs: {
|
|
105
110
|
[x: string]: unknown;
|
|
106
111
|
};
|
|
@@ -148,6 +153,10 @@ declare const ChartTypes: () => ({
|
|
|
148
153
|
type: import("vue").PropType<number>;
|
|
149
154
|
default: number;
|
|
150
155
|
};
|
|
156
|
+
maxLimitTooltipText: {
|
|
157
|
+
type: import("vue").PropType<string>;
|
|
158
|
+
default: string;
|
|
159
|
+
};
|
|
151
160
|
chartType: {
|
|
152
161
|
type: import("vue").PropType<import("./types").ChartType>;
|
|
153
162
|
default: import("./types").ChartType;
|
|
@@ -160,9 +169,9 @@ declare const ChartTypes: () => ({
|
|
|
160
169
|
type: import("vue").PropType<string>;
|
|
161
170
|
default: string;
|
|
162
171
|
};
|
|
163
|
-
|
|
164
|
-
type: import("vue").PropType<
|
|
165
|
-
default:
|
|
172
|
+
withSubheaderTooltip: {
|
|
173
|
+
type: import("vue").PropType<boolean>;
|
|
174
|
+
default: boolean;
|
|
166
175
|
};
|
|
167
176
|
dataSets: {
|
|
168
177
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
@@ -204,10 +213,11 @@ declare const ChartTypes: () => ({
|
|
|
204
213
|
visibleIds: unknown[];
|
|
205
214
|
minVisible: number;
|
|
206
215
|
maxVisible: number;
|
|
216
|
+
maxLimitTooltipText: string;
|
|
207
217
|
chartType: import("./types").ChartType;
|
|
208
218
|
withSettingsHeader: boolean;
|
|
209
219
|
subheader: string;
|
|
210
|
-
|
|
220
|
+
withSubheaderTooltip: boolean;
|
|
211
221
|
dataSets: import("./types").ChartDataSet[];
|
|
212
222
|
hideLegend: boolean;
|
|
213
223
|
tickCount: number;
|
|
@@ -268,6 +278,10 @@ declare const ChartTypes: () => ({
|
|
|
268
278
|
type: import("vue").PropType<number>;
|
|
269
279
|
default: number;
|
|
270
280
|
};
|
|
281
|
+
maxLimitTooltipText: {
|
|
282
|
+
type: import("vue").PropType<string>;
|
|
283
|
+
default: string;
|
|
284
|
+
};
|
|
271
285
|
chartType: {
|
|
272
286
|
type: import("vue").PropType<import("./types").ChartType>;
|
|
273
287
|
default: import("./types").ChartType;
|
|
@@ -280,9 +294,9 @@ declare const ChartTypes: () => ({
|
|
|
280
294
|
type: import("vue").PropType<string>;
|
|
281
295
|
default: string;
|
|
282
296
|
};
|
|
283
|
-
|
|
284
|
-
type: import("vue").PropType<
|
|
285
|
-
default:
|
|
297
|
+
withSubheaderTooltip: {
|
|
298
|
+
type: import("vue").PropType<boolean>;
|
|
299
|
+
default: boolean;
|
|
286
300
|
};
|
|
287
301
|
dataSets: {
|
|
288
302
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
@@ -350,6 +364,10 @@ declare const ChartTypes: () => ({
|
|
|
350
364
|
type: import("vue").PropType<number>;
|
|
351
365
|
default: number;
|
|
352
366
|
};
|
|
367
|
+
maxLimitTooltipText: {
|
|
368
|
+
type: import("vue").PropType<string>;
|
|
369
|
+
default: string;
|
|
370
|
+
};
|
|
353
371
|
chartType: {
|
|
354
372
|
type: import("vue").PropType<import("./types").ChartType>;
|
|
355
373
|
default: import("./types").ChartType;
|
|
@@ -362,9 +380,9 @@ declare const ChartTypes: () => ({
|
|
|
362
380
|
type: import("vue").PropType<string>;
|
|
363
381
|
default: string;
|
|
364
382
|
};
|
|
365
|
-
|
|
366
|
-
type: import("vue").PropType<
|
|
367
|
-
default:
|
|
383
|
+
withSubheaderTooltip: {
|
|
384
|
+
type: import("vue").PropType<boolean>;
|
|
385
|
+
default: boolean;
|
|
368
386
|
};
|
|
369
387
|
dataSets: {
|
|
370
388
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
@@ -406,10 +424,11 @@ declare const ChartTypes: () => ({
|
|
|
406
424
|
visibleIds: unknown[];
|
|
407
425
|
minVisible: number;
|
|
408
426
|
maxVisible: number;
|
|
427
|
+
maxLimitTooltipText: string;
|
|
409
428
|
chartType: import("./types").ChartType;
|
|
410
429
|
withSettingsHeader: boolean;
|
|
411
430
|
subheader: string;
|
|
412
|
-
|
|
431
|
+
withSubheaderTooltip: boolean;
|
|
413
432
|
dataSets: import("./types").ChartDataSet[];
|
|
414
433
|
hideLegend: boolean;
|
|
415
434
|
tickCount: number;
|
|
@@ -420,6 +439,7 @@ declare const ChartTypes: () => ({
|
|
|
420
439
|
$slots: {
|
|
421
440
|
metric?(_: {}): any;
|
|
422
441
|
breakdowns?(_: {}): any;
|
|
442
|
+
"subheader-tooltip"?(_: {}): any;
|
|
423
443
|
};
|
|
424
444
|
}))[];
|
|
425
445
|
export type { ChartType, ChartDataRecord, ChartDataSet, ChartParsingConfig, } from './types';
|
|
@@ -13,12 +13,25 @@ export declare const SINGLE_DATASET_COUNTRY: {
|
|
|
13
13
|
value: number;
|
|
14
14
|
}[];
|
|
15
15
|
}[];
|
|
16
|
-
export declare const MULTIPLE_DATASETS_DATE: {
|
|
16
|
+
export declare const MULTIPLE_DATASETS_DATE: ({
|
|
17
17
|
id: string;
|
|
18
18
|
label: string;
|
|
19
|
+
caption: string;
|
|
20
|
+
icon: string;
|
|
19
21
|
data: {
|
|
20
22
|
date: string;
|
|
21
23
|
value: number;
|
|
22
24
|
}[];
|
|
23
|
-
|
|
25
|
+
iconType?: undefined;
|
|
26
|
+
} | {
|
|
27
|
+
id: string;
|
|
28
|
+
label: string;
|
|
29
|
+
caption: string;
|
|
30
|
+
icon: string;
|
|
31
|
+
iconType: string;
|
|
32
|
+
data: {
|
|
33
|
+
date: string;
|
|
34
|
+
value: number;
|
|
35
|
+
}[];
|
|
36
|
+
})[];
|
|
24
37
|
export declare const generateMockData: (numSeries?: number) => any[];
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { Ref } from 'vue';
|
|
2
2
|
import { UseVirtualListItem } from '@vueuse/core';
|
|
3
|
+
import { IconTypes } from '../icon/v4/Icon.types';
|
|
4
|
+
import { ChartTypeRegistry, TooltipItem } from 'chart.js';
|
|
3
5
|
export declare enum ChartType {
|
|
4
6
|
Line = "line",
|
|
5
7
|
Bar = "bar",
|
|
@@ -11,18 +13,30 @@ export type ChartDataSet = {
|
|
|
11
13
|
id: string | number;
|
|
12
14
|
label: string;
|
|
13
15
|
data: ChartDataRecord[];
|
|
16
|
+
caption?: string;
|
|
14
17
|
color?: string;
|
|
18
|
+
icon?: string;
|
|
19
|
+
iconType?: IconTypes;
|
|
15
20
|
};
|
|
16
21
|
export type ChartParsingConfig = {
|
|
17
22
|
xAxisKey: string;
|
|
18
23
|
yAxisKey: string;
|
|
19
24
|
};
|
|
20
|
-
export type ValueFormat = 'date' | 'dateLong' | 'number' | 'percent' | 'string';
|
|
25
|
+
export type ValueFormat = 'date' | 'dateLong' | 'number' | 'percent' | 'string' | 'day';
|
|
21
26
|
export type LegendItem = {
|
|
22
27
|
id: string | number;
|
|
23
28
|
label: string;
|
|
29
|
+
caption?: string;
|
|
24
30
|
color?: string;
|
|
31
|
+
icon?: string;
|
|
32
|
+
iconType?: IconTypes;
|
|
25
33
|
};
|
|
34
|
+
export interface MyTooltipItem<T extends keyof ChartTypeRegistry = keyof ChartTypeRegistry> extends TooltipItem<T> {
|
|
35
|
+
dataset: {
|
|
36
|
+
icon?: string;
|
|
37
|
+
iconType?: IconTypes;
|
|
38
|
+
} & TooltipItem<T>['dataset'];
|
|
39
|
+
}
|
|
26
40
|
export type UseVirtualListResult = {
|
|
27
41
|
list: Ref<UseVirtualListItem<LegendItem>[]>;
|
|
28
42
|
containerProps: {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { format as
|
|
2
|
-
import { formatNumber as
|
|
1
|
+
import { format as n } from "date-fns";
|
|
2
|
+
import { formatNumber as d } from "./formatNumber.js";
|
|
3
3
|
const p = (r, t, e) => {
|
|
4
4
|
if (e === 0)
|
|
5
5
|
return 0;
|
|
6
|
-
const
|
|
7
|
-
return (
|
|
8
|
-
}, M = (r, t) => t === "number" ?
|
|
6
|
+
const f = t - r, o = f / e * 0.4;
|
|
7
|
+
return (f + o) / e;
|
|
8
|
+
}, M = (r, t) => t === "day" ? n(new Date(r), "EEEE") : t === "number" ? d(r) : t === "date" ? n(new Date(r), "MMM dd") : t === "dateLong" ? n(new Date(r), "MMM dd, yyyy") : String(r);
|
|
9
9
|
export {
|
|
10
10
|
p as calcStepSize,
|
|
11
11
|
M as formatValue
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./CheckboxV4.vue2.js";
|
|
2
2
|
/* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
-
// import "../../../CheckboxV4.
|
|
4
|
-
const
|
|
3
|
+
// import "../../../CheckboxV4.vue_vue_type_style_index_0_scoped_af4ae3c3_lang.css"; //*');
|
|
4
|
+
const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-af4ae3c3"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
t as default
|
|
7
7
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "../../../CheckboxV4.
|
|
1
|
+
import "../../../CheckboxV4.vue_vue_type_style_index_0_scoped_af4ae3c3_lang.css"; import { defineComponent as D, openBlock as o, createElementBlock as f, mergeProps as a, unref as e, createElementVNode as u, Fragment as B, createBlock as n, createCommentVNode as c, withCtx as V, renderSlot as $, createTextVNode as F, toDisplayString as g, pushScopeId as A, popScopeId as T } from "vue";
|
|
2
2
|
import v from "../../typography/v4/Typography.vue.js";
|
|
3
3
|
import L from "./icons/UncheckedState.vue.js";
|
|
4
4
|
import N from "./icons/CheckedState.vue.js";
|
|
@@ -9,7 +9,7 @@ import K from "./icons/IndeterminateDisabledState.vue.js";
|
|
|
9
9
|
import { CheckboxTestIdModifiers as i } from "../../../testids/index.js";
|
|
10
10
|
import { checkboxCommon as R } from "../common/Checkbox.common.js";
|
|
11
11
|
import { useTestIdAttrs as U } from "../../../utils/testIds.js";
|
|
12
|
-
const M = (t) => (A("data-v-
|
|
12
|
+
const M = (t) => (A("data-v-af4ae3c3"), t = t(), T(), t), W = ["for"], j = { class: "checkboxes" }, q = ["id", "disabled", "checked", ".indeterminate"], z = /* @__PURE__ */ M(() => /* @__PURE__ */ u("span", { class: "checkbox__inner" }, null, -1)), G = { class: "states" }, le = /* @__PURE__ */ D({
|
|
13
13
|
__name: "CheckboxV4",
|
|
14
14
|
props: {
|
|
15
15
|
isChecked: { type: Boolean },
|
|
@@ -13,6 +13,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
13
13
|
closeOnClickOutside?: boolean;
|
|
14
14
|
beforeClose?: (show: () => void) => void;
|
|
15
15
|
showCloseButton?: boolean;
|
|
16
|
+
showCancelButton?: boolean;
|
|
17
|
+
showSaveButton?: boolean;
|
|
16
18
|
showFooter?: boolean;
|
|
17
19
|
saveButtonLabel?: string;
|
|
18
20
|
saveButtonLoading?: boolean;
|
|
@@ -31,6 +33,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
31
33
|
closeDelay: number;
|
|
32
34
|
closeOnClickOutside: boolean;
|
|
33
35
|
showCloseButton: boolean;
|
|
36
|
+
showCancelButton: boolean;
|
|
37
|
+
showSaveButton: boolean;
|
|
34
38
|
escapeToClose: boolean;
|
|
35
39
|
beforeClose: any;
|
|
36
40
|
showFooter: boolean;
|
|
@@ -60,6 +64,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
60
64
|
closeOnClickOutside?: boolean;
|
|
61
65
|
beforeClose?: (show: () => void) => void;
|
|
62
66
|
showCloseButton?: boolean;
|
|
67
|
+
showCancelButton?: boolean;
|
|
68
|
+
showSaveButton?: boolean;
|
|
63
69
|
showFooter?: boolean;
|
|
64
70
|
saveButtonLabel?: string;
|
|
65
71
|
saveButtonLoading?: boolean;
|
|
@@ -78,6 +84,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
78
84
|
closeDelay: number;
|
|
79
85
|
closeOnClickOutside: boolean;
|
|
80
86
|
showCloseButton: boolean;
|
|
87
|
+
showCancelButton: boolean;
|
|
88
|
+
showSaveButton: boolean;
|
|
81
89
|
escapeToClose: boolean;
|
|
82
90
|
beforeClose: any;
|
|
83
91
|
showFooter: boolean;
|
|
@@ -107,6 +115,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
107
115
|
closeOnClickOutside: boolean;
|
|
108
116
|
beforeClose: (show: () => void) => void;
|
|
109
117
|
showCloseButton: boolean;
|
|
118
|
+
showCancelButton: boolean;
|
|
119
|
+
showSaveButton: boolean;
|
|
110
120
|
showFooter: boolean;
|
|
111
121
|
saveButtonLabel: string;
|
|
112
122
|
saveButtonLoading: boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./DialogV4.vue2.js";
|
|
2
2
|
/* empty css */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
-
// import "../../../DialogV4.
|
|
4
|
-
const
|
|
3
|
+
// import "../../../DialogV4.vue_vue_type_style_index_0_scoped_c65df8d7_lang.css"; //*');
|
|
4
|
+
const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-c65df8d7"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
c as default
|
|
7
7
|
};
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import "../../../DialogV4.
|
|
2
|
-
import { NOOP as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import "../../../DialogV4.vue_vue_type_style_index_0_scoped_c65df8d7_lang.css"; import { defineComponent as L, openBlock as o, createBlock as d, Teleport as E, createVNode as A, Transition as I, withCtx as i, unref as e, createElementBlock as m, createElementVNode as y, mergeProps as u, renderSlot as k, createTextVNode as f, toDisplayString as B, createCommentVNode as l } from "vue";
|
|
2
|
+
import { NOOP as S } from "@vue/shared";
|
|
3
|
+
import b from "../../typography/v4/Typography.vue.js";
|
|
4
|
+
import O from "../../button/v4/ButtonV4.vue.js";
|
|
5
5
|
import V from "../../button/v4/IconButtonV4.vue.js";
|
|
6
6
|
import "../../button/v4/ButtonGroup.vue.js";
|
|
7
7
|
import "../../button/v4/ToggleButtonGroupAB.vue.js";
|
|
8
|
-
import { Reason as
|
|
9
|
-
import { dialogCommon as
|
|
10
|
-
import { DialogTestIdModifiers as
|
|
11
|
-
import { useTestIdAttrs as
|
|
12
|
-
import { useMagicKeys as
|
|
13
|
-
const
|
|
8
|
+
import { Reason as h } from "../common/Reason.js";
|
|
9
|
+
import { dialogCommon as p } from "../common/Dialog.common.js";
|
|
10
|
+
import { DialogTestIdModifiers as a } from "../../../testids/index.js";
|
|
11
|
+
import { useTestIdAttrs as D } from "../../../utils/testIds.js";
|
|
12
|
+
import { useMagicKeys as P, whenever as R } from "@vueuse/core";
|
|
13
|
+
const $ = {
|
|
14
14
|
key: 0,
|
|
15
15
|
class: "container light-theme-v4"
|
|
16
16
|
}, F = { class: "title" }, U = {
|
|
17
17
|
key: 1,
|
|
18
18
|
class: "footer"
|
|
19
|
-
}, Y = /* @__PURE__ */
|
|
19
|
+
}, Y = /* @__PURE__ */ L({
|
|
20
20
|
__name: "DialogV4",
|
|
21
21
|
props: {
|
|
22
22
|
modelValue: { type: Boolean },
|
|
@@ -32,6 +32,8 @@ const S = {
|
|
|
32
32
|
closeOnClickOutside: { type: Boolean, default: !1 },
|
|
33
33
|
beforeClose: { type: Function, default: null },
|
|
34
34
|
showCloseButton: { type: Boolean, default: !0 },
|
|
35
|
+
showCancelButton: { type: Boolean, default: !0 },
|
|
36
|
+
showSaveButton: { type: Boolean, default: !0 },
|
|
35
37
|
showFooter: { type: Boolean, default: !0 },
|
|
36
38
|
saveButtonLabel: { default: "Save" },
|
|
37
39
|
saveButtonLoading: { type: Boolean, default: !1 },
|
|
@@ -41,111 +43,113 @@ const S = {
|
|
|
41
43
|
testId: { default: "" }
|
|
42
44
|
},
|
|
43
45
|
emits: ["update:modelValue", "open", "close", "save", "cancel"],
|
|
44
|
-
setup(t, { emit:
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
setup(t, { emit: C }) {
|
|
47
|
+
const r = t, { escape: w } = P(), n = D(r.testId, a), { visible: T, handleClose: v } = p(r, C);
|
|
48
|
+
R(w, () => {
|
|
49
|
+
T.value && r.escapeToClose && !r.saveButtonLoading && v(h.Escape);
|
|
48
50
|
});
|
|
49
|
-
const
|
|
50
|
-
const { closeOnClickOutside:
|
|
51
|
-
|
|
51
|
+
const N = () => {
|
|
52
|
+
const { closeOnClickOutside: c, saveButtonLoading: s } = r;
|
|
53
|
+
c && !s ? v(h.Backdrop) : S();
|
|
52
54
|
};
|
|
53
|
-
return (
|
|
55
|
+
return (c, s) => (o(), d(E, {
|
|
54
56
|
to: "body",
|
|
55
57
|
disabled: !t.appendToBody
|
|
56
58
|
}, [
|
|
57
|
-
|
|
58
|
-
default:
|
|
59
|
-
e(
|
|
60
|
-
|
|
59
|
+
A(I, null, {
|
|
60
|
+
default: i(() => [
|
|
61
|
+
e(T) ? (o(), m("div", $, [
|
|
62
|
+
y("div", u({
|
|
61
63
|
class: ["dialog", [`dialog--${t.size}`]]
|
|
62
|
-
}, e(
|
|
63
|
-
t.title || t.subtitle || t.showCloseButton ? (o(), m("header",
|
|
64
|
+
}, e(n)[e(a).WRAPPER]), [
|
|
65
|
+
t.title || t.subtitle || t.showCloseButton ? (o(), m("header", u({
|
|
64
66
|
key: 0,
|
|
65
67
|
class: "header"
|
|
66
|
-
}, e(
|
|
67
|
-
|
|
68
|
-
k(
|
|
69
|
-
t.title ? (o(),
|
|
68
|
+
}, e(n)[e(a).HEADER]), [
|
|
69
|
+
y("div", F, [
|
|
70
|
+
k(c.$slots, "header", {}, () => [
|
|
71
|
+
t.title ? (o(), d(e(b), {
|
|
70
72
|
key: 0,
|
|
71
73
|
variant: "h3"
|
|
72
74
|
}, {
|
|
73
|
-
default:
|
|
75
|
+
default: i(() => [
|
|
74
76
|
f(B(t.title), 1)
|
|
75
77
|
]),
|
|
76
78
|
_: 1
|
|
77
|
-
})) :
|
|
78
|
-
t.subtitle ? (o(),
|
|
79
|
+
})) : l("", !0),
|
|
80
|
+
t.subtitle ? (o(), d(e(b), {
|
|
79
81
|
key: 1,
|
|
80
82
|
class: "subtitle",
|
|
81
83
|
variant: "body1"
|
|
82
84
|
}, {
|
|
83
|
-
default:
|
|
85
|
+
default: i(() => [
|
|
84
86
|
f(B(t.subtitle), 1)
|
|
85
87
|
]),
|
|
86
88
|
_: 1
|
|
87
|
-
})) :
|
|
89
|
+
})) : l("", !0)
|
|
88
90
|
], !0)
|
|
89
91
|
]),
|
|
90
|
-
t.showCloseButton ? (o(),
|
|
92
|
+
t.showCloseButton ? (o(), d(e(V), u({
|
|
91
93
|
key: 0,
|
|
92
94
|
class: "close-button",
|
|
93
95
|
"icon-name": "x",
|
|
94
96
|
disabled: t.saveButtonLoading
|
|
95
|
-
}, e(
|
|
96
|
-
onClick:
|
|
97
|
-
}), null, 16, ["disabled"])) :
|
|
98
|
-
], 16)) :
|
|
99
|
-
|
|
100
|
-
k(
|
|
101
|
-
t.content ? (o(),
|
|
97
|
+
}, e(n)[e(a).ACTION_CLOSE], {
|
|
98
|
+
onClick: s[0] || (s[0] = (g) => e(v)(e(h).CloseButton))
|
|
99
|
+
}), null, 16, ["disabled"])) : l("", !0)
|
|
100
|
+
], 16)) : l("", !0),
|
|
101
|
+
y("div", u({ class: "content" }, e(n)[e(a).CONTENT]), [
|
|
102
|
+
k(c.$slots, "default", {}, () => [
|
|
103
|
+
t.content ? (o(), d(e(b), {
|
|
102
104
|
key: 0,
|
|
103
105
|
variant: "body1"
|
|
104
106
|
}, {
|
|
105
|
-
default:
|
|
107
|
+
default: i(() => [
|
|
106
108
|
f(B(t.content), 1)
|
|
107
109
|
]),
|
|
108
110
|
_: 1
|
|
109
|
-
})) :
|
|
111
|
+
})) : l("", !0)
|
|
110
112
|
], !0)
|
|
111
113
|
], 16),
|
|
112
114
|
t.showFooter ? (o(), m("footer", U, [
|
|
113
|
-
|
|
114
|
-
k(
|
|
115
|
-
|
|
115
|
+
y("div", u({ class: "action-buttons" }, e(n)[e(a).ACTION_BUTTONS_WRAPPER]), [
|
|
116
|
+
k(c.$slots, "footer", {}, () => [
|
|
117
|
+
t.showCancelButton ? (o(), d(e(O), u({
|
|
118
|
+
key: 0,
|
|
116
119
|
class: "form-action",
|
|
117
120
|
variant: "outlined",
|
|
118
121
|
color: t.cancelButtonColor,
|
|
119
122
|
disabled: t.saveButtonLoading
|
|
120
|
-
}, e(
|
|
121
|
-
onClick:
|
|
123
|
+
}, e(n)[e(a).CANCEL_BUTTON], {
|
|
124
|
+
onClick: s[1] || (s[1] = (g) => C("cancel"))
|
|
122
125
|
}), {
|
|
123
|
-
default:
|
|
126
|
+
default: i(() => [
|
|
124
127
|
f(B(t.cancelButtonLabel), 1)
|
|
125
128
|
]),
|
|
126
129
|
_: 1
|
|
127
|
-
}, 16, ["color", "disabled"]),
|
|
128
|
-
|
|
130
|
+
}, 16, ["color", "disabled"])) : l("", !0),
|
|
131
|
+
t.showSaveButton ? (o(), d(e(O), u({
|
|
132
|
+
key: 1,
|
|
129
133
|
class: "form-action",
|
|
130
134
|
loading: t.saveButtonLoading,
|
|
131
135
|
color: t.saveButtonColor
|
|
132
|
-
}, e(
|
|
133
|
-
onClick:
|
|
136
|
+
}, e(n)[e(a).SAVE_BUTTON], {
|
|
137
|
+
onClick: s[2] || (s[2] = (g) => C("save"))
|
|
134
138
|
}), {
|
|
135
|
-
default:
|
|
139
|
+
default: i(() => [
|
|
136
140
|
f(B(t.saveButtonLabel), 1)
|
|
137
141
|
]),
|
|
138
142
|
_: 1
|
|
139
|
-
}, 16, ["loading", "color"])
|
|
143
|
+
}, 16, ["loading", "color"])) : l("", !0)
|
|
140
144
|
], !0)
|
|
141
145
|
], 16)
|
|
142
|
-
])) :
|
|
146
|
+
])) : l("", !0)
|
|
143
147
|
], 16),
|
|
144
|
-
t.showBackdrop ? (o(), m("div",
|
|
148
|
+
t.showBackdrop ? (o(), m("div", u({
|
|
145
149
|
key: 0,
|
|
146
150
|
class: "dialog-backdrop"
|
|
147
|
-
}, e(
|
|
148
|
-
])) :
|
|
151
|
+
}, e(n)[e(a).BACKDROP], { onClick: N }), null, 16)) : l("", !0)
|
|
152
|
+
])) : l("", !0)
|
|
149
153
|
]),
|
|
150
154
|
_: 3
|
|
151
155
|
})
|
|
@@ -17,6 +17,8 @@ declare const DialogTypes: () => ({
|
|
|
17
17
|
closeOnClickOutside: boolean;
|
|
18
18
|
beforeClose: (show: () => void) => void;
|
|
19
19
|
showCloseButton: boolean;
|
|
20
|
+
showCancelButton: boolean;
|
|
21
|
+
showSaveButton: boolean;
|
|
20
22
|
showFooter: boolean;
|
|
21
23
|
saveButtonLabel: string;
|
|
22
24
|
saveButtonLoading: boolean;
|
|
@@ -80,6 +82,14 @@ declare const DialogTypes: () => ({
|
|
|
80
82
|
type: import("vue").PropType<boolean>;
|
|
81
83
|
default: boolean;
|
|
82
84
|
};
|
|
85
|
+
showCancelButton: {
|
|
86
|
+
type: import("vue").PropType<boolean>;
|
|
87
|
+
default: boolean;
|
|
88
|
+
};
|
|
89
|
+
showSaveButton: {
|
|
90
|
+
type: import("vue").PropType<boolean>;
|
|
91
|
+
default: boolean;
|
|
92
|
+
};
|
|
83
93
|
showFooter: {
|
|
84
94
|
type: import("vue").PropType<boolean>;
|
|
85
95
|
default: boolean;
|
|
@@ -110,7 +120,7 @@ declare const DialogTypes: () => ({
|
|
|
110
120
|
onCancel?: () => any;
|
|
111
121
|
onOpen?: () => any;
|
|
112
122
|
onSave?: () => any;
|
|
113
|
-
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "testId" | "size" | "content" | "subtitle" | "appendToBody" | "closeDelay" | "openDelay" | "escapeToClose" | "showBackdrop" | "closeOnClickOutside" | "beforeClose" | "showCloseButton" | "showFooter" | "saveButtonLabel" | "saveButtonLoading" | "saveButtonColor" | "cancelButtonLabel" | "cancelButtonColor">;
|
|
123
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "testId" | "size" | "content" | "subtitle" | "appendToBody" | "closeDelay" | "openDelay" | "escapeToClose" | "showBackdrop" | "closeOnClickOutside" | "beforeClose" | "showCloseButton" | "showCancelButton" | "showSaveButton" | "showFooter" | "saveButtonLabel" | "saveButtonLoading" | "saveButtonColor" | "cancelButtonLabel" | "cancelButtonColor">;
|
|
114
124
|
$attrs: {
|
|
115
125
|
[x: string]: unknown;
|
|
116
126
|
};
|
|
@@ -181,6 +191,14 @@ declare const DialogTypes: () => ({
|
|
|
181
191
|
type: import("vue").PropType<boolean>;
|
|
182
192
|
default: boolean;
|
|
183
193
|
};
|
|
194
|
+
showCancelButton: {
|
|
195
|
+
type: import("vue").PropType<boolean>;
|
|
196
|
+
default: boolean;
|
|
197
|
+
};
|
|
198
|
+
showSaveButton: {
|
|
199
|
+
type: import("vue").PropType<boolean>;
|
|
200
|
+
default: boolean;
|
|
201
|
+
};
|
|
184
202
|
showFooter: {
|
|
185
203
|
type: import("vue").PropType<boolean>;
|
|
186
204
|
default: boolean;
|
|
@@ -231,6 +249,8 @@ declare const DialogTypes: () => ({
|
|
|
231
249
|
closeOnClickOutside: boolean;
|
|
232
250
|
beforeClose: (show: () => void) => void;
|
|
233
251
|
showCloseButton: boolean;
|
|
252
|
+
showCancelButton: boolean;
|
|
253
|
+
showSaveButton: boolean;
|
|
234
254
|
showFooter: boolean;
|
|
235
255
|
saveButtonLabel: string;
|
|
236
256
|
saveButtonLoading: boolean;
|
|
@@ -314,6 +334,14 @@ declare const DialogTypes: () => ({
|
|
|
314
334
|
type: import("vue").PropType<boolean>;
|
|
315
335
|
default: boolean;
|
|
316
336
|
};
|
|
337
|
+
showCancelButton: {
|
|
338
|
+
type: import("vue").PropType<boolean>;
|
|
339
|
+
default: boolean;
|
|
340
|
+
};
|
|
341
|
+
showSaveButton: {
|
|
342
|
+
type: import("vue").PropType<boolean>;
|
|
343
|
+
default: boolean;
|
|
344
|
+
};
|
|
317
345
|
showFooter: {
|
|
318
346
|
type: import("vue").PropType<boolean>;
|
|
319
347
|
default: boolean;
|
|
@@ -405,6 +433,14 @@ declare const DialogTypes: () => ({
|
|
|
405
433
|
type: import("vue").PropType<boolean>;
|
|
406
434
|
default: boolean;
|
|
407
435
|
};
|
|
436
|
+
showCancelButton: {
|
|
437
|
+
type: import("vue").PropType<boolean>;
|
|
438
|
+
default: boolean;
|
|
439
|
+
};
|
|
440
|
+
showSaveButton: {
|
|
441
|
+
type: import("vue").PropType<boolean>;
|
|
442
|
+
default: boolean;
|
|
443
|
+
};
|
|
408
444
|
showFooter: {
|
|
409
445
|
type: import("vue").PropType<boolean>;
|
|
410
446
|
default: boolean;
|
|
@@ -455,6 +491,8 @@ declare const DialogTypes: () => ({
|
|
|
455
491
|
closeOnClickOutside: boolean;
|
|
456
492
|
beforeClose: (show: () => void) => void;
|
|
457
493
|
showCloseButton: boolean;
|
|
494
|
+
showCancelButton: boolean;
|
|
495
|
+
showSaveButton: boolean;
|
|
458
496
|
showFooter: boolean;
|
|
459
497
|
saveButtonLabel: string;
|
|
460
498
|
saveButtonLoading: boolean;
|