@ironsource/shared-ui 2.1.11-rc.18 → 2.1.11-rc.19
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/DropdownV4.vue_vue_type_style_index_0_scoped_5c7bcf85_lang.css +1 -0
- package/components/dropdown/common/Dropdown.common.js +126 -123
- package/components/dropdown/v4/DropdownV4.vue.js +4 -4
- package/components/dropdown/v4/DropdownV4.vue2.js +15 -15
- package/index.js +1 -1
- package/package.json +1 -1
- package/DropdownV4.vue_vue_type_style_index_0_scoped_f88a132e_lang.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.v-enter-active[data-v-5c7bcf85],.v-leave-active[data-v-5c7bcf85]{transition:opacity .25s ease}ol[data-v-5c7bcf85],ul[data-v-5c7bcf85],menu[data-v-5c7bcf85]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-5c7bcf85],.dropdown.full-width .button__container[data-v-5c7bcf85]{width:100%}.dropdown-list-wrapper[data-v-5c7bcf85]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-5c7bcf85]{padding:.5rem}.list-container--multi[data-v-5c7bcf85]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-5c7bcf85]{display:flex;gap:4px;padding-bottom:.25rem}.inline-search .inline-search-wrapper .search-container[data-v-5c7bcf85]{width:100%}.inline-search .list-container[data-v-5c7bcf85]{padding-top:0}.no-result-container[data-v-5c7bcf85]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-5c7bcf85]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-5c7bcf85]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-5c7bcf85]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.list--with-conditions[data-v-5c7bcf85]{min-height:0;margin-bottom:0}.image-slot[data-v-5c7bcf85]{margin-right:.5rem}.actions-wrapper[data-v-5c7bcf85]{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-5c7bcf85]{margin-left:.5rem}
|
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
import { useToggle as Ve } from "../../../composables/useToggle.js";
|
|
2
|
-
import { inject as ke, ref as i, computed as
|
|
3
|
-
import { isObjectInArray as
|
|
2
|
+
import { inject as ke, ref as i, computed as c, watch as b, useSlots as _e, toRaw as P, nextTick as N, provide as Ge, onMounted as He } from "vue";
|
|
3
|
+
import { isObjectInArray as ae } from "../../../utils/array.js";
|
|
4
4
|
import { objectsEqual as Be } from "../../../utils/object.js";
|
|
5
|
-
import { useClamp as Le, useVirtualList as Ue, onClickOutside as
|
|
6
|
-
import { Mode as T, Type as
|
|
5
|
+
import { useClamp as Le, useVirtualList as Ue, onClickOutside as ne } from "@vueuse/core";
|
|
6
|
+
import { Mode as T, Type as G, DropdownContext as qe } from "./DropdownContext.js";
|
|
7
7
|
import { pxToRem as $e } from "../../../utils/style.js";
|
|
8
8
|
import { useEditableContext as je } from "../../table-cells/common/EditableContext.js";
|
|
9
9
|
import { useGroupedOptions as Xe } from "./useGroupedOptions.js";
|
|
10
10
|
const ll = (l, A, O) => {
|
|
11
|
-
const
|
|
12
|
-
sortOutGroups:
|
|
13
|
-
flattenAndMarkGroupOptions:
|
|
14
|
-
isGroup:
|
|
15
|
-
selectAllWithGroups:
|
|
16
|
-
isIndeterminateGrouped:
|
|
17
|
-
allSelectedGrouped:
|
|
11
|
+
const H = ke("isTreeDropdown", !1), {
|
|
12
|
+
sortOutGroups: B,
|
|
13
|
+
flattenAndMarkGroupOptions: ue,
|
|
14
|
+
isGroup: L,
|
|
15
|
+
selectAllWithGroups: ie,
|
|
16
|
+
isIndeterminateGrouped: re,
|
|
17
|
+
allSelectedGrouped: U,
|
|
18
18
|
areAllPreviousSelected: oe
|
|
19
19
|
} = Xe(l), ce = (e, t) => l.multi && Array.isArray(e) ? l.comparingKey ? e?.findIndex(
|
|
20
20
|
(u) => u[l.comparingKey] === t[l.comparingKey]
|
|
21
|
-
) > -1 :
|
|
22
|
-
let
|
|
21
|
+
) > -1 : ae(e, t) : l.comparingKey ? e?.[l.comparingKey] === t[l.comparingKey] : e === t;
|
|
22
|
+
let q;
|
|
23
23
|
((e) => {
|
|
24
24
|
e[e.None = 0] = "None", e[e.Next = 1] = "Next", e[e.Previous = -1] = "Previous", e[e.NextPage = 10] = "NextPage", e[e.PrevPage = -10] = "PrevPage";
|
|
25
|
-
})(
|
|
25
|
+
})(q || (q = {}));
|
|
26
26
|
const a = i(
|
|
27
27
|
l.selected
|
|
28
|
-
),
|
|
28
|
+
), R = je(), n = c({
|
|
29
29
|
get() {
|
|
30
|
-
return
|
|
30
|
+
return R?.value?.value ?? a.value;
|
|
31
31
|
},
|
|
32
32
|
set(e) {
|
|
33
|
-
|
|
33
|
+
R.onChange?.(e), R.onClose?.(), A("update:selected", e);
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
36
|
b(
|
|
37
37
|
() => l.selected,
|
|
38
38
|
() => {
|
|
39
|
-
a.value = l.selected,
|
|
39
|
+
a.value = l.selected, v.value = l.selected;
|
|
40
40
|
}
|
|
41
41
|
);
|
|
42
|
-
const se = _e(), w = i(null), m = i(null),
|
|
42
|
+
const se = _e(), w = i(null), m = i(null), $ = i(null), E = i(null), j = i(null), I = i(null), ve = i(), X = i(null), z = i(null), W = i(null), de = 8, fe = c(() => I.value ? I.value.getBoundingClientRect().height + de + l.distance : 0), D = i(!1), f = i([]), x = i(-1), g = i(""), v = i(l.selected || []), J = () => I.value?.focus(), [y, ge, ye] = Ve({
|
|
43
43
|
disabled: l.disabled,
|
|
44
44
|
initialValue: l.defaultOpen
|
|
45
45
|
});
|
|
@@ -49,181 +49,181 @@ const ll = (l, A, O) => {
|
|
|
49
49
|
e !== void 0 && ye(e);
|
|
50
50
|
}
|
|
51
51
|
);
|
|
52
|
-
const
|
|
52
|
+
const Q = (e) => {
|
|
53
53
|
he.value = ge(e);
|
|
54
|
-
}, he =
|
|
54
|
+
}, he = c({
|
|
55
55
|
get() {
|
|
56
56
|
return l.isOpen;
|
|
57
57
|
},
|
|
58
58
|
set(e) {
|
|
59
59
|
A("update:isOpen", e);
|
|
60
60
|
}
|
|
61
|
-
}), Oe =
|
|
61
|
+
}), Oe = c(() => r.value.length - 1), d = Le(0, 0, Oe), Y = c(() => n.value ? l.displayValue(n.value) : ""), me = (e) => {
|
|
62
62
|
if (!e.value.length && !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix)
|
|
63
63
|
return l.placeholder;
|
|
64
64
|
const t = !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix ? `${e.value.length} selected` : `${l.multiOptionsPlaceholderPrefix ?? ""}${e.value.length ?? "0"}${l.multiOptionsPlaceholderSuffix ?? ""}`;
|
|
65
65
|
return e.value.length == 1 && l.displayValue ? l.displayValue(e.value[0]) : t;
|
|
66
|
-
}, Se =
|
|
66
|
+
}, Se = c(() => {
|
|
67
67
|
if (!l.multi)
|
|
68
68
|
return n.value ? l.displayValue(n.value) : l.placeholder;
|
|
69
69
|
if (Array.isArray(a.value))
|
|
70
70
|
return me(a);
|
|
71
|
-
}),
|
|
71
|
+
}), M = c(() => {
|
|
72
72
|
if (Array.isArray(a.value))
|
|
73
|
-
return l.groupedOptions ?
|
|
74
|
-
}), Ae =
|
|
75
|
-
|
|
73
|
+
return l.groupedOptions ? U(r, a) : a.value.length === r.value.length;
|
|
74
|
+
}), Ae = c(() => !l.multi || !Array.isArray(a.value) ? !1 : l.groupedOptions ? re(
|
|
75
|
+
r,
|
|
76
76
|
a
|
|
77
|
-
) : a.value.length > 0 && a.value.length <
|
|
77
|
+
) : a.value.length > 0 && a.value.length < r.value.length), V = (e) => {
|
|
78
78
|
g.value = e;
|
|
79
|
-
},
|
|
79
|
+
}, K = c(() => l.groupedOptions ? ue(l.options) : l.options), be = c(() => {
|
|
80
80
|
if (oe(
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
K,
|
|
82
|
+
v
|
|
83
83
|
))
|
|
84
|
-
return
|
|
84
|
+
return K.value;
|
|
85
85
|
const e = {
|
|
86
86
|
selected: [],
|
|
87
87
|
notSelected: []
|
|
88
88
|
};
|
|
89
|
-
P(
|
|
90
|
-
const
|
|
91
|
-
(
|
|
92
|
-
) > -1 :
|
|
93
|
-
e[
|
|
89
|
+
P(K).value.forEach((u) => {
|
|
90
|
+
const o = (l.comparingKey ? v.value.findIndex(
|
|
91
|
+
(_) => _[l.comparingKey] === u[l.comparingKey]
|
|
92
|
+
) > -1 : v.value.includes(u)) ? "selected" : "notSelected";
|
|
93
|
+
e[o].push(u);
|
|
94
94
|
});
|
|
95
|
-
const t = l.groupedOptions ?
|
|
95
|
+
const t = l.groupedOptions ? B(e.notSelected) : e.notSelected;
|
|
96
96
|
return [].concat(e.selected, t);
|
|
97
|
-
}),
|
|
98
|
-
const e = Array.isArray(
|
|
97
|
+
}), r = c(() => {
|
|
98
|
+
const e = Array.isArray(v.value) && l.multi && O.VERSION === 4 && !H ? be.value : K.value;
|
|
99
99
|
if (l.onSearch) {
|
|
100
|
-
const t = e.filter((u) => l.groupedOptions &&
|
|
101
|
-
return l.groupedOptions ?
|
|
100
|
+
const t = e.filter((u) => l.groupedOptions && L(u) ? u : l.onSearch(u, g.value));
|
|
101
|
+
return l.groupedOptions ? B(t) : t;
|
|
102
102
|
} else
|
|
103
103
|
return e;
|
|
104
|
-
}), Pe =
|
|
104
|
+
}), Pe = c(() => f.value[0]?.hasSubtitle), Z = c(() => s.mode === T.Multi), F = c(
|
|
105
105
|
() => Pe.value ? O.MULTILINE_LIST_HEIGHT : O.LIST_HEIGHT
|
|
106
106
|
), {
|
|
107
|
-
list:
|
|
108
|
-
containerProps:
|
|
107
|
+
list: p,
|
|
108
|
+
containerProps: ee,
|
|
109
109
|
wrapperProps: Te,
|
|
110
|
-
scrollTo:
|
|
111
|
-
} = Ue(
|
|
112
|
-
itemHeight:
|
|
110
|
+
scrollTo: C
|
|
111
|
+
} = Ue(r, {
|
|
112
|
+
itemHeight: F.value,
|
|
113
113
|
overscan: l.disableVirtualScroll ? 1 / 0 : 2
|
|
114
114
|
});
|
|
115
115
|
b(
|
|
116
116
|
() => l.isOpen,
|
|
117
117
|
(e) => {
|
|
118
|
-
|
|
118
|
+
Q(e);
|
|
119
119
|
}
|
|
120
120
|
), b([x], async () => {
|
|
121
|
-
await
|
|
121
|
+
await N();
|
|
122
122
|
}), b(
|
|
123
|
-
[y,
|
|
123
|
+
[y, d, x],
|
|
124
124
|
async ([e], [t]) => {
|
|
125
|
-
y.value && (await
|
|
126
|
-
l.multi && O.VERSION === 4 ||
|
|
127
|
-
}),
|
|
128
|
-
|
|
125
|
+
y.value && (await N(), x.value !== -1 && e !== t && setTimeout(() => {
|
|
126
|
+
l.multi && O.VERSION === 4 || C(x.value);
|
|
127
|
+
}), d.value && setTimeout(() => {
|
|
128
|
+
C(d.value);
|
|
129
129
|
}));
|
|
130
130
|
}
|
|
131
131
|
), b(g, () => {
|
|
132
|
-
A("onsearch", g.value),
|
|
132
|
+
A("onsearch", g.value), C(0);
|
|
133
133
|
});
|
|
134
134
|
const S = (e, t = !1) => {
|
|
135
|
-
l.disabled || (
|
|
135
|
+
l.disabled || (Q(e), N(() => {
|
|
136
136
|
y.value && A("opened"), y.value || A("closed"), w.value && t && w.value.focus();
|
|
137
137
|
}));
|
|
138
138
|
};
|
|
139
139
|
b(y, (e) => {
|
|
140
140
|
if (e) {
|
|
141
|
-
g.value = "",
|
|
141
|
+
g.value = "", Z.value && Array.isArray(n.value) && (v.value = P(n.value).slice());
|
|
142
142
|
return;
|
|
143
143
|
}
|
|
144
|
-
|
|
144
|
+
J();
|
|
145
145
|
});
|
|
146
146
|
const we = () => {
|
|
147
|
-
if (
|
|
147
|
+
if (M.value) {
|
|
148
148
|
a.value = [];
|
|
149
149
|
return;
|
|
150
150
|
}
|
|
151
151
|
if (Array.isArray(a.value)) {
|
|
152
152
|
if (l.groupedOptions)
|
|
153
|
-
|
|
153
|
+
ie(r, a);
|
|
154
154
|
else {
|
|
155
|
-
if (a.value.length ===
|
|
155
|
+
if (a.value.length === r.value.length) {
|
|
156
156
|
a.value = [];
|
|
157
157
|
return;
|
|
158
158
|
}
|
|
159
|
-
a.value =
|
|
159
|
+
a.value = r.value;
|
|
160
160
|
}
|
|
161
161
|
A("selectAll");
|
|
162
162
|
}
|
|
163
163
|
}, Ie = () => {
|
|
164
164
|
we(), O.VERSION !== 4 && (n.value = a.value);
|
|
165
165
|
}, xe = (e = !0) => {
|
|
166
|
-
a.value = [], e && (n.value = [],
|
|
167
|
-
},
|
|
166
|
+
a.value = [], e && (n.value = [], v.value = []), A("clear");
|
|
167
|
+
}, k = (e, t) => {
|
|
168
168
|
if (e = P(e), O.VERSION === 4 ? e[l.disabledOptionKey] : f.value[t]?.disabled)
|
|
169
169
|
return;
|
|
170
170
|
if (x.value = t, !l.multi) {
|
|
171
171
|
l.keepOpen || S(!1), s.goToOption(
|
|
172
172
|
0
|
|
173
173
|
/* None */
|
|
174
|
-
), n.value = e,
|
|
174
|
+
), n.value = e, V(""), J(), s.type === G.Search && m.value && (m.value.value = l.displayValue(e)), le();
|
|
175
175
|
return;
|
|
176
176
|
}
|
|
177
177
|
if (!Array.isArray(a.value))
|
|
178
178
|
return;
|
|
179
179
|
m.value?.focus();
|
|
180
180
|
const h = P(a.value);
|
|
181
|
-
if (
|
|
182
|
-
(
|
|
181
|
+
if (ae(h, e) || l.comparingKey && h.findIndex(
|
|
182
|
+
(o) => o[l.comparingKey] === e[l.comparingKey]
|
|
183
183
|
) > -1) {
|
|
184
|
-
a.value = h.filter((
|
|
184
|
+
a.value = h.filter((o) => l.comparingKey ? o[l.comparingKey] !== e[l.comparingKey] : !Be(o, e));
|
|
185
185
|
return;
|
|
186
186
|
} else {
|
|
187
187
|
a.value = [...h, e];
|
|
188
188
|
return;
|
|
189
189
|
}
|
|
190
190
|
}, De = (e) => f.value[e]?.disabled, s = {
|
|
191
|
-
activeIndex:
|
|
191
|
+
activeIndex: d,
|
|
192
192
|
options: f,
|
|
193
193
|
selectedOption: n,
|
|
194
|
-
labelRef:
|
|
195
|
-
activeOption:
|
|
194
|
+
labelRef: j,
|
|
195
|
+
activeOption: E,
|
|
196
196
|
listRef: w,
|
|
197
197
|
clearable: l.clearable,
|
|
198
|
-
type: se.input ?
|
|
198
|
+
type: se.input ? G.Search : G.Dropdown,
|
|
199
199
|
mode: l.multi ? T.Multi : T.Single,
|
|
200
200
|
query: g,
|
|
201
|
-
selectedValue:
|
|
201
|
+
selectedValue: Y,
|
|
202
202
|
toggle: S,
|
|
203
203
|
disabled: l.disabled,
|
|
204
204
|
open: y,
|
|
205
205
|
mandatory: l.mandatory,
|
|
206
206
|
size: l.size,
|
|
207
207
|
placeholder: l.placeholder,
|
|
208
|
-
select:
|
|
208
|
+
select: k,
|
|
209
209
|
clearSelection: () => {
|
|
210
|
-
|
|
210
|
+
V(""), n.value = s.mode === T.Single ? null : [], v.value = s.mode === T.Single ? null : [], m.value && (m.value.value = "");
|
|
211
211
|
},
|
|
212
|
-
search:
|
|
212
|
+
search: V,
|
|
213
213
|
goToOption: async (e) => {
|
|
214
214
|
if (!y.value)
|
|
215
215
|
return;
|
|
216
|
-
let t =
|
|
216
|
+
let t = d.value + e;
|
|
217
217
|
const u = f.value.filter(
|
|
218
|
-
(
|
|
219
|
-
).length, h =
|
|
218
|
+
(o) => o.disabled
|
|
219
|
+
).length, h = r.value.length - u;
|
|
220
220
|
for (t > h && (t = h + 1); ; ) {
|
|
221
221
|
if (!f.value[t]?.disabled) {
|
|
222
|
-
|
|
222
|
+
E.value = r.value[t], d.value = t;
|
|
223
223
|
return;
|
|
224
224
|
}
|
|
225
|
-
if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!De(
|
|
226
|
-
|
|
225
|
+
if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!De(d.value)) {
|
|
226
|
+
E.value = r.value[t], d.value = t;
|
|
227
227
|
return;
|
|
228
228
|
}
|
|
229
229
|
}
|
|
@@ -238,19 +238,19 @@ const ll = (l, A, O) => {
|
|
|
238
238
|
f.value = f.value.filter((t) => t.id !== e);
|
|
239
239
|
}
|
|
240
240
|
};
|
|
241
|
-
Ge(qe, s),
|
|
241
|
+
Ge(qe, s), ne(
|
|
242
242
|
w,
|
|
243
243
|
() => {
|
|
244
|
-
y.value &&
|
|
244
|
+
y.value && te();
|
|
245
245
|
},
|
|
246
246
|
{
|
|
247
247
|
ignore: [
|
|
248
248
|
I,
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
249
|
+
X,
|
|
250
|
+
z,
|
|
251
|
+
W,
|
|
252
252
|
m,
|
|
253
|
-
|
|
253
|
+
ee.ref
|
|
254
254
|
]
|
|
255
255
|
}
|
|
256
256
|
);
|
|
@@ -258,14 +258,17 @@ const ll = (l, A, O) => {
|
|
|
258
258
|
m.value && (m.value.value = s.query.value = "");
|
|
259
259
|
};
|
|
260
260
|
He(async () => {
|
|
261
|
-
l.autoFocus && (await
|
|
262
|
-
|
|
263
|
-
})), s.goToOption(0)
|
|
261
|
+
l.autoFocus && (await N(), setTimeout(() => {
|
|
262
|
+
$.value.focus();
|
|
263
|
+
})), s.goToOption(0), l.multi && !H && (l.groupOption ? D.value = U(
|
|
264
|
+
r,
|
|
265
|
+
a
|
|
266
|
+
) : D.value = l.options.length === l.selected.length);
|
|
264
267
|
});
|
|
265
|
-
const
|
|
266
|
-
l.multi && (
|
|
267
|
-
},
|
|
268
|
-
|
|
268
|
+
const le = () => {
|
|
269
|
+
l.multi && (D.value = M.value, n.value = a.value, Array.isArray(n.value) && (v.value = P(n.value).slice())), A("apply", n.value), S(!1), Ke();
|
|
270
|
+
}, te = () => {
|
|
271
|
+
Z.value && Array.isArray(v.value) && (n.value = P(v.value).slice()), g.value = "", S(!1);
|
|
269
272
|
}, Ce = (e) => {
|
|
270
273
|
if (!l.disableKeyboardEvents)
|
|
271
274
|
switch (e.key) {
|
|
@@ -315,20 +318,20 @@ const ll = (l, A, O) => {
|
|
|
315
318
|
S(!0);
|
|
316
319
|
return;
|
|
317
320
|
}
|
|
318
|
-
|
|
321
|
+
k(r.value[d.value], d.value), s.mode === T.Single && !l.keepOpen && S(!1), e.preventDefault();
|
|
319
322
|
break;
|
|
320
323
|
}
|
|
321
324
|
}
|
|
322
|
-
}, Re =
|
|
325
|
+
}, Re = c(() => {
|
|
323
326
|
if (l.loading)
|
|
324
327
|
return 8.5;
|
|
325
|
-
const e = l.customNumberOfDisplayedOptions ||
|
|
328
|
+
const e = l.customNumberOfDisplayedOptions || p.value.reduce((_, Ee) => {
|
|
326
329
|
const Me = l.overrideOptionCountCalculation ? l.overrideOptionCountCalculation(Ee.data) : 1;
|
|
327
|
-
return
|
|
330
|
+
return _ + Me;
|
|
328
331
|
}, 0), t = l.multi && l.showSelectAll && !g.value ? 1 : 0, u = e > O.MAX_NUMBER_OF_OPTIONS, h = e + t;
|
|
329
|
-
let
|
|
330
|
-
return l.noResultsText &&
|
|
331
|
-
|
|
332
|
+
let o = u ? O.MAX_NUMBER_OF_OPTIONS + 0.1 : h;
|
|
333
|
+
return l.noResultsText && o === 0 && (o = o + 1), l.withConditions && g.value && (o = o + 1), $e(
|
|
334
|
+
o * F.value + O.PADDING_PX
|
|
332
335
|
);
|
|
333
336
|
});
|
|
334
337
|
return {
|
|
@@ -338,36 +341,36 @@ const ll = (l, A, O) => {
|
|
|
338
341
|
toggleMenu: S,
|
|
339
342
|
onButtonKeydown: Ce,
|
|
340
343
|
displayedValue: Se,
|
|
341
|
-
labelRef:
|
|
344
|
+
labelRef: j,
|
|
342
345
|
query: g,
|
|
343
|
-
containerProps:
|
|
346
|
+
containerProps: ee,
|
|
344
347
|
calculateTableHeight: Re,
|
|
345
348
|
wrapperProps: Te,
|
|
346
|
-
filteredOptions:
|
|
347
|
-
allSelected:
|
|
348
|
-
allSelectedApplied:
|
|
349
|
+
filteredOptions: r,
|
|
350
|
+
allSelected: M,
|
|
351
|
+
allSelectedApplied: D,
|
|
349
352
|
isIndeterminate: Ae,
|
|
350
353
|
onSelectAll: Ie,
|
|
351
|
-
virtualOptions:
|
|
354
|
+
virtualOptions: p,
|
|
352
355
|
isSelected: ce,
|
|
353
356
|
selectedOption: n,
|
|
354
|
-
selectedOptionPrevious:
|
|
355
|
-
selectedValue:
|
|
356
|
-
onSelect:
|
|
357
|
-
activeIndex:
|
|
358
|
-
onCancel:
|
|
359
|
-
onApply:
|
|
360
|
-
scrollTo:
|
|
361
|
-
onClickOutside:
|
|
357
|
+
selectedOptionPrevious: v,
|
|
358
|
+
selectedValue: Y,
|
|
359
|
+
onSelect: k,
|
|
360
|
+
activeIndex: d,
|
|
361
|
+
onCancel: te,
|
|
362
|
+
onApply: le,
|
|
363
|
+
scrollTo: C,
|
|
364
|
+
onClickOutside: ne,
|
|
362
365
|
listRef: w,
|
|
363
366
|
buttonRef: I,
|
|
364
|
-
apply:
|
|
365
|
-
cancel:
|
|
366
|
-
el:
|
|
367
|
-
triggerRef:
|
|
368
|
-
clearAll:
|
|
367
|
+
apply: X,
|
|
368
|
+
cancel: z,
|
|
369
|
+
el: $,
|
|
370
|
+
triggerRef: ve,
|
|
371
|
+
clearAll: W,
|
|
369
372
|
onClearAllSelections: xe,
|
|
370
|
-
isGroup:
|
|
373
|
+
isGroup: L
|
|
371
374
|
};
|
|
372
375
|
};
|
|
373
376
|
export {
|
|
@@ -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_5c7bcf85_lang.css"; //*');
|
|
4
4
|
// import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css"; //');
|
|
5
|
-
const
|
|
5
|
+
const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-5c7bcf85"]]);
|
|
6
6
|
export {
|
|
7
|
-
|
|
7
|
+
c as default
|
|
8
8
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "../../../DropdownV4.
|
|
1
|
+
import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_5c7bcf85_lang.css"; import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css"; import { defineComponent as fe, computed as U, openBlock as n, createElementBlock as r, mergeProps as y, unref as t, renderSlot as f, createElementVNode as m, createVNode as i, withCtx as u, Transition as me, normalizeClass as O, normalizeStyle as pe, createTextVNode as T, createCommentVNode as a, isRef as ge, toDisplayString as W, withModifiers as M, Fragment as Te, renderList as ke, toRaw as C, createBlock as X, resolveDynamicComponent as be } from "vue";
|
|
2
2
|
import L from "../../button/v4/ButtonV4.vue.js";
|
|
3
3
|
import "../../button/v4/IconButtonV4.vue.js";
|
|
4
4
|
import "../../button/v4/ButtonGroup.vue.js";
|
|
@@ -111,9 +111,9 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
|
|
|
111
111
|
}, {
|
|
112
112
|
onKeydown: h,
|
|
113
113
|
open: s,
|
|
114
|
-
toggleMenu:
|
|
114
|
+
toggleMenu: I,
|
|
115
115
|
onButtonKeydown: N,
|
|
116
|
-
query:
|
|
116
|
+
query: v,
|
|
117
117
|
containerProps: J,
|
|
118
118
|
calculateTableHeight: Q,
|
|
119
119
|
wrapperProps: Z,
|
|
@@ -141,7 +141,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
|
|
|
141
141
|
clearAll: ue,
|
|
142
142
|
isGroup: ce
|
|
143
143
|
} = Ke(d, B, F), g = Ae(d.testId, p), $ = U(() => !d.predefinedTrigger || d.predefinedTrigger === k.DEFAULT ? he : d.predefinedTrigger === k.APP ? ve : null), { width: H } = Ee(R), ye = U(() => d.optionsListWidth ? d.optionsListWidth : !d.predefinedTrigger || d.predefinedTrigger === k.DEFAULT || d.predefinedTrigger === k.APP ? H.value - 2 > 240 ? `${H.value - 2}px` : `${F.DROPLIST_MIN_WIDTH}px` : "auto"), G = () => {
|
|
144
|
-
|
|
144
|
+
I();
|
|
145
145
|
};
|
|
146
146
|
return j({
|
|
147
147
|
selectItem: D,
|
|
@@ -207,9 +207,9 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
|
|
|
207
207
|
], !0) : a("", !0),
|
|
208
208
|
f(c.$slots, "inline-search", {}, () => [
|
|
209
209
|
i(t(Ce), {
|
|
210
|
-
modelValue: t(
|
|
210
|
+
modelValue: t(v),
|
|
211
211
|
"onUpdate:modelValue": [
|
|
212
|
-
l[4] || (l[4] = (o) => ge(
|
|
212
|
+
l[4] || (l[4] = (o) => ge(v) ? v.value = o : null),
|
|
213
213
|
e.onClear
|
|
214
214
|
],
|
|
215
215
|
placeholder: e.inlineSearchPlaceholder,
|
|
@@ -251,7 +251,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
|
|
|
251
251
|
i(t(S), { round: "" }),
|
|
252
252
|
i(t(S), { round: "" })
|
|
253
253
|
])) : a("", !0),
|
|
254
|
-
e.showSelectAll !== !1 && e.multi && !t(
|
|
254
|
+
e.showSelectAll !== !1 && e.multi && !t(v) && !e.loading && e.options.length ? f(c.$slots, "select-all", { key: 2 }, () => [
|
|
255
255
|
m("li", null, [
|
|
256
256
|
i(t(q), y(
|
|
257
257
|
{
|
|
@@ -276,7 +276,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
|
|
|
276
276
|
], !0) : a("", !0),
|
|
277
277
|
t(x).length && !e.loading ? (n(!0), r(Te, { key: 3 }, ke(t(x), ({ data: o, index: w }) => (n(), r("li", {
|
|
278
278
|
key: w,
|
|
279
|
-
"aria-selected": t(A)(
|
|
279
|
+
"aria-selected": t(A)(C(t(b)), o),
|
|
280
280
|
"aria-disabled": !!e.disabled,
|
|
281
281
|
onClick: M(() => t(D)(o, w), ["stop"])
|
|
282
282
|
}, [
|
|
@@ -291,14 +291,14 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
|
|
|
291
291
|
key: 1,
|
|
292
292
|
option: o,
|
|
293
293
|
index: w,
|
|
294
|
-
selected: t(A)(
|
|
295
|
-
active:
|
|
294
|
+
selected: t(A)(C(t(b)), o),
|
|
295
|
+
active: C(t(P)) === w,
|
|
296
296
|
disabled: o[d.disabledOptionKey]
|
|
297
297
|
}, () => [
|
|
298
298
|
i(t(q), {
|
|
299
299
|
option: o,
|
|
300
|
-
"selected-prop": t(A)(
|
|
301
|
-
active:
|
|
300
|
+
"selected-prop": t(A)(t(b), o),
|
|
301
|
+
active: C(t(P)) === w,
|
|
302
302
|
disabled: o[d.disabledOptionKey],
|
|
303
303
|
"name-key": e.optionNameKey,
|
|
304
304
|
"image-key": e.optionImageKey,
|
|
@@ -391,7 +391,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
|
|
|
391
391
|
open: t(s),
|
|
392
392
|
disabled: e.disabled,
|
|
393
393
|
label: t(oe) || e.placeholder,
|
|
394
|
-
onClick: () => t(
|
|
394
|
+
onClick: () => t(I)()
|
|
395
395
|
},
|
|
396
396
|
defaultTriggerProps: {
|
|
397
397
|
placeholder: e.placeholder,
|
|
@@ -457,7 +457,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
|
|
|
457
457
|
])) : a("", !0),
|
|
458
458
|
e.predefinedTrigger === t(k).ICON_BUTTON ? (n(), r("div", Ve, [
|
|
459
459
|
i(t(we), {
|
|
460
|
-
onClick: l[1] || (l[1] = (o) => t(
|
|
460
|
+
onClick: l[1] || (l[1] = (o) => t(I)())
|
|
461
461
|
})
|
|
462
462
|
])) : a("", !0),
|
|
463
463
|
e.predefinedTrigger === t(k).CHIP ? (n(), r("div", xe, [
|
|
@@ -470,7 +470,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
|
|
|
470
470
|
"display-value": e.displayValue,
|
|
471
471
|
multi: e.multi,
|
|
472
472
|
"all-selected": t(K),
|
|
473
|
-
onClick: l[2] || (l[2] = (o) => t(
|
|
473
|
+
onClick: l[2] || (l[2] = (o) => t(I)()),
|
|
474
474
|
onClear: l[3] || (l[3] = (o) => t(z)())
|
|
475
475
|
}, null, 8, ["open", "label", "test-id", "options", "selected-option", "display-value", "multi", "all-selected"])
|
|
476
476
|
])) : a("", !0)
|
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './MenuItem.vue_vue_type_style_index_0_scoped_67e53b85_lang.css';
|
|
2
2
|
import { AppTriggerTypes as ro } from "./components/appTrigger/index.js";
|
|
3
3
|
import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
|
|
4
4
|
import { MenuItemTypes as po } from "./components/menuItem/index.js";
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.v-enter-active[data-v-f88a132e],.v-leave-active[data-v-f88a132e]{transition:opacity .25s ease}ol[data-v-f88a132e],ul[data-v-f88a132e],menu[data-v-f88a132e]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-f88a132e],.dropdown.full-width .button__container[data-v-f88a132e]{width:100%}.dropdown-list-wrapper[data-v-f88a132e]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-f88a132e]{padding:.5rem}.list-container--multi[data-v-f88a132e]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-f88a132e]{display:flex;gap:4px;padding-bottom:.25rem}.inline-search .inline-search-wrapper .search-container[data-v-f88a132e]{width:100%}.inline-search .list-container[data-v-f88a132e]{padding-top:0}.no-result-container[data-v-f88a132e]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-f88a132e]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-f88a132e]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-f88a132e]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.list--with-conditions[data-v-f88a132e]{min-height:0;margin-bottom:0}.image-slot[data-v-f88a132e]{margin-right:.5rem}.actions-wrapper[data-v-f88a132e]{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-f88a132e]{margin-left:.5rem}
|