slim-select 2.2.2 → 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 +168 -151
- package/dist/slimselect.css +1 -1
- package/dist/slimselect.css.map +1 -1
- package/dist/slimselect.es.js +168 -151
- package/dist/slimselect.global.js +168 -151
- package/dist/slimselect.js +168 -151
- package/dist/slimselect.min.js +1 -1
- package/dist/slimselect.umd.js +168 -151
- 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/slim-select/store.ts +19 -16
- 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 +187 -164
- package/src/vue/dist/slimselectvue.global.js +187 -164
- package/src/vue/dist/slimselectvue.ssr.js +187 -164
- 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
|
|
|
@@ -265,23 +267,21 @@ class Store {
|
|
|
265
267
|
const dataSearch = [];
|
|
266
268
|
this.data.forEach((dataObj) => {
|
|
267
269
|
if (dataObj instanceof Optgroup) {
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
270
|
+
let optOptions = [];
|
|
271
|
+
dataObj.options.forEach((option) => {
|
|
272
|
+
if (!filter || filter(option)) {
|
|
273
|
+
if (!includeOptgroup) {
|
|
274
|
+
dataSearch.push(new Option(option));
|
|
272
275
|
}
|
|
273
|
-
|
|
274
|
-
}
|
|
275
|
-
else {
|
|
276
|
-
let optOptions = [];
|
|
277
|
-
dataObj.options.forEach((option) => {
|
|
278
|
-
if (!filter || filter(option)) {
|
|
276
|
+
else {
|
|
279
277
|
optOptions.push(new Option(option));
|
|
280
278
|
}
|
|
281
|
-
});
|
|
282
|
-
if (optOptions.length > 0) {
|
|
283
|
-
dataSearch.push(new Optgroup(dataObj));
|
|
284
279
|
}
|
|
280
|
+
});
|
|
281
|
+
if (optOptions.length > 0) {
|
|
282
|
+
let optgroup = new Optgroup(dataObj);
|
|
283
|
+
optgroup.options = optOptions;
|
|
284
|
+
dataSearch.push(optgroup);
|
|
285
285
|
}
|
|
286
286
|
}
|
|
287
287
|
if (dataObj instanceof Option) {
|
|
@@ -301,6 +301,7 @@ class Render {
|
|
|
301
301
|
placeholder: 'ss-placeholder',
|
|
302
302
|
values: 'ss-values',
|
|
303
303
|
single: 'ss-single',
|
|
304
|
+
max: 'ss-max',
|
|
304
305
|
value: 'ss-value',
|
|
305
306
|
valueText: 'ss-value-text',
|
|
306
307
|
valueDelete: 'ss-value-delete',
|
|
@@ -357,23 +358,7 @@ class Render {
|
|
|
357
358
|
this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
|
|
358
359
|
this.moveContent();
|
|
359
360
|
this.renderOptions(this.store.getData());
|
|
360
|
-
|
|
361
|
-
this.moveContentBelow();
|
|
362
|
-
}
|
|
363
|
-
else if (this.settings.openPosition.toLowerCase() === 'up') {
|
|
364
|
-
this.moveContentAbove();
|
|
365
|
-
}
|
|
366
|
-
else if (this.settings.openPosition.toLowerCase() === 'down') {
|
|
367
|
-
this.moveContentBelow();
|
|
368
|
-
}
|
|
369
|
-
else {
|
|
370
|
-
if (this.putContent(this.content.main, this.settings.isOpen) === 'up') {
|
|
371
|
-
this.moveContentAbove();
|
|
372
|
-
}
|
|
373
|
-
else {
|
|
374
|
-
this.moveContentBelow();
|
|
375
|
-
}
|
|
376
|
-
}
|
|
361
|
+
this.moveContent();
|
|
377
362
|
const selectedOptions = this.store.getSelectedOptions();
|
|
378
363
|
if (selectedOptions.length) {
|
|
379
364
|
const selectedId = selectedOptions[selectedOptions.length - 1].id;
|
|
@@ -431,7 +416,7 @@ class Render {
|
|
|
431
416
|
}
|
|
432
417
|
};
|
|
433
418
|
main.onclick = (e) => {
|
|
434
|
-
if (
|
|
419
|
+
if (this.settings.disabled) {
|
|
435
420
|
return;
|
|
436
421
|
}
|
|
437
422
|
this.settings.isOpen ? this.callbacks.close() : this.callbacks.open();
|
|
@@ -446,7 +431,7 @@ class Render {
|
|
|
446
431
|
}
|
|
447
432
|
deselect.onclick = (e) => {
|
|
448
433
|
e.stopPropagation();
|
|
449
|
-
if (
|
|
434
|
+
if (this.settings.disabled) {
|
|
450
435
|
return;
|
|
451
436
|
}
|
|
452
437
|
let shouldDelete = true;
|
|
@@ -562,6 +547,19 @@ class Render {
|
|
|
562
547
|
placeholder.remove();
|
|
563
548
|
}
|
|
564
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
|
+
}
|
|
565
563
|
let removeNodes = [];
|
|
566
564
|
for (let i = 0; i < currentNodes.length; i++) {
|
|
567
565
|
const node = currentNodes[i];
|
|
@@ -616,6 +614,9 @@ class Render {
|
|
|
616
614
|
deleteDiv.onclick = (e) => {
|
|
617
615
|
e.preventDefault();
|
|
618
616
|
e.stopPropagation();
|
|
617
|
+
if (this.settings.disabled) {
|
|
618
|
+
return;
|
|
619
|
+
}
|
|
619
620
|
let shouldDelete = true;
|
|
620
621
|
const before = this.store.getSelectedOptions();
|
|
621
622
|
const after = before.filter((o) => {
|
|
@@ -687,12 +688,23 @@ class Render {
|
|
|
687
688
|
}
|
|
688
689
|
moveContent() {
|
|
689
690
|
if (this.settings.contentPosition === 'relative') {
|
|
691
|
+
this.moveContentBelow();
|
|
690
692
|
return;
|
|
691
693
|
}
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
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
|
+
}
|
|
696
708
|
}
|
|
697
709
|
searchDiv() {
|
|
698
710
|
const main = document.createElement('div');
|
|
@@ -903,8 +915,7 @@ class Render {
|
|
|
903
915
|
this.content.list.innerHTML = '';
|
|
904
916
|
if (data.length === 0) {
|
|
905
917
|
const noResults = document.createElement('div');
|
|
906
|
-
noResults.classList.add(this.classes.
|
|
907
|
-
noResults.classList.add(this.classes.disabled);
|
|
918
|
+
noResults.classList.add(this.classes.search);
|
|
908
919
|
noResults.innerHTML = this.settings.searchText;
|
|
909
920
|
this.content.list.appendChild(noResults);
|
|
910
921
|
return;
|
|
@@ -980,7 +991,7 @@ class Render {
|
|
|
980
991
|
optgroupClosable.appendChild(optgroupClosableSvg);
|
|
981
992
|
const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
982
993
|
optgroupClosableSvg.appendChild(optgroupClosableArrow);
|
|
983
|
-
if (d.options.some((o) => o.selected)) {
|
|
994
|
+
if (d.options.some((o) => o.selected) || this.content.search.input.value.trim() !== '') {
|
|
984
995
|
optgroupClosable.classList.add(this.classes.open);
|
|
985
996
|
optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
|
|
986
997
|
}
|
|
@@ -1039,8 +1050,7 @@ class Render {
|
|
|
1039
1050
|
optionEl.style.cssText = option.style;
|
|
1040
1051
|
}
|
|
1041
1052
|
if (this.settings.searchHighlight && this.content.search.input.value.trim() !== '') {
|
|
1042
|
-
|
|
1043
|
-
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);
|
|
1044
1054
|
}
|
|
1045
1055
|
else if (option.html !== '') {
|
|
1046
1056
|
optionEl.innerHTML = option.html;
|
|
@@ -1051,7 +1061,7 @@ class Render {
|
|
|
1051
1061
|
if (this.settings.showOptionTooltips && optionEl.textContent) {
|
|
1052
1062
|
optionEl.setAttribute('title', optionEl.textContent);
|
|
1053
1063
|
}
|
|
1054
|
-
if (
|
|
1064
|
+
if (option.disabled) {
|
|
1055
1065
|
optionEl.classList.add(this.classes.disabled);
|
|
1056
1066
|
}
|
|
1057
1067
|
if (option.selected && this.settings.hideSelected) {
|
|
@@ -1072,9 +1082,8 @@ class Render {
|
|
|
1072
1082
|
if (option.disabled || (option.selected && !this.settings.allowDeselect)) {
|
|
1073
1083
|
return;
|
|
1074
1084
|
}
|
|
1075
|
-
if (this.settings.isMultiple &&
|
|
1076
|
-
|
|
1077
|
-
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)) {
|
|
1078
1087
|
return;
|
|
1079
1088
|
}
|
|
1080
1089
|
let shouldUpdate = false;
|
|
@@ -1139,23 +1148,30 @@ class Render {
|
|
|
1139
1148
|
return completedString;
|
|
1140
1149
|
}
|
|
1141
1150
|
moveContentAbove() {
|
|
1142
|
-
|
|
1151
|
+
const mainHeight = this.main.main.offsetHeight;
|
|
1143
1152
|
const contentHeight = this.content.main.offsetHeight;
|
|
1144
|
-
const height = mainHeight + contentHeight - 1;
|
|
1145
|
-
this.content.main.style.margin = '-' + height + 'px 0px 0px 0px';
|
|
1146
|
-
this.content.main.style.transformOrigin = 'center bottom';
|
|
1147
1153
|
this.main.main.classList.remove(this.classes.openBelow);
|
|
1148
1154
|
this.main.main.classList.add(this.classes.openAbove);
|
|
1149
1155
|
this.content.main.classList.remove(this.classes.openBelow);
|
|
1150
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';
|
|
1151
1162
|
}
|
|
1152
1163
|
moveContentBelow() {
|
|
1153
|
-
this.content.main.style.margin = '-1px 0px 0px 0px';
|
|
1154
|
-
this.content.main.style.transformOrigin = 'center top';
|
|
1155
1164
|
this.main.main.classList.remove(this.classes.openAbove);
|
|
1156
1165
|
this.main.main.classList.add(this.classes.openBelow);
|
|
1157
1166
|
this.content.main.classList.remove(this.classes.openAbove);
|
|
1158
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
|
+
}
|
|
1159
1175
|
}
|
|
1160
1176
|
ensureElementInView(container, element) {
|
|
1161
1177
|
const cTop = container.scrollTop + container.offsetTop;
|
|
@@ -1169,16 +1185,18 @@ class Render {
|
|
|
1169
1185
|
container.scrollTop += eBottom - cBottom;
|
|
1170
1186
|
}
|
|
1171
1187
|
}
|
|
1172
|
-
putContent(
|
|
1173
|
-
const
|
|
1174
|
-
const
|
|
1175
|
-
const
|
|
1176
|
-
const
|
|
1177
|
-
if (
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
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
|
+
}
|
|
1182
1200
|
}
|
|
1183
1201
|
return 'down';
|
|
1184
1202
|
}
|
|
@@ -1189,16 +1207,17 @@ class Select {
|
|
|
1189
1207
|
this.listen = false;
|
|
1190
1208
|
this.observer = null;
|
|
1191
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);
|
|
1192
1215
|
}
|
|
1193
1216
|
enable() {
|
|
1194
|
-
this.disconnectObserver();
|
|
1195
1217
|
this.select.disabled = false;
|
|
1196
|
-
this.connectObserver();
|
|
1197
1218
|
}
|
|
1198
1219
|
disable() {
|
|
1199
|
-
this.disconnectObserver();
|
|
1200
1220
|
this.select.disabled = true;
|
|
1201
|
-
this.connectObserver();
|
|
1202
1221
|
}
|
|
1203
1222
|
hideUI() {
|
|
1204
1223
|
this.select.tabIndex = -1;
|
|
@@ -1210,65 +1229,54 @@ class Select {
|
|
|
1210
1229
|
this.select.style.display = '';
|
|
1211
1230
|
this.select.removeAttribute('aria-hidden');
|
|
1212
1231
|
}
|
|
1213
|
-
changeListen(
|
|
1214
|
-
this.listen =
|
|
1215
|
-
if (
|
|
1216
|
-
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
|
+
}
|
|
1217
1242
|
}
|
|
1218
|
-
|
|
1219
|
-
this.
|
|
1243
|
+
if (!listen) {
|
|
1244
|
+
if (this.observer) {
|
|
1245
|
+
this.observer.disconnect();
|
|
1246
|
+
}
|
|
1220
1247
|
}
|
|
1221
1248
|
}
|
|
1222
|
-
addSelectChangeListener(func) {
|
|
1223
|
-
this.onSelectChange = func;
|
|
1224
|
-
this.addObserver();
|
|
1225
|
-
this.connectObserver();
|
|
1226
|
-
this.changeListen(true);
|
|
1227
|
-
}
|
|
1228
|
-
removeSelectChangeListener() {
|
|
1229
|
-
this.changeListen(false);
|
|
1230
|
-
this.onSelectChange = undefined;
|
|
1231
|
-
}
|
|
1232
|
-
addValueChangeListener(func) {
|
|
1233
|
-
this.onValueChange = func;
|
|
1234
|
-
this.select.addEventListener('change', this.valueChange.bind(this), {
|
|
1235
|
-
passive: true,
|
|
1236
|
-
});
|
|
1237
|
-
}
|
|
1238
|
-
removeValueChangeListener() {
|
|
1239
|
-
this.onValueChange = undefined;
|
|
1240
|
-
this.select.removeEventListener('change', this.valueChange.bind(this));
|
|
1241
|
-
}
|
|
1242
1249
|
valueChange(ev) {
|
|
1243
1250
|
if (this.listen && this.onValueChange) {
|
|
1244
1251
|
this.onValueChange(this.getSelectedValues());
|
|
1245
1252
|
}
|
|
1246
1253
|
return true;
|
|
1247
1254
|
}
|
|
1248
|
-
|
|
1249
|
-
if (this.
|
|
1250
|
-
|
|
1251
|
-
this.onSelectChange(this.getData());
|
|
1252
|
-
this.changeListen(true);
|
|
1255
|
+
observeCall(mutations) {
|
|
1256
|
+
if (!this.listen) {
|
|
1257
|
+
return;
|
|
1253
1258
|
}
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
this.
|
|
1258
|
-
|
|
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
|
+
}
|
|
1259
1270
|
}
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
this.observer.observe(this.select, {
|
|
1265
|
-
childList: true,
|
|
1266
|
-
});
|
|
1271
|
+
if (disabledChanged && this.onDisabledChange) {
|
|
1272
|
+
this.changeListen(false);
|
|
1273
|
+
this.onDisabledChange(this.select.disabled);
|
|
1274
|
+
this.changeListen(true);
|
|
1267
1275
|
}
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
this.
|
|
1276
|
+
if (optgroupOptionChanged && this.onOptionsChange) {
|
|
1277
|
+
this.changeListen(false);
|
|
1278
|
+
this.onOptionsChange(this.getData());
|
|
1279
|
+
this.changeListen(true);
|
|
1272
1280
|
}
|
|
1273
1281
|
}
|
|
1274
1282
|
getData() {
|
|
@@ -1286,7 +1294,7 @@ class Select {
|
|
|
1286
1294
|
}
|
|
1287
1295
|
getDataFromOptgroup(optgroup) {
|
|
1288
1296
|
let data = {
|
|
1289
|
-
id:
|
|
1297
|
+
id: optgroup.id,
|
|
1290
1298
|
label: optgroup.label,
|
|
1291
1299
|
selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
|
|
1292
1300
|
closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
|
|
@@ -1302,10 +1310,10 @@ class Select {
|
|
|
1302
1310
|
}
|
|
1303
1311
|
getDataFromOption(option) {
|
|
1304
1312
|
return {
|
|
1305
|
-
id:
|
|
1313
|
+
id: option.id,
|
|
1306
1314
|
value: option.value,
|
|
1307
1315
|
text: option.text,
|
|
1308
|
-
html: option.
|
|
1316
|
+
html: option.dataset && option.dataset.html ? option.dataset.html : '',
|
|
1309
1317
|
selected: option.selected,
|
|
1310
1318
|
display: option.style.display === 'none' ? false : true,
|
|
1311
1319
|
disabled: option.disabled,
|
|
@@ -1341,6 +1349,7 @@ class Select {
|
|
|
1341
1349
|
return values;
|
|
1342
1350
|
}
|
|
1343
1351
|
setSelected(value) {
|
|
1352
|
+
this.changeListen(false);
|
|
1344
1353
|
const options = this.select.childNodes;
|
|
1345
1354
|
for (const o of options) {
|
|
1346
1355
|
if (o.nodeName === 'OPTGROUP') {
|
|
@@ -1358,6 +1367,7 @@ class Select {
|
|
|
1358
1367
|
option.selected = value.includes(option.value);
|
|
1359
1368
|
}
|
|
1360
1369
|
}
|
|
1370
|
+
this.changeListen(true);
|
|
1361
1371
|
}
|
|
1362
1372
|
updateSelect(id, style, classes) {
|
|
1363
1373
|
this.changeListen(false);
|
|
@@ -1410,8 +1420,12 @@ class Select {
|
|
|
1410
1420
|
}
|
|
1411
1421
|
createOption(info) {
|
|
1412
1422
|
const optionEl = document.createElement('option');
|
|
1413
|
-
optionEl.
|
|
1414
|
-
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
|
+
}
|
|
1415
1429
|
if (info.selected) {
|
|
1416
1430
|
optionEl.selected = info.selected;
|
|
1417
1431
|
}
|
|
@@ -1441,15 +1455,18 @@ class Select {
|
|
|
1441
1455
|
}
|
|
1442
1456
|
destroy() {
|
|
1443
1457
|
this.changeListen(false);
|
|
1444
|
-
this.
|
|
1445
|
-
this.
|
|
1446
|
-
|
|
1458
|
+
this.select.removeEventListener('change', this.valueChange.bind(this));
|
|
1459
|
+
if (this.observer) {
|
|
1460
|
+
this.observer.disconnect();
|
|
1461
|
+
this.observer = null;
|
|
1462
|
+
}
|
|
1447
1463
|
this.showUI();
|
|
1448
1464
|
}
|
|
1449
1465
|
}
|
|
1450
1466
|
|
|
1451
1467
|
class SlimSelect {
|
|
1452
1468
|
constructor(config) {
|
|
1469
|
+
var _a;
|
|
1453
1470
|
this.events = {
|
|
1454
1471
|
search: undefined,
|
|
1455
1472
|
searchFilter: (opt, search) => {
|
|
@@ -1473,23 +1490,7 @@ class SlimSelect {
|
|
|
1473
1490
|
if (!this.settings.isOpen) {
|
|
1474
1491
|
return;
|
|
1475
1492
|
}
|
|
1476
|
-
|
|
1477
|
-
this.render.moveContentBelow();
|
|
1478
|
-
return;
|
|
1479
|
-
}
|
|
1480
|
-
else if (this.settings.openPosition === 'up') {
|
|
1481
|
-
this.render.moveContentAbove();
|
|
1482
|
-
return;
|
|
1483
|
-
}
|
|
1484
|
-
if (this.settings.contentPosition === 'relative') {
|
|
1485
|
-
this.render.moveContentBelow();
|
|
1486
|
-
}
|
|
1487
|
-
else if (this.render.putContent(this.render.content.main, this.settings.isOpen) === 'up') {
|
|
1488
|
-
this.render.moveContentAbove();
|
|
1489
|
-
}
|
|
1490
|
-
else {
|
|
1491
|
-
this.render.moveContentBelow();
|
|
1492
|
-
}
|
|
1493
|
+
this.render.moveContent();
|
|
1493
1494
|
});
|
|
1494
1495
|
this.documentClick = (e) => {
|
|
1495
1496
|
if (!this.settings.isOpen) {
|
|
@@ -1521,18 +1522,27 @@ class SlimSelect {
|
|
|
1521
1522
|
this.events[key] = config.events[key];
|
|
1522
1523
|
}
|
|
1523
1524
|
}
|
|
1525
|
+
this.settings.disabled = ((_a = config.settings) === null || _a === void 0 ? void 0 : _a.disabled) ? config.settings.disabled : this.selectEl.disabled;
|
|
1524
1526
|
this.settings.isMultiple = this.selectEl.multiple;
|
|
1525
1527
|
this.settings.style = this.selectEl.style.cssText;
|
|
1526
1528
|
this.settings.class = this.selectEl.className.split(' ');
|
|
1527
1529
|
this.select = new Select(this.selectEl);
|
|
1528
1530
|
this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class);
|
|
1529
1531
|
this.select.hideUI();
|
|
1530
|
-
this.select.
|
|
1531
|
-
this.setData(data);
|
|
1532
|
-
});
|
|
1533
|
-
this.select.addValueChangeListener((values) => {
|
|
1532
|
+
this.select.onValueChange = (values) => {
|
|
1534
1533
|
this.setSelected(values);
|
|
1535
|
-
}
|
|
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
|
+
};
|
|
1536
1546
|
this.store = new Store(this.settings.isMultiple ? 'multiple' : 'single', config.data ? config.data : this.select.getData());
|
|
1537
1547
|
if (config.data) {
|
|
1538
1548
|
this.select.updateOptions(this.store.getData());
|
|
@@ -1558,7 +1568,7 @@ class SlimSelect {
|
|
|
1558
1568
|
if (this.settings.openPosition === 'auto') {
|
|
1559
1569
|
window.addEventListener('scroll', this.windowScroll, false);
|
|
1560
1570
|
}
|
|
1561
|
-
if (
|
|
1571
|
+
if (this.settings.disabled) {
|
|
1562
1572
|
this.disable();
|
|
1563
1573
|
}
|
|
1564
1574
|
if (this.settings.alwaysOpen) {
|
|
@@ -1567,12 +1577,12 @@ class SlimSelect {
|
|
|
1567
1577
|
this.selectEl.slim = this;
|
|
1568
1578
|
}
|
|
1569
1579
|
enable() {
|
|
1570
|
-
this.settings.
|
|
1580
|
+
this.settings.disabled = false;
|
|
1571
1581
|
this.select.enable();
|
|
1572
1582
|
this.render.enable();
|
|
1573
1583
|
}
|
|
1574
1584
|
disable() {
|
|
1575
|
-
this.settings.
|
|
1585
|
+
this.settings.disabled = true;
|
|
1576
1586
|
this.select.disable();
|
|
1577
1587
|
this.render.disable();
|
|
1578
1588
|
}
|
|
@@ -1606,7 +1616,12 @@ class SlimSelect {
|
|
|
1606
1616
|
const data = this.store.getData();
|
|
1607
1617
|
this.select.updateOptions(data);
|
|
1608
1618
|
this.render.renderValues();
|
|
1609
|
-
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
|
+
}
|
|
1610
1625
|
if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
|
|
1611
1626
|
this.events.afterChange(this.store.getSelectedOptions());
|
|
1612
1627
|
}
|
|
@@ -1623,7 +1638,7 @@ class SlimSelect {
|
|
|
1623
1638
|
}
|
|
1624
1639
|
}
|
|
1625
1640
|
open() {
|
|
1626
|
-
if (
|
|
1641
|
+
if (this.settings.disabled || this.settings.isOpen) {
|
|
1627
1642
|
return;
|
|
1628
1643
|
}
|
|
1629
1644
|
if (this.events.beforeOpen) {
|
|
@@ -1639,10 +1654,12 @@ class SlimSelect {
|
|
|
1639
1654
|
}
|
|
1640
1655
|
this.settings.isOpen = true;
|
|
1641
1656
|
}, this.settings.timeoutDelay);
|
|
1642
|
-
if (this.settings.
|
|
1643
|
-
|
|
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);
|
|
1644
1662
|
}
|
|
1645
|
-
this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
|
|
1646
1663
|
}
|
|
1647
1664
|
close() {
|
|
1648
1665
|
if (!this.settings.isOpen || this.settings.alwaysOpen) {
|