selectic 3.1.4 → 3.1.5

package/dist/selectic.common.js

@@ -111,32 +111,76 @@ function assignObject(obj, ...sourceObjects) {
     }
     return result;
 }
-/** Compare 2 list of options.
- * @returns true if there are no difference
+/**
+ * Ckeck whether a value is primitive.
+ * @returns true if val is primitive and false otherwise.
+ */
+function isPrimitive(val) {
+    /* The value null is treated explicitly because in JavaScript
+     * `typeof null === 'object'` is evaluated to `true`.
+     */
+    return val === null || (typeof val !== 'object' && typeof val !== 'function');
+}
+/**
+ * Performs a deep comparison between two objects to determine if they
+ * should be considered equal.
+ *
+ * @param objA object to compare to objB.
+ * @param objB object to compare to objA.
+ * @param attributes list of attributes to not compare.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns true if objA should be considered equal to objB.
  */
-function compareOptions(oldOptions, newOptions) {
-    if (oldOptions.length !== newOptions.length) {
-        return false;
-    }
-    return oldOptions.every((oldOption, idx) => {
-        const newOption = newOptions[idx];
-        const keys = Object.keys(oldOption);
-        if (keys.length !== Object.keys(newOption).length) {
+function isDeepEqual(objA, objB, ignoreAttributes = [], refs = new WeakMap()) {
+    objA = vue.unref(objA);
+    objB = vue.unref(objB);
+    /* For primitive types */
+    if (isPrimitive(objA)) {
+        return isPrimitive(objB) && Object.is(objA, objB);
+    }
+    /* For functions (follow the behavior of _.isEqual and compare functions
+     * by reference). */
+    if (typeof objA === 'function') {
+        return typeof objB === 'function' && objA === objB;
+    }
+    /* For circular references */
+    if (refs.has(objA)) {
+        return refs.get(objA) === objB;
+    }
+    refs.set(objA, objB);
+    /* For objects */
+    if (typeof objA === 'object') {
+        if (typeof objB !== 'object') {
             return false;
         }
-        return keys.every((optionKey) => {
-            const key = optionKey;
-            const oldValue = oldOption[key];
-            const newValue = newOption[key];
-            if (key === 'options') {
-                return compareOptions(oldValue, newValue);
-            }
-            if (key === 'data') {
-                return JSON.stringify(oldValue) === JSON.stringify(newValue);
-            }
-            return oldValue === newValue;
+        /* For arrays */
+        if (Array.isArray(objA)) {
+            return Array.isArray(objB) &&
+                objA.length === objB.length &&
+                !objA.some((val, idx) => !isDeepEqual(val, objB[idx], ignoreAttributes, refs));
+        }
+        /* For RegExp */
+        if (objA instanceof RegExp) {
+            return objB instanceof RegExp &&
+                objA.source === objB.source &&
+                objA.flags === objB.flags;
+        }
+        /* For Date */
+        if (objA instanceof Date) {
+            return objB instanceof Date && objA.getTime() === objB.getTime();
+        }
+        /* This should be an object */
+        const aRec = objA;
+        const bRec = objB;
+        const aKeys = Object.keys(aRec).filter((key) => !ignoreAttributes.includes(key));
+        const bKeys = Object.keys(bRec).filter((key) => !ignoreAttributes.includes(key));
+        const differentKeyFound = aKeys.some((key) => {
+            return !bKeys.includes(key) ||
+                !isDeepEqual(aRec[key], bRec[key], ignoreAttributes, refs);
         });
-    });
+        return aKeys.length === bKeys.length && !differentKeyFound;
+    }
+    return true;
 }
 let displayLog = false;
 function debug(fName, step, ...args) {
@@ -1190,7 +1234,7 @@ class SelecticStore {
                 /* update cache */
                 state.totalDynOptions = total;
                 const old = state.dynOptions.splice(offset, result.length, ...result);
-                if (compareOptions(old, result)) {
+                if (isDeepEqual(old, result)) {
                     /* Added options are the same as previous ones.
                      * Stop fetching to avoid infinite loop
                      */
@@ -2452,8 +2496,10 @@ let List = class List extends vtyx.Vue {
     onOffsetChange() {
         this.checkOffset();
     }
-    onFilteredOptionsChange() {
-        this.checkOffset();
+    onFilteredOptionsChange(oldVal, newVal) {
+        if (!isDeepEqual(oldVal, newVal)) {
+            this.checkOffset();
+        }
     }
     onGroupIdChange() {
         this.$emit('groupId', this.groupId);
@@ -3013,7 +3059,7 @@ let Selectic = class Selectic extends vtyx.Vue {
         else {
             this.removeListeners();
             if (state.status.hasChanged) {
-                this.$emit('change', this.getValue(), state.selectionIsExcluded, this);
+                this.emit('change', this.getValue(), state.selectionIsExcluded);
                 this.store.resetChange();
             }
             this.emit('close');

package/dist/selectic.esm.js

@@ -107,32 +107,76 @@ function assignObject(obj, ...sourceObjects) {
     }
     return result;
 }
-/** Compare 2 list of options.
- * @returns true if there are no difference
+/**
+ * Ckeck whether a value is primitive.
+ * @returns true if val is primitive and false otherwise.
+ */
+function isPrimitive(val) {
+    /* The value null is treated explicitly because in JavaScript
+     * `typeof null === 'object'` is evaluated to `true`.
+     */
+    return val === null || (typeof val !== 'object' && typeof val !== 'function');
+}
+/**
+ * Performs a deep comparison between two objects to determine if they
+ * should be considered equal.
+ *
+ * @param objA object to compare to objB.
+ * @param objB object to compare to objA.
+ * @param attributes list of attributes to not compare.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns true if objA should be considered equal to objB.
  */
-function compareOptions(oldOptions, newOptions) {
-    if (oldOptions.length !== newOptions.length) {
-        return false;
-    }
-    return oldOptions.every((oldOption, idx) => {
-        const newOption = newOptions[idx];
-        const keys = Object.keys(oldOption);
-        if (keys.length !== Object.keys(newOption).length) {
+function isDeepEqual(objA, objB, ignoreAttributes = [], refs = new WeakMap()) {
+    objA = unref(objA);
+    objB = unref(objB);
+    /* For primitive types */
+    if (isPrimitive(objA)) {
+        return isPrimitive(objB) && Object.is(objA, objB);
+    }
+    /* For functions (follow the behavior of _.isEqual and compare functions
+     * by reference). */
+    if (typeof objA === 'function') {
+        return typeof objB === 'function' && objA === objB;
+    }
+    /* For circular references */
+    if (refs.has(objA)) {
+        return refs.get(objA) === objB;
+    }
+    refs.set(objA, objB);
+    /* For objects */
+    if (typeof objA === 'object') {
+        if (typeof objB !== 'object') {
             return false;
         }
-        return keys.every((optionKey) => {
-            const key = optionKey;
-            const oldValue = oldOption[key];
-            const newValue = newOption[key];
-            if (key === 'options') {
-                return compareOptions(oldValue, newValue);
-            }
-            if (key === 'data') {
-                return JSON.stringify(oldValue) === JSON.stringify(newValue);
-            }
-            return oldValue === newValue;
+        /* For arrays */
+        if (Array.isArray(objA)) {
+            return Array.isArray(objB) &&
+                objA.length === objB.length &&
+                !objA.some((val, idx) => !isDeepEqual(val, objB[idx], ignoreAttributes, refs));
+        }
+        /* For RegExp */
+        if (objA instanceof RegExp) {
+            return objB instanceof RegExp &&
+                objA.source === objB.source &&
+                objA.flags === objB.flags;
+        }
+        /* For Date */
+        if (objA instanceof Date) {
+            return objB instanceof Date && objA.getTime() === objB.getTime();
+        }
+        /* This should be an object */
+        const aRec = objA;
+        const bRec = objB;
+        const aKeys = Object.keys(aRec).filter((key) => !ignoreAttributes.includes(key));
+        const bKeys = Object.keys(bRec).filter((key) => !ignoreAttributes.includes(key));
+        const differentKeyFound = aKeys.some((key) => {
+            return !bKeys.includes(key) ||
+                !isDeepEqual(aRec[key], bRec[key], ignoreAttributes, refs);
         });
-    });
+        return aKeys.length === bKeys.length && !differentKeyFound;
+    }
+    return true;
 }
 let displayLog = false;
 function debug(fName, step, ...args) {
@@ -1186,7 +1230,7 @@ class SelecticStore {
                 /* update cache */
                 state.totalDynOptions = total;
                 const old = state.dynOptions.splice(offset, result.length, ...result);
-                if (compareOptions(old, result)) {
+                if (isDeepEqual(old, result)) {
                     /* Added options are the same as previous ones.
                      * Stop fetching to avoid infinite loop
                      */
@@ -2448,8 +2492,10 @@ let List = class List extends Vue {
     onOffsetChange() {
         this.checkOffset();
     }
-    onFilteredOptionsChange() {
-        this.checkOffset();
+    onFilteredOptionsChange(oldVal, newVal) {
+        if (!isDeepEqual(oldVal, newVal)) {
+            this.checkOffset();
+        }
     }
     onGroupIdChange() {
         this.$emit('groupId', this.groupId);
@@ -3009,7 +3055,7 @@ let Selectic = class Selectic extends Vue {
         else {
             this.removeListeners();
             if (state.status.hasChanged) {
-                this.$emit('change', this.getValue(), state.selectionIsExcluded, this);
+                this.emit('change', this.getValue(), state.selectionIsExcluded);
                 this.store.resetChange();
             }
             this.emit('close');

package/package.json

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

package/src/List.tsx

@@ -3,7 +3,7 @@
  * It handles interactions with these items.
  */
 
-import {Vue, Component, Prop, Watch, h} from 'vtyx';
+import { Vue, Component, Prop, Watch, h } from 'vtyx';
 import { unref } from 'vue';
 
 import Store, {
@@ -11,6 +11,7 @@ import Store, {
     OptionId,
 } from './Store';
 import Icon from './Icon';
+import { isDeepEqual } from './tools';
 
 export interface Props {
     store: Store;
@@ -222,8 +223,10 @@ export default class List extends Vue<Props> {
     }
 
     @Watch('filteredOptions', { deep: true })
-    public onFilteredOptionsChange() {
-        this.checkOffset();
+    public onFilteredOptionsChange(oldVal: OptionItem[], newVal: OptionItem[]) {
+        if (!isDeepEqual(oldVal, newVal)) {
+            this.checkOffset();
+        }
     }
 
     @Watch('groupId')

package/src/Store.tsx

@@ -7,7 +7,7 @@
 import { reactive, watch, unref, computed, ComputedRef } from 'vue';
 import {
     assignObject,
-    compareOptions,
+    isDeepEqual,
     convertToRegExp,
     debug,
     deepClone,
@@ -1704,7 +1704,7 @@ export default class SelecticStore {
                 state.totalDynOptions = total;
                 const old = state.dynOptions.splice(offset, result.length, ...result);
 
-                if (compareOptions(old, result)) {
+                if (isDeepEqual(old, result)) {
                     /* Added options are the same as previous ones.
                      * Stop fetching to avoid infinite loop
                      */

package/src/index.tsx

@@ -560,7 +560,7 @@ export default class Selectic extends Vue<Props> {
         } else {
             this.removeListeners();
             if (state.status.hasChanged) {
-                this.$emit('change', this.getValue(), state.selectionIsExcluded, this);
+                this.emit('change', this.getValue(), state.selectionIsExcluded);
                 this.store.resetChange();
             }
             this.emit('close');

package/src/tools.ts

@@ -1,5 +1,4 @@
 import { unref } from 'vue';
-import { OptionValue } from './Store';
 
 /**
  * Clone the object and its inner properties.
@@ -8,7 +7,11 @@ import { OptionValue } from './Store';
  * @param refs internal reference to object to avoid cyclic references
  * @returns a copy of obj
  */
-export function deepClone<T = any>(origObject: T, ignoreAttributes: string[] = [], refs: WeakMap<any, any> = new WeakMap()): T {
+export function deepClone<T = any>(
+    origObject: T,
+    ignoreAttributes: string[] = [],
+    refs: WeakMap<any, any> = new WeakMap()
+): T {
     const obj = unref(origObject);
 
     /* For circular references */
@@ -88,34 +91,93 @@ export function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial
     return result as T;
 }
 
-/** Compare 2 list of options.
- * @returns true if there are no difference
+/**
+ * Ckeck whether a value is primitive.
+ * @returns true if val is primitive and false otherwise.
+ */
+function isPrimitive<T = any>(val: T): boolean {
+    /* The value null is treated explicitly because in JavaScript
+     * `typeof null === 'object'` is evaluated to `true`.
+     */
+    return val === null || (typeof val !== 'object' && typeof val !== 'function');
+}
+
+/**
+ * Performs a deep comparison between two objects to determine if they
+ * should be considered equal.
+ *
+ * @param objA object to compare to objB.
+ * @param objB object to compare to objA.
+ * @param attributes list of attributes to not compare.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns true if objA should be considered equal to objB.
  */
-export function compareOptions(oldOptions: OptionValue[], newOptions: OptionValue[]): boolean {
-    if (oldOptions.length !== newOptions.length) {
-        return false;
+export function isDeepEqual<T = any>(
+    objA: T,
+    objB: T,
+    ignoreAttributes: string[] = [],
+    refs: WeakMap<any, any> = new WeakMap()
+): boolean {
+    objA = unref(objA);
+    objB = unref(objB);
+
+    /* For primitive types */
+    if (isPrimitive(objA)) {
+        return isPrimitive(objB) && Object.is(objA, objB);
+    }
+
+    /* For functions (follow the behavior of _.isEqual and compare functions
+     * by reference). */
+    if (typeof objA === 'function') {
+        return typeof objB === 'function' && objA === objB;
+    }
+
+    /* For circular references */
+    if (refs.has(objA)) {
+        return refs.get(objA) === objB;
     }
+    refs.set(objA, objB);
 
-    return oldOptions.every((oldOption, idx) => {
-        const newOption = newOptions[idx];
-        const keys = Object.keys(oldOption);
-        if (keys.length !== Object.keys(newOption).length) {
+    /* For objects */
+    if (typeof objA === 'object') {
+        if (typeof objB !== 'object') {
             return false;
         }
-        return keys.every((optionKey) => {
-            const key = optionKey as keyof OptionValue;
-            const oldValue = oldOption[key];
-            const newValue = newOption[key];
 
-            if (key === 'options') {
-                return compareOptions(oldValue, newValue);
-            }
-            if (key === 'data') {
-                return JSON.stringify(oldValue) === JSON.stringify(newValue);
-            }
-            return oldValue === newValue;
+        /* For arrays */
+        if (Array.isArray(objA)) {
+            return Array.isArray(objB) &&
+                   objA.length === objB.length &&
+                   !objA.some((val, idx) => !isDeepEqual(val, (objB as unknown[])[idx], ignoreAttributes, refs));
+        }
+
+        /* For RegExp */
+        if (objA instanceof RegExp) {
+            return objB instanceof RegExp &&
+                   objA.source === objB.source &&
+                   objA.flags === objB.flags;
+        }
+
+        /* For Date */
+        if (objA instanceof Date) {
+            return objB instanceof Date && objA.getTime() === objB.getTime();
+        }
+
+        /* This should be an object */
+        const aRec = objA as Record<string, any>;
+        const bRec = objB as Record<string, any>;
+        const aKeys = Object.keys(aRec).filter((key) => !ignoreAttributes.includes(key));
+        const bKeys = Object.keys(bRec).filter((key) => !ignoreAttributes.includes(key));
+
+        const differentKeyFound = aKeys.some((key) => {
+            return !bKeys.includes(key) ||
+                   !isDeepEqual(aRec[key], bRec[key], ignoreAttributes, refs);
         });
-    });
+
+        return aKeys.length === bKeys.length && !differentKeyFound;
+    }
+
+    return true;
 }
 
 let displayLog = false;

package/test/Tools/tools.spec.js

@@ -5,6 +5,7 @@ const {
     assignObject,
     convertToRegExp,
     deepClone,
+    isDeepEqual,
 } = toolFile;
 
 tape.test('assignObject()', (st) => {
@@ -402,3 +403,153 @@ tape.test('deepClone()', (st) => {
         tst.end();
     });
 });
+
+tape.test('isDeepEqual()', (st) => {
+    const fn = () => {};
+    const obj = {
+        a: 1,
+        b: 'b',
+        c: false,
+        d: undefined,
+        e: null,
+        f: {},
+        g: fn,
+        spe1: NaN,
+        spe2: Infinity,
+        spe3: '',
+        spe4: [],
+    };
+
+    st.test('should compare simple objects', (tst) => {
+        const objA = obj;
+        const objB = deepClone(obj);
+
+        tst.is(isDeepEqual(objB, objA), true, 'should be equal');
+
+        objB.a = objB.a.toString();
+        tst.is(isDeepEqual(objA, objB), false, 'should not be equal');
+        tst.end();
+    });
+
+    st.test('should compare nested objects', (tst) => {
+        const deep1 = obj;
+        const deep2 = {
+            deep: deep1,
+            added: 'a value',
+        };
+        const objA = {
+            d: deep2,
+        }
+        const objB = deepClone(objA);
+
+        tst.is(isDeepEqual(objA, objB), true, 'should be equal');
+        tst.end();
+    });
+
+    st.test('with arrays', (tst) => {
+        const nestedArray1 = [
+            obj,
+            { a: 'value' },
+            null,
+            undefined,
+            42,
+            'value',
+        ];
+        const nestedArray2 = deepClone(nestedArray1);
+        const arrayA = [
+            {
+                deep: nestedArray1,
+            },
+            nestedArray2,
+            42, 'value', null, undefined, [[]],
+        ];
+        const arrayB = deepClone(arrayA);
+
+        tst.is(isDeepEqual(arrayA, arrayB), true, 'should be equal');
+        tst.end();
+    });
+
+    st.test('with RegExp', (tst) => {
+        const regA1 = /hello?/gi;
+        const regA2 = /.* [aA]+?/;
+
+        const regB1 = deepClone(regA1);
+        const regB2 = {rgx: regA2};
+
+        tst.is(isDeepEqual(regA1, regB1), true, 'should be equal');
+        tst.is(isDeepEqual(regA2, regB2), false, 'should not be equal');
+        tst.end();
+    });
+
+    st.test('with Date', (tst) => {
+        const dateA = new Date('1996-06-27');
+        const dateB = new Date('1996-06-27');
+
+        tst.is(isDeepEqual(dateA, dateB), true, 'should be equal');
+        tst.end();
+    });
+
+    st.test('with functions', (tst) => {
+        const fn1 = fn;
+        const fn2 = () => {};
+
+        tst.is(isDeepEqual(fn1, fn), true, 'should be equal');
+        tst.is(isDeepEqual(fn2, fn), false, 'should not be equal');
+        tst.end();
+    });
+
+    st.test('with primitives', (tst) => {
+        tst.is(isDeepEqual(10%3, 1), true, 'should be equal');
+        tst.is(isDeepEqual('Bingo'[0], 'B'), true, 'should be equal');
+        tst.is(isDeepEqual(!true, false), true, 'should be equal');
+        tst.is(isDeepEqual(obj.e, null), true, 'should be equal');
+        tst.is(isDeepEqual(obj.d, undefined), true, 'should be equal');
+        tst.end();
+    });
+
+    st.test('with circular references', (tst) => {
+        const obj1 = {
+            a: 'a',
+        }
+        const obj2 = {
+            b: 'b',
+        }
+        obj1.child = obj1;
+        obj1.sibling = obj2;
+        obj2.sibling = obj1;
+
+        const objA = [obj1, obj2];
+        const objB = deepClone(objA);
+
+        tst.is(isDeepEqual(objA, objB), true, 'should be equal');
+        tst.end();
+    });
+
+    st.test('can ignore some attributes', (tst) => {
+        const noCompare1 = {
+            ref: 1,
+        };
+        const noCompare2 = new Set(['alpha', 'omega']);
+        const noCompare3 = new Map([[1, 'alpha'], [22, 'omega']]);
+        const deep1 = {
+            a: 'alpha',
+            noCompare: noCompare3,
+        };
+        const objA = {
+            id: 'ref',
+            noCopy: noCompare1,
+            nop: noCompare2,
+            not: 42,
+            deep: deep1,
+        };
+        const objB = deepClone(objA);
+        objB.not = 24;
+
+        const result1 = isDeepEqual(objA, objB, ['noCopy', 'nothing', 'nop', 'not']);
+        const result2 = isDeepEqual(objA, objB, ['noCopy', 'nothing', 'nop']);
+
+        tst.is(result1, true, 'should be equal');
+        tst.is(result2, false, 'should not be equal');
+        tst.end();
+    });
+});

package/types/List.d.ts

@@ -30,7 +30,7 @@ export default class List extends Vue<Props> {
     private onMouseOver;
     onIndexChange(): void;
     onOffsetChange(): void;
-    onFilteredOptionsChange(): void;
+    onFilteredOptionsChange(oldVal: OptionItem[], newVal: OptionItem[]): void;
     onGroupIdChange(): void;
     mounted(): void;
     render(): h.JSX.Element;

package/types/tools.d.ts

@@ -1,4 +1,3 @@
-import { OptionValue } from './Store';
 /**
  * Clone the object and its inner properties.
  * @param obj The object to be clone.
@@ -21,10 +20,17 @@ export declare function deepClone<T = any>(origObject: T, ignoreAttributes?: str
 export declare function convertToRegExp(name: string, flag?: string): RegExp;
 /** Does the same as Object.assign but does not replace if value is undefined */
 export declare function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial<T>>): T;
-/** Compare 2 list of options.
- * @returns true if there are no difference
+/**
+ * Performs a deep comparison between two objects to determine if they
+ * should be considered equal.
+ *
+ * @param objA object to compare to objB.
+ * @param objB object to compare to objA.
+ * @param attributes list of attributes to not compare.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns true if objA should be considered equal to objB.
  */
-export declare function compareOptions(oldOptions: OptionValue[], newOptions: OptionValue[]): boolean;
+export declare function isDeepEqual<T = any>(objA: T, objB: T, ignoreAttributes?: string[], refs?: WeakMap<any, any>): boolean;
 export declare function debug(fName: string, step: string, ...args: any[]): void;
 export declare namespace debug {
     var enable: (display: boolean) => void;