selectic 3.0.6 → 3.0.10

package/dist/selectic.common.js

@@ -35,13 +35,45 @@ 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(obj, refs = new WeakMap()) {
+    /* 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, 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)) {
+            ref[key] = deepClone(val, 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 +104,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) {
@@ -211,17 +249,17 @@ class SelecticStore {
             this.commit('isOpen', false);
             this.buildAllOptions(true);
             this.buildSelectedOptions();
-        });
+        }, { deep: true });
         vue.watch(() => [this.listOptions, this.elementOptions], () => {
             /* TODO: transform allOptions as a computed properties and this
              * watcher become useless */
             this.buildAllOptions(true);
-        });
+        }, { deep: true });
         vue.watch(() => this.props.value, () => {
             var _a;
             const value = (_a = this.props.value) !== null && _a !== void 0 ? _a : null;
             this.commit('internalValue', value);
-        });
+        }, { deep: true });
         vue.watch(() => this.props.selectionIsExcluded, () => {
             this.commit('selectionIsExcluded', this.props.selectionIsExcluded);
         });
@@ -237,14 +275,14 @@ class SelecticStore {
                 areAllSelected = this.state.filteredOptions.every((item) => !!(+item.selected ^ selectionIsExcluded));
             }
             this.state.status.areAllSelected = areAllSelected;
-        });
+        }, { deep: true });
         vue.watch(() => this.state.internalValue, () => {
             this.buildSelectedOptions();
-        });
+        }, { deep: true });
         vue.watch(() => this.state.allOptions, () => {
             this.checkAutoSelect();
             this.checkAutoDisabled();
-        });
+        }, { deep: true });
         vue.watch(() => this.state.totalAllOptions, () => {
             this.checkHideFilter();
         });
