selectic 3.0.0 → 3.0.1

package/dist/selectic.common.js

@@ -196,6 +196,12 @@ class SelecticStore {
             const state = this.state;
             return state.dynOptions.length === state.totalDynOptions;
         });
+        this.listOptions = vue.computed(() => {
+            return this.getListOptions();
+        });
+        this.elementOptions = vue.computed(() => {
+            return this.getElementOptions();
+        });
         /* }}} */
         /* {{{ watch */
         vue.watch(() => [this.props.options, this.props.childOptions], () => {
@@ -204,6 +210,11 @@ class SelecticStore {
             this.buildAllOptions(true);
             this.buildSelectedOptions();
         });
+        vue.watch(() => [this.listOptions, this.elementOptions], () => {
+            /* TODO: transform allOptions as a computed properties and this
+             * watcher become useless */
+            this.buildAllOptions(true);
+        });
         vue.watch(() => this.props.value, () => {
             var _a;
             const value = (_a = this.props.value) !== null && _a !== void 0 ? _a : null;
@@ -252,8 +263,11 @@ class SelecticStore {
             delete stateParam.hideFilter;
         }
         /* Update state */
-        assignObject(this.state, stateParam, {
-            internalValue: value,
+        assignObject(this.state, stateParam);
+        /* XXX: should be done in 2 lines, in order to set the multiple state
+         * and ensure convertValue run with correct state */
+        assignObject(this.state, {
+            internalValue: this.convertTypeValue(value),
             selectionIsExcluded: props.selectionIsExcluded,
             disabled: props.disabled,
         });
@@ -512,42 +526,50 @@ class SelecticStore {
         return !!this.getValue(id);
     }
     getValue(id) {
+        var _a, _b;
         function findId(option) {
             return option.id === id;
         }
         return this.state.filteredOptions.find(findId) ||
             this.state.dynOptions.find(findId) ||
-            this.getListOptions().find(findId) ||
-            this.getElementOptions().find(findId);
+            ((_a = this.listOptions.value) !== null && _a !== void 0 ? _a : this.listOptions).find(findId) ||
+            ((_b = this.elementOptions.value) !== null && _b !== void 0 ? _b : this.elementOptions).find(findId);
     }
-    assertValueType() {
+    convertTypeValue(oldValue) {
         const state = this.state;
-        const internalValue = state.internalValue;
         const isMultiple = state.multiple;
-        let newValue = internalValue;
+        let newValue = oldValue;
         if (isMultiple) {
-            if (!Array.isArray(internalValue)) {
-                newValue = internalValue === null ? [] : [internalValue];
+            if (!Array.isArray(oldValue)) {
+                newValue = oldValue === null ? [] : [oldValue];
             }
         }
         else {
-            if (Array.isArray(internalValue)) {
-                const value = internalValue[0];
+            if (Array.isArray(oldValue)) {
+                const value = oldValue[0];
                 newValue = typeof value === 'undefined' ? null : value;
             }
         }
-        state.internalValue = newValue;
+        return newValue;
+    }
+    assertValueType() {
+        const state = this.state;
+        const internalValue = state.internalValue;
+        const newValue = this.convertTypeValue(internalValue);
+        if (newValue !== internalValue) {
+            state.internalValue = newValue;
+        }
     }
     assertCorrectValue(applyStrict = false) {
         var _a, _b;
         const state = this.state;
+        this.assertValueType();
         const internalValue = state.internalValue;
         const selectionIsExcluded = state.selectionIsExcluded;
         const isMultiple = state.multiple;
         const checkStrict = state.strictValue;
         let newValue = internalValue;
         const isPartial = (_a = this.isPartial.value) !== null && _a !== void 0 ? _a : this.isPartial;
-        this.assertValueType();
         if (isMultiple) {
             const hasFetchedAllItems = (_b = this.hasFetchedAllItems.value) !== null && _b !== void 0 ? _b : this.hasFetchedAllItems;
             if (selectionIsExcluded && hasFetchedAllItems) {
@@ -577,7 +599,7 @@ class SelecticStore {
                     return;
                 }
             }
-            else if (!this.hasItemInStore(newValue)) {
+            else if (newValue !== null && !this.hasItemInStore(newValue)) {
                 filteredValue = null;
                 isDifferent = true;
                 if (isPartial && !applyStrict) {
@@ -606,13 +628,14 @@ class SelecticStore {
             this.state.groups.set(group.id, group.text);
         });
     }
-    /* XXX: This is not a computed property to avoid consuming more memory */
+    /* This method is for the computed property listOptions */
     getListOptions() {
         const options = this.props.options;
         const listOptions = [];
         if (!Array.isArray(options)) {
             return listOptions;
         }
+        const state = this.state;
         options.forEach((option) => {
             /* manage simple string */
             if (typeof option === 'string') {
@@ -625,13 +648,13 @@ class SelecticStore {
             const group = option.group;
             const subOptions = option.options;
             /* check for groups */
-            if (group && !this.state.groups.has(group)) {
-                this.state.groups.set(group, String(group));
+            if (group && !state.groups.has(group)) {
+                state.groups.set(group, String(group));
             }
             /* check for sub options */
             if (subOptions) {
                 const groupId = option.id;
-                this.state.groups.set(groupId, option.text);
+                state.groups.set(groupId, option.text);
                 subOptions.forEach((subOpt) => {
                     subOpt.group = groupId;
                 });
@@ -642,24 +665,25 @@ class SelecticStore {
         });
         return listOptions;
     }
-    /* XXX: This is not a computed property to avoid consuming more memory */
+    /* This method is for the computed property elementOptions */
     getElementOptions() {
         const options = this.props.childOptions;
         const childOptions = [];
         if (!Array.isArray(options) || options.length === 0) {
             return childOptions;
         }
+        const state = this.state;
         options.forEach((option) => {
             const group = option.group;
             const subOptions = option.options;
             /* check for groups */
-            if (group && !this.state.groups.has(group)) {
-                this.state.groups.set(group, String(group));
+            if (group && !state.groups.has(group)) {
+                state.groups.set(group, String(group));
             }
             /* check for sub options */
             if (subOptions) {
                 const groupId = option.id;
-                this.state.groups.set(groupId, option.text);
+                state.groups.set(groupId, option.text);
                 const sOpts = subOptions.map((subOpt) => {
                     return Object.assign({}, subOpt, {
                         group: groupId,
@@ -673,7 +697,7 @@ class SelecticStore {
         return childOptions;
     }
     buildAllOptions(keepFetched = false) {
-        var _a;
+        var _a, _b, _c;
         const allOptions = [];
         let listOptions = [];
         let elementOptions = [];
@@ -705,8 +729,8 @@ class SelecticStore {
                 this.state.totalDynOptions = 0;
             }
         }
-        listOptions = this.getListOptions();
-        elementOptions = this.getElementOptions();
+        listOptions = (_b = this.listOptions.value) !== null && _b !== void 0 ? _b : this.listOptions;
+        elementOptions = (_c = this.elementOptions.value) !== null && _c !== void 0 ? _c : this.elementOptions;
         if (this.state.optionBehaviorOperation === 'force') {
             const orderValue = optionBehaviorOrder.find((value) => lengthFromOrder(value) > 0);
             allOptions.push(...arrayFromOrder(orderValue));
@@ -808,21 +832,22 @@ class SelecticStore {
     }
     async buildSelectedOptions() {
         const internalValue = this.state.internalValue;
-        if (this.state.multiple) {
+        const state = this.state;
+        if (state.multiple) {
             /* display partial information about selected items */
-            this.state.selectedOptions = this.buildSelectedItems(internalValue);
+            state.selectedOptions = this.buildSelectedItems(internalValue);
             const items = await this.getItems(internalValue).catch(() => []);
-            if (internalValue !== this.state.internalValue) {
+            if (internalValue !== state.internalValue) {
                 /* Values have been deprecated */
                 return;
             }
             if (items.length !== internalValue.length) {
-                if (!this.state.strictValue) {
-                    const updatedItems = this.state.selectedOptions.map((option) => {
+                if (!state.strictValue) {
+                    const updatedItems = state.selectedOptions.map((option) => {
                         const foundItem = items.find((item) => item.id === option.id);
                         return foundItem || option;
                     });
-                    this.state.selectedOptions = updatedItems;
+                    state.selectedOptions = updatedItems;
                 }
                 else {
                     const itemIds = items.map((item) => item.id);
@@ -831,27 +856,27 @@ class SelecticStore {
                 return;
             }
             /* display full information about selected items */
-            this.state.selectedOptions = items;
+            state.selectedOptions = items;
         }
         else if (internalValue === null) {
-            this.state.selectedOptions = null;
+            state.selectedOptions = null;
         }
         else {
             /* display partial information about selected items */
-            this.state.selectedOptions = this.buildSelectedItems([internalValue])[0];
+            state.selectedOptions = this.buildSelectedItems([internalValue])[0];
             const items = await this.getItems([internalValue]).catch(() => []);
-            if (internalValue !== this.state.internalValue) {
+            if (internalValue !== state.internalValue) {
                 /* Values have been deprecated */
                 return;
             }
             if (!items.length) {
-                if (this.state.strictValue) {
+                if (state.strictValue) {
                     this.commit('internalValue', null);
                 }
                 return;
             }
             /* display full information about selected items */
-            this.state.selectedOptions = items[0];
+            state.selectedOptions = items[0];
         }
     }
     async fetchData() {
@@ -939,6 +964,7 @@ class SelecticStore {
         return this.buildGroupItems(options.filter((option) => rgx.test(option.text)));
     }
     addStaticFilteredOptions(fromDynamic = false) {
+        var _a, _b;
         const search = this.state.searchText;
         let continueLoop = fromDynamic;
         if (this.state.optionBehaviorOperation !== 'sort') {
@@ -958,10 +984,10 @@ class SelecticStore {
             }
             switch (order) {
                 case 'O':
-                    options = this.filterOptions(this.getListOptions(), search);
+                    options = this.filterOptions((_a = this.listOptions.value) !== null && _a !== void 0 ? _a : this.listOptions, search);
                     break;
                 case 'E':
-                    options = this.filterOptions(this.getElementOptions(), search);
+                    options = this.filterOptions((_b = this.elementOptions.value) !== null && _b !== void 0 ? _b : this.elementOptions, search);
                     break;
             }
             this.state.filteredOptions.push(...options);
@@ -2162,7 +2188,7 @@ let Selectic = class Selectic extends vtyx.Vue {
         this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
     onOptionsChange() {
-        this.store.props.options = this.options;
+        this.store.props.options = Array.from(this.options);
     }
     onTextsChange() {
         const texts = this.texts;

package/dist/selectic.esm.js

@@ -192,6 +192,12 @@ class SelecticStore {
             const state = this.state;
             return state.dynOptions.length === state.totalDynOptions;
         });
+        this.listOptions = computed(() => {
+            return this.getListOptions();
+        });
+        this.elementOptions = computed(() => {
+            return this.getElementOptions();
+        });
         /* }}} */
         /* {{{ watch */
         watch(() => [this.props.options, this.props.childOptions], () => {
@@ -200,6 +206,11 @@ class SelecticStore {
             this.buildAllOptions(true);
             this.buildSelectedOptions();
         });
+        watch(() => [this.listOptions, this.elementOptions], () => {
+            /* TODO: transform allOptions as a computed properties and this
+             * watcher become useless */
+            this.buildAllOptions(true);
+        });
         watch(() => this.props.value, () => {
             var _a;
             const value = (_a = this.props.value) !== null && _a !== void 0 ? _a : null;
@@ -248,8 +259,11 @@ class SelecticStore {
             delete stateParam.hideFilter;
         }
         /* Update state */
-        assignObject(this.state, stateParam, {
-            internalValue: value,
+        assignObject(this.state, stateParam);
+        /* XXX: should be done in 2 lines, in order to set the multiple state
+         * and ensure convertValue run with correct state */
+        assignObject(this.state, {
+            internalValue: this.convertTypeValue(value),
             selectionIsExcluded: props.selectionIsExcluded,
             disabled: props.disabled,
         });
@@ -508,42 +522,50 @@ class SelecticStore {
         return !!this.getValue(id);
     }
     getValue(id) {
+        var _a, _b;
         function findId(option) {
             return option.id === id;
         }
         return this.state.filteredOptions.find(findId) ||
             this.state.dynOptions.find(findId) ||
-            this.getListOptions().find(findId) ||
-            this.getElementOptions().find(findId);
+            ((_a = this.listOptions.value) !== null && _a !== void 0 ? _a : this.listOptions).find(findId) ||
+            ((_b = this.elementOptions.value) !== null && _b !== void 0 ? _b : this.elementOptions).find(findId);
     }
-    assertValueType() {
+    convertTypeValue(oldValue) {
         const state = this.state;
-        const internalValue = state.internalValue;
         const isMultiple = state.multiple;
-        let newValue = internalValue;
+        let newValue = oldValue;
         if (isMultiple) {
-            if (!Array.isArray(internalValue)) {
-                newValue = internalValue === null ? [] : [internalValue];
+            if (!Array.isArray(oldValue)) {
+                newValue = oldValue === null ? [] : [oldValue];
             }
         }
         else {
-            if (Array.isArray(internalValue)) {
-                const value = internalValue[0];
+            if (Array.isArray(oldValue)) {
+                const value = oldValue[0];
                 newValue = typeof value === 'undefined' ? null : value;
             }
         }
-        state.internalValue = newValue;
+        return newValue;
+    }
+    assertValueType() {
+        const state = this.state;
+        const internalValue = state.internalValue;
+        const newValue = this.convertTypeValue(internalValue);
+        if (newValue !== internalValue) {
+            state.internalValue = newValue;
+        }
     }
     assertCorrectValue(applyStrict = false) {
         var _a, _b;
         const state = this.state;
+        this.assertValueType();
         const internalValue = state.internalValue;
         const selectionIsExcluded = state.selectionIsExcluded;
         const isMultiple = state.multiple;
         const checkStrict = state.strictValue;
         let newValue = internalValue;
         const isPartial = (_a = this.isPartial.value) !== null && _a !== void 0 ? _a : this.isPartial;
-        this.assertValueType();
         if (isMultiple) {
             const hasFetchedAllItems = (_b = this.hasFetchedAllItems.value) !== null && _b !== void 0 ? _b : this.hasFetchedAllItems;
             if (selectionIsExcluded && hasFetchedAllItems) {
@@ -573,7 +595,7 @@ class SelecticStore {
                     return;
                 }
             }
-            else if (!this.hasItemInStore(newValue)) {
+            else if (newValue !== null && !this.hasItemInStore(newValue)) {
                 filteredValue = null;
                 isDifferent = true;
                 if (isPartial && !applyStrict) {
@@ -602,13 +624,14 @@ class SelecticStore {
             this.state.groups.set(group.id, group.text);
         });
     }
-    /* XXX: This is not a computed property to avoid consuming more memory */
+    /* This method is for the computed property listOptions */
     getListOptions() {
         const options = this.props.options;
         const listOptions = [];
         if (!Array.isArray(options)) {
             return listOptions;
         }
+        const state = this.state;
         options.forEach((option) => {
             /* manage simple string */
             if (typeof option === 'string') {
@@ -621,13 +644,13 @@ class SelecticStore {
             const group = option.group;
             const subOptions = option.options;
             /* check for groups */
-            if (group && !this.state.groups.has(group)) {
-                this.state.groups.set(group, String(group));
+            if (group && !state.groups.has(group)) {
+                state.groups.set(group, String(group));
             }
             /* check for sub options */
             if (subOptions) {
                 const groupId = option.id;
-                this.state.groups.set(groupId, option.text);
+                state.groups.set(groupId, option.text);
                 subOptions.forEach((subOpt) => {
                     subOpt.group = groupId;
                 });
@@ -638,24 +661,25 @@ class SelecticStore {
         });
         return listOptions;
     }
-    /* XXX: This is not a computed property to avoid consuming more memory */
+    /* This method is for the computed property elementOptions */
     getElementOptions() {
         const options = this.props.childOptions;
         const childOptions = [];
         if (!Array.isArray(options) || options.length === 0) {
             return childOptions;
         }
+        const state = this.state;
         options.forEach((option) => {
             const group = option.group;
             const subOptions = option.options;
             /* check for groups */
-            if (group && !this.state.groups.has(group)) {
-                this.state.groups.set(group, String(group));
+            if (group && !state.groups.has(group)) {
+                state.groups.set(group, String(group));
             }
             /* check for sub options */
             if (subOptions) {
                 const groupId = option.id;
-                this.state.groups.set(groupId, option.text);
+                state.groups.set(groupId, option.text);
                 const sOpts = subOptions.map((subOpt) => {
                     return Object.assign({}, subOpt, {
                         group: groupId,
@@ -669,7 +693,7 @@ class SelecticStore {
         return childOptions;
     }
     buildAllOptions(keepFetched = false) {
-        var _a;
+        var _a, _b, _c;
         const allOptions = [];
         let listOptions = [];
         let elementOptions = [];
@@ -701,8 +725,8 @@ class SelecticStore {
                 this.state.totalDynOptions = 0;
             }
         }
-        listOptions = this.getListOptions();
-        elementOptions = this.getElementOptions();
+        listOptions = (_b = this.listOptions.value) !== null && _b !== void 0 ? _b : this.listOptions;
+        elementOptions = (_c = this.elementOptions.value) !== null && _c !== void 0 ? _c : this.elementOptions;
         if (this.state.optionBehaviorOperation === 'force') {
             const orderValue = optionBehaviorOrder.find((value) => lengthFromOrder(value) > 0);
             allOptions.push(...arrayFromOrder(orderValue));
@@ -804,21 +828,22 @@ class SelecticStore {
     }
     async buildSelectedOptions() {
         const internalValue = this.state.internalValue;
-        if (this.state.multiple) {
+        const state = this.state;
+        if (state.multiple) {
             /* display partial information about selected items */
-            this.state.selectedOptions = this.buildSelectedItems(internalValue);
+            state.selectedOptions = this.buildSelectedItems(internalValue);
             const items = await this.getItems(internalValue).catch(() => []);
-            if (internalValue !== this.state.internalValue) {
+            if (internalValue !== state.internalValue) {
                 /* Values have been deprecated */
                 return;
             }
             if (items.length !== internalValue.length) {
-                if (!this.state.strictValue) {
-                    const updatedItems = this.state.selectedOptions.map((option) => {
+                if (!state.strictValue) {
+                    const updatedItems = state.selectedOptions.map((option) => {
                         const foundItem = items.find((item) => item.id === option.id);
                         return foundItem || option;
                     });
-                    this.state.selectedOptions = updatedItems;
+                    state.selectedOptions = updatedItems;
                 }
                 else {
                     const itemIds = items.map((item) => item.id);
@@ -827,27 +852,27 @@ class SelecticStore {
                 return;
             }
             /* display full information about selected items */
-            this.state.selectedOptions = items;
+            state.selectedOptions = items;
         }
         else if (internalValue === null) {
-            this.state.selectedOptions = null;
+            state.selectedOptions = null;
         }
         else {
             /* display partial information about selected items */
-            this.state.selectedOptions = this.buildSelectedItems([internalValue])[0];
+            state.selectedOptions = this.buildSelectedItems([internalValue])[0];
             const items = await this.getItems([internalValue]).catch(() => []);
-            if (internalValue !== this.state.internalValue) {
+            if (internalValue !== state.internalValue) {
                 /* Values have been deprecated */
                 return;
             }
             if (!items.length) {
-                if (this.state.strictValue) {
+                if (state.strictValue) {
                     this.commit('internalValue', null);
                 }
                 return;
             }
             /* display full information about selected items */
-            this.state.selectedOptions = items[0];
+            state.selectedOptions = items[0];
         }
     }
     async fetchData() {
@@ -935,6 +960,7 @@ class SelecticStore {
         return this.buildGroupItems(options.filter((option) => rgx.test(option.text)));
     }
     addStaticFilteredOptions(fromDynamic = false) {
+        var _a, _b;
         const search = this.state.searchText;
         let continueLoop = fromDynamic;
         if (this.state.optionBehaviorOperation !== 'sort') {
@@ -954,10 +980,10 @@ class SelecticStore {
             }
             switch (order) {
                 case 'O':
-                    options = this.filterOptions(this.getListOptions(), search);
+                    options = this.filterOptions((_a = this.listOptions.value) !== null && _a !== void 0 ? _a : this.listOptions, search);
                     break;
                 case 'E':
-                    options = this.filterOptions(this.getElementOptions(), search);
+                    options = this.filterOptions((_b = this.elementOptions.value) !== null && _b !== void 0 ? _b : this.elementOptions, search);
                     break;
             }
             this.state.filteredOptions.push(...options);
@@ -2158,7 +2184,7 @@ let Selectic = class Selectic extends Vue {
         this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
     onOptionsChange() {
-        this.store.props.options = this.options;
+        this.store.props.options = Array.from(this.options);
     }
     onTextsChange() {
         const texts = this.texts;

package/package.json

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

package/src/Store.tsx

@@ -448,6 +448,8 @@ export default class SelecticStore {
     public isPartial: ComputedRef<boolean>;
     public hasAllItems: ComputedRef<boolean>;
     public hasFetchedAllItems: ComputedRef<boolean>;
+    private listOptions: ComputedRef<OptionValue[]>;
+    private elementOptions: ComputedRef<OptionValue[]>;
 
     /* }}} */
 
@@ -525,6 +527,14 @@ export default class SelecticStore {
             return state.dynOptions.length === state.totalDynOptions;
         });
 
+        this.listOptions = computed(() => {
+            return this.getListOptions();
+        });
+
+        this.elementOptions = computed(() => {
+            return this.getElementOptions();
+        });
+
         /* }}} */
         /* {{{ watch */
 
@@ -535,6 +545,12 @@ export default class SelecticStore {
             this.buildSelectedOptions();
         });
 
+        watch(() => [this.listOptions, this.elementOptions], () => {
+            /* TODO: transform allOptions as a computed properties and this
+             * watcher become useless */
+            this.buildAllOptions(true);
+        });
+
         watch(() => this.props.value, () => {
             const value = this.props.value ?? null;
             this.commit('internalValue', value);
@@ -602,8 +618,11 @@ export default class SelecticStore {
         }
 
         /* Update state */
-        assignObject(this.state, stateParam as SelecticStoreState, {
-            internalValue: value,
+        assignObject(this.state, stateParam as SelecticStoreState);
+        /* XXX: should be done in 2 lines, in order to set the multiple state
+         * and ensure convertValue run with correct state */
+        assignObject(this.state, {
+            internalValue: this.convertTypeValue(value),
             selectionIsExcluded: props.selectionIsExcluded,
             disabled: props.disabled,
         });
@@ -917,31 +936,41 @@ export default class SelecticStore {
 
         return this.state.filteredOptions.find(findId) ||
             this.state.dynOptions.find(findId) ||
-            this.getListOptions().find(findId) ||
-            this.getElementOptions().find(findId);
+            (this.listOptions.value ?? this.listOptions).find(findId) ||
+            (this.elementOptions.value ?? this.elementOptions).find(findId);
     }
 
-    private assertValueType() {
+    private convertTypeValue(oldValue: OptionId | StrictOptionId[]) {
         const state = this.state;
-        const internalValue = state.internalValue;
         const isMultiple = state.multiple;
-        let newValue = internalValue;
+        let newValue = oldValue;
 
         if (isMultiple) {
-            if (!Array.isArray(internalValue)) {
-                newValue = internalValue === null ? [] : [internalValue];
+            if (!Array.isArray(oldValue)) {
+                newValue = oldValue === null ? [] : [oldValue];
             }
         } else {
-            if (Array.isArray(internalValue)) {
-                const value = internalValue[0];
+            if (Array.isArray(oldValue)) {
+                const value = oldValue[0];
                 newValue = typeof value === 'undefined' ? null : value;
             }
         }
-        state.internalValue = newValue;
+        return newValue;
+    }
+
+    private assertValueType() {
+        const state = this.state;
+        const internalValue = state.internalValue;
+        const newValue = this.convertTypeValue(internalValue);
+
+        if (newValue !== internalValue) {
+            state.internalValue = newValue;
+        }
     }
 
     private assertCorrectValue(applyStrict = false) {
         const state = this.state;
+        this.assertValueType();
         const internalValue = state.internalValue;
         const selectionIsExcluded = state.selectionIsExcluded;
         const isMultiple = state.multiple;
@@ -949,7 +978,6 @@ export default class SelecticStore {
         let newValue = internalValue;
         const isPartial = this.isPartial.value ?? this.isPartial;
 
-        this.assertValueType();
         if (isMultiple) {
             const hasFetchedAllItems = this.hasFetchedAllItems.value ?? this.hasFetchedAllItems;
 
@@ -984,7 +1012,7 @@ export default class SelecticStore {
                     return;
                 }
             } else
-            if (!this.hasItemInStore(newValue as OptionId)) {
+            if (newValue !== null && !this.hasItemInStore(newValue as OptionId)) {
                 filteredValue = null;
                 isDifferent = true;
 
@@ -1020,7 +1048,7 @@ export default class SelecticStore {
         });
     }
 
-    /* XXX: This is not a computed property to avoid consuming more memory */
+    /* This method is for the computed property listOptions */
     private getListOptions(): OptionValue[] {
         const options = this.props.options;
         const listOptions: OptionValue[] = [];
@@ -1028,6 +1056,7 @@ export default class SelecticStore {
         if (!Array.isArray(options)) {
             return listOptions;
         }
+        const state = this.state;
 
         options.forEach((option) => {
             /* manage simple string */
@@ -1043,14 +1072,14 @@ export default class SelecticStore {
             const subOptions = option.options;
 
             /* check for groups */
-            if (group && !this.state.groups.has(group)) {
-                this.state.groups.set(group, String(group));
+            if (group && !state.groups.has(group)) {
+                state.groups.set(group, String(group));
             }
 
             /* check for sub options */
             if (subOptions) {
                 const groupId = option.id as StrictOptionId;
-                this.state.groups.set(groupId, option.text);
+                state.groups.set(groupId, option.text);
 
                 subOptions.forEach((subOpt) => {
                     subOpt.group = groupId;
@@ -1065,7 +1094,7 @@ export default class SelecticStore {
         return listOptions;
     }
 
-    /* XXX: This is not a computed property to avoid consuming more memory */
+    /* This method is for the computed property elementOptions */
     private getElementOptions(): OptionValue[] {
         const options = this.props.childOptions;
         const childOptions: OptionValue[] = [];
@@ -1073,20 +1102,21 @@ export default class SelecticStore {
         if (!Array.isArray(options) || options.length === 0) {
             return childOptions;
         }
+        const state = this.state;
 
         options.forEach((option) => {
             const group = option.group;
             const subOptions = option.options;
 
             /* check for groups */
-            if (group && !this.state.groups.has(group)) {
-                this.state.groups.set(group, String(group));
+            if (group && !state.groups.has(group)) {
+                state.groups.set(group, String(group));
             }
 
             /* check for sub options */
             if (subOptions) {
                 const groupId = option.id as StrictOptionId;
-                this.state.groups.set(groupId, option.text);
+                state.groups.set(groupId, option.text);
 
                 const sOpts: OptionValue[] = subOptions.map((subOpt) => {
                     return Object.assign({}, subOpt, {
@@ -1138,8 +1168,8 @@ export default class SelecticStore {
             }
         }
 
-        listOptions = this.getListOptions();
-        elementOptions = this.getElementOptions();
+        listOptions = this.listOptions.value ?? this.listOptions;
+        elementOptions = this.elementOptions.value ?? this.elementOptions;
 
         if (this.state.optionBehaviorOperation === 'force') {
             const orderValue = optionBehaviorOrder.find((value) => lengthFromOrder(value) > 0)!;
@@ -1257,26 +1287,27 @@ export default class SelecticStore {
 
     private async buildSelectedOptions() {
         const internalValue = this.state.internalValue;
+        const state = this.state;
 
-        if (this.state.multiple) {
+        if (state.multiple) {
             /* display partial information about selected items */
-            this.state.selectedOptions = this.buildSelectedItems(internalValue as StrictOptionId[]);
+            state.selectedOptions = this.buildSelectedItems(internalValue as StrictOptionId[]);
 
             const items: OptionItem[] = await this.getItems(internalValue as StrictOptionId[]).catch(() => []);
-            if (internalValue !== this.state.internalValue) {
+            if (internalValue !== state.internalValue) {
                 /* Values have been deprecated */
                 return;
             }
 
             if (items.length !== (internalValue as StrictOptionId[]).length) {
-                if (!this.state.strictValue) {
-                    const updatedItems = this.state.selectedOptions.map((option) => {
+                if (!state.strictValue) {
+                    const updatedItems = state.selectedOptions.map((option) => {
                         const foundItem = items.find((item) => item.id === option.id);
 
                         return foundItem || option;
                     });
 
-                    this.state.selectedOptions = updatedItems;
+                    state.selectedOptions = updatedItems;
                 } else {
                     const itemIds = items.map((item) => item.id as StrictOptionId) ;
 
@@ -1286,29 +1317,29 @@ export default class SelecticStore {
             }
 
             /* display full information about selected items */
-            this.state.selectedOptions = items;
+            state.selectedOptions = items;
         } else
         if (internalValue === null) {
-            this.state.selectedOptions = null;
+            state.selectedOptions = null;
         } else {
             /* display partial information about selected items */
-            this.state.selectedOptions = this.buildSelectedItems([internalValue as OptionId])[0];
+            state.selectedOptions = this.buildSelectedItems([internalValue as OptionId])[0];
 
             const items = await this.getItems([internalValue as OptionId]).catch(() => []);
-            if (internalValue !== this.state.internalValue) {
+            if (internalValue !== state.internalValue) {
                 /* Values have been deprecated */
                 return;
             }
 
             if (!items.length) {
-                if (this.state.strictValue) {
+                if (state.strictValue) {
                     this.commit('internalValue', null);
                 }
                 return;
             }
 
             /* display full information about selected items */
-            this.state.selectedOptions = items[0];
+            state.selectedOptions = items[0];
         }
     }
 
@@ -1437,10 +1468,10 @@ export default class SelecticStore {
 
             switch (order) {
                 case 'O':
-                    options = this.filterOptions(this.getListOptions(), search);
+                    options = this.filterOptions(this.listOptions.value ?? this.listOptions, search);
                     break;
                 case 'E':
-                    options = this.filterOptions(this.getElementOptions(), search);
+                    options = this.filterOptions(this.elementOptions.value ?? this.elementOptions, search);
                     break;
             }
             this.state.filteredOptions.push(...options);

package/src/index.tsx

@@ -531,7 +531,7 @@ export default class Selectic extends Vue<Props> {
 
     @Watch('options')
     public onOptionsChange() {
-        this.store.props.options = this.options;
+        this.store.props.options = Array.from(this.options);
     }
 
     @Watch('texts')

package/test/Store/Store_creation.spec.js

@@ -67,6 +67,43 @@ tape.test('Store creation', (subT) => {
         t.end();
     });
 
+    subT.test('"value" property', (sTest) => {
+        sTest.test('should initialize the value', async (t) => {
+            const propOptions = getOptions(5);
+            const store = new Store({
+                value: 2,
+                options: propOptions,
+            });
+
+            await sleep(0);
+
+            const state = store.state;
+
+            t.is(state.internalValue, 2);
+
+            t.end();
+        });
+
+        sTest.test('should set the correct value type', async (t) => {
+            const propOptions = getOptions(5);
+            const store = new Store({
+                value: 2,
+                params: {
+                    multiple: true,
+                },
+                options: propOptions,
+            });
+
+            await sleep(0);
+
+            const state = store.state;
+
+            t.deepEqual(state.internalValue, [2]);
+
+            t.end();
+        });
+    });
+
     subT.test('"options" property', (sTest) => {
         sTest.test('should handle short options list', async (t) => {
             const propOptions = getOptions(5);

package/test/Store/clearCache.spec.js

@@ -23,6 +23,26 @@ tape.test('clearCache()', (sTest) => {
         t.end();
     });
 
+    sTest.test('should clear all options already loaded in multiple mode', (t) => {
+        const store = new Store({
+            options: getOptions(10),
+            params: {
+                multiple: true,
+            },
+            value: [2, 4],
+        });
+        store.state.status.errorMessage = 'a message';
+
+        store.clearCache(true);
+
+        t.deepEqual(store.state.allOptions, []);
+        t.is(store.state.totalAllOptions, 0);
+        t.deepEqual(store.state.filteredOptions, []);
+        t.is(store.state.status.errorMessage, '');
+        t.deepEqual(store.state.internalValue, []);
+        t.end();
+    });
+
     sTest.test('should rebuild all options', (t) => {
         const options = getOptions(10);
         const store = new Store({

package/test/Store/commit.spec.js

@@ -1063,4 +1063,158 @@ tape.test('commit()', (st) => {
             t.end();
         });
     });
+
+    st.test('when changing "internalValue"', (sTest) => {
+        sTest.test('should change the value', async (t) => {
+            const store1 = new Store({
+                options: getOptions(5),
+                params: {
+                    autoSelect: false,
+                },
+            });
+            const store2 = new Store({
+                options: getOptions(5),
+                params: {
+                    autoSelect: false,
+                    multiple: true,
+                },
+            });
+
+            store1.commit('internalValue', 3);
+            store2.commit('internalValue', [1, 2]);
+            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
+
+            t.is(store1.state.internalValue, 3);
+            t.deepEqual(store2.state.internalValue, [1, 2]);
+
+            store1.commit('internalValue', 1);
+            store2.commit('internalValue', [3, 4, 5]);
+            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
+
+            t.is(store1.state.internalValue, 1);
+            t.deepEqual(store2.state.internalValue, [3, 4, 5]);
+
+            store1.commit('internalValue', null);
+            store2.commit('internalValue', []);
+            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
+
+            t.is(store1.state.internalValue, null);
+            t.deepEqual(store2.state.internalValue, []);
+
+            t.end();
+        });
+
+        sTest.test('should convert values', async (t) => {
+            const store1 = new Store({
+                options: getOptions(5),
+                params: {
+                    autoSelect: false,
+                },
+            });
+            const store2 = new Store({
+                options: getOptions(5),
+                params: {
+                    autoSelect: false,
+                    multiple: true,
+                },
+            });
+
+            store1.commit('internalValue', [3]);
+            store2.commit('internalValue', 1);
+            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
+
+            t.is(store1.state.internalValue, 3);
+            t.deepEqual(store2.state.internalValue, [1]);
+
+            store1.commit('internalValue', [1, 2, 3]);
+            store2.commit('internalValue', 3);
+            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
+
+            t.is(store1.state.internalValue, 1);
+            t.deepEqual(store2.state.internalValue, [3]);
+
+            store1.commit('internalValue', []);
+            store2.commit('internalValue', null);
+            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
+
+            t.is(store1.state.internalValue, null, 'should not select anything');
+            t.deepEqual(store2.state.internalValue, [], 'should have no selection');
+
+            t.end();
+        });
+
+        sTest.test('should be changed to the first option', async (t) => {
+            const store1 = new Store({
+                options: getOptions(5),
+                params: {
+                    autoSelect: true,
+                },
+                value: 2,
+            });
+
+            store1.commit('internalValue', 3);
+            await _.nextVueTick(store1);
+
+            t.is(store1.state.internalValue, 3);
+
+            store1.commit('internalValue', null);
+            await _.nextVueTick(store1);
+
+            t.is(store1.state.internalValue, 0);
+
+            t.end();
+        });
+
+        sTest.test('should be changed to the first remaining option', async (t) => {
+            const store1 = new Store({
+                options: [{
+                    id: 0,
+                }, {
+                    id: 1,
+                    disabled: true,
+                }, {
+                    id: 2,
+                }, {
+                    id: 3,
+                }, {
+                    id: 4,
+                }],
+                params: {
+                    autoSelect: true,
+                    strictValue: true,
+                },
+                value: 2,
+            });
+
+            store1.commit('internalValue', 0);
+            await _.nextVueTick(store1);
+
+            t.is(store1.state.internalValue, 0);
+
+            store1.props.options = [{
+                id: 1,
+                disabled: true,
+            }, {
+                id: 2,
+            }, {
+                id: 3,
+            }, {
+                id: 4,
+            }];
+
+            await _.nextVueTick(store1);
+
+            t.is(store1.state.internalValue, 2, 'should change to the first available option');
+
+            store1.commit('internalValue', 3);
+            await _.nextVueTick(store1);
+
+            store1.commit('internalValue', null);
+            await _.nextVueTick(store1);
+
+            t.is(store1.state.internalValue, 2, 'should select the first available option');
+
+            t.end();
+        });
+    });
 });

package/types/Store.d.ts

@@ -278,6 +278,8 @@ export default class SelecticStore {
     isPartial: ComputedRef<boolean>;
     hasAllItems: ComputedRef<boolean>;
     hasFetchedAllItems: ComputedRef<boolean>;
+    private listOptions;
+    private elementOptions;
     _uid: number;
     constructor(props?: Props);
     commit<N extends keyof SelecticStoreState, V extends SelecticStoreState[N]>(name: N, value: V): void;
@@ -292,6 +294,7 @@ export default class SelecticStore {
     changeTexts(texts: PartialMessages): void;
     private hasValue;
     private getValue;
+    private convertTypeValue;
     private assertValueType;
     private assertCorrectValue;
     private updateFilteredOptions;