selectic 3.0.4 → 3.0.8

package/dist/selectic.common.js

@@ -101,6 +101,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 +161,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 +211,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 +237,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 +274,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 +1393,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 +1497,7 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
-    destroyed() {
+    unmounted() {
         document.removeEventListener('keypress', this.onKeyPressed);
     }
     /* }}} */
@@ -1758,7 +1757,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 +1928,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 +1973,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')
@@ -2025,15 +2024,26 @@ let Selectic = class Selectic extends vtyx.Vue {
     }
     get outsideListener() {
         return (evt) => {
-            const target = evt.target;
             if (!this.$refs) {
                 /* this component should have been destroyed */
                 this.removeListeners();
                 this.store.commit('isOpen', false);
                 return;
             }
-            if (!this.$refs.extendedList.$el.contains(target) && !this.$el.contains(target)) {
-                this.store.commit('isOpen', false);
+            const store = this.store;
+            const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
+            const extendedList = this.$refs.extendedList;
+            if (!extendedList) {
+                /* this component is not focused anymore */
+                if (!keepOpenWithOtherSelectic) {
+                    this.removeListeners();
+                    this.store.commit('isOpen', false);
+                }
+                return;
+            }
+            const target = evt.target;
+            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+                store.commit('isOpen', false);
             }
         };
     }
@@ -2452,7 +2462,7 @@ let Selectic = class Selectic extends vtyx.Vue {
         // }
         // this.store.childOptions = options;
     }
-    beforeDestroy() {
+    beforeUnmount() {
         this.removeListeners();
     }
     /* }}} */
@@ -2528,22 +2538,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')
@@ -2555,7 +2565,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

@@ -97,6 +97,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 +157,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 +207,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 +233,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 +270,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 +1389,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 +1493,7 @@ let FilterPanel = class FilterPanel extends Vue {
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
-    destroyed() {
+    unmounted() {
         document.removeEventListener('keypress', this.onKeyPressed);
     }
     /* }}} */
@@ -1754,7 +1753,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 +1924,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 +1969,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')
@@ -2021,15 +2020,26 @@ let Selectic = class Selectic extends Vue {
     }
     get outsideListener() {
         return (evt) => {
-            const target = evt.target;
             if (!this.$refs) {
                 /* this component should have been destroyed */
                 this.removeListeners();
                 this.store.commit('isOpen', false);
                 return;
             }
-            if (!this.$refs.extendedList.$el.contains(target) && !this.$el.contains(target)) {
-                this.store.commit('isOpen', false);
+            const store = this.store;
+            const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
+            const extendedList = this.$refs.extendedList;
+            if (!extendedList) {
+                /* this component is not focused anymore */
+                if (!keepOpenWithOtherSelectic) {
+                    this.removeListeners();
+                    this.store.commit('isOpen', false);
+                }
+                return;
+            }
+            const target = evt.target;
+            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+                store.commit('isOpen', false);
             }
         };
     }
@@ -2448,7 +2458,7 @@ let Selectic = class Selectic extends Vue {
         // }
         // this.store.childOptions = options;
     }
-    beforeDestroy() {
+    beforeUnmount() {
         this.removeListeners();
     }
     /* }}} */
@@ -2524,22 +2534,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')
@@ -2551,7 +2561,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.4",
+    "version": "3.0.8",
     "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

@@ -411,48 +411,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 +459,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 +567,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 +600,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 +651,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

@@ -309,8 +309,6 @@ export default class Selectic extends Vue<Props> {
 
     get outsideListener() {
         return (evt: MouseEvent) => {
-            const target =  evt.target as Node;
-
             if (!this.$refs) {
                 /* this component should have been destroyed */
                 this.removeListeners();
@@ -318,8 +316,23 @@ export default class Selectic extends Vue<Props> {
                 return;
             }
 
-            if (!this.$refs.extendedList.$el.contains(target) && !this.$el.contains(target)) {
-                this.store.commit('isOpen', false);
+            const store = this.store;
+            const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
+            const extendedList = this.$refs.extendedList;
+
+            if (!extendedList) {
+                /* this component is not focused anymore */
+                if (!keepOpenWithOtherSelectic) {
+                    this.removeListeners();
+                    this.store.commit('isOpen', false);
+                }
+                return;
+            }
+
+            const target =  evt.target as Node;
+
+            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+                store.commit('isOpen', false);
             }
         };
     }
@@ -524,7 +537,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;
@@ -543,12 +556,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);
     }
 
-    @Watch('texts')
+    @Watch('texts', { deep: true })
     public onTextsChange() {
         const texts = this.texts;
 
@@ -562,7 +575,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);
     }
@@ -582,7 +595,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();
@@ -838,7 +851,7 @@ export default class Selectic extends Vue<Props> {
         // this.store.childOptions = options;
     }
 
-    public beforeDestroy() {
+    public beforeUnmount() {
         this.removeListeners();
     }
 

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;
 }