selectic 3.0.8 → 3.0.13

package/README.md

@@ -2,6 +2,7 @@
 
 > VueJS 3.X + Typescript + JSX + Select
 
+[![npm](https://img.shields.io/npm/v/selectic.svg)](https://www.npmjs.com/package/selectic)
 
 ## Introduction
 

package/dist/selectic.common.js

@@ -35,13 +35,50 @@ function styleInject(css, ref) {
 var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    z-index: 2000;\n    height: auto;\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    min-width: 200px;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    overflow: auto;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* }}} */\n";
 styleInject(css_248z);
 
-/* 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.
+/**
+ * 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
  */
-/* }}} */
-/* {{{ Helper */
+function deepClone(origObject, ignoreAttributes = [], refs = new WeakMap()) {
+    const obj = vue.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 = [];
+            refs.set(obj, ref);
+            obj.forEach((val, idx) => {
+                ref[idx] = deepClone(val, ignoreAttributes, refs);
+            });
+            return ref;
+        }
+        if (obj instanceof RegExp) {
+            const ref = new RegExp(obj.source, obj.flags);
+            refs.set(obj, ref);
+            return ref;
+        }
+        /* This should be an object */
+        const ref = {};
+        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;
+    }
+    /* This should be a primitive */
+    return obj;
+}
 /**
  * Escape search string to consider regexp special characters as they
  * are and not like special characters.
@@ -72,6 +109,12 @@ function assignObject(obj, ...sourceObjects) {
     }
     return result;
 }
+
+/* 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.
+ */
 /* }}} */
 /* {{{ Static */
 function changeTexts$1(texts) {
@@ -253,10 +296,10 @@ class SelecticStore {
             this.setAutomaticClose();
             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 = Object.assign({}, this.props.params);
+        const stateParam = deepClone(this.props.params);
         if (stateParam.optionBehavior) {
             this.buildOptionBehavior(stateParam.optionBehavior, stateParam);
             delete stateParam.optionBehavior;
@@ -646,7 +689,7 @@ class SelecticStore {
     }
     /* This method is for the computed property listOptions */
     getListOptions() {
-        const options = this.props.options;
+        const options = deepClone(this.props.options, ['data']);
         const listOptions = [];
         if (!Array.isArray(options)) {
             return listOptions;
@@ -683,7 +726,7 @@ class SelecticStore {
     }
     /* This method is for the computed property elementOptions */
     getElementOptions() {
-        const options = this.props.childOptions;
+        const options = deepClone(this.props.childOptions, ['data']);
         const childOptions = [];
         if (!Array.isArray(options) || options.length === 0) {
             return childOptions;
@@ -2076,7 +2119,7 @@ let Selectic = class Selectic extends vtyx.Vue {
             }];
     }
     get hasGivenValue() {
-        const value = this.value;
+        const value = vue.unref(this.value);
         return value !== null && value !== undefined;
     }
     get defaultValue() {
@@ -2221,7 +2264,7 @@ let Selectic = class Selectic extends vtyx.Vue {
         this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
     onOptionsChange() {
-        this.store.props.options = Array.from(this.options);
+        this.store.props.options = deepClone(this.options);
     }
     onTextsChange() {
         const texts = this.texts;
@@ -2396,12 +2439,12 @@ let Selectic = class Selectic extends vtyx.Vue {
         var _a, _b, _c;
         this._elementsListeners = [];
         this.store = new SelecticStore({
-            options: this.options,
-            value: this.value,
+            options: deepClone(this.options),
+            value: deepClone(this.value),
             selectionIsExcluded: this.selectionIsExcluded,
             disabled: this.disabled,
             texts: this.texts,
-            groups: this.groups,
+            groups: deepClone(this.groups),
             keepOpenWithOtherSelectic: !!this.params.keepOpenWithOtherSelectic,
             params: {
                 multiple: ((_a = this.multiple) !== null && _a !== void 0 ? _a : false) !== false,
@@ -2568,13 +2611,7 @@ __decorate([
     vtyx.Watch('store.state.internalValue', { deep: true })
 ], Selectic.prototype, "onInternalValueChange", null);
 __decorate([
-    vtyx.Emit('input'),
-    vtyx.Emit('change'),
-    vtyx.Emit('open'),
-    vtyx.Emit('focus'),
-    vtyx.Emit('close'),
-    vtyx.Emit('blur'),
-    vtyx.Emit('item:click')
+    vtyx.Emits(['input', 'change', 'open', 'focus', 'close', 'blur', 'item:click'])
 ], Selectic.prototype, "render", null);
 Selectic = __decorate([
     vtyx.Component

package/dist/selectic.esm.js

@@ -1,5 +1,5 @@
-import { Prop, Watch, Component, Vue, h, Emit } from 'vtyx';
-import { reactive, computed, unref, watch } from 'vue';
+import { Prop, Watch, Component, Vue, h, Emits } from 'vtyx';
+import { unref, reactive, computed, watch } from 'vue';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -31,13 +31,50 @@ function styleInject(css, ref) {
 var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    z-index: 2000;\n    height: auto;\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    min-width: 200px;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    overflow: auto;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* }}} */\n";
 styleInject(css_248z);
 
-/* 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.
+/**
+ * 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
  */
-/* }}} */
-/* {{{ Helper */
+function deepClone(origObject, ignoreAttributes = [], refs = new WeakMap()) {
+    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 = [];
+            refs.set(obj, ref);
+            obj.forEach((val, idx) => {
+                ref[idx] = deepClone(val, ignoreAttributes, refs);
+            });
+            return ref;
+        }
+        if (obj instanceof RegExp) {
+            const ref = new RegExp(obj.source, obj.flags);
+            refs.set(obj, ref);
+            return ref;
+        }
+        /* This should be an object */
+        const ref = {};
+        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;
+    }
+    /* This should be a primitive */
+    return obj;
+}
 /**
  * Escape search string to consider regexp special characters as they
  * are and not like special characters.
@@ -68,6 +105,12 @@ function assignObject(obj, ...sourceObjects) {
     }
     return result;
 }
+
+/* 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.
+ */
 /* }}} */
 /* {{{ Static */
 function changeTexts$1(texts) {
@@ -249,10 +292,10 @@ class SelecticStore {
             this.setAutomaticClose();
             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 = Object.assign({}, this.props.params);
+        const stateParam = deepClone(this.props.params);
         if (stateParam.optionBehavior) {
             this.buildOptionBehavior(stateParam.optionBehavior, stateParam);
             delete stateParam.optionBehavior;
@@ -642,7 +685,7 @@ class SelecticStore {
     }
     /* This method is for the computed property listOptions */
     getListOptions() {
-        const options = this.props.options;
+        const options = deepClone(this.props.options, ['data']);
         const listOptions = [];
         if (!Array.isArray(options)) {
             return listOptions;
@@ -679,7 +722,7 @@ class SelecticStore {
     }
     /* This method is for the computed property elementOptions */
     getElementOptions() {
-        const options = this.props.childOptions;
+        const options = deepClone(this.props.childOptions, ['data']);
         const childOptions = [];
         if (!Array.isArray(options) || options.length === 0) {
             return childOptions;
@@ -2072,7 +2115,7 @@ let Selectic = class Selectic extends Vue {
             }];
     }
     get hasGivenValue() {
-        const value = this.value;
+        const value = unref(this.value);
         return value !== null && value !== undefined;
     }
     get defaultValue() {
@@ -2217,7 +2260,7 @@ let Selectic = class Selectic extends Vue {
         this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
     onOptionsChange() {
-        this.store.props.options = Array.from(this.options);
+        this.store.props.options = deepClone(this.options);
     }
     onTextsChange() {
         const texts = this.texts;
@@ -2392,12 +2435,12 @@ let Selectic = class Selectic extends Vue {
         var _a, _b, _c;
         this._elementsListeners = [];
         this.store = new SelecticStore({
-            options: this.options,
-            value: this.value,
+            options: deepClone(this.options),
+            value: deepClone(this.value),
             selectionIsExcluded: this.selectionIsExcluded,
             disabled: this.disabled,
             texts: this.texts,
-            groups: this.groups,
+            groups: deepClone(this.groups),
             keepOpenWithOtherSelectic: !!this.params.keepOpenWithOtherSelectic,
             params: {
                 multiple: ((_a = this.multiple) !== null && _a !== void 0 ? _a : false) !== false,
@@ -2564,13 +2607,7 @@ __decorate([
     Watch('store.state.internalValue', { deep: true })
 ], Selectic.prototype, "onInternalValueChange", null);
 __decorate([
-    Emit('input'),
-    Emit('change'),
-    Emit('open'),
-    Emit('focus'),
-    Emit('close'),
-    Emit('blur'),
-    Emit('item:click')
+    Emits(['input', 'change', 'open', 'focus', 'close', 'blur', 'item:click'])
 ], Selectic.prototype, "render", null);
 Selectic = __decorate([
     Component

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.0.8",
+    "version": "3.0.13",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",
@@ -19,7 +19,9 @@
         "select",
         "multiselect",
         "multi-select",
+        "multi-select",
         "dynamic select",
+        "smart select",
         "vue",
         "vue.js",
         "vueJS",
@@ -36,7 +38,7 @@
         "test": "npm run build && tape test/**/*.spec.js"
     },
     "dependencies": {
-        "vtyx": "4.0.3"
+        "vtyx": "4.0.4"
     },
     "devDependencies": {
         "@babel/types": "^7.16.7",

package/rollup.config.js

@@ -30,5 +30,12 @@ export default [{
         'vtyx',
     ],
     context: 'this',
+}, {
+    input: 'lib/tools.js',
+    output: [{
+        file: 'test/dist/tools.js',
+        exports: 'named',
+        format: 'cjs',
+    }],
+    context: 'this',
 }];
-

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 */
 
@@ -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

@@ -18,9 +18,12 @@
  *   close [component]: triggered when the list closes.
  */
 
-import {Vue, Component, Emit, Prop, Watch, h} from 'vtyx';
+import {Vue, Component, Emits, Prop, Watch, h} from 'vtyx';
+import { unref } from 'vue';
 import './css/selectic.css';
 
+import { deepClone } from './tools';
+
 import Store, {
     changeTexts as storeChangeTexts,
     OptionProp,
@@ -371,7 +374,7 @@ export default class Selectic extends Vue<Props> {
     }
 
     get hasGivenValue() {
-        const value = this.value;
+        const value = unref(this.value);
 
         return value !== null && value !== undefined;
     }
@@ -558,7 +561,7 @@ export default class Selectic extends Vue<Props> {
 
     @Watch('options', { deep: true })
     public onOptionsChange() {
-        this.store.props.options = Array.from(this.options);
+        this.store.props.options = deepClone(this.options);
     }
 
     @Watch('texts', { deep: true })
@@ -779,12 +782,12 @@ export default class Selectic extends Vue<Props> {
         this._elementsListeners = [];
 
         this.store = new Store({
-            options: this.options,
-            value: this.value,
+            options: deepClone(this.options),
+            value: deepClone(this.value),
             selectionIsExcluded: this.selectionIsExcluded,
             disabled: this.disabled,
             texts: this.texts,
-            groups: this.groups,
+            groups: deepClone(this.groups),
             keepOpenWithOtherSelectic: !!this.params.keepOpenWithOtherSelectic,
             params: {
                 multiple: (this.multiple ?? false) !== false,
@@ -857,13 +860,7 @@ export default class Selectic extends Vue<Props> {
 
     /* }}} */
 
-    @Emit('input')
-    @Emit('change')
-    @Emit('open')
-    @Emit('focus')
-    @Emit('close')
-    @Emit('blur')
-    @Emit('item:click')
+    @Emits(['input', 'change', 'open', 'focus', 'close', 'blur', 'item:click'])
     public render() {
         const id = this.id || undefined;
         const store = this.store;

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,

package/test/Tools/tools.spec.js

@@ -0,0 +1,404 @@
+const tape = require('tape');
+const toolFile = require('../dist/tools.js');
+
+const {
+    assignObject,
+    convertToRegExp,
+    deepClone,
+} = toolFile;
+
+tape.test('assignObject()', (st) => {
+    st.test('behaves like Object.assign', (tst) => {
+        const deep1 = {
+            dp: 1,
+        };
+        const deep2 = {
+            dp: 2,
+            other: 'value',
+        };
+        const obj1 = {
+            a: 1,
+            b: 2,
+            c: false,
+            deep: deep1,
+        };
+        const obj2 = {
+            a: 3,
+            c: true,
+            d: false,
+            deep: deep2,
+            other: {
+                attr: 'str',
+            },
+        };
+
+        const result = assignObject(obj1, obj2);
+
+        tst.is(result, obj1, 'should modify first argument');
+        tst.deepEqual(result, {
+            a: 3,
+            b: 2,
+            c: true,
+            d: false,
+            deep: {
+                dp: 2,
+                other: 'value',
+            },
+            other: {
+                attr: 'str',
+            },
+        }, 'should merge all attributes');
+        tst.is(result.deep, deep2, 'should keep references');
+        tst.deepEqual(obj2, {
+            a: 3,
+            c: true,
+            d: false,
+            deep: deep2,
+            other: {
+                attr: 'str',
+            },
+        }, 'should not change second argument');
+        tst.end();
+    });
+
+    st.test('accept multiple arguments', (tst) => {
+        const obj1 = {
+            a: 1,
+            b: 2,
+        };
+        const obj2 = {
+            a: 2,
+            c: 3,
+        };
+        const obj3 = {
+            a: 3,
+            d: 4,
+        };
+        const obj4 = {
+            a: 4,
+            e: 5,
+        };
+
+        const result = assignObject(obj1, obj2, obj3, obj4);
+
+        tst.is(result, obj1, 'should modify first argument');
+        tst.deepEqual(result, {
+            a: 4,
+            b: 2,
+            c: 3,
+            d: 4,
+            e: 5,
+        }, 'should merge all attributes');
+        tst.deepEqual(obj2, {
+            a: 2,
+            c: 3,
+        }, 'should not change second argument');
+        tst.deepEqual(obj3, {
+            a: 3,
+            d: 4,
+        }, 'should not change third argument');
+        tst.deepEqual(obj4, {
+            a: 4,
+            e: 5,
+        }, 'should not change fourth argument');
+        tst.end();
+    });
+
+    st.test('ignores undefined attributes', (tst) => {
+        const obj1 = {
+            a: 1, // modified by all
+            b: 2, // not modified by all (undefined)
+            c: 3, // obj2: undefined, modified by obj3
+            d: 4, // modified by obj2, obj3: undefined
+            e: 5, // not set by obj2, obj3: undefined
+            f: 6, // not set by all
+        };
+        const obj2 = {
+            a: 'a',
+            b: undefined,
+            c: undefined,
+            d: 'd',
+        };
+        const obj3 = {
+            a: 2,
+            b: undefined,
+            c: 'c',
+            d: undefined,
+            e: undefined,
+        };
+
+        const result = assignObject(obj1, obj2, obj3);
+
+        tst.is(result, obj1, 'should modify first argument');
+        tst.deepEqual(result, {
+            a: 2,
+            b: 2,
+            c: 'c',
+            d: 'd',
+            e: 5,
+            f: 6,
+        }, 'should merge all attributes');
+        tst.deepEqual(obj2, {
+            a: 'a',
+            b: undefined,
+            c: undefined,
+            d: 'd',
+        }, 'should not change second argument');
+        tst.deepEqual(obj3, {
+            a: 2,
+            b: undefined,
+            c: 'c',
+            d: undefined,
+            e: undefined,
+        }, 'should not change third argument');
+        tst.end();
+    });
+});
+
+tape.test('convertToRegExp()', (st) => {
+    st.test('convert wildcard', (tst) => {
+        const str = '*the search*';
+
+        const result = convertToRegExp(str);
+
+        tst.is(result instanceof RegExp, true, 'should create a RegExp');
+
+        const pattern = result.source;
+        const flags = result.flags;
+
+        tst.is(pattern, '.*the search.*', 'should create wildcard sequence');
+        tst.is(flags, 'i', 'should be case insensitive by default');
+
+        tst.end();
+    });
+    st.test('escape special characters', (tst) => {
+        const str = '\\^$.+?(){}[]|';
+
+        const result = convertToRegExp(str);
+
+        tst.is(result instanceof RegExp, true, 'should create a RegExp');
+
+        const pattern = result.source;
+        const flags = result.flags;
+
+        tst.is(pattern, '\\\\\\^\\$\\.\\+\\?\\(\\)\\{\\}\\[\\]\\|', 'should escape special characters');
+        tst.is(flags, 'i', 'should be case insensitive by default');
+
+        tst.end();
+    });
+
+    st.test('allow RegExp flags', (tst) => {
+        const str = 'file*.*';
+
+        const result = convertToRegExp(str, 'gm');
+
+        tst.is(result instanceof RegExp, true, 'should create a RegExp');
+
+        const pattern = result.source;
+        const flags = result.flags;
+
+        tst.is(pattern, 'file.*\\..*', 'should convert special characters');
+        tst.is(flags, 'gm', 'should set flags');
+
+        tst.end();
+    });
+});
+
+tape.test('deepClone()', (st) => {
+    st.test('should copy simple object', (tst) => {
+        const fn = () => {};
+        const objRef = {
+            a: 1,
+            b: 'b',
+            c: false,
+            d: undefined,
+            e: null,
+            f: {},
+            g: fn,
+            spe1: NaN,
+            spe2: Infinity,
+            spe3: '',
+            spe4: [],
+        };
+
+        const result = deepClone(objRef);
+
+        tst.isNot(result, objRef, 'should create a copy');
+        tst.deepEqual(result, objRef, 'should have been similar to original');
+
+        tst.end();
+    });
+
+    st.test('should copy nested object', (tst) => {
+        const fn = () => {};
+        const deep1 = {
+            a: 1,
+            b: 'b',
+            c: false,
+            d: undefined,
+            e: null,
+            f: {},
+            g: fn,
+            spe1: NaN,
+            spe2: Infinity,
+            spe3: '',
+            spe4: [],
+        };
+        const deep2 = {
+            deep: deep1,
+            added: 'a value',
+        };
+        const objRef = {
+            d: deep2,
+        }
+
+        const result = deepClone(objRef);
+
+        tst.isNot(result, objRef, 'should create a copy');
+        tst.deepEqual(result, objRef, 'should have been similar to original');
+        tst.isNot(result.d, deep2, 'should copy nested object');
+        tst.isNot(result.d.deep, deep1, 'should copy deeper nested object');
+
+        tst.end();
+    });
+
+
+    st.test('with arrays', (tst) => {
+        const fn = () => {};
+        const objRef = {
+            a: 1,
+            b: 'b',
+            c: false,
+            d: undefined,
+            e: null,
+            f: {},
+            g: fn,
+            spe1: NaN,
+            spe2: Infinity,
+            spe3: '',
+            spe4: [],
+        };
+        const nestedArray1 = [
+            objRef,
+            { a: 'value' },
+            null,
+            undefined,
+            42,
+            'value',
+        ];
+        const nestedArray2 = [
+            objRef,
+            { a: 'value' },
+            null,
+            undefined,
+            42,
+            'value',
+        ];
+        const arrayRef = [
+            {
+                deep: nestedArray1,
+            },
+            nestedArray2,
+            42, 'value', null, undefined, [[]],
+        ];
+
+        const result = deepClone(arrayRef);
+
+        tst.isNot(result, arrayRef, 'should create a copy');
+        tst.is(Array.isArray(arrayRef), true, 'should create an array');
+        tst.deepEqual(result, arrayRef, 'should have been similar to original');
+        tst.isNot(result[1], nestedArray2, 'should copy nested array');
+        tst.isNot(result[0].deep, nestedArray1, 'should copy deeper nested array');
+        tst.isNot(result[1][0], objRef, 'should copy nested object');
+        tst.isNot(result[0].deep[0], objRef, 'should copy deeper nested object');
+
+        tst.end();
+    });
+
+    st.test('with RegExp', (tst) => {
+        const r1 = /hello?/gi;
+        const r2 = /.* [aA]+?/;
+
+        const result1 = deepClone(r1);
+        const result2 = deepClone({rgx: r2});
+
+        tst.isNot(result1, r1, 'should copy RegExp');
+        tst.is(result1 instanceof RegExp, true, 'should create a RegExp');
+        tst.is(result1.source, 'hello?', 'should copy pattern');
+        tst.is(result1.flags, 'gi', 'should copy flags');
+
+        tst.isNot(result2.rgx, r2, 'should copy the RegExp');
+        tst.is(result2.rgx.source, '.* [aA]+?', 'should copy the attribute pattern');
+        tst.is(result2.rgx.flags, '', 'should copy the attribute flags');
+        tst.end();
+    });
+
+    st.test('with primitives', (tst) => {
+        const result1 = deepClone(1);
+        const result2 = deepClone('a');
+        const result3 = deepClone(false);
+        const result4 = deepClone(null);
+        const result5 = deepClone(undefined);
+
+        tst.is(result1, 1, 'should return number');
+        tst.is(result2, 'a', 'should return string');
+        tst.is(result3, false, 'should return boolean');
+        tst.is(result4, null, 'should return null');
+        tst.is(result5, undefined, 'should return undefined');
+        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 ref = [obj1, obj2];
+
+        const result = deepClone(ref);
+
+        tst.isNot(result, ref, 'should create a new object');
+        tst.isNot(result[0], obj1, 'should copy inner objects');
+        tst.is(result[0].child, result[0], 'should keep the circular reference');
+        tst.is(result[1].sibling, result[0], 'should keep similar references');
+        tst.is(result[0].sibling, result[1], 'should keep similar references (2)');
+
+        tst.end();
+    });
+
+    st.test('can ignore some attributes', (tst) => {
+        const noCopy1 = {
+            ref: 1,
+        };
+        const noCopy2 = new Set(['alpha', 'omega']);
+        const noCopy3 = new Map([[1, 'alpha'], [22, 'omega']]);
+        const deep1 = {
+            a: 'alpha',
+            noCopy: noCopy3,
+        };
+        const ref = {
+            id: 'ref',
+            noCopy: noCopy1,
+            nop: noCopy2,
+            not: 42,
+            deep: deep1,
+        };
+
+        const result = deepClone(ref, ['noCopy', 'nothing', 'nop', 'not']);
+
+        tst.isNot(result, ref, 'should create a new object');
+        tst.isNot(result.deep, deep1, 'should create a new object');
+        tst.is(result.noCopy, noCopy1, 'should keep original reference');
+        tst.is(result.nop, noCopy2, 'should keep original reference (2)');
+        tst.is(result.not, 42, 'should keep primitive');
+        tst.is(result.deep.noCopy, noCopy3, 'should keep nested original reference');
+
+        tst.end();
+    });
+});

package/types/tools.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 declare function deepClone<T = any>(origObject: T, ignoreAttributes?: string[], refs?: WeakMap<any, any>): T;
+/**
+ * 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 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;