selectic 1.3.11 → 3.0.3

package/src/Store.tsx

@@ -1,13 +1,17 @@
 /* File Purpose:
  * It keeps and computes all states at a single place.
- * Every inner components of Selectic should comunicate with this file to
+ * Every inner components of Selectic should communicate with this file to
  * change or to get states.
  */
 
-import {Vue, Component, Prop, Watch} from 'vtyx';
+import { reactive, watch, unref, computed, ComputedRef } from 'vue';
 
 /* {{{ Types definitions */
 
+type MandateProps<T extends {}> = {
+    [TK in keyof T]-?: T[TK];
+}
+
 type voidCaller = () => void;
 
 export type StrictOptionId = string | number;
@@ -65,9 +69,18 @@ export type ListPosition =
     'bottom'
     /* Display the list at bottom */
   | 'top'
-    /* Display the list at bootom but if there is not enough space, display it at top */
+    /* Display the list at bottom but if there is not enough space, display it at top */
   | 'auto';
 
+export type HideFilter =
+    /* Display or hide the filter panel */
+    boolean
+    /* The handler to open the filter panel is hidden only if there is less
+     * than 10 options */
+  | 'auto'
+    /* The panel filter is always open */
+  | 'open';
+
 export interface SelecticStoreStateParams {
     /* Equivalent of <select>'s "multiple" attribute */
     multiple?: boolean;
@@ -76,7 +89,7 @@ export interface SelecticStoreStateParams {
     placeholder?: string;
 
     /* Hide filter component when enabled */
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
 
     /* Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
@@ -124,31 +137,34 @@ export interface SelecticStoreStateParams {
      */
     optionBehavior?: string;
 
+    /* Indicate where the list should be deployed */
+    listPosition?: ListPosition;
+
     /* If true, the component is open at start */
     isOpen?: boolean;
 }
 
 export interface Props {
     /* Selected value */
-    value?: SelectedValue;
+    value?: SelectedValue | null;
 
     /* If true, the value represents the ones we don't want to select */
     selectionIsExcluded?: boolean;
 
-    /* Equivalent of "disabled" select's attribute */
+    /* Equivalent of "disabled" Select's attribute */
     disabled?: boolean;
 
     /* List of options to display */
-    options?: OptionProp[];
+    options?: OptionProp[] | null;
 
     /* List of options to display from child elements */
-    childOptions?: OptionProp[];
+    childOptions?: OptionValue[];
 
     /* Define groups which will be used by items */
     groups?: GroupValue[];
 
     /* Overwrite default texts */
-    texts?: PartialMessages;
+    texts?: PartialMessages | null;
 
     /* Keep this component open if another Selectic component opens */
     keepOpenWithOtherSelectic?: boolean;
@@ -157,10 +173,24 @@ export interface Props {
     params?: SelecticStoreStateParams;
 
     /* Method to call to fetch extra data */
-    fetchCallback?: FetchCallback;
+    fetchCallback?: FetchCallback | null;
 
     /* Method to call to get specific item */
-    getItemsCallback?: GetCallback;
+    getItemsCallback?: GetCallback | null;
+}
+
+type InternalProps = MandateProps<Props>;
+
+export interface Data {
+    /* Number of items displayed in a page (before scrolling) */
+    itemsPerPage: number;
+
+    labels: Messages;
+    /* used to avoid checking and updating table while doing batch stuff */
+    doNotUpdate: boolean;
+    cacheItem: Map<OptionId, OptionValue>;
+    activeOrder: OptionBehaviorOrder;
+    dynOffset: number;
 }
 
 export interface SelecticStoreState {
@@ -182,6 +212,9 @@ export interface SelecticStoreState {
     /* If true, filters and controls are hidden */
     hideFilter: boolean;
 
+    /* If true, the filter panel is always open */
+    keepFilterOpen: boolean;
+
     /* Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
      * If false, the action is never available.
@@ -191,7 +224,7 @@ export interface SelecticStoreState {
     allowRevert?: boolean;
 
     /* If true, user can clear current selection
-     * (if false, it is still possible to clear it programatically) */
+     * (if false, it is still possible to clear it programmatically) */
     allowClearSelection: boolean;
 
     /* If false, do not select the first available option even if value is mandatory */
@@ -273,6 +306,12 @@ export interface SelecticStoreState {
 
         /* If true, a change has been done by user */
         hasChanged: boolean;
+
+        /* If true, it means the current change has been done automatically by Selectic */
+        automaticChange: boolean;
+
+        /* If true, it means the current close has been done automatically by Selectic */
+        automaticClose: boolean;
     };
 }
 
@@ -298,6 +337,7 @@ interface Messages {
 export type PartialMessages = { [K in keyof Messages]?: Messages[K] };
 
 /* }}} */
+/* {{{ Helper */
 
 /**
  * Escape search string to consider regexp special characters as they
@@ -317,6 +357,30 @@ function convertToRegExp(name: string, flag = 'i'): RegExp {
     return new RegExp(pattern, flag);
 }
 
+/** Does the same as Object.assign but does not replace if value is undefined */
+function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial<T>>): T {
+    const result = obj;
+    for (const source of sourceObjects) {
+        for (const key of Object.keys(source)) {
+            const value = source[key as keyof T];
+            if (value === undefined) {
+                continue;
+            }
+            result[key as keyof T] = value;
+        }
+    }
+    return result as T;
+}
+
+/* }}} */
+/* {{{ Static */
+
+export function changeTexts(texts: PartialMessages) {
+    messages = Object.assign(messages, texts);
+}
+
+/* }}} */
+
 let messages: Messages = {
     noFetchMethod: 'Fetch callback is missing: it is not possible to retrieve data.',
     searchPlaceholder: 'Search',
@@ -338,62 +402,21 @@ let messages: Messages = {
 
 let closePreviousSelectic: undefined | voidCaller;
 
-/* {{{ Static */
-
-export function changeTexts(texts: PartialMessages) {
-    messages = Object.assign(messages, texts);
-}
-
 /* }}} */
 
-@Component
-export default class SelecticStore extends Vue<Props> {
-    /* {{{ props */
-
-    @Prop()
-    public value?: SelectedValue;
-
-    @Prop({default: false})
-    public selectionIsExcluded: boolean;
-
-    @Prop({default: false})
-    public disabled: boolean;
-
-    @Prop()
-    public options?: OptionProp[];
-
-    @Prop()
-    public childOptions?: OptionValue[];
-
-    @Prop({default: () => []})
-    public groups: GroupValue[];
-
-    @Prop()
-    public texts?: PartialMessages;
+let uid = 0;
 
-    @Prop()
-    private params?: SelecticStoreStateParams;
+export default class SelecticStore {
+    public props: InternalProps;
 
-    @Prop()
-    private fetchCallback?: FetchCallback;
-
-    @Prop()
-    private getItemsCallback?: GetCallback;
-
-    @Prop({ default: false })
-    private keepOpenWithOtherSelectic: boolean;
-
-    /* }}} */
     /* {{{ data */
 
-    /* Number of items displayed in a page (before scrolling) */
-    public itemsPerPage = 10;
-
-    public state: SelecticStoreState = {
+    public state = reactive<SelecticStoreState>({
         multiple: false,
         disabled: false,
         placeholder: '',
         hideFilter: false,
+        keepFilterOpen: false,
         allowRevert: undefined,
         allowClearSelection: false,
         autoSelect: true,
@@ -426,59 +449,224 @@ export default class SelecticStore extends Vue<Props> {
             errorMessage: '',
             areAllSelected: false,
             hasChanged: false,
+            automaticChange: false,
+            automaticClose: false,
         },
-    };
-    public labels = Object.assign({}, messages);
-    /* used to avoid checking and updating table while doing batch stuff */
-    private doNotUpdate = false;
-    private cacheItem: Map<OptionId, OptionValue> = new Map();
-    private activeOrder: OptionBehaviorOrder = 'D';
-    private dynOffset: number = 0;
+    });
+    public data: Data;
 
     /* Do not need reactivity */
-    private requestId: number;
+    private requestId: number = 0;
     private cacheRequest: Map<string, Promise<OptionValue[]>>;
+    private closeSelectic: () => void;
 
     /* }}} */
     /* {{{ computed */
 
     /* Number of item to pre-display */
-    get marginSize() {
-        return this.state.pageSize / 2;
-    }
+    public marginSize: ComputedRef<number>;
 
-    get isPartial(): boolean {
-        const state = this.state;
-        let isPartial =  typeof this.fetchCallback === 'function';
+    public isPartial: ComputedRef<boolean>;
+    public hasAllItems: ComputedRef<boolean>;
+    public hasFetchedAllItems: ComputedRef<boolean>;
+    private listOptions: ComputedRef<OptionValue[]>;
+    private elementOptions: ComputedRef<OptionValue[]>;
 
-        if (isPartial && state.optionBehaviorOperation === 'force' && this.activeOrder !== 'D') {
-            isPartial = false;
+    /* }}} */
+
+    public _uid: number; /* Mainly for debugging */
+
+    constructor(props: Props = {}) {
+        this._uid = ++uid;
+
+        /* {{{ Props */
+
+        const defaultProps: InternalProps = {
+            value: null,
+            selectionIsExcluded: false,
+            disabled: false,
+            options: null,
+            childOptions: [],
+            groups: [],
+            texts: null,
+            params: {},
+            fetchCallback: null,
+            getItemsCallback: null,
+            keepOpenWithOtherSelectic: false,
+        };
+        const propsVal: InternalProps = assignObject(defaultProps, props);
+        this.props = reactive(propsVal);
+
+        /* }}} */
+        /* {{{ data */
+
+        this.data = reactive({
+            labels: Object.assign({}, messages),
+            itemsPerPage: 10,
+            doNotUpdate: false,
+            cacheItem: new Map(),
+            activeOrder: 'D',
+            dynOffset: 0,
+        });
+
+        /* }}} */
+        /* {{{ computed */
+
+        this.marginSize = computed(() => {
+            return this.state.pageSize / 2;
+        });
+
+        this.isPartial = computed(() => {
+            const state = this.state;
+            let isPartial =  typeof this.props.fetchCallback === 'function';
+
+            if (isPartial &&
+                state.optionBehaviorOperation === 'force' &&
+                this.data.activeOrder !== 'D'
+            ) {
+                isPartial = false;
+            }
+
+            return isPartial;
+        });
+
+        this.hasAllItems = computed(() => {
+            const state = this.state;
+            const nbItems = state.totalFilteredOptions + state.groups.size;
+
+            return this.state.filteredOptions.length >= nbItems;
+        });
+
+        this.hasFetchedAllItems = computed(() => {
+            const isPartial = unref(this.isPartial);
+
+            if (!isPartial) {
+                return true;
+            }
+            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], () => {
+            this.data.cacheItem.clear();
+            this.setAutomaticClose();
+            this.commit('isOpen', false);
+            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, () => {
+            const value = this.props.value ?? null;
+            this.commit('internalValue', value);
+        });
+
+        watch(() => this.props.selectionIsExcluded, () => {
+            this.commit('selectionIsExcluded', this.props.selectionIsExcluded);
+        });
+
+        watch(() => this.props.disabled, () => {
+            this.commit('disabled', this.props.disabled);
+        });
+
+        watch(() => this.state.filteredOptions, () => {
+            let areAllSelected = false;
+            const hasAllItems = unref(this.hasAllItems);
+
+            if (hasAllItems) {
+                const selectionIsExcluded = +this.state.selectionIsExcluded;
+                /* eslint-disable-next-line no-bitwise */
+                areAllSelected = this.state.filteredOptions.every((item) =>
+                    !!(+item.selected ^ selectionIsExcluded));
+            }
+
+            this.state.status.areAllSelected = areAllSelected;
+        });
+
+        watch(() => this.state.internalValue, () => {
+            this.buildSelectedOptions();
+        });
+
+        watch(() => this.state.allOptions, () => {
+            this.checkAutoSelect();
+            this.checkAutoDisabled();
+        });
+
+        watch(() => this.state.totalAllOptions, () => {
+            this.checkHideFilter();
+        });
+
+        /* }}} */
+
+        this.closeSelectic = () => {
+            this.setAutomaticClose();
+            this.commit('isOpen', false);
         }
 
-        return isPartial;
-    }
+        const value = this.props.value;
 
-    get hasAllItems() {
-        const nbItems = this.state.totalFilteredOptions + this.state.groups.size;
+        /* set initial value for non reactive attribute */
+        this.cacheRequest = new Map();
 
-        return this.state.filteredOptions.length >= nbItems;
-    }
+        const stateParam: SelecticStoreStateParams | SelecticStoreState =
+            Object.assign({}, this.props.params);
 
-    get hasFetchedAllItems() {
-        const state = this.state;
+        if (stateParam.optionBehavior) {
+            this.buildOptionBehavior(
+                stateParam.optionBehavior,
+                stateParam as SelecticStoreState
+            );
+            delete stateParam.optionBehavior;
+        }
 
-        if (!this.isPartial) {
-            return true;
+        if (stateParam.hideFilter === 'auto') {
+            delete stateParam.hideFilter;
+        } else if (stateParam.hideFilter === 'open') {
+            this.state.keepFilterOpen = true;
+            delete stateParam.hideFilter;
         }
 
-        return state.dynOptions.length === state.totalDynOptions;
-    }
+        /* Update state */
+        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,
+        });
+
+        this.checkHideFilter();
 
-    get closeSelectic() {
-        return () => this.commit('isOpen', false);
+        if (this.props.texts) {
+            this.changeTexts(this.props.texts);
+        }
+
+        this.addGroups(this.props.groups);
+        this.assertValueType();
+        this.buildAllOptions();
+
+        this.buildSelectedOptions();
+        this.checkAutoDisabled();
     }
 
-    /* }}} */
     /* {{{ methods */
     /* {{{ public methods */
 
@@ -524,7 +712,7 @@ export default class SelecticStore extends Vue<Props> {
                 if (typeof closePreviousSelectic === 'function') {
                     closePreviousSelectic();
                 }
-                if (!this.keepOpenWithOtherSelectic) {
+                if (!this.props.keepOpenWithOtherSelectic) {
                     closePreviousSelectic = this.closeSelectic;
                 }
             }
@@ -543,17 +731,28 @@ export default class SelecticStore extends Vue<Props> {
             break;
           case 'disabled':
             if (value) {
+                this.setAutomaticClose();
                 this.commit('isOpen', false);
             }
             break;
         }
     }
 
+    public setAutomaticChange() {
+        this.state.status.automaticChange = true;
+        setTimeout(() => this.state.status.automaticChange = false, 0);
+    }
+
+    public setAutomaticClose() {
+        this.state.status.automaticClose = true;
+        setTimeout(() => this.state.status.automaticClose = false, 0);
+    }
+
     public getItem(id: OptionId): OptionValue {
         let item: OptionValue;
 
         if (this.hasItemInStore(id)) {
-            item = this.cacheItem.get(id) as OptionValue;
+            item = this.data.cacheItem.get(id) as OptionValue;
         } else {
             this.getItems([id]);
             item = {
@@ -567,8 +766,9 @@ export default class SelecticStore extends Vue<Props> {
 
     public async getItems(ids: OptionId[]): Promise<OptionItem[]> {
         const itemsToFetch: OptionId[] = ids.filter((id) => !this.hasItemInStore(id));
+        const getItemsCallback = this.props.getItemsCallback;
 
-        if (itemsToFetch.length && typeof this.getItemsCallback === 'function') {
+        if (itemsToFetch.length && typeof getItemsCallback === 'function') {
             const cacheRequest = this.cacheRequest;
             const requestId = itemsToFetch.toString();
             let promise: Promise<OptionValue[]>;
@@ -576,7 +776,7 @@ export default class SelecticStore extends Vue<Props> {
             if (cacheRequest.has(requestId)) {
                 promise = cacheRequest.get(requestId)!;
             } else {
-                promise = this.getItemsCallback(itemsToFetch);
+                promise = getItemsCallback(itemsToFetch);
                 cacheRequest.set(requestId, promise);
                 promise.then(() => {
                     cacheRequest.delete(requestId);
@@ -584,10 +784,11 @@ export default class SelecticStore extends Vue<Props> {
             }
 
             const items = await promise;
+            const cacheItem = this.data.cacheItem;
 
             for (const item of items) {
                 if (item) {
-                    this.cacheItem.set(item.id, item);
+                    cacheItem.set(item.id, item);
                 }
             }
         }
@@ -598,9 +799,10 @@ export default class SelecticStore extends Vue<Props> {
     public selectItem(id: OptionId, selected?: boolean, keepOpen = false) {
         const state = this.state;
         let hasChanged = false;
+        const isPartial = unref(this.isPartial);
 
         /* Check that item is not disabled */
-        if (!this.isPartial) {
+        if (!isPartial) {
             const item = state.allOptions.find((opt) => opt.id === id);
             if (item && item.disabled) {
                 return;
@@ -659,6 +861,10 @@ export default class SelecticStore extends Vue<Props> {
                 return;
             }
 
+            if (keepOpen) {
+                /* if keepOpen is true it means that it is an automatic change */
+                this.setAutomaticChange();
+            }
             this.commit('internalValue', id);
             hasChanged = true;
         }
@@ -672,15 +878,18 @@ export default class SelecticStore extends Vue<Props> {
         if (!this.state.multiple) {
             return;
         }
+        const hasAllItems = unref(this.hasAllItems);
+
+        if (!hasAllItems) {
+            const labels = this.data.labels;
 
-        if (!this.hasAllItems) {
             if (this.state.searchText) {
-                this.state.status.errorMessage = this.labels.cannotSelectAllSearchedItems;
+                this.state.status.errorMessage = labels.cannotSelectAllSearchedItems;
                 return;
             }
 
             if (!this.state.allowRevert) {
-                this.state.status.errorMessage = this.labels.cannotSelectAllRevertItems;
+                this.state.status.errorMessage = labels.cannotSelectAllRevertItems;
                 return;
             }
 
@@ -695,9 +904,9 @@ export default class SelecticStore extends Vue<Props> {
 
         const selectAll = !this.state.status.areAllSelected;
         this.state.status.areAllSelected = selectAll;
-        this.doNotUpdate = true;
+        this.data.doNotUpdate = true;
         this.state.filteredOptions.forEach((item) => this.selectItem(item.id, selectAll));
-        this.doNotUpdate = false;
+        this.data.doNotUpdate = false;
         this.updateFilteredOptions();
     }
 
@@ -710,9 +919,10 @@ export default class SelecticStore extends Vue<Props> {
     }
 
     public clearCache(forceReset = false) {
-        const total = this.isPartial ? Infinity : 0;
+        const isPartial = unref(this.isPartial);
+        const total = isPartial ? Infinity : 0;
 
-        this.cacheItem.clear();
+        this.data.cacheItem.clear();
 
         this.state.allOptions = [];
         this.state.totalAllOptions = total;
@@ -746,7 +956,7 @@ export default class SelecticStore extends Vue<Props> {
     }
 
     public changeTexts(texts: PartialMessages) {
-        this.labels = Object.assign({}, this.labels, texts);
+        this.data.labels = Object.assign({}, this.data.labels, texts);
     }
 
     /* }}} */
@@ -767,25 +977,53 @@ export default class SelecticStore extends Vue<Props> {
 
         return this.state.filteredOptions.find(findId) ||
             this.state.dynOptions.find(findId) ||
-            this.getListOptions().find(findId) ||
-            this.getElementOptions().find(findId);
+            unref(this.listOptions).find(findId) ||
+            unref(this.elementOptions).find(findId);
     }
 
-    private assertCorrectValue(forceStrict = false) {
+    private convertTypeValue(oldValue: OptionId | StrictOptionId[]) {
         const state = this.state;
+        const isMultiple = state.multiple;
+        let newValue = oldValue;
+
+        if (isMultiple) {
+            if (!Array.isArray(oldValue)) {
+                newValue = oldValue === null ? [] : [oldValue];
+            }
+        } else {
+            if (Array.isArray(oldValue)) {
+                const value = oldValue[0];
+                newValue = typeof value === 'undefined' ? null : value;
+            }
+        }
+        return newValue;
+    }
+
+    private assertValueType() {
+        const state = this.state;
+        const internalValue = state.internalValue;
+        const newValue = this.convertTypeValue(internalValue);
+
+        if (newValue !== internalValue) {
+            this.setAutomaticChange();
+            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;
         const checkStrict = state.strictValue;
         let newValue = internalValue;
-        const isPartial = this.isPartial;
+        const isPartial = unref(this.isPartial);
 
         if (isMultiple) {
-            if (!Array.isArray(internalValue)) {
-                newValue = internalValue === null ? [] : [internalValue];
-            }
+            const hasFetchedAllItems = unref(this.hasFetchedAllItems);
 
-            if (selectionIsExcluded && this.hasFetchedAllItems) {
+            if (selectionIsExcluded && hasFetchedAllItems) {
                 newValue = state.allOptions.reduce((values, option) => {
                     const id = option.id as StrictOptionId;
 
@@ -798,11 +1036,6 @@ export default class SelecticStore extends Vue<Props> {
                 state.selectionIsExcluded = false;
             }
         } else {
-            if (Array.isArray(internalValue)) {
-                const value = internalValue[0];
-                newValue = typeof value === 'undefined' ? null : value;
-            }
-
             state.selectionIsExcluded = false;
         }
 
@@ -815,22 +1048,25 @@ export default class SelecticStore extends Vue<Props> {
                     .filter((value) => this.hasItemInStore(value));
                 isDifferent = filteredValue.length !== (newValue as StrictOptionId[]).length;
 
-                if (isDifferent && isPartial && !forceStrict) {
-                    this.getItems(newValue as StrictOptionId[]).then(() => this.assertCorrectValue(true));
+                if (isDifferent && isPartial && !applyStrict) {
+                    this.getItems(newValue as StrictOptionId[])
+                        .then(() => this.assertCorrectValue(true));
                     return;
                 }
             } else
-            if (!this.hasItemInStore(newValue as OptionId)) {
+            if (newValue !== null && !this.hasItemInStore(newValue as OptionId)) {
                 filteredValue = null;
                 isDifferent = true;
 
-                if (isPartial && !forceStrict) {
-                    this.getItems([newValue as OptionId]).then(() => this.assertCorrectValue(true));
+                if (isPartial && !applyStrict) {
+                    this.getItems([newValue as OptionId])
+                        .then(() => this.assertCorrectValue(true));
                     return;
                 }
             }
 
             if (isDifferent) {
+                this.setAutomaticChange();
                 newValue = filteredValue!;
             }
         }
@@ -843,8 +1079,9 @@ export default class SelecticStore extends Vue<Props> {
     }
 
     private updateFilteredOptions() {
-        if (!this.doNotUpdate) {
+        if (!this.data.doNotUpdate) {
             this.state.filteredOptions = this.buildItems(this.state.filteredOptions);
+            this.buildSelectedOptions();
         }
     }
 
@@ -854,14 +1091,15 @@ export default class SelecticStore extends Vue<Props> {
         });
     }
 
-    /* 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.options;
+        const options = this.props.options;
         const listOptions: OptionValue[] = [];
 
         if (!Array.isArray(options)) {
             return listOptions;
         }
+        const state = this.state;
 
         options.forEach((option) => {
             /* manage simple string */
@@ -877,14 +1115,14 @@ export default class SelecticStore extends Vue<Props> {
             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;
@@ -899,28 +1137,29 @@ export default class SelecticStore extends Vue<Props> {
         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.childOptions;
+        const options = this.props.childOptions;
         const childOptions: OptionValue[] = [];
 
-        if (!Array.isArray(options)) {
+        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, {
@@ -943,6 +1182,7 @@ export default class SelecticStore extends Vue<Props> {
         let elementOptions: OptionValue[] = [];
         const optionBehaviorOrder = this.state.optionBehaviorOrder;
         let length: number = Infinity;
+        const isPartial = unref(this.isPartial);
 
         const arrayFromOrder = (orderValue: OptionBehaviorOrder): OptionValue[] => {
             switch(orderValue) {
@@ -963,7 +1203,7 @@ export default class SelecticStore extends Vue<Props> {
         };
 
         if (!keepFetched) {
-            if (this.isPartial) {
+            if (isPartial) {
                 this.state.totalAllOptions = Infinity;
                 this.state.totalDynOptions = Infinity;
             } else {
@@ -971,15 +1211,15 @@ export default class SelecticStore extends Vue<Props> {
             }
         }
 
-        listOptions = this.getListOptions();
-        elementOptions = this.getElementOptions();
+        listOptions = unref(this.listOptions);
+        elementOptions = unref(this.elementOptions);
 
         if (this.state.optionBehaviorOperation === 'force') {
             const orderValue = optionBehaviorOrder.find((value) => lengthFromOrder(value) > 0)!;
             allOptions.push(...arrayFromOrder(orderValue));
             length = lengthFromOrder(orderValue);
-            this.activeOrder = orderValue;
-            this.dynOffset = 0;
+            this.data.activeOrder = orderValue;
+            this.data.dynOffset = 0;
         } else {
             /* sort */
             let offset = 0;
@@ -988,7 +1228,7 @@ export default class SelecticStore extends Vue<Props> {
                 const lngth = lengthFromOrder(orderValue);
 
                 if (orderValue === 'D') {
-                    this.dynOffset = offset;
+                    this.data.dynOffset = offset;
                 } else {
                     offset += lngth;
                 }
@@ -999,7 +1239,7 @@ export default class SelecticStore extends Vue<Props> {
                     break;
                 }
             }
-            this.activeOrder = 'D';
+            this.data.activeOrder = 'D';
             length = optionBehaviorOrder.reduce((total, orderValue) => total + lengthFromOrder(orderValue), 0);
         }
 
@@ -1008,7 +1248,7 @@ export default class SelecticStore extends Vue<Props> {
         if (keepFetched) {
             this.state.totalAllOptions = length;
         } else {
-            if (!this.isPartial) {
+            if (!isPartial) {
                 this.state.totalAllOptions = allOptions.length;
             }
         }
@@ -1016,7 +1256,10 @@ export default class SelecticStore extends Vue<Props> {
         this.state.filteredOptions = [];
         this.state.totalFilteredOptions = Infinity;
 
-        this.buildFilteredOptions();
+        this.buildFilteredOptions().then(() => {
+            /* XXX: To recompute for strict mode and auto-select */
+            this.assertCorrectValue();
+        });
     }
 
     private async buildFilteredOptions() {
@@ -1030,14 +1273,16 @@ export default class SelecticStore extends Vue<Props> {
         const totalAllOptions = this.state.totalAllOptions;
         const allOptionsLength = allOptions.length;
         let filteredOptionsLength = this.state.filteredOptions.length;
+        const hasAllItems = unref(this.hasAllItems);
 
-        if (this.hasAllItems) {
+        if (hasAllItems) {
             /* Everything has already been fetched and stored in filteredOptions */
             return;
         }
 
+        const hasFetchedAllItems = unref(this.hasFetchedAllItems);
         /* Check if all options have been fetched */
-        if (this.hasFetchedAllItems) {
+        if (hasFetchedAllItems) {
             if (!search) {
                 this.state.filteredOptions = this.buildGroupItems(allOptions);
                 this.state.totalFilteredOptions = this.state.filteredOptions.length;
@@ -1053,7 +1298,7 @@ export default class SelecticStore extends Vue<Props> {
         /* When we only have partial options */
 
         const offsetItem = this.state.offsetItem;
-        const marginSize = this.marginSize;
+        const marginSize = unref(this.marginSize);
         const endIndex = offsetItem + marginSize;
 
         if (endIndex <= filteredOptionsLength) {
@@ -1063,7 +1308,8 @@ export default class SelecticStore extends Vue<Props> {
         if (!search && endIndex <= allOptionsLength) {
             this.state.filteredOptions = this.buildGroupItems(allOptions);
             this.state.totalFilteredOptions = totalAllOptions + this.state.groups.size;
-            if (this.isPartial && this.state.totalDynOptions === Infinity) {
+            const isPartial = unref(this.isPartial);
+            if (isPartial && this.state.totalDynOptions === Infinity) {
                 this.fetchData();
             }
             return;
@@ -1073,7 +1319,7 @@ export default class SelecticStore extends Vue<Props> {
             this.addStaticFilteredOptions();
 
             filteredOptionsLength = this.state.filteredOptions.length;
-            this.dynOffset = filteredOptionsLength;
+            this.data.dynOffset = filteredOptionsLength;
             if (endIndex <= filteredOptionsLength) {
                 return;
             }
@@ -1084,66 +1330,71 @@ export default class SelecticStore extends Vue<Props> {
 
     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) ;
 
+                    this.setAutomaticChange();
                     this.commit('internalValue', itemIds);
                 }
                 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 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.setAutomaticChange();
                     this.commit('internalValue', null);
                 }
                 return;
             }
 
             /* display full information about selected items */
-            this.state.selectedOptions = items[0];
+            state.selectedOptions = items[0];
         }
     }
 
     private async fetchData() {
         const state = this.state;
+        const labels = this.data.labels;
+        const fetchCallback = this.props.fetchCallback;
 
-        if (!this.fetchCallback) {
-            state.status.errorMessage = this.labels.noFetchMethod;
+        if (!fetchCallback) {
+            state.status.errorMessage = labels.noFetchMethod;
             return;
         }
 
@@ -1151,25 +1402,26 @@ export default class SelecticStore extends Vue<Props> {
         const filteredOptionsLength = state.filteredOptions.length;
         const offsetItem = state.offsetItem;
         const pageSize = state.pageSize;
-        const marginSize = this.marginSize;
+        const marginSize = unref(this.marginSize);
         const endIndex = offsetItem + marginSize;
+        const dynOffset = this.data.dynOffset;
 
         /* Run the query */
         this.state.status.searching = true;
 
         /* Manage cases where offsetItem is not equal to the last item received */
-        const offset = filteredOptionsLength - this.nbGroups(state.filteredOptions) - this.dynOffset;
+        const offset = filteredOptionsLength - this.nbGroups(state.filteredOptions) - dynOffset;
         const nbItems = endIndex - offset;
         const limit = Math.ceil(nbItems / pageSize) * pageSize;
 
         try {
             const requestId = ++this.requestId;
-            const {total: rTotal, result} = await this.fetchCallback(search, offset, limit);
+            const {total: rTotal, result} = await fetchCallback(search, offset, limit);
             let total = rTotal;
 
             /* Assert result is correctly formatted */
             if (!Array.isArray(result)) {
-                throw new Error(this.labels.wrongFormattedData);
+                throw new Error(labels.wrongFormattedData);
             }
 
             /* Handle case where total is not returned */
@@ -1186,7 +1438,7 @@ export default class SelecticStore extends Vue<Props> {
                 /* update cache */
                 state.totalDynOptions = total;
                 state.dynOptions.splice(offset, limit, ...result);
-                this.$nextTick(() => this.buildAllOptions(true));
+                setTimeout(() => this.buildAllOptions(true), 0);
             }
 
             /* Check request is not obsolete */
@@ -1201,7 +1453,7 @@ export default class SelecticStore extends Vue<Props> {
                 const options = this.buildGroupItems(result, previousItem);
                 const nbGroups1 = this.nbGroups(options);
 
-                state.filteredOptions.splice(offset + this.dynOffset, limit + nbGroups1, ...options);
+                state.filteredOptions.splice(offset + dynOffset, limit + nbGroups1, ...options);
             }
 
             let nbGroups = state.groups.size;
@@ -1209,7 +1461,7 @@ export default class SelecticStore extends Vue<Props> {
                 nbGroups = this.nbGroups(state.filteredOptions);
             }
 
-            state.totalFilteredOptions = total + nbGroups + this.dynOffset;
+            state.totalFilteredOptions = total + nbGroups + dynOffset;
 
             if (search && state.totalFilteredOptions <= state.filteredOptions.length) {
                 this.addStaticFilteredOptions(true);
@@ -1217,7 +1469,7 @@ export default class SelecticStore extends Vue<Props> {
 
             state.status.errorMessage = '';
         } catch (e) {
-            state.status.errorMessage = e.message;
+            state.status.errorMessage = (e as Error).message;
             if (!search) {
                 state.totalDynOptions = 0;
                 this.buildAllOptions(true);
@@ -1261,10 +1513,10 @@ export default class SelecticStore extends Vue<Props> {
 
             switch (order) {
                 case 'O':
-                    options = this.filterOptions(this.getListOptions(), search);
+                    options = this.filterOptions(unref(this.listOptions), search);
                     break;
                 case 'E':
-                    options = this.filterOptions(this.getElementOptions(), search);
+                    options = this.filterOptions(unref(this.elementOptions), search);
                     break;
             }
             this.state.filteredOptions.push(...options);
@@ -1274,7 +1526,8 @@ export default class SelecticStore extends Vue<Props> {
 
     private buildSelectedItems(ids: OptionId[]): OptionItem[] {
         return this.buildItems(ids.map((id) => {
-            const item = this.cacheItem.get(id);
+            const cacheItem = this.data.cacheItem;
+            const item = cacheItem.get(id);
 
             return item || {
                 id,
@@ -1284,13 +1537,14 @@ export default class SelecticStore extends Vue<Props> {
     }
 
     private hasItemInStore(id: OptionId): boolean {
-        let item: OptionValue | undefined = this.cacheItem.get(id);
+        const cacheItem = this.data.cacheItem;
+        let item: OptionValue | undefined = cacheItem.get(id);
 
         if (!item) {
             item = this.getValue(id);
 
             if (item) {
-                this.cacheItem.set(item.id, item);
+                cacheItem.set(item.id, item);
             }
         }
 
@@ -1311,7 +1565,7 @@ export default class SelecticStore extends Vue<Props> {
                 disabled: false,
                 isGroup: false,
             }, option, {
-                // tslint:disable-next-line:no-bitwise
+                /* eslint-disable-next-line no-bitwise */
                 selected: !!(+selected.includes(id) ^ selectionIsExcluded),
             });
         });
@@ -1355,7 +1609,8 @@ export default class SelecticStore extends Vue<Props> {
         isValid = isValid && /^[ODE]+$/.test(order);
 
         if (!isValid) {
-            this.state.status.errorMessage = this.labels.unknownPropertyValue.replace(/%s/, 'optionBehavior');
+            const labels = this.data.labels;
+            this.state.status.errorMessage = labels.unknownPropertyValue.replace(/%s/, 'optionBehavior');
             operation = 'sort';
             orderArray = ['O', 'D', 'E'];
         } else {
@@ -1387,6 +1642,7 @@ export default class SelecticStore extends Vue<Props> {
         for (const option of options) {
             if (!option.disabled) {
                 this.selectItem(option.id, true, true);
+                this.checkAutoDisabled();
                 return;
             }
         }
@@ -1394,9 +1650,11 @@ export default class SelecticStore extends Vue<Props> {
 
     private checkAutoDisabled() {
         const state = this.state;
-        const doNotCheck = this.disabled || this.isPartial || !state.autoDisabled;
+        const isPartial = unref(this.isPartial);
+        const doNotCheck = isPartial || this.props.disabled || !state.autoDisabled;
+        const hasFetchedAllItems = unref(this.hasFetchedAllItems);
 
-        if (doNotCheck || !this.hasFetchedAllItems) {
+        if (doNotCheck || !hasFetchedAllItems) {
             return;
         }
 
@@ -1412,7 +1670,10 @@ export default class SelecticStore extends Vue<Props> {
         const hasOnlyOneOption = nb === 1 && hasValidValue && !state.allowClearSelection;
 
         if (hasOnlyOneOption || isEmpty) {
-            this.commit('isOpen', false);
+            if (state.isOpen) {
+                this.setAutomaticClose();
+                this.commit('isOpen', false);
+            }
             this.commit('disabled', true);
         } else {
             this.commit('disabled', false);
@@ -1420,128 +1681,22 @@ export default class SelecticStore extends Vue<Props> {
     }
 
     private checkHideFilter() {
-        if (this.params && this.params.hideFilter !== 'auto') {
+        const params = this.props.params;
+        if (params && params.hideFilter !== 'auto') {
             return;
         }
 
         const state = this.state;
+        const isPartial = unref(this.isPartial);
 
-        if (state.multiple || this.isPartial) {
+        if (state.multiple || isPartial) {
             state.hideFilter = false;
         } else {
-            state.hideFilter = state.totalAllOptions <= this.itemsPerPage;
+            state.hideFilter = state.totalAllOptions <= this.data.itemsPerPage;
         }
     }
 
     /* }}} */
     /* }}} */
-    /* {{{ watch */
-
-    @Watch('options')
-    protected onOptionsChange(options: OptionValue[] = [], oldOptions: OptionValue[] = []) {
-        if (JSON.stringify(options) === JSON.stringify(oldOptions)) {
-            /* There is no real difference, only a change of reference */
-            return;
-        }
-        this.cacheItem.clear();
-        this.commit('isOpen', false);
-        this.buildAllOptions(true);
-        this.assertCorrectValue();
-        this.buildSelectedOptions();
-    }
-
-    @Watch('childOptions')
-    protected onChildOptionsChange(childOptions: OptionValue[] = [], oldChildOptions: OptionValue[] = []) {
-        if (JSON.stringify(childOptions) === JSON.stringify(oldChildOptions)) {
-            /* There is no real difference, only a change of reference */
-            return;
-        }
-        this.cacheItem.clear();
-        this.commit('isOpen', false);
-        this.buildAllOptions(true);
-        this.assertCorrectValue();
-        this.buildSelectedOptions();
-    }
-
-    @Watch('value')
-    protected onValueChange() {
-        const value = typeof this.value === 'undefined' ? null : this.value;
-        this.commit('internalValue', value);
-    }
-
-    @Watch('selectionIsExcluded')
-    protected onSelectionExcludedChange() {
-        this.commit('selectionIsExcluded', this.selectionIsExcluded);
-    }
-
-    @Watch('disabled')
-    protected onDisabledChange() {
-        this.commit('disabled', this.disabled);
-    }
-
-    @Watch('state.filteredOptions')
-    protected onFilteredChange() {
-        let areAllSelected = false;
-
-        if (this.hasAllItems) {
-            const selectionIsExcluded = +this.state.selectionIsExcluded;
-            // tslint:disable-next-line:no-bitwise
-            areAllSelected = this.state.filteredOptions.every((item) => !!(+item.selected ^ selectionIsExcluded));
-        }
-
-        this.state.status.areAllSelected = areAllSelected;
-    }
-
-    @Watch('state.internalValue')
-    protected onInternalValueChange() {
-        this.buildSelectedOptions();
-    }
-
-    @Watch('state.allOptions')
-    protected onAllOptionChange() {
-        this.checkAutoSelect();
-        this.checkAutoDisabled();
-    }
-
-    @Watch('state.totalAllOptions')
-    protected onTotalAllOptionsChange() {
-        this.checkHideFilter();
-    }
-
-    /* }}} */
-    /* {{{ life cycles methods */
-
-    protected created() {
-        const value = typeof this.value === 'undefined' ? null : this.value;
-
-        /* set initial value for non reactive attribute */
-        this.requestId = 0;
-        this.cacheRequest = new Map();
-
-        const stateParam = Object.assign({}, this.params);
 
-        if (stateParam.optionBehavior) {
-            this.buildOptionBehavior(stateParam.optionBehavior, stateParam as SelecticStoreState);
-            delete stateParam.optionBehavior;
-        }
-
-        this.state = Object.assign(this.state, stateParam, {
-            internalValue: value,
-            selectionIsExcluded: this.selectionIsExcluded,
-            disabled: this.disabled,
-        });
-
-        this.checkHideFilter();
-
-        if (this.texts) {
-            this.changeTexts(this.texts);
-        }
-
-        this.addGroups(this.groups);
-        this.buildAllOptions();
-        this.assertCorrectValue();
-        this.buildSelectedOptions();
-    }
-
-    /* }}} */
-}
+};