selectic 3.1.0 → 3.1.2

package/doc/breakingChanges.md

@@ -7,6 +7,14 @@ version which want to upgrade them to latest version.
 
 **This is not something you have to read to understand and to use Selectic.**
 
+## 3.0.x → 3.1.x
+
+Selectic no more depends on Font-awesome. It embeds its own icons (from Material Design Icons).
+
+It is still possible to use Font-awesome icons (or from any other libraries).
+
+Read [the documentation section related to changing icons](./changeIcons.md) for more information on how to handle them.
+
 ## 1.3.x → 3.x
 
 ### Vue2 → Vue3

package/doc/changeIcons.md

@@ -5,10 +5,10 @@
 There are some icons in selectic. But sometimes it is useful to change them (because you want to use yours or the same of your favorite theme).
 
 There are 3 ways to changes these icons:
-* Call the static `changeIcons()` method. It changes icons for all selectic components.
+* Call the static `changeIcons(icons, iconFamily)` method. It changes icons for all selectic components.
 * Change the `icons` property. It changes icons only for the component.
 * Change the `iconFamily` property. It changes the icons origin only for the component.
-* Call the `changeIcons()` method on the component. It changes icons only for the component.
+* Call the `changeIcons(icons, iconFamily)` method on the component. It changes icons only for the component.
 
 _Changes made locally take precedence over changes made globally_.
 
