selectic 3.0.14 → 3.0.16

package/dist/selectic.common.js

@@ -32,12 +32,13 @@ 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-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    overflow: auto;\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\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    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\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);
 
 /**
  * Clone the object and its inner properties.
  * @param obj The object to be clone.
+ * @param attributes list of attributes to not clone.
  * @param refs internal reference to object to avoid cyclic references
  * @returns a copy of obj
  */
@@ -299,7 +300,7 @@ class SelecticStore {
         const value = deepClone(this.props.value);
         /* set initial value for non reactive attribute */
         this.cacheRequest = new Map();
-        const stateParam = deepClone(this.props.params);
+        const stateParam = deepClone(this.props.params, ['data']);
         if (stateParam.optionBehavior) {
             this.buildOptionBehavior(stateParam.optionBehavior, stateParam);
             delete stateParam.optionBehavior;
@@ -444,13 +445,10 @@ class SelecticStore {
     selectItem(id, selected, keepOpen = false) {
         const state = this.state;
         let hasChanged = false;
-        const isPartial = vue.unref(this.isPartial);
+        const item = state.allOptions.find((opt) => opt.id === id);
         /* Check that item is not disabled */
-        if (!isPartial) {
-            const item = state.allOptions.find((opt) => opt.id === id);
-            if (item && item.disabled) {
-                return;
-            }
+        if (item === null || item === void 0 ? void 0 : item.disabled) {
+            return;
         }
         if (state.strictValue && !this.hasValue(id)) {
             /* reject invalid values */
@@ -468,6 +466,18 @@ class SelecticStore {
                 hasChanged = internalValue.length > 0;
             }
             else if (selected && !isAlreadySelected) {
+                if (item === null || item === void 0 ? void 0 : item.exclusive) {
+                    /* clear the current selection because the item is exclusive */
+                    internalValue.splice(0, Infinity);
+                }
+                else if (internalValue.length === 1) {
+                    const selectedId = internalValue[0];
+                    const selectedItem = state.allOptions.find((opt) => opt.id === selectedId);
+                    if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.exclusive) {
+                        /* clear the current selection because the old item was exclusive */
+                        internalValue.pop();
+                    }
+                }
                 internalValue.push(id);
                 hasChanged = true;
             }
@@ -1770,24 +1780,26 @@ let List = class List extends vtyx.Vue {
     }
     /* }}} */
     render() {
-        return (vtyx.h("ul", { on: {
+        return (vtyx.h("div", { class: "selectic__extended-list__list-container", on: {
                 scroll: this.checkOffset,
             }, ref: "elList" },
-            !!this.topOffset && (vtyx.h("li", { class: "selectic-item", style: `height:${this.topOffset}px;` })),
-            this.shortOptions.map((option, idx) => (vtyx.h("li", { on: {
-                    'click.prevent.stop': () => this.click(option),
-                    'mouseover': () => this.onMouseOver(idx),
-                }, class: ['selectic-item', option.className || '', {
-                        'selected': option.selected,
-                        'selectic-item__active': idx + this.startIndex === this.store.state.activeItemIdx,
-                        'selectic-item__disabled': !!option.disabled,
-                        'selectic-item__is-in-group': !!option.group,
-                        'selectic-item__is-group': option.isGroup,
-                    }], style: option.style, title: option.title, key: 'selectic-item-' + (idx + this.startIndex) },
-                this.isMultiple && (vtyx.h("span", { class: "fa fa-fw fa-check selectic-item_icon" })),
-                option.icon && (vtyx.h("span", { class: option.icon })),
-                option.text))),
-            !!this.bottomOffset && (vtyx.h("li", { class: "selectic-item", style: `height:${this.bottomOffset}px;` }))));
+            vtyx.h("ul", { class: "selectic__extended-list__list-items" },
+                !!this.topOffset && (vtyx.h("li", { class: "selectic-item", style: `height:${this.topOffset}px;` })),
+                this.shortOptions.map((option, idx) => (vtyx.h("li", { on: {
+                        'click.prevent.stop': () => this.click(option),
+                        'mouseover': () => this.onMouseOver(idx),
+                    }, class: ['selectic-item', option.className || '', {
+                            'selected': option.selected,
+                            'selectic-item__active': idx + this.startIndex === this.store.state.activeItemIdx,
+                            'selectic-item__disabled': !!option.disabled,
+                            'selectic-item__exclusive': !!option.exclusive,
+                            'selectic-item__is-in-group': !!option.group,
+                            'selectic-item__is-group': option.isGroup,
+                        }], style: option.style, title: option.title, key: 'selectic-item-' + (idx + this.startIndex) },
+                    this.isMultiple && (vtyx.h("span", { class: "fa fa-fw fa-check selectic-item_icon" })),
+                    option.icon && (vtyx.h("span", { class: option.icon })),
+                    option.text))),
+                !!this.bottomOffset && (vtyx.h("li", { class: "selectic-item", style: `height:${this.bottomOffset}px;` })))));
     }
 };
 __decorate$2([
@@ -1987,7 +1999,7 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
         return (vtyx.h("div", { style: this.positionStyle, class: "selectic selectic__extended-list" },
             !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, class: "selectic__extended-list__list-items", on: {
+            vtyx.h(List$1, { store: store, on: {
                     groupId: this.getGroup,
                 } }),
             this.infoMessage && (vtyx.h("div", { class: "selectic__message alert-info" }, this.infoMessage)),
@@ -2264,7 +2276,7 @@ let Selectic = class Selectic extends vtyx.Vue {
         this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
     onOptionsChange() {
-        this.store.props.options = deepClone(this.options);
+        this.store.props.options = deepClone(this.options, ['data']);
     }
     onTextsChange() {
         const texts = this.texts;
@@ -2439,7 +2451,7 @@ let Selectic = class Selectic extends vtyx.Vue {
         var _a, _b, _c;
         this._elementsListeners = [];
         this.store = new SelecticStore({
-            options: deepClone(this.options),
+            options: deepClone(this.options, ['data']),
             value: deepClone(this.value),
             selectionIsExcluded: this.selectionIsExcluded,
             disabled: this.disabled,

package/dist/selectic.esm.js

@@ -28,12 +28,13 @@ 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-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    overflow: auto;\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\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    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\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);
 
 /**
  * Clone the object and its inner properties.
  * @param obj The object to be clone.
+ * @param attributes list of attributes to not clone.
  * @param refs internal reference to object to avoid cyclic references
  * @returns a copy of obj
  */
@@ -295,7 +296,7 @@ class SelecticStore {
         const value = deepClone(this.props.value);
         /* set initial value for non reactive attribute */
         this.cacheRequest = new Map();
-        const stateParam = deepClone(this.props.params);
+        const stateParam = deepClone(this.props.params, ['data']);
         if (stateParam.optionBehavior) {
             this.buildOptionBehavior(stateParam.optionBehavior, stateParam);
             delete stateParam.optionBehavior;
@@ -440,13 +441,10 @@ class SelecticStore {
     selectItem(id, selected, keepOpen = false) {
         const state = this.state;
         let hasChanged = false;
-        const isPartial = unref(this.isPartial);
+        const item = state.allOptions.find((opt) => opt.id === id);
         /* Check that item is not disabled */
-        if (!isPartial) {
-            const item = state.allOptions.find((opt) => opt.id === id);
-            if (item && item.disabled) {
-                return;
-            }
+        if (item === null || item === void 0 ? void 0 : item.disabled) {
+            return;
         }
         if (state.strictValue && !this.hasValue(id)) {
             /* reject invalid values */
@@ -464,6 +462,18 @@ class SelecticStore {
                 hasChanged = internalValue.length > 0;
             }
             else if (selected && !isAlreadySelected) {
+                if (item === null || item === void 0 ? void 0 : item.exclusive) {
+                    /* clear the current selection because the item is exclusive */
+                    internalValue.splice(0, Infinity);
+                }
+                else if (internalValue.length === 1) {
+                    const selectedId = internalValue[0];
+                    const selectedItem = state.allOptions.find((opt) => opt.id === selectedId);
+                    if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.exclusive) {
+                        /* clear the current selection because the old item was exclusive */
+                        internalValue.pop();
+                    }
+                }
                 internalValue.push(id);
                 hasChanged = true;
             }
@@ -1766,24 +1776,26 @@ let List = class List extends Vue {
     }
     /* }}} */
     render() {
-        return (h("ul", { on: {
+        return (h("div", { class: "selectic__extended-list__list-container", on: {
                 scroll: this.checkOffset,
             }, ref: "elList" },
-            !!this.topOffset && (h("li", { class: "selectic-item", style: `height:${this.topOffset}px;` })),
-            this.shortOptions.map((option, idx) => (h("li", { on: {
-                    'click.prevent.stop': () => this.click(option),
-                    'mouseover': () => this.onMouseOver(idx),
-                }, class: ['selectic-item', option.className || '', {
-                        'selected': option.selected,
-                        'selectic-item__active': idx + this.startIndex === this.store.state.activeItemIdx,
-                        'selectic-item__disabled': !!option.disabled,
-                        'selectic-item__is-in-group': !!option.group,
-                        'selectic-item__is-group': option.isGroup,
-                    }], style: option.style, title: option.title, key: 'selectic-item-' + (idx + this.startIndex) },
-                this.isMultiple && (h("span", { class: "fa fa-fw fa-check selectic-item_icon" })),
-                option.icon && (h("span", { class: option.icon })),
-                option.text))),
-            !!this.bottomOffset && (h("li", { class: "selectic-item", style: `height:${this.bottomOffset}px;` }))));
+            h("ul", { class: "selectic__extended-list__list-items" },
+                !!this.topOffset && (h("li", { class: "selectic-item", style: `height:${this.topOffset}px;` })),
+                this.shortOptions.map((option, idx) => (h("li", { on: {
+                        'click.prevent.stop': () => this.click(option),
+                        'mouseover': () => this.onMouseOver(idx),
+                    }, class: ['selectic-item', option.className || '', {
+                            'selected': option.selected,
+                            'selectic-item__active': idx + this.startIndex === this.store.state.activeItemIdx,
+                            'selectic-item__disabled': !!option.disabled,
+                            'selectic-item__exclusive': !!option.exclusive,
+                            'selectic-item__is-in-group': !!option.group,
+                            'selectic-item__is-group': option.isGroup,
+                        }], style: option.style, title: option.title, key: 'selectic-item-' + (idx + this.startIndex) },
+                    this.isMultiple && (h("span", { class: "fa fa-fw fa-check selectic-item_icon" })),
+                    option.icon && (h("span", { class: option.icon })),
+                    option.text))),
+                !!this.bottomOffset && (h("li", { class: "selectic-item", style: `height:${this.bottomOffset}px;` })))));
     }
 };
 __decorate$2([
@@ -1983,7 +1995,7 @@ let ExtendedList = class ExtendedList extends Vue {
         return (h("div", { style: this.positionStyle, class: "selectic selectic__extended-list" },
             !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, class: "selectic__extended-list__list-items", on: {
+            h(List$1, { store: store, on: {
                     groupId: this.getGroup,
                 } }),
             this.infoMessage && (h("div", { class: "selectic__message alert-info" }, this.infoMessage)),
@@ -2260,7 +2272,7 @@ let Selectic = class Selectic extends Vue {
         this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
     onOptionsChange() {
-        this.store.props.options = deepClone(this.options);
+        this.store.props.options = deepClone(this.options, ['data']);
     }
     onTextsChange() {
         const texts = this.texts;
@@ -2435,7 +2447,7 @@ let Selectic = class Selectic extends Vue {
         var _a, _b, _c;
         this._elementsListeners = [];
         this.store = new SelecticStore({
-            options: deepClone(this.options),
+            options: deepClone(this.options, ['data']),
             value: deepClone(this.value),
             selectionIsExcluded: this.selectionIsExcluded,
             disabled: this.disabled,

package/doc/list.md

@@ -25,12 +25,13 @@ It is possible to define the `option` more precisely.
 * **id** {`string | number`} _(mandatory)_: The option identifier. *It is important that it is unique among all other options*.
 * **text** {`string`} _(mandatory)_: The text which is displayed to select the option or when it is selected.
 * **title** {`string`}: Text displayed in `title` when cursor is over the option (default: `''`).
-* **disabled** {`boolean`}: if `true` this option cannot be selected (default: `false`).
+* **disabled** {`boolean`}: if `true`, this option cannot be selected (default: `false`).
 * **className** {`string`}: `class` that are applied on the option (default: `''`).
 * **style** {`string`}: css style which are applied on the option (default: `''`).
 * **icon** {`string`}: class names which are applied on a `<span>` before text in the option to display an icon (default: `''`).
 * **options** {`options[]`}: an other list of options. The current option is considered as a group (equivalent of `optgroup`) (default: `undefined`).
-* **group** {`string | number`}: If set the option is part of the given group. This property is needed only in dynamic mode if the option is part of an optgroup (default: `null`).
+* **group** {`string | number`}: If set, the option is part of the given group. This property is needed only in dynamic mode if the option is part of an optgroup (default: `null`).
+* **exclusive** {`boolean`}: If set to `true`, in multiple mode, this option will be the only one selected. It means that it clears the previous selected options, and if another option is selected, this option is no more selected.
 * **data** {`any`}: You can store any information here, it will be provided when getting selected options. _It is not used by selectic so it can be anything you want_ (default: `undefined`).
 
 ```javascript

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.0.14",
+    "version": "3.0.16",
     "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.16.7",
-        "rollup": "^2.63.0",
+        "@babel/types": "^7.19.4",
+        "rollup": "^2.79.1",
         "rollup-plugin-postcss": "^3.1.8",
-        "tape": "^4.14.0",
+        "tape": "^4.16.1",
         "typescript": "~4.5"
     }
 }

package/src/ExtendedList.tsx

@@ -255,6 +255,7 @@ export default class ExtendedList extends Vue<Props> {
                     store={this.store}
                 />
               )}
+
               {isGroup && (
                 <span
                     class="selectic-item selectic-item--header selectic-item__is-group"
@@ -264,7 +265,6 @@ export default class ExtendedList extends Vue<Props> {
               )}
                 <List
                     store={store}
-                    class="selectic__extended-list__list-items"
                     on={{
                         groupId: this.getGroup,
                     }}

package/src/List.tsx

@@ -22,7 +22,7 @@ export interface Props {
 @Component
 export default class List extends Vue<Props> {
     public $refs: {
-        elList: HTMLUListElement;
+        elList: HTMLDivElement;
     };
 
     /* {{{ props */
@@ -241,53 +241,59 @@ export default class List extends Vue<Props> {
 
     public render() {
         return (
-            <ul
+            <div
+                class="selectic__extended-list__list-container"
                 on={{
                     scroll: this.checkOffset,
                 }}
                 ref="elList"
             >
-              {!!this.topOffset && (
-                <li
-                    class="selectic-item"
-                    style={`height:${this.topOffset}px;`}
-                ></li>
-              )}
-              {this.shortOptions.map((option, idx) => (
-                <li
-                    on={{
-                        'click.prevent.stop': () => this.click(option),
-                        'mouseover': () => this.onMouseOver(idx),
-                    }}
-                    class={['selectic-item', option.className || '', {
-                        'selected': option.selected,
-                        'selectic-item__active': idx + this.startIndex === this.store.state.activeItemIdx,
-                        'selectic-item__disabled': !!option.disabled,
-                        'selectic-item__is-in-group': !!option.group,
-                        'selectic-item__is-group': option.isGroup,
-                    }]}
-                    style={option.style}
-                    title={option.title}
-                    key={'selectic-item-' + (idx + this.startIndex)}
+                <ul
+                    class="selectic__extended-list__list-items"
                 >
-                  {this.isMultiple && (
-                    <span
-                        class="fa fa-fw fa-check selectic-item_icon"
-                    ></span>
-                  )}
-                  {option.icon && (
-                    <span class={option.icon}></span>
-                  )}
-                    {option.text}
-                </li>
-              ))}
-              {!!this.bottomOffset && (
-                <li
-                    class="selectic-item"
-                    style={`height:${this.bottomOffset}px;`}
-                ></li>
-              )}
-            </ul>
+                {!!this.topOffset && (
+                    <li
+                        class="selectic-item"
+                        style={`height:${this.topOffset}px;`}
+                    ></li>
+                )}
+                {this.shortOptions.map((option, idx) => (
+                    <li
+                        on={{
+                            'click.prevent.stop': () => this.click(option),
+                            'mouseover': () => this.onMouseOver(idx),
+                        }}
+                        class={['selectic-item', option.className || '', {
+                            'selected': option.selected,
+                            'selectic-item__active': idx + this.startIndex === this.store.state.activeItemIdx,
+                            'selectic-item__disabled': !!option.disabled,
+                            'selectic-item__exclusive': !!option.exclusive,
+                            'selectic-item__is-in-group': !!option.group,
+                            'selectic-item__is-group': option.isGroup,
+                        }]}
+                        style={option.style}
+                        title={option.title}
+                        key={'selectic-item-' + (idx + this.startIndex)}
+                    >
+                    {this.isMultiple && (
+                        <span
+                            class="fa fa-fw fa-check selectic-item_icon"
+                        ></span>
+                    )}
+                    {option.icon && (
+                        <span class={option.icon}></span>
+                    )}
+                        {option.text}
+                    </li>
+                ))}
+                {!!this.bottomOffset && (
+                    <li
+                        class="selectic-item"
+                        style={`height:${this.bottomOffset}px;`}
+                    ></li>
+                )}
+                </ul>
+            </div>
         );
     }
 }

package/src/Store.tsx

@@ -29,6 +29,7 @@ export interface OptionValue {
     style?: string;
     icon?: string;
     options?: OptionValue[];
+    exclusive?: boolean;
 
     /* Used to store specific information about this option.
      * This `data` is not used by Selectic. */
@@ -593,7 +594,7 @@ export default class SelecticStore {
         this.cacheRequest = new Map();
 
         const stateParam: SelecticStoreStateParams | SelecticStoreState =
-            deepClone(this.props.params);
+            deepClone(this.props.params, ['data']);
 
         if (stateParam.optionBehavior) {
             this.buildOptionBehavior(
@@ -766,14 +767,11 @@ export default class SelecticStore {
     public selectItem(id: OptionId, selected?: boolean, keepOpen = false) {
         const state = this.state;
         let hasChanged = false;
-        const isPartial = unref(this.isPartial);
+        const item = state.allOptions.find((opt) => opt.id === id);
 
         /* Check that item is not disabled */
-        if (!isPartial) {
-            const item = state.allOptions.find((opt) => opt.id === id);
-            if (item && item.disabled) {
-                return;
-            }
+        if (item?.disabled) {
+            return;
         }
 
         if (state.strictValue && !this.hasValue(id)) {
@@ -795,6 +793,17 @@ export default class SelecticStore {
                 hasChanged = internalValue.length > 0;
             } else
             if (selected && !isAlreadySelected) {
+                if (item?.exclusive) {
+                    /* clear the current selection because the item is exclusive */
+                    internalValue.splice(0, Infinity);
+                } else if (internalValue.length === 1) {
+                    const selectedId = internalValue[0];
+                    const selectedItem = state.allOptions.find((opt) => opt.id === selectedId);
+                    if (selectedItem?.exclusive) {
+                        /* clear the current selection because the old item was exclusive */
+                        internalValue.pop();
+                    }
+                }
                 internalValue.push(id);
                 hasChanged = true;
             } else

package/src/css/selectic.css

@@ -192,9 +192,12 @@
     padding: 0;
     min-width: 200px;
 }
+.selectic__extended-list__list-container{
+    overflow: auto;
+}
 .selectic__extended-list__list-items {
     max-height: calc(var(--selectic-input-height) * 10);
-    overflow: auto;
+    min-width: max-content;
     padding-left: 0;
 }
 

package/src/index.tsx

@@ -561,7 +561,7 @@ export default class Selectic extends Vue<Props> {
 
     @Watch('options', { deep: true })
     public onOptionsChange() {
-        this.store.props.options = deepClone(this.options);
+        this.store.props.options = deepClone(this.options, ['data']);
     }
 
     @Watch('texts', { deep: true })
@@ -782,7 +782,7 @@ export default class Selectic extends Vue<Props> {
         this._elementsListeners = [];
 
         this.store = new Store({
-            options: deepClone(this.options),
+            options: deepClone(this.options, ['data']),
             value: deepClone(this.value),
             selectionIsExcluded: this.selectionIsExcluded,
             disabled: this.disabled,

package/src/tools.ts

@@ -3,6 +3,7 @@ import { unref } from 'vue';
 /**
  * Clone the object and its inner properties.
  * @param obj The object to be clone.
+ * @param attributes list of attributes to not clone.
  * @param refs internal reference to object to avoid cyclic references
  * @returns a copy of obj
  */

package/test/Store/selectItem.spec.js

@@ -202,8 +202,10 @@ tape.test('selectItem()', (st) => {
 
     st.test('when "multiple" is true', (sTest) => {
         function getStore() {
-            const options = getOptions(6);
+            const options = getOptions(8);
             options[4].disabled = true;
+            options[6].exclusive = true;
+            options[7].exclusive = true;
 
             const store = new Store({
                 options: options,
@@ -363,7 +365,6 @@ tape.test('selectItem()', (st) => {
             t.end();
         });
 
-
         sTest.test('should clear selection', (t) => {
             const store = getStore();
             store.state.internalValue = [1, 4];
@@ -412,5 +413,29 @@ tape.test('selectItem()', (st) => {
             t.is(store.state.status.hasChanged, false);
             t.end();
         });
+
+        sTest.test('should keep only exclusive item', (t) => {
+            const store = getStore();
+            store.state.internalValue = [1, 4, 5];
+
+            store.selectItem(6, true);
+            t.deepEqual(store.state.internalValue, [6]);
+            t.is(store.state.status.hasChanged, true);
+
+            store.selectItem(7, true);
+            t.deepEqual(store.state.internalValue, [7]);
+            t.is(store.state.status.hasChanged, true);
+
+            store.selectItem(1, true);
+            t.deepEqual(store.state.internalValue, [1]);
+            t.is(store.state.status.hasChanged, true);
+
+            store.selectItem(5, true);
+            t.deepEqual(store.state.internalValue, [1, 5]);
+            t.is(store.state.status.hasChanged, true);
+
+            t.is(store.state.selectionIsExcluded, false);
+            t.end();
+        });
     });
 });

package/types/List.d.ts

@@ -8,7 +8,7 @@ export interface Props {
 }
 export default class List extends Vue<Props> {
     $refs: {
-        elList: HTMLUListElement;
+        elList: HTMLDivElement;
     };
     private store;
     private itemHeight;

package/types/Store.d.ts

@@ -15,6 +15,7 @@ export interface OptionValue {
     style?: string;
     icon?: string;
     options?: OptionValue[];
+    exclusive?: boolean;
     data?: any;
 }
 declare type OptionBehaviorOperation = 'sort' | 'force';

package/types/tools.d.ts

@@ -1,6 +1,7 @@
 /**
  * Clone the object and its inner properties.
  * @param obj The object to be clone.
+ * @param attributes list of attributes to not clone.
  * @param refs internal reference to object to avoid cyclic references
  * @returns a copy of obj
  */