slim-select 2.7.1 → 2.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.nvmrc +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/settings.d.ts +1 -0
- package/dist/slimselect.cjs.js +55 -48
- package/dist/slimselect.css +1 -1
- package/dist/slimselect.css.map +1 -1
- package/dist/slimselect.es.js +55 -48
- package/dist/slimselect.global.js +55 -48
- package/dist/slimselect.js +55 -48
- package/dist/slimselect.min.js +1 -1
- package/dist/slimselect.umd.js +55 -48
- package/dist/slimselect.umd.min.js +1 -1
- package/package.json +30 -30
- package/src/slim-select/index.ts +11 -8
- package/src/slim-select/render.ts +12 -5
- package/src/slim-select/settings.ts +2 -0
- package/src/slim-select/slimselect.scss +6 -12
- package/src/vue/dist/slim-select/helpers.d.ts +5 -5
- package/src/vue/dist/slim-select/index.d.ts +46 -46
- package/src/vue/dist/slim-select/render.d.ts +120 -120
- package/src/vue/dist/slim-select/select.d.ts +28 -28
- package/src/vue/dist/slim-select/settings.d.ts +34 -33
- package/src/vue/dist/slim-select/store.d.ts +80 -80
- package/src/vue/dist/slimselectvue.es.js +1947 -1940
- package/src/vue/dist/slimselectvue.global.js +1947 -1940
- package/src/vue/dist/slimselectvue.ssr.js +1947 -1940
- package/src/vue/dist/vue/hello.d.ts +2 -2
- package/src/vue/dist/vue/slimselect.vue.d.ts +326 -324
package/.nvmrc
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
v21.5.0
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import Settings, { SettingsPartial } from './settings';
|
|
2
1
|
import Render from './render';
|
|
3
2
|
import Select from './select';
|
|
3
|
+
import Settings, { SettingsPartial } from './settings';
|
|
4
4
|
import Store, { DataArray, DataArrayPartial, Option, OptionOptional } from './store';
|
|
5
5
|
export interface Config {
|
|
6
6
|
select: string | Element;
|
package/dist/settings.d.ts
CHANGED
package/dist/slimselect.cjs.js
CHANGED
|
@@ -52,45 +52,6 @@ function kebabCase(str) {
|
|
|
52
52
|
return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
class Settings {
|
|
56
|
-
constructor(settings) {
|
|
57
|
-
this.id = '';
|
|
58
|
-
this.style = '';
|
|
59
|
-
this.class = [];
|
|
60
|
-
this.isMultiple = false;
|
|
61
|
-
this.isOpen = false;
|
|
62
|
-
this.isFullOpen = false;
|
|
63
|
-
this.intervalMove = null;
|
|
64
|
-
if (!settings) {
|
|
65
|
-
settings = {};
|
|
66
|
-
}
|
|
67
|
-
this.id = 'ss-' + generateID();
|
|
68
|
-
this.style = settings.style || '';
|
|
69
|
-
this.class = settings.class || [];
|
|
70
|
-
this.disabled = settings.disabled !== undefined ? settings.disabled : false;
|
|
71
|
-
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
|
|
72
|
-
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
|
|
73
|
-
this.ariaLabel = settings.ariaLabel || 'Combobox';
|
|
74
|
-
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
|
75
|
-
this.searchText = settings.searchText || 'No Results';
|
|
76
|
-
this.searchingText = settings.searchingText || 'Searching...';
|
|
77
|
-
this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
|
|
78
|
-
this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
|
|
79
|
-
this.contentLocation = settings.contentLocation || document.body;
|
|
80
|
-
this.contentPosition = settings.contentPosition || 'absolute';
|
|
81
|
-
this.openPosition = settings.openPosition || 'auto';
|
|
82
|
-
this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
|
|
83
|
-
this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
|
|
84
|
-
this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
|
|
85
|
-
this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
|
|
86
|
-
this.minSelected = settings.minSelected || 0;
|
|
87
|
-
this.maxSelected = settings.maxSelected || 1000;
|
|
88
|
-
this.timeoutDelay = settings.timeoutDelay || 200;
|
|
89
|
-
this.maxValuesShown = settings.maxValuesShown || 20;
|
|
90
|
-
this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
55
|
class Optgroup {
|
|
95
56
|
constructor(optgroup) {
|
|
96
57
|
this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
|
|
@@ -564,6 +525,7 @@ class Render {
|
|
|
564
525
|
return;
|
|
565
526
|
}
|
|
566
527
|
this.renderMultipleValues();
|
|
528
|
+
this.updateDeselectAll();
|
|
567
529
|
}
|
|
568
530
|
renderSingleValue() {
|
|
569
531
|
const selected = this.store.filter((o) => {
|
|
@@ -649,18 +611,22 @@ class Render {
|
|
|
649
611
|
}
|
|
650
612
|
}
|
|
651
613
|
if (shouldAdd) {
|
|
652
|
-
if (
|
|
614
|
+
if (this.settings.keepOrder) {
|
|
653
615
|
this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
|
|
654
616
|
}
|
|
655
|
-
else if (d === 0) {
|
|
656
|
-
this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d]);
|
|
657
|
-
}
|
|
658
617
|
else {
|
|
659
|
-
currentNodes
|
|
618
|
+
if (currentNodes.length === 0) {
|
|
619
|
+
this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
|
|
620
|
+
}
|
|
621
|
+
else if (d === 0) {
|
|
622
|
+
this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d]);
|
|
623
|
+
}
|
|
624
|
+
else {
|
|
625
|
+
currentNodes[d - 1].insertAdjacentElement('afterend', this.multipleValue(selectedOptions[d]));
|
|
626
|
+
}
|
|
660
627
|
}
|
|
661
628
|
}
|
|
662
629
|
}
|
|
663
|
-
this.updateDeselectAll();
|
|
664
630
|
}
|
|
665
631
|
multipleValue(option) {
|
|
666
632
|
const value = document.createElement('div');
|
|
@@ -1562,6 +1528,46 @@ class Select {
|
|
|
1562
1528
|
}
|
|
1563
1529
|
}
|
|
1564
1530
|
|
|
1531
|
+
class Settings {
|
|
1532
|
+
constructor(settings) {
|
|
1533
|
+
this.id = '';
|
|
1534
|
+
this.style = '';
|
|
1535
|
+
this.class = [];
|
|
1536
|
+
this.isMultiple = false;
|
|
1537
|
+
this.isOpen = false;
|
|
1538
|
+
this.isFullOpen = false;
|
|
1539
|
+
this.intervalMove = null;
|
|
1540
|
+
if (!settings) {
|
|
1541
|
+
settings = {};
|
|
1542
|
+
}
|
|
1543
|
+
this.id = 'ss-' + generateID();
|
|
1544
|
+
this.style = settings.style || '';
|
|
1545
|
+
this.class = settings.class || [];
|
|
1546
|
+
this.disabled = settings.disabled !== undefined ? settings.disabled : false;
|
|
1547
|
+
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
|
|
1548
|
+
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
|
|
1549
|
+
this.ariaLabel = settings.ariaLabel || 'Combobox';
|
|
1550
|
+
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
|
1551
|
+
this.searchText = settings.searchText || 'No Results';
|
|
1552
|
+
this.searchingText = settings.searchingText || 'Searching...';
|
|
1553
|
+
this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
|
|
1554
|
+
this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
|
|
1555
|
+
this.contentLocation = settings.contentLocation || document.body;
|
|
1556
|
+
this.contentPosition = settings.contentPosition || 'absolute';
|
|
1557
|
+
this.openPosition = settings.openPosition || 'auto';
|
|
1558
|
+
this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
|
|
1559
|
+
this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
|
|
1560
|
+
this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
|
|
1561
|
+
this.keepOrder = settings.keepOrder !== undefined ? settings.keepOrder : false;
|
|
1562
|
+
this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
|
|
1563
|
+
this.minSelected = settings.minSelected || 0;
|
|
1564
|
+
this.maxSelected = settings.maxSelected || 1000;
|
|
1565
|
+
this.timeoutDelay = settings.timeoutDelay || 200;
|
|
1566
|
+
this.maxValuesShown = settings.maxValuesShown || 20;
|
|
1567
|
+
this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
|
|
1568
|
+
}
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1565
1571
|
class SlimSelect {
|
|
1566
1572
|
constructor(config) {
|
|
1567
1573
|
var _a;
|
|
@@ -1661,7 +1667,7 @@ class SlimSelect {
|
|
|
1661
1667
|
if (config.data) {
|
|
1662
1668
|
this.select.updateOptions(this.store.getData());
|
|
1663
1669
|
}
|
|
1664
|
-
const
|
|
1670
|
+
const renderCallbacks = {
|
|
1665
1671
|
open: this.open.bind(this),
|
|
1666
1672
|
close: this.close.bind(this),
|
|
1667
1673
|
addable: this.events.addable ? this.events.addable : undefined,
|
|
@@ -1671,7 +1677,7 @@ class SlimSelect {
|
|
|
1671
1677
|
beforeChange: this.events.beforeChange,
|
|
1672
1678
|
afterChange: this.events.afterChange,
|
|
1673
1679
|
};
|
|
1674
|
-
this.render = new Render(this.settings, this.store,
|
|
1680
|
+
this.render = new Render(this.settings, this.store, renderCallbacks);
|
|
1675
1681
|
this.render.renderValues();
|
|
1676
1682
|
this.render.renderOptions(this.store.getData());
|
|
1677
1683
|
const selectAriaLabel = this.selectEl.getAttribute('aria-label');
|
|
@@ -1685,7 +1691,6 @@ class SlimSelect {
|
|
|
1685
1691
|
if (this.selectEl.parentNode) {
|
|
1686
1692
|
this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
|
|
1687
1693
|
}
|
|
1688
|
-
document.addEventListener('click', this.documentClick);
|
|
1689
1694
|
window.addEventListener('resize', this.windowResize, false);
|
|
1690
1695
|
if (this.settings.openPosition === 'auto') {
|
|
1691
1696
|
window.addEventListener('scroll', this.windowScroll, false);
|
|
@@ -1781,6 +1786,7 @@ class SlimSelect {
|
|
|
1781
1786
|
if (this.settings.isOpen) {
|
|
1782
1787
|
this.settings.isFullOpen = true;
|
|
1783
1788
|
}
|
|
1789
|
+
document.addEventListener('click', this.documentClick);
|
|
1784
1790
|
}, this.settings.timeoutDelay);
|
|
1785
1791
|
if (this.settings.contentPosition === 'absolute') {
|
|
1786
1792
|
if (this.settings.intervalMove) {
|
|
@@ -1807,6 +1813,7 @@ class SlimSelect {
|
|
|
1807
1813
|
if (this.events.afterClose) {
|
|
1808
1814
|
this.events.afterClose();
|
|
1809
1815
|
}
|
|
1816
|
+
document.removeEventListener('click', this.documentClick);
|
|
1810
1817
|
}, this.settings.timeoutDelay);
|
|
1811
1818
|
if (this.settings.intervalMove) {
|
|
1812
1819
|
clearInterval(this.settings.intervalMove);
|
package/dist/slimselect.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #dcdee2;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-focus-color: #5897fb;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing);overflow:hidden}.ss-main:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-main.ss-disabled{background-color:var(--ss-disabled-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0px auto 0px;line-height:1em;align-items:center;width:100%;color:var(--ss-font-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-max{display:flex;user-select:none;align-items:center;width:fit-content;font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m);background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius)}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color);box-sizing:content-box}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{display:flex;align-
|
|
1
|
+
:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #dcdee2;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-focus-color: #5897fb;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing);overflow:hidden}.ss-main:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-main.ss-disabled{background-color:var(--ss-disabled-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0px auto 0px;line-height:1em;align-items:center;width:100%;color:var(--ss-font-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-max{display:flex;user-select:none;align-items:center;width:fit-content;font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m);background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius)}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color);box-sizing:content-box}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{flex:0 1 auto;display:flex;align-items:center;justify-content:center;width:fit-content;height:auto;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{flex:0 1 auto;display:flex;align-items:center;justify-content:flex-end;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);transform-origin:center top;overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-open-above{flex-direction:column-reverse;opacity:1;transform:scaleY(1);transform-origin:center bottom;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-open-below{opacity:1;transform:scaleY(1);transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;padding:var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-font-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;height:auto;margin:0 0 0 var(--ss-spacing-m);border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{display:none !important}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text{flex:1 1 auto;font-weight:bold;color:var(--ss-font-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow){cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ss-spacing-m)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall{flex:0 0 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover{opacity:.5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path{stroke:var(--ss-error-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:60%;text-align:center;padding:0 var(--ss-spacing-s) 0 0}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg{flex:0 1 auto;width:13px;height:13px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path{fill:none;stroke:var(--ss-success-color);stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child{stroke-width:5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child{stroke-width:11}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable{flex:0 1 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow{flex:1 1 auto;width:10px;height:10px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content .ss-list .ss-optgroup .ss-option{padding:var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l)*3)}.ss-content .ss-list .ss-option{display:flex;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);color:var(--ss-font-color);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-highlighted,.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;background-color:var(--ss-disabled-color)}.ss-content .ss-list .ss-option.ss-disabled:hover{color:var(--ss-font-color)}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--ss-highlight-color)}/*# sourceMappingURL=slimselect.css.map */
|
package/dist/slimselect.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/slim-select/slimselect.scss"],"names":[],"mappings":"AAAA,MAEE,4BACA,uBACA,yBACA,qCACA,6BACA,2BACA,8BACA,4BACA,0BACA,0BAGA,uBACA,2BAGA,oBACA,oBACA,oBAGA,4BACA,wBAIF,sBACE,GACE,mBACA,UAEF,KACE,mBACA,WAGJ,uBACE,GACE,mBACA,UAEF,KACE,mBACA,WAKJ,SACE,wBAIF,SACE,aACA,mBACA,kBACA,iBACA,2BACA,iCACA,WACA,4BACA,eACA,wCACA,sCACA,oCACA,UACA,sBACA,uDACA,gBAEA,eACE,yCAGF,qBACE,0CACA,mBAGE,6CACE,2BAIA,2DACE,mBAMR,uBACE,2BACA,4BAEF,uBACE,8BACA,+BAGF,oBACE,oBACA,eACA,wBACA,cAEA,oCACE,aACA,wFACA,yBACA,gBACA,mBACA,WACA,uCACA,gBACA,uBACA,mBAIF,4BACE,aACA,iBACA,mBACA,kBACA,eACA,yBACA,cACA,gDACA,yCACA,sCAIF,+BACE,aACA,yCAIF,8BACE,aACA,iBACA,mBACA,kBACA,yCACA,sCACA,0BACA,8CACA,mCACA,yBAEA,2CACE,2BACA,8CACA,mCAGF,6CACE,eACA,yBACA,cACA,gDAGF,+CACE,aACA,mBACA,2BACA,0BACA,gDACA,eACA,yCACA,uBAEA,mDACE,2BACA,0BAEA,wDACE,UACA,0BACA,gBACA,qBACA,sBAOV,sBACE,aACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/slim-select/slimselect.scss"],"names":[],"mappings":"AAAA,MAEE,4BACA,uBACA,yBACA,qCACA,6BACA,2BACA,8BACA,4BACA,0BACA,0BAGA,uBACA,2BAGA,oBACA,oBACA,oBAGA,4BACA,wBAIF,sBACE,GACE,mBACA,UAEF,KACE,mBACA,WAGJ,uBACE,GACE,mBACA,UAEF,KACE,mBACA,WAKJ,SACE,wBAIF,SACE,aACA,mBACA,kBACA,iBACA,2BACA,iCACA,WACA,4BACA,eACA,wCACA,sCACA,oCACA,UACA,sBACA,uDACA,gBAEA,eACE,yCAGF,qBACE,0CACA,mBAGE,6CACE,2BAIA,2DACE,mBAMR,uBACE,2BACA,4BAEF,uBACE,8BACA,+BAGF,oBACE,oBACA,eACA,wBACA,cAEA,oCACE,aACA,wFACA,yBACA,gBACA,mBACA,WACA,uCACA,gBACA,uBACA,mBAIF,4BACE,aACA,iBACA,mBACA,kBACA,eACA,yBACA,cACA,gDACA,yCACA,sCAIF,+BACE,aACA,yCAIF,8BACE,aACA,iBACA,mBACA,kBACA,yCACA,sCACA,0BACA,8CACA,mCACA,yBAEA,2CACE,2BACA,8CACA,mCAGF,6CACE,eACA,yBACA,cACA,gDAGF,+CACE,aACA,mBACA,2BACA,0BACA,gDACA,eACA,yCACA,uBAEA,mDACE,2BACA,0BAEA,wDACE,UACA,0BACA,gBACA,qBACA,sBAOV,sBACE,cACA,aACA,mBACA,uBACA,kBACA,YACA,mDAEA,0BACE,UACA,WAEA,+BACE,UACA,4BACA,gBACA,qBACA,sBAKN,mBACE,cACA,aACA,mBACA,yBACA,WACA,YACA,yDAEA,wBACE,UACA,4BACA,gBACA,qBACA,sBACA,oCACA,sCAMN,YACE,kBACA,aACA,YACA,sBACA,WACA,oCACA,sBACA,wCACA,oCACA,mFACA,UACA,oBACA,4BACA,gBACA,cAEA,wBACE,kBACA,YAGF,0BACE,8BACA,UACA,oBACA,+BACA,+CACA,gDAGF,0BACE,UACA,oBACA,4BACA,kDACA,mDAGF,uBACE,cACA,aACA,mBACA,wFAEA,6BACE,oBACA,kBACA,oBACA,cACA,WACA,cACA,gDACA,SACA,wCACA,sCACA,oCACA,UACA,gBACA,sBAEA,0CACE,uCACA,sBAGF,mCACE,yCAIJ,mCACE,oBACA,uBACA,mBACA,eACA,cACA,YACA,iCACA,wCACA,sCAEA,uCACE,aACA,mBACA,yBACA,cACA,WACA,YACA,yDAEA,4CACE,UACA,4BACA,gBACA,qBACA,sBAMR,qBACE,cACA,YACA,kBACA,gBAEA,+BACE,4BACA,4BAGF,mCACE,2BACA,4BAME,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
|
@@ -50,45 +50,6 @@ function kebabCase(str) {
|
|
|
50
50
|
return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
class Settings {
|
|
54
|
-
constructor(settings) {
|
|
55
|
-
this.id = '';
|
|
56
|
-
this.style = '';
|
|
57
|
-
this.class = [];
|
|
58
|
-
this.isMultiple = false;
|
|
59
|
-
this.isOpen = false;
|
|
60
|
-
this.isFullOpen = false;
|
|
61
|
-
this.intervalMove = null;
|
|
62
|
-
if (!settings) {
|
|
63
|
-
settings = {};
|
|
64
|
-
}
|
|
65
|
-
this.id = 'ss-' + generateID();
|
|
66
|
-
this.style = settings.style || '';
|
|
67
|
-
this.class = settings.class || [];
|
|
68
|
-
this.disabled = settings.disabled !== undefined ? settings.disabled : false;
|
|
69
|
-
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
|
|
70
|
-
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
|
|
71
|
-
this.ariaLabel = settings.ariaLabel || 'Combobox';
|
|
72
|
-
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
|
73
|
-
this.searchText = settings.searchText || 'No Results';
|
|
74
|
-
this.searchingText = settings.searchingText || 'Searching...';
|
|
75
|
-
this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
|
|
76
|
-
this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
|
|
77
|
-
this.contentLocation = settings.contentLocation || document.body;
|
|
78
|
-
this.contentPosition = settings.contentPosition || 'absolute';
|
|
79
|
-
this.openPosition = settings.openPosition || 'auto';
|
|
80
|
-
this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
|
|
81
|
-
this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
|
|
82
|
-
this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
|
|
83
|
-
this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
|
|
84
|
-
this.minSelected = settings.minSelected || 0;
|
|
85
|
-
this.maxSelected = settings.maxSelected || 1000;
|
|
86
|
-
this.timeoutDelay = settings.timeoutDelay || 200;
|
|
87
|
-
this.maxValuesShown = settings.maxValuesShown || 20;
|
|
88
|
-
this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
53
|
class Optgroup {
|
|
93
54
|
constructor(optgroup) {
|
|
94
55
|
this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
|
|
@@ -562,6 +523,7 @@ class Render {
|
|
|
562
523
|
return;
|
|
563
524
|
}
|
|
564
525
|
this.renderMultipleValues();
|
|
526
|
+
this.updateDeselectAll();
|
|
565
527
|
}
|
|
566
528
|
renderSingleValue() {
|
|
567
529
|
const selected = this.store.filter((o) => {
|
|
@@ -647,18 +609,22 @@ class Render {
|
|
|
647
609
|
}
|
|
648
610
|
}
|
|
649
611
|
if (shouldAdd) {
|
|
650
|
-
if (
|
|
612
|
+
if (this.settings.keepOrder) {
|
|
651
613
|
this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
|
|
652
614
|
}
|
|
653
|
-
else if (d === 0) {
|
|
654
|
-
this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d]);
|
|
655
|
-
}
|
|
656
615
|
else {
|
|
657
|
-
currentNodes
|
|
616
|
+
if (currentNodes.length === 0) {
|
|
617
|
+
this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
|
|
618
|
+
}
|
|
619
|
+
else if (d === 0) {
|
|
620
|
+
this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d]);
|
|
621
|
+
}
|
|
622
|
+
else {
|
|
623
|
+
currentNodes[d - 1].insertAdjacentElement('afterend', this.multipleValue(selectedOptions[d]));
|
|
624
|
+
}
|
|
658
625
|
}
|
|
659
626
|
}
|
|
660
627
|
}
|
|
661
|
-
this.updateDeselectAll();
|
|
662
628
|
}
|
|
663
629
|
multipleValue(option) {
|
|
664
630
|
const value = document.createElement('div');
|
|
@@ -1560,6 +1526,46 @@ class Select {
|
|
|
1560
1526
|
}
|
|
1561
1527
|
}
|
|
1562
1528
|
|
|
1529
|
+
class Settings {
|
|
1530
|
+
constructor(settings) {
|
|
1531
|
+
this.id = '';
|
|
1532
|
+
this.style = '';
|
|
1533
|
+
this.class = [];
|
|
1534
|
+
this.isMultiple = false;
|
|
1535
|
+
this.isOpen = false;
|
|
1536
|
+
this.isFullOpen = false;
|
|
1537
|
+
this.intervalMove = null;
|
|
1538
|
+
if (!settings) {
|
|
1539
|
+
settings = {};
|
|
1540
|
+
}
|
|
1541
|
+
this.id = 'ss-' + generateID();
|
|
1542
|
+
this.style = settings.style || '';
|
|
1543
|
+
this.class = settings.class || [];
|
|
1544
|
+
this.disabled = settings.disabled !== undefined ? settings.disabled : false;
|
|
1545
|
+
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
|
|
1546
|
+
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
|
|
1547
|
+
this.ariaLabel = settings.ariaLabel || 'Combobox';
|
|
1548
|
+
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
|
1549
|
+
this.searchText = settings.searchText || 'No Results';
|
|
1550
|
+
this.searchingText = settings.searchingText || 'Searching...';
|
|
1551
|
+
this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
|
|
1552
|
+
this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
|
|
1553
|
+
this.contentLocation = settings.contentLocation || document.body;
|
|
1554
|
+
this.contentPosition = settings.contentPosition || 'absolute';
|
|
1555
|
+
this.openPosition = settings.openPosition || 'auto';
|
|
1556
|
+
this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
|
|
1557
|
+
this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
|
|
1558
|
+
this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
|
|
1559
|
+
this.keepOrder = settings.keepOrder !== undefined ? settings.keepOrder : false;
|
|
1560
|
+
this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
|
|
1561
|
+
this.minSelected = settings.minSelected || 0;
|
|
1562
|
+
this.maxSelected = settings.maxSelected || 1000;
|
|
1563
|
+
this.timeoutDelay = settings.timeoutDelay || 200;
|
|
1564
|
+
this.maxValuesShown = settings.maxValuesShown || 20;
|
|
1565
|
+
this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
|
|
1566
|
+
}
|
|
1567
|
+
}
|
|
1568
|
+
|
|
1563
1569
|
class SlimSelect {
|
|
1564
1570
|
constructor(config) {
|
|
1565
1571
|
var _a;
|
|
@@ -1659,7 +1665,7 @@ class SlimSelect {
|
|
|
1659
1665
|
if (config.data) {
|
|
1660
1666
|
this.select.updateOptions(this.store.getData());
|
|
1661
1667
|
}
|
|
1662
|
-
const
|
|
1668
|
+
const renderCallbacks = {
|
|
1663
1669
|
open: this.open.bind(this),
|
|
1664
1670
|
close: this.close.bind(this),
|
|
1665
1671
|
addable: this.events.addable ? this.events.addable : undefined,
|
|
@@ -1669,7 +1675,7 @@ class SlimSelect {
|
|
|
1669
1675
|
beforeChange: this.events.beforeChange,
|
|
1670
1676
|
afterChange: this.events.afterChange,
|
|
1671
1677
|
};
|
|
1672
|
-
this.render = new Render(this.settings, this.store,
|
|
1678
|
+
this.render = new Render(this.settings, this.store, renderCallbacks);
|
|
1673
1679
|
this.render.renderValues();
|
|
1674
1680
|
this.render.renderOptions(this.store.getData());
|
|
1675
1681
|
const selectAriaLabel = this.selectEl.getAttribute('aria-label');
|
|
@@ -1683,7 +1689,6 @@ class SlimSelect {
|
|
|
1683
1689
|
if (this.selectEl.parentNode) {
|
|
1684
1690
|
this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
|
|
1685
1691
|
}
|
|
1686
|
-
document.addEventListener('click', this.documentClick);
|
|
1687
1692
|
window.addEventListener('resize', this.windowResize, false);
|
|
1688
1693
|
if (this.settings.openPosition === 'auto') {
|
|
1689
1694
|
window.addEventListener('scroll', this.windowScroll, false);
|
|
@@ -1779,6 +1784,7 @@ class SlimSelect {
|
|
|
1779
1784
|
if (this.settings.isOpen) {
|
|
1780
1785
|
this.settings.isFullOpen = true;
|
|
1781
1786
|
}
|
|
1787
|
+
document.addEventListener('click', this.documentClick);
|
|
1782
1788
|
}, this.settings.timeoutDelay);
|
|
1783
1789
|
if (this.settings.contentPosition === 'absolute') {
|
|
1784
1790
|
if (this.settings.intervalMove) {
|
|
@@ -1805,6 +1811,7 @@ class SlimSelect {
|
|
|
1805
1811
|
if (this.events.afterClose) {
|
|
1806
1812
|
this.events.afterClose();
|
|
1807
1813
|
}
|
|
1814
|
+
document.removeEventListener('click', this.documentClick);
|
|
1808
1815
|
}, this.settings.timeoutDelay);
|
|
1809
1816
|
if (this.settings.intervalMove) {
|
|
1810
1817
|
clearInterval(this.settings.intervalMove);
|
|
@@ -53,45 +53,6 @@ var SlimSelect = (function () {
|
|
|
53
53
|
return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
class Settings {
|
|
57
|
-
constructor(settings) {
|
|
58
|
-
this.id = '';
|
|
59
|
-
this.style = '';
|
|
60
|
-
this.class = [];
|
|
61
|
-
this.isMultiple = false;
|
|
62
|
-
this.isOpen = false;
|
|
63
|
-
this.isFullOpen = false;
|
|
64
|
-
this.intervalMove = null;
|
|
65
|
-
if (!settings) {
|
|
66
|
-
settings = {};
|
|
67
|
-
}
|
|
68
|
-
this.id = 'ss-' + generateID();
|
|
69
|
-
this.style = settings.style || '';
|
|
70
|
-
this.class = settings.class || [];
|
|
71
|
-
this.disabled = settings.disabled !== undefined ? settings.disabled : false;
|
|
72
|
-
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
|
|
73
|
-
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
|
|
74
|
-
this.ariaLabel = settings.ariaLabel || 'Combobox';
|
|
75
|
-
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
|
76
|
-
this.searchText = settings.searchText || 'No Results';
|
|
77
|
-
this.searchingText = settings.searchingText || 'Searching...';
|
|
78
|
-
this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
|
|
79
|
-
this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
|
|
80
|
-
this.contentLocation = settings.contentLocation || document.body;
|
|
81
|
-
this.contentPosition = settings.contentPosition || 'absolute';
|
|
82
|
-
this.openPosition = settings.openPosition || 'auto';
|
|
83
|
-
this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
|
|
84
|
-
this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
|
|
85
|
-
this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
|
|
86
|
-
this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
|
|
87
|
-
this.minSelected = settings.minSelected || 0;
|
|
88
|
-
this.maxSelected = settings.maxSelected || 1000;
|
|
89
|
-
this.timeoutDelay = settings.timeoutDelay || 200;
|
|
90
|
-
this.maxValuesShown = settings.maxValuesShown || 20;
|
|
91
|
-
this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
56
|
class Optgroup {
|
|
96
57
|
constructor(optgroup) {
|
|
97
58
|
this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
|
|
@@ -565,6 +526,7 @@ var SlimSelect = (function () {
|
|
|
565
526
|
return;
|
|
566
527
|
}
|
|
567
528
|
this.renderMultipleValues();
|
|
529
|
+
this.updateDeselectAll();
|
|
568
530
|
}
|
|
569
531
|
renderSingleValue() {
|
|
570
532
|
const selected = this.store.filter((o) => {
|
|
@@ -650,18 +612,22 @@ var SlimSelect = (function () {
|
|
|
650
612
|
}
|
|
651
613
|
}
|
|
652
614
|
if (shouldAdd) {
|
|
653
|
-
if (
|
|
615
|
+
if (this.settings.keepOrder) {
|
|
654
616
|
this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
|
|
655
617
|
}
|
|
656
|
-
else if (d === 0) {
|
|
657
|
-
this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d]);
|
|
658
|
-
}
|
|
659
618
|
else {
|
|
660
|
-
currentNodes
|
|
619
|
+
if (currentNodes.length === 0) {
|
|
620
|
+
this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
|
|
621
|
+
}
|
|
622
|
+
else if (d === 0) {
|
|
623
|
+
this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d]);
|
|
624
|
+
}
|
|
625
|
+
else {
|
|
626
|
+
currentNodes[d - 1].insertAdjacentElement('afterend', this.multipleValue(selectedOptions[d]));
|
|
627
|
+
}
|
|
661
628
|
}
|
|
662
629
|
}
|
|
663
630
|
}
|
|
664
|
-
this.updateDeselectAll();
|
|
665
631
|
}
|
|
666
632
|
multipleValue(option) {
|
|
667
633
|
const value = document.createElement('div');
|
|
@@ -1563,6 +1529,46 @@ var SlimSelect = (function () {
|
|
|
1563
1529
|
}
|
|
1564
1530
|
}
|
|
1565
1531
|
|
|
1532
|
+
class Settings {
|
|
1533
|
+
constructor(settings) {
|
|
1534
|
+
this.id = '';
|
|
1535
|
+
this.style = '';
|
|
1536
|
+
this.class = [];
|
|
1537
|
+
this.isMultiple = false;
|
|
1538
|
+
this.isOpen = false;
|
|
1539
|
+
this.isFullOpen = false;
|
|
1540
|
+
this.intervalMove = null;
|
|
1541
|
+
if (!settings) {
|
|
1542
|
+
settings = {};
|
|
1543
|
+
}
|
|
1544
|
+
this.id = 'ss-' + generateID();
|
|
1545
|
+
this.style = settings.style || '';
|
|
1546
|
+
this.class = settings.class || [];
|
|
1547
|
+
this.disabled = settings.disabled !== undefined ? settings.disabled : false;
|
|
1548
|
+
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
|
|
1549
|
+
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
|
|
1550
|
+
this.ariaLabel = settings.ariaLabel || 'Combobox';
|
|
1551
|
+
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
|
1552
|
+
this.searchText = settings.searchText || 'No Results';
|
|
1553
|
+
this.searchingText = settings.searchingText || 'Searching...';
|
|
1554
|
+
this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
|
|
1555
|
+
this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
|
|
1556
|
+
this.contentLocation = settings.contentLocation || document.body;
|
|
1557
|
+
this.contentPosition = settings.contentPosition || 'absolute';
|
|
1558
|
+
this.openPosition = settings.openPosition || 'auto';
|
|
1559
|
+
this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
|
|
1560
|
+
this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
|
|
1561
|
+
this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
|
|
1562
|
+
this.keepOrder = settings.keepOrder !== undefined ? settings.keepOrder : false;
|
|
1563
|
+
this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
|
|
1564
|
+
this.minSelected = settings.minSelected || 0;
|
|
1565
|
+
this.maxSelected = settings.maxSelected || 1000;
|
|
1566
|
+
this.timeoutDelay = settings.timeoutDelay || 200;
|
|
1567
|
+
this.maxValuesShown = settings.maxValuesShown || 20;
|
|
1568
|
+
this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
|
|
1569
|
+
}
|
|
1570
|
+
}
|
|
1571
|
+
|
|
1566
1572
|
class SlimSelect {
|
|
1567
1573
|
constructor(config) {
|
|
1568
1574
|
var _a;
|
|
@@ -1662,7 +1668,7 @@ var SlimSelect = (function () {
|
|
|
1662
1668
|
if (config.data) {
|
|
1663
1669
|
this.select.updateOptions(this.store.getData());
|
|
1664
1670
|
}
|
|
1665
|
-
const
|
|
1671
|
+
const renderCallbacks = {
|
|
1666
1672
|
open: this.open.bind(this),
|
|
1667
1673
|
close: this.close.bind(this),
|
|
1668
1674
|
addable: this.events.addable ? this.events.addable : undefined,
|
|
@@ -1672,7 +1678,7 @@ var SlimSelect = (function () {
|
|
|
1672
1678
|
beforeChange: this.events.beforeChange,
|
|
1673
1679
|
afterChange: this.events.afterChange,
|
|
1674
1680
|
};
|
|
1675
|
-
this.render = new Render(this.settings, this.store,
|
|
1681
|
+
this.render = new Render(this.settings, this.store, renderCallbacks);
|
|
1676
1682
|
this.render.renderValues();
|
|
1677
1683
|
this.render.renderOptions(this.store.getData());
|
|
1678
1684
|
const selectAriaLabel = this.selectEl.getAttribute('aria-label');
|
|
@@ -1686,7 +1692,6 @@ var SlimSelect = (function () {
|
|
|
1686
1692
|
if (this.selectEl.parentNode) {
|
|
1687
1693
|
this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
|
|
1688
1694
|
}
|
|
1689
|
-
document.addEventListener('click', this.documentClick);
|
|
1690
1695
|
window.addEventListener('resize', this.windowResize, false);
|
|
1691
1696
|
if (this.settings.openPosition === 'auto') {
|
|
1692
1697
|
window.addEventListener('scroll', this.windowScroll, false);
|
|
@@ -1782,6 +1787,7 @@ var SlimSelect = (function () {
|
|
|
1782
1787
|
if (this.settings.isOpen) {
|
|
1783
1788
|
this.settings.isFullOpen = true;
|
|
1784
1789
|
}
|
|
1790
|
+
document.addEventListener('click', this.documentClick);
|
|
1785
1791
|
}, this.settings.timeoutDelay);
|
|
1786
1792
|
if (this.settings.contentPosition === 'absolute') {
|
|
1787
1793
|
if (this.settings.intervalMove) {
|
|
@@ -1808,6 +1814,7 @@ var SlimSelect = (function () {
|
|
|
1808
1814
|
if (this.events.afterClose) {
|
|
1809
1815
|
this.events.afterClose();
|
|
1810
1816
|
}
|
|
1817
|
+
document.removeEventListener('click', this.documentClick);
|
|
1811
1818
|
}, this.settings.timeoutDelay);
|
|
1812
1819
|
if (this.settings.intervalMove) {
|
|
1813
1820
|
clearInterval(this.settings.intervalMove);
|