@ironsource/shared-ui 2.1.11-rc.1 → 2.1.11-test.1
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/TreeDropdown.vue_vue_type_style_index_0_scoped_e944c610_lang.css +1 -0
- package/components/dropdown/common/Dropdown.common.js +93 -93
- package/components/dropdown/v4/TreeDropdown.vue.js +2 -2
- package/components/dropdown/v4/TreeDropdown.vue2.js +123 -120
- package/index.js +1 -1
- package/package.json +1 -1
- package/TreeDropdown.vue_vue_type_style_index_0_scoped_6ac5f602_lang.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.child-options[data-v-e944c610]{padding-left:1rem}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useToggle as
|
|
2
|
-
import { inject as
|
|
1
|
+
import { useToggle as ke } from "../../../composables/useToggle.js";
|
|
2
|
+
import { inject as Ve, ref as i, computed as r, watch as b, useSlots as _e, toRaw as P, nextTick as N, provide as Ge, onMounted as He } from "vue";
|
|
3
3
|
import { isObjectInArray as ee } from "../../../utils/array.js";
|
|
4
4
|
import { objectsEqual as Be } from "../../../utils/object.js";
|
|
5
5
|
import { useClamp as Le, useVirtualList as Ue, onClickOutside as le } from "@vueuse/core";
|
|
@@ -7,17 +7,17 @@ import { Mode as T, Type as _, DropdownContext as qe } from "./DropdownContext.j
|
|
|
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
|
-
const ll = (l,
|
|
11
|
-
const te =
|
|
10
|
+
const ll = (l, S, A) => {
|
|
11
|
+
const te = Ve("isTreeDropdown", !1), {
|
|
12
12
|
sortOutGroups: G,
|
|
13
13
|
flattenAndMarkGroupOptions: ae,
|
|
14
14
|
isGroup: H,
|
|
15
|
-
selectAllWithGroups:
|
|
16
|
-
isIndeterminateGrouped:
|
|
15
|
+
selectAllWithGroups: ne,
|
|
16
|
+
isIndeterminateGrouped: ue,
|
|
17
17
|
allSelectedGrouped: ie,
|
|
18
18
|
areAllPreviousSelected: re
|
|
19
19
|
} = Xe(l), oe = (e, t) => l.multi ? l.comparingKey ? e.findIndex(
|
|
20
|
-
(
|
|
20
|
+
(u) => u[l.comparingKey] === t[l.comparingKey]
|
|
21
21
|
) > -1 : ee(e, t) : l.comparingKey ? e[l.comparingKey] === t[l.comparingKey] : P(e) === t;
|
|
22
22
|
let B;
|
|
23
23
|
((e) => {
|
|
@@ -25,25 +25,25 @@ const ll = (l, b, h) => {
|
|
|
25
25
|
})(B || (B = {}));
|
|
26
26
|
const a = i(
|
|
27
27
|
l.selected
|
|
28
|
-
), R = je(),
|
|
28
|
+
), R = je(), n = r({
|
|
29
29
|
get() {
|
|
30
30
|
return R?.value?.value ?? a.value;
|
|
31
31
|
},
|
|
32
32
|
set(e) {
|
|
33
|
-
R.onChange?.(e), R.onClose?.(),
|
|
33
|
+
R.onChange?.(e), R.onClose?.(), S("update:selected", e);
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
|
-
|
|
36
|
+
b(
|
|
37
37
|
() => l.selected,
|
|
38
38
|
() => {
|
|
39
39
|
a.value = l.selected, s.value = l.selected;
|
|
40
40
|
}
|
|
41
41
|
);
|
|
42
|
-
const ce = _e(), w = i(null),
|
|
42
|
+
const ce = _e(), w = i(null), h = i(null), L = i(null), E = i(null), U = i(null), I = i(null), se = i(), q = i(null), $ = i(null), j = i(null), ve = 8, de = r(() => I.value ? I.value.getBoundingClientRect().height + ve + l.distance : 0), X = i(!1), f = i([]), x = i(-1), O = i(""), s = i(l.selected || []), z = () => I.value?.focus(), [g, fe, ge] = ke({
|
|
43
43
|
disabled: l.disabled,
|
|
44
44
|
initialValue: l.defaultOpen
|
|
45
45
|
});
|
|
46
|
-
|
|
46
|
+
b(
|
|
47
47
|
() => l.disabled,
|
|
48
48
|
(e) => {
|
|
49
49
|
e !== void 0 && ge(e);
|
|
@@ -56,27 +56,27 @@ const ll = (l, b, h) => {
|
|
|
56
56
|
return l.isOpen;
|
|
57
57
|
},
|
|
58
58
|
set(e) {
|
|
59
|
-
|
|
59
|
+
S("update:isOpen", e);
|
|
60
60
|
}
|
|
61
|
-
}), he = r(() => o.value.length - 1),
|
|
61
|
+
}), he = r(() => o.value.length - 1), d = Le(0, 0, he), J = r(() => n.value ? l.displayValue(n.value) : ""), Oe = (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
|
-
},
|
|
66
|
+
}, me = r(() => {
|
|
67
67
|
if (!l.multi)
|
|
68
|
-
return
|
|
68
|
+
return n.value ? l.displayValue(n.value) : l.placeholder;
|
|
69
69
|
if (Array.isArray(a.value))
|
|
70
70
|
return Oe(a);
|
|
71
71
|
}), K = r(() => {
|
|
72
72
|
if (Array.isArray(a.value))
|
|
73
73
|
return l.groupedOptions ? ie(o, a) : a.value.length === o.value.length;
|
|
74
|
-
}),
|
|
74
|
+
}), Se = r(() => !l.multi || !Array.isArray(a.value) ? !1 : l.groupedOptions ? ue(
|
|
75
75
|
o,
|
|
76
76
|
a
|
|
77
77
|
) : a.value.length > 0 && a.value.length < o.value.length), M = (e) => {
|
|
78
|
-
|
|
79
|
-
}, D = r(() => l.groupedOptions ? ae(l.options) : l.options),
|
|
78
|
+
O.value = e;
|
|
79
|
+
}, D = r(() => l.groupedOptions ? ae(l.options) : l.options), Ae = r(() => {
|
|
80
80
|
if (re(
|
|
81
81
|
D,
|
|
82
82
|
s
|
|
@@ -86,59 +86,59 @@ const ll = (l, b, h) => {
|
|
|
86
86
|
selected: [],
|
|
87
87
|
notSelected: []
|
|
88
88
|
};
|
|
89
|
-
P(D).value.forEach((
|
|
90
|
-
const
|
|
91
|
-
(
|
|
92
|
-
) > -1 : s.value.includes(
|
|
93
|
-
e[
|
|
89
|
+
P(D).value.forEach((u) => {
|
|
90
|
+
const v = (l.comparingKey ? s.value.findIndex(
|
|
91
|
+
(V) => V[l.comparingKey] === u[l.comparingKey]
|
|
92
|
+
) > -1 : s.value.includes(u)) ? "selected" : "notSelected";
|
|
93
|
+
e[v].push(u);
|
|
94
94
|
});
|
|
95
95
|
const t = l.groupedOptions ? G(e.notSelected) : e.notSelected;
|
|
96
96
|
return [].concat(e.selected, t);
|
|
97
97
|
}), o = r(() => {
|
|
98
|
-
const e = Array.isArray(s.value) && l.multi &&
|
|
98
|
+
const e = Array.isArray(s.value) && l.multi && A.VERSION === 4 && !te ? Ae.value : D.value;
|
|
99
99
|
if (l.onSearch) {
|
|
100
|
-
const t = e.filter((
|
|
100
|
+
const t = e.filter((u) => l.groupedOptions && H(u) ? u : l.onSearch(u, O.value));
|
|
101
101
|
return l.groupedOptions ? G(t) : t;
|
|
102
102
|
} else
|
|
103
103
|
return e;
|
|
104
|
-
}),
|
|
105
|
-
() =>
|
|
104
|
+
}), be = r(() => f.value[0]?.hasSubtitle), Q = r(() => c.mode === T.Multi), Y = r(
|
|
105
|
+
() => be.value ? A.MULTILINE_LIST_HEIGHT : A.LIST_HEIGHT
|
|
106
106
|
), {
|
|
107
107
|
list: Z,
|
|
108
108
|
containerProps: F,
|
|
109
109
|
wrapperProps: Pe,
|
|
110
|
-
scrollTo:
|
|
110
|
+
scrollTo: C
|
|
111
111
|
} = Ue(o, {
|
|
112
112
|
itemHeight: Y.value,
|
|
113
113
|
overscan: l.disableVirtualScroll ? 1 / 0 : 2
|
|
114
114
|
});
|
|
115
|
-
|
|
115
|
+
b(
|
|
116
116
|
() => l.isOpen,
|
|
117
117
|
(e) => {
|
|
118
118
|
W(e);
|
|
119
119
|
}
|
|
120
|
-
),
|
|
121
|
-
await
|
|
122
|
-
}),
|
|
123
|
-
[g,
|
|
120
|
+
), b([x], async () => {
|
|
121
|
+
await N();
|
|
122
|
+
}), b(
|
|
123
|
+
[g, d, x],
|
|
124
124
|
async ([e], [t]) => {
|
|
125
|
-
g.value && (await
|
|
126
|
-
l.multi &&
|
|
127
|
-
}),
|
|
128
|
-
|
|
125
|
+
g.value && (await N(), x.value !== -1 && e !== t && setTimeout(() => {
|
|
126
|
+
l.multi && A.VERSION === 4 || C(x.value);
|
|
127
|
+
}), d.value && setTimeout(() => {
|
|
128
|
+
C(d.value);
|
|
129
129
|
}));
|
|
130
130
|
}
|
|
131
|
-
),
|
|
132
|
-
|
|
131
|
+
), b(O, () => {
|
|
132
|
+
S("onsearch", O.value), C(0);
|
|
133
133
|
});
|
|
134
134
|
const m = (e, t = !1) => {
|
|
135
|
-
l.disabled || (W(e),
|
|
136
|
-
g.value &&
|
|
135
|
+
l.disabled || (W(e), N(() => {
|
|
136
|
+
g.value && S("opened"), g.value || S("closed"), w.value && t && w.value.focus();
|
|
137
137
|
}));
|
|
138
138
|
};
|
|
139
|
-
|
|
139
|
+
b(g, (e) => {
|
|
140
140
|
if (e) {
|
|
141
|
-
|
|
141
|
+
O.value = "", Q.value && Array.isArray(n.value) && (s.value = P(n.value).slice());
|
|
142
142
|
return;
|
|
143
143
|
}
|
|
144
144
|
z();
|
|
@@ -150,7 +150,7 @@ const ll = (l, b, h) => {
|
|
|
150
150
|
}
|
|
151
151
|
if (Array.isArray(a.value)) {
|
|
152
152
|
if (l.groupedOptions)
|
|
153
|
-
|
|
153
|
+
ne(o, a);
|
|
154
154
|
else {
|
|
155
155
|
if (a.value.length === o.value.length) {
|
|
156
156
|
a.value = [];
|
|
@@ -158,31 +158,31 @@ const ll = (l, b, h) => {
|
|
|
158
158
|
}
|
|
159
159
|
a.value = o.value;
|
|
160
160
|
}
|
|
161
|
-
|
|
161
|
+
S("selectAll");
|
|
162
162
|
}
|
|
163
163
|
}, we = () => {
|
|
164
|
-
Te(),
|
|
164
|
+
Te(), A.VERSION !== 4 && (n.value = a.value);
|
|
165
165
|
}, Ie = (e = !0) => {
|
|
166
|
-
a.value = [], e && (
|
|
167
|
-
},
|
|
168
|
-
if (e = P(e),
|
|
166
|
+
a.value = [], e && (n.value = [], s.value = []), S("clear");
|
|
167
|
+
}, k = (e, t) => {
|
|
168
|
+
if (e = P(e), f.value[t]?.disabled)
|
|
169
169
|
return;
|
|
170
170
|
if (x.value = t, c.mode !== T.Multi) {
|
|
171
171
|
l.keepOpen || m(!1), c.goToOption(
|
|
172
172
|
0
|
|
173
173
|
/* None */
|
|
174
|
-
),
|
|
174
|
+
), n.value = e, M(""), z(), c.type === _.Search && h.value && (h.value.value = l.displayValue(e));
|
|
175
175
|
return;
|
|
176
176
|
}
|
|
177
177
|
if (!Array.isArray(a.value))
|
|
178
178
|
return;
|
|
179
|
-
|
|
179
|
+
h.value?.focus();
|
|
180
180
|
const y = P(a.value);
|
|
181
181
|
if (ee(y, e) || l.comparingKey && y.findIndex(
|
|
182
|
-
(
|
|
182
|
+
(v) => v[l.comparingKey] === e[l.comparingKey]
|
|
183
183
|
) > -1) {
|
|
184
184
|
a.value = y.filter(
|
|
185
|
-
(
|
|
185
|
+
(v) => !Be(v, e)
|
|
186
186
|
);
|
|
187
187
|
return;
|
|
188
188
|
} else {
|
|
@@ -190,16 +190,16 @@ const ll = (l, b, h) => {
|
|
|
190
190
|
return;
|
|
191
191
|
}
|
|
192
192
|
}, xe = (e) => f.value[e]?.disabled, c = {
|
|
193
|
-
activeIndex:
|
|
193
|
+
activeIndex: d,
|
|
194
194
|
options: f,
|
|
195
|
-
selectedOption:
|
|
195
|
+
selectedOption: n,
|
|
196
196
|
labelRef: U,
|
|
197
197
|
activeOption: E,
|
|
198
198
|
listRef: w,
|
|
199
199
|
clearable: l.clearable,
|
|
200
200
|
type: ce.input ? _.Search : _.Dropdown,
|
|
201
201
|
mode: l.multi ? T.Multi : T.Single,
|
|
202
|
-
query:
|
|
202
|
+
query: O,
|
|
203
203
|
selectedValue: J,
|
|
204
204
|
toggle: m,
|
|
205
205
|
disabled: l.disabled,
|
|
@@ -207,34 +207,34 @@ const ll = (l, b, h) => {
|
|
|
207
207
|
mandatory: l.mandatory,
|
|
208
208
|
size: l.size,
|
|
209
209
|
placeholder: l.placeholder,
|
|
210
|
-
select:
|
|
210
|
+
select: k,
|
|
211
211
|
clearSelection: () => {
|
|
212
|
-
M(""),
|
|
212
|
+
M(""), n.value = c.mode === T.Single ? null : [], s.value = c.mode === T.Single ? null : [], h.value && (h.value.value = "");
|
|
213
213
|
},
|
|
214
214
|
search: M,
|
|
215
215
|
goToOption: async (e) => {
|
|
216
216
|
if (!g.value)
|
|
217
217
|
return;
|
|
218
|
-
let t =
|
|
219
|
-
const
|
|
220
|
-
(
|
|
221
|
-
).length, y = o.value.length -
|
|
218
|
+
let t = d.value + e;
|
|
219
|
+
const u = f.value.filter(
|
|
220
|
+
(v) => v.disabled
|
|
221
|
+
).length, y = o.value.length - u;
|
|
222
222
|
for (t > y && (t = y + 1); ; ) {
|
|
223
223
|
if (!f.value[t]?.disabled) {
|
|
224
|
-
E.value = o.value[t],
|
|
224
|
+
E.value = o.value[t], d.value = t;
|
|
225
225
|
return;
|
|
226
226
|
}
|
|
227
|
-
if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!xe(
|
|
228
|
-
E.value = o.value[t],
|
|
227
|
+
if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!xe(d.value)) {
|
|
228
|
+
E.value = o.value[t], d.value = t;
|
|
229
229
|
return;
|
|
230
230
|
}
|
|
231
231
|
}
|
|
232
232
|
},
|
|
233
233
|
registerInput: (e) => {
|
|
234
|
-
|
|
234
|
+
h.value = e.value;
|
|
235
235
|
},
|
|
236
|
-
registerOption: (e, t,
|
|
237
|
-
f.value = [...f.value, { id: e, disabled: t, hasSubtitle:
|
|
236
|
+
registerOption: (e, t, u) => {
|
|
237
|
+
f.value = [...f.value, { id: e, disabled: t, hasSubtitle: u }];
|
|
238
238
|
},
|
|
239
239
|
unRegisterOption(e) {
|
|
240
240
|
f.value = f.value.filter((t) => t.id !== e);
|
|
@@ -251,24 +251,24 @@ const ll = (l, b, h) => {
|
|
|
251
251
|
q,
|
|
252
252
|
$,
|
|
253
253
|
j,
|
|
254
|
-
|
|
254
|
+
h,
|
|
255
255
|
F.ref
|
|
256
256
|
]
|
|
257
257
|
}
|
|
258
258
|
);
|
|
259
259
|
const De = () => {
|
|
260
|
-
|
|
260
|
+
h.value && (h.value.value = c.query.value = "");
|
|
261
261
|
};
|
|
262
262
|
He(async () => {
|
|
263
|
-
l.autoFocus && (await
|
|
263
|
+
l.autoFocus && (await N(), setTimeout(() => {
|
|
264
264
|
L.value.focus();
|
|
265
265
|
})), c.goToOption(0);
|
|
266
266
|
});
|
|
267
|
-
const
|
|
268
|
-
X.value = K.value,
|
|
267
|
+
const Ce = () => {
|
|
268
|
+
X.value = K.value, n.value = a.value, Array.isArray(n.value) && (s.value = P(n.value).slice()), S("apply", n.value), m(!1), De();
|
|
269
269
|
}, p = () => {
|
|
270
|
-
Q.value && Array.isArray(s.value) && (
|
|
271
|
-
},
|
|
270
|
+
Q.value && Array.isArray(s.value) && (n.value = P(s.value).slice()), O.value = "", m(!1);
|
|
271
|
+
}, Ne = (e) => {
|
|
272
272
|
if (!l.disableKeyboardEvents)
|
|
273
273
|
switch (e.key) {
|
|
274
274
|
case "Space":
|
|
@@ -317,49 +317,49 @@ const ll = (l, b, h) => {
|
|
|
317
317
|
m(!0);
|
|
318
318
|
return;
|
|
319
319
|
}
|
|
320
|
-
|
|
320
|
+
k(o.value[d.value], d.value), c.mode === T.Single && !l.keepOpen && m(!1), e.preventDefault();
|
|
321
321
|
break;
|
|
322
322
|
}
|
|
323
323
|
}
|
|
324
324
|
}, Ee = r(() => {
|
|
325
325
|
if (l.loading)
|
|
326
326
|
return 8.5;
|
|
327
|
-
const e = l.customNumberOfDisplayedOptions || Z.value.reduce((
|
|
327
|
+
const e = l.customNumberOfDisplayedOptions || Z.value.reduce((V, Ke) => {
|
|
328
328
|
const Me = l.overrideOptionCountCalculation ? l.overrideOptionCountCalculation(Ke.data) : 1;
|
|
329
|
-
return
|
|
330
|
-
}, 0), t = l.multi && l.showSelectAll && !
|
|
331
|
-
let
|
|
332
|
-
return l.noResultsText &&
|
|
333
|
-
|
|
329
|
+
return V + Me;
|
|
330
|
+
}, 0), t = l.multi && l.showSelectAll && !O.value ? 1 : 0, u = e > A.MAX_NUMBER_OF_OPTIONS, y = e + t;
|
|
331
|
+
let v = u ? A.MAX_NUMBER_OF_OPTIONS + 0.1 : y;
|
|
332
|
+
return l.noResultsText && v === 0 && (v = v + 1), $e(
|
|
333
|
+
v * Y.value + A.PADDING_PX
|
|
334
334
|
);
|
|
335
335
|
});
|
|
336
336
|
return {
|
|
337
337
|
onKeydown: Re,
|
|
338
|
-
location:
|
|
338
|
+
location: de,
|
|
339
339
|
open: g,
|
|
340
340
|
toggleMenu: m,
|
|
341
|
-
onButtonKeydown:
|
|
342
|
-
displayedValue:
|
|
341
|
+
onButtonKeydown: Ne,
|
|
342
|
+
displayedValue: me,
|
|
343
343
|
labelRef: U,
|
|
344
|
-
query:
|
|
344
|
+
query: O,
|
|
345
345
|
containerProps: F,
|
|
346
346
|
calculateTableHeight: Ee,
|
|
347
347
|
wrapperProps: Pe,
|
|
348
348
|
filteredOptions: o,
|
|
349
349
|
allSelected: K,
|
|
350
350
|
allSelectedApplied: X,
|
|
351
|
-
isIndeterminate:
|
|
351
|
+
isIndeterminate: Se,
|
|
352
352
|
onSelectAll: we,
|
|
353
353
|
virtualOptions: Z,
|
|
354
354
|
isSelected: oe,
|
|
355
|
-
selectedOption:
|
|
355
|
+
selectedOption: n,
|
|
356
356
|
selectedOptionPrevious: s,
|
|
357
357
|
selectedValue: J,
|
|
358
|
-
onSelect:
|
|
359
|
-
activeIndex:
|
|
358
|
+
onSelect: k,
|
|
359
|
+
activeIndex: d,
|
|
360
360
|
onCancel: p,
|
|
361
|
-
onApply:
|
|
362
|
-
scrollTo:
|
|
361
|
+
onApply: Ce,
|
|
362
|
+
scrollTo: C,
|
|
363
363
|
onClickOutside: le,
|
|
364
364
|
listRef: w,
|
|
365
365
|
buttonRef: I,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./TreeDropdown.vue2.js";
|
|
2
2
|
/* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
-
// import "../../../TreeDropdown.
|
|
4
|
-
const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-
|
|
3
|
+
// import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_e944c610_lang.css"; //*');
|
|
4
|
+
const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e944c610"]]);
|
|
5
5
|
export {
|
|
6
6
|
s as default
|
|
7
7
|
};
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import "../../../TreeDropdown.
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_e944c610_lang.css"; import { defineComponent as R, provide as G, ref as c, onMounted as H, watch as m, computed as J, openBlock as v, createElementBlock as I, Fragment as N, createVNode as g, unref as d, withCtx as K, normalizeProps as Q, guardReactiveProps as W, createSlots as X, renderSlot as Y, withModifiers as q, withDirectives as Z, createElementVNode as x, renderList as _, createBlock as ee, vShow as ne, createCommentVNode as oe, toDisplayString as te } from "vue";
|
|
2
|
+
import le from "./DropdownV4.vue.js";
|
|
3
|
+
import ie from "./DefaultDropdownTrigger.vue.js";
|
|
4
4
|
import "./IconButtonDropdownTrigger.vue.js";
|
|
5
5
|
import "./ChipDropdownTrigger.vue.js";
|
|
6
6
|
import "./AppDropdownTrigger.vue.js";
|
|
7
7
|
import "./ButtonDropdownTrigger.vue.js";
|
|
8
8
|
import "./ButtonFilterDropdownTrigger.vue.js";
|
|
9
9
|
import "./TreeDropdown.vue.js";
|
|
10
|
-
import
|
|
11
|
-
import { useChildOptions as
|
|
12
|
-
import
|
|
13
|
-
const
|
|
10
|
+
import z from "./OptionV4.vue.js";
|
|
11
|
+
import { useChildOptions as de } from "../composables/useChildOptions.js";
|
|
12
|
+
import ae from "../../search/v4/SearchV4.vue.js";
|
|
13
|
+
const se = {
|
|
14
14
|
key: 0,
|
|
15
15
|
class: "child-options"
|
|
16
|
-
},
|
|
16
|
+
}, re = { style: { position: "absolute", top: "0", right: "0" } }, Ie = /* @__PURE__ */ R({
|
|
17
17
|
__name: "TreeDropdown",
|
|
18
18
|
props: {
|
|
19
19
|
options: null,
|
|
@@ -38,18 +38,18 @@ const ae = {
|
|
|
38
38
|
preExpandedOptions: null
|
|
39
39
|
},
|
|
40
40
|
emits: ["update:selected", "update:isOpen"],
|
|
41
|
-
setup(t, { emit:
|
|
41
|
+
setup(t, { emit: O }) {
|
|
42
42
|
const o = t;
|
|
43
|
-
|
|
44
|
-
const h = c([]), f = c([]),
|
|
43
|
+
G("isTreeDropdown", !0);
|
|
44
|
+
const h = c([]), f = c([]), w = c({}), b = c(!1), i = c([...o.selected]), u = c(""), E = () => {
|
|
45
45
|
o.options.forEach((n) => {
|
|
46
|
-
n[o.optionChildrenKey] && n[o.optionChildrenKey].length && (
|
|
46
|
+
n[o.optionChildrenKey] && n[o.optionChildrenKey].length && (w.value[n[o.optionUniqueIdKey]] = [
|
|
47
47
|
...n[o.optionChildrenKey]
|
|
48
48
|
]);
|
|
49
49
|
}), h.value = [...o.options], f.value = [...o.options];
|
|
50
|
-
}, { hasChildren: p, getChildren: y, allChildrenSelected:
|
|
50
|
+
}, { hasChildren: p, getChildren: y, allChildrenSelected: C, someChildrenSelected: D } = de(i, o.optionChildrenKey), S = (n) => {
|
|
51
51
|
if (p(n)) {
|
|
52
|
-
|
|
52
|
+
C(n) ? i.value = i.value.filter(
|
|
53
53
|
(l) => !y(n).includes(l)
|
|
54
54
|
) : i.value = [
|
|
55
55
|
...i.value.filter((l) => !y(n).includes(l)),
|
|
@@ -60,11 +60,11 @@ const ae = {
|
|
|
60
60
|
i.value.includes(n) ? i.value = i.value.filter(
|
|
61
61
|
(l) => l !== n
|
|
62
62
|
) : i.value = [...i.value, n];
|
|
63
|
-
},
|
|
64
|
-
|
|
65
|
-
}, B = () => {
|
|
66
|
-
i.value = [];
|
|
63
|
+
}, T = (n) => i.value.includes(n), V = (n) => 1 + (p(n) ? y(n).length : 0), B = () => {
|
|
64
|
+
O("update:selected", i.value);
|
|
67
65
|
}, L = () => {
|
|
66
|
+
i.value = [];
|
|
67
|
+
}, M = () => {
|
|
68
68
|
const n = /* @__PURE__ */ new Set([]);
|
|
69
69
|
f.value.forEach((e) => {
|
|
70
70
|
if (o.selected?.includes(e))
|
|
@@ -82,14 +82,14 @@ const ae = {
|
|
|
82
82
|
!o.selected.includes(e) && !n.has(e) && l.push(e);
|
|
83
83
|
}), l;
|
|
84
84
|
};
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
H(() => {
|
|
86
|
+
b.value || (E(), b.value = !0, o.preExpandedOptions && o.preExpandedOptions.forEach((n) => {
|
|
87
87
|
a.value[n] = 1;
|
|
88
88
|
}));
|
|
89
89
|
}), m(
|
|
90
90
|
() => o.options,
|
|
91
91
|
() => {
|
|
92
|
-
|
|
92
|
+
E();
|
|
93
93
|
}
|
|
94
94
|
), m(
|
|
95
95
|
() => o.selected,
|
|
@@ -99,29 +99,29 @@ const ae = {
|
|
|
99
99
|
), m(
|
|
100
100
|
() => o.isOpen,
|
|
101
101
|
() => {
|
|
102
|
-
o.isOpen ? h.value =
|
|
102
|
+
o.isOpen ? h.value = M() : (i.value = [...o.selected], u.value = "");
|
|
103
103
|
}
|
|
104
104
|
);
|
|
105
|
-
const a = c({}),
|
|
105
|
+
const a = c({}), P = (n) => {
|
|
106
106
|
a.value[n[o.optionUniqueIdKey]] ? delete a.value[n[o.optionUniqueIdKey]] : a.value[n[o.optionUniqueIdKey]] = 1;
|
|
107
107
|
};
|
|
108
|
-
function
|
|
108
|
+
function A(n, l) {
|
|
109
109
|
const e = n.toLowerCase(), s = [];
|
|
110
110
|
return l.value.forEach((r) => {
|
|
111
|
-
const
|
|
112
|
-
(
|
|
111
|
+
const k = r[o.optionNameKey].toLowerCase().includes(e), U = w.value[r[o.optionUniqueIdKey]]?.filter(
|
|
112
|
+
(F) => F[o.optionNameKey].toLowerCase().includes(e)
|
|
113
113
|
) || [];
|
|
114
|
-
(
|
|
114
|
+
(k || U.length > 0) && (r[o.optionChildrenKey] = U, s.push(r));
|
|
115
115
|
}), s;
|
|
116
116
|
}
|
|
117
|
-
const
|
|
118
|
-
const l =
|
|
117
|
+
const $ = (n) => {
|
|
118
|
+
const l = A(n, f);
|
|
119
119
|
n && (Object.keys(a.value).forEach((e) => {
|
|
120
120
|
delete a.value[e];
|
|
121
121
|
}), l.forEach((e) => {
|
|
122
122
|
Array.isArray(e[o.optionChildrenKey]) && e[o.optionChildrenKey].length && (a.value[e[o.optionUniqueIdKey]] = 1);
|
|
123
123
|
})), h.value = l;
|
|
124
|
-
},
|
|
124
|
+
}, j = J(() => {
|
|
125
125
|
const n = o.options.length, l = o.options.reduce(
|
|
126
126
|
(e, s) => (a.value[s[o.optionUniqueIdKey]] && (e = e + s[o.optionChildrenKey].length), e),
|
|
127
127
|
0
|
|
@@ -131,98 +131,101 @@ const ae = {
|
|
|
131
131
|
return m(
|
|
132
132
|
() => u.value,
|
|
133
133
|
() => {
|
|
134
|
-
|
|
134
|
+
$(u.value);
|
|
135
135
|
}
|
|
136
|
-
), (n, l) => (v(),
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
(
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
136
|
+
), (n, l) => (v(), I(N, null, [
|
|
137
|
+
g(d(le), {
|
|
138
|
+
multi: "",
|
|
139
|
+
class: "tree-dropdown",
|
|
140
|
+
"show-select-all": !1,
|
|
141
|
+
"is-open": t.isOpen,
|
|
142
|
+
options: h.value,
|
|
143
|
+
selected: t.selected,
|
|
144
|
+
"display-value": t.displayValue,
|
|
145
|
+
placeholder: t.placeholder,
|
|
146
|
+
"inline-search": "",
|
|
147
|
+
"inline-search-placeholder": t.inlineSearchPlaceholder,
|
|
148
|
+
"option-name-key": t.optionNameKey,
|
|
149
|
+
size: t.size,
|
|
150
|
+
"test-id": t.testId,
|
|
151
|
+
disabled: t.disabled,
|
|
152
|
+
"disable-virtual-scroll": "",
|
|
153
|
+
"override-option-count-calculation": V,
|
|
154
|
+
"trigger-show-all-selected-text": !1,
|
|
155
|
+
"predefined-trigger": "default",
|
|
156
|
+
"custom-number-of-displayed-options": d(j),
|
|
157
|
+
"onUpdate:isOpen": l[1] || (l[1] = (e) => O("update:isOpen", e)),
|
|
158
|
+
onApply: B,
|
|
159
|
+
onClear: L
|
|
160
|
+
}, {
|
|
161
|
+
"dropdown-trigger": K(({ defaultTriggerProps: e }) => [
|
|
162
|
+
g(d(ie), Q(W(e)), X({ _: 2 }, [
|
|
163
|
+
n.$slots["trigger-end-icon"] ? {
|
|
164
|
+
name: "end-icon",
|
|
165
|
+
fn: K(() => [
|
|
166
|
+
Y(n.$slots, "trigger-end-icon", {}, void 0, !0)
|
|
167
|
+
]),
|
|
168
|
+
key: "0"
|
|
169
|
+
} : void 0
|
|
170
|
+
]), 1040)
|
|
171
|
+
]),
|
|
172
|
+
"inline-search": K(() => [
|
|
173
|
+
g(d(ae), {
|
|
174
|
+
modelValue: u.value,
|
|
175
|
+
"onUpdate:modelValue": l[0] || (l[0] = (e) => u.value = e),
|
|
176
|
+
placeholder: t.inlineSearchPlaceholder,
|
|
177
|
+
variant: "transparent",
|
|
178
|
+
size: "md",
|
|
179
|
+
"auto-focus": "",
|
|
180
|
+
"test-id": t.testId
|
|
181
|
+
}, null, 8, ["modelValue", "placeholder", "test-id"])
|
|
182
|
+
]),
|
|
183
|
+
default: K(({ option: e, index: s }) => [
|
|
184
|
+
g(d(z), {
|
|
185
|
+
option: e,
|
|
186
|
+
"selected-prop": d(p)(e) ? d(C)(e) : T(e),
|
|
187
|
+
"is-indeterminate": !d(C)(e) && d(D)(e),
|
|
188
|
+
disabled: e[t.disabledOptionKey],
|
|
189
|
+
"name-key": t.optionNameKey,
|
|
190
|
+
"image-key": t.optionImageKey,
|
|
191
|
+
"icon-key": t.optionIconKey,
|
|
192
|
+
"icon-type": t.optionIconType,
|
|
193
|
+
"end-icon-key": t.optionEndIconKey,
|
|
194
|
+
"end-icon-type": t.optionEndIconType,
|
|
195
|
+
"tree-main-option": d(p)(e),
|
|
196
|
+
"tree-main-option-expanded": a.value[e[t.optionUniqueIdKey]],
|
|
197
|
+
"stop-option-click-event-propagation": "",
|
|
198
|
+
onClick: q(() => S(e), ["stop"]),
|
|
199
|
+
onToggleTreeCollapse: P
|
|
200
|
+
}, null, 8, ["option", "selected-prop", "is-indeterminate", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "tree-main-option", "tree-main-option-expanded", "onClick"]),
|
|
201
|
+
d(p)(e) ? (v(), I("div", se, [
|
|
202
|
+
Z(x("div", null, [
|
|
203
|
+
(v(!0), I(N, null, _(d(y)(e), (r, k) => (v(), ee(d(z), {
|
|
204
|
+
key: `${s}-${k}`,
|
|
205
|
+
option: r,
|
|
206
|
+
"selected-prop": T(r),
|
|
207
|
+
disabled: r[t.disabledOptionKey],
|
|
208
|
+
"name-key": t.optionNameKey,
|
|
209
|
+
"image-key": t.optionImageKey,
|
|
210
|
+
"icon-key": t.optionIconKey,
|
|
211
|
+
"icon-type": t.optionIconType,
|
|
212
|
+
"end-icon-key": t.optionEndIconKey,
|
|
213
|
+
"end-icon-type": t.optionEndIconType,
|
|
214
|
+
"tree-child-shown": a.value[e[t.optionUniqueIdKey]],
|
|
215
|
+
"stop-option-click-event-propagation": "",
|
|
216
|
+
onClick: q(() => S(r), ["stop"])
|
|
217
|
+
}, null, 8, ["option", "selected-prop", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "tree-child-shown", "onClick"]))), 128))
|
|
218
|
+
], 512), [
|
|
219
|
+
[ne, a.value[e[t.optionUniqueIdKey]]]
|
|
220
|
+
])
|
|
221
|
+
])) : oe("", !0)
|
|
222
|
+
]),
|
|
223
|
+
_: 3
|
|
224
|
+
}, 8, ["is-open", "options", "selected", "display-value", "placeholder", "inline-search-placeholder", "option-name-key", "size", "test-id", "disabled", "custom-number-of-displayed-options"]),
|
|
225
|
+
x("pre", re, te(a.value), 1)
|
|
226
|
+
], 64));
|
|
224
227
|
}
|
|
225
228
|
});
|
|
226
229
|
export {
|
|
227
|
-
|
|
230
|
+
Ie as default
|
|
228
231
|
};
|
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './IncludeExcludeOption.vue_vue_type_style_index_0_scoped_91bc7787_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
|
-
.child-options[data-v-6ac5f602]{padding-left:1rem}
|