slim-select 2.3.0 → 2.3.2

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.
Files changed (23) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/dist/render.d.ts +2 -1
  3. package/dist/select.d.ts +1 -0
  4. package/dist/slimselect.cjs.js +59 -38
  5. package/dist/slimselect.es.js +59 -38
  6. package/dist/slimselect.global.js +59 -38
  7. package/dist/slimselect.js +59 -38
  8. package/dist/slimselect.min.js +1 -1
  9. package/dist/slimselect.umd.js +59 -38
  10. package/dist/slimselect.umd.min.js +1 -1
  11. package/package.json +4 -4
  12. package/src/slim-select/index.ts +23 -5
  13. package/src/slim-select/render.ts +53 -47
  14. package/src/slim-select/select.ts +19 -4
  15. package/src/slim-select/settings.ts +1 -1
  16. package/src/vue/dist/slim-select/index.d.ts +1 -1
  17. package/src/vue/dist/slim-select/render.d.ts +2 -1
  18. package/src/vue/dist/slim-select/select.d.ts +1 -0
  19. package/src/vue/dist/slimselectvue.es.js +59 -38
  20. package/src/vue/dist/slimselectvue.global.js +59 -38
  21. package/src/vue/dist/slimselectvue.ssr.js +59 -38
  22. package/src/vue/dist/vue/slimselect.vue.d.ts +4 -2
  23. package/src/vue/package.json +1 -1
