slim-select 2.5.1 → 2.7.0
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/render.d.ts +1 -1
- package/dist/settings.d.ts +1 -0
- package/dist/slimselect.cjs.js +52 -10
- package/dist/slimselect.css +1 -1
- package/dist/slimselect.css.map +1 -1
- package/dist/slimselect.es.js +52 -10
- package/dist/slimselect.global.js +52 -10
- package/dist/slimselect.js +52 -10
- package/dist/slimselect.min.js +1 -1
- package/dist/slimselect.umd.js +52 -10
- package/dist/slimselect.umd.min.js +1 -1
- package/dist/store.d.ts +4 -1
- package/index.html +4 -0
- package/package.json +51 -26
- package/src/react/.eslintignore +2 -0
- package/src/react/.eslintrc.cjs +24 -0
- package/src/react/index.html +14 -0
- package/src/react/jestconfig.json +11 -0
- package/src/react/package.json +32 -0
- package/src/react/src/frameworkpage.tsx +133 -0
- package/src/react/src/index.ts +3 -0
- package/src/react/src/slimselect.tsx +148 -0
- package/src/react/tests/slimselect.test.tsx +52 -0
- package/src/react/tsconfig.json +37 -0
- package/src/react/tsconfig.node.json +10 -0
- package/src/react/vite.config.ts +55 -0
- package/src/slim-select/index.test.ts +2 -2
- package/src/slim-select/render.ts +49 -10
- package/src/slim-select/select.ts +4 -2
- package/src/slim-select/settings.ts +2 -0
- package/src/slim-select/slimselect.scss +3 -2
- package/src/slim-select/store.ts +23 -3
- package/src/vue/dist/slim-select/helpers.d.ts +5 -5
- package/src/vue/dist/slim-select/index.d.ts +46 -46
- package/src/vue/dist/slim-select/render.d.ts +120 -120
- package/src/vue/dist/slim-select/select.d.ts +28 -28
- package/src/vue/dist/slim-select/settings.d.ts +33 -32
- package/src/vue/dist/slim-select/store.d.ts +80 -77
- package/src/vue/dist/slimselectvue.es.js +1940 -1903
- package/src/vue/dist/slimselectvue.global.js +1940 -1903
- package/src/vue/dist/slimselectvue.ssr.js +1940 -1903
- package/src/vue/dist/vue/hello.d.ts +2 -2
- package/src/vue/dist/vue/slimselect.vue.d.ts +324 -317
- package/src/vue/package.json +1 -1
- package/src/vue/slimselect.vue +2 -7
- package/tsconfig.json +1 -1
package/dist/render.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export interface Callbacks {
|
|
|
4
4
|
open: () => void;
|
|
5
5
|
close: () => void;
|
|
6
6
|
addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null;
|
|
7
|
-
setSelected: (value: string[], runAfterChange: boolean) => void;
|
|
7
|
+
setSelected: (value: string | string[], runAfterChange: boolean) => void;
|
|
8
8
|
addOption: (option: Option) => void;
|
|
9
9
|
search: (search: string) => void;
|
|
10
10
|
beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void;
|
package/dist/settings.d.ts
CHANGED
package/dist/slimselect.cjs.js
CHANGED
|
@@ -70,6 +70,7 @@ class Settings {
|
|
|
70
70
|
this.disabled = settings.disabled !== undefined ? settings.disabled : false;
|
|
71
71
|
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
|
|
72
72
|
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
|
|
73
|
+
this.ariaLabel = settings.ariaLabel || 'Combobox';
|
|
73
74
|
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
|
74
75
|
this.searchText = settings.searchText || 'No Results';
|
|
75
76
|
this.searchingText = settings.searchingText || 'Searching...';
|
|
@@ -95,6 +96,7 @@ class Optgroup {
|
|
|
95
96
|
this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
|
|
96
97
|
this.label = optgroup.label || '';
|
|
97
98
|
this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
|
|
99
|
+
this.selectAllText = optgroup.selectAllText || 'Select All';
|
|
98
100
|
this.closable = optgroup.closable || 'off';
|
|
99
101
|
this.options = [];
|
|
100
102
|
if (optgroup.options) {
|
|
@@ -256,6 +258,24 @@ class Store {
|
|
|
256
258
|
}, false);
|
|
257
259
|
return options.length ? options[0] : null;
|
|
258
260
|
}
|
|
261
|
+
getSelectType() {
|
|
262
|
+
return this.selectType;
|
|
263
|
+
}
|
|
264
|
+
getFirstOption() {
|
|
265
|
+
let option = null;
|
|
266
|
+
for (let dataObj of this.data) {
|
|
267
|
+
if (dataObj instanceof Optgroup) {
|
|
268
|
+
option = dataObj.options[0];
|
|
269
|
+
}
|
|
270
|
+
else if (dataObj instanceof Option) {
|
|
271
|
+
option = dataObj;
|
|
272
|
+
}
|
|
273
|
+
if (option) {
|
|
274
|
+
break;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
return option;
|
|
278
|
+
}
|
|
259
279
|
search(search, searchFilter) {
|
|
260
280
|
search = search.trim();
|
|
261
281
|
if (search === '') {
|
|
@@ -294,9 +314,6 @@ class Store {
|
|
|
294
314
|
});
|
|
295
315
|
return dataSearch;
|
|
296
316
|
}
|
|
297
|
-
getSelectType() {
|
|
298
|
-
return this.selectType;
|
|
299
|
-
}
|
|
300
317
|
}
|
|
301
318
|
|
|
302
319
|
class Render {
|
|
@@ -416,7 +433,7 @@ class Render {
|
|
|
416
433
|
var _a;
|
|
417
434
|
const main = document.createElement('div');
|
|
418
435
|
main.dataset.id = this.settings.id;
|
|
419
|
-
main.
|
|
436
|
+
main.setAttribute('aria-label', this.settings.ariaLabel);
|
|
420
437
|
main.tabIndex = 0;
|
|
421
438
|
main.onkeydown = (e) => {
|
|
422
439
|
switch (e.key) {
|
|
@@ -440,6 +457,7 @@ class Render {
|
|
|
440
457
|
this.callbacks.close();
|
|
441
458
|
return false;
|
|
442
459
|
}
|
|
460
|
+
return false;
|
|
443
461
|
};
|
|
444
462
|
main.onclick = (e) => {
|
|
445
463
|
if (this.settings.disabled) {
|
|
@@ -476,13 +494,15 @@ class Render {
|
|
|
476
494
|
this.updateDeselectAll();
|
|
477
495
|
}
|
|
478
496
|
else {
|
|
479
|
-
this.
|
|
497
|
+
const firstOption = this.store.getFirstOption();
|
|
498
|
+
const value = firstOption ? firstOption.value : '';
|
|
499
|
+
this.callbacks.setSelected(value, false);
|
|
480
500
|
}
|
|
481
501
|
if (this.settings.closeOnSelect) {
|
|
482
502
|
this.callbacks.close();
|
|
483
503
|
}
|
|
484
504
|
if (this.callbacks.afterChange) {
|
|
485
|
-
this.callbacks.afterChange(
|
|
505
|
+
this.callbacks.afterChange(this.store.getSelectedOptions());
|
|
486
506
|
}
|
|
487
507
|
}
|
|
488
508
|
};
|
|
@@ -705,7 +725,6 @@ class Render {
|
|
|
705
725
|
contentDiv() {
|
|
706
726
|
const main = document.createElement('div');
|
|
707
727
|
main.dataset.id = this.settings.id;
|
|
708
|
-
main.id = this.settings.id;
|
|
709
728
|
const search = this.searchDiv();
|
|
710
729
|
main.appendChild(search.main);
|
|
711
730
|
const list = this.listDiv();
|
|
@@ -786,6 +805,7 @@ class Render {
|
|
|
786
805
|
}
|
|
787
806
|
return true;
|
|
788
807
|
}
|
|
808
|
+
return true;
|
|
789
809
|
};
|
|
790
810
|
main.appendChild(input);
|
|
791
811
|
if (this.callbacks.addable) {
|
|
@@ -889,6 +909,20 @@ class Render {
|
|
|
889
909
|
return;
|
|
890
910
|
}
|
|
891
911
|
}
|
|
912
|
+
let highlighted = false;
|
|
913
|
+
for (const o of options) {
|
|
914
|
+
if (o.classList.contains(this.classes.highlighted)) {
|
|
915
|
+
highlighted = true;
|
|
916
|
+
}
|
|
917
|
+
}
|
|
918
|
+
if (!highlighted) {
|
|
919
|
+
for (const o of options) {
|
|
920
|
+
if (o.classList.contains(this.classes.selected)) {
|
|
921
|
+
o.classList.add(this.classes.highlighted);
|
|
922
|
+
break;
|
|
923
|
+
}
|
|
924
|
+
}
|
|
925
|
+
}
|
|
892
926
|
for (let i = 0; i < options.length; i++) {
|
|
893
927
|
if (options[i].classList.contains(this.classes.highlighted)) {
|
|
894
928
|
const prevOption = options[i];
|
|
@@ -972,7 +1006,7 @@ class Render {
|
|
|
972
1006
|
selectAll.classList.add(this.classes.selected);
|
|
973
1007
|
}
|
|
974
1008
|
const selectAllText = document.createElement('span');
|
|
975
|
-
selectAllText.textContent =
|
|
1009
|
+
selectAllText.textContent = d.selectAllText;
|
|
976
1010
|
selectAll.appendChild(selectAllText);
|
|
977
1011
|
const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
978
1012
|
selectAllSvg.setAttribute('viewBox', '0 0 100 100');
|
|
@@ -1001,7 +1035,13 @@ class Render {
|
|
|
1001
1035
|
}
|
|
1002
1036
|
else {
|
|
1003
1037
|
const newSelected = currentSelected.concat(d.options.map((o) => o.value));
|
|
1038
|
+
for (const o of d.options) {
|
|
1039
|
+
if (!this.store.getOptionByID(o.id)) {
|
|
1040
|
+
this.callbacks.addOption(o);
|
|
1041
|
+
}
|
|
1042
|
+
}
|
|
1004
1043
|
this.callbacks.setSelected(newSelected, true);
|
|
1044
|
+
return;
|
|
1005
1045
|
}
|
|
1006
1046
|
});
|
|
1007
1047
|
optgroupActions.appendChild(selectAll);
|
|
@@ -1255,7 +1295,8 @@ class Select {
|
|
|
1255
1295
|
this.listen = false;
|
|
1256
1296
|
this.observer = null;
|
|
1257
1297
|
this.select = select;
|
|
1258
|
-
this.
|
|
1298
|
+
this.valueChange = this.valueChange.bind(this);
|
|
1299
|
+
this.select.addEventListener('change', this.valueChange, {
|
|
1259
1300
|
passive: true,
|
|
1260
1301
|
});
|
|
1261
1302
|
this.observer = new MutationObserver(this.observeCall.bind(this));
|
|
@@ -1352,6 +1393,7 @@ class Select {
|
|
|
1352
1393
|
id: optgroup.id,
|
|
1353
1394
|
label: optgroup.label,
|
|
1354
1395
|
selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
|
|
1396
|
+
selectAllText: optgroup.dataset ? optgroup.dataset.selectalltext : 'Select all',
|
|
1355
1397
|
closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
|
|
1356
1398
|
options: [],
|
|
1357
1399
|
};
|
|
@@ -1510,7 +1552,7 @@ class Select {
|
|
|
1510
1552
|
}
|
|
1511
1553
|
destroy() {
|
|
1512
1554
|
this.changeListen(false);
|
|
1513
|
-
this.select.removeEventListener('change', this.valueChange
|
|
1555
|
+
this.select.removeEventListener('change', this.valueChange);
|
|
1514
1556
|
if (this.observer) {
|
|
1515
1557
|
this.observer.disconnect();
|
|
1516
1558
|
this.observer = null;
|
package/dist/slimselect.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #dcdee2;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing);overflow:hidden}.ss-main:focus{box-shadow:0 0 5px var(--ss-
|
|
1
|
+
:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #dcdee2;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-focus-color: #5897fb;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing);overflow:hidden}.ss-main:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-main.ss-disabled{background-color:var(--ss-disabled-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0px auto 0px;line-height:1em;align-items:center;width:100%;color:var(--ss-font-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-max{display:flex;user-select:none;align-items:center;width:fit-content;font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m);background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius)}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color);box-sizing:content-box}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{display:flex;align-self:center;justify-content:flex-end;flex:0 1 auto;width:8px;height:8px;margin:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);transform-origin:center top;overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-open-above{flex-direction:column-reverse;opacity:1;transform:scaleY(1);transform-origin:center bottom;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-open-below{opacity:1;transform:scaleY(1);transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;padding:var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-font-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;height:auto;margin:0 0 0 var(--ss-spacing-m);border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{display:none !important}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text{flex:1 1 auto;font-weight:bold;color:var(--ss-font-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow){cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ss-spacing-m)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall{flex:0 0 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover{opacity:.5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path{stroke:var(--ss-error-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:60%;text-align:center;padding:0 var(--ss-spacing-s) 0 0}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg{flex:0 1 auto;width:13px;height:13px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path{fill:none;stroke:var(--ss-success-color);stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child{stroke-width:5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child{stroke-width:11}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable{flex:0 1 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow{flex:1 1 auto;width:10px;height:10px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content .ss-list .ss-optgroup .ss-option{padding:var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l)*3)}.ss-content .ss-list .ss-option{display:flex;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);color:var(--ss-font-color);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-highlighted,.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;background-color:var(--ss-disabled-color)}.ss-content .ss-list .ss-option.ss-disabled:hover{color:var(--ss-font-color)}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--ss-highlight-color)}/*# sourceMappingURL=slimselect.css.map */
|
package/dist/slimselect.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/slim-select/slimselect.scss"],"names":[],"mappings":"AAAA,MAEE,4BACA,uBACA,yBACA,qCACA,6BACA,2BACA,8BACA,4BACA,0BAGA,uBACA,2BAGA,oBACA,oBACA,oBAGA,4BACA,wBAIF,sBACE,GACE,mBACA,UAEF,KACE,mBACA,WAGJ,uBACE,GACE,mBACA,UAEF,KACE,mBACA,WAKJ,SACE,wBAIF,SACE,aACA,mBACA,kBACA,iBACA,2BACA,iCACA,WACA,4BACA,eACA,wCACA,sCACA,oCACA,UACA,sBACA,uDACA,gBAEA,eACE,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/slim-select/slimselect.scss"],"names":[],"mappings":"AAAA,MAEE,4BACA,uBACA,yBACA,qCACA,6BACA,2BACA,8BACA,4BACA,0BACA,0BAGA,uBACA,2BAGA,oBACA,oBACA,oBAGA,4BACA,wBAIF,sBACE,GACE,mBACA,UAEF,KACE,mBACA,WAGJ,uBACE,GACE,mBACA,UAEF,KACE,mBACA,WAKJ,SACE,wBAIF,SACE,aACA,mBACA,kBACA,iBACA,2BACA,iCACA,WACA,4BACA,eACA,wCACA,sCACA,oCACA,UACA,sBACA,uDACA,gBAEA,eACE,yCAGF,qBACE,0CACA,mBAGE,6CACE,2BAIA,2DACE,mBAMR,uBACE,2BACA,4BAEF,uBACE,8BACA,+BAGF,oBACE,oBACA,eACA,wBACA,cAEA,oCACE,aACA,wFACA,yBACA,gBACA,mBACA,WACA,uCACA,gBACA,uBACA,mBAIF,4BACE,aACA,iBACA,mBACA,kBACA,eACA,yBACA,cACA,gDACA,yCACA,sCAIF,+BACE,aACA,yCAIF,8BACE,aACA,iBACA,mBACA,kBACA,yCACA,sCACA,0BACA,8CACA,mCACA,yBAEA,2CACE,2BACA,8CACA,mCAGF,6CACE,eACA,yBACA,cACA,gDAGF,+CACE,aACA,mBACA,2BACA,0BACA,gDACA,eACA,yCACA,uBAEA,mDACE,2BACA,0BAEA,wDACE,UACA,0BACA,gBACA,qBACA,sBAOV,sBACE,aACA,kBACA,yBACA,cACA,UACA,WACA,mDAEA,0BACE,UACA,WAEA,+BACE,UACA,4BACA,gBACA,qBACA,sBAKN,mBACE,aACA,mBACA,yBACA,cACA,WACA,YACA,yDAEA,wBACE,UACA,4BACA,gBACA,qBACA,sBACA,oCACA,sCAMN,YACE,kBACA,aACA,YACA,sBACA,WACA,oCACA,sBACA,wCACA,oCACA,mFACA,UACA,oBACA,4BACA,gBACA,cAEA,wBACE,kBACA,YAGF,0BACE,8BACA,UACA,oBACA,+BACA,+CACA,gDAGF,0BACE,UACA,oBACA,4BACA,kDACA,mDAGF,uBACE,cACA,aACA,mBACA,wFAEA,6BACE,oBACA,kBACA,oBACA,cACA,WACA,cACA,gDACA,SACA,wCACA,sCACA,oCACA,UACA,gBACA,sBAEA,0CACE,uCACA,sBAGF,mCACE,yCAIJ,mCACE,oBACA,uBACA,mBACA,eACA,cACA,YACA,iCACA,wCACA,sCAEA,uCACE,aACA,mBACA,yBACA,cACA,WACA,YACA,yDAEA,4CACE,UACA,4BACA,gBACA,qBACA,sBAMR,qBACE,cACA,YACA,kBACA,gBAEA,+BACE,4BACA,4BAGF,mCACE,2BACA,4BAYE,sDACE,wBAIJ,qDACE,aACA,mBACA,mBACA,8BACA,wFAEA,6EACE,cACA,iBACA,2BAIF,oEACE,eAGF,0EACE,cACA,aACA,mBACA,mBACA,uBACA,wBAEA,wFACE,cACA,aACA,mBACA,eAEA,8FACE,WAKE,6GACE,6BAKN,6FACE,cACA,aACA,mBACA,uBACA,cACA,kBACA,kCAGF,4FACE,cACA,WACA,YAEA,iGACE,UACA,+BACA,qBACA,sBAGF,wGACE,eAEF,uGACE,gBAKN,uFACE,cACA,aACA,mBACA,eAEA,iGACE,cACA,WACA,YAEA,sGACE,UACA,4BACA,gBACA,qBACA,sBACA,oCACA,sCAOV,6CACE,gGAIJ,gCACE,aACA,wFACA,2BACA,eACA,iBAEA,sCACE,yBACA,yCAGF,6GAEE,yBACA,yCAGF,4CACE,mBACA,0CAEA,kDACE,2BAKJ,qDACE","file":"slimselect.css"}
|
package/dist/slimselect.es.js
CHANGED
|
@@ -68,6 +68,7 @@ class Settings {
|
|
|
68
68
|
this.disabled = settings.disabled !== undefined ? settings.disabled : false;
|
|
69
69
|
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
|
|
70
70
|
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
|
|
71
|
+
this.ariaLabel = settings.ariaLabel || 'Combobox';
|
|
71
72
|
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
|
72
73
|
this.searchText = settings.searchText || 'No Results';
|
|
73
74
|
this.searchingText = settings.searchingText || 'Searching...';
|
|
@@ -93,6 +94,7 @@ class Optgroup {
|
|
|
93
94
|
this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
|
|
94
95
|
this.label = optgroup.label || '';
|
|
95
96
|
this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
|
|
97
|
+
this.selectAllText = optgroup.selectAllText || 'Select All';
|
|
96
98
|
this.closable = optgroup.closable || 'off';
|
|
97
99
|
this.options = [];
|
|
98
100
|
if (optgroup.options) {
|
|
@@ -254,6 +256,24 @@ class Store {
|
|
|
254
256
|
}, false);
|
|
255
257
|
return options.length ? options[0] : null;
|
|
256
258
|
}
|
|
259
|
+
getSelectType() {
|
|
260
|
+
return this.selectType;
|
|
261
|
+
}
|
|
262
|
+
getFirstOption() {
|
|
263
|
+
let option = null;
|
|
264
|
+
for (let dataObj of this.data) {
|
|
265
|
+
if (dataObj instanceof Optgroup) {
|
|
266
|
+
option = dataObj.options[0];
|
|
267
|
+
}
|
|
268
|
+
else if (dataObj instanceof Option) {
|
|
269
|
+
option = dataObj;
|
|
270
|
+
}
|
|
271
|
+
if (option) {
|
|
272
|
+
break;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
return option;
|
|
276
|
+
}
|
|
257
277
|
search(search, searchFilter) {
|
|
258
278
|
search = search.trim();
|
|
259
279
|
if (search === '') {
|
|
@@ -292,9 +312,6 @@ class Store {
|
|
|
292
312
|
});
|
|
293
313
|
return dataSearch;
|
|
294
314
|
}
|
|
295
|
-
getSelectType() {
|
|
296
|
-
return this.selectType;
|
|
297
|
-
}
|
|
298
315
|
}
|
|
299
316
|
|
|
300
317
|
class Render {
|
|
@@ -414,7 +431,7 @@ class Render {
|
|
|
414
431
|
var _a;
|
|
415
432
|
const main = document.createElement('div');
|
|
416
433
|
main.dataset.id = this.settings.id;
|
|
417
|
-
main.
|
|
434
|
+
main.setAttribute('aria-label', this.settings.ariaLabel);
|
|
418
435
|
main.tabIndex = 0;
|
|
419
436
|
main.onkeydown = (e) => {
|
|
420
437
|
switch (e.key) {
|
|
@@ -438,6 +455,7 @@ class Render {
|
|
|
438
455
|
this.callbacks.close();
|
|
439
456
|
return false;
|
|
440
457
|
}
|
|
458
|
+
return false;
|
|
441
459
|
};
|
|
442
460
|
main.onclick = (e) => {
|
|
443
461
|
if (this.settings.disabled) {
|
|
@@ -474,13 +492,15 @@ class Render {
|
|
|
474
492
|
this.updateDeselectAll();
|
|
475
493
|
}
|
|
476
494
|
else {
|
|
477
|
-
this.
|
|
495
|
+
const firstOption = this.store.getFirstOption();
|
|
496
|
+
const value = firstOption ? firstOption.value : '';
|
|
497
|
+
this.callbacks.setSelected(value, false);
|
|
478
498
|
}
|
|
479
499
|
if (this.settings.closeOnSelect) {
|
|
480
500
|
this.callbacks.close();
|
|
481
501
|
}
|
|
482
502
|
if (this.callbacks.afterChange) {
|
|
483
|
-
this.callbacks.afterChange(
|
|
503
|
+
this.callbacks.afterChange(this.store.getSelectedOptions());
|
|
484
504
|
}
|
|
485
505
|
}
|
|
486
506
|
};
|
|
@@ -703,7 +723,6 @@ class Render {
|
|
|
703
723
|
contentDiv() {
|
|
704
724
|
const main = document.createElement('div');
|
|
705
725
|
main.dataset.id = this.settings.id;
|
|
706
|
-
main.id = this.settings.id;
|
|
707
726
|
const search = this.searchDiv();
|
|
708
727
|
main.appendChild(search.main);
|
|
709
728
|
const list = this.listDiv();
|
|
@@ -784,6 +803,7 @@ class Render {
|
|
|
784
803
|
}
|
|
785
804
|
return true;
|
|
786
805
|
}
|
|
806
|
+
return true;
|
|
787
807
|
};
|
|
788
808
|
main.appendChild(input);
|
|
789
809
|
if (this.callbacks.addable) {
|
|
@@ -887,6 +907,20 @@ class Render {
|
|
|
887
907
|
return;
|
|
888
908
|
}
|
|
889
909
|
}
|
|
910
|
+
let highlighted = false;
|
|
911
|
+
for (const o of options) {
|
|
912
|
+
if (o.classList.contains(this.classes.highlighted)) {
|
|
913
|
+
highlighted = true;
|
|
914
|
+
}
|
|
915
|
+
}
|
|
916
|
+
if (!highlighted) {
|
|
917
|
+
for (const o of options) {
|
|
918
|
+
if (o.classList.contains(this.classes.selected)) {
|
|
919
|
+
o.classList.add(this.classes.highlighted);
|
|
920
|
+
break;
|
|
921
|
+
}
|
|
922
|
+
}
|
|
923
|
+
}
|
|
890
924
|
for (let i = 0; i < options.length; i++) {
|
|
891
925
|
if (options[i].classList.contains(this.classes.highlighted)) {
|
|
892
926
|
const prevOption = options[i];
|
|
@@ -970,7 +1004,7 @@ class Render {
|
|
|
970
1004
|
selectAll.classList.add(this.classes.selected);
|
|
971
1005
|
}
|
|
972
1006
|
const selectAllText = document.createElement('span');
|
|
973
|
-
selectAllText.textContent =
|
|
1007
|
+
selectAllText.textContent = d.selectAllText;
|
|
974
1008
|
selectAll.appendChild(selectAllText);
|
|
975
1009
|
const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
976
1010
|
selectAllSvg.setAttribute('viewBox', '0 0 100 100');
|
|
@@ -999,7 +1033,13 @@ class Render {
|
|
|
999
1033
|
}
|
|
1000
1034
|
else {
|
|
1001
1035
|
const newSelected = currentSelected.concat(d.options.map((o) => o.value));
|
|
1036
|
+
for (const o of d.options) {
|
|
1037
|
+
if (!this.store.getOptionByID(o.id)) {
|
|
1038
|
+
this.callbacks.addOption(o);
|
|
1039
|
+
}
|
|
1040
|
+
}
|
|
1002
1041
|
this.callbacks.setSelected(newSelected, true);
|
|
1042
|
+
return;
|
|
1003
1043
|
}
|
|
1004
1044
|
});
|
|
1005
1045
|
optgroupActions.appendChild(selectAll);
|
|
@@ -1253,7 +1293,8 @@ class Select {
|
|
|
1253
1293
|
this.listen = false;
|
|
1254
1294
|
this.observer = null;
|
|
1255
1295
|
this.select = select;
|
|
1256
|
-
this.
|
|
1296
|
+
this.valueChange = this.valueChange.bind(this);
|
|
1297
|
+
this.select.addEventListener('change', this.valueChange, {
|
|
1257
1298
|
passive: true,
|
|
1258
1299
|
});
|
|
1259
1300
|
this.observer = new MutationObserver(this.observeCall.bind(this));
|
|
@@ -1350,6 +1391,7 @@ class Select {
|
|
|
1350
1391
|
id: optgroup.id,
|
|
1351
1392
|
label: optgroup.label,
|
|
1352
1393
|
selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
|
|
1394
|
+
selectAllText: optgroup.dataset ? optgroup.dataset.selectalltext : 'Select all',
|
|
1353
1395
|
closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
|
|
1354
1396
|
options: [],
|
|
1355
1397
|
};
|
|
@@ -1508,7 +1550,7 @@ class Select {
|
|
|
1508
1550
|
}
|
|
1509
1551
|
destroy() {
|
|
1510
1552
|
this.changeListen(false);
|
|
1511
|
-
this.select.removeEventListener('change', this.valueChange
|
|
1553
|
+
this.select.removeEventListener('change', this.valueChange);
|
|
1512
1554
|
if (this.observer) {
|
|
1513
1555
|
this.observer.disconnect();
|
|
1514
1556
|
this.observer = null;
|
|
@@ -71,6 +71,7 @@ var SlimSelect = (function () {
|
|
|
71
71
|
this.disabled = settings.disabled !== undefined ? settings.disabled : false;
|
|
72
72
|
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
|
|
73
73
|
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
|
|
74
|
+
this.ariaLabel = settings.ariaLabel || 'Combobox';
|
|
74
75
|
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
|
75
76
|
this.searchText = settings.searchText || 'No Results';
|
|
76
77
|
this.searchingText = settings.searchingText || 'Searching...';
|
|
@@ -96,6 +97,7 @@ var SlimSelect = (function () {
|
|
|
96
97
|
this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
|
|
97
98
|
this.label = optgroup.label || '';
|
|
98
99
|
this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
|
|
100
|
+
this.selectAllText = optgroup.selectAllText || 'Select All';
|
|
99
101
|
this.closable = optgroup.closable || 'off';
|
|
100
102
|
this.options = [];
|
|
101
103
|
if (optgroup.options) {
|
|
@@ -257,6 +259,24 @@ var SlimSelect = (function () {
|
|
|
257
259
|
}, false);
|
|
258
260
|
return options.length ? options[0] : null;
|
|
259
261
|
}
|
|
262
|
+
getSelectType() {
|
|
263
|
+
return this.selectType;
|
|
264
|
+
}
|
|
265
|
+
getFirstOption() {
|
|
266
|
+
let option = null;
|
|
267
|
+
for (let dataObj of this.data) {
|
|
268
|
+
if (dataObj instanceof Optgroup) {
|
|
269
|
+
option = dataObj.options[0];
|
|
270
|
+
}
|
|
271
|
+
else if (dataObj instanceof Option) {
|
|
272
|
+
option = dataObj;
|
|
273
|
+
}
|
|
274
|
+
if (option) {
|
|
275
|
+
break;
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
return option;
|
|
279
|
+
}
|
|
260
280
|
search(search, searchFilter) {
|
|
261
281
|
search = search.trim();
|
|
262
282
|
if (search === '') {
|
|
@@ -295,9 +315,6 @@ var SlimSelect = (function () {
|
|
|
295
315
|
});
|
|
296
316
|
return dataSearch;
|
|
297
317
|
}
|
|
298
|
-
getSelectType() {
|
|
299
|
-
return this.selectType;
|
|
300
|
-
}
|
|
301
318
|
}
|
|
302
319
|
|
|
303
320
|
class Render {
|
|
@@ -417,7 +434,7 @@ var SlimSelect = (function () {
|
|
|
417
434
|
var _a;
|
|
418
435
|
const main = document.createElement('div');
|
|
419
436
|
main.dataset.id = this.settings.id;
|
|
420
|
-
main.
|
|
437
|
+
main.setAttribute('aria-label', this.settings.ariaLabel);
|
|
421
438
|
main.tabIndex = 0;
|
|
422
439
|
main.onkeydown = (e) => {
|
|
423
440
|
switch (e.key) {
|
|
@@ -441,6 +458,7 @@ var SlimSelect = (function () {
|
|
|
441
458
|
this.callbacks.close();
|
|
442
459
|
return false;
|
|
443
460
|
}
|
|
461
|
+
return false;
|
|
444
462
|
};
|
|
445
463
|
main.onclick = (e) => {
|
|
446
464
|
if (this.settings.disabled) {
|
|
@@ -477,13 +495,15 @@ var SlimSelect = (function () {
|
|
|
477
495
|
this.updateDeselectAll();
|
|
478
496
|
}
|
|
479
497
|
else {
|
|
480
|
-
this.
|
|
498
|
+
const firstOption = this.store.getFirstOption();
|
|
499
|
+
const value = firstOption ? firstOption.value : '';
|
|
500
|
+
this.callbacks.setSelected(value, false);
|
|
481
501
|
}
|
|
482
502
|
if (this.settings.closeOnSelect) {
|
|
483
503
|
this.callbacks.close();
|
|
484
504
|
}
|
|
485
505
|
if (this.callbacks.afterChange) {
|
|
486
|
-
this.callbacks.afterChange(
|
|
506
|
+
this.callbacks.afterChange(this.store.getSelectedOptions());
|
|
487
507
|
}
|
|
488
508
|
}
|
|
489
509
|
};
|
|
@@ -706,7 +726,6 @@ var SlimSelect = (function () {
|
|
|
706
726
|
contentDiv() {
|
|
707
727
|
const main = document.createElement('div');
|
|
708
728
|
main.dataset.id = this.settings.id;
|
|
709
|
-
main.id = this.settings.id;
|
|
710
729
|
const search = this.searchDiv();
|
|
711
730
|
main.appendChild(search.main);
|
|
712
731
|
const list = this.listDiv();
|
|
@@ -787,6 +806,7 @@ var SlimSelect = (function () {
|
|
|
787
806
|
}
|
|
788
807
|
return true;
|
|
789
808
|
}
|
|
809
|
+
return true;
|
|
790
810
|
};
|
|
791
811
|
main.appendChild(input);
|
|
792
812
|
if (this.callbacks.addable) {
|
|
@@ -890,6 +910,20 @@ var SlimSelect = (function () {
|
|
|
890
910
|
return;
|
|
891
911
|
}
|
|
892
912
|
}
|
|
913
|
+
let highlighted = false;
|
|
914
|
+
for (const o of options) {
|
|
915
|
+
if (o.classList.contains(this.classes.highlighted)) {
|
|
916
|
+
highlighted = true;
|
|
917
|
+
}
|
|
918
|
+
}
|
|
919
|
+
if (!highlighted) {
|
|
920
|
+
for (const o of options) {
|
|
921
|
+
if (o.classList.contains(this.classes.selected)) {
|
|
922
|
+
o.classList.add(this.classes.highlighted);
|
|
923
|
+
break;
|
|
924
|
+
}
|
|
925
|
+
}
|
|
926
|
+
}
|
|
893
927
|
for (let i = 0; i < options.length; i++) {
|
|
894
928
|
if (options[i].classList.contains(this.classes.highlighted)) {
|
|
895
929
|
const prevOption = options[i];
|
|
@@ -973,7 +1007,7 @@ var SlimSelect = (function () {
|
|
|
973
1007
|
selectAll.classList.add(this.classes.selected);
|
|
974
1008
|
}
|
|
975
1009
|
const selectAllText = document.createElement('span');
|
|
976
|
-
selectAllText.textContent =
|
|
1010
|
+
selectAllText.textContent = d.selectAllText;
|
|
977
1011
|
selectAll.appendChild(selectAllText);
|
|
978
1012
|
const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
979
1013
|
selectAllSvg.setAttribute('viewBox', '0 0 100 100');
|
|
@@ -1002,7 +1036,13 @@ var SlimSelect = (function () {
|
|
|
1002
1036
|
}
|
|
1003
1037
|
else {
|
|
1004
1038
|
const newSelected = currentSelected.concat(d.options.map((o) => o.value));
|
|
1039
|
+
for (const o of d.options) {
|
|
1040
|
+
if (!this.store.getOptionByID(o.id)) {
|
|
1041
|
+
this.callbacks.addOption(o);
|
|
1042
|
+
}
|
|
1043
|
+
}
|
|
1005
1044
|
this.callbacks.setSelected(newSelected, true);
|
|
1045
|
+
return;
|
|
1006
1046
|
}
|
|
1007
1047
|
});
|
|
1008
1048
|
optgroupActions.appendChild(selectAll);
|
|
@@ -1256,7 +1296,8 @@ var SlimSelect = (function () {
|
|
|
1256
1296
|
this.listen = false;
|
|
1257
1297
|
this.observer = null;
|
|
1258
1298
|
this.select = select;
|
|
1259
|
-
this.
|
|
1299
|
+
this.valueChange = this.valueChange.bind(this);
|
|
1300
|
+
this.select.addEventListener('change', this.valueChange, {
|
|
1260
1301
|
passive: true,
|
|
1261
1302
|
});
|
|
1262
1303
|
this.observer = new MutationObserver(this.observeCall.bind(this));
|
|
@@ -1353,6 +1394,7 @@ var SlimSelect = (function () {
|
|
|
1353
1394
|
id: optgroup.id,
|
|
1354
1395
|
label: optgroup.label,
|
|
1355
1396
|
selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
|
|
1397
|
+
selectAllText: optgroup.dataset ? optgroup.dataset.selectalltext : 'Select all',
|
|
1356
1398
|
closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
|
|
1357
1399
|
options: [],
|
|
1358
1400
|
};
|
|
@@ -1511,7 +1553,7 @@ var SlimSelect = (function () {
|
|
|
1511
1553
|
}
|
|
1512
1554
|
destroy() {
|
|
1513
1555
|
this.changeListen(false);
|
|
1514
|
-
this.select.removeEventListener('change', this.valueChange
|
|
1556
|
+
this.select.removeEventListener('change', this.valueChange);
|
|
1515
1557
|
if (this.observer) {
|
|
1516
1558
|
this.observer.disconnect();
|
|
1517
1559
|
this.observer = null;
|