slim-select 2.6.0 → 2.7.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/dist/render.d.ts +1 -1
- package/dist/settings.d.ts +1 -0
- package/dist/slimselect.cjs.js +43 -9
- package/dist/slimselect.css +1 -1
- package/dist/slimselect.css.map +1 -1
- package/dist/slimselect.es.js +43 -9
- package/dist/slimselect.global.js +43 -9
- package/dist/slimselect.js +43 -9
- package/dist/slimselect.min.js +1 -1
- package/dist/slimselect.umd.js +43 -9
- package/dist/slimselect.umd.min.js +1 -1
- package/dist/store.d.ts +2 -1
- package/index.html +4 -0
- package/package.json +50 -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 +39 -9
- package/src/slim-select/select.ts +3 -2
- package/src/slim-select/settings.ts +2 -0
- package/src/slim-select/slimselect.scss +3 -2
- package/src/slim-select/store.ts +20 -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 -79
- package/src/vue/dist/slimselectvue.es.js +1940 -1911
- package/src/vue/dist/slimselectvue.global.js +1940 -1911
- package/src/vue/dist/slimselectvue.ssr.js +1940 -1911
- package/src/vue/dist/vue/hello.d.ts +2 -2
- package/src/vue/dist/vue/slimselect.vue.d.ts +324 -317
- 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...';
|
|
@@ -257,6 +258,24 @@ class Store {
|
|
|
257
258
|
}, false);
|
|
258
259
|
return options.length ? options[0] : null;
|
|
259
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
|
+
}
|
|
260
279
|
search(search, searchFilter) {
|
|
261
280
|
search = search.trim();
|
|
262
281
|
if (search === '') {
|
|
@@ -295,9 +314,6 @@ class Store {
|
|
|
295
314
|
});
|
|
296
315
|
return dataSearch;
|
|
297
316
|
}
|
|
298
|
-
getSelectType() {
|
|
299
|
-
return this.selectType;
|
|
300
|
-
}
|
|
301
317
|
}
|
|
302
318
|
|
|
303
319
|
class Render {
|
|
@@ -417,7 +433,7 @@ class Render {
|
|
|
417
433
|
var _a;
|
|
418
434
|
const main = document.createElement('div');
|
|
419
435
|
main.dataset.id = this.settings.id;
|
|
420
|
-
main.
|
|
436
|
+
main.setAttribute('aria-label', this.settings.ariaLabel);
|
|
421
437
|
main.tabIndex = 0;
|
|
422
438
|
main.onkeydown = (e) => {
|
|
423
439
|
switch (e.key) {
|
|
@@ -441,6 +457,7 @@ class Render {
|
|
|
441
457
|
this.callbacks.close();
|
|
442
458
|
return false;
|
|
443
459
|
}
|
|
460
|
+
return false;
|
|
444
461
|
};
|
|
445
462
|
main.onclick = (e) => {
|
|
446
463
|
if (this.settings.disabled) {
|
|
@@ -477,13 +494,15 @@ class Render {
|
|
|
477
494
|
this.updateDeselectAll();
|
|
478
495
|
}
|
|
479
496
|
else {
|
|
480
|
-
this.
|
|
497
|
+
const firstOption = this.store.getFirstOption();
|
|
498
|
+
const value = firstOption ? firstOption.value : '';
|
|
499
|
+
this.callbacks.setSelected(value, false);
|
|
481
500
|
}
|
|
482
501
|
if (this.settings.closeOnSelect) {
|
|
483
502
|
this.callbacks.close();
|
|
484
503
|
}
|
|
485
504
|
if (this.callbacks.afterChange) {
|
|
486
|
-
this.callbacks.afterChange(
|
|
505
|
+
this.callbacks.afterChange(this.store.getSelectedOptions());
|
|
487
506
|
}
|
|
488
507
|
}
|
|
489
508
|
};
|
|
@@ -706,7 +725,6 @@ class Render {
|
|
|
706
725
|
contentDiv() {
|
|
707
726
|
const main = document.createElement('div');
|
|
708
727
|
main.dataset.id = this.settings.id;
|
|
709
|
-
main.id = this.settings.id;
|
|
710
728
|
const search = this.searchDiv();
|
|
711
729
|
main.appendChild(search.main);
|
|
712
730
|
const list = this.listDiv();
|
|
@@ -787,6 +805,7 @@ class Render {
|
|
|
787
805
|
}
|
|
788
806
|
return true;
|
|
789
807
|
}
|
|
808
|
+
return true;
|
|
790
809
|
};
|
|
791
810
|
main.appendChild(input);
|
|
792
811
|
if (this.callbacks.addable) {
|
|
@@ -890,6 +909,20 @@ class Render {
|
|
|
890
909
|
return;
|
|
891
910
|
}
|
|
892
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
|
+
}
|
|
893
926
|
for (let i = 0; i < options.length; i++) {
|
|
894
927
|
if (options[i].classList.contains(this.classes.highlighted)) {
|
|
895
928
|
const prevOption = options[i];
|
|
@@ -1262,7 +1295,8 @@ class Select {
|
|
|
1262
1295
|
this.listen = false;
|
|
1263
1296
|
this.observer = null;
|
|
1264
1297
|
this.select = select;
|
|
1265
|
-
this.
|
|
1298
|
+
this.valueChange = this.valueChange.bind(this);
|
|
1299
|
+
this.select.addEventListener('change', this.valueChange, {
|
|
1266
1300
|
passive: true,
|
|
1267
1301
|
});
|
|
1268
1302
|
this.observer = new MutationObserver(this.observeCall.bind(this));
|
|
@@ -1518,7 +1552,7 @@ class Select {
|
|
|
1518
1552
|
}
|
|
1519
1553
|
destroy() {
|
|
1520
1554
|
this.changeListen(false);
|
|
1521
|
-
this.select.removeEventListener('change', this.valueChange
|
|
1555
|
+
this.select.removeEventListener('change', this.valueChange);
|
|
1522
1556
|
if (this.observer) {
|
|
1523
1557
|
this.observer.disconnect();
|
|
1524
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...';
|
|
@@ -255,6 +256,24 @@ class Store {
|
|
|
255
256
|
}, false);
|
|
256
257
|
return options.length ? options[0] : null;
|
|
257
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
|
+
}
|
|
258
277
|
search(search, searchFilter) {
|
|
259
278
|
search = search.trim();
|
|
260
279
|
if (search === '') {
|
|
@@ -293,9 +312,6 @@ class Store {
|
|
|
293
312
|
});
|
|
294
313
|
return dataSearch;
|
|
295
314
|
}
|
|
296
|
-
getSelectType() {
|
|
297
|
-
return this.selectType;
|
|
298
|
-
}
|
|
299
315
|
}
|
|
300
316
|
|
|
301
317
|
class Render {
|
|
@@ -415,7 +431,7 @@ class Render {
|
|
|
415
431
|
var _a;
|
|
416
432
|
const main = document.createElement('div');
|
|
417
433
|
main.dataset.id = this.settings.id;
|
|
418
|
-
main.
|
|
434
|
+
main.setAttribute('aria-label', this.settings.ariaLabel);
|
|
419
435
|
main.tabIndex = 0;
|
|
420
436
|
main.onkeydown = (e) => {
|
|
421
437
|
switch (e.key) {
|
|
@@ -439,6 +455,7 @@ class Render {
|
|
|
439
455
|
this.callbacks.close();
|
|
440
456
|
return false;
|
|
441
457
|
}
|
|
458
|
+
return false;
|
|
442
459
|
};
|
|
443
460
|
main.onclick = (e) => {
|
|
444
461
|
if (this.settings.disabled) {
|
|
@@ -475,13 +492,15 @@ class Render {
|
|
|
475
492
|
this.updateDeselectAll();
|
|
476
493
|
}
|
|
477
494
|
else {
|
|
478
|
-
this.
|
|
495
|
+
const firstOption = this.store.getFirstOption();
|
|
496
|
+
const value = firstOption ? firstOption.value : '';
|
|
497
|
+
this.callbacks.setSelected(value, false);
|
|
479
498
|
}
|
|
480
499
|
if (this.settings.closeOnSelect) {
|
|
481
500
|
this.callbacks.close();
|
|
482
501
|
}
|
|
483
502
|
if (this.callbacks.afterChange) {
|
|
484
|
-
this.callbacks.afterChange(
|
|
503
|
+
this.callbacks.afterChange(this.store.getSelectedOptions());
|
|
485
504
|
}
|
|
486
505
|
}
|
|
487
506
|
};
|
|
@@ -704,7 +723,6 @@ class Render {
|
|
|
704
723
|
contentDiv() {
|
|
705
724
|
const main = document.createElement('div');
|
|
706
725
|
main.dataset.id = this.settings.id;
|
|
707
|
-
main.id = this.settings.id;
|
|
708
726
|
const search = this.searchDiv();
|
|
709
727
|
main.appendChild(search.main);
|
|
710
728
|
const list = this.listDiv();
|
|
@@ -785,6 +803,7 @@ class Render {
|
|
|
785
803
|
}
|
|
786
804
|
return true;
|
|
787
805
|
}
|
|
806
|
+
return true;
|
|
788
807
|
};
|
|
789
808
|
main.appendChild(input);
|
|
790
809
|
if (this.callbacks.addable) {
|
|
@@ -888,6 +907,20 @@ class Render {
|
|
|
888
907
|
return;
|
|
889
908
|
}
|
|
890
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
|
+
}
|
|
891
924
|
for (let i = 0; i < options.length; i++) {
|
|
892
925
|
if (options[i].classList.contains(this.classes.highlighted)) {
|
|
893
926
|
const prevOption = options[i];
|
|
@@ -1260,7 +1293,8 @@ class Select {
|
|
|
1260
1293
|
this.listen = false;
|
|
1261
1294
|
this.observer = null;
|
|
1262
1295
|
this.select = select;
|
|
1263
|
-
this.
|
|
1296
|
+
this.valueChange = this.valueChange.bind(this);
|
|
1297
|
+
this.select.addEventListener('change', this.valueChange, {
|
|
1264
1298
|
passive: true,
|
|
1265
1299
|
});
|
|
1266
1300
|
this.observer = new MutationObserver(this.observeCall.bind(this));
|
|
@@ -1516,7 +1550,7 @@ class Select {
|
|
|
1516
1550
|
}
|
|
1517
1551
|
destroy() {
|
|
1518
1552
|
this.changeListen(false);
|
|
1519
|
-
this.select.removeEventListener('change', this.valueChange
|
|
1553
|
+
this.select.removeEventListener('change', this.valueChange);
|
|
1520
1554
|
if (this.observer) {
|
|
1521
1555
|
this.observer.disconnect();
|
|
1522
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...';
|
|
@@ -258,6 +259,24 @@ var SlimSelect = (function () {
|
|
|
258
259
|
}, false);
|
|
259
260
|
return options.length ? options[0] : null;
|
|
260
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
|
+
}
|
|
261
280
|
search(search, searchFilter) {
|
|
262
281
|
search = search.trim();
|
|
263
282
|
if (search === '') {
|
|
@@ -296,9 +315,6 @@ var SlimSelect = (function () {
|
|
|
296
315
|
});
|
|
297
316
|
return dataSearch;
|
|
298
317
|
}
|
|
299
|
-
getSelectType() {
|
|
300
|
-
return this.selectType;
|
|
301
|
-
}
|
|
302
318
|
}
|
|
303
319
|
|
|
304
320
|
class Render {
|
|
@@ -418,7 +434,7 @@ var SlimSelect = (function () {
|
|
|
418
434
|
var _a;
|
|
419
435
|
const main = document.createElement('div');
|
|
420
436
|
main.dataset.id = this.settings.id;
|
|
421
|
-
main.
|
|
437
|
+
main.setAttribute('aria-label', this.settings.ariaLabel);
|
|
422
438
|
main.tabIndex = 0;
|
|
423
439
|
main.onkeydown = (e) => {
|
|
424
440
|
switch (e.key) {
|
|
@@ -442,6 +458,7 @@ var SlimSelect = (function () {
|
|
|
442
458
|
this.callbacks.close();
|
|
443
459
|
return false;
|
|
444
460
|
}
|
|
461
|
+
return false;
|
|
445
462
|
};
|
|
446
463
|
main.onclick = (e) => {
|
|
447
464
|
if (this.settings.disabled) {
|
|
@@ -478,13 +495,15 @@ var SlimSelect = (function () {
|
|
|
478
495
|
this.updateDeselectAll();
|
|
479
496
|
}
|
|
480
497
|
else {
|
|
481
|
-
this.
|
|
498
|
+
const firstOption = this.store.getFirstOption();
|
|
499
|
+
const value = firstOption ? firstOption.value : '';
|
|
500
|
+
this.callbacks.setSelected(value, false);
|
|
482
501
|
}
|
|
483
502
|
if (this.settings.closeOnSelect) {
|
|
484
503
|
this.callbacks.close();
|
|
485
504
|
}
|
|
486
505
|
if (this.callbacks.afterChange) {
|
|
487
|
-
this.callbacks.afterChange(
|
|
506
|
+
this.callbacks.afterChange(this.store.getSelectedOptions());
|
|
488
507
|
}
|
|
489
508
|
}
|
|
490
509
|
};
|
|
@@ -707,7 +726,6 @@ var SlimSelect = (function () {
|
|
|
707
726
|
contentDiv() {
|
|
708
727
|
const main = document.createElement('div');
|
|
709
728
|
main.dataset.id = this.settings.id;
|
|
710
|
-
main.id = this.settings.id;
|
|
711
729
|
const search = this.searchDiv();
|
|
712
730
|
main.appendChild(search.main);
|
|
713
731
|
const list = this.listDiv();
|
|
@@ -788,6 +806,7 @@ var SlimSelect = (function () {
|
|
|
788
806
|
}
|
|
789
807
|
return true;
|
|
790
808
|
}
|
|
809
|
+
return true;
|
|
791
810
|
};
|
|
792
811
|
main.appendChild(input);
|
|
793
812
|
if (this.callbacks.addable) {
|
|
@@ -891,6 +910,20 @@ var SlimSelect = (function () {
|
|
|
891
910
|
return;
|
|
892
911
|
}
|
|
893
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
|
+
}
|
|
894
927
|
for (let i = 0; i < options.length; i++) {
|
|
895
928
|
if (options[i].classList.contains(this.classes.highlighted)) {
|
|
896
929
|
const prevOption = options[i];
|
|
@@ -1263,7 +1296,8 @@ var SlimSelect = (function () {
|
|
|
1263
1296
|
this.listen = false;
|
|
1264
1297
|
this.observer = null;
|
|
1265
1298
|
this.select = select;
|
|
1266
|
-
this.
|
|
1299
|
+
this.valueChange = this.valueChange.bind(this);
|
|
1300
|
+
this.select.addEventListener('change', this.valueChange, {
|
|
1267
1301
|
passive: true,
|
|
1268
1302
|
});
|
|
1269
1303
|
this.observer = new MutationObserver(this.observeCall.bind(this));
|
|
@@ -1519,7 +1553,7 @@ var SlimSelect = (function () {
|
|
|
1519
1553
|
}
|
|
1520
1554
|
destroy() {
|
|
1521
1555
|
this.changeListen(false);
|
|
1522
|
-
this.select.removeEventListener('change', this.valueChange
|
|
1556
|
+
this.select.removeEventListener('change', this.valueChange);
|
|
1523
1557
|
if (this.observer) {
|
|
1524
1558
|
this.observer.disconnect();
|
|
1525
1559
|
this.observer = null;
|
package/dist/slimselect.js
CHANGED
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
this.disabled = settings.disabled !== undefined ? settings.disabled : false;
|
|
75
75
|
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
|
|
76
76
|
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
|
|
77
|
+
this.ariaLabel = settings.ariaLabel || 'Combobox';
|
|
77
78
|
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
|
78
79
|
this.searchText = settings.searchText || 'No Results';
|
|
79
80
|
this.searchingText = settings.searchingText || 'Searching...';
|
|
@@ -261,6 +262,24 @@
|
|
|
261
262
|
}, false);
|
|
262
263
|
return options.length ? options[0] : null;
|
|
263
264
|
}
|
|
265
|
+
getSelectType() {
|
|
266
|
+
return this.selectType;
|
|
267
|
+
}
|
|
268
|
+
getFirstOption() {
|
|
269
|
+
let option = null;
|
|
270
|
+
for (let dataObj of this.data) {
|
|
271
|
+
if (dataObj instanceof Optgroup) {
|
|
272
|
+
option = dataObj.options[0];
|
|
273
|
+
}
|
|
274
|
+
else if (dataObj instanceof Option) {
|
|
275
|
+
option = dataObj;
|
|
276
|
+
}
|
|
277
|
+
if (option) {
|
|
278
|
+
break;
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
return option;
|
|
282
|
+
}
|
|
264
283
|
search(search, searchFilter) {
|
|
265
284
|
search = search.trim();
|
|
266
285
|
if (search === '') {
|
|
@@ -299,9 +318,6 @@
|
|
|
299
318
|
});
|
|
300
319
|
return dataSearch;
|
|
301
320
|
}
|
|
302
|
-
getSelectType() {
|
|
303
|
-
return this.selectType;
|
|
304
|
-
}
|
|
305
321
|
}
|
|
306
322
|
|
|
307
323
|
class Render {
|
|
@@ -421,7 +437,7 @@
|
|
|
421
437
|
var _a;
|
|
422
438
|
const main = document.createElement('div');
|
|
423
439
|
main.dataset.id = this.settings.id;
|
|
424
|
-
main.
|
|
440
|
+
main.setAttribute('aria-label', this.settings.ariaLabel);
|
|
425
441
|
main.tabIndex = 0;
|
|
426
442
|
main.onkeydown = (e) => {
|
|
427
443
|
switch (e.key) {
|
|
@@ -445,6 +461,7 @@
|
|
|
445
461
|
this.callbacks.close();
|
|
446
462
|
return false;
|
|
447
463
|
}
|
|
464
|
+
return false;
|
|
448
465
|
};
|
|
449
466
|
main.onclick = (e) => {
|
|
450
467
|
if (this.settings.disabled) {
|
|
@@ -481,13 +498,15 @@
|
|
|
481
498
|
this.updateDeselectAll();
|
|
482
499
|
}
|
|
483
500
|
else {
|
|
484
|
-
this.
|
|
501
|
+
const firstOption = this.store.getFirstOption();
|
|
502
|
+
const value = firstOption ? firstOption.value : '';
|
|
503
|
+
this.callbacks.setSelected(value, false);
|
|
485
504
|
}
|
|
486
505
|
if (this.settings.closeOnSelect) {
|
|
487
506
|
this.callbacks.close();
|
|
488
507
|
}
|
|
489
508
|
if (this.callbacks.afterChange) {
|
|
490
|
-
this.callbacks.afterChange(
|
|
509
|
+
this.callbacks.afterChange(this.store.getSelectedOptions());
|
|
491
510
|
}
|
|
492
511
|
}
|
|
493
512
|
};
|
|
@@ -710,7 +729,6 @@
|
|
|
710
729
|
contentDiv() {
|
|
711
730
|
const main = document.createElement('div');
|
|
712
731
|
main.dataset.id = this.settings.id;
|
|
713
|
-
main.id = this.settings.id;
|
|
714
732
|
const search = this.searchDiv();
|
|
715
733
|
main.appendChild(search.main);
|
|
716
734
|
const list = this.listDiv();
|
|
@@ -791,6 +809,7 @@
|
|
|
791
809
|
}
|
|
792
810
|
return true;
|
|
793
811
|
}
|
|
812
|
+
return true;
|
|
794
813
|
};
|
|
795
814
|
main.appendChild(input);
|
|
796
815
|
if (this.callbacks.addable) {
|
|
@@ -894,6 +913,20 @@
|
|
|
894
913
|
return;
|
|
895
914
|
}
|
|
896
915
|
}
|
|
916
|
+
let highlighted = false;
|
|
917
|
+
for (const o of options) {
|
|
918
|
+
if (o.classList.contains(this.classes.highlighted)) {
|
|
919
|
+
highlighted = true;
|
|
920
|
+
}
|
|
921
|
+
}
|
|
922
|
+
if (!highlighted) {
|
|
923
|
+
for (const o of options) {
|
|
924
|
+
if (o.classList.contains(this.classes.selected)) {
|
|
925
|
+
o.classList.add(this.classes.highlighted);
|
|
926
|
+
break;
|
|
927
|
+
}
|
|
928
|
+
}
|
|
929
|
+
}
|
|
897
930
|
for (let i = 0; i < options.length; i++) {
|
|
898
931
|
if (options[i].classList.contains(this.classes.highlighted)) {
|
|
899
932
|
const prevOption = options[i];
|
|
@@ -1266,7 +1299,8 @@
|
|
|
1266
1299
|
this.listen = false;
|
|
1267
1300
|
this.observer = null;
|
|
1268
1301
|
this.select = select;
|
|
1269
|
-
this.
|
|
1302
|
+
this.valueChange = this.valueChange.bind(this);
|
|
1303
|
+
this.select.addEventListener('change', this.valueChange, {
|
|
1270
1304
|
passive: true,
|
|
1271
1305
|
});
|
|
1272
1306
|
this.observer = new MutationObserver(this.observeCall.bind(this));
|
|
@@ -1522,7 +1556,7 @@
|
|
|
1522
1556
|
}
|
|
1523
1557
|
destroy() {
|
|
1524
1558
|
this.changeListen(false);
|
|
1525
|
-
this.select.removeEventListener('change', this.valueChange
|
|
1559
|
+
this.select.removeEventListener('change', this.valueChange);
|
|
1526
1560
|
if (this.observer) {
|
|
1527
1561
|
this.observer.disconnect();
|
|
1528
1562
|
this.observer = null;
|