package/dist/slimselect.global.js CHANGED
@@ -79,7 +79,7 @@ var SlimSelect = (function () {
79
79
  this.contentLocation = settings.contentLocation || document.body;
80
80
  this.contentPosition = settings.contentPosition || 'absolute';
81
81
  this.openPosition = settings.openPosition || 'auto';
82
- this.placeholderText = settings.placeholderText || 'Select Value';
82
+ this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
83
83
  this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
84
84
  this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
85
85
  this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
@@ -346,6 +346,7 @@ var SlimSelect = (function () {
346
346
  this.callbacks = callbacks;
347
347
  this.main = this.mainDiv();
348
348
  this.content = this.contentDiv();
349
+ this.updateClassStyles();
349
350
  this.settings.contentLocation.appendChild(this.content.main);
350
351
  }
351
352
  enable() {
@@ -360,8 +361,6 @@ var SlimSelect = (function () {
360
361
  this.main.arrow.path.setAttribute('d', this.classes.arrowOpen);
361
362
  this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
362
363
  this.moveContent();
363
- this.renderOptions(this.store.getData());
364
- this.moveContent();
365
364
  const selectedOptions = this.store.getSelectedOptions();
366
365
  if (selectedOptions.length) {
367
366
  const selectedId = selectedOptions[selectedOptions.length - 1].id;
@@ -378,20 +377,32 @@ var SlimSelect = (function () {
378
377
  this.content.main.classList.remove(this.classes.openBelow);
379
378
  this.main.arrow.path.setAttribute('d', this.classes.arrowClose);
380
379
  }
381
- mainDiv() {
382
- const main = document.createElement('div');
383
- main.tabIndex = 0;
384
- main.style.cssText = this.settings.style !== '' ? this.settings.style : '';
385
- main.className = '';
386
- main.classList.add(this.settings.id);
387
- main.classList.add(this.classes.main);
388
- if (this.settings.class) {
380
+ updateClassStyles() {
381
+ this.main.main.className = '';
382
+ this.main.main.removeAttribute('style');
383
+ this.content.main.className = '';
384
+ this.content.main.removeAttribute('style');
385
+ this.main.main.classList.add(this.classes.main);
386
+ this.content.main.classList.add(this.classes.content);
387
+ if (this.settings.style !== '') {
388
+ this.content.main.style.cssText = this.settings.style;
389
+ }
390
+ if (this.settings.class.length) {
389
391
  for (const c of this.settings.class) {
390
392
  if (c.trim() !== '') {
391
- main.classList.add(c.trim());
393
+ this.main.main.classList.add(c.trim());
394
+ this.content.main.classList.add(c.trim());
392
395
  }
393
396
  }
394
397
  }
398
+ if (this.settings.contentPosition === 'relative') {
399
+ this.content.main.classList.add('ss-' + this.settings.contentPosition);
400
+ }
401
+ }
402
+ mainDiv() {
403
+ const main = document.createElement('div');
404
+ main.dataset.id = this.settings.id;
405
+ main.tabIndex = 0;
395
406
  main.onfocus = () => {
396
407
  if (this.settings.triggerFocus) {
397
408
  this.callbacks.open();
@@ -444,7 +455,7 @@ var SlimSelect = (function () {
444
455
  shouldDelete = this.callbacks.beforeChange(after, before) === true;
445
456
  }
446
457
  if (shouldDelete) {
447
- this.callbacks.setSelected(['']);
458
+ this.callbacks.setSelected([''], false);
448
459
  if (this.settings.closeOnSelect) {
449
460
  this.callbacks.close();
450
461
  }
@@ -643,7 +654,7 @@ var SlimSelect = (function () {
643
654
  selectedValues.push(o.value);
644
655
  }
645
656
  }
646
- this.callbacks.setSelected(selectedValues);
657
+ this.callbacks.setSelected(selectedValues, false);
647
658
  if (this.settings.closeOnSelect) {
648
659
  this.callbacks.close();
649
660
  }
@@ -664,21 +675,7 @@ var SlimSelect = (function () {
664
675
  }
665
676
  contentDiv() {
666
677
  const main = document.createElement('div');
667
- main.classList.add(this.classes.content);
668
678
  main.dataset.id = this.settings.id;
669
- if (this.settings.style !== '') {
670
- main.style.cssText = this.settings.style;
671
- }
672
- if (this.settings.contentPosition === 'relative') {
673
- main.classList.add('ss-' + this.settings.contentPosition);
674
- }
675
- if (this.settings.class.length) {
676
- for (const c of this.settings.class) {
677
- if (c.trim() !== '') {
678
- main.classList.add(c.trim());
679
- }
680
- }
681
- }
682
679
  const search = this.searchDiv();
683
680
  main.appendChild(search.main);
684
681
  const list = this.listDiv();
@@ -790,10 +787,10 @@ var SlimSelect = (function () {
790
787
  if (this.settings.isMultiple) {
791
788
  let values = this.store.getSelected();
792
789
  values.push(newOption.value);
793
- this.callbacks.setSelected(values);
790
+ this.callbacks.setSelected(values, true);
794
791
  }
795
792
  else {
796
- this.callbacks.setSelected([newOption.value]);
793
+ this.callbacks.setSelected([newOption.value], true);
797
794
  }
798
795
  this.callbacks.search('');
799
796
  if (this.settings.closeOnSelect) {
@@ -975,12 +972,12 @@ var SlimSelect = (function () {
975
972
  }
976
973
  return true;
977
974
  });
978
- this.callbacks.setSelected(newSelected);
975
+ this.callbacks.setSelected(newSelected, true);
979
976
  return;
980
977
  }
981
978
  else {
982
979
  const newSelected = currentSelected.concat(d.options.map((o) => o.value));
983
- this.callbacks.setSelected(newSelected);
980
+ this.callbacks.setSelected(newSelected, true);
984
981
  }
985
982
  });
986
983
  optgroupActions.appendChild(selectAll);
@@ -1064,6 +1061,9 @@ var SlimSelect = (function () {
1064
1061
  if (this.settings.showOptionTooltips && optionEl.textContent) {
1065
1062
  optionEl.setAttribute('title', optionEl.textContent);
1066
1063
  }
1064
+ if (!option.display) {
1065
+ optionEl.classList.add(this.classes.hide);
1066
+ }
1067
1067
  if (option.disabled) {
1068
1068
  optionEl.classList.add(this.classes.disabled);
1069
1069
  }
@@ -1123,7 +1123,7 @@ var SlimSelect = (function () {
1123
1123
  if (!this.store.getOptionByID(elementID)) {
1124
1124
  this.callbacks.addOption(option);
1125
1125
  }
1126
- this.callbacks.setSelected(after.map((o) => o.value));
1126
+ this.callbacks.setSelected(after.map((o) => o.value), false);
1127
1127
  if (this.settings.closeOnSelect) {
1128
1128
  this.callbacks.close();
1129
1129
  }
@@ -1259,6 +1259,7 @@ var SlimSelect = (function () {
1259
1259
  if (!this.listen) {
1260
1260
  return;
1261
1261
  }
1262
+ let classChanged = false;
1262
1263
  let disabledChanged = false;
1263
1264
  let optgroupOptionChanged = false;
1264
1265
  for (const m of mutations) {
@@ -1266,11 +1267,17 @@ var SlimSelect = (function () {
1266
1267
  if (m.attributeName === 'disabled') {
1267
1268
  disabledChanged = true;
1268
1269
  }
1270
+ if (m.attributeName === 'class') {
1271
+ classChanged = true;
1272
+ }
1269
1273
  }
1270
1274
  if (m.target.nodeName === 'OPTGROUP' || m.target.nodeName === 'OPTION') {
1271
1275
  optgroupOptionChanged = true;
1272
1276
  }
1273
1277
  }
1278
+ if (classChanged && this.onClassChange) {
1279
+ this.onClassChange(this.select.className.split(' '));
1280
+ }
1274
1281
  if (disabledChanged && this.onDisabledChange) {
1275
1282
  this.changeListen(false);
1276
1283
  this.onDisabledChange(this.select.disabled);
@@ -1375,7 +1382,7 @@ var SlimSelect = (function () {
1375
1382
  updateSelect(id, style, classes) {
1376
1383
  this.changeListen(false);
1377
1384
  if (id) {
1378
- this.select.id = id;
1385
+ this.select.dataset.id = id;
1379
1386
  }
1380
1387
  if (style) {
1381
1388
  this.select.style.cssText = style;
@@ -1463,6 +1470,7 @@ var SlimSelect = (function () {
1463
1470
  this.observer.disconnect();
1464
1471
  this.observer = null;
1465
1472
  }
1473
+ delete this.select.dataset.id;
1466
1474
  this.showUI();
1467
1475
  }
1468
1476
  }
@@ -1520,8 +1528,15 @@ var SlimSelect = (function () {
1520
1528
  this.destroy();
1521
1529
  }
1522
1530
  this.settings = new Settings(config.settings);
1531
+ const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose'];
1523
1532
  for (const key in config.events) {
1524
- if (config.events.hasOwnProperty(key)) {
1533
+ if (!config.events.hasOwnProperty(key)) {
1534
+ continue;
1535
+ }
1536
+ if (debounceEvents.indexOf(key) !== -1) {
1537
+ this.events[key] = debounce(config.events[key], 100);
1538
+ }
1539
+ else {
1525
1540
  this.events[key] = config.events[key];
1526
1541
  }
1527
1542
  }
@@ -1535,6 +1550,10 @@ var SlimSelect = (function () {
1535
1550
  this.select.onValueChange = (values) => {
1536
1551
  this.setSelected(values);
1537
1552
  };
1553
+ this.select.onClassChange = (classes) => {
1554
+ this.settings.class = classes;
1555
+ this.render.updateClassStyles();
1556
+ };
1538
1557
  this.select.onDisabledChange = (disabled) => {
1539
1558
  if (disabled) {
1540
1559
  this.disable();
@@ -1613,7 +1632,7 @@ var SlimSelect = (function () {
1613
1632
  getSelected() {
1614
1633
  return this.store.getSelected();
1615
1634
  }
1616
- setSelected(value) {
1635
+ setSelected(value, runAfterChange = true) {
1617
1636
  const selected = this.store.getSelected();
1618
1637
  this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
1619
1638
  const data = this.store.getData();
@@ -1625,7 +1644,7 @@ var SlimSelect = (function () {
1625
1644
  else {
1626
1645
  this.render.renderOptions(data);
1627
1646
  }
1628
- if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
1647
+ if (runAfterChange && this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
1629
1648
  this.events.afterChange(this.store.getSelectedOptions());
1630
1649
  }
1631
1650
  }
@@ -1672,7 +1691,9 @@ var SlimSelect = (function () {
1672
1691
  this.events.beforeClose();
1673
1692
  }
1674
1693
  this.render.close();
1675
- this.search('');
1694
+ if (this.render.content.search.input.value !== '') {
1695
+ this.search('');
1696
+ }
1676
1697
  this.render.mainFocus(false);
1677
1698
  setTimeout(() => {
1678
1699
  if (this.events.afterClose) {
package/dist/slimselect.js CHANGED
@@ -82,7 +82,7 @@
82
82
  this.contentLocation = settings.contentLocation || document.body;
83
83
  this.contentPosition = settings.contentPosition || 'absolute';
84
84
  this.openPosition = settings.openPosition || 'auto';
85
- this.placeholderText = settings.placeholderText || 'Select Value';
85
+ this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
86
86
  this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
87
87
  this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
88
88
  this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
@@ -349,6 +349,7 @@
349
349
  this.callbacks = callbacks;
350
350
  this.main = this.mainDiv();
351
351
  this.content = this.contentDiv();
352
+ this.updateClassStyles();
352
353
  this.settings.contentLocation.appendChild(this.content.main);
353
354
  }
354
355
  enable() {
@@ -363,8 +364,6 @@
363
364
  this.main.arrow.path.setAttribute('d', this.classes.arrowOpen);
364
365
  this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
365
366
  this.moveContent();
366
- this.renderOptions(this.store.getData());
367
- this.moveContent();
368
367
  const selectedOptions = this.store.getSelectedOptions();
369
368
  if (selectedOptions.length) {
370
369
  const selectedId = selectedOptions[selectedOptions.length - 1].id;
@@ -381,20 +380,32 @@
381
380
  this.content.main.classList.remove(this.classes.openBelow);
382
381
  this.main.arrow.path.setAttribute('d', this.classes.arrowClose);
383
382
  }
384
- mainDiv() {
385
- const main = document.createElement('div');
386
- main.tabIndex = 0;
387
- main.style.cssText = this.settings.style !== '' ? this.settings.style : '';
388
- main.className = '';
389
- main.classList.add(this.settings.id);
390
- main.classList.add(this.classes.main);
391
- if (this.settings.class) {
383
+ updateClassStyles() {
384
+ this.main.main.className = '';
385
+ this.main.main.removeAttribute('style');
386
+ this.content.main.className = '';
387
+ this.content.main.removeAttribute('style');
388
+ this.main.main.classList.add(this.classes.main);
389
+ this.content.main.classList.add(this.classes.content);
390
+ if (this.settings.style !== '') {
391
+ this.content.main.style.cssText = this.settings.style;
392
+ }
393
+ if (this.settings.class.length) {
392
394
  for (const c of this.settings.class) {
393
395
  if (c.trim() !== '') {
394
- main.classList.add(c.trim());
396
+ this.main.main.classList.add(c.trim());
397
+ this.content.main.classList.add(c.trim());
395
398
  }
396
399
  }
397
400
  }
401
+ if (this.settings.contentPosition === 'relative') {
402
+ this.content.main.classList.add('ss-' + this.settings.contentPosition);
403
+ }
404
+ }
405
+ mainDiv() {
406
+ const main = document.createElement('div');
407
+ main.dataset.id = this.settings.id;
408
+ main.tabIndex = 0;
398
409
  main.onfocus = () => {
399
410
  if (this.settings.triggerFocus) {
400
411
  this.callbacks.open();
@@ -447,7 +458,7 @@
447
458
  shouldDelete = this.callbacks.beforeChange(after, before) === true;
448
459
  }
449
460
  if (shouldDelete) {
450
- this.callbacks.setSelected(['']);
461
+ this.callbacks.setSelected([''], false);
451
462
  if (this.settings.closeOnSelect) {
452
463
  this.callbacks.close();
453
464
  }
@@ -646,7 +657,7 @@
646
657
  selectedValues.push(o.value);
647
658
  }
648
659
  }
649
- this.callbacks.setSelected(selectedValues);
660
+ this.callbacks.setSelected(selectedValues, false);
650
661
  if (this.settings.closeOnSelect) {
651
662
  this.callbacks.close();
652
663
  }
@@ -667,21 +678,7 @@
667
678
  }
668
679
  contentDiv() {
669
680
  const main = document.createElement('div');
670
- main.classList.add(this.classes.content);
671
681
  main.dataset.id = this.settings.id;
672
- if (this.settings.style !== '') {
673
- main.style.cssText = this.settings.style;
674
- }
675
- if (this.settings.contentPosition === 'relative') {
676
- main.classList.add('ss-' + this.settings.contentPosition);
677
- }
678
- if (this.settings.class.length) {
679
- for (const c of this.settings.class) {
680
- if (c.trim() !== '') {
681
- main.classList.add(c.trim());
682
- }
683
- }
684
- }
685
682
  const search = this.searchDiv();
686
683
  main.appendChild(search.main);
687
684
  const list = this.listDiv();
@@ -793,10 +790,10 @@
793
790
  if (this.settings.isMultiple) {
794
791
  let values = this.store.getSelected();
795
792
  values.push(newOption.value);
796
- this.callbacks.setSelected(values);
793
+ this.callbacks.setSelected(values, true);
797
794
  }
798
795
  else {
799
- this.callbacks.setSelected([newOption.value]);
796
+ this.callbacks.setSelected([newOption.value], true);
800
797
  }
801
798
  this.callbacks.search('');
802
799
  if (this.settings.closeOnSelect) {
@@ -978,12 +975,12 @@
978
975
  }
979
976
  return true;
980
977
  });
981
- this.callbacks.setSelected(newSelected);
978
+ this.callbacks.setSelected(newSelected, true);
982
979
  return;
983
980
  }
984
981
  else {
985
982
  const newSelected = currentSelected.concat(d.options.map((o) => o.value));
986
- this.callbacks.setSelected(newSelected);
983
+ this.callbacks.setSelected(newSelected, true);
987
984
  }
988
985
  });
989
986
  optgroupActions.appendChild(selectAll);
@@ -1067,6 +1064,9 @@
1067
1064
  if (this.settings.showOptionTooltips && optionEl.textContent) {
1068
1065
  optionEl.setAttribute('title', optionEl.textContent);
1069
1066
  }
1067
+ if (!option.display) {
1068
+ optionEl.classList.add(this.classes.hide);
1069
+ }
1070
1070
  if (option.disabled) {
1071
1071
  optionEl.classList.add(this.classes.disabled);
1072
1072
  }
@@ -1126,7 +1126,7 @@
1126
1126
  if (!this.store.getOptionByID(elementID)) {
1127
1127
  this.callbacks.addOption(option);
1128
1128
  }
1129
- this.callbacks.setSelected(after.map((o) => o.value));
1129
+ this.callbacks.setSelected(after.map((o) => o.value), false);
1130
1130
  if (this.settings.closeOnSelect) {
1131
1131
  this.callbacks.close();
1132
1132
  }
@@ -1262,6 +1262,7 @@
1262
1262
  if (!this.listen) {
1263
1263
  return;
1264
1264
  }
1265
+ let classChanged = false;
1265
1266
  let disabledChanged = false;
1266
1267
  let optgroupOptionChanged = false;
1267
1268
  for (const m of mutations) {
@@ -1269,11 +1270,17 @@
1269
1270
  if (m.attributeName === 'disabled') {
1270
1271
  disabledChanged = true;
1271
1272
  }
1273
+ if (m.attributeName === 'class') {
1274
+ classChanged = true;
1275
+ }
1272
1276
  }
1273
1277
  if (m.target.nodeName === 'OPTGROUP' || m.target.nodeName === 'OPTION') {
1274
1278
  optgroupOptionChanged = true;
1275
1279
  }
1276
1280
  }
1281
+ if (classChanged && this.onClassChange) {
1282
+ this.onClassChange(this.select.className.split(' '));
1283
+ }
1277
1284
  if (disabledChanged && this.onDisabledChange) {
1278
1285
  this.changeListen(false);
1279
1286
  this.onDisabledChange(this.select.disabled);
@@ -1378,7 +1385,7 @@
1378
1385
  updateSelect(id, style, classes) {
1379
1386
  this.changeListen(false);
1380
1387
  if (id) {
1381
- this.select.id = id;
1388
+ this.select.dataset.id = id;
1382
1389
  }
1383
1390
  if (style) {
1384
1391
  this.select.style.cssText = style;
@@ -1466,6 +1473,7 @@
1466
1473
  this.observer.disconnect();
1467
1474
  this.observer = null;
1468
1475
  }
1476
+ delete this.select.dataset.id;
1469
1477
  this.showUI();
1470
1478
  }
1471
1479
  }
@@ -1523,8 +1531,15 @@
1523
1531
  this.destroy();
1524
1532
  }
1525
1533
  this.settings = new Settings(config.settings);
1534
+ const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose'];
1526
1535
  for (const key in config.events) {
1527
- if (config.events.hasOwnProperty(key)) {
1536
+ if (!config.events.hasOwnProperty(key)) {
1537
+ continue;
1538
+ }
1539
+ if (debounceEvents.indexOf(key) !== -1) {
1540
+ this.events[key] = debounce(config.events[key], 100);
1541
+ }
1542
+ else {
1528
1543
  this.events[key] = config.events[key];
1529
1544
  }
1530
1545
  }
@@ -1538,6 +1553,10 @@
1538
1553
  this.select.onValueChange = (values) => {
1539
1554
  this.setSelected(values);
1540
1555
  };
1556
+ this.select.onClassChange = (classes) => {
1557
+ this.settings.class = classes;
1558
+ this.render.updateClassStyles();
1559
+ };
1541
1560
  this.select.onDisabledChange = (disabled) => {
1542
1561
  if (disabled) {
1543
1562
  this.disable();
@@ -1616,7 +1635,7 @@
1616
1635
  getSelected() {
1617
1636
  return this.store.getSelected();
1618
1637
  }
1619
- setSelected(value) {
1638
+ setSelected(value, runAfterChange = true) {
1620
1639
  const selected = this.store.getSelected();
1621
1640
  this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
1622
1641
  const data = this.store.getData();
@@ -1628,7 +1647,7 @@
1628
1647
  else {
1629
1648
  this.render.renderOptions(data);
1630
1649
  }
1631
- if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
1650
+ if (runAfterChange && this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
1632
1651
  this.events.afterChange(this.store.getSelectedOptions());
1633
1652
  }
1634
1653
  }
@@ -1675,7 +1694,9 @@
1675
1694
  this.events.beforeClose();
1676
1695
  }
1677
1696
  this.render.close();
1678
- this.search('');
1697
+ if (this.render.content.search.input.value !== '') {
1698
+ this.search('');
1699
+ }
1679
1700
  this.render.mainFocus(false);
1680
1701
  setTimeout(() => {
1681
1702
  if (this.events.afterClose) {