@ironsource/shared-ui 2.1.6-rc.15 → 2.1.6-rc.16
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/Dropdown.vue_vue_type_style_index_0_scoped_aaa8c4bb_lang.css +1 -0
- package/DropdownV4.vue_vue_type_style_index_0_scoped_77f8bdb6_lang.css +1 -0
- package/InlineCopy.vue_vue_type_style_index_0_scoped_6a7b3795_lang.css +1 -0
- package/OptionV4.vue_vue_type_style_index_0_scoped_7f8f35a1_lang.css +1 -0
- package/TooltipV4.vue_vue_type_style_index_0_scoped_fcdb9d02_lang.css +1 -0
- package/components/dropdown/common/Dropdown.common.js +20 -20
- package/components/dropdown/v3/Dropdown.vue.d.ts +4 -0
- package/components/dropdown/v3/Dropdown.vue.js +4 -4
- package/components/dropdown/v3/Dropdown.vue2.js +32 -32
- package/components/dropdown/v3/index.d.ts +13 -1
- package/components/dropdown/v4/DropdownV4.vue.d.ts +14 -0
- package/components/dropdown/v4/DropdownV4.vue.js +3 -3
- package/components/dropdown/v4/DropdownV4.vue2.js +48 -44
- package/components/dropdown/v4/OptionV4.vue.d.ts +11 -0
- package/components/dropdown/v4/OptionV4.vue.js +3 -3
- package/components/dropdown/v4/OptionV4.vue2.js +59 -45
- package/components/dropdown/v4/index.d.ts +92 -3
- package/components/inlineCopy/InlineCopy.vue.d.ts +6 -2
- package/components/inlineCopy/InlineCopy.vue.js +3 -3
- package/components/inlineCopy/InlineCopy.vue2.js +23 -22
- package/components/inlineCopy/index.d.ts +6 -2
- package/components/tooltip/v4/TooltipV4.vue.d.ts +6 -2
- package/components/tooltip/v4/TooltipV4.vue.js +2 -2
- package/components/tooltip/v4/TooltipV4.vue2.js +21 -19
- package/components/tooltip/v4/index.d.ts +17 -5
- package/index.d.ts +230 -20
- package/package.json +1 -1
- package/Dropdown.vue_vue_type_style_index_0_scoped_d4f8e790_lang.css +0 -1
- package/DropdownV4.vue_vue_type_style_index_0_scoped_07ffe682_lang.css +0 -1
- package/InlineCopy.vue_vue_type_style_index_0_scoped_ff9f4a0f_lang.css +0 -1
- package/OptionV4.vue_vue_type_style_index_0_scoped_e006a8e4_lang.css +0 -1
- package/TooltipV4.vue_vue_type_style_index_0_scoped_25809092_lang.css +0 -1
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import "../../../DropdownV4.
|
|
1
|
+
import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_77f8bdb6_lang.css"; import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css"; import { defineComponent as se, computed as V, openBlock as o, createElementBlock as n, mergeProps as u, unref as e, renderSlot as w, createElementVNode as y, createVNode as a, withCtx as c, Transition as ue, normalizeClass as A, normalizeStyle as ce, isRef as fe, createCommentVNode as r, createTextVNode as g, toDisplayString as me, withModifiers as x, Fragment as ye, renderList as pe, toRaw as b, createBlock as $, resolveDynamicComponent as ge } from "vue";
|
|
2
2
|
import L from "../../button/v4/ButtonV4.vue.js";
|
|
3
3
|
import "../../button/v4/IconButtonV4.vue.js";
|
|
4
4
|
import "./DropdownV4.vue.js";
|
|
5
5
|
import ke from "./DefaultDropdownTrigger.vue.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
6
|
+
import Te from "./IconButtonDropdownTrigger.vue.js";
|
|
7
|
+
import be from "./ChipDropdownTrigger.vue.js";
|
|
8
8
|
import he from "./AppDropdownTrigger.vue.js";
|
|
9
9
|
import "./ButtonDropdownTrigger.vue.js";
|
|
10
10
|
import "./ButtonFilterDropdownTrigger.vue.js";
|
|
11
11
|
import H from "./OptionV4.vue.js";
|
|
12
|
-
import
|
|
12
|
+
import Ie from "../../search/v4/SearchV4.vue.js";
|
|
13
13
|
import U from "../../typography/v4/Typography.vue.js";
|
|
14
|
-
import { Dropdown as
|
|
14
|
+
import { Dropdown as ve } from "floating-vue";
|
|
15
15
|
import { DropdownTestIdModifiers as f } from "../../../testids/index.js";
|
|
16
|
-
import { dropdownCommon as
|
|
16
|
+
import { dropdownCommon as we } from "../common/Dropdown.common.js";
|
|
17
17
|
import Ce from "../../loader/v4/Loader.vue.js";
|
|
18
18
|
import { useTestIdAttrs as Se } from "../../../utils/testIds.js";
|
|
19
19
|
import { TRIGGERS as p } from "./Dropdown.types.js";
|
|
20
20
|
import { useElementSize as Ae } from "@vueuse/core";
|
|
21
21
|
import Le from "../../shared/FieldHelpText.vue.js";
|
|
22
|
-
const Oe = ["tabindex"],
|
|
22
|
+
const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne = { key: 1 }, Ke = { key: 2 }, De = {
|
|
23
23
|
key: 0,
|
|
24
24
|
class: "inline-search-wrapper"
|
|
25
25
|
}, Pe = {
|
|
@@ -74,6 +74,8 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
74
74
|
optionIconKey: { default: "" },
|
|
75
75
|
optionImageKey: { default: "" },
|
|
76
76
|
optionIconType: { default: null },
|
|
77
|
+
optionEndIconKey: { default: "" },
|
|
78
|
+
optionEndIconType: { default: null },
|
|
77
79
|
valueToCopy: { default: null },
|
|
78
80
|
disabledOptionKey: { default: "disabled" },
|
|
79
81
|
theme: { default: "light-theme-v4" },
|
|
@@ -81,7 +83,7 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
81
83
|
optionsListWidth: { default: null },
|
|
82
84
|
statusType: { default: null }
|
|
83
85
|
},
|
|
84
|
-
emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
|
|
86
|
+
emits: ["update:selected", "update:isOpen", "closed", "opened", "apply", "selectAll", "clear"],
|
|
85
87
|
setup(t, { expose: W, emit: M }) {
|
|
86
88
|
const d = t, O = {
|
|
87
89
|
MULTILINE_LIST_HEIGHT: 48,
|
|
@@ -100,16 +102,16 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
100
102
|
calculateTableHeight: q,
|
|
101
103
|
wrapperProps: Y,
|
|
102
104
|
filteredOptions: j,
|
|
103
|
-
allSelected:
|
|
105
|
+
allSelected: E,
|
|
104
106
|
isIndeterminate: J,
|
|
105
107
|
onSelectAll: Q,
|
|
106
|
-
virtualOptions:
|
|
108
|
+
virtualOptions: B,
|
|
107
109
|
isSelected: S,
|
|
108
|
-
selectedOption:
|
|
109
|
-
selectedOptionPrevious:
|
|
110
|
+
selectedOption: T,
|
|
111
|
+
selectedOptionPrevious: N,
|
|
110
112
|
selectedValue: Z,
|
|
111
|
-
onSelect:
|
|
112
|
-
activeIndex:
|
|
113
|
+
onSelect: K,
|
|
114
|
+
activeIndex: D,
|
|
113
115
|
onCancel: _,
|
|
114
116
|
onApply: ee,
|
|
115
117
|
scrollTo: te,
|
|
@@ -120,13 +122,13 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
120
122
|
el: ne,
|
|
121
123
|
onClearAllSelections: R,
|
|
122
124
|
clearAll: ae
|
|
123
|
-
} =
|
|
125
|
+
} = we(d, M, O), m = Se(d.testId, f), F = V(() => !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT ? ke : d.predefinedTrigger === p.APP ? he : null), { width: z } = Ae(P), de = V(() => d.optionsListWidth ? d.optionsListWidth : !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT || d.predefinedTrigger === p.APP ? z.value - 2 > 240 ? `${z.value - 2}px` : `${O.DROPLIST_MIN_WIDTH}px` : "auto"), re = () => {
|
|
124
126
|
h();
|
|
125
127
|
};
|
|
126
128
|
return W({
|
|
127
|
-
selectItem:
|
|
129
|
+
selectItem: K,
|
|
128
130
|
scrollTo: te
|
|
129
|
-
}), (
|
|
131
|
+
}), (I, i) => (o(), n("div", u({
|
|
130
132
|
ref_key: "el",
|
|
131
133
|
ref: ne,
|
|
132
134
|
class: ["dropdown dropdown--main-wrapper", [{ "dropdown--disabled": t.disabled, "full-width": t.fullWidth }]],
|
|
@@ -135,9 +137,9 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
135
137
|
onKeydown: i[7] || (i[7] = //@ts-ignore
|
|
136
138
|
(...l) => e(k) && e(k)(...l))
|
|
137
139
|
}), [
|
|
138
|
-
I
|
|
139
|
-
y("div",
|
|
140
|
-
a(e(
|
|
140
|
+
w(I.$slots, "label", {}, void 0, !0),
|
|
141
|
+
y("div", Ee, [
|
|
142
|
+
a(e(ve), u({
|
|
141
143
|
theme: t.theme,
|
|
142
144
|
"popper-class": [
|
|
143
145
|
t.popperClass,
|
|
@@ -174,8 +176,8 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
174
176
|
onKeydown: i[6] || (i[6] = //@ts-ignore
|
|
175
177
|
(...l) => e(k) && e(k)(...l))
|
|
176
178
|
}, [
|
|
177
|
-
e(s) && t.inlineSearch ? (o(), n("div",
|
|
178
|
-
a(e(
|
|
179
|
+
e(s) && t.inlineSearch ? (o(), n("div", De, [
|
|
180
|
+
a(e(Ie), {
|
|
179
181
|
modelValue: e(C),
|
|
180
182
|
"onUpdate:modelValue": [
|
|
181
183
|
i[3] || (i[3] = (l) => fe(C) ? C.value = l : null),
|
|
@@ -189,7 +191,7 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
189
191
|
onKeydown: e(k)
|
|
190
192
|
}, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id", "onUpdate:modelValue", "onKeydown"])
|
|
191
193
|
])) : r("", !0),
|
|
192
|
-
I
|
|
194
|
+
w(I.$slots, "input-list", { open: e(s) }, void 0, !0),
|
|
193
195
|
y("div", u({
|
|
194
196
|
class: ["list-container", { "list-container--multi": t.multi }],
|
|
195
197
|
style: { height: `${e(q)}rem` }
|
|
@@ -221,9 +223,9 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
221
223
|
t.showSelectAll !== !1 && t.multi ? (o(), n("li", Fe, [
|
|
222
224
|
a(e(H), u(
|
|
223
225
|
{
|
|
224
|
-
"aria-selected": e(
|
|
226
|
+
"aria-selected": e(E),
|
|
225
227
|
"aria-disabled": !!t.disabled,
|
|
226
|
-
"selected-prop": e(
|
|
228
|
+
"selected-prop": e(E),
|
|
227
229
|
"is-indeterminate": e(J),
|
|
228
230
|
"select-all-option": ""
|
|
229
231
|
},
|
|
@@ -238,28 +240,30 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
238
240
|
_: 1
|
|
239
241
|
}, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
|
|
240
242
|
])) : r("", !0),
|
|
241
|
-
e(
|
|
242
|
-
key:
|
|
243
|
-
"aria-selected": e(S)(
|
|
243
|
+
e(B).length && !t.loading ? (o(!0), n(ye, { key: 3 }, pe(e(B), ({ data: l, index: v }) => (o(), n("li", {
|
|
244
|
+
key: v,
|
|
245
|
+
"aria-selected": e(S)(b(e(T)), l),
|
|
244
246
|
"aria-disabled": !!t.disabled,
|
|
245
|
-
onClick: x(() => e(
|
|
247
|
+
onClick: x(() => e(K)(l, v), ["stop"])
|
|
246
248
|
}, [
|
|
247
|
-
I
|
|
249
|
+
w(I.$slots, "default", {
|
|
248
250
|
option: l,
|
|
249
|
-
selected: e(S)(
|
|
250
|
-
active:
|
|
251
|
+
selected: e(S)(b(e(T)), l),
|
|
252
|
+
active: b(e(D)) === v,
|
|
251
253
|
disabled: l[d.disabledOptionKey]
|
|
252
254
|
}, () => [
|
|
253
255
|
a(e(H), {
|
|
254
256
|
option: l,
|
|
255
|
-
selected: e(S)(
|
|
256
|
-
active:
|
|
257
|
+
selected: e(S)(b(e(T)), l),
|
|
258
|
+
active: b(e(D)) === v,
|
|
257
259
|
disabled: l[d.disabledOptionKey],
|
|
258
260
|
"name-key": t.optionNameKey,
|
|
259
261
|
"image-key": t.optionImageKey,
|
|
260
262
|
"icon-key": t.optionIconKey,
|
|
261
|
-
"icon-type": t.optionIconType
|
|
262
|
-
|
|
263
|
+
"icon-type": t.optionIconType,
|
|
264
|
+
"end-icon-key": t.optionEndIconKey,
|
|
265
|
+
"end-icon-type": t.optionEndIconType
|
|
266
|
+
}, null, 8, ["option", "selected", "active", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type"])
|
|
263
267
|
], !0)
|
|
264
268
|
], 8, ze))), 128)) : r("", !0)
|
|
265
269
|
], 16)
|
|
@@ -330,7 +334,7 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
330
334
|
"button__container--disabled": t.disabled
|
|
331
335
|
}])
|
|
332
336
|
}, [
|
|
333
|
-
I
|
|
337
|
+
w(I.$slots, "dropdown-trigger", {
|
|
334
338
|
buttonTriggerProps: {
|
|
335
339
|
open: e(s),
|
|
336
340
|
disabled: t.disabled,
|
|
@@ -342,7 +346,7 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
342
346
|
ref_key: "buttonRef",
|
|
343
347
|
ref: P
|
|
344
348
|
}, [
|
|
345
|
-
e(F) ? (o(), n("div",
|
|
349
|
+
e(F) ? (o(), n("div", Be, [
|
|
346
350
|
(o(), $(ge(e(F)), {
|
|
347
351
|
placeholder: t.placeholder,
|
|
348
352
|
open: e(s),
|
|
@@ -352,7 +356,7 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
352
356
|
"test-id": t.testId,
|
|
353
357
|
multi: t.multi,
|
|
354
358
|
disabled: t.disabled,
|
|
355
|
-
"selected-option": t.multi ? e(
|
|
359
|
+
"selected-option": t.multi ? e(N) : e(T),
|
|
356
360
|
"display-value": t.displayValue,
|
|
357
361
|
options: t.options,
|
|
358
362
|
"option-name-key": t.optionNameKey,
|
|
@@ -367,18 +371,18 @@ const Oe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, De
|
|
|
367
371
|
onClick: re
|
|
368
372
|
}, 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", "feedback-variant", "value-to-copy", "status-dot-type", "size", "onKeydown"]))
|
|
369
373
|
])) : r("", !0),
|
|
370
|
-
t.predefinedTrigger === e(p).ICON_BUTTON ? (o(), n("div",
|
|
371
|
-
a(e(
|
|
374
|
+
t.predefinedTrigger === e(p).ICON_BUTTON ? (o(), n("div", Ne, [
|
|
375
|
+
a(e(Te), {
|
|
372
376
|
onClick: i[0] || (i[0] = (l) => e(h)())
|
|
373
377
|
})
|
|
374
378
|
])) : r("", !0),
|
|
375
|
-
t.predefinedTrigger === e(p).CHIP ? (o(), n("div",
|
|
376
|
-
a(e(
|
|
379
|
+
t.predefinedTrigger === e(p).CHIP ? (o(), n("div", Ke, [
|
|
380
|
+
a(e(be), {
|
|
377
381
|
open: e(s),
|
|
378
382
|
label: t.placeholder,
|
|
379
383
|
"test-id": t.testId,
|
|
380
384
|
options: t.options,
|
|
381
|
-
"selected-option": t.multi ? e(
|
|
385
|
+
"selected-option": t.multi ? e(N) : e(T),
|
|
382
386
|
"display-value": t.displayValue,
|
|
383
387
|
multi: t.multi,
|
|
384
388
|
onClick: i[1] || (i[1] = (l) => e(h)()),
|
|
@@ -10,6 +10,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
10
10
|
imageKey?: string;
|
|
11
11
|
iconKey?: string;
|
|
12
12
|
iconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
|
|
13
|
+
endIconKey?: string;
|
|
14
|
+
endIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
|
|
13
15
|
toolTipPlacement?: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
|
|
14
16
|
}>, {
|
|
15
17
|
subtitle: string;
|
|
@@ -22,6 +24,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
22
24
|
imageKey: any;
|
|
23
25
|
iconKey: any;
|
|
24
26
|
iconType: string;
|
|
27
|
+
endIconKey: any;
|
|
28
|
+
endIconType: string;
|
|
25
29
|
toolTipPlacement: string;
|
|
26
30
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
27
31
|
option?: unknown;
|
|
@@ -35,6 +39,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
35
39
|
imageKey?: string;
|
|
36
40
|
iconKey?: string;
|
|
37
41
|
iconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
|
|
42
|
+
endIconKey?: string;
|
|
43
|
+
endIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
|
|
38
44
|
toolTipPlacement?: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
|
|
39
45
|
}>, {
|
|
40
46
|
subtitle: string;
|
|
@@ -47,11 +53,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
47
53
|
imageKey: any;
|
|
48
54
|
iconKey: any;
|
|
49
55
|
iconType: string;
|
|
56
|
+
endIconKey: any;
|
|
57
|
+
endIconType: string;
|
|
50
58
|
toolTipPlacement: string;
|
|
51
59
|
}>>>, {
|
|
52
60
|
option: any;
|
|
53
61
|
disabled: boolean;
|
|
54
62
|
active: boolean;
|
|
63
|
+
endIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
|
|
55
64
|
isIndeterminate: boolean;
|
|
56
65
|
subtitle: string;
|
|
57
66
|
selectAllOption: boolean;
|
|
@@ -59,11 +68,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
59
68
|
imageKey: string;
|
|
60
69
|
iconKey: string;
|
|
61
70
|
iconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
|
|
71
|
+
endIconKey: string;
|
|
62
72
|
toolTipPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
|
|
63
73
|
}>, {
|
|
64
74
|
image?(_: {}): any;
|
|
65
75
|
"icon-start"?(_: {}): any;
|
|
66
76
|
default?(_: {}): any;
|
|
77
|
+
"icon-end"?(_: {}): any;
|
|
67
78
|
}>;
|
|
68
79
|
export default _default;
|
|
69
80
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./OptionV4.vue2.js";
|
|
2
|
-
/* empty css */import
|
|
3
|
-
// import "../../../OptionV4.
|
|
4
|
-
const s = /* @__PURE__ */
|
|
2
|
+
/* empty css */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_7f8f35a1_lang.css"; //*');
|
|
4
|
+
const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-7f8f35a1"]]);
|
|
5
5
|
export {
|
|
6
6
|
s as default
|
|
7
7
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import "../../../OptionV4.
|
|
1
|
+
import "../../../OptionV4.vue_vue_type_style_index_0_scoped_7f8f35a1_lang.css"; import { defineComponent as $, openBlock as n, createBlock as u, unref as i, withCtx as y, createElementVNode as s, normalizeClass as b, createCommentVNode as o, createElementBlock as l, renderSlot as c, createVNode as d, createTextVNode as k, toDisplayString as h, withModifiers as C } from "vue";
|
|
2
2
|
import "../../typography/Heading.vue.js";
|
|
3
|
-
import
|
|
3
|
+
import B from "../../typography/Text.vue.js";
|
|
4
4
|
import z from "../../checkbox/v4/CheckboxV4.vue.js";
|
|
5
|
-
import
|
|
5
|
+
import f from "../../icon/v4/IconV4.vue.js";
|
|
6
6
|
import { NOOP as N } from "@vue/shared";
|
|
7
7
|
import { optionCommon as V } from "../common/Option.common.js";
|
|
8
8
|
import w from "../../typography/v4/Typography.vue.js";
|
|
@@ -13,7 +13,10 @@ const P = {
|
|
|
13
13
|
}, S = ["src"], j = {
|
|
14
14
|
key: 2,
|
|
15
15
|
class: "start-icon"
|
|
16
|
-
}, E = { class: "text-container" }, M = {
|
|
16
|
+
}, E = { class: "text-container" }, M = {
|
|
17
|
+
key: 3,
|
|
18
|
+
class: "end-icon"
|
|
19
|
+
}, A = { key: 0 }, U = /* @__PURE__ */ $({
|
|
17
20
|
__name: "OptionV4",
|
|
18
21
|
props: {
|
|
19
22
|
option: { default: null },
|
|
@@ -27,95 +30,106 @@ const P = {
|
|
|
27
30
|
imageKey: { default: null },
|
|
28
31
|
iconKey: { default: null },
|
|
29
32
|
iconType: { default: "regular" },
|
|
33
|
+
endIconKey: { default: null },
|
|
34
|
+
endIconType: { default: "regular" },
|
|
30
35
|
toolTipPlacement: { default: "right" }
|
|
31
36
|
},
|
|
32
37
|
setup(e) {
|
|
33
|
-
const
|
|
34
|
-
return (t,
|
|
35
|
-
text:
|
|
36
|
-
"test-id":
|
|
38
|
+
const p = e, { selected: m, isMulti: r, id: v, onClick: K, api: T } = V(p), I = (t) => t && typeof t == "object" && "optionTooltipText" in t ? t.optionTooltipText : "", x = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null;
|
|
39
|
+
return (t, a) => (n(), u(i(O), {
|
|
40
|
+
text: I(e.option),
|
|
41
|
+
"test-id": x(e.option),
|
|
37
42
|
placement: e.toolTipPlacement,
|
|
38
43
|
class: "tooltip-option"
|
|
39
44
|
}, {
|
|
40
|
-
default:
|
|
41
|
-
|
|
45
|
+
default: y(() => [
|
|
46
|
+
s("div", {
|
|
42
47
|
ref: "el",
|
|
43
|
-
class:
|
|
48
|
+
class: b(["item-container", {
|
|
44
49
|
"item-container--disabled": e.disabled,
|
|
45
50
|
"item-container--active": e.nameKey ? !1 : e.active,
|
|
46
|
-
"item-container--selected": i(
|
|
47
|
-
"item-container--multi": i(
|
|
51
|
+
"item-container--selected": i(m),
|
|
52
|
+
"item-container--multi": i(r)
|
|
48
53
|
}])
|
|
49
54
|
}, [
|
|
50
|
-
|
|
51
|
-
class:
|
|
52
|
-
"item--multi": i(
|
|
55
|
+
s("div", {
|
|
56
|
+
class: b(["item", {
|
|
57
|
+
"item--multi": i(r),
|
|
53
58
|
"item--with-icon": t.$slots["icon-start"] || t.$slots.image
|
|
54
59
|
}])
|
|
55
60
|
}, [
|
|
56
|
-
i(
|
|
61
|
+
i(r) ? (n(), u(i(z), {
|
|
57
62
|
key: 0,
|
|
58
63
|
id: i(v).toString(),
|
|
59
64
|
tabindex: "-1",
|
|
60
65
|
class: "checkbox",
|
|
61
66
|
size: "sm",
|
|
62
|
-
"is-checked": i(
|
|
67
|
+
"is-checked": i(m),
|
|
63
68
|
"is-indeterminate": e.isIndeterminate && !e.option,
|
|
64
|
-
onClick:
|
|
65
|
-
}, null, 8, ["id", "is-checked", "is-indeterminate"])) :
|
|
66
|
-
t.$slots.image || e.imageKey ? (
|
|
67
|
-
|
|
68
|
-
e.imageKey ? (
|
|
69
|
+
onClick: a[0] || (a[0] = (g) => e.disabled ? i(N)() : i(K)(g))
|
|
70
|
+
}, null, 8, ["id", "is-checked", "is-indeterminate"])) : o("", !0),
|
|
71
|
+
t.$slots.image || e.imageKey ? (n(), l("div", P, [
|
|
72
|
+
c(t.$slots, "image", {}, () => [
|
|
73
|
+
e.imageKey ? (n(), l("img", {
|
|
69
74
|
key: 0,
|
|
70
75
|
src: e.option[e.imageKey]
|
|
71
|
-
}, null, 8, S)) :
|
|
76
|
+
}, null, 8, S)) : o("", !0)
|
|
72
77
|
], !0)
|
|
73
|
-
])) :
|
|
74
|
-
t.$slots["icon-start"] || e.iconKey ? (
|
|
75
|
-
|
|
76
|
-
|
|
78
|
+
])) : o("", !0),
|
|
79
|
+
t.$slots["icon-start"] || e.iconKey ? (n(), l("div", j, [
|
|
80
|
+
c(t.$slots, "icon-start", {}, () => [
|
|
81
|
+
d(i(f), {
|
|
77
82
|
type: e.iconType,
|
|
78
83
|
name: e.option[e.iconKey],
|
|
79
84
|
size: e.iconType === "regular" ? "20px" : "16px"
|
|
80
85
|
}, null, 8, ["type", "name", "size"])
|
|
81
86
|
], !0)
|
|
82
|
-
])) :
|
|
83
|
-
|
|
84
|
-
|
|
87
|
+
])) : o("", !0),
|
|
88
|
+
s("div", E, [
|
|
89
|
+
d(i(w), {
|
|
85
90
|
class: "option-text",
|
|
86
91
|
variant: "body2"
|
|
87
92
|
}, {
|
|
88
|
-
default:
|
|
89
|
-
|
|
90
|
-
|
|
93
|
+
default: y(() => [
|
|
94
|
+
c(t.$slots, "default", {}, () => [
|
|
95
|
+
k(h(e.option[e.nameKey]), 1)
|
|
91
96
|
], !0)
|
|
92
97
|
]),
|
|
93
98
|
_: 3
|
|
94
99
|
}),
|
|
95
|
-
e.subtitle ? (
|
|
100
|
+
e.subtitle ? (n(), u(i(B), {
|
|
96
101
|
key: 0,
|
|
97
102
|
class: "subtitle",
|
|
98
103
|
size: "xs"
|
|
99
104
|
}, {
|
|
100
|
-
default:
|
|
101
|
-
|
|
105
|
+
default: y(() => [
|
|
106
|
+
k(h(e.subtitle), 1)
|
|
102
107
|
]),
|
|
103
108
|
_: 1
|
|
104
|
-
})) :
|
|
105
|
-
])
|
|
109
|
+
})) : o("", !0)
|
|
110
|
+
]),
|
|
111
|
+
t.$slots["icon-end"] || e.endIconKey ? (n(), l("div", M, [
|
|
112
|
+
c(t.$slots, "icon-end", {}, () => [
|
|
113
|
+
d(i(f), {
|
|
114
|
+
type: e.endIconType,
|
|
115
|
+
name: e.option[e.endIconKey],
|
|
116
|
+
size: e.endIconType === "regular" ? "20px" : "16px"
|
|
117
|
+
}, null, 8, ["type", "name", "size"])
|
|
118
|
+
], !0)
|
|
119
|
+
])) : o("", !0)
|
|
106
120
|
], 2),
|
|
107
|
-
i(
|
|
108
|
-
|
|
121
|
+
i(T).clearable && i(m) ? (n(), l("div", A, [
|
|
122
|
+
s("button", {
|
|
109
123
|
class: "clear-button",
|
|
110
|
-
onClick:
|
|
124
|
+
onClick: a[1] || (a[1] = C((g) => i(T).clearSelection(), ["prevent", "stop"]))
|
|
111
125
|
}, [
|
|
112
|
-
|
|
126
|
+
d(i(f), {
|
|
113
127
|
name: "close",
|
|
114
128
|
width: "8",
|
|
115
129
|
height: 8
|
|
116
130
|
})
|
|
117
131
|
])
|
|
118
|
-
])) :
|
|
132
|
+
])) : o("", !0)
|
|
119
133
|
], 2)
|
|
120
134
|
]),
|
|
121
135
|
_: 3
|
|
@@ -123,5 +137,5 @@ const P = {
|
|
|
123
137
|
}
|
|
124
138
|
});
|
|
125
139
|
export {
|
|
126
|
-
|
|
140
|
+
U as default
|
|
127
141
|
};
|