slim-select 2.2.3 → 2.3.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/README.md +2 -6
- package/dist/render.d.ts +2 -1
- package/dist/select.d.ts +5 -11
- package/dist/settings.d.ts +3 -1
- package/dist/slimselect.cjs.js +157 -138
- package/dist/slimselect.css +1 -1
- package/dist/slimselect.css.map +1 -1
- package/dist/slimselect.es.js +157 -138
- package/dist/slimselect.global.js +157 -138
- package/dist/slimselect.js +157 -138
- package/dist/slimselect.min.js +1 -1
- package/dist/slimselect.umd.js +157 -138
- package/dist/slimselect.umd.min.js +1 -1
- package/jest.config.js +1 -0
- package/package.json +4 -4
- package/src/slim-select/index.ts +32 -31
- package/src/slim-select/render.ts +95 -52
- package/src/slim-select/select.test.ts +143 -23
- package/src/slim-select/select.ts +93 -89
- package/src/slim-select/settings.ts +6 -2
- package/src/slim-select/slimselect.scss +33 -10
- package/src/slim-select/store.test.ts +22 -0
- package/src/vue/dist/slim-select/render.d.ts +2 -1
- package/src/vue/dist/slim-select/select.d.ts +5 -11
- package/src/vue/dist/slim-select/settings.d.ts +3 -1
- package/src/vue/dist/slimselectvue.es.js +176 -151
- package/src/vue/dist/slimselectvue.global.js +176 -151
- package/src/vue/dist/slimselectvue.ssr.js +176 -151
- package/src/vue/dist/vue/slimselect.vue.d.ts +17 -15
- package/src/vue/package.json +1 -1
- package/src/vue/slimselect.vue +27 -23
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: #
|
|
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)}.ss-main:focus{box-shadow:0 0 5px var(--ss-primary-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)}.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-primary-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,uDAEA,eACE,2CAGF,qBACE,
|
|
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,uDAEA,eACE,2CAGF,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,yCAEA,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,2CAIJ,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
|
@@ -65,7 +65,7 @@ class Settings {
|
|
|
65
65
|
this.id = 'ss-' + generateID();
|
|
66
66
|
this.style = settings.style || '';
|
|
67
67
|
this.class = settings.class || [];
|
|
68
|
-
this.
|
|
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
71
|
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
|
@@ -83,6 +83,8 @@ class Settings {
|
|
|
83
83
|
this.minSelected = settings.minSelected || 0;
|
|
84
84
|
this.maxSelected = settings.maxSelected || 1000;
|
|
85
85
|
this.timeoutDelay = settings.timeoutDelay || 200;
|
|
86
|
+
this.maxValuesShown = settings.maxValuesShown || 20;
|
|
87
|
+
this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
|
|
86
88
|
}
|
|
87
89
|
}
|
|
88
90
|
|
|
@@ -299,6 +301,7 @@ class Render {
|
|
|
299
301
|
placeholder: 'ss-placeholder',
|
|
300
302
|
values: 'ss-values',
|
|
301
303
|
single: 'ss-single',
|
|
304
|
+
max: 'ss-max',
|
|
302
305
|
value: 'ss-value',
|
|
303
306
|
valueText: 'ss-value-text',
|
|
304
307
|
valueDelete: 'ss-value-delete',
|
|
@@ -355,23 +358,7 @@ class Render {
|
|
|
355
358
|
this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
|
|
356
359
|
this.moveContent();
|
|
357
360
|
this.renderOptions(this.store.getData());
|
|
358
|
-
|
|
359
|
-
this.moveContentBelow();
|
|
360
|
-
}
|
|
361
|
-
else if (this.settings.openPosition.toLowerCase() === 'up') {
|
|
362
|
-
this.moveContentAbove();
|
|
363
|
-
}
|
|
364
|
-
else if (this.settings.openPosition.toLowerCase() === 'down') {
|
|
365
|
-
this.moveContentBelow();
|
|
366
|
-
}
|
|
367
|
-
else {
|
|
368
|
-
if (this.putContent(this.content.main, this.settings.isOpen) === 'up') {
|
|
369
|
-
this.moveContentAbove();
|
|
370
|
-
}
|
|
371
|
-
else {
|
|
372
|
-
this.moveContentBelow();
|
|
373
|
-
}
|
|
374
|
-
}
|
|
361
|
+
this.moveContent();
|
|
375
362
|
const selectedOptions = this.store.getSelectedOptions();
|
|
376
363
|
if (selectedOptions.length) {
|
|
377
364
|
const selectedId = selectedOptions[selectedOptions.length - 1].id;
|
|
@@ -429,7 +416,7 @@ class Render {
|
|
|
429
416
|
}
|
|
430
417
|
};
|
|
431
418
|
main.onclick = (e) => {
|
|
432
|
-
if (
|
|
419
|
+
if (this.settings.disabled) {
|
|
433
420
|
return;
|
|
434
421
|
}
|
|
435
422
|
this.settings.isOpen ? this.callbacks.close() : this.callbacks.open();
|
|
@@ -444,7 +431,7 @@ class Render {
|
|
|
444
431
|
}
|
|
445
432
|
deselect.onclick = (e) => {
|
|
446
433
|
e.stopPropagation();
|
|
447
|
-
if (
|
|
434
|
+
if (this.settings.disabled) {
|
|
448
435
|
return;
|
|
449
436
|
}
|
|
450
437
|
let shouldDelete = true;
|
|
@@ -560,6 +547,19 @@ class Render {
|
|
|
560
547
|
placeholder.remove();
|
|
561
548
|
}
|
|
562
549
|
}
|
|
550
|
+
if (selectedOptions.length > this.settings.maxValuesShown) {
|
|
551
|
+
const singleValue = document.createElement('div');
|
|
552
|
+
singleValue.classList.add(this.classes.max);
|
|
553
|
+
singleValue.textContent = this.settings.maxValuesMessage.replace('{number}', selectedOptions.length.toString());
|
|
554
|
+
this.main.values.innerHTML = singleValue.outerHTML;
|
|
555
|
+
return;
|
|
556
|
+
}
|
|
557
|
+
else {
|
|
558
|
+
const maxValuesMessage = this.main.values.querySelector('.' + this.classes.max);
|
|
559
|
+
if (maxValuesMessage) {
|
|
560
|
+
maxValuesMessage.remove();
|
|
561
|
+
}
|
|
562
|
+
}
|
|
563
563
|
let removeNodes = [];
|
|
564
564
|
for (let i = 0; i < currentNodes.length; i++) {
|
|
565
565
|
const node = currentNodes[i];
|
|
@@ -614,6 +614,9 @@ class Render {
|
|
|
614
614
|
deleteDiv.onclick = (e) => {
|
|
615
615
|
e.preventDefault();
|
|
616
616
|
e.stopPropagation();
|
|
617
|
+
if (this.settings.disabled) {
|
|
618
|
+
return;
|
|
619
|
+
}
|
|
617
620
|
let shouldDelete = true;
|
|
618
621
|
const before = this.store.getSelectedOptions();
|
|
619
622
|
const after = before.filter((o) => {
|
|
@@ -685,12 +688,23 @@ class Render {
|
|
|
685
688
|
}
|
|
686
689
|
moveContent() {
|
|
687
690
|
if (this.settings.contentPosition === 'relative') {
|
|
691
|
+
this.moveContentBelow();
|
|
688
692
|
return;
|
|
689
693
|
}
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
+
if (this.settings.openPosition === 'down') {
|
|
695
|
+
this.moveContentBelow();
|
|
696
|
+
return;
|
|
697
|
+
}
|
|
698
|
+
else if (this.settings.openPosition === 'up') {
|
|
699
|
+
this.moveContentAbove();
|
|
700
|
+
return;
|
|
701
|
+
}
|
|
702
|
+
if (this.putContent() === 'up') {
|
|
703
|
+
this.moveContentAbove();
|
|
704
|
+
}
|
|
705
|
+
else {
|
|
706
|
+
this.moveContentBelow();
|
|
707
|
+
}
|
|
694
708
|
}
|
|
695
709
|
searchDiv() {
|
|
696
710
|
const main = document.createElement('div');
|
|
@@ -901,8 +915,7 @@ class Render {
|
|
|
901
915
|
this.content.list.innerHTML = '';
|
|
902
916
|
if (data.length === 0) {
|
|
903
917
|
const noResults = document.createElement('div');
|
|
904
|
-
noResults.classList.add(this.classes.
|
|
905
|
-
noResults.classList.add(this.classes.disabled);
|
|
918
|
+
noResults.classList.add(this.classes.search);
|
|
906
919
|
noResults.innerHTML = this.settings.searchText;
|
|
907
920
|
this.content.list.appendChild(noResults);
|
|
908
921
|
return;
|
|
@@ -978,7 +991,7 @@ class Render {
|
|
|
978
991
|
optgroupClosable.appendChild(optgroupClosableSvg);
|
|
979
992
|
const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
980
993
|
optgroupClosableSvg.appendChild(optgroupClosableArrow);
|
|
981
|
-
if (d.options.some((o) => o.selected)) {
|
|
994
|
+
if (d.options.some((o) => o.selected) || this.content.search.input.value.trim() !== '') {
|
|
982
995
|
optgroupClosable.classList.add(this.classes.open);
|
|
983
996
|
optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
|
|
984
997
|
}
|
|
@@ -1037,8 +1050,7 @@ class Render {
|
|
|
1037
1050
|
optionEl.style.cssText = option.style;
|
|
1038
1051
|
}
|
|
1039
1052
|
if (this.settings.searchHighlight && this.content.search.input.value.trim() !== '') {
|
|
1040
|
-
|
|
1041
|
-
optionEl.innerHTML = this.highlightText(textOrHtml, this.content.search.input.value, this.classes.searchHighlighter);
|
|
1053
|
+
optionEl.innerHTML = this.highlightText(option.html !== '' ? option.html : option.text, this.content.search.input.value, this.classes.searchHighlighter);
|
|
1042
1054
|
}
|
|
1043
1055
|
else if (option.html !== '') {
|
|
1044
1056
|
optionEl.innerHTML = option.html;
|
|
@@ -1049,7 +1061,7 @@ class Render {
|
|
|
1049
1061
|
if (this.settings.showOptionTooltips && optionEl.textContent) {
|
|
1050
1062
|
optionEl.setAttribute('title', optionEl.textContent);
|
|
1051
1063
|
}
|
|
1052
|
-
if (
|
|
1064
|
+
if (option.disabled) {
|
|
1053
1065
|
optionEl.classList.add(this.classes.disabled);
|
|
1054
1066
|
}
|
|
1055
1067
|
if (option.selected && this.settings.hideSelected) {
|
|
@@ -1070,9 +1082,8 @@ class Render {
|
|
|
1070
1082
|
if (option.disabled || (option.selected && !this.settings.allowDeselect)) {
|
|
1071
1083
|
return;
|
|
1072
1084
|
}
|
|
1073
|
-
if (this.settings.isMultiple &&
|
|
1074
|
-
|
|
1075
|
-
this.settings.maxSelected <= selectedOptions.length) {
|
|
1085
|
+
if ((this.settings.isMultiple && this.settings.maxSelected <= selectedOptions.length && !option.selected) ||
|
|
1086
|
+
(this.settings.isMultiple && this.settings.minSelected >= selectedOptions.length && option.selected)) {
|
|
1076
1087
|
return;
|
|
1077
1088
|
}
|
|
1078
1089
|
let shouldUpdate = false;
|
|
@@ -1137,23 +1148,30 @@ class Render {
|
|
|
1137
1148
|
return completedString;
|
|
1138
1149
|
}
|
|
1139
1150
|
moveContentAbove() {
|
|
1140
|
-
|
|
1151
|
+
const mainHeight = this.main.main.offsetHeight;
|
|
1141
1152
|
const contentHeight = this.content.main.offsetHeight;
|
|
1142
|
-
const height = mainHeight + contentHeight - 1;
|
|
1143
|
-
this.content.main.style.margin = '-' + height + 'px 0px 0px 0px';
|
|
1144
|
-
this.content.main.style.transformOrigin = 'center bottom';
|
|
1145
1153
|
this.main.main.classList.remove(this.classes.openBelow);
|
|
1146
1154
|
this.main.main.classList.add(this.classes.openAbove);
|
|
1147
1155
|
this.content.main.classList.remove(this.classes.openBelow);
|
|
1148
1156
|
this.content.main.classList.add(this.classes.openAbove);
|
|
1157
|
+
const containerRect = this.main.main.getBoundingClientRect();
|
|
1158
|
+
this.content.main.style.margin = '-' + (mainHeight + contentHeight - 1) + 'px 0px 0px 0px';
|
|
1159
|
+
this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
|
|
1160
|
+
this.content.main.style.left = containerRect.left + window.scrollX + 'px';
|
|
1161
|
+
this.content.main.style.width = containerRect.width + 'px';
|
|
1149
1162
|
}
|
|
1150
1163
|
moveContentBelow() {
|
|
1151
|
-
this.content.main.style.margin = '-1px 0px 0px 0px';
|
|
1152
|
-
this.content.main.style.transformOrigin = 'center top';
|
|
1153
1164
|
this.main.main.classList.remove(this.classes.openAbove);
|
|
1154
1165
|
this.main.main.classList.add(this.classes.openBelow);
|
|
1155
1166
|
this.content.main.classList.remove(this.classes.openAbove);
|
|
1156
1167
|
this.content.main.classList.add(this.classes.openBelow);
|
|
1168
|
+
const containerRect = this.main.main.getBoundingClientRect();
|
|
1169
|
+
this.content.main.style.margin = '-1px 0px 0px 0px';
|
|
1170
|
+
if (this.settings.contentPosition !== 'relative') {
|
|
1171
|
+
this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
|
|
1172
|
+
this.content.main.style.left = containerRect.left + window.scrollX + 'px';
|
|
1173
|
+
this.content.main.style.width = containerRect.width + 'px';
|
|
1174
|
+
}
|
|
1157
1175
|
}
|
|
1158
1176
|
ensureElementInView(container, element) {
|
|
1159
1177
|
const cTop = container.scrollTop + container.offsetTop;
|
|
@@ -1167,16 +1185,18 @@ class Render {
|
|
|
1167
1185
|
container.scrollTop += eBottom - cBottom;
|
|
1168
1186
|
}
|
|
1169
1187
|
}
|
|
1170
|
-
putContent(
|
|
1171
|
-
const
|
|
1172
|
-
const
|
|
1173
|
-
const
|
|
1174
|
-
const
|
|
1175
|
-
if (
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1188
|
+
putContent() {
|
|
1189
|
+
const mainHeight = this.main.main.offsetHeight;
|
|
1190
|
+
const mainRect = this.main.main.getBoundingClientRect();
|
|
1191
|
+
const contentHeight = this.content.main.offsetHeight;
|
|
1192
|
+
const spaceBelow = window.innerHeight - (mainRect.top + mainHeight);
|
|
1193
|
+
if (spaceBelow <= contentHeight) {
|
|
1194
|
+
if (mainRect.top > contentHeight) {
|
|
1195
|
+
return 'up';
|
|
1196
|
+
}
|
|
1197
|
+
else {
|
|
1198
|
+
return 'down';
|
|
1199
|
+
}
|
|
1180
1200
|
}
|
|
1181
1201
|
return 'down';
|
|
1182
1202
|
}
|
|
@@ -1187,16 +1207,17 @@ class Select {
|
|
|
1187
1207
|
this.listen = false;
|
|
1188
1208
|
this.observer = null;
|
|
1189
1209
|
this.select = select;
|
|
1210
|
+
this.select.addEventListener('change', this.valueChange.bind(this), {
|
|
1211
|
+
passive: true,
|
|
1212
|
+
});
|
|
1213
|
+
this.observer = new MutationObserver(this.observeCall.bind(this));
|
|
1214
|
+
this.changeListen(true);
|
|
1190
1215
|
}
|
|
1191
1216
|
enable() {
|
|
1192
|
-
this.disconnectObserver();
|
|
1193
1217
|
this.select.disabled = false;
|
|
1194
|
-
this.connectObserver();
|
|
1195
1218
|
}
|
|
1196
1219
|
disable() {
|
|
1197
|
-
this.disconnectObserver();
|
|
1198
1220
|
this.select.disabled = true;
|
|
1199
|
-
this.connectObserver();
|
|
1200
1221
|
}
|
|
1201
1222
|
hideUI() {
|
|
1202
1223
|
this.select.tabIndex = -1;
|
|
@@ -1208,65 +1229,54 @@ class Select {
|
|
|
1208
1229
|
this.select.style.display = '';
|
|
1209
1230
|
this.select.removeAttribute('aria-hidden');
|
|
1210
1231
|
}
|
|
1211
|
-
changeListen(
|
|
1212
|
-
this.listen =
|
|
1213
|
-
if (
|
|
1214
|
-
this.
|
|
1232
|
+
changeListen(listen) {
|
|
1233
|
+
this.listen = listen;
|
|
1234
|
+
if (listen) {
|
|
1235
|
+
if (this.observer) {
|
|
1236
|
+
this.observer.observe(this.select, {
|
|
1237
|
+
subtree: true,
|
|
1238
|
+
childList: true,
|
|
1239
|
+
attributes: true,
|
|
1240
|
+
});
|
|
1241
|
+
}
|
|
1215
1242
|
}
|
|
1216
|
-
|
|
1217
|
-
this.
|
|
1243
|
+
if (!listen) {
|
|
1244
|
+
if (this.observer) {
|
|
1245
|
+
this.observer.disconnect();
|
|
1246
|
+
}
|
|
1218
1247
|
}
|
|
1219
1248
|
}
|
|
1220
|
-
addSelectChangeListener(func) {
|
|
1221
|
-
this.onSelectChange = func;
|
|
1222
|
-
this.addObserver();
|
|
1223
|
-
this.connectObserver();
|
|
1224
|
-
this.changeListen(true);
|
|
1225
|
-
}
|
|
1226
|
-
removeSelectChangeListener() {
|
|
1227
|
-
this.changeListen(false);
|
|
1228
|
-
this.onSelectChange = undefined;
|
|
1229
|
-
}
|
|
1230
|
-
addValueChangeListener(func) {
|
|
1231
|
-
this.onValueChange = func;
|
|
1232
|
-
this.select.addEventListener('change', this.valueChange.bind(this), {
|
|
1233
|
-
passive: true,
|
|
1234
|
-
});
|
|
1235
|
-
}
|
|
1236
|
-
removeValueChangeListener() {
|
|
1237
|
-
this.onValueChange = undefined;
|
|
1238
|
-
this.select.removeEventListener('change', this.valueChange.bind(this));
|
|
1239
|
-
}
|
|
1240
1249
|
valueChange(ev) {
|
|
1241
1250
|
if (this.listen && this.onValueChange) {
|
|
1242
1251
|
this.onValueChange(this.getSelectedValues());
|
|
1243
1252
|
}
|
|
1244
1253
|
return true;
|
|
1245
1254
|
}
|
|
1246
|
-
|
|
1247
|
-
if (this.
|
|
1248
|
-
|
|
1249
|
-
this.onSelectChange(this.getData());
|
|
1250
|
-
this.changeListen(true);
|
|
1255
|
+
observeCall(mutations) {
|
|
1256
|
+
if (!this.listen) {
|
|
1257
|
+
return;
|
|
1251
1258
|
}
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
this.
|
|
1256
|
-
|
|
1259
|
+
let disabledChanged = false;
|
|
1260
|
+
let optgroupOptionChanged = false;
|
|
1261
|
+
for (const m of mutations) {
|
|
1262
|
+
if (m.target === this.select) {
|
|
1263
|
+
if (m.attributeName === 'disabled') {
|
|
1264
|
+
disabledChanged = true;
|
|
1265
|
+
}
|
|
1266
|
+
}
|
|
1267
|
+
if (m.target.nodeName === 'OPTGROUP' || m.target.nodeName === 'OPTION') {
|
|
1268
|
+
optgroupOptionChanged = true;
|
|
1269
|
+
}
|
|
1257
1270
|
}
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
this.observer.observe(this.select, {
|
|
1263
|
-
childList: true,
|
|
1264
|
-
});
|
|
1271
|
+
if (disabledChanged && this.onDisabledChange) {
|
|
1272
|
+
this.changeListen(false);
|
|
1273
|
+
this.onDisabledChange(this.select.disabled);
|
|
1274
|
+
this.changeListen(true);
|
|
1265
1275
|
}
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
this.
|
|
1276
|
+
if (optgroupOptionChanged && this.onOptionsChange) {
|
|
1277
|
+
this.changeListen(false);
|
|
1278
|
+
this.onOptionsChange(this.getData());
|
|
1279
|
+
this.changeListen(true);
|
|
1270
1280
|
}
|
|
1271
1281
|
}
|
|
1272
1282
|
getData() {
|
|
@@ -1284,7 +1294,7 @@ class Select {
|
|
|
1284
1294
|
}
|
|
1285
1295
|
getDataFromOptgroup(optgroup) {
|
|
1286
1296
|
let data = {
|
|
1287
|
-
id:
|
|
1297
|
+
id: optgroup.id,
|
|
1288
1298
|
label: optgroup.label,
|
|
1289
1299
|
selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
|
|
1290
1300
|
closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
|
|
@@ -1300,10 +1310,10 @@ class Select {
|
|
|
1300
1310
|
}
|
|
1301
1311
|
getDataFromOption(option) {
|
|
1302
1312
|
return {
|
|
1303
|
-
id:
|
|
1313
|
+
id: option.id,
|
|
1304
1314
|
value: option.value,
|
|
1305
1315
|
text: option.text,
|
|
1306
|
-
html: option.
|
|
1316
|
+
html: option.dataset && option.dataset.html ? option.dataset.html : '',
|
|
1307
1317
|
selected: option.selected,
|
|
1308
1318
|
display: option.style.display === 'none' ? false : true,
|
|
1309
1319
|
disabled: option.disabled,
|
|
@@ -1339,6 +1349,7 @@ class Select {
|
|
|
1339
1349
|
return values;
|
|
1340
1350
|
}
|
|
1341
1351
|
setSelected(value) {
|
|
1352
|
+
this.changeListen(false);
|
|
1342
1353
|
const options = this.select.childNodes;
|
|
1343
1354
|
for (const o of options) {
|
|
1344
1355
|
if (o.nodeName === 'OPTGROUP') {
|
|
@@ -1356,6 +1367,7 @@ class Select {
|
|
|
1356
1367
|
option.selected = value.includes(option.value);
|
|
1357
1368
|
}
|
|
1358
1369
|
}
|
|
1370
|
+
this.changeListen(true);
|
|
1359
1371
|
}
|
|
1360
1372
|
updateSelect(id, style, classes) {
|
|
1361
1373
|
this.changeListen(false);
|
|
@@ -1408,8 +1420,12 @@ class Select {
|
|
|
1408
1420
|
}
|
|
1409
1421
|
createOption(info) {
|
|
1410
1422
|
const optionEl = document.createElement('option');
|
|
1411
|
-
optionEl.
|
|
1412
|
-
optionEl.
|
|
1423
|
+
optionEl.id = info.id;
|
|
1424
|
+
optionEl.value = info.value;
|
|
1425
|
+
optionEl.innerHTML = info.text;
|
|
1426
|
+
if (info.html !== '') {
|
|
1427
|
+
optionEl.setAttribute('data-html', info.html);
|
|
1428
|
+
}
|
|
1413
1429
|
if (info.selected) {
|
|
1414
1430
|
optionEl.selected = info.selected;
|
|
1415
1431
|
}
|
|
@@ -1439,15 +1455,18 @@ class Select {
|
|
|
1439
1455
|
}
|
|
1440
1456
|
destroy() {
|
|
1441
1457
|
this.changeListen(false);
|
|
1442
|
-
this.
|
|
1443
|
-
this.
|
|
1444
|
-
|
|
1458
|
+
this.select.removeEventListener('change', this.valueChange.bind(this));
|
|
1459
|
+
if (this.observer) {
|
|
1460
|
+
this.observer.disconnect();
|
|
1461
|
+
this.observer = null;
|
|
1462
|
+
}
|
|
1445
1463
|
this.showUI();
|
|
1446
1464
|
}
|
|
1447
1465
|
}
|
|
1448
1466
|
|
|
1449
1467
|
class SlimSelect {
|
|
1450
1468
|
constructor(config) {
|
|
1469
|
+
var _a;
|
|
1451
1470
|
this.events = {
|
|
1452
1471
|
search: undefined,
|
|
1453
1472
|
searchFilter: (opt, search) => {
|
|
@@ -1471,23 +1490,7 @@ class SlimSelect {
|
|
|
1471
1490
|
if (!this.settings.isOpen) {
|
|
1472
1491
|
return;
|
|
1473
1492
|
}
|
|
1474
|
-
|
|
1475
|
-
this.render.moveContentBelow();
|
|
1476
|
-
return;
|
|
1477
|
-
}
|
|
1478
|
-
else if (this.settings.openPosition === 'up') {
|
|
1479
|
-
this.render.moveContentAbove();
|
|
1480
|
-
return;
|
|
1481
|
-
}
|
|
1482
|
-
if (this.settings.contentPosition === 'relative') {
|
|
1483
|
-
this.render.moveContentBelow();
|
|
1484
|
-
}
|
|
1485
|
-
else if (this.render.putContent(this.render.content.main, this.settings.isOpen) === 'up') {
|
|
1486
|
-
this.render.moveContentAbove();
|
|
1487
|
-
}
|
|
1488
|
-
else {
|
|
1489
|
-
this.render.moveContentBelow();
|
|
1490
|
-
}
|
|
1493
|
+
this.render.moveContent();
|
|
1491
1494
|
});
|
|
1492
1495
|
this.documentClick = (e) => {
|
|
1493
1496
|
if (!this.settings.isOpen) {
|
|
@@ -1519,18 +1522,27 @@ class SlimSelect {
|
|
|
1519
1522
|
this.events[key] = config.events[key];
|
|
1520
1523
|
}
|
|
1521
1524
|
}
|
|
1525
|
+
this.settings.disabled = ((_a = config.settings) === null || _a === void 0 ? void 0 : _a.disabled) ? config.settings.disabled : this.selectEl.disabled;
|
|
1522
1526
|
this.settings.isMultiple = this.selectEl.multiple;
|
|
1523
1527
|
this.settings.style = this.selectEl.style.cssText;
|
|
1524
1528
|
this.settings.class = this.selectEl.className.split(' ');
|
|
1525
1529
|
this.select = new Select(this.selectEl);
|
|
1526
1530
|
this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class);
|
|
1527
1531
|
this.select.hideUI();
|
|
1528
|
-
this.select.
|
|
1529
|
-
this.setData(data);
|
|
1530
|
-
});
|
|
1531
|
-
this.select.addValueChangeListener((values) => {
|
|
1532
|
+
this.select.onValueChange = (values) => {
|
|
1532
1533
|
this.setSelected(values);
|
|
1533
|
-
}
|
|
1534
|
+
};
|
|
1535
|
+
this.select.onDisabledChange = (disabled) => {
|
|
1536
|
+
if (disabled) {
|
|
1537
|
+
this.disable();
|
|
1538
|
+
}
|
|
1539
|
+
else {
|
|
1540
|
+
this.enable();
|
|
1541
|
+
}
|
|
1542
|
+
};
|
|
1543
|
+
this.select.onOptionsChange = (data) => {
|
|
1544
|
+
this.setData(data);
|
|
1545
|
+
};
|
|
1534
1546
|
this.store = new Store(this.settings.isMultiple ? 'multiple' : 'single', config.data ? config.data : this.select.getData());
|
|
1535
1547
|
if (config.data) {
|
|
1536
1548
|
this.select.updateOptions(this.store.getData());
|
|
@@ -1556,7 +1568,7 @@ class SlimSelect {
|
|
|
1556
1568
|
if (this.settings.openPosition === 'auto') {
|
|
1557
1569
|
window.addEventListener('scroll', this.windowScroll, false);
|
|
1558
1570
|
}
|
|
1559
|
-
if (
|
|
1571
|
+
if (this.settings.disabled) {
|
|
1560
1572
|
this.disable();
|
|
1561
1573
|
}
|
|
1562
1574
|
if (this.settings.alwaysOpen) {
|
|
@@ -1565,12 +1577,12 @@ class SlimSelect {
|
|
|
1565
1577
|
this.selectEl.slim = this;
|
|
1566
1578
|
}
|
|
1567
1579
|
enable() {
|
|
1568
|
-
this.settings.
|
|
1580
|
+
this.settings.disabled = false;
|
|
1569
1581
|
this.select.enable();
|
|
1570
1582
|
this.render.enable();
|
|
1571
1583
|
}
|
|
1572
1584
|
disable() {
|
|
1573
|
-
this.settings.
|
|
1585
|
+
this.settings.disabled = true;
|
|
1574
1586
|
this.select.disable();
|
|
1575
1587
|
this.render.disable();
|
|
1576
1588
|
}
|
|
@@ -1604,7 +1616,12 @@ class SlimSelect {
|
|
|
1604
1616
|
const data = this.store.getData();
|
|
1605
1617
|
this.select.updateOptions(data);
|
|
1606
1618
|
this.render.renderValues();
|
|
1607
|
-
this.render.
|
|
1619
|
+
if (this.render.content.search.input.value !== '') {
|
|
1620
|
+
this.search(this.render.content.search.input.value);
|
|
1621
|
+
}
|
|
1622
|
+
else {
|
|
1623
|
+
this.render.renderOptions(data);
|
|
1624
|
+
}
|
|
1608
1625
|
if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
|
|
1609
1626
|
this.events.afterChange(this.store.getSelectedOptions());
|
|
1610
1627
|
}
|
|
@@ -1621,7 +1638,7 @@ class SlimSelect {
|
|
|
1621
1638
|
}
|
|
1622
1639
|
}
|
|
1623
1640
|
open() {
|
|
1624
|
-
if (
|
|
1641
|
+
if (this.settings.disabled || this.settings.isOpen) {
|
|
1625
1642
|
return;
|
|
1626
1643
|
}
|
|
1627
1644
|
if (this.events.beforeOpen) {
|
|
@@ -1637,10 +1654,12 @@ class SlimSelect {
|
|
|
1637
1654
|
}
|
|
1638
1655
|
this.settings.isOpen = true;
|
|
1639
1656
|
}, this.settings.timeoutDelay);
|
|
1640
|
-
if (this.settings.
|
|
1641
|
-
|
|
1657
|
+
if (this.settings.contentPosition === 'absolute') {
|
|
1658
|
+
if (this.settings.intervalMove) {
|
|
1659
|
+
clearInterval(this.settings.intervalMove);
|
|
1660
|
+
}
|
|
1661
|
+
this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
|
|
1642
1662
|
}
|
|
1643
|
-
this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
|
|
1644
1663
|
}
|
|
1645
1664
|
close() {
|
|
1646
1665
|
if (!this.settings.isOpen || this.settings.alwaysOpen) {
|