selectic 3.0.5 → 3.0.9

package/dist/selectic.common.js

@@ -35,13 +35,42 @@ 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";
 styleInject(css_248z);
 
-/* File Purpose:
- * It keeps and computes all states at a single place.
- * Every inner components of Selectic should communicate with this file to
- * change or to get states.
+/**
+ * Clone the object and its inner properties.
+ * @param obj The object to be clone.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns a copy of obj
  */
-/* }}} */
-/* {{{ Helper */
+function deepClone(obj, refs = new WeakMap()) {
+    /* For circular references */
+    if (refs.has(obj)) {
+        return refs.get(obj);
+    }
+    if (typeof obj === 'object') {
+        if (Array.isArray(obj)) {
+            const ref = [];
+            refs.set(obj, ref);
+            obj.forEach((val, idx) => {
+                ref[idx] = deepClone(val, refs);
+            });
+            return ref;
+        }
+        if (obj instanceof RegExp) {
+            const ref = new RegExp(obj.source, obj.flags);
+            refs.set(obj, ref);
+            return ref;
+        }
+        /* This should be an object */
+        const ref = {};
+        refs.set(obj, ref);
+        for (const [key, val] of Object.entries(obj)) {
+            ref[key] = deepClone(val, refs);
+        }
+        return ref;
+    }
+    /* This should be a primitive */
+    return obj;
+}
 /**
  * Escape search string to consider regexp special characters as they
  * are and not like special characters.
@@ -72,6 +101,12 @@ function assignObject(obj, ...sourceObjects) {
     }
     return result;
 }
+
+/* File Purpose:
+ * It keeps and computes all states at a single place.
+ * Every inner components of Selectic should communicate with this file to
+ * change or to get states.
+ */
 /* }}} */
 /* {{{ Static */
 function changeTexts$1(texts) {
@@ -101,6 +136,26 @@ let closePreviousSelectic;
 let uid = 0;
 class SelecticStore {
     constructor(props = {}) {
+        /* Do not need reactivity */
+        this.requestId = 0;
+        this._uid = ++uid;
+        /* {{{ Props */
+        const defaultProps = {
+            value: null,
+            selectionIsExcluded: false,
+            disabled: false,
+            options: null,
+            childOptions: [],
+            groups: [],
+            texts: null,
+            params: {},
+            fetchCallback: null,
+            getItemsCallback: null,
+            keepOpenWithOtherSelectic: false,
+        };
+        const propsVal = assignObject(defaultProps, props);
+        this.props = vue.reactive(propsVal);
+        /* }}} */
         /* {{{ data */
         this.state = vue.reactive({
             multiple: false,
@@ -141,27 +196,6 @@ class SelecticStore {
                 automaticClose: false,
             },
         });
-        /* Do not need reactivity */
-        this.requestId = 0;
-        this._uid = ++uid;
-        /* {{{ Props */
-        const defaultProps = {
-            value: null,
-            selectionIsExcluded: false,
-            disabled: false,
-            options: null,
-            childOptions: [],
-            groups: [],
-            texts: null,
-            params: {},
-            fetchCallback: null,
-            getItemsCallback: null,
-            keepOpenWithOtherSelectic: false,
-        };
-        const propsVal = assignObject(defaultProps, props);
-        this.props = vue.reactive(propsVal);
-        /* }}} */
-        /* {{{ data */
         this.data = vue.reactive({
             labels: Object.assign({}, messages),
             itemsPerPage: 10,
@@ -212,17 +246,17 @@ class SelecticStore {
             this.commit('isOpen', false);
             this.buildAllOptions(true);
             this.buildSelectedOptions();
-        });
+        }, { deep: true });
         vue.watch(() => [this.listOptions, this.elementOptions], () => {
             /* TODO: transform allOptions as a computed properties and this
              * watcher become useless */
             this.buildAllOptions(true);
-        });
+        }, { deep: true });
         vue.watch(() => this.props.value, () => {
             var _a;
             const value = (_a = this.props.value) !== null && _a !== void 0 ? _a : null;
             this.commit('internalValue', value);
-        });
+        }, { deep: true });
         vue.watch(() => this.props.selectionIsExcluded, () => {
             this.commit('selectionIsExcluded', this.props.selectionIsExcluded);
         });
@@ -238,14 +272,14 @@ class SelecticStore {
                 areAllSelected = this.state.filteredOptions.every((item) => !!(+item.selected ^ selectionIsExcluded));
             }
             this.state.status.areAllSelected = areAllSelected;