@@ -116,3 +116,9 @@ this.$refs.selectic.changeIcons({
  * <span class="fa fa-thumbs-o-up"></span>
  */
 ```
+
+It is possible to change only the icon family:
+```javascript
+// change icons for all selectic components to use FA-6 icons
+Selectic.changeIcons(null, 'font-awesome-6');
+```

package/package.json

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

package/src/ExtendedList.tsx

@@ -13,13 +13,13 @@ import Icon from './Icon';
 
 export interface Props {
     store: Store;
-    width: number;
+    width?: number;
 
     /* positions of the main element related to current window */
-    elementTop: number;
-    elementBottom: number;
-    elementLeft: number;
-    elementRight: number;
+    elementTop?: number;
+    elementBottom?: number;
+    elementLeft?: number;
+    elementRight?: number;
 }
 
 /* list estimation height

package/src/Icon.tsx

@@ -30,7 +30,7 @@ export default class Icon extends Vue<Props> {
     private store: Store;
 
     @Prop()
-    private icon: IconKey;
+    private icon: string;
 
     @Prop()
     private spin?: boolean;
@@ -42,7 +42,7 @@ export default class Icon extends Vue<Props> {
     /* {{{ computed */
 
     private get rawIconValue(): IconValue {
-        const key = this.icon;
+        const key = this.icon as IconKey;
         const icon = this.store.data.icons[key];
 
         if (icon === undefined) {

package/src/List.tsx

@@ -14,10 +14,6 @@ import Icon from './Icon';
 
 export interface Props {
     store: Store;
-
-    options?: any[];
-    nbItems?: number;
-    multiple?: boolean;
 }
 
 @Component

package/src/Store.tsx

@@ -5,7 +5,16 @@
  */
 
 import { reactive, watch, unref, computed, ComputedRef } from 'vue';
-import { convertToRegExp, assignObject, deepClone, compareOptions } from './tools';
+import {
+    assignObject,
+    compareOptions,
+    convertToRegExp,
+    debug,
+    deepClone,
+} from './tools';
+
+/* For debugging */
+debug.enable(false);
 
 /* {{{ Types definitions */
 
@@ -52,8 +61,21 @@ export interface GroupValue {
     text: string;
 }
 
+export type RequestResult = {
+    /** The total number of expecting options.
+     * Needed to know if there are more items to fetch, and to size the scrollbar.
+     */
+    total: number;
+
+    /** The list of the options. */
+    result: OptionValue[];
+};
+
+/** false means that the request is deprecated */
+type FetchResult = RequestResult & { deprecated: boolean; } | false;
+
 export type FetchCallback = (_search: string, _offsetItem: number, _pageSize: number)
-    => Promise<{total: number, result: OptionValue[]}>;
+    => Promise<RequestResult>;
 
 export type GetCallback = (_ids: OptionId[])
     => Promise<OptionValue[]>;
@@ -438,6 +460,12 @@ let icons: PartialIcons = {
 
 let closePreviousSelectic: undefined | voidCaller;
 
+/**
+ * Time to wait before considering there is no other requests.
+ * This time is await only if there is already a requested request.
+ */
+const DEBOUNCE_REQUEST = 250;
+
 /* }}} */
 
 let uid = 0;
@@ -452,6 +480,8 @@ export default class SelecticStore {
 
     /* Do not need reactivity */
     private requestId: number = 0;
+    private requestSearchId: number = 0; /* Used for search request */
+    private isRequesting: boolean = false;
     private cacheRequest: Map<string, Promise<OptionValue[]>>;
     private closeSelectic: () => void;
 
@@ -612,6 +642,7 @@ export default class SelecticStore {
             this.data.cacheItem.clear();
             this.setAutomaticClose();
             this.commit('isOpen', false);
+            this.clearDisplay();
             this.buildAllOptions(true);
             this.buildSelectedOptions();
         }, { deep: true });
@@ -734,6 +765,8 @@ export default class SelecticStore {
     {
         const oldValue = this.state[name];
 
+        debug('commit', 'start', name, value, 'oldValue:', oldValue);
+
         if (oldValue === value) {
             return;
         }
@@ -744,8 +777,8 @@ export default class SelecticStore {
           case 'searchText':
             this.state.offsetItem = 0;
             this.state.activeItemIdx = -1;
-            this.state.filteredOptions = [];
-            this.state.totalFilteredOptions = Infinity;
+            this.clearDisplay();
+
             if (value) {
                 this.buildFilteredOptions();
             } else {
@@ -793,6 +826,7 @@ export default class SelecticStore {
             }
             break;
         }
+        debug('commit', '(done)', name);
     }
 
     public setAutomaticChange() {
@@ -1014,6 +1048,7 @@ export default class SelecticStore {
     }
 
     public clearCache(forceReset = false) {
+        debug('clearCache', 'start', forceReset);
         const isPartial = unref(this.isPartial);
         const total = isPartial ? Infinity : 0;
 
@@ -1023,8 +1058,7 @@ export default class SelecticStore {
         this.state.totalAllOptions = total;
         this.state.totalDynOptions = total;
 
-        this.state.filteredOptions = [];
-        this.state.totalFilteredOptions = Infinity;
+        this.clearDisplay();
 
         this.state.status.errorMessage = '';
         this.state.status.hasChanged = false;
@@ -1183,6 +1217,14 @@ export default class SelecticStore {
         }
     }
 
+    /** Reset the display cache in order to rebuild it */
+    private clearDisplay() {
+        debug('clearDisplay', 'start');
+        this.state.filteredOptions = [];
+        this.state.totalFilteredOptions = Infinity;
+    }
+
+    /** rebuild the state filteredOptions to normalize their values */
     private updateFilteredOptions() {
         if (!this.data.doNotUpdate) {
             this.state.filteredOptions = this.buildItems(this.state.filteredOptions);
@@ -1243,7 +1285,7 @@ export default class SelecticStore {
         return listOptions;
     }
 
-    /* This method is for the computed property elementOptions */
+    /** This method is for the computed property elementOptions */
     private getElementOptions(): OptionValue[] {
         const options = deepClone(this.props.childOptions, ['data']);
         const childOptions: OptionValue[] = [];
@@ -1282,7 +1324,9 @@ export default class SelecticStore {
         return childOptions;
     }
 
+    /** Generate the list of all options by combining the 3 option lists */
     private buildAllOptions(keepFetched = false, stopFetch = false) {
+        debug('buildAllOptions', 'start', 'keepFetched', keepFetched, 'stopFetch', stopFetch);
         const allOptions: OptionValue[] = [];
         let listOptions: OptionValue[] = [];
         let elementOptions: OptionValue[] = [];
@@ -1360,9 +1404,6 @@ export default class SelecticStore {
         }
 
         if (!stopFetch) {
-            this.state.filteredOptions = [];
-            this.state.totalFilteredOptions = Infinity;
-
             this.buildFilteredOptions().then(() => {
                 /* XXX: To recompute for strict mode and auto-select */
                 this.assertCorrectValue();
@@ -1377,21 +1418,27 @@ export default class SelecticStore {
             const options = this.filterOptions(allOptions, search);
             this.setFilteredOptions(options);
         }
+
+        debug('buildAllOptions', 'end', 'allOptions:', this.state.allOptions.length, 'totalAllOptions:', this.state.totalAllOptions);
     }
 
     private async buildFilteredOptions() {
-        if (!this.state.isOpen) {
+        const state = this.state;
+
+        if (!state.isOpen) {
             /* Do not try to fetch anything while the select is not open */
             return;
         }
 
-        const allOptions = this.state.allOptions;
-        const search = this.state.searchText;
-        const totalAllOptions = this.state.totalAllOptions;
+        const allOptions = state.allOptions;
+        const search = state.searchText;
+        const totalAllOptions = state.totalAllOptions;
         const allOptionsLength = allOptions.length;
-        let filteredOptionsLength = this.state.filteredOptions.length;
+        let filteredOptionsLength = state.filteredOptions.length;
         const hasAllItems = unref(this.hasAllItems);
 
+        debug('buildFilteredOptions', 'start', 'hasAllItems:', hasAllItems, 'allOptions', allOptions.length, 'search:', search, 'filteredOptionsLength:', filteredOptionsLength);
+
         if (hasAllItems) {
             /* Everything has already been fetched and stored in filteredOptions */
             return;
@@ -1412,18 +1459,22 @@ export default class SelecticStore {
 
         /* When we only have partial options */
 
-        const offsetItem = this.state.offsetItem;
+        const offsetItem = state.offsetItem;
         const marginSize = unref(this.marginSize);
         const endIndex = offsetItem + marginSize;
 
+
+        debug('buildFilteredOptions', 'partial options', 'offsetItem:',offsetItem, 'marginSize:',marginSize, 'filteredOptionsLength', filteredOptionsLength);
+
         if (endIndex <= filteredOptionsLength) {
             return;
         }
 
         if (!search && endIndex <= allOptionsLength) {
-            this.setFilteredOptions(this.buildGroupItems(allOptions), false, totalAllOptions + this.state.groups.size);
+            this.setFilteredOptions(this.buildGroupItems(allOptions), false, totalAllOptions + state.groups.size);
+
             const isPartial = unref(this.isPartial);
-            if (isPartial && this.state.totalDynOptions === Infinity) {
+            if (isPartial && state.totalDynOptions === Infinity) {
                 this.fetchData();
             }
             return;
@@ -1439,6 +1490,7 @@ export default class SelecticStore {
             }
         }
 
+        debug('buildFilteredOptions', 'end', '(will call fetchData)', this.state.filteredOptions.length);
         await this.fetchData();
     }
 
@@ -1502,6 +1554,53 @@ export default class SelecticStore {
         }
     }
 
+    private async fetchRequest(fetchCallback: FetchCallback, search: string, offset: number, limit: number): Promise<FetchResult> {
+        const searchRqId = ++this.requestSearchId;
+
+        if (!search) {
+            ++this.requestId
+        }
+
+        const requestId = this.requestId;
+
+        debug('fetchRequest', 'start', 'search:', search, 'offset:', offset, 'limit:', limit, 'requestId:', requestId, 'requestSearchId:', searchRqId, 'isRequesting:', this.isRequesting);
+
+        if (this.isRequesting) {
+            debug('fetchRequest', `await ${DEBOUNCE_REQUEST}ms`);
+
+            /* debounce the call to avoid sending too much requests */
+            await new Promise((resolve) => {
+                setTimeout(resolve, DEBOUNCE_REQUEST);
+            });
+
+            /* Check if there are other requested requests, in such case drop this one */
+            if (requestId !== this.requestId || (search && searchRqId !== this.requestSearchId)) {
+                debug('fetchRequest', '××deprecated××', requestId, searchRqId);
+                return false;
+            }
+        }
+
+        this.isRequesting = true;
+        const response = await fetchCallback(search, offset, limit);
+
+        /* Check if request is obsolete */
+        if (requestId !== this.requestId || (search && searchRqId !== this.requestSearchId)) {
+            debug('fetchRequest', '×××deprecated×××', requestId, searchRqId);
+            return false;
+        }
+
+        this.isRequesting = false;
+
+        const deprecated = searchRqId !== this.requestSearchId;
+        debug('fetchRequest', 'end', response.result.length, response.total, deprecated);
+
+        return {
+            ...response,
+            /* this is to fulfill the cache */
+            deprecated: deprecated,
+        };
+    }
+
     private async fetchData() {
         const state = this.state;
         const labels = this.data.labels;
@@ -1528,9 +1627,18 @@ export default class SelecticStore {
         const nbItems = endIndex - offset;
         const limit = Math.ceil(nbItems / pageSize) * pageSize;
 
+        debug('fetchData', 'start', 'search:', search, 'offset:', offset, 'limit:', limit);
+
         try {
-            const requestId = ++this.requestId;
-            const {total: rTotal, result} = await fetchCallback(search, offset, limit);
+            const response = await this.fetchRequest(fetchCallback, search, offset, limit);
+
+            if (!response) {
+                debug('fetchData', '×× deprecated ××', search, offset, limit);
+                return;
+            }
+
+            const {total: rTotal, result, deprecated} = response;
+
             let total = rTotal;
             let errorMessage = '';
 
@@ -1552,11 +1660,15 @@ export default class SelecticStore {
             if (!search) {
                 /* update cache */
                 state.totalDynOptions = total;
-                const old = state.dynOptions.splice(offset, limit, ...result);
+                const old = state.dynOptions.splice(offset, result.length, ...result);
+
                 if (compareOptions(old, result)) {
                     /* Added options are the same as previous ones.
                      * Stop fetching to avoid infinite loop
                      */
+
+                    debug('fetchData', 'no new values');
+
                     if (!unref(this.hasFetchedAllItems)) {
                         /* Display error if all items are not fetch
                          * We can have the case where old value and result
@@ -1564,14 +1676,22 @@ export default class SelecticStore {
                          * total is 0 */
                         errorMessage = labels.wrongQueryResult;
                     }
-                    setTimeout(() => this.buildAllOptions(true, true), 0);
+
+                    setTimeout(() => {
+                        debug('fetchData', 'before buildAllOptions (stopped)', 'offsetItem:', this.state.offsetItem, 'allOptions:', this.state.allOptions.length);
+                        this.buildAllOptions(true, true)
+                    }, 0);
                 } else {
-                    setTimeout(() => this.buildAllOptions(true), 0);
+                    setTimeout(() => {
+                        debug('fetchData', 'before buildAllOptions', 'offsetItem:', this.state.offsetItem, 'allOptions:', this.state.allOptions.length);
+                        this.buildAllOptions(true)
+                     }, 0);
                 }
             }
 
-            /* Check request is not obsolete */
-            if (requestId !== this.requestId) {
+            /* Check request (without search) is not obsolete */
+            if (deprecated) {
+                debug('fetchData', '××× deprecated ×××', search, offset, limit);
                 return;
             }
 
@@ -1604,6 +1724,8 @@ export default class SelecticStore {
             state.status.errorMessage = errorMessage;
         } catch (e) {
             state.status.errorMessage = (e as Error).message;
+            debug('fetchData', 'error', (e as Error).message);
+
             if (!search) {
                 state.totalDynOptions = 0;
                 this.buildAllOptions(true, true);
@@ -1611,9 +1733,13 @@ export default class SelecticStore {
         }
 
         this.state.status.searching = false;
+
+        debug('fetchData', 'end');
     }
 
     private filterOptions(options: OptionValue[], search: string): OptionItem[] {
+        debug('filterOptions', 'start', 'options:', options.length, 'search:', search);
+
         if (!search) {
             return this.buildGroupItems(options);
         }
@@ -1629,6 +1755,8 @@ export default class SelecticStore {
         const search = this.state.searchText;
         let continueLoop = fromDynamic;
 
+        debug('addStaticFilteredOptions', 'start', 'fromDynamic:', fromDynamic, 'optionBehaviorOperation:', this.state.optionBehaviorOperation);
+
         if (this.state.optionBehaviorOperation !== 'sort') {
             return;
         }
@@ -1655,6 +1783,8 @@ export default class SelecticStore {
             }
             this.setFilteredOptions(options, true);
         }
+
+        debug('addStaticFilteredOptions', 'end');
     }
 
     private buildSelectedItems(ids: OptionId[]): OptionItem[] {
@@ -1709,6 +1839,8 @@ export default class SelecticStore {
     {
         let previousGroupId = previousItem && previousItem.group;
 
+        debug('buildGroupItems', 'start', 'options:', options.length, 'previousGroupId:', previousGroupId);
+
         const list = this.buildItems(options).reduce((items: OptionItem[], item) => {
             if (item.group !== previousGroupId) {
                 const groupId = item.group as StrictOptionId;
@@ -1730,6 +1862,8 @@ export default class SelecticStore {
             return items;
         }, []);
 
+        debug('buildGroupItems', 'end', list.length);
+
         return list;
     }
 
@@ -1871,6 +2005,8 @@ export default class SelecticStore {
 
     /** assign new value to the filteredOptions and apply change depending on it */
     private setFilteredOptions(options: OptionItem[], add = false, length = 0) {
+        debug('setFilteredOptions', 'start', 'options:', options.length, 'add', add, 'length', length);
+
         if (!add) {
             this.state.filteredOptions = options;
             this.state.totalFilteredOptions = length || options.length;

package/src/index.tsx

@@ -206,11 +206,11 @@ export interface Props {
     iconFamily?: IconFamily;
 
     /** If enabled, it resets the dynamic cache when selectic opens */
-    noCache?: Boolean;
+    noCache?: boolean;
 
     /** If true, the component opens (at start or if it is closed).
      *  If false, the components closes (if it is opened). */
-    open?: Boolean;
+    open?: boolean;
 
     /** Props which is not expected to change during the life time of the
      * component.

package/src/tools.ts

@@ -117,3 +117,16 @@ export function compareOptions(oldOptions: OptionValue[], newOptions: OptionValu
         });
     });
 }
+
+let displayLog = false;
+export function debug(fName: string, step: string, ...args: any[]) {
+    if (!displayLog) {
+        return;
+    }
+
+    console.log('--%s-- [%s]', fName, step, ...args);
+}
+/** Enable logs for debugging */
+debug.enable = (display: boolean) => {
+    displayLog = display;
+};

package/test/Store/Store_creation.spec.js

@@ -788,7 +788,7 @@ tape.test('Store creation', (subT) => {
 
             /* Load data */
             store.commit('isOpen', true);
-            await _.nextVueTick(store, spy.promise);
+            await _.nextVueTick(store, spy.promise, sleep(0) /* await request resolution */);
             store.commit('isOpen', false);
             await sleep(0);
 
@@ -1343,7 +1343,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
                 t.is(store1.state.filteredOptions.length, 0);
                 command1.fetch();
-                await _.nextVueTick(store1, spy1.promise);
+                await _.nextVueTick(store1, spy1.promise, sleep(0) /* await request resolution */);
 
                 t.is(store1.state.filteredOptions.length, 4);
 
@@ -1385,7 +1385,7 @@ tape.test('Store creation', (subT) => {
                 store1.commit('isOpen', true);
                 await sleep(0);
                 command1.fetch();
-                await _.nextVueTick(store1, spy1.promise);
+                await _.nextVueTick(store1, spy1.promise, sleep(0) /* await request resolution */);
 
                 t.is(store1.state.filteredOptions.length, 3, 'should contain the groups');
 
@@ -1405,7 +1405,7 @@ tape.test('Store creation', (subT) => {
                 store2.commit('isOpen', true);
                 await sleep(0);
                 command2.fetch();
-                await _.nextVueTick(store2, spy2.promise);
+                await _.nextVueTick(store2, spy2.promise, sleep(0) /* await request resolution */);
 
                 t.is(store2.state.filteredOptions.length, 4);
 
@@ -1425,7 +1425,7 @@ tape.test('Store creation', (subT) => {
                 store3.commit('isOpen', true);
                 await sleep(0);
                 command3.fetch();
-                await _.nextVueTick(store3, spy3.promise);
+                await _.nextVueTick(store3, spy3.promise, sleep(0) /* await request resolution */);
 
                 t.is(store3.state.filteredOptions.length, 2);
                 t.end();
@@ -1449,7 +1449,7 @@ tape.test('Store creation', (subT) => {
                 store1.commit('isOpen', true);
                 await sleep(0);
                 command1.fetch();
-                await _.nextVueTick(store1, spy1.promise);
+                await _.nextVueTick(store1, spy1.promise, sleep(0) /* await request resolution */);
 
                 t.is(store1.state.filteredOptions.length, 3);
 
@@ -1470,7 +1470,7 @@ tape.test('Store creation', (subT) => {
                 store2.commit('isOpen', true);
                 await sleep(0);
                 command2.fetch();
-                await _.nextVueTick(store2, spy2.promise);
+                await _.nextVueTick(store2, spy2.promise, sleep(0) /* await request resolution */);
 
                 t.is(store2.state.filteredOptions.length, 4);
 
@@ -1491,7 +1491,7 @@ tape.test('Store creation', (subT) => {
                 store3.commit('isOpen', true);
                 await sleep(0);
                 command3.fetch();
-                await _.nextVueTick(store3, spy3.promise);
+                await _.nextVueTick(store3, spy3.promise, sleep(0) /* await request resolution */);
 
                 t.is(store3.state.filteredOptions.length, 2);
                 t.end();
@@ -1540,7 +1540,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
                 t.is(store1.state.filteredOptions.length, 0);
                 command1.fetch();
-                await _.nextVueTick(store1, spy1.promise);
+                await _.nextVueTick(store1, spy1.promise, sleep(0) /* await request resolution */);
 
                 t.is(store1.state.filteredOptions.length, 9);
                 t.end();
@@ -1565,7 +1565,7 @@ tape.test('Store creation', (subT) => {
                 t.is(store.state.filteredOptions.length, 5); // previous options should be displayed
                 t.true(toHaveBeenCalledWith(spy, ['', 0, 100])); // dynamic index should always start at 0
                 command.fetch();
-                await _.nextVueTick(store, spy.promise);
+                await _.nextVueTick(store, spy.promise, sleep(0) /* await request resolution */);
 
                 t.is(store.state.filteredOptions.length, 9); // finally all options should be displayed
                 t.end();
@@ -1590,7 +1590,7 @@ tape.test('Store creation', (subT) => {
                 t.true(toHaveBeenCalledWith(spy1, ['', 0, 100]));
 
                 command1.fetch();
-                await _.nextVueTick(store1, spy1.promise);
+                await _.nextVueTick(store1, spy1.promise, sleep(0) /* await request resolution */);
 
                 t.is(store1.state.allOptions.length, 104);
                 t.is(store1.state.filteredOptions.length, 104);
@@ -1675,7 +1675,7 @@ tape.test('Store creation', (subT) => {
             t.true(toHaveBeenCalled(spy));
 
             command.fetch();
-            await _.nextVueTick(store, spy.promise);
+            await _.nextVueTick(store, spy.promise, sleep(0) /* await request resolution */);
 
             t.is(store.state.isOpen, true);
             t.is(store.state.filteredOptions.length, 4);