selectic 3.0.7 → 3.0.8

package/dist/selectic.common.js

@@ -211,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);
         });
@@ -237,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();
         });
@@ -1393,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
@@ -1497,7 +1497,7 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
-    destroyed() {
+    unmounted() {
         document.removeEventListener('keypress', this.onKeyPressed);
     }
     /* }}} */
@@ -1757,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')
@@ -1928,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) {
@@ -1973,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')
@@ -2462,7 +2462,7 @@ let Selectic = class Selectic extends vtyx.Vue {
         // }
         // this.store.childOptions = options;
     }
-    beforeDestroy() {
+    beforeUnmount() {
         this.removeListeners();
     }
     /* }}} */
@@ -2538,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')
@@ -2565,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

@@ -207,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);
         });
@@ -233,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();
         });
@@ -1389,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
@@ -1493,7 +1493,7 @@ let FilterPanel = class FilterPanel extends Vue {
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
-    destroyed() {
+    unmounted() {
         document.removeEventListener('keypress', this.onKeyPressed);
     }
     /* }}} */
@@ -1753,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')
@@ -1924,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) {
@@ -1969,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')
@@ -2458,7 +2458,7 @@ let Selectic = class Selectic extends Vue {
         // }
         // this.store.childOptions = options;
     }
-    beforeDestroy() {
+    beforeUnmount() {
         this.removeListeners();
     }
     /* }}} */
@@ -2534,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')
@@ -2561,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.7",
+    "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

@@ -567,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);
@@ -600,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();

package/src/index.tsx

@@ -537,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;
@@ -556,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;
 
@@ -575,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);
     }
@@ -595,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();
@@ -851,7 +851,7 @@ export default class Selectic extends Vue<Props> {
         // this.store.childOptions = options;
     }
 
-    public beforeDestroy() {
+    public beforeUnmount() {
         this.removeListeners();
     }
 

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