selectic 3.1.1 → 3.1.2

package/dist/selectic.esm.js

@@ -134,12 +134,25 @@ function compareOptions(oldOptions, newOptions) {
         });
     });
 }
+let displayLog = false;
+function debug(fName, step, ...args) {
+    if (!displayLog) {
+        return;
+    }
+    console.log('--%s-- [%s]', fName, step, ...args);
+}
+/** Enable logs for debugging */
+debug.enable = (display) => {
+    displayLog = display;
+};
 
 /* File Purpose:
  * It keeps and computes all states at a single place.
  * Every inner components of Selectic should communicate with this file to
  * change or to get states.
  */
+/* For debugging */
+debug.enable(false);
 /* }}} */
 /* {{{ Static */
 function changeTexts$1(texts) {
@@ -174,12 +187,19 @@ let messages = {
 let defaultFamilyIcon = 'selectic';
 let icons = {};
 let closePreviousSelectic;
+/**
+ * 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;
 class SelecticStore {
     constructor(props = {}) {
         /* Do not need reactivity */
         this.requestId = 0;
+        this.requestSearchId = 0; /* Used for search request */
+        this.isRequesting = false;
         this._uid = ++uid;
         /* {{{ Props */
         const defaultProps = {
@@ -295,6 +315,7 @@ class SelecticStore {
             this.data.cacheItem.clear();
             this.setAutomaticClose();
             this.commit('isOpen', false);
+            this.clearDisplay();
             this.buildAllOptions(true);
             this.buildSelectedOptions();
         }, { deep: true });
@@ -385,6 +406,7 @@ class SelecticStore {
     /* {{{ public methods */
     commit(name, value) {
         const oldValue = this.state[name];
+        debug('commit', 'start', name, value, 'oldValue:', oldValue);
         if (oldValue === value) {
             return;
         }
@@ -393,8 +415,7 @@ 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();
                 }
@@ -442,6 +463,7 @@ class SelecticStore {
                 }
                 break;
         }
+        debug('commit', '(done)', name);
     }
     setAutomaticChange() {
         this.state.status.automaticChange = true;
@@ -627,14 +649,14 @@ class SelecticStore {
         this.state.status.errorMessage = '';
     }
     clearCache(forceReset = false) {
+        debug('clearCache', 'start', forceReset);
         const isPartial = unref(this.isPartial);
         const total = isPartial ? Infinity : 0;
         this.data.cacheItem.clear();
         this.state.allOptions = [];
         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;
         if (forceReset) {
@@ -766,6 +788,13 @@ class SelecticStore {
             this.checkAutoSelect();
         }
     }
+    /** Reset the display cache in order to rebuild it */
+    clearDisplay() {
+        debug('clearDisplay', 'start');
+        this.state.filteredOptions = [];
+        this.state.totalFilteredOptions = Infinity;
+    }
+    /** rebuild the state filteredOptions to normalize their values */
     updateFilteredOptions() {
         if (!this.data.doNotUpdate) {
             this.state.filteredOptions = this.buildItems(this.state.filteredOptions);
@@ -815,7 +844,7 @@ class SelecticStore {
         });
         return listOptions;
     }
-    /* This method is for the computed property elementOptions */
+    /** This method is for the computed property elementOptions */
     getElementOptions() {
         const options = deepClone(this.props.childOptions, ['data']);
         const childOptions = [];
@@ -846,7 +875,9 @@ class SelecticStore {
         });
         return childOptions;
     }
+    /** Generate the list of all options by combining the 3 option lists */
     buildAllOptions(keepFetched = false, stopFetch = false) {
+        debug('buildAllOptions', 'start', 'keepFetched', keepFetched, 'stopFetch', stopFetch);
         const allOptions = [];
         let listOptions = [];
         let elementOptions = [];
@@ -918,8 +949,6 @@ 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();
@@ -935,18 +964,21 @@ class SelecticStore {
             const options = this.filterOptions(allOptions, search);
             this.setFilteredOptions(options);
         }
+        debug('buildAllOptions', 'end', 'allOptions:', this.state.allOptions.length, 'totalAllOptions:', this.state.totalAllOptions);
     }
     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;
@@ -963,16 +995,17 @@ class SelecticStore {
             return;
         }
         /* 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;
@@ -985,6 +1018,7 @@ class SelecticStore {
                 return;
             }
         }
+        debug('buildFilteredOptions', 'end', '(will call fetchData)', this.state.filteredOptions.length);
         await this.fetchData();
     }
     async buildSelectedOptions() {
@@ -1038,6 +1072,39 @@ class SelecticStore {
             state.selectedOptions = items[0];
         }
     }
+    async fetchRequest(fetchCallback, search, offset, limit) {
+        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 Object.assign(Object.assign({}, response), { 
+            /* this is to fulfill the cache */
+            deprecated: deprecated });
+    }
     async fetchData() {
         const state = this.state;
         const labels = this.data.labels;
@@ -1059,9 +1126,14 @@ class SelecticStore {
         const offset = filteredOptionsLength - this.nbGroups(state.filteredOptions) - dynOffset;
         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 = '';
             /* Assert result is correctly formatted */
@@ -1079,11 +1151,12 @@ 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
@@ -1091,14 +1164,21 @@ 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;
             }
             if (!search) {
@@ -1127,14 +1207,17 @@ class SelecticStore {
         }
         catch (e) {
             state.status.errorMessage = e.message;
+            debug('fetchData', 'error', e.message);
             if (!search) {
                 state.totalDynOptions = 0;
                 this.buildAllOptions(true, true);
             }
         }
         this.state.status.searching = false;
+        debug('fetchData', 'end');
     }
     filterOptions(options, search) {
+        debug('filterOptions', 'start', 'options:', options.length, 'search:', search);
         if (!search) {
             return this.buildGroupItems(options);
         }
@@ -1145,6 +1228,7 @@ class SelecticStore {
     addStaticFilteredOptions(fromDynamic = false) {
         const search = this.state.searchText;
         let continueLoop = fromDynamic;
+        debug('addStaticFilteredOptions', 'start', 'fromDynamic:', fromDynamic, 'optionBehaviorOperation:', this.state.optionBehaviorOperation);
         if (this.state.optionBehaviorOperation !== 'sort') {
             return;
         }
@@ -1170,6 +1254,7 @@ class SelecticStore {
             }
             this.setFilteredOptions(options, true);
         }
+        debug('addStaticFilteredOptions', 'end');
     }
     buildSelectedItems(ids) {
         return this.buildItems(ids.map((id) => {
@@ -1211,6 +1296,7 @@ class SelecticStore {
     }
     buildGroupItems(options, previousItem) {
         let previousGroupId = previousItem && previousItem.group;
+        debug('buildGroupItems', 'start', 'options:', options.length, 'previousGroupId:', previousGroupId);
         const list = this.buildItems(options).reduce((items, item) => {
             if (item.group !== previousGroupId) {
                 const groupId = item.group;
@@ -1227,6 +1313,7 @@ class SelecticStore {
             items.push(item);
             return items;
         }, []);
+        debug('buildGroupItems', 'end', list.length);
         return list;
     }
     buildOptionBehavior(optionBehavior, state) {
@@ -1344,6 +1431,7 @@ class SelecticStore {
     }
     /** assign new value to the filteredOptions and apply change depending on it */
     setFilteredOptions(options, 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/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.1",
+    "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