selectic 3.0.17 → 3.0.19

package/dist/selectic.common.js

@@ -32,7 +32,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    z-index: 2000;\n    height: auto;\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    min-width: 200px;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* }}} */\n";
+var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    top: var(--top-position, 0);\n    z-index: 2000;\n    height: auto;\n    max-height: var(--availableSpace);\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    width: var(--list-width, 200px);\n    min-width: 200px;\n    display: grid;\n    grid-template-rows: minmax(0, max-content) 1fr;\n}\n.selectic__extended-list.selectic-position-top {\n    box-shadow: 2px -3px 12px 0px #888888;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* }}} */\n";
 styleInject(css_248z);
 
 /**
@@ -101,11 +101,12 @@ function assignObject(obj, ...sourceObjects) {
     const result = obj;
     for (const source of sourceObjects) {
         for (const key of Object.keys(source)) {
-            const value = source[key];
+            const typedKey = key;
+            const value = source[typedKey];
             if (value === undefined) {
                 continue;
             }
-            result[key] = value;
+            result[typedKey] = value;
         }
     }
     return result;
@@ -182,6 +183,7 @@ class SelecticStore {
             isOpen: false,
             searchText: '',
             selectionIsExcluded: false,
+            forceSelectAll: 'auto',
             allOptions: [],
             dynOptions: [],
             filteredOptions: [],
@@ -1405,7 +1407,7 @@ let MainInput = class MainInput extends vtyx.Vue {
     }
     /* }}} */
     render() {
-        return (vtyx.h("div", { class: "has-feedback", on: {
+        return (vtyx.h("div", { class: "selectic-container has-feedback", on: {
                 'click.prevent.stop': () => this.toggleFocus(),
             } },
             vtyx.h("div", { id: this.selecticId, class: ['selectic-input form-control',
@@ -1477,14 +1479,31 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
     get selectionIsExcluded() {
         return this.store.state.selectionIsExcluded;
     }
+    /* {{{ select all */
+    get hasNotAllItems() {
+        return !vue.unref(this.store.hasAllItems);
+    }
+    get disabledPartialData() {
+        const state = this.store.state;
+        const autoDisplay = state.forceSelectAll === 'auto';
+        return this.hasNotAllItems && !this.enableRevert && autoDisplay;
+    }
     get disableSelectAll() {
         const store = this.store;
         const state = store.state;
         const isMultiple = state.multiple;
-        const hasItems = state.filteredOptions.length === 0;
-        const canNotSelect = !!state.searchText && !vue.unref(store.hasAllItems);
-        return !isMultiple || hasItems || canNotSelect;
+        const hasNoItems = state.filteredOptions.length === 0;
+        const canNotSelect = this.hasNotAllItems && !!state.searchText;
+        const partialDataDsbld = this.disabledPartialData;
+        return !isMultiple || hasNoItems || canNotSelect || partialDataDsbld;
+    }
+    get titleSelectAll() {
+        if (this.disableSelectAll && this.disabledPartialData) {
+            return this.store.data.labels.cannotSelectAllRevertItems;
+        }
+        return '';
     }
+    /* }}} */
     get disableRevert() {
         const store = this.store;
         return !store.state.multiple || !vue.unref(store.hasFetchedAllItems);
@@ -1572,7 +1591,7 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
                     vtyx.h("label", { class: ['control-label', {
                                 'selectic__label-disabled': this.disableSelectAll,
                             }] },
-                        vtyx.h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, on: {
+                        vtyx.h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, title: this.titleSelectAll, on: {
                                 change: this.onSelectAll,
                             } }),
                         labels.selectAll))),
@@ -1832,6 +1851,10 @@ var __decorate$1 = (this && this.__decorate) || function (decorators, target, ke
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/* list estimation height
+ * 30px × 10 + 20px (for panel header)
+ */
+const DEFAULT_LIST_HEIGHT = 320;
 let ExtendedList = class ExtendedList extends vtyx.Vue {
     constructor() {
         /* {{{ props */
@@ -1839,11 +1862,18 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
         /* }}} */
         /* {{{ data */
         this.topGroup = ' ';
-        this.listHeight = 120;
+        this.listHeight = 0;
         this.listWidth = 200;
+        this.availableSpace = 0;
     }
     /* }}} */
     /* {{{ computed */
+    /** check if the height of the box has been completely estimated. */
+    get isFullyEstimated() {
+        const listHeight = this.listHeight;
+        const availableSpace = this.availableSpace;
+        return listHeight !== 0 && listHeight < availableSpace;
+    }
     get searchingLabel() {
         return this.store.data.labels.searching;
     }
@@ -1904,17 +1934,30 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
     }
     get bestPosition() {
         const windowHeight = window.innerHeight;
-        const listHeight = this.listHeight;
+        const isFullyEstimated = this.isFullyEstimated;
+        /* XXX: The max() is because if listHeight is greater than default,
+         * it means that the value is more accurate than the default. */
+        const listHeight = isFullyEstimated ? this.listHeight
+            : Math.max(DEFAULT_LIST_HEIGHT, this.listHeight);
         const inputTop = this.elementTop;
         const inputBottom = this.elementBottom;
-        if (inputBottom + listHeight <= windowHeight) {
+        const availableTop = inputTop;
+        const availableBottom = windowHeight - inputBottom;
+        if (listHeight < availableBottom) {
             return 'bottom';
         }
-        if (listHeight < inputTop) {
+        if (listHeight < availableTop) {
             return 'top';
         }
         /* There are not enough space neither at bottom nor at top */
-        return (windowHeight - inputBottom) < inputTop ? 'top' : 'bottom';
+        return availableBottom < availableTop ? 'top' : 'bottom';
+    }
+    get position() {
+        const listPosition = this.store.state.listPosition;
+        if (listPosition === 'auto') {
+            return this.bestPosition;
+        }
+        return listPosition;
     }
     get horizontalStyle() {
         const windowWidth = window.innerWidth;
@@ -1934,26 +1977,32 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
         return `left: ${inputLeft}px; min-width: unset;`;
     }
     get positionStyle() {
-        let listPosition = this.store.state.listPosition;
+        const listPosition = this.position;
         const horizontalStyle = this.horizontalStyle;
-        if (listPosition === 'auto') {
-            listPosition = this.bestPosition;
-        }
+        const width = this.width;
         if (listPosition === 'top') {
             const transform = horizontalStyle.includes('transform')
                 ? 'transform: translateX(-100%) translateY(-100%);'
                 : 'transform: translateY(-100%);';
+            const elementTop = this.elementTop;
+            const availableSpace = this.elementTop;
+            this.availableSpace = availableSpace;
             return `
-                top: ${this.elementTop}px;
+                --top-position: ${elementTop}px;
                 ${horizontalStyle}
-                width: ${this.width}px;
-                ${transform}
+                --list-width: ${width}px;
+                ${transform};
+                --availableSpace: ${availableSpace}px;
             `;
         }
+        const elementBottom = this.elementBottom;
+        const availableSpace = window.innerHeight - elementBottom;
+        this.availableSpace = availableSpace;
         return `
-            top: ${this.elementBottom}px;
+            --top-position: ${elementBottom}px;
             ${horizontalStyle}
-            width: ${this.width}px;
+            --list-width: ${width}px;
+            --availableSpace: ${availableSpace}px;
         `;
     }
     /* }}} */
@@ -1996,7 +2045,10 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
         const state = store.state;
         const isGroup = state.groups.size > 0 &&
             state.totalFilteredOptions > store.data.itemsPerPage;
-        return (vtyx.h("div", { style: this.positionStyle, class: "selectic selectic__extended-list" },
+        return (vtyx.h("div", { style: this.positionStyle, class: [
+                'selectic selectic__extended-list',
+                `selectic-position-${this.position}`,
+            ] },
             !state.hideFilter && (vtyx.h(Filter, { store: this.store })),
             isGroup && (vtyx.h("span", { class: "selectic-item selectic-item--header selectic-item__is-group" }, this.topGroup)),
             vtyx.h(List$1, { store: store, on: {
@@ -2463,6 +2515,7 @@ let Selectic = class Selectic extends vtyx.Vue {
                 pageSize: this.params.pageSize || 100,
                 hideFilter: (_b = this.params.hideFilter) !== null && _b !== void 0 ? _b : 'auto',
                 allowRevert: this.params.allowRevert,
+                forceSelectAll: this.params.forceSelectAll || 'auto',
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
                     ? !this.multiple && !this.params.fetchCallback

package/dist/selectic.esm.js

@@ -28,7 +28,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    z-index: 2000;\n    height: auto;\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    min-width: 200px;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* }}} */\n";
+var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    top: var(--top-position, 0);\n    z-index: 2000;\n    height: auto;\n    max-height: var(--availableSpace);\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    width: var(--list-width, 200px);\n    min-width: 200px;\n    display: grid;\n    grid-template-rows: minmax(0, max-content) 1fr;\n}\n.selectic__extended-list.selectic-position-top {\n    box-shadow: 2px -3px 12px 0px #888888;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* }}} */\n";
 styleInject(css_248z);
 
 /**
@@ -97,11 +97,12 @@ function assignObject(obj, ...sourceObjects) {
     const result = obj;
     for (const source of sourceObjects) {
         for (const key of Object.keys(source)) {
-            const value = source[key];
+            const typedKey = key;
+            const value = source[typedKey];
             if (value === undefined) {
                 continue;
             }
-            result[key] = value;
+            result[typedKey] = value;
         }
     }
     return result;
@@ -178,6 +179,7 @@ class SelecticStore {
             isOpen: false,
             searchText: '',
             selectionIsExcluded: false,
+            forceSelectAll: 'auto',
             allOptions: [],
             dynOptions: [],
             filteredOptions: [],
@@ -1401,7 +1403,7 @@ let MainInput = class MainInput extends Vue {
     }
     /* }}} */
     render() {
-        return (h("div", { class: "has-feedback", on: {
+        return (h("div", { class: "selectic-container has-feedback", on: {
                 'click.prevent.stop': () => this.toggleFocus(),
             } },
             h("div", { id: this.selecticId, class: ['selectic-input form-control',
@@ -1473,14 +1475,31 @@ let FilterPanel = class FilterPanel extends Vue {
     get selectionIsExcluded() {
         return this.store.state.selectionIsExcluded;
     }
+    /* {{{ select all */
+    get hasNotAllItems() {
+        return !unref(this.store.hasAllItems);
+    }
+    get disabledPartialData() {
+        const state = this.store.state;
+        const autoDisplay = state.forceSelectAll === 'auto';
+        return this.hasNotAllItems && !this.enableRevert && autoDisplay;
+    }
     get disableSelectAll() {
         const store = this.store;
         const state = store.state;
         const isMultiple = state.multiple;
-        const hasItems = state.filteredOptions.length === 0;
-        const canNotSelect = !!state.searchText && !unref(store.hasAllItems);
-        return !isMultiple || hasItems || canNotSelect;
+        const hasNoItems = state.filteredOptions.length === 0;
+        const canNotSelect = this.hasNotAllItems && !!state.searchText;
+        const partialDataDsbld = this.disabledPartialData;
+        return !isMultiple || hasNoItems || canNotSelect || partialDataDsbld;
+    }
+    get titleSelectAll() {
+        if (this.disableSelectAll && this.disabledPartialData) {
+            return this.store.data.labels.cannotSelectAllRevertItems;
+        }
+        return '';
     }
+    /* }}} */
     get disableRevert() {
         const store = this.store;
         return !store.state.multiple || !unref(store.hasFetchedAllItems);
@@ -1568,7 +1587,7 @@ let FilterPanel = class FilterPanel extends Vue {
                     h("label", { class: ['control-label', {
                                 'selectic__label-disabled': this.disableSelectAll,
                             }] },
-                        h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, on: {
+                        h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, title: this.titleSelectAll, on: {
                                 change: this.onSelectAll,
                             } }),
                         labels.selectAll))),
@@ -1828,6 +1847,10 @@ var __decorate$1 = (this && this.__decorate) || function (decorators, target, ke
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/* list estimation height
+ * 30px × 10 + 20px (for panel header)
+ */
+const DEFAULT_LIST_HEIGHT = 320;
 let ExtendedList = class ExtendedList extends Vue {
     constructor() {
         /* {{{ props */
@@ -1835,11 +1858,18 @@ let ExtendedList = class ExtendedList extends Vue {
         /* }}} */
         /* {{{ data */
         this.topGroup = ' ';
-        this.listHeight = 120;
+        this.listHeight = 0;
         this.listWidth = 200;
+        this.availableSpace = 0;
     }
     /* }}} */
     /* {{{ computed */
+    /** check if the height of the box has been completely estimated. */
+    get isFullyEstimated() {
+        const listHeight = this.listHeight;
+        const availableSpace = this.availableSpace;
+        return listHeight !== 0 && listHeight < availableSpace;
+    }
     get searchingLabel() {
         return this.store.data.labels.searching;
     }
@@ -1900,17 +1930,30 @@ let ExtendedList = class ExtendedList extends Vue {
     }
     get bestPosition() {
         const windowHeight = window.innerHeight;
-        const listHeight = this.listHeight;
+        const isFullyEstimated = this.isFullyEstimated;
+        /* XXX: The max() is because if listHeight is greater than default,
+         * it means that the value is more accurate than the default. */
+        const listHeight = isFullyEstimated ? this.listHeight
+            : Math.max(DEFAULT_LIST_HEIGHT, this.listHeight);
         const inputTop = this.elementTop;
         const inputBottom = this.elementBottom;
-        if (inputBottom + listHeight <= windowHeight) {
+        const availableTop = inputTop;
+        const availableBottom = windowHeight - inputBottom;
+        if (listHeight < availableBottom) {
             return 'bottom';
         }
-        if (listHeight < inputTop) {
+        if (listHeight < availableTop) {
             return 'top';
         }
         /* There are not enough space neither at bottom nor at top */
-        return (windowHeight - inputBottom) < inputTop ? 'top' : 'bottom';
+        return availableBottom < availableTop ? 'top' : 'bottom';
+    }
+    get position() {
+        const listPosition = this.store.state.listPosition;
+        if (listPosition === 'auto') {
+            return this.bestPosition;
+        }
+        return listPosition;
     }
     get horizontalStyle() {
         const windowWidth = window.innerWidth;
@@ -1930,26 +1973,32 @@ let ExtendedList = class ExtendedList extends Vue {
         return `left: ${inputLeft}px; min-width: unset;`;
     }
     get positionStyle() {
-        let listPosition = this.store.state.listPosition;
+        const listPosition = this.position;
         const horizontalStyle = this.horizontalStyle;
-        if (listPosition === 'auto') {
-            listPosition = this.bestPosition;
-        }
+        const width = this.width;
         if (listPosition === 'top') {
             const transform = horizontalStyle.includes('transform')
                 ? 'transform: translateX(-100%) translateY(-100%);'
                 : 'transform: translateY(-100%);';
+            const elementTop = this.elementTop;
+            const availableSpace = this.elementTop;
+            this.availableSpace = availableSpace;
             return `
-                top: ${this.elementTop}px;
+                --top-position: ${elementTop}px;
                 ${horizontalStyle}
-                width: ${this.width}px;
-                ${transform}
+                --list-width: ${width}px;
+                ${transform};
+                --availableSpace: ${availableSpace}px;
             `;
         }
+        const elementBottom = this.elementBottom;
+        const availableSpace = window.innerHeight - elementBottom;
+        this.availableSpace = availableSpace;
         return `
-            top: ${this.elementBottom}px;
+            --top-position: ${elementBottom}px;
             ${horizontalStyle}
-            width: ${this.width}px;
+            --list-width: ${width}px;
+            --availableSpace: ${availableSpace}px;
         `;
     }
     /* }}} */
@@ -1992,7 +2041,10 @@ let ExtendedList = class ExtendedList extends Vue {
         const state = store.state;
         const isGroup = state.groups.size > 0 &&
             state.totalFilteredOptions > store.data.itemsPerPage;
-        return (h("div", { style: this.positionStyle, class: "selectic selectic__extended-list" },
+        return (h("div", { style: this.positionStyle, class: [
+                'selectic selectic__extended-list',
+                `selectic-position-${this.position}`,
+            ] },
             !state.hideFilter && (h(Filter, { store: this.store })),
             isGroup && (h("span", { class: "selectic-item selectic-item--header selectic-item__is-group" }, this.topGroup)),
             h(List$1, { store: store, on: {
@@ -2459,6 +2511,7 @@ let Selectic = class Selectic extends Vue {
                 pageSize: this.params.pageSize || 100,
                 hideFilter: (_b = this.params.hideFilter) !== null && _b !== void 0 ? _b : 'auto',
                 allowRevert: this.params.allowRevert,
+                forceSelectAll: this.params.forceSelectAll || 'auto',
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
                     ? !this.multiple && !this.params.fetchCallback

package/doc/params.md

@@ -278,6 +278,32 @@ Read [the extended properties documentation](extendedProperties.md) for more inf
 />
 ```
 
+## forceSelectAll
+
+Type: `'auto' | 'visible'`
+
+Default value: `'auto'`
+
+In _multiple_ mode, there is a "select all" action.
+If the selection inversion is not available and all data are not fetched (in
+_dynamic_ mode) it will not be possible to select all items. So this action
+will be disabled.
+
+This option allows you to change the behavior.
+
+* `'auto'`: The action is disabled when not possible.
+* `'visible'`: The action is displayed even when all data are not fetched.
+
+```html
+<selectic
+    params={{
+        forceSelectAll: 'auto',
+    }}
+    options={optionList}
+/>
+```
+
+
 ## listPosition
 
 Type: `'auto' | 'bottom' | 'top'`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.0.17",
+    "version": "3.0.19",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",
@@ -41,10 +41,10 @@
         "vtyx": "4.0.5"
     },
     "devDependencies": {
-        "@babel/types": "^7.19.4",
+        "@babel/types": "^7.21.2",
         "rollup": "^2.79.1",
-        "rollup-plugin-postcss": "^3.1.8",
-        "tape": "^4.16.1",
-        "typescript": "~4.5"
+        "rollup-plugin-postcss": "^4.0.2",
+        "tape": "^4.16.2",
+        "typescript": "~4.8"
     }
 }

package/src/ExtendedList.tsx

@@ -20,6 +20,11 @@ export interface Props {
     elementRight: number;
 }
 
+/* list estimation height
+ * 30px × 10 + 20px (for panel header)
+ */
+const DEFAULT_LIST_HEIGHT = 320;
+
 @Component
 export default class ExtendedList extends Vue<Props> {
     /* {{{ props */
@@ -46,12 +51,21 @@ export default class ExtendedList extends Vue<Props> {
     /* {{{ data */
 
     private topGroup = ' ';
-    private listHeight = 120;
+    private listHeight = 0;
     private listWidth = 200;
+    private availableSpace = 0;
 
     /* }}} */
     /* {{{ computed */
 
+    /** check if the height of the box has been completely estimated. */
+    get isFullyEstimated(): boolean {
+        const listHeight = this.listHeight;
+        const availableSpace = this.availableSpace;
+
+        return listHeight !== 0 && listHeight < availableSpace;
+    }
+
     get searchingLabel() {
         return this.store.data.labels.searching;
     }
@@ -124,20 +138,36 @@ export default class ExtendedList extends Vue<Props> {
 
     get bestPosition(): 'top' | 'bottom' {
         const windowHeight = window.innerHeight;
-        const listHeight = this.listHeight;
+        const isFullyEstimated = this.isFullyEstimated;
+        /* XXX: The max() is because if listHeight is greater than default,
+         * it means that the value is more accurate than the default. */
+        const listHeight = isFullyEstimated ? this.listHeight
+            : Math.max(DEFAULT_LIST_HEIGHT, this.listHeight);
         const inputTop = this.elementTop;
         const inputBottom = this.elementBottom;
+        const availableTop = inputTop;
+        const availableBottom = windowHeight - inputBottom;
 
-        if (inputBottom + listHeight <= windowHeight) {
+        if (listHeight < availableBottom) {
             return 'bottom';
         }
 
-        if (listHeight < inputTop) {
+        if (listHeight < availableTop) {
             return 'top';
         }
 
         /* There are not enough space neither at bottom nor at top */
-        return (windowHeight - inputBottom) < inputTop ? 'top' : 'bottom';
+        return availableBottom < availableTop ? 'top' : 'bottom';
+    }
+
+    get position(): 'top' | 'bottom' {
+        const listPosition = this.store.state.listPosition;
+
+        if (listPosition === 'auto') {
+            return this.bestPosition;
+        }
+
+        return listPosition;
     }
 
     get horizontalStyle(): string {
@@ -162,30 +192,35 @@ export default class ExtendedList extends Vue<Props> {
     }
 
     get positionStyle() {
-        let listPosition = this.store.state.listPosition;
+        const listPosition = this.position;
         const horizontalStyle = this.horizontalStyle;
-
-        if (listPosition === 'auto') {
-            listPosition = this.bestPosition;
-        }
+        const width = this.width;
 
         if (listPosition === 'top') {
             const transform = horizontalStyle.includes('transform')
                 ? 'transform: translateX(-100%) translateY(-100%);'
                 : 'transform: translateY(-100%);';
+            const elementTop = this.elementTop;
+            const availableSpace = this.elementTop;
+            this.availableSpace = availableSpace;
 
             return `
-                top: ${this.elementTop}px;
+                --top-position: ${elementTop}px;
                 ${horizontalStyle}
-                width: ${this.width}px;
-                ${transform}
+                --list-width: ${width}px;
+                ${transform};
+                --availableSpace: ${availableSpace}px;
             `;
         }
+        const elementBottom = this.elementBottom;
+        const availableSpace = window.innerHeight - elementBottom;
+        this.availableSpace = availableSpace;
 
         return `
-            top: ${this.elementBottom}px;
+            --top-position: ${elementBottom}px;
             ${horizontalStyle}
-            width: ${this.width}px;
+            --list-width: ${width}px;
+            --availableSpace: ${availableSpace}px;
         `;
     }
 
@@ -248,7 +283,10 @@ export default class ExtendedList extends Vue<Props> {
         return (
             <div
                 style={this.positionStyle}
-                class="selectic selectic__extended-list"
+                class={[
+                    'selectic selectic__extended-list',
+                    `selectic-position-${this.position}`,
+                ]}
             >
               {!state.hideFilter && (
                 <Filter

package/src/Filter.tsx

@@ -30,31 +30,53 @@ export default class FilterPanel extends Vue<Props> {
     /* }}} */
     /* {{{ computed */
 
-    get searchPlaceholder() {
+    get searchPlaceholder(): string {
         return this.store.data.labels.searchPlaceholder;
     }
 
-    get selectionIsExcluded() {
+    get selectionIsExcluded(): boolean {
         return this.store.state.selectionIsExcluded;
     }
 
-    get disableSelectAll() {
+    /* {{{ select all */
+
+    get hasNotAllItems(): boolean {
+        return !unref(this.store.hasAllItems);
+    }
+    get disabledPartialData(): boolean {
+        const state = this.store.state;
+        const autoDisplay = state.forceSelectAll === 'auto';
+        return this.hasNotAllItems && !this.enableRevert && autoDisplay;
+    }
+
+    get disableSelectAll(): boolean {
         const store = this.store;
         const state = store.state;
         const isMultiple = state.multiple;
-        const hasItems = state.filteredOptions.length === 0;
-        const canNotSelect = !!state.searchText && !unref(store.hasAllItems);
+        const hasNoItems = state.filteredOptions.length === 0;
+        const canNotSelect = this.hasNotAllItems && !!state.searchText;
+        const partialDataDsbld = this.disabledPartialData;
 
-        return !isMultiple || hasItems || canNotSelect;
+        return !isMultiple || hasNoItems || canNotSelect || partialDataDsbld;
     }
 
-    get disableRevert() {
+    get titleSelectAll(): string {
+        if (this.disableSelectAll && this.disabledPartialData) {
+            return this.store.data.labels.cannotSelectAllRevertItems;
+        }
+
+        return '';
+    }
+
+    /* }}} */
+
+    get disableRevert(): boolean {
         const store = this.store;
 
         return !store.state.multiple || !unref(store.hasFetchedAllItems);
     }
 
-    get enableRevert() {
+    get enableRevert(): boolean {
         const state = this.store.state;
 
         return state.multiple && state.allowRevert !== false;
@@ -178,6 +200,7 @@ export default class FilterPanel extends Vue<Props> {
                                     type="checkbox"
                                     checked={state.status.areAllSelected}
                                     disabled={this.disableSelectAll}
+                                    title={this.titleSelectAll}
                                     on={{
                                         change: this.onSelectAll,
                                     }}

package/src/MainInput.tsx

@@ -281,7 +281,7 @@ export default class MainInput extends Vue<Props> {
     public render() {
         return (
         <div
-            class="has-feedback"
+            class="selectic-container has-feedback"
             on={{
                 'click.prevent.stop': () => this.toggleFocus(),
             }}

package/src/Store.tsx

@@ -83,6 +83,12 @@ export type HideFilter =
     /* The panel filter is always open */
   | 'open';
 
+export type SelectAllOption =
+    /* Display the "select all" only when data are all fetched or allowRevert */
+    'auto'
+    /* Always display the "select all" in mulitple mode. */
+  | 'visible';
+
 export interface SelecticStoreStateParams {
     /* Equivalent of <select>'s "multiple" attribute */
     multiple?: boolean;
@@ -101,6 +107,9 @@ export interface SelecticStoreStateParams {
      */
     allowRevert?: boolean;
 
+    /* Force the availability of the "select all" even if all data is not fetched yet. */
+    forceSelectAll?: SelectAllOption;
+
     /* Allow user to clear current selection */
     allowClearSelection?: boolean;
 
@@ -295,6 +304,9 @@ export interface SelecticStoreState {
     /* Indicate where the list should be deployed */
     listPosition: ListPosition;
 
+    /* If true, the "select All" is still available even if all data are not fetched yet. */
+    forceSelectAll: SelectAllOption;
+
     /* Inner status which should be modified only by store */
     status: {
         /* If true, a search is currently done */
@@ -442,6 +454,7 @@ export default class SelecticStore {
             isOpen: false,
             searchText: '',
             selectionIsExcluded: false,
+            forceSelectAll: 'auto',
             allOptions: [],
             dynOptions: [],
             filteredOptions: [],

package/src/css/selectic.css

@@ -184,13 +184,21 @@
 
 .selectic__extended-list {
     position: fixed;
+    top: var(--top-position, 0);
     z-index: 2000;
     height: auto;
+    max-height: var(--availableSpace);
     background-color: var(--selectic-bg, #ffffff);
     box-shadow: 2px 5px 12px 0px #888888;
     border-radius: 0 0 4px 4px;
     padding: 0;
+    width: var(--list-width, 200px);
     min-width: 200px;
+    display: grid;
+    grid-template-rows: minmax(0, max-content) 1fr;
+}
+.selectic__extended-list.selectic-position-top {
+    box-shadow: 2px -3px 12px 0px #888888;
 }
 .selectic__extended-list__list-container{
     overflow: auto;

package/src/index.tsx

@@ -40,6 +40,7 @@ import Store, {
     SelectionOverflow,
     ListPosition,
     HideFilter,
+    SelectAllOption,
 } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
@@ -98,6 +99,9 @@ export interface ParamProps {
      */
     allowRevert?: boolean;
 
+    /* If true, the "select All" is still available even if all data are not fetched yet. */
+    forceSelectAll?: SelectAllOption;
+
     /* Allow user to clear the current selection */
     allowClearSelection?: boolean;
 
@@ -794,6 +798,7 @@ export default class Selectic extends Vue<Props> {
                 pageSize: this.params.pageSize || 100,
                 hideFilter: this.params.hideFilter ?? 'auto',
                 allowRevert: this.params.allowRevert, /* it can be undefined */
+                forceSelectAll: this.params.forceSelectAll || 'auto',
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
                           ? !this.multiple && !this.params.fetchCallback

package/src/tools.ts

@@ -76,11 +76,12 @@ export function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial
     const result = obj;
     for (const source of sourceObjects) {
         for (const key of Object.keys(source)) {
-            const value = source[key as keyof T];
+            const typedKey = key as keyof T;
+            const value = source[typedKey];
             if (value === undefined) {
                 continue;
             }
-            result[key as keyof T] = value;
+            result[typedKey] = value!;
         }
     }
     return result as T;

package/test/helper.js

@@ -10,6 +10,7 @@ function getInitialState(replacedAttributes) {
         hideFilter: false,
         keepFilterOpen: false,
         allowRevert: undefined,
+        forceSelectAll: 'auto',
         allowClearSelection: false,
         autoSelect: true,
         autoDisabled: true,

package/types/ExtendedList.d.ts

@@ -18,12 +18,16 @@ export default class ExtendedList extends Vue<Props> {
     private topGroup;
     private listHeight;
     private listWidth;
+    private availableSpace;
+    /** check if the height of the box has been completely estimated. */
+    get isFullyEstimated(): boolean;
     get searchingLabel(): string;
     get searching(): boolean;
     get errorMessage(): string;
     get infoMessage(): string;
     get onKeyDown(): (evt: KeyboardEvent) => void;
     get bestPosition(): 'top' | 'bottom';
+    get position(): 'top' | 'bottom';
     get horizontalStyle(): string;
     get positionStyle(): string;
     onFilteredOptionsChange(): void;

package/types/Filter.d.ts

@@ -11,7 +11,10 @@ export default class FilterPanel extends Vue<Props> {
     private closed;
     get searchPlaceholder(): string;
     get selectionIsExcluded(): boolean;
+    get hasNotAllItems(): boolean;
+    get disabledPartialData(): boolean;
     get disableSelectAll(): boolean;
+    get titleSelectAll(): string;
     get disableRevert(): boolean;
     get enableRevert(): boolean;
     get onKeyPressed(): (evt: KeyboardEvent) => void;

package/types/Store.d.ts

@@ -39,11 +39,13 @@ export declare type FormatCallback = (_option: OptionItem) => OptionItem;
 export declare type SelectionOverflow = 'collapsed' | 'multiline';
 export declare type ListPosition = 'bottom' | 'top' | 'auto';
 export declare type HideFilter = boolean | 'auto' | 'open';
+export declare type SelectAllOption = 'auto' | 'visible';
 export interface SelecticStoreStateParams {
     multiple?: boolean;
     placeholder?: string;
     hideFilter?: HideFilter;
     allowRevert?: boolean;
+    forceSelectAll?: SelectAllOption;
     allowClearSelection?: boolean;
     pageSize?: number;
     autoSelect?: boolean;
@@ -110,6 +112,7 @@ export interface SelecticStoreState {
     optionBehaviorOperation: OptionBehaviorOperation;
     optionBehaviorOrder: OptionBehaviorOrder[];
     listPosition: ListPosition;
+    forceSelectAll: SelectAllOption;
     status: {
         searching: boolean;
         errorMessage: string;

package/types/index.d.ts

@@ -1,6 +1,6 @@
 import { Vue, h } from 'vtyx';
 import './css/selectic.css';
-import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition, HideFilter } from './Store';
+import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition, HideFilter, SelectAllOption } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
 export { GroupValue, OptionValue, OptionItem, OptionProp, OptionId, StrictOptionId, SelectedValue, PartialMessages, GetCallback, FetchCallback, FormatCallback, SelectionOverflow, ListPosition, HideFilter, };
@@ -19,6 +19,7 @@ export interface ParamProps {
     pageSize?: number;
     hideFilter?: HideFilter;
     allowRevert?: boolean;
+    forceSelectAll?: SelectAllOption;
     allowClearSelection?: boolean;
     autoSelect?: boolean;
     autoDisabled?: boolean;