@@ -253,10 +291,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;
@@ -274,8 +312,8 @@ class SelecticStore {
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: !!props.selectionIsExcluded,
-            disabled: !!props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
+            selectionIsExcluded: !!this.props.selectionIsExcluded,
+            disabled: !!this.props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
         this.checkHideFilter();
         if (this.props.texts) {
@@ -646,7 +684,7 @@ class SelecticStore {
     }
     /* This method is for the computed property listOptions */
     getListOptions() {
-        const options = this.props.options;
+        const options = deepClone(this.props.options);
         const listOptions = [];
         if (!Array.isArray(options)) {
             return listOptions;
@@ -683,7 +721,7 @@ class SelecticStore {
     }
     /* This method is for the computed property elementOptions */
     getElementOptions() {
-        const options = this.props.childOptions;
+        const options = deepClone(this.props.childOptions);
         const childOptions = [];
         if (!Array.isArray(options) || options.length === 0) {
             return childOptions;
@@ -1393,7 +1431,7 @@ __decorate$4([
     vtyx.Prop({ default: '' })
 ], MainInput.prototype, "id", void 0);
 __decorate$4([
-    vtyx.Watch('store.state.internalValue')
+    vtyx.Watch('store.state.internalValue', { deep: true })
 ], MainInput.prototype, "onInternalChange", null);
 MainInput = __decorate$4([
     vtyx.Component
@@ -1497,7 +1535,7 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
-    destroyed() {
+    unmounted() {
         document.removeEventListener('keypress', this.onKeyPressed);
     }
     /* }}} */
@@ -1757,7 +1795,7 @@ __decorate$2([
     vtyx.Watch('store.state.offsetItem')
 ], List.prototype, "onOffsetChange", null);
 __decorate$2([
-    vtyx.Watch('filteredOptions')
+    vtyx.Watch('filteredOptions', { deep: true })
 ], List.prototype, "onFilteredOptionsChange", null);
 __decorate$2([
     vtyx.Watch('groupId')
@@ -1928,7 +1966,7 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
         document.body.addEventListener('keydown', this.onKeyDown);
         this.computeListSize();
     }
-    destroyed() {
+    unmounted() {
         document.body.removeEventListener('keydown', this.onKeyDown);
         /* force the element to be removed from DOM */
         if (this.$el.parentNode) {
@@ -1973,7 +2011,7 @@ __decorate$1([
     vtyx.Prop({ default: 300 })
 ], ExtendedList.prototype, "width", void 0);
 __decorate$1([
-    vtyx.Watch('store.state.filteredOptions')
+    vtyx.Watch('store.state.filteredOptions', { deep: true })
 ], ExtendedList.prototype, "onFilteredOptionsChange", null);
 __decorate$1([
     vtyx.Watch('store.state.hideFilter')
@@ -2221,7 +2259,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;
@@ -2462,7 +2500,7 @@ let Selectic = class Selectic extends vtyx.Vue {
         // }
         // this.store.childOptions = options;
     }
-    beforeDestroy() {
+    beforeUnmount() {
         this.removeListeners();
     }
     /* }}} */
@@ -2538,22 +2576,22 @@ __decorate([
     vtyx.Prop()
 ], Selectic.prototype, "_getMethods", void 0);
 __decorate([
-    vtyx.Watch('value')
+    vtyx.Watch('value', { deep: true })
 ], Selectic.prototype, "onValueChange", null);
 __decorate([
     vtyx.Watch('selectionIsExcluded')
 ], Selectic.prototype, "onExcludedChange", null);
 __decorate([
-    vtyx.Watch('options')
+    vtyx.Watch('options', { deep: true })
 ], Selectic.prototype, "onOptionsChange", null);
 __decorate([
-    vtyx.Watch('texts')
+    vtyx.Watch('texts', { deep: true })
 ], Selectic.prototype, "onTextsChange", null);
 __decorate([
     vtyx.Watch('disabled')
 ], Selectic.prototype, "onDisabledChange", null);
 __decorate([
-    vtyx.Watch('groups')
+    vtyx.Watch('groups', { deep: true })
 ], Selectic.prototype, "onGroupsChanged", null);
 __decorate([
     vtyx.Watch('placeholder')
@@ -2565,7 +2603,7 @@ __decorate([
     vtyx.Watch('isFocused')
 ], Selectic.prototype, "onFocusChanged", null);
 __decorate([
-    vtyx.Watch('store.state.internalValue')
+    vtyx.Watch('store.state.internalValue', { deep: true })
 ], Selectic.prototype, "onInternalValueChange", null);
 __decorate([
     vtyx.Emit('input'),

package/dist/selectic.esm.js

@@ -31,13 +31,45 @@ 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(obj, refs = new WeakMap()) {
+    /* 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, 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)) {
+            ref[key] = deepClone(val, 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 +100,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) {
@@ -207,17 +245,17 @@ 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, () => {
             var _a;
             const value = (_a = this.props.value) !== null && _a !== void 0 ? _a : null;
             this.commit('internalValue', value);
-        });
+        }, { deep: true });
         watch(() => this.props.selectionIsExcluded, () => {
             this.commit('selectionIsExcluded', this.props.selectionIsExcluded);
         });
@@ -233,14 +271,14 @@ class SelecticStore {
                 areAllSelected = this.state.filteredOptions.every((item) => !!(+item.selected ^ selectionIsExcluded));
             }
             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();
         });
@@ -249,10 +287,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;
@@ -270,8 +308,8 @@ class SelecticStore {
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: !!props.selectionIsExcluded,
-            disabled: !!props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
+            selectionIsExcluded: !!this.props.selectionIsExcluded,
+            disabled: !!this.props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
         this.checkHideFilter();
         if (this.props.texts) {
@@ -642,7 +680,7 @@ class SelecticStore {
     }
     /* This method is for the computed property listOptions */
     getListOptions() {
-        const options = this.props.options;
+        const options = deepClone(this.props.options);
         const listOptions = [];
         if (!Array.isArray(options)) {
             return listOptions;
@@ -679,7 +717,7 @@ class SelecticStore {
     }
     /* This method is for the computed property elementOptions */
     getElementOptions() {
-        const options = this.props.childOptions;
+        const options = deepClone(this.props.childOptions);
         const childOptions = [];
         if (!Array.isArray(options) || options.length === 0) {
             return childOptions;
@@ -1389,7 +1427,7 @@ __decorate$4([
     Prop({ default: '' })
 ], MainInput.prototype, "id", void 0);
 __decorate$4([
-    Watch('store.state.internalValue')
+    Watch('store.state.internalValue', { deep: true })
 ], MainInput.prototype, "onInternalChange", null);
 MainInput = __decorate$4([
     Component
@@ -1493,7 +1531,7 @@ let FilterPanel = class FilterPanel extends Vue {
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
-    destroyed() {
+    unmounted() {
         document.removeEventListener('keypress', this.onKeyPressed);
     }
     /* }}} */
@@ -1753,7 +1791,7 @@ __decorate$2([
     Watch('store.state.offsetItem')
 ], List.prototype, "onOffsetChange", null);
 __decorate$2([
-    Watch('filteredOptions')
+    Watch('filteredOptions', { deep: true })
 ], List.prototype, "onFilteredOptionsChange", null);
 __decorate$2([
     Watch('groupId')
@@ -1924,7 +1962,7 @@ let ExtendedList = class ExtendedList extends Vue {
         document.body.addEventListener('keydown', this.onKeyDown);
         this.computeListSize();
     }
-    destroyed() {
+    unmounted() {
         document.body.removeEventListener('keydown', this.onKeyDown);
         /* force the element to be removed from DOM */
         if (this.$el.parentNode) {
@@ -1969,7 +2007,7 @@ __decorate$1([
     Prop({ default: 300 })
 ], ExtendedList.prototype, "width", void 0);
 __decorate$1([
-    Watch('store.state.filteredOptions')
+    Watch('store.state.filteredOptions', { deep: true })
 ], ExtendedList.prototype, "onFilteredOptionsChange", null);
 __decorate$1([
     Watch('store.state.hideFilter')
@@ -2217,7 +2255,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;
@@ -2458,7 +2496,7 @@ let Selectic = class Selectic extends Vue {
         // }
         // this.store.childOptions = options;
     }
-    beforeDestroy() {
+    beforeUnmount() {
         this.removeListeners();
     }
     /* }}} */
@@ -2534,22 +2572,22 @@ __decorate([
     Prop()
 ], Selectic.prototype, "_getMethods", void 0);
 __decorate([
-    Watch('value')
+    Watch('value', { deep: true })
 ], Selectic.prototype, "onValueChange", null);
 __decorate([
     Watch('selectionIsExcluded')
 ], Selectic.prototype, "onExcludedChange", null);
 __decorate([
-    Watch('options')
+    Watch('options', { deep: true })
 ], Selectic.prototype, "onOptionsChange", null);
 __decorate([
-    Watch('texts')
+    Watch('texts', { deep: true })
 ], Selectic.prototype, "onTextsChange", null);
 __decorate([
     Watch('disabled')
 ], Selectic.prototype, "onDisabledChange", null);
 __decorate([
-    Watch('groups')
+    Watch('groups', { deep: true })
 ], Selectic.prototype, "onGroupsChanged", null);
 __decorate([
     Watch('placeholder')
@@ -2561,7 +2599,7 @@ __decorate([
     Watch('isFocused')
 ], Selectic.prototype, "onFocusChanged", null);
 __decorate([
-    Watch('store.state.internalValue')
+    Watch('store.state.internalValue', { deep: true })
 ], Selectic.prototype, "onInternalValueChange", null);
 __decorate([
     Emit('input'),

package/package.json

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

package/src/ExtendedList.tsx

@@ -192,7 +192,7 @@ export default class ExtendedList extends Vue<Props> {
     /* }}} */
     /* {{{ watch */
 
-    @Watch('store.state.filteredOptions')
+    @Watch('store.state.filteredOptions', { deep: true })
     public onFilteredOptionsChange() {
         this.$nextTick(this.computeListSize);
     }
@@ -228,7 +228,7 @@ export default class ExtendedList extends Vue<Props> {
         this.computeListSize();
     }
 
-    public destroyed() {
+    public unmounted() {
         document.body.removeEventListener('keydown', this.onKeyDown);
 
         /* force the element to be removed from DOM */

package/src/Filter.tsx

@@ -133,7 +133,7 @@ export default class FilterPanel extends Vue<Props> {
         this.getFocus();
     }
 
-    public destroyed() {
+    public unmounted() {
         document.removeEventListener('keypress', this.onKeyPressed);
     }
 

package/src/List.tsx

@@ -220,7 +220,7 @@ export default class List extends Vue<Props> {
         this.checkOffset();
     }
 
-    @Watch('filteredOptions')
+    @Watch('filteredOptions', { deep: true })
     public onFilteredOptionsChange() {
         this.checkOffset();
     }

package/src/MainInput.tsx

@@ -264,7 +264,7 @@ export default class MainInput extends Vue<Props> {
     /* }}} */
     /* {{{ watch */
 
-    @Watch('store.state.internalValue')
+    @Watch('store.state.internalValue', { deep: true })
     public onInternalChange() {
         this.nbHiddenItems = 0;
     }

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(
@@ -651,8 +616,8 @@ export default class SelecticStore {
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: !!props.selectionIsExcluded,
-            disabled: !!props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
+            selectionIsExcluded: !!this.props.selectionIsExcluded,
+            disabled: !!this.props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
 
         this.checkHideFilter();
@@ -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);
         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);
         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,79 @@
+
+/**
+ * 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>(obj: T, refs: WeakMap<any, any> = new WeakMap()): T {
+    /* 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, 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)) {
+            ref[key] = deepClone(val, 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/types/ExtendedList.d.ts

@@ -31,6 +31,6 @@ export default class ExtendedList extends Vue<Props> {
     private getGroup;
     private computeListSize;
     mounted(): void;
-    destroyed(): void;
+    unmounted(): void;
     render(): h.JSX.Element;
 }

package/types/Filter.d.ts

@@ -23,6 +23,6 @@ export default class FilterPanel extends Vue<Props> {
     private getFocus;
     onClosed(): void;
     mounted(): void;
-    destroyed(): void;
+    unmounted(): void;
     render(): h.JSX.Element;
 }

package/types/index.d.ts

@@ -136,6 +136,6 @@ export default class Selectic extends Vue<Props> {
     created(): void;
     mounted(): void;
     beforeUpdate(): void;
-    beforeDestroy(): void;
+    beforeUnmount(): void;
     render(): h.JSX.Element | undefined;
 }

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>(obj: T, 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;