selectic 3.0.7 → 3.0.11

package/src/Store.tsx

@@ -5,6 +5,7 @@
  */
 
 import { reactive, watch, unref, computed, ComputedRef } from 'vue';
+import { convertToRegExp, assignObject, deepClone } from './tools';
 
 /* {{{ Types definitions */
 
@@ -336,42 +337,6 @@ interface Messages {
 
 export type PartialMessages = { [K in keyof Messages]?: Messages[K] };
 
-/* }}} */
-/* {{{ Helper */
-
-/**
- * Escape search string to consider regexp special characters as they
- * are and not like special characters.
- * Consider * characters as a wildcards characters (meanings 0 or
- * more characters) and convert them to .* (the wildcard characters
- * in Regexp)
- *
- * @param  {String} name the original string to convert
- * @param  {String} [flag] mode to apply for regExp
- * @return {String} the string ready to use for RegExp format
- */
-function convertToRegExp(name: string, flag = 'i'): RegExp {
-    const pattern = name.replace(/[\\^$.+?(){}[\]|]/g, '\\$&')
-                        .replace(/\*/g, '.*');
-
-    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 */
 
@@ -567,18 +532,18 @@ export default class SelecticStore {
             this.commit('isOpen', false);
             this.buildAllOptions(true);
             this.buildSelectedOptions();
-        });
+        }, { deep: true });
 
         watch(() => [this.listOptions, this.elementOptions], () => {
             /* TODO: transform allOptions as a computed properties and this
              * watcher become useless */
             this.buildAllOptions(true);
-        });
+        }, { deep: true });
 
         watch(() => this.props.value, () => {
             const value = this.props.value ?? null;
             this.commit('internalValue', value);
-        });
+        }, { deep: true });
 
         watch(() => this.props.selectionIsExcluded, () => {
             this.commit('selectionIsExcluded', this.props.selectionIsExcluded);
@@ -600,16 +565,16 @@ export default class SelecticStore {
             }
 
             this.state.status.areAllSelected = areAllSelected;
-        });
+        }, { deep: true });
 
         watch(() => this.state.internalValue, () => {
             this.buildSelectedOptions();
-        });
+        }, { deep: true });
 
         watch(() => this.state.allOptions, () => {
             this.checkAutoSelect();
             this.checkAutoDisabled();
-        });
+        }, { deep: true });
 
         watch(() => this.state.totalAllOptions, () => {
             this.checkHideFilter();
@@ -622,13 +587,13 @@ export default class SelecticStore {
             this.commit('isOpen', false);
         }
 
-        const value = this.props.value;
+        const value = deepClone(this.props.value);
 
         /* set initial value for non reactive attribute */
         this.cacheRequest = new Map();
 
         const stateParam: SelecticStoreStateParams | SelecticStoreState =
-            Object.assign({}, this.props.params);
+            deepClone(this.props.params);
 
         if (stateParam.optionBehavior) {
             this.buildOptionBehavior(
@@ -1095,7 +1060,7 @@ export default class SelecticStore {
 
     /* This method is for the computed property listOptions */
     private getListOptions(): OptionValue[] {
-        const options = this.props.options;
+        const options = deepClone(this.props.options, ['data']);
         const listOptions: OptionValue[] = [];
 
         if (!Array.isArray(options)) {
@@ -1141,7 +1106,7 @@ export default class SelecticStore {
 
     /* This method is for the computed property elementOptions */
     private getElementOptions(): OptionValue[] {
-        const options = this.props.childOptions;
+        const options = deepClone(this.props.childOptions, ['data']);
         const childOptions: OptionValue[] = [];
 
         if (!Array.isArray(options) || options.length === 0) {

package/src/index.tsx

@@ -21,6 +21,8 @@
 import {Vue, Component, Emit, Prop, Watch, h} from 'vtyx';
 import './css/selectic.css';
 
+import { deepClone } from './tools';
+
 import Store, {
     changeTexts as storeChangeTexts,
     OptionProp,
@@ -537,7 +539,7 @@ export default class Selectic extends Vue<Props> {
     /* }}} */
     /* {{{ watch */
 
-    @Watch('value')
+    @Watch('value', { deep: true })
     public onValueChange() {
         const currentValue = this.store.state.internalValue;
         const newValue = this.value ?? null;
@@ -556,12 +558,12 @@ export default class Selectic extends Vue<Props> {
         this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
 
-    @Watch('options')
+    @Watch('options', { deep: true })
     public onOptionsChange() {
-        this.store.props.options = Array.from(this.options);
+        this.store.props.options = deepClone(this.options);
     }
 
-    @Watch('texts')
+    @Watch('texts', { deep: true })
     public onTextsChange() {
         const texts = this.texts;
 
@@ -575,7 +577,7 @@ export default class Selectic extends Vue<Props> {
         this.store.props.disabled = this.disabled;
     }
 
-    @Watch('groups')
+    @Watch('groups', { deep: true })
     public onGroupsChanged() {
         this.store.changeGroups(this.groups);
     }
@@ -595,7 +597,7 @@ export default class Selectic extends Vue<Props> {
         this.focusToggled();
     }
 
-    @Watch('store.state.internalValue')
+    @Watch('store.state.internalValue', { deep: true })
     public onInternalValueChange() {
         const oldValue = this._oldValue;
         const value = this.getValue();
@@ -851,7 +853,7 @@ export default class Selectic extends Vue<Props> {
         // this.store.childOptions = options;
     }
 
-    public beforeDestroy() {
+    public beforeUnmount() {
         this.removeListeners();
     }
 

package/src/tools.ts

@@ -0,0 +1,86 @@
+import { unref } from 'vue';
+
+/**
+ * Clone the object and its inner properties.
+ * @param obj The object to be clone.
+ * @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 {
+    const obj = unref(origObject);
+
+    /* For circular references */
+    if (refs.has(obj)) {
+        return refs.get(obj);
+    }
+
+    if (typeof obj === 'object') {
+        if (obj === null) {
+            return obj;
+        }
+
+        if (Array.isArray(obj)) {
+            const ref: any[] = [];
+            refs.set(obj, ref);
+            obj.forEach((val, idx) => {
+                ref[idx] = deepClone(val, ignoreAttributes, refs);
+            });
+            return ref as unknown as T;
+        }
+
+        if (obj instanceof RegExp) {
+            const ref = new RegExp(obj.source, obj.flags);
+            refs.set(obj, ref);
+            return ref as unknown as T;
+        }
+
+        /* This should be an object */
+        const ref: any = {};
+        refs.set(obj, ref);
+        for (const [key, val] of Object.entries(obj)) {
+            if (ignoreAttributes.includes(key)) {
+                ref[key] = val;
+                continue;
+            }
+
+            ref[key] = deepClone(val, ignoreAttributes, refs);
+        }
+        return ref as unknown as T;
+    }
+
+    /* This should be a primitive */
+    return obj;
+}
+
+/**
+ * Escape search string to consider regexp special characters as they
+ * are and not like special characters.
+ * Consider * characters as a wildcards characters (meanings 0 or
+ * more characters) and convert them to .* (the wildcard characters
+ * in Regexp)
+ *
+ * @param  {String} name the original string to convert
+ * @param  {String} [flag] mode to apply for regExp
+ * @return {String} the string ready to use for RegExp format
+ */
+export function convertToRegExp(name: string, flag = 'i'): RegExp {
+    const pattern = name.replace(/[\\^$.+?(){}[\]|]/g, '\\$&')
+                        .replace(/\*/g, '.*');
+
+    return new RegExp(pattern, flag);
+}
+
+/** Does the same as Object.assign but does not replace if value is undefined */
+export 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;
+}

package/test/Store/Store_creation.spec.js

@@ -1,16 +1,3 @@
-/**************************************************************************/
-/*                                                                        */
-/*  Copyright (C) INTERSEC SA                                             */
-/*                                                                        */
-/*  Should you receive a copy of this source code, you must check you     */
-/*  have a proper, written authorization of INTERSEC to hold it. If you   */
-/*  don't have such an authorization, you must DELETE all source code     */
-/*  files in your possession, and inform INTERSEC of the fact you obtain  */
-/*  these files. Should you not comply to these terms, you can be         */
-/*  prosecuted in the extent permitted by applicable law.                 */
-/*                                                                        */
-/**************************************************************************/
-
 const _ = require('../tools.js');
 const {
     getInitialState,

package/test/Store/commit.spec.js

@@ -1,16 +1,3 @@
-/**************************************************************************/
-/*                                                                        */
-/*  Copyright (C) INTERSEC SA                                             */
-/*                                                                        */
-/*  Should you receive a copy of this source code, you must check you     */
-/*  have a proper, written authorization of INTERSEC to hold it. If you   */
-/*  don't have such an authorization, you must DELETE all source code     */
-/*  files in your possession, and inform INTERSEC of the fact you obtain  */
-/*  these files. Should you not comply to these terms, you can be         */
-/*  prosecuted in the extent permitted by applicable law.                 */
-/*                                                                        */
-/**************************************************************************/
-
 const _ = require('../tools.js');
 const {
     getInitialState,

package/test/Store/getItem.spec.js

@@ -1,16 +1,3 @@
-/**************************************************************************/
-/*                                                                        */
-/*  Copyright (C) INTERSEC SA                                             */
-/*                                                                        */
-/*  Should you receive a copy of this source code, you must check you     */
-/*  have a proper, written authorization of INTERSEC to hold it. If you   */
-/*  don't have such an authorization, you must DELETE all source code     */
-/*  files in your possession, and inform INTERSEC of the fact you obtain  */
-/*  these files. Should you not comply to these terms, you can be         */
-/*  prosecuted in the extent permitted by applicable law.                 */
-/*                                                                        */
-/**************************************************************************/
-
 const _ = require('../tools.js');
 const {
     buildFetchCb,

package/test/Store/getItems.spec.js

@@ -1,16 +1,3 @@
-/**************************************************************************/
-/*                                                                        */
-/*  Copyright (C) INTERSEC SA                                             */
-/*                                                                        */
-/*  Should you receive a copy of this source code, you must check you     */
-/*  have a proper, written authorization of INTERSEC to hold it. If you   */
-/*  don't have such an authorization, you must DELETE all source code     */
-/*  files in your possession, and inform INTERSEC of the fact you obtain  */
-/*  these files. Should you not comply to these terms, you can be         */
-/*  prosecuted in the extent permitted by applicable law.                 */
-/*                                                                        */
-/**************************************************************************/
-
 const _ = require('../tools.js');
 const {
     getOptions,

package/test/Store/selectItem.spec.js

@@ -1,16 +1,3 @@
-/**************************************************************************/
-/*                                                                        */
-/*  Copyright (C) INTERSEC SA                                             */
-/*                                                                        */
-/*  Should you receive a copy of this source code, you must check you     */
-/*  have a proper, written authorization of INTERSEC to hold it. If you   */
-/*  don't have such an authorization, you must DELETE all source code     */
-/*  files in your possession, and inform INTERSEC of the fact you obtain  */
-/*  these files. Should you not comply to these terms, you can be         */
-/*  prosecuted in the extent permitted by applicable law.                 */
-/*                                                                        */
-/**************************************************************************/
-
 const _ = require('../tools.js');
 const {
     getOptions,

package/test/Store/toggleSelectAll.spec.js

@@ -1,16 +1,3 @@
-/**************************************************************************/
-/*                                                                        */
-/*  Copyright (C) INTERSEC SA                                             */
-/*                                                                        */
-/*  Should you receive a copy of this source code, you must check you     */
-/*  have a proper, written authorization of INTERSEC to hold it. If you   */
-/*  don't have such an authorization, you must DELETE all source code     */
-/*  files in your possession, and inform INTERSEC of the fact you obtain  */
-/*  these files. Should you not comply to these terms, you can be         */
-/*  prosecuted in the extent permitted by applicable law.                 */
-/*                                                                        */
-/**************************************************************************/
-
 const _ = require('../tools.js');
 const {
     getOptions,