-        });
+        }, { deep: true });
         vue.watch(() => this.state.internalValue, () => {
             this.buildSelectedOptions();
-        });
+        }, { deep: true });
         vue.watch(() => this.state.allOptions, () => {
             this.checkAutoSelect();
             this.checkAutoDisabled();
-        });
+        }, { deep: true });
         vue.watch(() => this.state.totalAllOptions, () => {
             this.checkHideFilter();
         });
@@ -275,8 +309,8 @@ class SelecticStore {
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: props.selectionIsExcluded,
-            disabled: props.disabled,
+            selectionIsExcluded: !!this.props.selectionIsExcluded,
+            disabled: !!this.props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
         this.checkHideFilter();
         if (this.props.texts) {
@@ -1394,7 +1428,7 @@ __decorate$4([
     vtyx.Prop({ default: '' })
 ], MainInput.prototype, "id", void 0);
 __decorate$4([
-    vtyx.Watch('store.state.internalValue')
+    vtyx.Watch('store.state.internalValue', { deep: true })
 ], MainInput.prototype, "onInternalChange", null);
 MainInput = __decorate$4([
     vtyx.Component
@@ -1498,7 +1532,7 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
-    destroyed() {
+    unmounted() {
         document.removeEventListener('keypress', this.onKeyPressed);
     }
     /* }}} */
@@ -1758,7 +1792,7 @@ __decorate$2([
     vtyx.Watch('store.state.offsetItem')
 ], List.prototype, "onOffsetChange", null);
 __decorate$2([
-    vtyx.Watch('filteredOptions')
+    vtyx.Watch('filteredOptions', { deep: true })
 ], List.prototype, "onFilteredOptionsChange", null);
 __decorate$2([
     vtyx.Watch('groupId')
@@ -1929,7 +1963,7 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
         document.body.addEventListener('keydown', this.onKeyDown);
         this.computeListSize();
     }
-    destroyed() {
+    unmounted() {
         document.body.removeEventListener('keydown', this.onKeyDown);
         /* force the element to be removed from DOM */
         if (this.$el.parentNode) {
@@ -1974,7 +2008,7 @@ __decorate$1([
     vtyx.Prop({ default: 300 })
 ], ExtendedList.prototype, "width", void 0);
 __decorate$1([
-    vtyx.Watch('store.state.filteredOptions')
+    vtyx.Watch('store.state.filteredOptions', { deep: true })
 ], ExtendedList.prototype, "onFilteredOptionsChange", null);
 __decorate$1([
     vtyx.Watch('store.state.hideFilter')
@@ -2222,7 +2256,7 @@ let Selectic = class Selectic extends vtyx.Vue {
         this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
     onOptionsChange() {
-        this.store.props.options = Array.from(this.options);
+        this.store.props.options = deepClone(this.options);
     }
     onTextsChange() {
         const texts = this.texts;
@@ -2463,7 +2497,7 @@ let Selectic = class Selectic extends vtyx.Vue {
         // }
         // this.store.childOptions = options;
     }
-    beforeDestroy() {
+    beforeUnmount() {
         this.removeListeners();
     }
     /* }}} */
@@ -2539,22 +2573,22 @@ __decorate([
     vtyx.Prop()
 ], Selectic.prototype, "_getMethods", void 0);
 __decorate([
-    vtyx.Watch('value')
+    vtyx.Watch('value', { deep: true })
 ], Selectic.prototype, "onValueChange", null);
 __decorate([
     vtyx.Watch('selectionIsExcluded')
 ], Selectic.prototype, "onExcludedChange", null);
 __decorate([
-    vtyx.Watch('options')
+    vtyx.Watch('options', { deep: true })
 ], Selectic.prototype, "onOptionsChange", null);
 __decorate([
-    vtyx.Watch('texts')
+    vtyx.Watch('texts', { deep: true })
 ], Selectic.prototype, "onTextsChange", null);
 __decorate([
     vtyx.Watch('disabled')
 ], Selectic.prototype, "onDisabledChange", null);
 __decorate([
-    vtyx.Watch('groups')
+    vtyx.Watch('groups', { deep: true })
 ], Selectic.prototype, "onGroupsChanged", null);
 __decorate([
     vtyx.Watch('placeholder')
@@ -2566,7 +2600,7 @@ __decorate([
     vtyx.Watch('isFocused')
 ], Selectic.prototype, "onFocusChanged", null);
 __decorate([
-    vtyx.Watch('store.state.internalValue')
+    vtyx.Watch('store.state.internalValue', { deep: true })
 ], Selectic.prototype, "onInternalValueChange", null);
 __decorate([
     vtyx.Emit('input'),

package/dist/selectic.esm.js

@@ -31,13 +31,42 @@ 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";
 styleInject(css_248z);
 
-/* File Purpose:
- * It keeps and computes all states at a single place.
- * Every inner components of Selectic should communicate with this file to
- * change or to get states.
+/**
+ * Clone the object and its inner properties.
+ * @param obj The object to be clone.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns a copy of obj
  */
-/* }}} */
-/* {{{ Helper */
+function deepClone(obj, refs = new WeakMap()) {
+    /* For circular references */
+    if (refs.has(obj)) {
+        return refs.get(obj);
+    }
+    if (typeof obj === 'object') {
+        if (Array.isArray(obj)) {
+            const ref = [];
+            refs.set(obj, ref);
+            obj.forEach((val, idx) => {
+                ref[idx] = deepClone(val, refs);
+            });
+            return ref;
+        }
+        if (obj instanceof RegExp) {
+            const ref = new RegExp(obj.source, obj.flags);
+            refs.set(obj, ref);
+            return ref;
+        }
+        /* This should be an object */
+        const ref = {};
+        refs.set(obj, ref);
+        for (const [key, val] of Object.entries(obj)) {
+            ref[key] = deepClone(val, refs);
+        }
+        return ref;
+    }
+    /* This should be a primitive */
+    return obj;
+}
 /**
  * Escape search string to consider regexp special characters as they
  * are and not like special characters.
@@ -68,6 +97,12 @@ function assignObject(obj, ...sourceObjects) {
     }
     return result;
 }
+
+/* File Purpose:
+ * It keeps and computes all states at a single place.
+ * Every inner components of Selectic should communicate with this file to
+ * change or to get states.
+ */
 /* }}} */
 /* {{{ Static */
 function changeTexts$1(texts) {
@@ -97,6 +132,26 @@ let closePreviousSelectic;
 let uid = 0;
 class SelecticStore {
     constructor(props = {}) {
+        /* Do not need reactivity */
+        this.requestId = 0;
+        this._uid = ++uid;
+        /* {{{ Props */
+        const defaultProps = {
+            value: null,
+            selectionIsExcluded: false,
+            disabled: false,
+            options: null,
+            childOptions: [],
+            groups: [],
+            texts: null,
+            params: {},
+            fetchCallback: null,
+            getItemsCallback: null,
+            keepOpenWithOtherSelectic: false,
+        };
+        const propsVal = assignObject(defaultProps, props);
+        this.props = reactive(propsVal);
+        /* }}} */
         /* {{{ data */
         this.state = reactive({
             multiple: false,
@@ -137,27 +192,6 @@ class SelecticStore {
                 automaticClose: false,
             },
         });
-        /* Do not need reactivity */
-        this.requestId = 0;
-        this._uid = ++uid;
-        /* {{{ Props */
-        const defaultProps = {
-            value: null,
-            selectionIsExcluded: false,
-            disabled: false,
-            options: null,
-            childOptions: [],
-            groups: [],
-            texts: null,
-            params: {},
-            fetchCallback: null,
-            getItemsCallback: null,
-            keepOpenWithOtherSelectic: false,
-        };
-        const propsVal = assignObject(defaultProps, props);
-        this.props = reactive(propsVal);
-        /* }}} */
-        /* {{{ data */
         this.data = reactive({
             labels: Object.assign({}, messages),
             itemsPerPage: 10,
@@ -208,17 +242,17 @@ class SelecticStore {
             this.commit('isOpen', false);
             this.buildAllOptions(true);
             this.buildSelectedOptions();
-        });
+        }, { deep: true });
         watch(() => [this.listOptions, this.elementOptions], () => {
             /* TODO: transform allOptions as a computed properties and this
              * watcher become useless */
             this.buildAllOptions(true);
-        });
+        }, { deep: true });
         watch(() => this.props.value, () => {
             var _a;
             const value = (_a = this.props.value) !== null && _a !== void 0 ? _a : null;
             this.commit('internalValue', value);
-        });
+        }, { deep: true });
         watch(() => this.props.selectionIsExcluded, () => {
             this.commit('selectionIsExcluded', this.props.selectionIsExcluded);
         });
@@ -234,14 +268,14 @@ class SelecticStore {
                 areAllSelected = this.state.filteredOptions.every((item) => !!(+item.selected ^ selectionIsExcluded));
             }
             this.state.status.areAllSelected = areAllSelected;
-        });
+        }, { deep: true });
         watch(() => this.state.internalValue, () => {
             this.buildSelectedOptions();
-        });
+        }, { deep: true });
         watch(() => this.state.allOptions, () => {
             this.checkAutoSelect();
             this.checkAutoDisabled();
-        });
+        }, { deep: true });
         watch(() => this.state.totalAllOptions, () => {
             this.checkHideFilter();
         });
@@ -271,8 +305,8 @@ class SelecticStore {
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: props.selectionIsExcluded,
-            disabled: props.disabled,
+            selectionIsExcluded: !!this.props.selectionIsExcluded,
+            disabled: !!this.props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
         this.checkHideFilter();
         if (this.props.texts) {
@@ -1390,7 +1424,7 @@ __decorate$4([
     Prop({ default: '' })
 ], MainInput.prototype, "id", void 0);
 __decorate$4([
-    Watch('store.state.internalValue')
+    Watch('store.state.internalValue', { deep: true })
 ], MainInput.prototype, "onInternalChange", null);
 MainInput = __decorate$4([
     Component
@@ -1494,7 +1528,7 @@ let FilterPanel = class FilterPanel extends Vue {
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
-    destroyed() {
+    unmounted() {
         document.removeEventListener('keypress', this.onKeyPressed);
     }
     /* }}} */
@@ -1754,7 +1788,7 @@ __decorate$2([
     Watch('store.state.offsetItem')
 ], List.prototype, "onOffsetChange", null);
 __decorate$2([
-    Watch('filteredOptions')
+    Watch('filteredOptions', { deep: true })
 ], List.prototype, "onFilteredOptionsChange", null);
 __decorate$2([
     Watch('groupId')
@@ -1925,7 +1959,7 @@ let ExtendedList = class ExtendedList extends Vue {
         document.body.addEventListener('keydown', this.onKeyDown);
         this.computeListSize();
     }
-    destroyed() {
+    unmounted() {
         document.body.removeEventListener('keydown', this.onKeyDown);
         /* force the element to be removed from DOM */
         if (this.$el.parentNode) {
@@ -1970,7 +2004,7 @@ __decorate$1([
     Prop({ default: 300 })
 ], ExtendedList.prototype, "width", void 0);
 __decorate$1([
-    Watch('store.state.filteredOptions')
+    Watch('store.state.filteredOptions', { deep: true })
 ], ExtendedList.prototype, "onFilteredOptionsChange", null);
 __decorate$1([
     Watch('store.state.hideFilter')
@@ -2218,7 +2252,7 @@ let Selectic = class Selectic extends Vue {
         this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
     onOptionsChange() {
-        this.store.props.options = Array.from(this.options);
+        this.store.props.options = deepClone(this.options);
     }
     onTextsChange() {
         const texts = this.texts;
@@ -2459,7 +2493,7 @@ let Selectic = class Selectic extends Vue {
         // }
         // this.store.childOptions = options;
     }
-    beforeDestroy() {
+    beforeUnmount() {
         this.removeListeners();
     }
     /* }}} */
@@ -2535,22 +2569,22 @@ __decorate([
     Prop()
 ], Selectic.prototype, "_getMethods", void 0);
 __decorate([
-    Watch('value')
+    Watch('value', { deep: true })
 ], Selectic.prototype, "onValueChange", null);
 __decorate([
     Watch('selectionIsExcluded')
 ], Selectic.prototype, "onExcludedChange", null);
 __decorate([
-    Watch('options')
+    Watch('options', { deep: true })
 ], Selectic.prototype, "onOptionsChange", null);
 __decorate([
-    Watch('texts')
+    Watch('texts', { deep: true })
 ], Selectic.prototype, "onTextsChange", null);
 __decorate([
     Watch('disabled')
 ], Selectic.prototype, "onDisabledChange", null);
 __decorate([
-    Watch('groups')
+    Watch('groups', { deep: true })
 ], Selectic.prototype, "onGroupsChanged", null);
 __decorate([
     Watch('placeholder')
@@ -2562,7 +2596,7 @@ __decorate([
     Watch('isFocused')
 ], Selectic.prototype, "onFocusChanged", null);
 __decorate([
-    Watch('store.state.internalValue')
+    Watch('store.state.internalValue', { deep: true })
 ], Selectic.prototype, "onInternalValueChange", null);
 __decorate([
     Emit('input'),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.0.5",
+    "version": "3.0.9",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",

package/src/ExtendedList.tsx

@@ -192,7 +192,7 @@ export default class ExtendedList extends Vue<Props> {
     /* }}} */
     /* {{{ watch */
 
-    @Watch('store.state.filteredOptions')
+    @Watch('store.state.filteredOptions', { deep: true })
     public onFilteredOptionsChange() {
         this.$nextTick(this.computeListSize);
     }
@@ -228,7 +228,7 @@ export default class ExtendedList extends Vue<Props> {
         this.computeListSize();
     }
 
-    public destroyed() {
+    public unmounted() {
         document.body.removeEventListener('keydown', this.onKeyDown);
 
         /* force the element to be removed from DOM */

package/src/Filter.tsx

@@ -133,7 +133,7 @@ export default class FilterPanel extends Vue<Props> {
         this.getFocus();
     }
 
-    public destroyed() {
+    public unmounted() {
         document.removeEventListener('keypress', this.onKeyPressed);
     }
 

package/src/List.tsx

@@ -220,7 +220,7 @@ export default class List extends Vue<Props> {
         this.checkOffset();
     }
 
-    @Watch('filteredOptions')
+    @Watch('filteredOptions', { deep: true })
     public onFilteredOptionsChange() {
         this.checkOffset();
     }

package/src/MainInput.tsx

@@ -264,7 +264,7 @@ export default class MainInput extends Vue<Props> {
     /* }}} */
     /* {{{ watch */
 
-    @Watch('store.state.internalValue')
+    @Watch('store.state.internalValue', { deep: true })
     public onInternalChange() {
         this.nbHiddenItems = 0;
     }

package/src/Store.tsx

@@ -5,6 +5,7 @@
  */
 
 import { reactive, watch, unref, computed, ComputedRef } from 'vue';
+import { convertToRegExp, assignObject } from './tools';
 
 /* {{{ Types definitions */
 
@@ -336,42 +337,6 @@ interface Messages {
 
 export type PartialMessages = { [K in keyof Messages]?: Messages[K] };
 
-/* }}} */
-/* {{{ Helper */
-
-/**
- * Escape search string to consider regexp special characters as they
- * are and not like special characters.
- * Consider * characters as a wildcards characters (meanings 0 or
- * more characters) and convert them to .* (the wildcard characters
- * in Regexp)
- *
- * @param  {String} name the original string to convert
- * @param  {String} [flag] mode to apply for regExp
- * @return {String} the string ready to use for RegExp format
- */
-function convertToRegExp(name: string, flag = 'i'): RegExp {
-    const pattern = name.replace(/[\\^$.+?(){}[\]|]/g, '\\$&')
-                        .replace(/\*/g, '.*');
-
-    return new RegExp(pattern, flag);
-}
-
-/** Does the same as Object.assign but does not replace if value is undefined */
-function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial<T>>): T {
-    const result = obj;
-    for (const source of sourceObjects) {
-        for (const key of Object.keys(source)) {
-            const value = source[key as keyof T];
-            if (value === undefined) {
-                continue;
-            }
-            result[key as keyof T] = value;
-        }
-    }
-    return result as T;
-}
-
 /* }}} */
 /* {{{ Static */
 
@@ -411,48 +376,7 @@ export default class SelecticStore {
 
     /* {{{ data */
 
-    public state = reactive<SelecticStoreState>({
-        multiple: false,
-        disabled: false,
-        placeholder: '',
-        hideFilter: false,
-        keepFilterOpen: false,
-        allowRevert: undefined,
-        allowClearSelection: false,
-        autoSelect: true,
-        autoDisabled: true,
-        strictValue: false,
-        selectionOverflow: 'collapsed',
-
-        internalValue: null,
-        isOpen: false,
-        searchText: '',
-        selectionIsExcluded: false,
-        allOptions: [],
-        dynOptions: [],
-        filteredOptions: [],
-        selectedOptions: null,
-        totalAllOptions: Infinity,
-        totalDynOptions: Infinity,
-        totalFilteredOptions: Infinity,
-        groups: new Map(),
-        offsetItem: 0,
-        activeItemIdx: -1,
-        pageSize: 100,
-        listPosition: 'auto',
-
-        optionBehaviorOperation: 'sort',
-        optionBehaviorOrder: ['O', 'D', 'E'],
-
-        status: {
-            searching: false,
-            errorMessage: '',
-            areAllSelected: false,
-            hasChanged: false,
-            automaticChange: false,
-            automaticClose: false,
-        },
-    });
+    public state: SelecticStoreState;
     public data: Data;
 
     /* Do not need reactivity */
@@ -500,6 +424,49 @@ export default class SelecticStore {
         /* }}} */
         /* {{{ data */
 
+        this.state = reactive<SelecticStoreState>({
+            multiple: false,
+            disabled: false,
+            placeholder: '',
+            hideFilter: false,
+            keepFilterOpen: false,
+            allowRevert: undefined,
+            allowClearSelection: false,
+            autoSelect: true,
+            autoDisabled: true,
+            strictValue: false,
+            selectionOverflow: 'collapsed',
+
+            internalValue: null,
+            isOpen: false,
+            searchText: '',
+            selectionIsExcluded: false,
+            allOptions: [],
+            dynOptions: [],
+            filteredOptions: [],
+            selectedOptions: null,
+            totalAllOptions: Infinity,
+            totalDynOptions: Infinity,
+            totalFilteredOptions: Infinity,
+            groups: new Map(),
+            offsetItem: 0,
+            activeItemIdx: -1,
+            pageSize: 100,
+            listPosition: 'auto',
+
+            optionBehaviorOperation: 'sort',
+            optionBehaviorOrder: ['O', 'D', 'E'],
+
+            status: {
+                searching: false,
+                errorMessage: '',
+                areAllSelected: false,
+                hasChanged: false,
+                automaticChange: false,
+                automaticClose: false,
+            },
+        });
+
         this.data = reactive({
             labels: Object.assign({}, messages),
             itemsPerPage: 10,
@@ -565,18 +532,18 @@ export default class SelecticStore {
             this.commit('isOpen', false);
             this.buildAllOptions(true);
             this.buildSelectedOptions();
-        });
+        }, { deep: true });
 
         watch(() => [this.listOptions, this.elementOptions], () => {
             /* TODO: transform allOptions as a computed properties and this
              * watcher become useless */
             this.buildAllOptions(true);
-        });
+        }, { deep: true });
 
         watch(() => this.props.value, () => {
             const value = this.props.value ?? null;
             this.commit('internalValue', value);
-        });
+        }, { deep: true });
 
         watch(() => this.props.selectionIsExcluded, () => {
             this.commit('selectionIsExcluded', this.props.selectionIsExcluded);
@@ -598,16 +565,16 @@ export default class SelecticStore {
             }
 
             this.state.status.areAllSelected = areAllSelected;
-        });
+        }, { deep: true });
 
         watch(() => this.state.internalValue, () => {
             this.buildSelectedOptions();
-        });
+        }, { deep: true });
 
         watch(() => this.state.allOptions, () => {
             this.checkAutoSelect();
             this.checkAutoDisabled();
-        });
+        }, { deep: true });
 
         watch(() => this.state.totalAllOptions, () => {
             this.checkHideFilter();
@@ -649,8 +616,8 @@ export default class SelecticStore {
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: props.selectionIsExcluded,
-            disabled: props.disabled,
+            selectionIsExcluded: !!this.props.selectionIsExcluded,
+            disabled: !!this.props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
 
         this.checkHideFilter();

package/src/index.tsx

@@ -21,6 +21,8 @@
 import {Vue, Component, Emit, Prop, Watch, h} from 'vtyx';
 import './css/selectic.css';
 
+import { deepClone } from './tools';
+
 import Store, {
     changeTexts as storeChangeTexts,
     OptionProp,
@@ -537,7 +539,7 @@ export default class Selectic extends Vue<Props> {
     /* }}} */
     /* {{{ watch */
 
-    @Watch('value')
+    @Watch('value', { deep: true })
     public onValueChange() {
         const currentValue = this.store.state.internalValue;
         const newValue = this.value ?? null;
@@ -556,12 +558,12 @@ export default class Selectic extends Vue<Props> {
         this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
 
-    @Watch('options')
+    @Watch('options', { deep: true })
     public onOptionsChange() {
-        this.store.props.options = Array.from(this.options);
+        this.store.props.options = deepClone(this.options);
     }
 
-    @Watch('texts')
+    @Watch('texts', { deep: true })
     public onTextsChange() {
         const texts = this.texts;
 
@@ -575,7 +577,7 @@ export default class Selectic extends Vue<Props> {
         this.store.props.disabled = this.disabled;
     }
 
-    @Watch('groups')
+    @Watch('groups', { deep: true })
     public onGroupsChanged() {
         this.store.changeGroups(this.groups);
     }
@@ -595,7 +597,7 @@ export default class Selectic extends Vue<Props> {
         this.focusToggled();
     }
 
-    @Watch('store.state.internalValue')
+    @Watch('store.state.internalValue', { deep: true })
     public onInternalValueChange() {
         const oldValue = this._oldValue;
         const value = this.getValue();
@@ -851,7 +853,7 @@ export default class Selectic extends Vue<Props> {
         // this.store.childOptions = options;
     }
 
-    public beforeDestroy() {
+    public beforeUnmount() {
         this.removeListeners();
     }
 

package/src/tools.ts

@@ -0,0 +1,75 @@
+
+/**
+ * Clone the object and its inner properties.
+ * @param obj The object to be clone.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns a copy of obj
+ */
+export function deepClone<T = any>(obj: T, refs: WeakMap<any, any> = new WeakMap()): T {
+    /* For circular references */
+    if (refs.has(obj)) {
+        return refs.get(obj);
+    }
+
+    if (typeof obj === 'object') {
+        if (Array.isArray(obj)) {
+            const ref: any[] = [];
+            refs.set(obj, ref);
+            obj.forEach((val, idx) => {
+                ref[idx] = deepClone(val, refs);
+            });
+            return ref as unknown as T;
+        }
+
+        if (obj instanceof RegExp) {
+            const ref = new RegExp(obj.source, obj.flags);
+            refs.set(obj, ref);
+            return ref as unknown as T;
+        }
+
+        /* This should be an object */
+        const ref: any = {};
+        refs.set(obj, ref);
+        for (const [key, val] of Object.entries(obj)) {
+            ref[key] = deepClone(val, refs);
+        }
+        return ref as unknown as T;
+    }
+
+    /* This should be a primitive */
+    return obj;
+}
+
+
+/**
+ * Escape search string to consider regexp special characters as they
+ * are and not like special characters.
+ * Consider * characters as a wildcards characters (meanings 0 or
+ * more characters) and convert them to .* (the wildcard characters
+ * in Regexp)
+ *
+ * @param  {String} name the original string to convert
+ * @param  {String} [flag] mode to apply for regExp
+ * @return {String} the string ready to use for RegExp format
+ */
+export function convertToRegExp(name: string, flag = 'i'): RegExp {
+    const pattern = name.replace(/[\\^$.+?(){}[\]|]/g, '\\$&')
+                        .replace(/\*/g, '.*');
+
+    return new RegExp(pattern, flag);
+}
+
+/** Does the same as Object.assign but does not replace if value is undefined */
+export function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial<T>>): T {
+    const result = obj;
+    for (const source of sourceObjects) {
+        for (const key of Object.keys(source)) {
+            const value = source[key as keyof T];
+            if (value === undefined) {
+                continue;
+            }
+            result[key as keyof T] = value;
+        }
+    }
+    return result as T;
+}

package/test/Store/Store_props.spec.js

@@ -223,6 +223,7 @@ tape.test('change props', (subT) => {
             const store = new Store({
                 value: 2,
                 options: getOptions(5, 'alpha'),
+                disabled: false,
                 params: {
                     autoDisabled: true,
                 },
@@ -249,6 +250,7 @@ tape.test('change props', (subT) => {
             const store = new Store({
                 value: 2,
                 options: getOptions(5, 'alpha'),
+                disabled: false,
                 params: {
                     autoDisabled: true,
                     strictValue: true,
@@ -298,6 +300,37 @@ tape.test('change props', (subT) => {
             t.end();
         });
 
+        sTest.test('should re-enable the select when data are loaded', async (t) => {
+            const store = new Store({
+                options: [],
+                disabled: false,
+                params: {
+                    autoDisabled: true,
+                },
+            });
+            await _.nextVueTick(store);
+
+            store.commit('isOpen', true);
+            await _.nextVueTick(store);
+
+            t.is(store.state.internalValue, null);
+            t.is(store.state.disabled, true);
+            t.is(store.state.isOpen, false);
+
+            store.props.options = getOptions(0, 'alpha');
+            await _.nextVueTick(store);
+
+            t.is(store.state.internalValue, null);
+            t.is(store.state.disabled, true), 'should be disabled';
+
+            store.props.options = getOptions(5, 'beta');
+            await _.nextVueTick(store);
+
+            t.is(store.state.internalValue, 0);
+            t.is(store.state.disabled, false), 'should be enabled';
+            t.end();
+        });
+
         sTest.test('should not re-enable the select if disable is set', async (t) => {
             const store = new Store({
                 options: getOptions(1, 'alpha'),

package/types/ExtendedList.d.ts

@@ -31,6 +31,6 @@ export default class ExtendedList extends Vue<Props> {
     private getGroup;
     private computeListSize;
     mounted(): void;
-    destroyed(): void;
+    unmounted(): void;
     render(): h.JSX.Element;
 }

package/types/Filter.d.ts

@@ -23,6 +23,6 @@ export default class FilterPanel extends Vue<Props> {
     private getFocus;
     onClosed(): void;
     mounted(): void;
-    destroyed(): void;
+    unmounted(): void;
     render(): h.JSX.Element;
 }

package/types/List.d.ts

@@ -1,5 +1,5 @@
 import { Vue, h } from 'vtyx';
-import Store, { OptionItem, OptionId } from './Store';
+import Store, { OptionItem } from './Store';
 export interface Props {
     store: Store;
     options?: any[];
@@ -14,31 +14,7 @@ export default class List extends Vue<Props> {
     private itemHeight;
     private groupId;
     private doNotScroll;
-    get filteredOptions(): {
-        selected: boolean;
-        disabled: boolean;
-        isGroup: boolean;
-        id: OptionId;
-        text: string;
-        title?: string | undefined;
-        group?: import("./Store").StrictOptionId | undefined;
-        className?: string | undefined;
-        style?: string | undefined;
-        icon?: string | undefined;
-        options?: {
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            disabled?: boolean | undefined;
-            group?: import("./Store").StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: any[] | undefined;
-            data?: any;
-        }[] | undefined;
-        data?: any;
-    }[];
+    get filteredOptions(): OptionItem[];
     get isMultiple(): boolean;
     get itemsMargin(): number;
     get shortOptions(): OptionItem[];

package/types/Store.d.ts

@@ -142,141 +142,7 @@ export declare type PartialMessages = {
 export declare function changeTexts(texts: PartialMessages): void;
 export default class SelecticStore {
     props: InternalProps;
-    state: {
-        internalValue: OptionId | StrictOptionId[];
-        selectionIsExcluded: boolean;
-        multiple: boolean;
-        disabled: boolean;
-        placeholder: string;
-        hideFilter: boolean;
-        keepFilterOpen: boolean;
-        allowRevert?: boolean | undefined;
-        allowClearSelection: boolean;
-        autoSelect: boolean;
-        autoDisabled: boolean;
-        strictValue: boolean;
-        selectionOverflow: SelectionOverflow;
-        isOpen: boolean;
-        searchText: string;
-        allOptions: {
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            disabled?: boolean | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: any[] | undefined;
-            data?: any;
-        }[];
-        dynOptions: {
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            disabled?: boolean | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: any[] | undefined;
-            data?: any;
-        }[];
-        filteredOptions: {
-            selected: boolean;
-            disabled: boolean;
-            isGroup: boolean;
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: {
-                id: OptionId;
-                text: string;
-                title?: string | undefined;
-                disabled?: boolean | undefined;
-                group?: StrictOptionId | undefined;
-                className?: string | undefined;
-                style?: string | undefined;
-                icon?: string | undefined;
-                options?: any[] | undefined;
-                data?: any;
-            }[] | undefined;
-            data?: any;
-        }[];
-        selectedOptions: {
-            selected: boolean;
-            disabled: boolean;
-            isGroup: boolean;
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: {
-                id: OptionId;
-                text: string;
-                title?: string | undefined;
-                disabled?: boolean | undefined;
-                group?: StrictOptionId | undefined;
-                className?: string | undefined;
-                style?: string | undefined;
-                icon?: string | undefined;
-                options?: any[] | undefined;
-                data?: any;
-            }[] | undefined;
-            data?: any;
-        } | {
-            selected: boolean;
-            disabled: boolean;
-            isGroup: boolean;
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: {
-                id: OptionId;
-                text: string;
-                title?: string | undefined;
-                disabled?: boolean | undefined;
-                group?: StrictOptionId | undefined;
-                className?: string | undefined;
-                style?: string | undefined;
-                icon?: string | undefined;
-                options?: any[] | undefined;
-                data?: any;
-            }[] | undefined;
-            data?: any;
-        }[] | null;
-        totalAllOptions: number;
-        totalDynOptions: number;
-        totalFilteredOptions: number;
-        groups: Map<OptionId, string>;
-        offsetItem: number;
-        activeItemIdx: number;
-        pageSize: number;
-        formatOption?: FormatCallback | undefined;
-        formatSelection?: FormatCallback | undefined;
-        optionBehaviorOperation: OptionBehaviorOperation;
-        optionBehaviorOrder: OptionBehaviorOrder[];
-        listPosition: ListPosition;
-        status: {
-            searching: boolean;
-            errorMessage: string;
-            areAllSelected: boolean;
-            hasChanged: boolean;
-            automaticChange: boolean;
-            automaticClose: boolean;
-        };
-    };
+    state: SelecticStoreState;
     data: Data;
     private requestId;
     private cacheRequest;

package/types/index.d.ts

@@ -136,6 +136,6 @@ export default class Selectic extends Vue<Props> {
     created(): void;
     mounted(): void;
     beforeUpdate(): void;
-    beforeDestroy(): void;
+    beforeUnmount(): void;
     render(): h.JSX.Element | undefined;
 }

package/types/tools.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Clone the object and its inner properties.
+ * @param obj The object to be clone.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns a copy of obj
+ */
+export declare function deepClone<T = any>(obj: T, refs?: WeakMap<any, any>): T;
+/**
+ * Escape search string to consider regexp special characters as they
+ * are and not like special characters.
+ * Consider * characters as a wildcards characters (meanings 0 or
+ * more characters) and convert them to .* (the wildcard characters
+ * in Regexp)
+ *
+ * @param  {String} name the original string to convert
+ * @param  {String} [flag] mode to apply for regExp
+ * @return {String} the string ready to use for RegExp format
+ */
+export declare function convertToRegExp(name: string, flag?: string): RegExp;
+/** Does the same as Object.assign but does not replace if value is undefined */
+export declare function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial<T>>): T;