selectic 3.0.0 → 3.0.4

package/src/Store.tsx

@@ -4,7 +4,7 @@
  * change or to get states.
  */
 
-import { reactive, watch, computed, ComputedRef } from 'vue';
+import { reactive, watch, unref, computed, ComputedRef } from 'vue';
 
 /* {{{ Types definitions */
 
@@ -72,6 +72,15 @@ export type ListPosition =
     /* 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;
@@ -80,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.
@@ -203,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.
@@ -294,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;
     };
 }
 
@@ -398,6 +416,7 @@ export default class SelecticStore {
         disabled: false,
         placeholder: '',
         hideFilter: false,
+        keepFilterOpen: false,
         allowRevert: undefined,
         allowClearSelection: false,
         autoSelect: true,
@@ -430,6 +449,8 @@ export default class SelecticStore {
             errorMessage: '',
             areAllSelected: false,
             hasChanged: false,
+            automaticChange: false,
+            automaticClose: false,
         },
     });
     public data: Data;
@@ -448,6 +469,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[]>;
 
     /* }}} */
 
@@ -515,7 +538,7 @@ export default class SelecticStore {
         });
 
         this.hasFetchedAllItems = computed(() => {
-            const isPartial = this.isPartial.value ?? this.isPartial;
+            const isPartial = unref(this.isPartial);
 
             if (!isPartial) {
                 return true;
@@ -525,16 +548,31 @@ export default class SelecticStore {
             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);
@@ -550,7 +588,7 @@ export default class SelecticStore {
 
         watch(() => this.state.filteredOptions, () => {
             let areAllSelected = false;
-            const hasAllItems = this.hasAllItems.value ?? this.hasAllItems;
+            const hasAllItems = unref(this.hasAllItems);
 
             if (hasAllItems) {
                 const selectionIsExcluded = +this.state.selectionIsExcluded;
@@ -578,6 +616,7 @@ export default class SelecticStore {
         /* }}} */
 
         this.closeSelectic = () => {
+            this.setAutomaticClose();
             this.commit('isOpen', false);
         }
 
@@ -599,11 +638,17 @@ export default class SelecticStore {
 
         if (stateParam.hideFilter === 'auto') {
             delete stateParam.hideFilter;
+        } else if (stateParam.hideFilter === 'open') {
+            this.state.keepFilterOpen = true;
+            delete stateParam.hideFilter;
         }
 
         /* 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,
         });
@@ -686,12 +731,23 @@ export default class SelecticStore {
             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;
 
@@ -743,7 +799,7 @@ export default class SelecticStore {
     public selectItem(id: OptionId, selected?: boolean, keepOpen = false) {
         const state = this.state;
         let hasChanged = false;
-        const isPartial = this.isPartial.value ?? this.isPartial;
+        const isPartial = unref(this.isPartial);
 
         /* Check that item is not disabled */
         if (!isPartial) {
@@ -805,6 +861,10 @@ export default class SelecticStore {
                 return;
             }
 
+            if (keepOpen) {
+                /* if keepOpen is true it means that it is an automatic change */
+                this.setAutomaticChange();
+            }
             this.commit('internalValue', id);
             hasChanged = true;
         }
@@ -818,7 +878,7 @@ export default class SelecticStore {
         if (!this.state.multiple) {
             return;
         }
-        const hasAllItems = this.hasAllItems.value ?? this.hasAllItems;
+        const hasAllItems = unref(this.hasAllItems);
 
         if (!hasAllItems) {
             const labels = this.data.labels;
@@ -859,7 +919,7 @@ export default class SelecticStore {
     }
 
     public clearCache(forceReset = false) {
-        const isPartial = this.isPartial.value ?? this.isPartial;
+        const isPartial = unref(this.isPartial);
         const total = isPartial ? Infinity : 0;
 
         this.data.cacheItem.clear();
@@ -917,41 +977,51 @@ export default class SelecticStore {
 
         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 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) {
+            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.value ?? this.isPartial;
+        const isPartial = unref(this.isPartial);
 
-        this.assertValueType();
         if (isMultiple) {
-            const hasFetchedAllItems = this.hasFetchedAllItems.value ?? this.hasFetchedAllItems;
+            const hasFetchedAllItems = unref(this.hasFetchedAllItems);
 
             if (selectionIsExcluded && hasFetchedAllItems) {
                 newValue = state.allOptions.reduce((values, option) => {
@@ -984,7 +1054,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;
 
@@ -996,6 +1066,7 @@ export default class SelecticStore {
             }
 
             if (isDifferent) {
+                this.setAutomaticChange();
                 newValue = filteredValue!;
             }
         }
@@ -1020,7 +1091,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 +1099,7 @@ export default class SelecticStore {
         if (!Array.isArray(options)) {
             return listOptions;
         }
+        const state = this.state;
 
         options.forEach((option) => {
             /* manage simple string */
@@ -1043,14 +1115,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 +1137,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 +1145,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, {
@@ -1109,7 +1182,7 @@ export default class SelecticStore {
         let elementOptions: OptionValue[] = [];
         const optionBehaviorOrder = this.state.optionBehaviorOrder;
         let length: number = Infinity;
-        const isPartial = this.isPartial.value ?? this.isPartial;
+        const isPartial = unref(this.isPartial);
 
         const arrayFromOrder = (orderValue: OptionBehaviorOrder): OptionValue[] => {
             switch(orderValue) {
@@ -1138,8 +1211,8 @@ export default class SelecticStore {
             }
         }
 
-        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)!;
@@ -1200,14 +1273,14 @@ export default class SelecticStore {
         const totalAllOptions = this.state.totalAllOptions;
         const allOptionsLength = allOptions.length;
         let filteredOptionsLength = this.state.filteredOptions.length;
-        const hasAllItems = this.hasAllItems.value ?? this.hasAllItems;
+        const hasAllItems = unref(this.hasAllItems);
 
         if (hasAllItems) {
             /* Everything has already been fetched and stored in filteredOptions */
             return;
         }
 
-        const hasFetchedAllItems = this.hasFetchedAllItems.value ?? this.hasFetchedAllItems;
+        const hasFetchedAllItems = unref(this.hasFetchedAllItems);
         /* Check if all options have been fetched */
         if (hasFetchedAllItems) {
             if (!search) {
@@ -1225,7 +1298,7 @@ export default class SelecticStore {
         /* When we only have partial options */
 
         const offsetItem = this.state.offsetItem;
-        const marginSize = this.marginSize.value ?? this.marginSize;
+        const marginSize = unref(this.marginSize);
         const endIndex = offsetItem + marginSize;
 
         if (endIndex <= filteredOptionsLength) {
@@ -1235,7 +1308,7 @@ export default class SelecticStore {
         if (!search && endIndex <= allOptionsLength) {
             this.state.filteredOptions = this.buildGroupItems(allOptions);
             this.state.totalFilteredOptions = totalAllOptions + this.state.groups.size;
-            const isPartial = this.isPartial.value ?? this.isPartial;
+            const isPartial = unref(this.isPartial);
             if (isPartial && this.state.totalDynOptions === Infinity) {
                 this.fetchData();
             }
@@ -1257,58 +1330,61 @@ 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) ;
 
+                    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];
         }
     }
 
@@ -1326,7 +1402,7 @@ export default class SelecticStore {
         const filteredOptionsLength = state.filteredOptions.length;
         const offsetItem = state.offsetItem;
         const pageSize = state.pageSize;
-        const marginSize = this.marginSize.value ?? this.marginSize;
+        const marginSize = unref(this.marginSize);
         const endIndex = offsetItem + marginSize;
         const dynOffset = this.data.dynOffset;
 
@@ -1437,10 +1513,10 @@ export default class SelecticStore {
 
             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);
@@ -1574,9 +1650,9 @@ export default class SelecticStore {
 
     private checkAutoDisabled() {
         const state = this.state;
-        const isPartial = this.isPartial.value ?? this.isPartial;
+        const isPartial = unref(this.isPartial);
         const doNotCheck = isPartial || this.props.disabled || !state.autoDisabled;
-        const hasFetchedAllItems = this.hasFetchedAllItems.value ?? this.hasFetchedAllItems;
+        const hasFetchedAllItems = unref(this.hasFetchedAllItems);
 
         if (doNotCheck || !hasFetchedAllItems) {
             return;
@@ -1594,7 +1670,10 @@ export default class SelecticStore {
         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);
@@ -1608,7 +1687,7 @@ export default class SelecticStore {
         }
 
         const state = this.state;
-        const isPartial = this.isPartial.value ?? this.isPartial;
+        const isPartial = unref(this.isPartial);
 
         if (state.multiple || isPartial) {
             state.hideFilter = false;