@ironsource/shared-ui 2.2.0-rc.22 → 2.2.0-rc.23
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/TagsFieldChip.vue_vue_type_style_index_0_scoped_cbb21c6a_lang.css +1 -0
- package/components/dropdown/v3/SearchInput.vue2.js +1 -82
- package/components/dropdown/v4/AppDropdownTrigger.vue2.js +1 -185
- package/components/dropdown/v4/ButtonDropdownTrigger.vue2.js +1 -70
- package/components/dropdown/v4/ButtonFilterDropdownTrigger.vue2.js +1 -54
- package/components/dropdown/v4/ChipDropdownTrigger.vue2.js +1 -126
- package/components/dropdown/v4/ConditionalDropdown.vue2.js +1 -275
- package/components/dropdown/v4/DefaultDropdownTrigger.vue2.js +1 -156
- package/components/dropdown/v4/DropdownV4.vue2.js +1 -583
- package/components/dropdown/v4/GroupOption.vue2.js +1 -29
- package/components/dropdown/v4/IconButtonDropdownTrigger.vue2.js +1 -23
- package/components/dropdown/v4/OptionV4.vue2.js +1 -300
- package/components/dropdown/v4/TreeDropdown.vue2.js +1 -272
- package/components/emptyState/v3/EmptyState.vue2.js +1 -91
- package/components/emptyState/v4/EmptyStateV4.vue2.js +1 -86
- package/components/table-cells/v3/Editable.vue.js +0 -7
- package/components/table-cells/v3/Editable.vue2.js +10 -1
- package/components/tagsField/TagsFieldChip.vue.js +3 -3
- package/components/tagsField/TagsFieldChip.vue2.js +34 -32
- package/index.js +1 -1
- package/package.json +1 -1
- package/TagsFieldChip.vue_vue_type_style_index_0_scoped_bdbc1b68_lang.css +0 -1
|
@@ -1,300 +1 @@
|
|
|
1
|
-
import "../../../OptionV4.vue_vue_type_style_index_0_scoped_752a357d_lang.css";
|
|
2
|
-
import "../../typography/Heading.vue.js";
|
|
3
|
-
import D from "../../typography/Text.vue.js";
|
|
4
|
-
import q from "../../checkbox/v4/CheckboxV4.vue.js";
|
|
5
|
-
import y from "../../icon/v4/IconV4.vue.js";
|
|
6
|
-
import G from "../../icon/v4/IconFlag.vue.js";
|
|
7
|
-
import { NOOP as $ } from "@vue/shared";
|
|
8
|
-
import { optionCommon as H } from "../common/Option.common.js";
|
|
9
|
-
import p from "../../typography/v4/Typography.vue.js";
|
|
10
|
-
import h from "../../tooltip/v4/TooltipV4.vue.js";
|
|
11
|
-
import { isElementTruncated as J } from "../../../utils/text.js";
|
|
12
|
-
import { promiseTimeout as Q } from "@vueuse/core";
|
|
13
|
-
const U = { class: "multiline-tooltip" }, W = {
|
|
14
|
-
key: 1,
|
|
15
|
-
class: "image"
|
|
16
|
-
}, X = ["src"], Y = {
|
|
17
|
-
key: 2,
|
|
18
|
-
class: "flag"
|
|
19
|
-
}, Z = {
|
|
20
|
-
key: 3,
|
|
21
|
-
class: "start-icon"
|
|
22
|
-
}, _ = {
|
|
23
|
-
key: 0,
|
|
24
|
-
class: "main-text"
|
|
25
|
-
}, ee = {
|
|
26
|
-
key: 1,
|
|
27
|
-
class: "main-text"
|
|
28
|
-
}, te = {
|
|
29
|
-
key: 0,
|
|
30
|
-
class: "end-text-icon"
|
|
31
|
-
}, ne = {
|
|
32
|
-
key: 1,
|
|
33
|
-
class: "caption-text"
|
|
34
|
-
}, ie = {
|
|
35
|
-
key: 4,
|
|
36
|
-
class: "end-icon"
|
|
37
|
-
}, oe = {
|
|
38
|
-
key: 5,
|
|
39
|
-
class: "option-warning"
|
|
40
|
-
}, le = ["onClick"], ae = { key: 0 }, ke = /* @__PURE__ */ V({
|
|
41
|
-
__name: "OptionV4",
|
|
42
|
-
props: {
|
|
43
|
-
option: { default: null },
|
|
44
|
-
subtitle: { default: "" },
|
|
45
|
-
disabled: { type: Boolean, default: !1 },
|
|
46
|
-
selectedProp: { type: Boolean },
|
|
47
|
-
isIndeterminate: { type: Boolean, default: !1 },
|
|
48
|
-
selectAllOption: { type: Boolean, default: !1 },
|
|
49
|
-
active: { type: Boolean, default: null },
|
|
50
|
-
nameKey: { default: null },
|
|
51
|
-
imageKey: { default: null },
|
|
52
|
-
iconKey: { default: null },
|
|
53
|
-
warningKey: { default: null },
|
|
54
|
-
iconType: { default: "regular" },
|
|
55
|
-
endIconKey: { default: null },
|
|
56
|
-
endIconType: { default: "regular" },
|
|
57
|
-
endTextIconKey: { default: null },
|
|
58
|
-
tooltipPlacement: { default: "right" },
|
|
59
|
-
tooltipAttachedToText: { type: Boolean, default: !1 },
|
|
60
|
-
treeMainOption: { type: Boolean, default: !1 },
|
|
61
|
-
treeMainOptionExpanded: { type: Boolean, default: !1 },
|
|
62
|
-
stopOptionClickEventPropagation: { type: Boolean, default: !1 },
|
|
63
|
-
optionTwoLinesVariant: { default: void 0 },
|
|
64
|
-
optionTwoLinesKey: { default: void 0 },
|
|
65
|
-
treeChildShown: { type: Boolean, default: !1 },
|
|
66
|
-
optionFlagKey: { default: null },
|
|
67
|
-
isMulti: { type: Boolean, default: !1 },
|
|
68
|
-
minMaxSelectionTooltipMessage: { default: null }
|
|
69
|
-
},
|
|
70
|
-
emits: ["toggleTreeCollapse"],
|
|
71
|
-
setup(e, { emit: M }) {
|
|
72
|
-
const d = e, { selected: b, id: B, onClick: S, api: K } = H(d), z = (t) => {
|
|
73
|
-
d.stopOptionClickEventPropagation && t.stopPropagation(), d.disabled ? $() : S(t);
|
|
74
|
-
}, x = I(null), w = I(!1), A = (t) => {
|
|
75
|
-
d.disabled && (t.stopPropagation(), $());
|
|
76
|
-
};
|
|
77
|
-
F([() => d.treeChildShown, x], async () => {
|
|
78
|
-
await Q(100), w.value = x.value && J(x.value);
|
|
79
|
-
});
|
|
80
|
-
const P = (t) => t && typeof t == "object" && "optionTooltipText" in t ? (Array.isArray(t.optionTooltipText), t.optionTooltipText) : w.value ? t[d.nameKey] : "", k = L(() => {
|
|
81
|
-
const t = d.disabled && d.minMaxSelectionTooltipMessage || "", c = P(d.option);
|
|
82
|
-
return c ? t ? `${c}. ${t}` : c : t;
|
|
83
|
-
}), C = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null, E = () => {
|
|
84
|
-
M("toggleTreeCollapse", d.option);
|
|
85
|
-
};
|
|
86
|
-
return (t, c) => (i(), g(n(h), {
|
|
87
|
-
text: n(k),
|
|
88
|
-
disabled: e.tooltipAttachedToText,
|
|
89
|
-
"test-id": C(e.option),
|
|
90
|
-
placement: e.tooltipPlacement,
|
|
91
|
-
class: "tooltip-option"
|
|
92
|
-
}, N({
|
|
93
|
-
default: s(() => [
|
|
94
|
-
u("div", {
|
|
95
|
-
ref: "el",
|
|
96
|
-
class: v(["item-container", {
|
|
97
|
-
"item-container--disabled": e.disabled,
|
|
98
|
-
"item-container--active": e.nameKey ? !1 : e.active,
|
|
99
|
-
"item-container--selected": n(b),
|
|
100
|
-
"item-container--multi": e.isMulti
|
|
101
|
-
}]),
|
|
102
|
-
onClick: A
|
|
103
|
-
}, [
|
|
104
|
-
u("div", {
|
|
105
|
-
class: v(["item", {
|
|
106
|
-
"item--multi": e.isMulti,
|
|
107
|
-
"item--with-icon": t.$slots["icon-start"] || t.$slots.image
|
|
108
|
-
}])
|
|
109
|
-
}, [
|
|
110
|
-
e.isMulti || e.selectAllOption ? (i(), g(n(q), {
|
|
111
|
-
key: 0,
|
|
112
|
-
id: n(B).toString(),
|
|
113
|
-
disabled: d.disabled,
|
|
114
|
-
tabindex: "-1",
|
|
115
|
-
class: "checkbox",
|
|
116
|
-
"is-checked": n(b),
|
|
117
|
-
"is-indeterminate": e.isIndeterminate,
|
|
118
|
-
onClick: c[0] || (c[0] = (f) => z(f))
|
|
119
|
-
}, null, 8, ["id", "disabled", "is-checked", "is-indeterminate"])) : o("", !0),
|
|
120
|
-
!e.option?.conditionalOptions && (t.$slots.image || e.imageKey) ? (i(), l("div", W, [
|
|
121
|
-
r(t.$slots, "image", {}, () => [
|
|
122
|
-
e.imageKey ? (i(), l("img", {
|
|
123
|
-
key: 0,
|
|
124
|
-
src: e.option[e.imageKey]
|
|
125
|
-
}, null, 8, X)) : o("", !0)
|
|
126
|
-
], !0)
|
|
127
|
-
])) : o("", !0),
|
|
128
|
-
!e.option?.conditionalOptions && (t.$slots.flag || e.optionFlagKey) ? (i(), l("div", Y, [
|
|
129
|
-
r(t.$slots, "flag", {}, () => [
|
|
130
|
-
e.optionFlagKey ? (i(), g(n(G), {
|
|
131
|
-
key: 0,
|
|
132
|
-
"country-code": e.option[e.optionFlagKey]
|
|
133
|
-
}, null, 8, ["country-code"])) : o("", !0)
|
|
134
|
-
], !0)
|
|
135
|
-
])) : o("", !0),
|
|
136
|
-
!e.option?.conditionalOptions && (t.$slots["icon-start"] || e.iconKey) ? (i(), l("div", Z, [
|
|
137
|
-
r(t.$slots, "icon-start", {}, () => [
|
|
138
|
-
a(n(y), {
|
|
139
|
-
type: e.iconType,
|
|
140
|
-
name: e.option[e.iconKey],
|
|
141
|
-
color: e.option.disabled ? "var(--text-disabled)" : null,
|
|
142
|
-
size: e.iconType === "regular" ? "20px" : "16px"
|
|
143
|
-
}, null, 8, ["type", "name", "color", "size"])
|
|
144
|
-
], !0)
|
|
145
|
-
])) : o("", !0),
|
|
146
|
-
u("div", {
|
|
147
|
-
ref_key: "textContainerRef",
|
|
148
|
-
ref: x,
|
|
149
|
-
class: "text-container"
|
|
150
|
-
}, [
|
|
151
|
-
a(n(p), {
|
|
152
|
-
class: "option-text",
|
|
153
|
-
variant: "body2"
|
|
154
|
-
}, {
|
|
155
|
-
default: s(() => [
|
|
156
|
-
r(t.$slots, "default", {}, () => [
|
|
157
|
-
u("div", {
|
|
158
|
-
class: v(`option-content-${e.optionTwoLinesVariant} option-content`)
|
|
159
|
-
}, [
|
|
160
|
-
a(n(h), {
|
|
161
|
-
text: n(k),
|
|
162
|
-
placement: e.tooltipPlacement,
|
|
163
|
-
disabled: !e.tooltipAttachedToText,
|
|
164
|
-
"test-id": C(e.option),
|
|
165
|
-
"dont-wrap-disabled": ""
|
|
166
|
-
}, {
|
|
167
|
-
default: s(() => [
|
|
168
|
-
e.option?.conditionalOptions ? (i(), l("div", ee, [
|
|
169
|
-
a(n(p), {
|
|
170
|
-
variant: "body2",
|
|
171
|
-
class: "conditional-option-label"
|
|
172
|
-
}, {
|
|
173
|
-
default: s(() => [
|
|
174
|
-
T(m(e.option.conditionalName) + ": ", 1)
|
|
175
|
-
]),
|
|
176
|
-
_: 1
|
|
177
|
-
}),
|
|
178
|
-
a(n(p), {
|
|
179
|
-
variant: "h5",
|
|
180
|
-
class: "conditional-option-value"
|
|
181
|
-
}, {
|
|
182
|
-
default: s(() => [
|
|
183
|
-
T('"' + m(e.option[e.nameKey]) + '"', 1)
|
|
184
|
-
]),
|
|
185
|
-
_: 1
|
|
186
|
-
})
|
|
187
|
-
])) : (i(), l("div", _, m(e.option[e.nameKey]), 1))
|
|
188
|
-
]),
|
|
189
|
-
_: 1
|
|
190
|
-
}, 8, ["text", "placement", "disabled", "test-id"]),
|
|
191
|
-
e.endTextIconKey && e.option[e.endTextIconKey] ? (i(), l("span", te, [
|
|
192
|
-
a(n(y), {
|
|
193
|
-
type: "regular",
|
|
194
|
-
name: e.option[e.endTextIconKey],
|
|
195
|
-
size: "16px"
|
|
196
|
-
}, null, 8, ["name"])
|
|
197
|
-
])) : o("", !0),
|
|
198
|
-
e.optionTwoLinesKey ? (i(), l("div", ne, [
|
|
199
|
-
a(n(p), { variant: "caption" }, {
|
|
200
|
-
default: s(() => [
|
|
201
|
-
T(m(e.option[e.optionTwoLinesKey]), 1)
|
|
202
|
-
]),
|
|
203
|
-
_: 1
|
|
204
|
-
})
|
|
205
|
-
])) : o("", !0)
|
|
206
|
-
], 2)
|
|
207
|
-
], !0)
|
|
208
|
-
]),
|
|
209
|
-
_: 3
|
|
210
|
-
}),
|
|
211
|
-
e.subtitle ? (i(), g(n(D), {
|
|
212
|
-
key: 0,
|
|
213
|
-
class: "subtitle",
|
|
214
|
-
size: "xs"
|
|
215
|
-
}, {
|
|
216
|
-
default: s(() => [
|
|
217
|
-
T(m(e.subtitle), 1)
|
|
218
|
-
]),
|
|
219
|
-
_: 1
|
|
220
|
-
})) : o("", !0)
|
|
221
|
-
], 512),
|
|
222
|
-
t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (i(), l("div", ie, [
|
|
223
|
-
r(t.$slots, "icon-end", {}, () => [
|
|
224
|
-
a(n(y), {
|
|
225
|
-
type: e.endIconType || "regular",
|
|
226
|
-
name: e.option[e.endIconKey],
|
|
227
|
-
size: e.endIconType === "regular" || e.endIconType === "ab-test" ? "20px" : "16px"
|
|
228
|
-
}, null, 8, ["type", "name", "size"])
|
|
229
|
-
], !0)
|
|
230
|
-
])) : o("", !0),
|
|
231
|
-
e.warningKey && e.option?.[e.warningKey] ? (i(), l("div", oe, [
|
|
232
|
-
a(n(h), {
|
|
233
|
-
text: e.option[e.warningKey],
|
|
234
|
-
placement: "top"
|
|
235
|
-
}, {
|
|
236
|
-
default: s(() => [
|
|
237
|
-
a(n(y), {
|
|
238
|
-
class: "option-warning__icon",
|
|
239
|
-
name: "warning-circle",
|
|
240
|
-
size: "16px"
|
|
241
|
-
})
|
|
242
|
-
]),
|
|
243
|
-
_: 1
|
|
244
|
-
}, 8, ["text"])
|
|
245
|
-
])) : o("", !0),
|
|
246
|
-
t.$slots["option-end"] ? r(t.$slots, "option-end", {
|
|
247
|
-
key: 6,
|
|
248
|
-
option: e.option
|
|
249
|
-
}, void 0, !0) : o("", !0),
|
|
250
|
-
e.treeMainOption ? (i(), l("div", {
|
|
251
|
-
key: 7,
|
|
252
|
-
class: "tree-main-arrow-wrapper",
|
|
253
|
-
onClick: O(E, ["stop"])
|
|
254
|
-
}, [
|
|
255
|
-
a(n(y), {
|
|
256
|
-
name: "caret-down",
|
|
257
|
-
size: "16px",
|
|
258
|
-
class: v(`app-trigger--icon ${e.treeMainOptionExpanded && "expanded"}`)
|
|
259
|
-
}, null, 8, ["class"])
|
|
260
|
-
], 8, le)) : o("", !0)
|
|
261
|
-
], 2),
|
|
262
|
-
n(K).clearable && n(b) ? (i(), l("div", ae, [
|
|
263
|
-
u("button", {
|
|
264
|
-
class: "clear-button",
|
|
265
|
-
onClick: c[1] || (c[1] = O((f) => n(K).clearSelection(), ["prevent", "stop"]))
|
|
266
|
-
}, [
|
|
267
|
-
a(n(y), {
|
|
268
|
-
name: "close",
|
|
269
|
-
width: "8",
|
|
270
|
-
height: "8"
|
|
271
|
-
})
|
|
272
|
-
])
|
|
273
|
-
])) : o("", !0)
|
|
274
|
-
], 2)
|
|
275
|
-
]),
|
|
276
|
-
_: 2
|
|
277
|
-
}, [
|
|
278
|
-
Array.isArray(n(k)) ? {
|
|
279
|
-
name: "tooltip",
|
|
280
|
-
fn: s(() => [
|
|
281
|
-
u("div", U, [
|
|
282
|
-
(i(!0), l(j, null, R(n(k), (f) => (i(), g(n(p), {
|
|
283
|
-
key: f,
|
|
284
|
-
variant: "body2"
|
|
285
|
-
}, {
|
|
286
|
-
default: s(() => [
|
|
287
|
-
T(m(f), 1)
|
|
288
|
-
]),
|
|
289
|
-
_: 2
|
|
290
|
-
}, 1024))), 128))
|
|
291
|
-
])
|
|
292
|
-
]),
|
|
293
|
-
key: "0"
|
|
294
|
-
} : void 0
|
|
295
|
-
]), 1032, ["text", "disabled", "test-id", "placement"]));
|
|
296
|
-
}
|
|
297
|
-
});
|
|
298
|
-
export {
|
|
299
|
-
ke as default
|
|
300
|
-
};
|
|
1
|
+
import "../../../OptionV4.vue_vue_type_style_index_0_scoped_752a357d_lang.css";
|
|
@@ -1,272 +1 @@
|
|
|
1
|
-
import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_63dc057e_lang.css";
|
|
2
|
-
import pe from "./DropdownV4.vue.js";
|
|
3
|
-
import ye from "./DefaultDropdownTrigger.vue.js";
|
|
4
|
-
import "./IconButtonDropdownTrigger.vue.js";
|
|
5
|
-
import "./ChipDropdownTrigger.vue.js";
|
|
6
|
-
import "./AppDropdownTrigger.vue.js";
|
|
7
|
-
import "./ButtonDropdownTrigger.vue.js";
|
|
8
|
-
import "./ButtonFilterDropdownTrigger.vue.js";
|
|
9
|
-
import "./TreeDropdown.vue.js";
|
|
10
|
-
import S from "./OptionV4.vue.js";
|
|
11
|
-
import "./ConditionalDropdown.vue.js";
|
|
12
|
-
import { useChildOptions as fe } from "../composables/useChildOptions.js";
|
|
13
|
-
import he from "../../search/v4/SearchV4.vue.js";
|
|
14
|
-
import { useTestIdAttrs as ve } from "../../../utils/testIds.js";
|
|
15
|
-
import { DropdownTestIdModifiers as F } from "../../../testids/index.js";
|
|
16
|
-
const ge = {
|
|
17
|
-
key: 0,
|
|
18
|
-
class: "child-options"
|
|
19
|
-
}, Ve = /* @__PURE__ */ te({
|
|
20
|
-
__name: "TreeDropdown",
|
|
21
|
-
props: {
|
|
22
|
-
options: null,
|
|
23
|
-
selected: { default: null },
|
|
24
|
-
isOpen: { type: Boolean },
|
|
25
|
-
placeholder: { default: "Select" },
|
|
26
|
-
inlineSearchPlaceholder: { default: "Search" },
|
|
27
|
-
size: { default: "medium" },
|
|
28
|
-
disabled: { type: Boolean, default: !1 },
|
|
29
|
-
testId: { default: "" },
|
|
30
|
-
displayValue: null,
|
|
31
|
-
optionNameKey: { default: "" },
|
|
32
|
-
optionIconKey: { default: "" },
|
|
33
|
-
optionImageKey: { default: "" },
|
|
34
|
-
optionIconType: { default: null },
|
|
35
|
-
optionEndIconKey: { default: "" },
|
|
36
|
-
optionEndIconType: { default: null },
|
|
37
|
-
optionEndTextIconKey: { default: null },
|
|
38
|
-
valueToCopy: { default: null },
|
|
39
|
-
disabledOptionKey: { default: "disabled" },
|
|
40
|
-
optionChildrenKey: null,
|
|
41
|
-
optionUniqueIdKey: null,
|
|
42
|
-
preExpandedOptions: null,
|
|
43
|
-
triggerFeedbackText: { default: "" },
|
|
44
|
-
triggerFeedbackVariant: { default: null }
|
|
45
|
-
},
|
|
46
|
-
emits: ["update:selected", "update:isOpen"],
|
|
47
|
-
setup(l, { emit: w }) {
|
|
48
|
-
const t = l;
|
|
49
|
-
ne("isTreeDropdown", !0);
|
|
50
|
-
const g = s([]), u = s([]), T = s({}), x = s(!1), o = s([...t.selected]), p = s(""), O = s(!0), N = m(() => u.value.reduce((e, i) => (i[t.optionChildrenKey] && i[t.optionChildrenKey].length && i[t.optionChildrenKey].forEach(() => {
|
|
51
|
-
e = e + 1;
|
|
52
|
-
}), i[t.optionChildrenKey] || (e = e + 1), e), 0)), U = () => {
|
|
53
|
-
t.options.forEach((e) => {
|
|
54
|
-
e[t.optionChildrenKey] && e[t.optionChildrenKey].length && (T.value[e[t.optionUniqueIdKey]] = [
|
|
55
|
-
...e[t.optionChildrenKey]
|
|
56
|
-
]);
|
|
57
|
-
}), g.value = [...t.options], u.value = [...t.options];
|
|
58
|
-
}, { hasChildren: h, getChildren: v, allChildrenSelected: C, someChildrenSelected: $ } = fe(o, t.optionChildrenKey), q = (e) => {
|
|
59
|
-
if (h(e)) {
|
|
60
|
-
C(e) ? o.value = o.value.filter(
|
|
61
|
-
(i) => !v(e).includes(i)
|
|
62
|
-
) : o.value = [
|
|
63
|
-
...o.value.filter((i) => !v(e).includes(i)),
|
|
64
|
-
...v(e)
|
|
65
|
-
];
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
|
-
o.value.includes(e) ? o.value = o.value.filter(
|
|
69
|
-
(i) => i !== e
|
|
70
|
-
) : o.value = [...o.value, e];
|
|
71
|
-
}, V = (e) => o.value.includes(e), P = (e) => 1 + (h(e) ? v(e).length : 0), J = () => {
|
|
72
|
-
w("update:selected", o.value), A.value = y.value;
|
|
73
|
-
}, j = () => {
|
|
74
|
-
o.value = [];
|
|
75
|
-
}, G = () => {
|
|
76
|
-
const e = /* @__PURE__ */ new Set([]);
|
|
77
|
-
u.value.forEach((n) => {
|
|
78
|
-
if (t.selected?.includes(n))
|
|
79
|
-
e.add(n);
|
|
80
|
-
else if (n[t.optionChildrenKey] && n[t.optionChildrenKey].length) {
|
|
81
|
-
for (const r of n[t.optionChildrenKey])
|
|
82
|
-
if (t.selected?.includes(r)) {
|
|
83
|
-
e.add(n);
|
|
84
|
-
break;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
const i = Array.from(e);
|
|
89
|
-
return u.value.forEach((n) => {
|
|
90
|
-
!t.selected.includes(n) && !e.has(n) && i.push(n);
|
|
91
|
-
}), i;
|
|
92
|
-
};
|
|
93
|
-
le(() => {
|
|
94
|
-
x.value || (U(), x.value = !0, t.preExpandedOptions && t.preExpandedOptions.forEach((e) => {
|
|
95
|
-
d.value[e] = 1;
|
|
96
|
-
}));
|
|
97
|
-
}), b(
|
|
98
|
-
() => t.options,
|
|
99
|
-
() => {
|
|
100
|
-
U();
|
|
101
|
-
}
|
|
102
|
-
), b(
|
|
103
|
-
() => t.selected,
|
|
104
|
-
(e, i) => {
|
|
105
|
-
JSON.stringify(e) !== JSON.stringify(i) && (o.value = [...t.selected]);
|
|
106
|
-
}
|
|
107
|
-
);
|
|
108
|
-
const y = m(() => o.value.length < N.value ? !1 : o.value.length === N.value), H = m(() => !y.value && o.value.length > 0), A = s(y.value), Q = (e) => {
|
|
109
|
-
w("update:isOpen", e), t.isOpen ? g.value = G() : (o.value = [...t.selected], p.value = "");
|
|
110
|
-
}, d = s({}), R = (e) => {
|
|
111
|
-
d.value[e[t.optionUniqueIdKey]] ? delete d.value[e[t.optionUniqueIdKey]] : d.value[e[t.optionUniqueIdKey]] = 1;
|
|
112
|
-
};
|
|
113
|
-
function W(e, i) {
|
|
114
|
-
const n = e.toLowerCase(), r = [];
|
|
115
|
-
return i.value.forEach((c) => {
|
|
116
|
-
const I = c[t.optionNameKey].toLowerCase().includes(n), L = T.value[c[t.optionUniqueIdKey]]?.filter(
|
|
117
|
-
(ee) => ee[t.optionNameKey].toLowerCase().includes(n)
|
|
118
|
-
) || [];
|
|
119
|
-
(I || L.length > 0) && (c[t.optionChildrenKey] = L, r.push(c));
|
|
120
|
-
}), r;
|
|
121
|
-
}
|
|
122
|
-
const X = (e) => {
|
|
123
|
-
const i = W(e, u);
|
|
124
|
-
e && (Object.keys(d.value).forEach((n) => {
|
|
125
|
-
delete d.value[n];
|
|
126
|
-
}), i.forEach((n) => {
|
|
127
|
-
Array.isArray(n[t.optionChildrenKey]) && n[t.optionChildrenKey].length && (d.value[n[t.optionUniqueIdKey]] = 1);
|
|
128
|
-
})), g.value = i;
|
|
129
|
-
}, Y = m(() => {
|
|
130
|
-
const e = t.options.length, i = t.options.reduce(
|
|
131
|
-
(n, r) => (d.value[r[t.optionUniqueIdKey]] && (n = n + r[t.optionChildrenKey].length), n),
|
|
132
|
-
0
|
|
133
|
-
);
|
|
134
|
-
return e + i;
|
|
135
|
-
});
|
|
136
|
-
b(
|
|
137
|
-
() => p.value,
|
|
138
|
-
() => {
|
|
139
|
-
X(p.value), O.value = !p.value;
|
|
140
|
-
}
|
|
141
|
-
);
|
|
142
|
-
const Z = () => {
|
|
143
|
-
y.value ? o.value = [] : (o.value = [], u.value.forEach((e) => {
|
|
144
|
-
if (e[t.optionChildrenKey] && e[t.optionChildrenKey].length)
|
|
145
|
-
for (const i of e[t.optionChildrenKey])
|
|
146
|
-
o.value = [i, ...o.value];
|
|
147
|
-
else
|
|
148
|
-
o.value = [e, ...o.value];
|
|
149
|
-
}));
|
|
150
|
-
}, _ = ve(t.testId, F);
|
|
151
|
-
return (e, i) => (K(), D(a(pe), {
|
|
152
|
-
multi: "",
|
|
153
|
-
class: "tree-dropdown",
|
|
154
|
-
"show-select-all": O.value,
|
|
155
|
-
"is-open": l.isOpen,
|
|
156
|
-
options: g.value,
|
|
157
|
-
selected: l.selected,
|
|
158
|
-
"display-value": l.displayValue,
|
|
159
|
-
placeholder: l.placeholder,
|
|
160
|
-
"inline-search": "",
|
|
161
|
-
"inline-search-placeholder": l.inlineSearchPlaceholder,
|
|
162
|
-
"option-name-key": l.optionNameKey,
|
|
163
|
-
size: l.size,
|
|
164
|
-
"test-id": l.testId,
|
|
165
|
-
disabled: l.disabled,
|
|
166
|
-
"disable-virtual-scroll": "",
|
|
167
|
-
"override-option-count-calculation": P,
|
|
168
|
-
"trigger-show-all-selected-text": !1,
|
|
169
|
-
"predefined-trigger": "default",
|
|
170
|
-
"custom-number-of-displayed-options": a(Y),
|
|
171
|
-
"trigger-feedback-text": l.triggerFeedbackText,
|
|
172
|
-
"trigger-feedback-variant": l.triggerFeedbackVariant,
|
|
173
|
-
"onUpdate:isOpen": Q,
|
|
174
|
-
onApply: J,
|
|
175
|
-
onClear: j
|
|
176
|
-
}, {
|
|
177
|
-
"dropdown-trigger": f(({ defaultTriggerProps: n }) => [
|
|
178
|
-
k(a(ye), z(n, {
|
|
179
|
-
"all-selected": A.value,
|
|
180
|
-
"show-all-selected-text": ""
|
|
181
|
-
}), ie({ _: 2 }, [
|
|
182
|
-
e.$slots["trigger-end-icon"] ? {
|
|
183
|
-
name: "end-icon",
|
|
184
|
-
fn: f(() => [
|
|
185
|
-
oe(e.$slots, "trigger-end-icon", {}, void 0, !0)
|
|
186
|
-
]),
|
|
187
|
-
key: "0"
|
|
188
|
-
} : void 0
|
|
189
|
-
]), 1040, ["all-selected"])
|
|
190
|
-
]),
|
|
191
|
-
"inline-search": f(() => [
|
|
192
|
-
k(a(he), {
|
|
193
|
-
modelValue: p.value,
|
|
194
|
-
"onUpdate:modelValue": i[0] || (i[0] = (n) => p.value = n),
|
|
195
|
-
class: "tree-search",
|
|
196
|
-
placeholder: l.inlineSearchPlaceholder,
|
|
197
|
-
variant: "transparent",
|
|
198
|
-
size: "md",
|
|
199
|
-
"auto-focus": "",
|
|
200
|
-
"test-id": l.testId
|
|
201
|
-
}, null, 8, ["modelValue", "placeholder", "test-id"])
|
|
202
|
-
]),
|
|
203
|
-
"select-all": f(() => [
|
|
204
|
-
M("li", null, [
|
|
205
|
-
k(a(S), z({
|
|
206
|
-
"aria-selected": a(y),
|
|
207
|
-
"aria-disabled": !!l.disabled,
|
|
208
|
-
"selected-prop": a(y),
|
|
209
|
-
"is-indeterminate": a(H),
|
|
210
|
-
"is-multi": "",
|
|
211
|
-
"select-all-option": ""
|
|
212
|
-
}, a(_)[a(F).SELECT_ALL], {
|
|
213
|
-
onClick: i[1] || (i[1] = E((n) => Z(), ["stop"]))
|
|
214
|
-
}), {
|
|
215
|
-
default: f(() => [
|
|
216
|
-
ae(" Select all ")
|
|
217
|
-
]),
|
|
218
|
-
_: 1
|
|
219
|
-
}, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
|
|
220
|
-
])
|
|
221
|
-
]),
|
|
222
|
-
default: f(({ option: n, index: r }) => [
|
|
223
|
-
k(a(S), {
|
|
224
|
-
option: n,
|
|
225
|
-
"selected-prop": a(h)(n) ? a(C)(n) : V(n),
|
|
226
|
-
"is-indeterminate": !a(C)(n) && a($)(n),
|
|
227
|
-
disabled: n[l.disabledOptionKey],
|
|
228
|
-
"name-key": l.optionNameKey,
|
|
229
|
-
"image-key": l.optionImageKey,
|
|
230
|
-
"icon-key": l.optionIconKey,
|
|
231
|
-
"icon-type": l.optionIconType,
|
|
232
|
-
"end-icon-key": l.optionEndIconKey,
|
|
233
|
-
"end-icon-type": l.optionEndIconType,
|
|
234
|
-
"end-text-icon-key": l.optionEndTextIconKey,
|
|
235
|
-
"tree-main-option": a(h)(n),
|
|
236
|
-
"tree-main-option-expanded": d.value[n[l.optionUniqueIdKey]],
|
|
237
|
-
"stop-option-click-event-propagation": "",
|
|
238
|
-
"is-multi": "",
|
|
239
|
-
onClick: E(() => q(n), ["stop"]),
|
|
240
|
-
onToggleTreeCollapse: R
|
|
241
|
-
}, null, 8, ["option", "selected-prop", "is-indeterminate", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "end-text-icon-key", "tree-main-option", "tree-main-option-expanded", "onClick"]),
|
|
242
|
-
a(h)(n) ? (K(), B("div", ge, [
|
|
243
|
-
de(M("div", null, [
|
|
244
|
-
(K(!0), B(re, null, ce(a(v)(n), (c, I) => (K(), D(a(S), {
|
|
245
|
-
key: `${r}-${I}`,
|
|
246
|
-
option: c,
|
|
247
|
-
"selected-prop": V(c),
|
|
248
|
-
disabled: c[l.disabledOptionKey],
|
|
249
|
-
"name-key": l.optionNameKey,
|
|
250
|
-
"image-key": l.optionImageKey,
|
|
251
|
-
"icon-key": l.optionIconKey,
|
|
252
|
-
"icon-type": l.optionIconType,
|
|
253
|
-
"end-icon-key": l.optionEndIconKey,
|
|
254
|
-
"end-icon-type": l.optionEndIconType,
|
|
255
|
-
"end-text-icon-key": l.optionEndTextIconKey,
|
|
256
|
-
"tree-child-shown": d.value[n[l.optionUniqueIdKey]],
|
|
257
|
-
"stop-option-click-event-propagation": "",
|
|
258
|
-
"is-multi": "",
|
|
259
|
-
onClick: E(() => q(c), ["stop"])
|
|
260
|
-
}, null, 8, ["option", "selected-prop", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "end-text-icon-key", "tree-child-shown", "onClick"]))), 128))
|
|
261
|
-
], 512), [
|
|
262
|
-
[se, d.value[n[l.optionUniqueIdKey]]]
|
|
263
|
-
])
|
|
264
|
-
])) : ue("", !0)
|
|
265
|
-
]),
|
|
266
|
-
_: 3
|
|
267
|
-
}, 8, ["show-select-all", "is-open", "options", "selected", "display-value", "placeholder", "inline-search-placeholder", "option-name-key", "size", "test-id", "disabled", "custom-number-of-displayed-options", "trigger-feedback-text", "trigger-feedback-variant"]));
|
|
268
|
-
}
|
|
269
|
-
});
|
|
270
|
-
export {
|
|
271
|
-
Ve as default
|
|
272
|
-
};
|
|
1
|
+
import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_63dc057e_lang.css";
|
|
@@ -1,91 +1 @@
|
|
|
1
|
-
import "../../../EmptyState.vue_vue_type_style_index_0_scoped_d3aecf34_lang.css";
|
|
2
|
-
import v from "../../button/v3/Button.vue.js";
|
|
3
|
-
import "../../button/v3/IconButton.vue.js";
|
|
4
|
-
import "../../button/v3/ScrollButton.vue.js";
|
|
5
|
-
import N from "./EmptyStateIcon.vue.js";
|
|
6
|
-
import $ from "../../icon/v3/Icon.vue.js";
|
|
7
|
-
import "../../typography/Heading.vue.js";
|
|
8
|
-
import y from "../../typography/Text.vue.js";
|
|
9
|
-
const p = { class: "empty-state-title-container" }, w = /* @__PURE__ */ h({
|
|
10
|
-
__name: "EmptyState",
|
|
11
|
-
props: {
|
|
12
|
-
title: { default: void 0 },
|
|
13
|
-
subtitle: { default: void 0 },
|
|
14
|
-
buttonText: { default: void 0 },
|
|
15
|
-
isHorizontal: { type: Boolean, default: !1 },
|
|
16
|
-
hasIcon: { type: Boolean, default: !0 },
|
|
17
|
-
isBordered: { type: Boolean, default: !1 },
|
|
18
|
-
iconName: { default: null },
|
|
19
|
-
fontSize: { default: "5rem" },
|
|
20
|
-
size: { default: "lg" },
|
|
21
|
-
iconWidth: { default: 44 },
|
|
22
|
-
iconHeight: { default: 44 }
|
|
23
|
-
},
|
|
24
|
-
emits: ["click"],
|
|
25
|
-
setup(t) {
|
|
26
|
-
const m = t, z = k(() => ({
|
|
27
|
-
width: m.iconWidth,
|
|
28
|
-
height: m.iconHeight
|
|
29
|
-
}));
|
|
30
|
-
return (i, c) => (e(), b("div", {
|
|
31
|
-
class: d(["empty-state-container", { horizontal: t.isHorizontal, bordered: t.isBordered }])
|
|
32
|
-
}, [
|
|
33
|
-
f("div", {
|
|
34
|
-
class: d(`empty-state-icon-container empty-state-icon-container--${t.size}`)
|
|
35
|
-
}, [
|
|
36
|
-
t.hasIcon ? a(i.$slots, "icon", { key: 0 }, () => [
|
|
37
|
-
t.iconName ? o("", !0) : (e(), n(N, B(g({ key: 0 }, l(z))), null, 16)),
|
|
38
|
-
t.iconName ? (e(), n(l($), {
|
|
39
|
-
key: 1,
|
|
40
|
-
name: t.iconName,
|
|
41
|
-
"font-size": t.fontSize,
|
|
42
|
-
class: "empty-state-icon"
|
|
43
|
-
}, null, 8, ["name", "font-size"])) : o("", !0)
|
|
44
|
-
], !0) : o("", !0)
|
|
45
|
-
], 2),
|
|
46
|
-
f("div", p, [
|
|
47
|
-
a(i.$slots, "title", {}, () => [
|
|
48
|
-
t.title ? (e(), n(l(y), {
|
|
49
|
-
key: 0,
|
|
50
|
-
size: "lg",
|
|
51
|
-
strong: "",
|
|
52
|
-
class: "empty-state-title"
|
|
53
|
-
}, {
|
|
54
|
-
default: s(() => [
|
|
55
|
-
r(u(t.title), 1)
|
|
56
|
-
]),
|
|
57
|
-
_: 1
|
|
58
|
-
})) : o("", !0)
|
|
59
|
-
], !0),
|
|
60
|
-
a(i.$slots, "subtitle", {}, () => [
|
|
61
|
-
t.subtitle ? (e(), n(l(y), {
|
|
62
|
-
key: 0,
|
|
63
|
-
size: "sm",
|
|
64
|
-
class: "empty-state-subtitle"
|
|
65
|
-
}, {
|
|
66
|
-
default: s(() => [
|
|
67
|
-
r(u(t.subtitle), 1)
|
|
68
|
-
]),
|
|
69
|
-
_: 1
|
|
70
|
-
})) : o("", !0)
|
|
71
|
-
], !0)
|
|
72
|
-
]),
|
|
73
|
-
a(i.$slots, "button", {}, () => [
|
|
74
|
-
t.buttonText ? (e(), n(l(v), {
|
|
75
|
-
key: 0,
|
|
76
|
-
theme: "secondary",
|
|
77
|
-
class: "empty-state-button",
|
|
78
|
-
onClick: c[0] || (c[0] = (S) => i.$emit("click"))
|
|
79
|
-
}, {
|
|
80
|
-
default: s(() => [
|
|
81
|
-
r(u(t.buttonText), 1)
|
|
82
|
-
]),
|
|
83
|
-
_: 1
|
|
84
|
-
})) : o("", !0)
|
|
85
|
-
], !0)
|
|
86
|
-
], 2));
|
|
87
|
-
}
|
|
88
|
-
});
|
|
89
|
-
export {
|
|
90
|
-
w as default
|
|
91
|
-
};
|
|
1
|
+
import "../../../EmptyState.vue_vue_type_style_index_0_scoped_d3aecf34_lang.css";
|