slim-select 3.0.5 → 3.1.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/dist/index.d.ts +6 -1
- package/dist/react/index.d.ts +6 -1
- package/dist/react/index.js +183 -129
- package/dist/react/index.umd.js +4 -4
- package/dist/slimselect.cjs.js +1 -1
- package/dist/slimselect.cjs.js.map +1 -1
- package/dist/slimselect.css +1 -1
- package/dist/slimselect.css.map +1 -1
- package/dist/slimselect.es.js +115 -61
- package/dist/slimselect.es.js.map +1 -1
- package/dist/slimselect.iife.js +1 -1
- package/dist/slimselect.iife.js.map +1 -1
- package/dist/slimselect.js +1 -1
- package/dist/slimselect.js.map +1 -1
- package/dist/vue/index.d.ts +6 -1
- package/dist/vue/index.js +106 -52
- package/dist/vue/index.umd.js +1 -1
- package/index.html +1 -1
- package/package.json +1 -1
- package/src/slim-select/index.test.ts +3 -3
- package/src/slim-select/index.ts +23 -2
- package/src/slim-select/render.test.ts +14 -0
- package/src/slim-select/render.ts +5 -4
- package/src/slim-select/select.ts +151 -0
- package/src/slim-select/settings.test.ts +1 -1
- package/src/slim-select/settings.ts +1 -1
- package/src/slim-select/slimselect.scss +52 -15
- package/vite.config.docs.mts +3 -2
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-dir-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-dir-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%;min-width:0;max-width:100%;overflow:hidden}.ss-main .ss-values .ss-placeholder{display:block;width:100%;min-width:0;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;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:block;margin:auto 0px auto var(--ss-spacing-s);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;max-width:calc(100% - 20px)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;max-width:100%;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{flex:1;min-width:0;font-size:12px;line-height:1;color:var(--ss-bg-color);padding:var(--ss-spacing-s) var(--ss-spacing-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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;padding: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);overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-fixed{position:fixed}.ss-content.ss-dir-above{transform-origin:center bottom;flex-direction:column-reverse;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-dir-below{transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content.ss-open{opacity:1;transform:scaleY(1)}.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:block;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);white-space:normal;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{display:inline-block;background-color:var(--ss-highlight-color)}/*# sourceMappingURL=slimselect.css.map */
|
|
1
|
+
:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-placeholder-color: #8d8d8d;--ss-disabled-color: #dcdee2;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-focus-color: var(--ss-primary-color);--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-main-height: 40px;--ss-content-height: 300px;--ss-search-height: 40px;--ss-option-height: auto;--ss-spacing-l: 9px;--ss-spacing-m: 7px;--ss-spacing-s: 5px;--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-dir-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-dir-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%;min-width:0;max-width:100%;overflow:hidden}.ss-main .ss-values .ss-placeholder{display:block;width:100%;min-width:0;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;color:var(--ss-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:block;margin:auto 0px auto var(--ss-spacing-s);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;max-width:calc(100% - 20px)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;max-width:100%;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{flex:1;min-width:0;font-size:12px;line-height:1;color:var(--ss-bg-color);padding:var(--ss-spacing-s) var(--ss-spacing-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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;padding: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);overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-fixed{position:fixed}.ss-content.ss-dir-above{transform-origin:center bottom;flex-direction:column-reverse;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-dir-below{transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content.ss-open{opacity:1;transform:scaleY(1)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;border-bottom:1px solid var(--ss-border-color)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;height:var(--ss-search-height);padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:none;background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:none}.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-option{transition:max-height var(--ss-animation-timing) ease,opacity var(--ss-animation-timing) ease,padding-top var(--ss-animation-timing) ease,padding-bottom var(--ss-animation-timing) ease,margin-top var(--ss-animation-timing) ease,margin-bottom var(--ss-animation-timing) ease}.ss-content .ss-list .ss-optgroup.ss-open .ss-option{max-height:100px;opacity:1;overflow:visible}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;max-height:0;opacity:0;overflow:hidden}.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;align-items:center;min-height:var(--ss-option-height);padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);white-space:normal;color:var(--ss-font-color);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover:not(.ss-disabled){color:var(--ss-bg-color);background-color:var(--ss-primary-color);border-left:5px solid var(--ss-primary-color);transition:border-left var(--ss-animation-timing) ease}.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{display:inline-block;background-color:var(--ss-highlight-color)}.ss-content .ss-list .ss-search{display:flex;flex-direction:row;align-items:center;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}/*# 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,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/slim-select/slimselect.scss"],"names":[],"mappings":"AAAA,MAEE,4BACA,uBACA,yBACA,gCACA,6BACA,2BACA,8BACA,0CACA,4BACA,0BAGA,uBACA,2BACA,yBACA,yBAGA,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,sBACE,2BACA,4BAEF,sBACE,8BACA,+BAGF,oBACE,oBACA,eACA,wBACA,cACA,YACA,eACA,gBAEA,oCACE,cACA,WACA,YACA,wFACA,yBACA,gBACA,kCACA,gBACA,uBACA,mBAIF,4BACE,aACA,iBACA,mBACA,kBACA,eACA,yBACA,cACA,gDACA,yCACA,sCAIF,+BACE,cACA,yCACA,YACA,gBACA,uBACA,mBACA,cACA,4BAIF,8BACE,aACA,iBACA,mBACA,kBACA,eACA,yCACA,sCACA,0BACA,8CACA,mCACA,yBAEA,2CACE,2BACA,8CACA,mCAGF,6CACE,OACA,YACA,eACA,cACA,yBACA,gDACA,gBACA,uBACA,mBAGF,+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,oDAEA,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,WACE,wEAEF,UACA,oBACA,gBACA,cAEA,wBACE,kBACA,YAGF,qBACE,eAGF,yBACE,+BACA,8BACA,+CACA,gDAGF,yBACE,4BACA,kDACA,mDAGF,oBACE,UACA,oBAGF,uBACE,cACA,aACA,mBACA,+CAEA,6BACE,oBACA,kBACA,oBACA,cACA,WACA,cACA,+BACA,gDACA,SACA,YACA,oCACA,UACA,gBACA,sBAEA,0CACE,kCACA,sBAGF,mCACE,gBAIJ,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,4BAIA,6CACE,WACE,uQASF,qDACE,iBACA,UACA,iBAMF,sDACE,yBACA,4BACA,wBACA,2BACA,aACA,UACA,gBAIJ,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,mBACA,mCACA,wFACA,mBACA,2BACA,eACA,iBAEA,wDACE,yBACA,yCACA,8CACA,uDAGF,6GAEE,yBACA,yCAGF,4CACE,mBACA,0CAEA,kDACE,2BAKJ,qDACE,qBACA,2CAIJ,gCACE,aACA,mBACA,mBACA","file":"slimselect.css"}
|
package/dist/slimselect.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
class
|
|
1
|
+
class A {
|
|
2
2
|
main;
|
|
3
3
|
// Placeholder
|
|
4
4
|
placeholder;
|
|
@@ -62,7 +62,7 @@ class E {
|
|
|
62
62
|
e || (e = {}), this.main = e.main || "ss-main", this.placeholder = e.placeholder || "ss-placeholder", this.values = e.values || "ss-values", this.single = e.single || "ss-single", this.max = e.max || "ss-max", this.value = e.value || "ss-value", this.valueText = e.valueText || "ss-value-text", this.valueDelete = e.valueDelete || "ss-value-delete", this.valueOut = e.valueOut || "ss-value-out", this.deselect = e.deselect || "ss-deselect", this.deselectPath = e.deselectPath || "M10,10 L90,90 M10,90 L90,10", this.arrow = e.arrow || "ss-arrow", this.arrowClose = e.arrowClose || "M10,30 L50,70 L90,30", this.arrowOpen = e.arrowOpen || "M10,70 L50,30 L90,70", this.content = e.content || "ss-content", this.contentOpen = e.contentOpen || "ss-open", this.dirAbove = e.dirAbove || "ss-dir-above", this.dirBelow = e.dirBelow || "ss-dir-below", this.search = e.search || "ss-search", this.searchHighlighter = e.searchHighlighter || "ss-search-highlight", this.searching = e.searching || "ss-searching", this.addable = e.addable || "ss-addable", this.addablePath = e.addablePath || "M50,10 L50,90 M10,50 L90,50", this.list = e.list || "ss-list", this.optgroup = e.optgroup || "ss-optgroup", this.optgroupLabel = e.optgroupLabel || "ss-optgroup-label", this.optgroupLabelText = e.optgroupLabelText || "ss-optgroup-label-text", this.optgroupActions = e.optgroupActions || "ss-optgroup-actions", this.optgroupSelectAll = e.optgroupSelectAll || "ss-selectall", this.optgroupSelectAllBox = e.optgroupSelectAllBox || "M60,10 L10,10 L10,90 L90,90 L90,50", this.optgroupSelectAllCheck = e.optgroupSelectAllCheck || "M30,45 L50,70 L90,10", this.optgroupClosable = e.optgroupClosable || "ss-closable", this.option = e.option || "ss-option", this.optionDelete = e.optionDelete || "M10,10 L90,90 M10,90 L90,10", this.highlighted = e.highlighted || "ss-highlighted", this.mainOpen = e.mainOpen || "ss-open", this.close = e.close || "ss-close", this.selected = e.selected || "ss-selected", this.error = e.error || "ss-error", this.disabled = e.disabled || "ss-disabled", this.hide = e.hide || "ss-hide";
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
-
function
|
|
65
|
+
function C() {
|
|
66
66
|
return Math.random().toString(36).substring(2, 10);
|
|
67
67
|
}
|
|
68
68
|
function T(p, e) {
|
|
@@ -74,7 +74,7 @@ function T(p, e) {
|
|
|
74
74
|
}
|
|
75
75
|
return t(p, e) || s(p, e);
|
|
76
76
|
}
|
|
77
|
-
function
|
|
77
|
+
function O(p, e = 50, t = !1) {
|
|
78
78
|
let s;
|
|
79
79
|
return function(...i) {
|
|
80
80
|
const l = self, a = () => {
|
|
@@ -83,7 +83,7 @@ function C(p, e = 50, t = !1) {
|
|
|
83
83
|
clearTimeout(s), s = setTimeout(a, e), n && p.apply(l, i);
|
|
84
84
|
};
|
|
85
85
|
}
|
|
86
|
-
function
|
|
86
|
+
function L(p, e) {
|
|
87
87
|
return JSON.stringify(p) === JSON.stringify(e);
|
|
88
88
|
}
|
|
89
89
|
function D(p) {
|
|
@@ -105,10 +105,10 @@ class u {
|
|
|
105
105
|
data;
|
|
106
106
|
mandatory;
|
|
107
107
|
constructor(e) {
|
|
108
|
-
this.id = !e.id || e.id === "" ?
|
|
108
|
+
this.id = !e.id || e.id === "" ? C() : e.id, this.value = e.value === void 0 ? e.text || "" : e.value || "", this.text = e.text || "", this.html = e.html || "", this.defaultSelected = e.defaultSelected !== void 0 ? e.defaultSelected : !1, this.selected = e.selected !== void 0 ? e.selected : !1, this.display = e.display !== void 0 ? e.display : !0, this.disabled = e.disabled !== void 0 ? e.disabled : !1, this.mandatory = e.mandatory !== void 0 ? e.mandatory : !1, this.placeholder = e.placeholder !== void 0 ? e.placeholder : !1, this.class = e.class || "", this.style = e.style || "", this.data = e.data || {};
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
|
-
class
|
|
111
|
+
class m {
|
|
112
112
|
id;
|
|
113
113
|
label;
|
|
114
114
|
selectAll;
|
|
@@ -116,7 +116,7 @@ class g {
|
|
|
116
116
|
closable;
|
|
117
117
|
options;
|
|
118
118
|
constructor(e) {
|
|
119
|
-
if (this.id = !e.id || e.id === "" ?
|
|
119
|
+
if (this.id = !e.id || e.id === "" ? C() : e.id, this.label = e.label || "", this.selectAll = e.selectAll === void 0 ? !1 : e.selectAll, this.selectAllText = e.selectAllText || "Select All", this.closable = e.closable || "off", this.options = [], e.options)
|
|
120
120
|
for (const t of e.options)
|
|
121
121
|
this.options.push(new u(t));
|
|
122
122
|
}
|
|
@@ -135,7 +135,7 @@ class k {
|
|
|
135
135
|
return new Error("Data must be an array");
|
|
136
136
|
for (let t of e)
|
|
137
137
|
if (t)
|
|
138
|
-
if (t instanceof
|
|
138
|
+
if (t instanceof m || "label" in t) {
|
|
139
139
|
if (!("label" in t))
|
|
140
140
|
return new Error("Optgroup must have a label");
|
|
141
141
|
if ("options" in t && t.options)
|
|
@@ -160,11 +160,11 @@ class k {
|
|
|
160
160
|
let t = [];
|
|
161
161
|
return e.forEach((s) => {
|
|
162
162
|
if (s) {
|
|
163
|
-
if (s instanceof
|
|
163
|
+
if (s instanceof m || "label" in s) {
|
|
164
164
|
let i = [];
|
|
165
165
|
"options" in s && s.options && s.options.forEach((l) => {
|
|
166
166
|
i.push(new u(l));
|
|
167
|
-
}), i.length > 0 && t.push(new
|
|
167
|
+
}), i.length > 0 && t.push(new m(s));
|
|
168
168
|
}
|
|
169
169
|
(s instanceof u || "text" in s) && t.push(new u(s));
|
|
170
170
|
}
|
|
@@ -181,7 +181,7 @@ class k {
|
|
|
181
181
|
n = !0;
|
|
182
182
|
break;
|
|
183
183
|
}
|
|
184
|
-
if (o instanceof
|
|
184
|
+
if (o instanceof m) {
|
|
185
185
|
for (const c of o.options)
|
|
186
186
|
if (c.id === a.id) {
|
|
187
187
|
n = !0;
|
|
@@ -218,7 +218,7 @@ class k {
|
|
|
218
218
|
let s = null, i = !1;
|
|
219
219
|
const l = [];
|
|
220
220
|
for (let n of this.data) {
|
|
221
|
-
if (n instanceof
|
|
221
|
+
if (n instanceof m)
|
|
222
222
|
for (let o of n.options) {
|
|
223
223
|
s || (s = o);
|
|
224
224
|
let c = o[e] || "";
|
|
@@ -241,7 +241,7 @@ class k {
|
|
|
241
241
|
}
|
|
242
242
|
getOptgroupByID(e) {
|
|
243
243
|
for (let t of this.data)
|
|
244
|
-
if (t instanceof
|
|
244
|
+
if (t instanceof m && t.id === e)
|
|
245
245
|
return t;
|
|
246
246
|
return null;
|
|
247
247
|
}
|
|
@@ -255,7 +255,7 @@ class k {
|
|
|
255
255
|
getFirstOption() {
|
|
256
256
|
let e = null;
|
|
257
257
|
for (let t of this.data)
|
|
258
|
-
if (t instanceof
|
|
258
|
+
if (t instanceof m ? e = t.options[0] : t instanceof u && (e = t), e)
|
|
259
259
|
break;
|
|
260
260
|
return e;
|
|
261
261
|
}
|
|
@@ -268,12 +268,12 @@ class k {
|
|
|
268
268
|
filter(e, t) {
|
|
269
269
|
const s = [];
|
|
270
270
|
return this.data.forEach((i) => {
|
|
271
|
-
if (i instanceof
|
|
271
|
+
if (i instanceof m) {
|
|
272
272
|
let l = [];
|
|
273
273
|
if (i.options.forEach((n) => {
|
|
274
274
|
(!e || e(n)) && (t ? l.push(new u(n)) : s.push(new u(n)));
|
|
275
275
|
}), l.length > 0) {
|
|
276
|
-
let n = new
|
|
276
|
+
let n = new m(i);
|
|
277
277
|
n.options = l, s.push(n);
|
|
278
278
|
}
|
|
279
279
|
}
|
|
@@ -380,8 +380,8 @@ class N {
|
|
|
380
380
|
if (this.settings.isMultiple)
|
|
381
381
|
this.callbacks.setSelected([], !1), this.updateDeselectAll();
|
|
382
382
|
else {
|
|
383
|
-
const d = this.store.getFirstOption(),
|
|
384
|
-
this.callbacks.setSelected(
|
|
383
|
+
const d = this.store.getFirstOption(), g = d ? d.id : "";
|
|
384
|
+
this.callbacks.setSelected(g, !1);
|
|
385
385
|
}
|
|
386
386
|
this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(this.store.getSelectedOptions());
|
|
387
387
|
}
|
|
@@ -485,7 +485,7 @@ class N {
|
|
|
485
485
|
if (!(this.settings.minSelected && r.length < this.settings.minSelected) && (this.callbacks.beforeChange && (o = this.callbacks.beforeChange(r, c) === !0), o)) {
|
|
486
486
|
let h = [];
|
|
487
487
|
for (const f of r) {
|
|
488
|
-
if (f instanceof
|
|
488
|
+
if (f instanceof m)
|
|
489
489
|
for (const d of f.options)
|
|
490
490
|
d.id && h.push(d.id);
|
|
491
491
|
f instanceof u && h.push(f.id);
|
|
@@ -535,7 +535,7 @@ class N {
|
|
|
535
535
|
main: e,
|
|
536
536
|
input: t
|
|
537
537
|
};
|
|
538
|
-
if (this.settings.showSearch || (e.classList.add(this.classes.hide), t.readOnly = !0), t.type = "search", t.placeholder = this.settings.searchPlaceholder, t.tabIndex = -1, t.setAttribute("aria-label", this.settings.searchPlaceholder), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("autocapitalize", "off"), t.setAttribute("autocomplete", "off"), t.setAttribute("autocorrect", "off"), t.setAttribute("aria-hidden", "true"), t.oninput =
|
|
538
|
+
if (this.settings.showSearch || (e.classList.add(this.classes.hide), t.readOnly = !0), t.type = "search", t.placeholder = this.settings.searchPlaceholder, t.tabIndex = -1, t.setAttribute("aria-label", this.settings.searchPlaceholder), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("autocapitalize", "off"), t.setAttribute("autocomplete", "off"), t.setAttribute("autocorrect", "off"), t.setAttribute("aria-hidden", "true"), t.oninput = O((l) => {
|
|
539
539
|
this.callbacks.search(l.target.value);
|
|
540
540
|
}, 100), t.onkeydown = (l) => {
|
|
541
541
|
switch (l.key) {
|
|
@@ -599,9 +599,6 @@ class N {
|
|
|
599
599
|
searchFocus() {
|
|
600
600
|
this.content.search.input.focus();
|
|
601
601
|
}
|
|
602
|
-
clearSearch() {
|
|
603
|
-
this.content.search.input.value = "";
|
|
604
|
-
}
|
|
605
602
|
getOptions(e = !1, t = !1, s = !1) {
|
|
606
603
|
let i = "." + this.classes.option;
|
|
607
604
|
return e && (i += ":not(." + this.classes.placeholder + ")"), t && (i += ":not(." + this.classes.disabled + ")"), s && (i += ":not(." + this.classes.hide + ")"), Array.from(this.content.list.querySelectorAll(i));
|
|
@@ -681,7 +678,7 @@ class N {
|
|
|
681
678
|
));
|
|
682
679
|
const t = document.createDocumentFragment();
|
|
683
680
|
for (const s of e) {
|
|
684
|
-
if (s instanceof
|
|
681
|
+
if (s instanceof m) {
|
|
685
682
|
const i = document.createElement("div");
|
|
686
683
|
i.classList.add(this.classes.optgroup);
|
|
687
684
|
const l = document.createElement("div");
|
|
@@ -693,8 +690,8 @@ class N {
|
|
|
693
690
|
const o = document.createElement("div");
|
|
694
691
|
o.classList.add(this.classes.optgroupSelectAll);
|
|
695
692
|
let c = !0;
|
|
696
|
-
for (const
|
|
697
|
-
if (!
|
|
693
|
+
for (const g of s.options)
|
|
694
|
+
if (!g.selected) {
|
|
698
695
|
c = !1;
|
|
699
696
|
break;
|
|
700
697
|
}
|
|
@@ -706,24 +703,24 @@ class N {
|
|
|
706
703
|
const f = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
707
704
|
f.setAttribute("d", this.classes.optgroupSelectAllBox), h.appendChild(f);
|
|
708
705
|
const d = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
709
|
-
d.setAttribute("d", this.classes.optgroupSelectAllCheck), h.appendChild(d), o.addEventListener("click", (
|
|
710
|
-
|
|
711
|
-
const
|
|
706
|
+
d.setAttribute("d", this.classes.optgroupSelectAllCheck), h.appendChild(d), o.addEventListener("click", (g) => {
|
|
707
|
+
g.preventDefault(), g.stopPropagation();
|
|
708
|
+
const v = this.store.getSelected();
|
|
712
709
|
if (c) {
|
|
713
|
-
const w =
|
|
714
|
-
for (const
|
|
715
|
-
if (
|
|
710
|
+
const w = v.filter((S) => {
|
|
711
|
+
for (const b of s.options)
|
|
712
|
+
if (S === b.id)
|
|
716
713
|
return !1;
|
|
717
714
|
return !0;
|
|
718
715
|
});
|
|
719
716
|
this.callbacks.setSelected(w, !0);
|
|
720
717
|
return;
|
|
721
718
|
} else {
|
|
722
|
-
let w = s.options.map((
|
|
723
|
-
const
|
|
724
|
-
for (const
|
|
725
|
-
|
|
726
|
-
this.callbacks.setSelected(
|
|
719
|
+
let w = s.options.map((b) => b.id).filter((b) => b !== void 0);
|
|
720
|
+
const S = v.concat(w);
|
|
721
|
+
for (const b of s.options)
|
|
722
|
+
b.id && !this.store.getOptionByID(b.id) && this.callbacks.addOption(new u(b));
|
|
723
|
+
this.callbacks.setSelected(S, !0);
|
|
727
724
|
return;
|
|
728
725
|
}
|
|
729
726
|
}), n.appendChild(o);
|
|
@@ -762,7 +759,7 @@ class N {
|
|
|
762
759
|
) : e.html !== "" ? t.innerHTML = e.html : t.textContent = e.text, this.settings.showOptionTooltips && t.textContent && t.setAttribute("title", t.textContent), e.display || t.classList.add(this.classes.hide), e.disabled && t.classList.add(this.classes.disabled), e.selected && this.settings.hideSelected && t.classList.add(this.classes.hide), e.selected ? (t.classList.add(this.classes.selected), t.setAttribute("aria-selected", "true"), this.main.main.setAttribute("aria-activedescendant", t.id)) : (t.classList.remove(this.classes.selected), t.setAttribute("aria-selected", "false")), t.addEventListener("click", (s) => {
|
|
763
760
|
s.preventDefault(), s.stopPropagation();
|
|
764
761
|
const i = this.store.getSelected(), l = s.currentTarget, a = String(l.dataset.id), n = s.ctrlKey || s.metaKey;
|
|
765
|
-
if (e.disabled || !this.settings.isMultiple && e.selected && !this.settings.allowDeselect || this.settings.isMultiple && this.settings.maxSelected <= i.length && !e.selected || this.settings.isMultiple && this.settings.minSelected >= i.length && e.selected && !n)
|
|
762
|
+
if (e.disabled || !this.settings.isMultiple && e.selected && !this.settings.allowDeselect || e.selected && e.mandatory || this.settings.isMultiple && this.settings.maxSelected <= i.length && !e.selected || this.settings.isMultiple && this.settings.minSelected >= i.length && e.selected && !n)
|
|
766
763
|
return;
|
|
767
764
|
let o = !1;
|
|
768
765
|
const c = this.store.getSelectedOptions();
|
|
@@ -770,9 +767,9 @@ class N {
|
|
|
770
767
|
if (this.settings.isMultiple) {
|
|
771
768
|
const h = c.some((d) => d.id === a);
|
|
772
769
|
if (s.shiftKey && this.lastSelectedOption) {
|
|
773
|
-
const d = this.store.getDataOptions(),
|
|
774
|
-
if (
|
|
775
|
-
const w = Math.min(
|
|
770
|
+
const d = this.store.getDataOptions(), g = d.findIndex((w) => w.id === this.lastSelectedOption.id), v = d.findIndex((w) => w.id === e.id);
|
|
771
|
+
if (g >= 0 && v >= 0) {
|
|
772
|
+
const w = Math.min(g, v), S = Math.max(g, v), y = d.slice(w, S + 1).filter((x) => !c.find((E) => E.id === x.id));
|
|
776
773
|
c.length + y.length <= this.settings.maxSelected ? r = c.concat(y) : r = c;
|
|
777
774
|
} else
|
|
778
775
|
r = c;
|
|
@@ -802,10 +799,10 @@ class N {
|
|
|
802
799
|
const c = o.textContent || "", r = new RegExp("(" + l + ")", "i");
|
|
803
800
|
if (r.test(c)) {
|
|
804
801
|
const h = document.createElement("span");
|
|
805
|
-
c.split(r).forEach((d,
|
|
802
|
+
c.split(r).forEach((d, g) => {
|
|
806
803
|
if (d && r.test(d)) {
|
|
807
|
-
const
|
|
808
|
-
|
|
804
|
+
const v = document.createElement("mark");
|
|
805
|
+
v.className = s, v.textContent = d, h.appendChild(v);
|
|
809
806
|
} else d && h.appendChild(document.createTextNode(d));
|
|
810
807
|
}), o.parentNode?.replaceChild(h, o);
|
|
811
808
|
}
|
|
@@ -847,9 +844,14 @@ class M {
|
|
|
847
844
|
onClassChange;
|
|
848
845
|
onDisabledChange;
|
|
849
846
|
onOptionsChange;
|
|
847
|
+
onLabelClick;
|
|
850
848
|
// Change observers
|
|
851
849
|
listen = !1;
|
|
852
850
|
observer = null;
|
|
851
|
+
// Event handlers for preventing native select behavior (especially on iOS Safari)
|
|
852
|
+
preventNativeSelect = null;
|
|
853
|
+
preventNativeSelectMousedown = null;
|
|
854
|
+
preventNativeSelectFocus = null;
|
|
853
855
|
constructor(e) {
|
|
854
856
|
this.select = e, this.valueChange = this.valueChange.bind(this), this.select.addEventListener("change", this.valueChange, {
|
|
855
857
|
// allow bubbling of event
|
|
@@ -863,10 +865,16 @@ class M {
|
|
|
863
865
|
this.select.disabled = !0;
|
|
864
866
|
}
|
|
865
867
|
hideUI() {
|
|
866
|
-
this.select.tabIndex = -1, this.select.style.position = "absolute", this.select.style.width = "1px", this.select.style.height = "1px", this.select.style.opacity = "0", this.select.style.overflow = "hidden", this.select.style.pointerEvents = "none", this.select.style.margin = "0", this.select.style.padding = "0", this.select.style.borderWidth = "0", this.select.style.clip = "rect(0 0 0 0)", this.select.setAttribute("aria-hidden", "true")
|
|
868
|
+
this.select.tabIndex = -1, this.select.style.position = "absolute", this.select.style.width = "1px", this.select.style.height = "1px", this.select.style.opacity = "0", this.select.style.overflow = "hidden", this.select.style.pointerEvents = "none", this.select.style.margin = "0", this.select.style.padding = "0", this.select.style.borderWidth = "0", this.select.style.clip = "rect(0 0 0 0)", this.select.setAttribute("aria-hidden", "true"), this.preventNativeSelect || (this.preventNativeSelect = (e) => {
|
|
869
|
+
e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
|
|
870
|
+
}, this.preventNativeSelectMousedown = (e) => {
|
|
871
|
+
e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
|
|
872
|
+
}, this.preventNativeSelectFocus = (e) => {
|
|
873
|
+
e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
|
|
874
|
+
}, this.select.addEventListener("click", this.preventNativeSelect, { capture: !0, passive: !1 }), this.select.addEventListener("mousedown", this.preventNativeSelectMousedown, { capture: !0, passive: !1 }), this.select.addEventListener("focus", this.preventNativeSelectFocus, { capture: !0, passive: !1 }));
|
|
867
875
|
}
|
|
868
876
|
showUI() {
|
|
869
|
-
this.select.removeAttribute("tabindex"), this.select.style.position = "", this.select.style.width = "", this.select.style.height = "", this.select.style.opacity = "", this.select.style.overflow = "", this.select.style.pointerEvents = "", this.select.style.margin = "", this.select.style.padding = "", this.select.style.borderWidth = "", this.select.style.clip = "", this.select.removeAttribute("aria-hidden");
|
|
877
|
+
this.select.removeAttribute("tabindex"), this.select.style.position = "", this.select.style.width = "", this.select.style.height = "", this.select.style.opacity = "", this.select.style.overflow = "", this.select.style.pointerEvents = "", this.select.style.margin = "", this.select.style.padding = "", this.select.style.borderWidth = "", this.select.style.clip = "", this.select.removeAttribute("aria-hidden"), this.preventNativeSelect && (this.select.removeEventListener("click", this.preventNativeSelect, { capture: !0 }), this.preventNativeSelect = null), this.preventNativeSelectMousedown && (this.select.removeEventListener("mousedown", this.preventNativeSelectMousedown, { capture: !0 }), this.preventNativeSelectMousedown = null), this.preventNativeSelectFocus && (this.select.removeEventListener("focus", this.preventNativeSelectFocus, { capture: !0 }), this.preventNativeSelectFocus = null);
|
|
870
878
|
}
|
|
871
879
|
changeListen(e) {
|
|
872
880
|
this.listen = e, e && this.observer && this.observer.observe(this.select, {
|
|
@@ -1012,7 +1020,7 @@ class M {
|
|
|
1012
1020
|
updateOptions(e) {
|
|
1013
1021
|
this.changeListen(!1), this.select.innerHTML = "";
|
|
1014
1022
|
for (const t of e)
|
|
1015
|
-
t instanceof
|
|
1023
|
+
t instanceof m && this.select.appendChild(this.createOptgroup(t)), t instanceof u && this.select.appendChild(this.createOption(t));
|
|
1016
1024
|
this.select.dispatchEvent(new Event("change", { bubbles: !0 })), this.changeListen(!0);
|
|
1017
1025
|
}
|
|
1018
1026
|
createOptgroup(e) {
|
|
@@ -1030,8 +1038,48 @@ class M {
|
|
|
1030
1038
|
t.setAttribute("data-" + D(s), e.data[s]);
|
|
1031
1039
|
}), t;
|
|
1032
1040
|
}
|
|
1041
|
+
// Find and handle labels associated with this select
|
|
1042
|
+
setupLabelHandlers() {
|
|
1043
|
+
const e = [], t = this.select.id;
|
|
1044
|
+
t && document.querySelectorAll(`label[for="${t}"]`).forEach((a) => e.push(a));
|
|
1045
|
+
let s = this.select.parentElement;
|
|
1046
|
+
for (; s && s !== document.body; ) {
|
|
1047
|
+
if (s.tagName === "LABEL") {
|
|
1048
|
+
e.push(s);
|
|
1049
|
+
break;
|
|
1050
|
+
}
|
|
1051
|
+
s = s.parentElement;
|
|
1052
|
+
}
|
|
1053
|
+
Array.from(new Set(e)).forEach((l) => {
|
|
1054
|
+
if (l.__slimSelectLabelHandler)
|
|
1055
|
+
return;
|
|
1056
|
+
const a = (n) => {
|
|
1057
|
+
n.preventDefault(), n.stopPropagation(), this.onLabelClick && setTimeout(() => {
|
|
1058
|
+
this.onLabelClick();
|
|
1059
|
+
}, 0);
|
|
1060
|
+
};
|
|
1061
|
+
l.__slimSelectLabelHandler = a, l.addEventListener("click", a, { capture: !0, passive: !1 });
|
|
1062
|
+
});
|
|
1063
|
+
}
|
|
1064
|
+
// Remove label handlers
|
|
1065
|
+
removeLabelHandlers() {
|
|
1066
|
+
const e = [], t = this.select.id;
|
|
1067
|
+
t && document.querySelectorAll(`label[for="${t}"]`).forEach((a) => e.push(a));
|
|
1068
|
+
let s = this.select.parentElement;
|
|
1069
|
+
for (; s && s !== document.body; ) {
|
|
1070
|
+
if (s.tagName === "LABEL") {
|
|
1071
|
+
e.push(s);
|
|
1072
|
+
break;
|
|
1073
|
+
}
|
|
1074
|
+
s = s.parentElement;
|
|
1075
|
+
}
|
|
1076
|
+
Array.from(new Set(e)).forEach((l) => {
|
|
1077
|
+
const a = l.__slimSelectLabelHandler;
|
|
1078
|
+
a && (l.removeEventListener("click", a, { capture: !0 }), delete l.__slimSelectLabelHandler);
|
|
1079
|
+
});
|
|
1080
|
+
}
|
|
1033
1081
|
destroy() {
|
|
1034
|
-
this.changeListen(!1), this.select.removeEventListener("change", this.valueChange), this.observer && (this.observer.disconnect(), this.observer = null), delete this.select.dataset.id, this.showUI();
|
|
1082
|
+
this.changeListen(!1), this.select.removeEventListener("change", this.valueChange), this.preventNativeSelect && (this.select.removeEventListener("click", this.preventNativeSelect, { capture: !0 }), this.preventNativeSelect = null), this.preventNativeSelectMousedown && (this.select.removeEventListener("mousedown", this.preventNativeSelectMousedown, { capture: !0 }), this.preventNativeSelectMousedown = null), this.preventNativeSelectFocus && (this.select.removeEventListener("focus", this.preventNativeSelectFocus, { capture: !0 }), this.preventNativeSelectFocus = null), this.observer && (this.observer.disconnect(), this.observer = null), this.removeLabelHandlers(), delete this.select.dataset.id, this.showUI();
|
|
1035
1083
|
}
|
|
1036
1084
|
}
|
|
1037
1085
|
class P {
|
|
@@ -1072,7 +1120,7 @@ class P {
|
|
|
1072
1120
|
maxValuesMessage;
|
|
1073
1121
|
addableText;
|
|
1074
1122
|
constructor(e) {
|
|
1075
|
-
e || (e = {}), this.id = "ss-" +
|
|
1123
|
+
e || (e = {}), this.id = "ss-" + C(), this.style = e.style || "", this.class = e.class || [], this.disabled = e.disabled !== void 0 ? e.disabled : !1, this.alwaysOpen = e.alwaysOpen !== void 0 ? e.alwaysOpen : !1, this.showSearch = e.showSearch !== void 0 ? e.showSearch : !0, this.focusSearch = e.focusSearch !== void 0 ? e.focusSearch : !0, this.ariaLabel = e.ariaLabel || "Combobox", this.searchPlaceholder = e.searchPlaceholder || "Search...", this.searchText = e.searchText || "No Results", this.searchingText = e.searchingText || "Searching...", this.searchHighlight = e.searchHighlight !== void 0 ? e.searchHighlight : !1, this.closeOnSelect = e.closeOnSelect !== void 0 ? e.closeOnSelect : !0, this.contentLocation = e.contentLocation || document.body, this.contentPosition = e.contentPosition || "absolute", this.openPosition = e.openPosition || "auto", this.placeholderText = e.placeholderText !== void 0 ? e.placeholderText : "Select Value", this.allowDeselect = e.allowDeselect !== void 0 ? e.allowDeselect : !1, this.hideSelected = e.hideSelected !== void 0 ? e.hideSelected : !1, this.keepOrder = e.keepOrder !== void 0 ? e.keepOrder : !1, this.showOptionTooltips = e.showOptionTooltips !== void 0 ? e.showOptionTooltips : !1, this.minSelected = e.minSelected || 0, this.maxSelected = e.maxSelected || 1e3, this.timeoutDelay = e.timeoutDelay || 200, this.maxValuesShown = e.maxValuesShown || 20, this.maxValuesMessage = e.maxValuesMessage || "{number} selected", this.addableText = e.addableText || 'Press "Enter" to add {value}';
|
|
1076
1124
|
}
|
|
1077
1125
|
}
|
|
1078
1126
|
class I {
|
|
@@ -1107,11 +1155,11 @@ class I {
|
|
|
1107
1155
|
e.events && e.events.error && e.events.error(new Error("Element isnt of type select"));
|
|
1108
1156
|
return;
|
|
1109
1157
|
}
|
|
1110
|
-
this.selectEl.dataset.ssid && this.destroy(), this.settings = new P(e.settings), this.cssClasses = new
|
|
1158
|
+
this.selectEl.dataset.ssid && this.destroy(), this.settings = new P(e.settings), this.cssClasses = new A(e.cssClasses);
|
|
1111
1159
|
const t = ["beforeOpen", "afterOpen", "beforeClose", "afterClose"];
|
|
1112
1160
|
for (const n in e.events)
|
|
1113
|
-
e.events.hasOwnProperty(n) && (t.indexOf(n) !== -1 ? this.events[n] =
|
|
1114
|
-
this.settings.disabled = e.settings?.disabled ? e.settings.disabled : this.selectEl.disabled, this.settings.isMultiple = this.selectEl.multiple, this.settings.style = this.selectEl.style.cssText, this.settings.class = this.selectEl.className.split(" "), this.select = new M(this.selectEl), this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class), this.select.hideUI(), this.select.onValueChange = (n) => {
|
|
1161
|
+
e.events.hasOwnProperty(n) && (t.indexOf(n) !== -1 ? this.events[n] = O(e.events[n], 100) : this.events[n] = e.events[n]);
|
|
1162
|
+
this.settings.disabled = e.settings?.disabled ? e.settings.disabled : this.selectEl.disabled, this.settings.isMultiple = this.selectEl.multiple, this.settings.style = this.selectEl.style.cssText, this.settings.class = this.selectEl.className.split(" "), this.select = new M(this.selectEl), this.selectEl.id || (this.selectEl.id = this.settings.id), this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class), this.select.hideUI(), this.select.onValueChange = (n) => {
|
|
1115
1163
|
this.setSelected(n.map((o) => o.id));
|
|
1116
1164
|
}, this.select.onClassChange = (n) => {
|
|
1117
1165
|
this.settings.class = n, this.render.updateClassStyles();
|
|
@@ -1119,6 +1167,8 @@ class I {
|
|
|
1119
1167
|
n ? this.disable() : this.enable();
|
|
1120
1168
|
}, this.select.onOptionsChange = (n) => {
|
|
1121
1169
|
this.setData(n);
|
|
1170
|
+
}, this.select.onLabelClick = () => {
|
|
1171
|
+
this.settings.disabled || this.open();
|
|
1122
1172
|
};
|
|
1123
1173
|
const s = e.data ? e.data : this.select.getData();
|
|
1124
1174
|
this.store = new k(this.settings.isMultiple ? "multiple" : "single", s), e.data && this.select.updateOptions(this.store.getData());
|
|
@@ -1134,7 +1184,7 @@ class I {
|
|
|
1134
1184
|
};
|
|
1135
1185
|
this.render = new N(this.settings, this.cssClasses, this.store, i), this.render.renderValues(), this.render.renderOptions(this.store.getData());
|
|
1136
1186
|
const l = this.selectEl.getAttribute("aria-label"), a = this.selectEl.getAttribute("aria-labelledby");
|
|
1137
|
-
l ? this.render.main.main.setAttribute("aria-label", l) : a && this.render.main.main.setAttribute("aria-labelledby", a), this.selectEl.parentNode && this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling), window.addEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.addEventListener("scroll", this.windowScroll, !1), document.addEventListener("visibilitychange", this.windowVisibilityChange), this.settings.disabled && this.disable(), this.settings.alwaysOpen && this.open(), this.selectEl.slim = this;
|
|
1187
|
+
l ? this.render.main.main.setAttribute("aria-label", l) : a && this.render.main.main.setAttribute("aria-labelledby", a), this.selectEl.parentNode && this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling), window.addEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.addEventListener("scroll", this.windowScroll, !1), document.addEventListener("visibilitychange", this.windowVisibilityChange), this.settings.disabled && this.disable(), this.settings.alwaysOpen && this.open(), this.select.setupLabelHandlers(), this.selectEl.slim = this;
|
|
1138
1188
|
}
|
|
1139
1189
|
// Set to enabled and remove disabled classes
|
|
1140
1190
|
enable() {
|
|
@@ -1155,7 +1205,7 @@ class I {
|
|
|
1155
1205
|
}
|
|
1156
1206
|
this.store.setData(e);
|
|
1157
1207
|
const i = this.store.getData();
|
|
1158
|
-
this.select.updateOptions(i), this.render.renderValues(), this.render.renderOptions(i), this.events.afterChange && !
|
|
1208
|
+
this.select.updateOptions(i), this.render.renderValues(), this.render.renderOptions(i), this.events.afterChange && !L(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
|
|
1159
1209
|
}
|
|
1160
1210
|
getSelected() {
|
|
1161
1211
|
let e = this.store.getSelectedOptions();
|
|
@@ -1176,13 +1226,13 @@ class I {
|
|
|
1176
1226
|
}
|
|
1177
1227
|
this.store.setSelectedBy("id", l);
|
|
1178
1228
|
const a = this.store.getData();
|
|
1179
|
-
this.select.updateOptions(a), this.render.renderValues(), this.render.content.search.input.value !== "" ? this.search(this.render.content.search.input.value) : this.render.renderOptions(a), t && this.events.afterChange && !
|
|
1229
|
+
this.select.updateOptions(a), this.render.renderValues(), this.render.content.search.input.value !== "" ? this.search(this.render.content.search.input.value) : this.render.renderOptions(a), t && this.events.afterChange && !L(s, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
|
|
1180
1230
|
}
|
|
1181
1231
|
addOption(e) {
|
|
1182
1232
|
const t = this.store.getSelected();
|
|
1183
1233
|
this.store.getDataOptions().some((i) => i.value === (e.value ?? e.text)) || this.store.addOption(e);
|
|
1184
1234
|
const s = this.store.getData();
|
|
1185
|
-
this.select.updateOptions(s), this.render.renderValues(), this.render.renderOptions(s), this.events.afterChange && !
|
|
1235
|
+
this.select.updateOptions(s), this.render.renderValues(), this.render.renderOptions(s), this.events.afterChange && !L(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
|
|
1186
1236
|
}
|
|
1187
1237
|
open() {
|
|
1188
1238
|
this.settings.disabled || this.settings.isOpen || (this.events.beforeOpen && this.events.beforeOpen(), this.render.open(), this.settings.showSearch && this.settings.focusSearch && this.render.searchFocus(), this.settings.isOpen = !0, this.openTimeout = setTimeout(() => {
|
|
@@ -1190,13 +1240,17 @@ class I {
|
|
|
1190
1240
|
}, this.settings.timeoutDelay), this.settings.contentPosition === "absolute" && (this.settings.intervalMove && clearInterval(this.settings.intervalMove), this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500)));
|
|
1191
1241
|
}
|
|
1192
1242
|
close(e = null) {
|
|
1193
|
-
!this.settings.isOpen || this.settings.alwaysOpen || (this.events.beforeClose && this.events.beforeClose(), this.render.close(), this.render.
|
|
1243
|
+
!this.settings.isOpen || this.settings.alwaysOpen || (this.events.beforeClose && this.events.beforeClose(), this.render.close(), this.render.content.search.input.value !== "" && this.search(""), this.render.mainFocus(e), this.settings.isOpen = !1, this.settings.isFullOpen = !1, this.closeTimeout = setTimeout(() => {
|
|
1194
1244
|
this.events.afterClose && this.events.afterClose(), document.removeEventListener("click", this.documentClick);
|
|
1195
1245
|
}, this.settings.timeoutDelay), this.settings.intervalMove && clearInterval(this.settings.intervalMove));
|
|
1196
1246
|
}
|
|
1197
1247
|
// Take in string value and search current options
|
|
1198
1248
|
search(e) {
|
|
1199
|
-
if (this.render.content.search.input.value !== e && (this.render.content.search.input.value = e),
|
|
1249
|
+
if (this.render.content.search.input.value !== e && (this.render.content.search.input.value = e), e === "") {
|
|
1250
|
+
this.render.renderOptions(this.store.getData());
|
|
1251
|
+
return;
|
|
1252
|
+
}
|
|
1253
|
+
if (!this.events.search) {
|
|
1200
1254
|
const s = e === "" ? this.store.getData() : this.store.search(e, this.events.searchFilter);
|
|
1201
1255
|
this.render.renderOptions(s);
|
|
1202
1256
|
return;
|
|
@@ -1215,11 +1269,11 @@ class I {
|
|
|
1215
1269
|
destroy() {
|
|
1216
1270
|
this.openTimeout && (clearTimeout(this.openTimeout), this.openTimeout = null), this.closeTimeout && (clearTimeout(this.closeTimeout), this.closeTimeout = null), this.settings.intervalMove && (clearInterval(this.settings.intervalMove), this.settings.intervalMove = null), document.removeEventListener("click", this.documentClick), window.removeEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.removeEventListener("scroll", this.windowScroll, !1), document.removeEventListener("visibilitychange", this.windowVisibilityChange), this.store.setData([]), this.render.destroy(), this.select.destroy();
|
|
1217
1271
|
}
|
|
1218
|
-
windowResize =
|
|
1272
|
+
windowResize = O(() => {
|
|
1219
1273
|
!this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
|
|
1220
1274
|
});
|
|
1221
1275
|
// Event listener for window scrolling
|
|
1222
|
-
windowScroll =
|
|
1276
|
+
windowScroll = O(() => {
|
|
1223
1277
|
!this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
|
|
1224
1278
|
});
|
|
1225
1279
|
// Event listener for document click
|
|
@@ -1232,7 +1286,7 @@ class I {
|
|
|
1232
1286
|
};
|
|
1233
1287
|
}
|
|
1234
1288
|
export {
|
|
1235
|
-
|
|
1289
|
+
m as Optgroup,
|
|
1236
1290
|
u as Option,
|
|
1237
1291
|
P as Settings,
|
|
1238
1292
|
I as default
|