slim-select 3.4.2 → 3.4.3
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/dist/index.d.ts +1 -0
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.js +49 -48
- package/dist/react/index.umd.js +2 -2
- package/dist/slimselect.cjs.js +1 -1
- package/dist/slimselect.cjs.js.map +1 -1
- package/dist/slimselect.es.js +140 -139
- package/dist/slimselect.es.js.map +1 -1
- package/dist/slimselect.iife.js +1 -1
- package/dist/slimselect.iife.js.map +1 -1
- package/dist/slimselect.js +1 -1
- package/dist/slimselect.js.map +1 -1
- package/dist/vue/index.d.ts +1 -0
- package/dist/vue/index.js +4 -3
- package/dist/vue/index.umd.js +1 -1
- package/package.json +1 -1
- package/src/slim-select/render.test.ts +50 -0
- package/src/slim-select/render.ts +7 -1
package/dist/slimselect.es.js
CHANGED
|
@@ -71,21 +71,21 @@ function y() {
|
|
|
71
71
|
return Math.random().toString(36).substring(2, 10);
|
|
72
72
|
}
|
|
73
73
|
function x(f, e) {
|
|
74
|
-
function t(i,
|
|
75
|
-
return
|
|
74
|
+
function t(i, n) {
|
|
75
|
+
return n && i && i.classList && i.classList.contains(n) || n && i && i.dataset && i.dataset.id && i.dataset.id === e ? i : null;
|
|
76
76
|
}
|
|
77
|
-
function s(i,
|
|
78
|
-
return !i || i === document ? null : t(i,
|
|
77
|
+
function s(i, n) {
|
|
78
|
+
return !i || i === document ? null : t(i, n) ? i : s(i.parentNode, n);
|
|
79
79
|
}
|
|
80
80
|
return t(f, e) || s(f, e);
|
|
81
81
|
}
|
|
82
82
|
function S(f, e = 50, t = !1) {
|
|
83
83
|
let s;
|
|
84
84
|
return function(...i) {
|
|
85
|
-
const
|
|
86
|
-
s = null, t || f.apply(
|
|
85
|
+
const n = self, l = () => {
|
|
86
|
+
s = null, t || f.apply(n, i);
|
|
87
87
|
}, a = t && !s;
|
|
88
|
-
clearTimeout(s), s = setTimeout(
|
|
88
|
+
clearTimeout(s), s = setTimeout(l, e), a && f.apply(n, i);
|
|
89
89
|
};
|
|
90
90
|
}
|
|
91
91
|
function O(f, e) {
|
|
@@ -167,8 +167,8 @@ class k {
|
|
|
167
167
|
if (s) {
|
|
168
168
|
if (s instanceof m || "label" in s) {
|
|
169
169
|
let i = [];
|
|
170
|
-
"options" in s && s.options && s.options.forEach((
|
|
171
|
-
i.push(new u(
|
|
170
|
+
"options" in s && s.options && s.options.forEach((n) => {
|
|
171
|
+
i.push(new u(n));
|
|
172
172
|
}), i.length > 0 && t.push(new m(s));
|
|
173
173
|
}
|
|
174
174
|
(s instanceof u || "text" in s) && t.push(new u(s));
|
|
@@ -180,29 +180,29 @@ class k {
|
|
|
180
180
|
let i = [];
|
|
181
181
|
if (t) {
|
|
182
182
|
i = this.getSelectedOptions();
|
|
183
|
-
const
|
|
184
|
-
i.forEach((
|
|
183
|
+
const n = [];
|
|
184
|
+
i.forEach((l) => {
|
|
185
185
|
let a = !1;
|
|
186
186
|
for (const o of s) {
|
|
187
|
-
if (o instanceof u && o.id ===
|
|
187
|
+
if (o instanceof u && o.id === l.id) {
|
|
188
188
|
a = !0;
|
|
189
189
|
break;
|
|
190
190
|
}
|
|
191
191
|
if (o instanceof m) {
|
|
192
192
|
for (const h of o.options)
|
|
193
|
-
if (h.id ===
|
|
193
|
+
if (h.id === l.id) {
|
|
194
194
|
a = !0;
|
|
195
195
|
break;
|
|
196
196
|
}
|
|
197
197
|
}
|
|
198
198
|
}
|
|
199
|
-
a ||
|
|
200
|
-
}), this.data = [...
|
|
199
|
+
a || n.push(l);
|
|
200
|
+
}), this.data = [...n, ...s];
|
|
201
201
|
} else
|
|
202
202
|
this.data = s;
|
|
203
203
|
if (this.selectType === "single") {
|
|
204
|
-
const
|
|
205
|
-
this.setSelectedBy("id", this.getSelected(),
|
|
204
|
+
const n = t && i.length === 0;
|
|
205
|
+
this.setSelectedBy("id", this.getSelected(), n);
|
|
206
206
|
}
|
|
207
207
|
}
|
|
208
208
|
// Get data will return all the data
|
|
@@ -226,19 +226,19 @@ class k {
|
|
|
226
226
|
// but also clean selected by determining selectType
|
|
227
227
|
// When allowEmptySelection is true (e.g. after search with no prior selection), single select will not auto-select the first option
|
|
228
228
|
setSelectedBy(e, t, s = !1) {
|
|
229
|
-
let i = null,
|
|
230
|
-
const
|
|
229
|
+
let i = null, n = !1;
|
|
230
|
+
const l = [];
|
|
231
231
|
for (let o of this.data) {
|
|
232
232
|
if (o instanceof m)
|
|
233
233
|
for (let h of o.options) {
|
|
234
234
|
i || (i = h);
|
|
235
235
|
let r = h[e] || "";
|
|
236
|
-
h.selected =
|
|
236
|
+
h.selected = n ? !1 : t.includes(r), h.selected && (l.push(h), this.selectType === "single" && (n = !0));
|
|
237
237
|
}
|
|
238
|
-
o instanceof u && (i || (i = o), o.selected =
|
|
238
|
+
o instanceof u && (i || (i = o), o.selected = n ? !1 : t.includes(o[e]), o.selected && (l.push(o), this.selectType === "single" && (n = !0)));
|
|
239
239
|
}
|
|
240
|
-
this.selectType === "single" && i && !
|
|
241
|
-
const a = t.map((o) =>
|
|
240
|
+
this.selectType === "single" && i && !n && !s && (i.selected = !0, l.push(i));
|
|
241
|
+
const a = t.map((o) => l.find((h) => h[e] === o)?.id || "");
|
|
242
242
|
this.selectedOrder = a;
|
|
243
243
|
}
|
|
244
244
|
getSelected() {
|
|
@@ -280,12 +280,12 @@ class k {
|
|
|
280
280
|
const s = [];
|
|
281
281
|
return this.data.forEach((i) => {
|
|
282
282
|
if (i instanceof m) {
|
|
283
|
-
let
|
|
283
|
+
let n = [];
|
|
284
284
|
if (i.options.forEach((a) => {
|
|
285
|
-
(!e || e(a)) && (t ?
|
|
286
|
-
}),
|
|
285
|
+
(!e || e(a)) && (t ? n.push(new u(a)) : s.push(new u(a)));
|
|
286
|
+
}), n.length > 0) {
|
|
287
287
|
let a = new m(i);
|
|
288
|
-
a.options =
|
|
288
|
+
a.options = n, s.push(a);
|
|
289
289
|
}
|
|
290
290
|
}
|
|
291
291
|
i instanceof u && (!e || e(i)) && s.push(new u(i));
|
|
@@ -295,12 +295,12 @@ class k {
|
|
|
295
295
|
selectedOrderOptions(e) {
|
|
296
296
|
const t = [];
|
|
297
297
|
return this.selectedOrder.forEach((s) => {
|
|
298
|
-
const i = e.find((
|
|
298
|
+
const i = e.find((n) => n.id === s);
|
|
299
299
|
i && t.push(i);
|
|
300
300
|
}), e.forEach((s) => {
|
|
301
301
|
let i = !1;
|
|
302
|
-
t.forEach((
|
|
303
|
-
if (s.id ===
|
|
302
|
+
t.forEach((n) => {
|
|
303
|
+
if (s.id === n.id) {
|
|
304
304
|
i = !0;
|
|
305
305
|
return;
|
|
306
306
|
}
|
|
@@ -314,6 +314,7 @@ class N {
|
|
|
314
314
|
callbacks;
|
|
315
315
|
// Used to compute the range selection
|
|
316
316
|
lastSelectedOption;
|
|
317
|
+
lastRenderedOptions;
|
|
317
318
|
// Timeout tracking for cleanup
|
|
318
319
|
closeAnimationTimeout = null;
|
|
319
320
|
// Elements
|
|
@@ -322,7 +323,7 @@ class N {
|
|
|
322
323
|
// Classes
|
|
323
324
|
classes;
|
|
324
325
|
constructor(e, t, s, i) {
|
|
325
|
-
this.store = s, this.settings = e, this.classes = t, this.callbacks = i, this.lastSelectedOption = null, this.main = this.mainDiv(), this.content = this.contentDiv(), this.updateClassStyles(), this.updateAriaAttributes(), this.settings.contentPosition !== "relative" && (this.content.main.style.top = "-9999px", this.content.main.style.left = "-9999px", this.content.main.style.margin = "0", this.content.main.style.width = "auto"), this.settings.contentLocation && this.settings.contentLocation.appendChild(this.content.main);
|
|
326
|
+
this.store = s, this.settings = e, this.classes = t, this.callbacks = i, this.lastSelectedOption = null, this.lastRenderedOptions = [], this.main = this.mainDiv(), this.content = this.contentDiv(), this.updateClassStyles(), this.updateAriaAttributes(), this.settings.contentPosition !== "relative" && (this.content.main.style.top = "-9999px", this.content.main.style.left = "-9999px", this.content.main.style.margin = "0", this.content.main.style.width = "auto"), this.settings.contentLocation && this.settings.contentLocation.appendChild(this.content.main);
|
|
326
327
|
}
|
|
327
328
|
// Helper method to add classes that may contain spaces
|
|
328
329
|
// Splits by spaces and adds each class individually to avoid DOMException
|
|
@@ -355,8 +356,8 @@ class N {
|
|
|
355
356
|
this.addClasses(this.main.main, t), this.addClasses(this.content.main, t), this.addClasses(this.content.main, this.classes.contentOpen), this.content.search.input.removeAttribute("aria-hidden"), this.moveContent();
|
|
356
357
|
const s = this.store.getSelectedOptions();
|
|
357
358
|
if (s.length) {
|
|
358
|
-
const i = s[s.length - 1].id,
|
|
359
|
-
|
|
359
|
+
const i = s[s.length - 1].id, n = this.content.list.querySelector('[data-id="' + i + '"]');
|
|
360
|
+
n && this.ensureElementInView(this.content.list, n);
|
|
360
361
|
}
|
|
361
362
|
}
|
|
362
363
|
close() {
|
|
@@ -430,10 +431,10 @@ class N {
|
|
|
430
431
|
this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(this.store.getSelectedOptions());
|
|
431
432
|
}
|
|
432
433
|
};
|
|
433
|
-
const
|
|
434
|
-
|
|
435
|
-
const
|
|
436
|
-
|
|
434
|
+
const n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
435
|
+
n.setAttribute("viewBox", "0 0 100 100");
|
|
436
|
+
const l = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
437
|
+
l.setAttribute("d", this.classes.deselectPath), n.appendChild(l), s.appendChild(n), e.appendChild(s);
|
|
437
438
|
const a = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
438
439
|
this.addClasses(a, this.classes.arrow), a.setAttribute("viewBox", "0 0 100 100");
|
|
439
440
|
const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
@@ -442,8 +443,8 @@ class N {
|
|
|
442
443
|
values: t,
|
|
443
444
|
deselect: {
|
|
444
445
|
main: s,
|
|
445
|
-
svg:
|
|
446
|
-
path:
|
|
446
|
+
svg: n,
|
|
447
|
+
path: l
|
|
447
448
|
},
|
|
448
449
|
arrow: {
|
|
449
450
|
main: a,
|
|
@@ -500,8 +501,8 @@ class N {
|
|
|
500
501
|
this.settings.keepOrder && (t = this.store.selectedOrderOptions(t));
|
|
501
502
|
let s = [];
|
|
502
503
|
for (let i = 0; i < e.length; i++) {
|
|
503
|
-
const
|
|
504
|
-
|
|
504
|
+
const n = e[i], l = n.getAttribute("data-id");
|
|
505
|
+
l && (t.filter((o) => o.id === l, !1).length || s.push(n));
|
|
505
506
|
}
|
|
506
507
|
for (const i of s)
|
|
507
508
|
this.addClasses(i, this.classes.valueOut), setTimeout(() => {
|
|
@@ -509,10 +510,10 @@ class N {
|
|
|
509
510
|
}, 100);
|
|
510
511
|
e = this.main.values.childNodes;
|
|
511
512
|
for (let i = 0; i < t.length; i++) {
|
|
512
|
-
let
|
|
513
|
-
for (let
|
|
514
|
-
t[i].id === String(e[
|
|
515
|
-
|
|
513
|
+
let n = !0;
|
|
514
|
+
for (let l = 0; l < e.length; l++)
|
|
515
|
+
t[i].id === String(e[l].dataset.id) && (n = !1);
|
|
516
|
+
n && (this.settings.keepOrder ? this.main.values.appendChild(this.multipleValue(t[i])) : e.length === 0 ? this.main.values.appendChild(this.multipleValue(t[i])) : i === 0 ? this.main.values.insertBefore(this.multipleValue(t[i]), e[i]) : e[i - 1].insertAdjacentElement("afterend", this.multipleValue(t[i])));
|
|
516
517
|
}
|
|
517
518
|
}
|
|
518
519
|
multipleValue(e) {
|
|
@@ -537,10 +538,10 @@ class N {
|
|
|
537
538
|
this.callbacks.setSelected(c, !1), this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(r), this.updateDeselectAll();
|
|
538
539
|
}
|
|
539
540
|
};
|
|
540
|
-
const
|
|
541
|
-
|
|
542
|
-
const
|
|
543
|
-
|
|
541
|
+
const n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
542
|
+
n.setAttribute("viewBox", "0 0 100 100");
|
|
543
|
+
const l = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
544
|
+
l.setAttribute("d", this.classes.optionDelete), n.appendChild(l), i.appendChild(n), t.appendChild(i), i.onkeydown = (a) => {
|
|
544
545
|
a.key === "Enter" && i.click();
|
|
545
546
|
};
|
|
546
547
|
}
|
|
@@ -579,23 +580,23 @@ class N {
|
|
|
579
580
|
main: e,
|
|
580
581
|
input: t
|
|
581
582
|
};
|
|
582
|
-
if (this.settings.showSearch || (this.addClasses(e, this.classes.hide), t.readOnly = !0), t.type = "search", t.placeholder = this.settings.searchPlaceholder, t.tabIndex = -1, t.setAttribute("aria-label", this.settings.searchPlaceholder), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("autocapitalize", "off"), t.setAttribute("autocomplete", "off"), t.setAttribute("autocorrect", "off"), t.setAttribute("aria-hidden", "true"), t.oninput = S((
|
|
583
|
-
this.callbacks.search(
|
|
584
|
-
}, 100), t.onkeydown = (
|
|
585
|
-
switch (
|
|
583
|
+
if (this.settings.showSearch || (this.addClasses(e, this.classes.hide), t.readOnly = !0), t.type = "search", t.placeholder = this.settings.searchPlaceholder, t.tabIndex = -1, t.setAttribute("aria-label", this.settings.searchPlaceholder), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("autocapitalize", "off"), t.setAttribute("autocomplete", "off"), t.setAttribute("autocorrect", "off"), t.setAttribute("aria-hidden", "true"), t.oninput = S((n) => {
|
|
584
|
+
this.callbacks.search(n.target.value);
|
|
585
|
+
}, 100), t.onkeydown = (n) => {
|
|
586
|
+
switch (n.key) {
|
|
586
587
|
case "ArrowUp":
|
|
587
588
|
case "ArrowDown":
|
|
588
|
-
return
|
|
589
|
+
return n.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
|
|
589
590
|
case "Tab":
|
|
590
591
|
return this.callbacks.close(), !0;
|
|
591
592
|
// Continue doing normal tabbing
|
|
592
593
|
case "Escape":
|
|
593
594
|
return this.callbacks.close(), !1;
|
|
594
595
|
case " ":
|
|
595
|
-
const
|
|
596
|
+
const l = this.content.list.querySelector(
|
|
596
597
|
"." + this.classes.getFirst("highlighted")
|
|
597
598
|
);
|
|
598
|
-
return
|
|
599
|
+
return l ? (l.click(), !1) : !0;
|
|
599
600
|
case "Enter":
|
|
600
601
|
const a = this.content.list.querySelector(
|
|
601
602
|
"." + this.classes.getFirst("highlighted")
|
|
@@ -605,10 +606,10 @@ class N {
|
|
|
605
606
|
return !0;
|
|
606
607
|
}, e.appendChild(t), this.callbacks.addable) {
|
|
607
608
|
this.addClasses(s, this.classes.addable);
|
|
608
|
-
const
|
|
609
|
-
|
|
610
|
-
const
|
|
611
|
-
|
|
609
|
+
const n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
610
|
+
n.setAttribute("viewBox", "0 0 100 100");
|
|
611
|
+
const l = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
612
|
+
l.setAttribute("d", this.classes.addablePath), n.appendChild(l), s.appendChild(n), s.onclick = (a) => {
|
|
612
613
|
if (a.preventDefault(), a.stopPropagation(), !this.callbacks.addable)
|
|
613
614
|
return;
|
|
614
615
|
const o = this.content.search.input.value.trim();
|
|
@@ -638,8 +639,8 @@ class N {
|
|
|
638
639
|
}) : r instanceof Error ? this.renderError(r.message) : h(r));
|
|
639
640
|
}, e.appendChild(s), i.addable = {
|
|
640
641
|
main: s,
|
|
641
|
-
svg:
|
|
642
|
-
path:
|
|
642
|
+
svg: n,
|
|
643
|
+
path: l
|
|
643
644
|
};
|
|
644
645
|
}
|
|
645
646
|
return i;
|
|
@@ -661,25 +662,25 @@ class N {
|
|
|
661
662
|
return;
|
|
662
663
|
}
|
|
663
664
|
let s = !1;
|
|
664
|
-
for (const
|
|
665
|
-
|
|
665
|
+
for (const n of t)
|
|
666
|
+
n.classList.contains(this.classes.getFirst("highlighted")) && (s = !0);
|
|
666
667
|
if (!s) {
|
|
667
|
-
for (const
|
|
668
|
-
if (
|
|
669
|
-
this.addClasses(
|
|
668
|
+
for (const n of t)
|
|
669
|
+
if (n.classList.contains(this.classes.getFirst("selected"))) {
|
|
670
|
+
this.addClasses(n, this.classes.highlighted);
|
|
670
671
|
break;
|
|
671
672
|
}
|
|
672
673
|
}
|
|
673
|
-
for (let
|
|
674
|
-
if (t[
|
|
675
|
-
const
|
|
676
|
-
this.removeClasses(
|
|
677
|
-
const a =
|
|
674
|
+
for (let n = 0; n < t.length; n++)
|
|
675
|
+
if (t[n].classList.contains(this.classes.getFirst("highlighted"))) {
|
|
676
|
+
const l = t[n];
|
|
677
|
+
this.removeClasses(l, this.classes.highlighted);
|
|
678
|
+
const a = l.parentElement;
|
|
678
679
|
if (a && a.classList.contains(this.classes.getFirst("mainOpen"))) {
|
|
679
680
|
const r = a.querySelector("." + this.classes.getFirst("optgroupLabel"));
|
|
680
681
|
r && r.click();
|
|
681
682
|
}
|
|
682
|
-
let o = t[e === "down" ?
|
|
683
|
+
let o = t[e === "down" ? n + 1 < t.length ? n + 1 : 0 : n - 1 >= 0 ? n - 1 : t.length - 1];
|
|
683
684
|
this.addClasses(o, this.classes.highlighted), this.ensureElementInView(this.content.list, o), o.id && this.main.main.setAttribute("aria-activedescendant", o.id);
|
|
684
685
|
const h = o.parentElement;
|
|
685
686
|
if (h && h.classList.contains(this.classes.getFirst("close"))) {
|
|
@@ -712,7 +713,7 @@ class N {
|
|
|
712
713
|
}
|
|
713
714
|
// Take in data and add options to
|
|
714
715
|
renderOptions(e) {
|
|
715
|
-
if (this.content.list.innerHTML = "", e.length === 0) {
|
|
716
|
+
if (this.lastRenderedOptions = e.map((s) => s instanceof u ? [s] : s.options.map((i) => new u(i))).flat(), this.content.list.innerHTML = "", e.length === 0) {
|
|
716
717
|
const s = document.createElement("div");
|
|
717
718
|
this.addClasses(s, this.classes.search), this.callbacks.addable ? s.innerHTML = this.settings.addableText.replace("{value}", this.content.search.input.value) : s.innerHTML = this.settings.searchText, this.content.list.appendChild(s);
|
|
718
719
|
return;
|
|
@@ -731,12 +732,12 @@ class N {
|
|
|
731
732
|
if (s instanceof m) {
|
|
732
733
|
const i = document.createElement("div");
|
|
733
734
|
this.addClasses(i, this.classes.optgroup);
|
|
734
|
-
const l = document.createElement("div");
|
|
735
|
-
this.addClasses(l, this.classes.optgroupLabel), i.appendChild(l);
|
|
736
735
|
const n = document.createElement("div");
|
|
737
|
-
this.addClasses(n, this.classes.
|
|
736
|
+
this.addClasses(n, this.classes.optgroupLabel), i.appendChild(n);
|
|
737
|
+
const l = document.createElement("div");
|
|
738
|
+
this.addClasses(l, this.classes.optgroupLabelText), l.textContent = s.label, n.appendChild(l);
|
|
738
739
|
const a = document.createElement("div");
|
|
739
|
-
if (this.addClasses(a, this.classes.optgroupActions),
|
|
740
|
+
if (this.addClasses(a, this.classes.optgroupActions), n.appendChild(a), this.settings.isMultiple && s.selectAll) {
|
|
740
741
|
const o = document.createElement("div");
|
|
741
742
|
this.addClasses(o, this.classes.optgroupSelectAll);
|
|
742
743
|
let h = !0;
|
|
@@ -781,11 +782,11 @@ class N {
|
|
|
781
782
|
const h = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
782
783
|
h.setAttribute("viewBox", "0 0 100 100"), this.addClasses(h, this.classes.arrow), o.appendChild(h);
|
|
783
784
|
const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
784
|
-
h.appendChild(r), s.options.some((c) => c.selected) || this.content.search.input.value.trim() !== "" ? (this.addClasses(o, this.classes.mainOpen), r.setAttribute("d", this.classes.arrowOpen)) : s.closable === "open" ? (this.addClasses(i, this.classes.mainOpen), r.setAttribute("d", this.classes.arrowOpen)) : s.closable === "close" && (this.addClasses(i, this.classes.close), r.setAttribute("d", this.classes.arrowClose)),
|
|
785
|
+
h.appendChild(r), s.options.some((c) => c.selected) || this.content.search.input.value.trim() !== "" ? (this.addClasses(o, this.classes.mainOpen), r.setAttribute("d", this.classes.arrowOpen)) : s.closable === "open" ? (this.addClasses(i, this.classes.mainOpen), r.setAttribute("d", this.classes.arrowOpen)) : s.closable === "close" && (this.addClasses(i, this.classes.close), r.setAttribute("d", this.classes.arrowClose)), n.addEventListener("click", (c) => {
|
|
785
786
|
c.preventDefault(), c.stopPropagation(), i.classList.contains(this.classes.getFirst("close")) ? (this.removeClasses(i, this.classes.close), this.addClasses(i, this.classes.mainOpen), r.setAttribute("d", this.classes.arrowOpen)) : (this.removeClasses(i, this.classes.mainOpen), this.addClasses(i, this.classes.close), r.setAttribute("d", this.classes.arrowClose));
|
|
786
787
|
}), a.appendChild(o);
|
|
787
788
|
}
|
|
788
|
-
i.appendChild(
|
|
789
|
+
i.appendChild(n);
|
|
789
790
|
for (const o of s.options)
|
|
790
791
|
i.appendChild(this.option(new u(o))), t.appendChild(i);
|
|
791
792
|
}
|
|
@@ -808,25 +809,25 @@ class N {
|
|
|
808
809
|
this.classes.searchHighlighter
|
|
809
810
|
) : e.html !== "" ? t.innerHTML = e.html : t.textContent = e.text, this.settings.showOptionTooltips && t.textContent && t.setAttribute("title", t.textContent), e.display || this.addClasses(t, this.classes.hide), e.disabled && this.addClasses(t, this.classes.disabled), e.selected && this.settings.hideSelected && this.addClasses(t, this.classes.hide), e.selected ? (this.addClasses(t, this.classes.selected), t.setAttribute("aria-selected", "true"), this.main.main.setAttribute("aria-activedescendant", t.id)) : (this.removeClasses(t, this.classes.selected), t.setAttribute("aria-selected", "false")), t.addEventListener("click", (s) => {
|
|
810
811
|
s.preventDefault(), s.stopPropagation();
|
|
811
|
-
const i = this.store.getSelected(),
|
|
812
|
+
const i = this.store.getSelected(), n = s.currentTarget, l = String(n.dataset.id), a = s.ctrlKey || s.metaKey;
|
|
812
813
|
if (e.disabled || !this.settings.isMultiple && e.selected && !this.settings.allowDeselect || e.selected && e.mandatory || this.settings.isMultiple && this.settings.maxSelected <= i.length && !e.selected || this.settings.isMultiple && this.settings.minSelected >= i.length && e.selected && !a)
|
|
813
814
|
return;
|
|
814
815
|
let o = !1;
|
|
815
816
|
const h = this.store.getSelectedOptions();
|
|
816
817
|
let r = [];
|
|
817
818
|
if (this.settings.isMultiple) {
|
|
818
|
-
const c = h.some((d) => d.id ===
|
|
819
|
+
const c = h.some((d) => d.id === l);
|
|
819
820
|
if (s.shiftKey && this.lastSelectedOption) {
|
|
820
|
-
const d = this.
|
|
821
|
+
const d = this.lastRenderedOptions, g = d.findIndex((C) => C.id === this.lastSelectedOption.id), v = d.findIndex((C) => C.id === e.id);
|
|
821
822
|
if (g >= 0 && v >= 0) {
|
|
822
823
|
const C = Math.min(g, v), w = Math.max(g, v), E = d.slice(C, w + 1).filter((A) => !h.find((L) => L.id === A.id));
|
|
823
824
|
h.length + E.length <= this.settings.maxSelected ? r = h.concat(E) : r = h;
|
|
824
825
|
} else
|
|
825
826
|
r = h;
|
|
826
|
-
} else a ? (c ? r = h.filter((d) => d.id !==
|
|
827
|
+
} else a ? (c ? r = h.filter((d) => d.id !== l) : r = h.concat(e), this.lastSelectedOption = e) : (c ? r = h.filter((d) => d.id !== l) : r = h.concat(e), this.lastSelectedOption = e);
|
|
827
828
|
}
|
|
828
829
|
if (this.settings.isMultiple || (e.selected ? r = [] : r = [e]), this.callbacks.beforeChange || (o = !0), this.callbacks.beforeChange && (this.callbacks.beforeChange(r, h) === !1 ? o = !1 : o = !0), o) {
|
|
829
|
-
this.store.getOptionByID(
|
|
830
|
+
this.store.getOptionByID(l) || this.callbacks.addOption(e), this.callbacks.setSelected(
|
|
830
831
|
r.map((d) => d.id),
|
|
831
832
|
!1
|
|
832
833
|
);
|
|
@@ -842,11 +843,11 @@ class N {
|
|
|
842
843
|
const i = t.trim();
|
|
843
844
|
if (i === "")
|
|
844
845
|
return e;
|
|
845
|
-
const
|
|
846
|
-
|
|
846
|
+
const n = i.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), l = document.createElement("div");
|
|
847
|
+
l.innerHTML = e;
|
|
847
848
|
const a = (o) => {
|
|
848
849
|
if (o.nodeType === Node.TEXT_NODE) {
|
|
849
|
-
const h = o.textContent || "", r = new RegExp("(" +
|
|
850
|
+
const h = o.textContent || "", r = new RegExp("(" + n + ")", "i");
|
|
850
851
|
if (r.test(h)) {
|
|
851
852
|
const c = document.createElement("span");
|
|
852
853
|
h.split(r).forEach((d, g) => {
|
|
@@ -858,13 +859,13 @@ class N {
|
|
|
858
859
|
}
|
|
859
860
|
} else o.nodeType === Node.ELEMENT_NODE && Array.from(o.childNodes).forEach((h) => a(h));
|
|
860
861
|
};
|
|
861
|
-
return Array.from(
|
|
862
|
+
return Array.from(l.childNodes).forEach((o) => a(o)), l.innerHTML;
|
|
862
863
|
}
|
|
863
864
|
setContentDirection(e) {
|
|
864
865
|
const t = e === "above", s = t ? this.classes.dirAbove : this.classes.dirBelow, i = t ? this.classes.dirBelow : this.classes.dirAbove;
|
|
865
866
|
if (this.removeClasses(this.main.main, i), this.addClasses(this.main.main, s), this.removeClasses(this.content.main, i), this.addClasses(this.content.main, s), t) {
|
|
866
|
-
const
|
|
867
|
-
this.content.main.style.margin = "-" + (
|
|
867
|
+
const n = this.main.main.offsetHeight, l = this.content.main.offsetHeight;
|
|
868
|
+
this.content.main.style.margin = "-" + (n + l - 1) + "px 0px 0px 0px";
|
|
868
869
|
} else
|
|
869
870
|
this.content.main.style.margin = "-1px 0px 0px 0px";
|
|
870
871
|
}
|
|
@@ -876,15 +877,15 @@ class N {
|
|
|
876
877
|
this.settings.contentPosition === "fixed" ? (t = e.top + e.height, s = e.left) : (t = e.top + window.scrollY + e.height, s = e.left + window.scrollX), this.content.main.style.top = t + "px", this.content.main.style.left = s + "px";
|
|
877
878
|
const i = this.settings.contentWidth;
|
|
878
879
|
this.content.main.style.width = "", this.content.main.style.minWidth = "", this.content.main.style.maxWidth = "", i ? i.startsWith(">") ? this.content.main.style.minWidth = i.slice(1) : i.startsWith("<") ? this.content.main.style.maxWidth = i.slice(1) : this.content.main.style.width = i : this.content.main.style.width = e.width + "px";
|
|
879
|
-
const
|
|
880
|
+
const n = 20, l = window.innerWidth - n, a = () => {
|
|
880
881
|
const h = this.content.main.getBoundingClientRect().right;
|
|
881
|
-
if (h <=
|
|
882
|
-
const r = h -
|
|
882
|
+
if (h <= l) return;
|
|
883
|
+
const r = h - l, c = parseFloat(this.content.main.style.left) || 0;
|
|
883
884
|
if (this.settings.contentPosition === "fixed") {
|
|
884
|
-
const p = Math.max(
|
|
885
|
+
const p = Math.max(n, c - r);
|
|
885
886
|
this.content.main.style.left = p + "px";
|
|
886
887
|
} else {
|
|
887
|
-
const p = Math.max(window.scrollX +
|
|
888
|
+
const p = Math.max(window.scrollX + n, c - r);
|
|
888
889
|
this.content.main.style.left = p + "px";
|
|
889
890
|
}
|
|
890
891
|
};
|
|
@@ -899,8 +900,8 @@ class N {
|
|
|
899
900
|
this.setContentDirection("below"), this.setContentPosition();
|
|
900
901
|
}
|
|
901
902
|
ensureElementInView(e, t) {
|
|
902
|
-
const s = e.scrollTop + e.offsetTop, i = s + e.clientHeight,
|
|
903
|
-
|
|
903
|
+
const s = e.scrollTop + e.offsetTop, i = s + e.clientHeight, n = t.offsetTop, l = n + t.clientHeight;
|
|
904
|
+
n < s ? e.scrollTop -= s - n : l > i && (e.scrollTop += l - i);
|
|
904
905
|
}
|
|
905
906
|
putContent() {
|
|
906
907
|
const e = this.main.main.offsetHeight, t = this.main.main.getBoundingClientRect(), s = this.content.main.offsetHeight;
|
|
@@ -910,8 +911,8 @@ class N {
|
|
|
910
911
|
updateDeselectAll() {
|
|
911
912
|
if (!this.store || !this.settings)
|
|
912
913
|
return;
|
|
913
|
-
const e = this.store.getSelectedOptions(), t = e && e.length > 0, s = this.settings.isMultiple, i = this.settings.allowDeselect,
|
|
914
|
-
i && !(s && !t) ? this.removeClasses(
|
|
914
|
+
const e = this.store.getSelectedOptions(), t = e && e.length > 0, s = this.settings.isMultiple, i = this.settings.allowDeselect, n = this.main.deselect.main, l = this.classes.hide;
|
|
915
|
+
i && !(s && !t) ? this.removeClasses(n, l) : this.addClasses(n, l);
|
|
915
916
|
}
|
|
916
917
|
}
|
|
917
918
|
class M {
|
|
@@ -973,30 +974,30 @@ class M {
|
|
|
973
974
|
observeCall(e) {
|
|
974
975
|
if (!this.listen)
|
|
975
976
|
return;
|
|
976
|
-
let t = !1, s = !1, i = !1,
|
|
977
|
-
for (const
|
|
978
|
-
if (
|
|
979
|
-
for (const a of Array.from(
|
|
977
|
+
let t = !1, s = !1, i = !1, n = !1;
|
|
978
|
+
for (const l of e) {
|
|
979
|
+
if (l.target === this.select && (l.attributeName === "disabled" && (s = !0), l.attributeName === "class" && (t = !0), l.type === "childList")) {
|
|
980
|
+
for (const a of Array.from(l.addedNodes))
|
|
980
981
|
if (a.nodeName === "OPTION" && a.value === this.select.value) {
|
|
981
|
-
|
|
982
|
+
n = !0;
|
|
982
983
|
break;
|
|
983
984
|
}
|
|
984
985
|
i = !0;
|
|
985
986
|
}
|
|
986
|
-
(
|
|
987
|
+
(l.target.nodeName === "OPTGROUP" || l.target.nodeName === "OPTION") && (i = !0);
|
|
987
988
|
}
|
|
988
989
|
if (t && this.onClassChange && this.onClassChange(this.select.className.split(" ")), s && this.onDisabledChange && (this.changeListen(!1), this.onDisabledChange(this.select.disabled), this.changeListen(!0)), i && this.onOptionsChange) {
|
|
989
990
|
if (this.isUpdating) {
|
|
990
991
|
if (this.select.options.length > 0) {
|
|
991
|
-
const
|
|
992
|
-
|
|
992
|
+
const l = this.getData();
|
|
993
|
+
l.length > 0 && (this.pendingOptionsChange = l);
|
|
993
994
|
}
|
|
994
|
-
|
|
995
|
+
n && this.select.dispatchEvent(new Event("change"));
|
|
995
996
|
return;
|
|
996
997
|
}
|
|
997
998
|
this.changeListen(!1), this.onOptionsChange(this.getData()), this.changeListen(!0);
|
|
998
999
|
}
|
|
999
|
-
|
|
1000
|
+
n && this.select.dispatchEvent(new Event("change"));
|
|
1000
1001
|
}
|
|
1001
1002
|
// From the select element pull optgroup and options into data
|
|
1002
1003
|
getData() {
|
|
@@ -1044,10 +1045,10 @@ class M {
|
|
|
1044
1045
|
for (const s of t) {
|
|
1045
1046
|
if (s.nodeName === "OPTGROUP") {
|
|
1046
1047
|
const i = s.childNodes;
|
|
1047
|
-
for (const
|
|
1048
|
-
if (
|
|
1049
|
-
const
|
|
1050
|
-
|
|
1048
|
+
for (const n of i)
|
|
1049
|
+
if (n.nodeName === "OPTION") {
|
|
1050
|
+
const l = n;
|
|
1051
|
+
l.selected && e.push(this.getDataFromOption(l));
|
|
1051
1052
|
}
|
|
1052
1053
|
}
|
|
1053
1054
|
if (s.nodeName === "OPTION") {
|
|
@@ -1065,10 +1066,10 @@ class M {
|
|
|
1065
1066
|
const t = this.select.childNodes;
|
|
1066
1067
|
for (const s of t) {
|
|
1067
1068
|
if (s.nodeName === "OPTGROUP") {
|
|
1068
|
-
const
|
|
1069
|
-
for (const
|
|
1070
|
-
if (
|
|
1071
|
-
const a =
|
|
1069
|
+
const n = s.childNodes;
|
|
1070
|
+
for (const l of n)
|
|
1071
|
+
if (l.nodeName === "OPTION") {
|
|
1072
|
+
const a = l;
|
|
1072
1073
|
a.selected = e.includes(a.id);
|
|
1073
1074
|
}
|
|
1074
1075
|
}
|
|
@@ -1088,10 +1089,10 @@ class M {
|
|
|
1088
1089
|
const t = this.select.childNodes;
|
|
1089
1090
|
for (const s of t) {
|
|
1090
1091
|
if (s.nodeName === "OPTGROUP") {
|
|
1091
|
-
const
|
|
1092
|
-
for (const
|
|
1093
|
-
if (
|
|
1094
|
-
const a =
|
|
1092
|
+
const n = s.childNodes;
|
|
1093
|
+
for (const l of n)
|
|
1094
|
+
if (l.nodeName === "OPTION") {
|
|
1095
|
+
const a = l;
|
|
1095
1096
|
a.selected = e.includes(a.value);
|
|
1096
1097
|
}
|
|
1097
1098
|
}
|
|
@@ -1136,7 +1137,7 @@ class M {
|
|
|
1136
1137
|
// Find and handle labels associated with this select
|
|
1137
1138
|
setupLabelHandlers() {
|
|
1138
1139
|
const e = [], t = this.select.id;
|
|
1139
|
-
t && document.querySelectorAll(`label[for="${t}"]`).forEach((
|
|
1140
|
+
t && document.querySelectorAll(`label[for="${t}"]`).forEach((l) => e.push(l));
|
|
1140
1141
|
let s = this.select.parentElement;
|
|
1141
1142
|
for (; s && s !== document.body; ) {
|
|
1142
1143
|
if (s.tagName === "LABEL") {
|
|
@@ -1145,20 +1146,20 @@ class M {
|
|
|
1145
1146
|
}
|
|
1146
1147
|
s = s.parentElement;
|
|
1147
1148
|
}
|
|
1148
|
-
Array.from(new Set(e)).forEach((
|
|
1149
|
-
if (
|
|
1149
|
+
Array.from(new Set(e)).forEach((n) => {
|
|
1150
|
+
if (n.__slimSelectLabelHandler)
|
|
1150
1151
|
return;
|
|
1151
|
-
const
|
|
1152
|
+
const l = (a) => {
|
|
1152
1153
|
const o = a.target, h = x(o, this.select.dataset.id);
|
|
1153
1154
|
a.preventDefault(), !h && this.onLabelClick && this.onLabelClick();
|
|
1154
1155
|
};
|
|
1155
|
-
|
|
1156
|
+
n.__slimSelectLabelHandler = l, n.addEventListener("click", l, { capture: !0, passive: !1 });
|
|
1156
1157
|
});
|
|
1157
1158
|
}
|
|
1158
1159
|
// Remove label handlers
|
|
1159
1160
|
removeLabelHandlers() {
|
|
1160
1161
|
const e = [], t = this.select.id;
|
|
1161
|
-
t && document.querySelectorAll(`label[for="${t}"]`).forEach((
|
|
1162
|
+
t && document.querySelectorAll(`label[for="${t}"]`).forEach((l) => e.push(l));
|
|
1162
1163
|
let s = this.select.parentElement;
|
|
1163
1164
|
for (; s && s !== document.body; ) {
|
|
1164
1165
|
if (s.tagName === "LABEL") {
|
|
@@ -1167,9 +1168,9 @@ class M {
|
|
|
1167
1168
|
}
|
|
1168
1169
|
s = s.parentElement;
|
|
1169
1170
|
}
|
|
1170
|
-
Array.from(new Set(e)).forEach((
|
|
1171
|
-
const
|
|
1172
|
-
|
|
1171
|
+
Array.from(new Set(e)).forEach((n) => {
|
|
1172
|
+
const l = n.__slimSelectLabelHandler;
|
|
1173
|
+
l && (n.removeEventListener("click", l, { capture: !0 }), delete n.__slimSelectLabelHandler);
|
|
1173
1174
|
});
|
|
1174
1175
|
}
|
|
1175
1176
|
destroy() {
|
|
@@ -1279,8 +1280,8 @@ class F {
|
|
|
1279
1280
|
afterChange: this.events.afterChange
|
|
1280
1281
|
};
|
|
1281
1282
|
this.render = new N(this.settings, this.cssClasses, this.store, i), this.render.renderValues(), this.render.renderOptions(this.store.getData());
|
|
1282
|
-
const
|
|
1283
|
-
|
|
1283
|
+
const n = this.selectEl.getAttribute("aria-label"), l = this.selectEl.getAttribute("aria-labelledby");
|
|
1284
|
+
n ? this.render.main.main.setAttribute("aria-label", n) : l && this.render.main.main.setAttribute("aria-labelledby", l), this.selectEl.parentNode && this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling), window.addEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.addEventListener("scroll", this.windowScroll, !1), document.addEventListener("visibilitychange", this.windowVisibilityChange), this.settings.disabled && this.disable(), this.settings.alwaysOpen && this.open(), this.select.setupLabelHandlers(), this.selectEl.slim = this;
|
|
1284
1285
|
}
|
|
1285
1286
|
// Set to enabled and remove disabled classes
|
|
1286
1287
|
enable() {
|
|
@@ -1311,18 +1312,18 @@ class F {
|
|
|
1311
1312
|
setSelected(e, t = !0) {
|
|
1312
1313
|
const s = this.store.getSelected(), i = this.store.getDataOptions();
|
|
1313
1314
|
e = Array.isArray(e) ? e : [e];
|
|
1314
|
-
const
|
|
1315
|
+
const n = [];
|
|
1315
1316
|
for (const a of e) {
|
|
1316
1317
|
if (i.find((o) => o.id == a)) {
|
|
1317
|
-
|
|
1318
|
+
n.push(a);
|
|
1318
1319
|
continue;
|
|
1319
1320
|
}
|
|
1320
1321
|
for (const o of i.filter((h) => h.value == a))
|
|
1321
|
-
|
|
1322
|
+
n.push(o.id);
|
|
1322
1323
|
}
|
|
1323
|
-
this.store.setSelectedBy("id",
|
|
1324
|
-
const
|
|
1325
|
-
this.select.updateOptions(
|
|
1324
|
+
this.store.setSelectedBy("id", n);
|
|
1325
|
+
const l = this.store.getData();
|
|
1326
|
+
this.select.updateOptions(l), this.render.renderValues(), this.render.content.search.input.value !== "" ? this.search(this.render.content.search.input.value) : this.render.renderOptions(l), t && this.events.afterChange && !O(s, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
|
|
1326
1327
|
}
|
|
1327
1328
|
addOption(e) {
|
|
1328
1329
|
const t = this.store.getSelected();
|