selectic 3.0.1 → 3.0.5

package/README.md

@@ -81,6 +81,8 @@ There are very few dependencies and code stays very small (~90kB).
 
 [Read the documentation](./doc/main.md) to know how to configure Selectic and all its possibilities.
 
+For users which are used to previous Selectic versions, they can read the [migration strategy guide](./doc/breakingChanges.md).
+
 It uses [VTYX](https://github.com/Intersec/vtyx) for strong typing.
 
 ## Tests

package/dist/selectic.common.js

@@ -107,6 +107,7 @@ class SelecticStore {
             disabled: false,
             placeholder: '',
             hideFilter: false,
+            keepFilterOpen: false,
             allowRevert: undefined,
             allowClearSelection: false,
             autoSelect: true,
@@ -136,6 +137,8 @@ class SelecticStore {
                 errorMessage: '',
                 areAllSelected: false,
                 hasChanged: false,
+                automaticChange: false,
+                automaticClose: false,
             },
         });
         /* Do not need reactivity */
@@ -188,8 +191,7 @@ class SelecticStore {
             return this.state.filteredOptions.length >= nbItems;
         });
         this.hasFetchedAllItems = vue.computed(() => {
-            var _a;
-            const isPartial = (_a = this.isPartial.value) !== null && _a !== void 0 ? _a : this.isPartial;
+            const isPartial = vue.unref(this.isPartial);
             if (!isPartial) {
                 return true;
             }
@@ -206,6 +208,7 @@ class SelecticStore {
         /* {{{ watch */
         vue.watch(() => [this.props.options, this.props.childOptions], () => {
             this.data.cacheItem.clear();
+            this.setAutomaticClose();
             this.commit('isOpen', false);
             this.buildAllOptions(true);
             this.buildSelectedOptions();
@@ -227,9 +230,8 @@ class SelecticStore {
             this.commit('disabled', this.props.disabled);
         });
         vue.watch(() => this.state.filteredOptions, () => {
-            var _a;
             let areAllSelected = false;
-            const hasAllItems = (_a = this.hasAllItems.value) !== null && _a !== void 0 ? _a : this.hasAllItems;
+            const hasAllItems = vue.unref(this.hasAllItems);
             if (hasAllItems) {
                 const selectionIsExcluded = +this.state.selectionIsExcluded;
                 /* eslint-disable-next-line no-bitwise */
@@ -249,6 +251,7 @@ class SelecticStore {
         });
         /* }}} */
         this.closeSelectic = () => {
+            this.setAutomaticClose();
             this.commit('isOpen', false);
         };
         const value = this.props.value;
@@ -262,6 +265,10 @@ class SelecticStore {
         if (stateParam.hideFilter === 'auto') {
             delete stateParam.hideFilter;
         }
+        else if (stateParam.hideFilter === 'open') {
+            this.state.keepFilterOpen = true;
+            delete stateParam.hideFilter;
+        }
         /* Update state */
         assignObject(this.state, stateParam);
         /* XXX: should be done in 2 lines, in order to set the multiple state
@@ -337,11 +344,20 @@ class SelecticStore {
                 break;
             case 'disabled':
                 if (value) {
+                    this.setAutomaticClose();
                     this.commit('isOpen', false);
                 }
                 break;
         }
     }
+    setAutomaticChange() {
+        this.state.status.automaticChange = true;
+        setTimeout(() => this.state.status.automaticChange = false, 0);
+    }
+    setAutomaticClose() {
+        this.state.status.automaticClose = true;
+        setTimeout(() => this.state.status.automaticClose = false, 0);
+    }
     getItem(id) {
         let item;
         if (this.hasItemInStore(id)) {
@@ -384,10 +400,9 @@ class SelecticStore {
         return this.buildSelectedItems(ids);
     }
     selectItem(id, selected, keepOpen = false) {
-        var _a;
         const state = this.state;
         let hasChanged = false;
-        const isPartial = (_a = this.isPartial.value) !== null && _a !== void 0 ? _a : this.isPartial;
+        const isPartial = vue.unref(this.isPartial);
         /* Check that item is not disabled */
         if (!isPartial) {
             const item = state.allOptions.find((opt) => opt.id === id);
@@ -440,6 +455,10 @@ class SelecticStore {
             else if (id === oldValue) {
                 return;
             }
+            if (keepOpen) {
+                /* if keepOpen is true it means that it is an automatic change */
+                this.setAutomaticChange();
+            }
             this.commit('internalValue', id);
             hasChanged = true;
         }
@@ -448,11 +467,10 @@ class SelecticStore {
         }
     }
     toggleSelectAll() {
-        var _a;
         if (!this.state.multiple) {
             return;
         }
-        const hasAllItems = (_a = this.hasAllItems.value) !== null && _a !== void 0 ? _a : this.hasAllItems;
+        const hasAllItems = vue.unref(this.hasAllItems);
         if (!hasAllItems) {
             const labels = this.data.labels;
             if (this.state.searchText) {
@@ -485,8 +503,7 @@ class SelecticStore {
         this.state.status.errorMessage = '';
     }
     clearCache(forceReset = false) {
-        var _a;
-        const isPartial = (_a = this.isPartial.value) !== null && _a !== void 0 ? _a : this.isPartial;
+        const isPartial = vue.unref(this.isPartial);
         const total = isPartial ? Infinity : 0;
         this.data.cacheItem.clear();
         this.state.allOptions = [];
@@ -526,14 +543,13 @@ class SelecticStore {
         return !!this.getValue(id);
     }
     getValue(id) {
-        var _a, _b;
         function findId(option) {
             return option.id === id;
         }
         return this.state.filteredOptions.find(findId) ||
             this.state.dynOptions.find(findId) ||
-            ((_a = this.listOptions.value) !== null && _a !== void 0 ? _a : this.listOptions).find(findId) ||
-            ((_b = this.elementOptions.value) !== null && _b !== void 0 ? _b : this.elementOptions).find(findId);
+            vue.unref(this.listOptions).find(findId) ||
+            vue.unref(this.elementOptions).find(findId);
     }
     convertTypeValue(oldValue) {
         const state = this.state;
@@ -557,11 +573,11 @@ class SelecticStore {
         const internalValue = state.internalValue;
         const newValue = this.convertTypeValue(internalValue);
         if (newValue !== internalValue) {
+            this.setAutomaticChange();
             state.internalValue = newValue;
         }
     }
     assertCorrectValue(applyStrict = false) {
-        var _a, _b;
         const state = this.state;
         this.assertValueType();
         const internalValue = state.internalValue;
@@ -569,9 +585,9 @@ class SelecticStore {
         const isMultiple = state.multiple;
         const checkStrict = state.strictValue;
         let newValue = internalValue;
-        const isPartial = (_a = this.isPartial.value) !== null && _a !== void 0 ? _a : this.isPartial;
+        const isPartial = vue.unref(this.isPartial);
         if (isMultiple) {
-            const hasFetchedAllItems = (_b = this.hasFetchedAllItems.value) !== null && _b !== void 0 ? _b : this.hasFetchedAllItems;
+            const hasFetchedAllItems = vue.unref(this.hasFetchedAllItems);
             if (selectionIsExcluded && hasFetchedAllItems) {
                 newValue = state.allOptions.reduce((values, option) => {
                     const id = option.id;
@@ -609,6 +625,7 @@ class SelecticStore {
                 }
             }
             if (isDifferent) {
+                this.setAutomaticChange();
                 newValue = filteredValue;
             }
         }
@@ -697,13 +714,12 @@ class SelecticStore {
         return childOptions;
     }
     buildAllOptions(keepFetched = false) {
-        var _a, _b, _c;
         const allOptions = [];
         let listOptions = [];
         let elementOptions = [];
         const optionBehaviorOrder = this.state.optionBehaviorOrder;
         let length = Infinity;
-        const isPartial = (_a = this.isPartial.value) !== null && _a !== void 0 ? _a : this.isPartial;
+        const isPartial = vue.unref(this.isPartial);
         const arrayFromOrder = (orderValue) => {
             switch (orderValue) {
                 case 'O': return listOptions;
@@ -729,8 +745,8 @@ class SelecticStore {
                 this.state.totalDynOptions = 0;
             }
         }
-        listOptions = (_b = this.listOptions.value) !== null && _b !== void 0 ? _b : this.listOptions;
-        elementOptions = (_c = this.elementOptions.value) !== null && _c !== void 0 ? _c : this.elementOptions;
+        listOptions = vue.unref(this.listOptions);
+        elementOptions = vue.unref(this.elementOptions);
         if (this.state.optionBehaviorOperation === 'force') {
             const orderValue = optionBehaviorOrder.find((value) => lengthFromOrder(value) > 0);
             allOptions.push(...arrayFromOrder(orderValue));
@@ -776,7 +792,6 @@ class SelecticStore {
         });
     }
     async buildFilteredOptions() {
-        var _a, _b, _c, _d;
         if (!this.state.isOpen) {
             /* Do not try to fetch anything while the select is not open */
             return;
@@ -786,12 +801,12 @@ class SelecticStore {
         const totalAllOptions = this.state.totalAllOptions;
         const allOptionsLength = allOptions.length;
         let filteredOptionsLength = this.state.filteredOptions.length;
-        const hasAllItems = (_a = this.hasAllItems.value) !== null && _a !== void 0 ? _a : this.hasAllItems;
+        const hasAllItems = vue.unref(this.hasAllItems);
         if (hasAllItems) {
             /* Everything has already been fetched and stored in filteredOptions */
             return;
         }
-        const hasFetchedAllItems = (_b = this.hasFetchedAllItems.value) !== null && _b !== void 0 ? _b : this.hasFetchedAllItems;
+        const hasFetchedAllItems = vue.unref(this.hasFetchedAllItems);
         /* Check if all options have been fetched */
         if (hasFetchedAllItems) {
             if (!search) {
@@ -806,7 +821,7 @@ class SelecticStore {
         }
         /* When we only have partial options */
         const offsetItem = this.state.offsetItem;
-        const marginSize = (_c = this.marginSize.value) !== null && _c !== void 0 ? _c : this.marginSize;
+        const marginSize = vue.unref(this.marginSize);
         const endIndex = offsetItem + marginSize;
         if (endIndex <= filteredOptionsLength) {
             return;
@@ -814,7 +829,7 @@ class SelecticStore {
         if (!search && endIndex <= allOptionsLength) {
             this.state.filteredOptions = this.buildGroupItems(allOptions);
             this.state.totalFilteredOptions = totalAllOptions + this.state.groups.size;
-            const isPartial = (_d = this.isPartial.value) !== null && _d !== void 0 ? _d : this.isPartial;
+            const isPartial = vue.unref(this.isPartial);
             if (isPartial && this.state.totalDynOptions === Infinity) {
                 this.fetchData();
             }
@@ -851,6 +866,7 @@ class SelecticStore {
                 }
                 else {
                     const itemIds = items.map((item) => item.id);
+                    this.setAutomaticChange();
                     this.commit('internalValue', itemIds);
                 }
                 return;
@@ -871,6 +887,7 @@ class SelecticStore {
             }
             if (!items.length) {
                 if (state.strictValue) {
+                    this.setAutomaticChange();
                     this.commit('internalValue', null);
                 }
                 return;
@@ -880,7 +897,6 @@ class SelecticStore {
         }
     }
     async fetchData() {
-        var _a;
         const state = this.state;
         const labels = this.data.labels;
         const fetchCallback = this.props.fetchCallback;
@@ -892,7 +908,7 @@ class SelecticStore {
         const filteredOptionsLength = state.filteredOptions.length;
         const offsetItem = state.offsetItem;
         const pageSize = state.pageSize;
-        const marginSize = (_a = this.marginSize.value) !== null && _a !== void 0 ? _a : this.marginSize;
+        const marginSize = vue.unref(this.marginSize);
         const endIndex = offsetItem + marginSize;
         const dynOffset = this.data.dynOffset;
         /* Run the query */
@@ -964,7 +980,6 @@ class SelecticStore {
         return this.buildGroupItems(options.filter((option) => rgx.test(option.text)));
     }
     addStaticFilteredOptions(fromDynamic = false) {
-        var _a, _b;
         const search = this.state.searchText;
         let continueLoop = fromDynamic;
         if (this.state.optionBehaviorOperation !== 'sort') {
@@ -984,10 +999,10 @@ class SelecticStore {
             }
             switch (order) {
                 case 'O':
-                    options = this.filterOptions((_a = this.listOptions.value) !== null && _a !== void 0 ? _a : this.listOptions, search);
+                    options = this.filterOptions(vue.unref(this.listOptions), search);
                     break;
                 case 'E':
-                    options = this.filterOptions((_b = this.elementOptions.value) !== null && _b !== void 0 ? _b : this.elementOptions, search);
+                    options = this.filterOptions(vue.unref(this.elementOptions), search);
                     break;
             }
             this.state.filteredOptions.push(...options);
@@ -1093,11 +1108,10 @@ class SelecticStore {
         }
     }
     checkAutoDisabled() {
-        var _a, _b;
         const state = this.state;
-        const isPartial = (_a = this.isPartial.value) !== null && _a !== void 0 ? _a : this.isPartial;
+        const isPartial = vue.unref(this.isPartial);
         const doNotCheck = isPartial || this.props.disabled || !state.autoDisabled;
-        const hasFetchedAllItems = (_b = this.hasFetchedAllItems.value) !== null && _b !== void 0 ? _b : this.hasFetchedAllItems;
+        const hasFetchedAllItems = vue.unref(this.hasFetchedAllItems);
         if (doNotCheck || !hasFetchedAllItems) {
             return;
         }
@@ -1110,7 +1124,10 @@ class SelecticStore {
         const isEmpty = nb === 0;
         const hasOnlyOneOption = nb === 1 && hasValidValue && !state.allowClearSelection;
         if (hasOnlyOneOption || isEmpty) {
-            this.commit('isOpen', false);
+            if (state.isOpen) {
+                this.setAutomaticClose();
+                this.commit('isOpen', false);
+            }
             this.commit('disabled', true);
         }
         else {
@@ -1118,13 +1135,12 @@ class SelecticStore {
         }
     }
     checkHideFilter() {
-        var _a;
         const params = this.props.params;
         if (params && params.hideFilter !== 'auto') {
             return;
         }
         const state = this.state;
-        const isPartial = (_a = this.isPartial.value) !== null && _a !== void 0 ? _a : this.isPartial;
+        const isPartial = vue.unref(this.isPartial);
         if (state.multiple || isPartial) {
             state.hideFilter = false;
         }
@@ -1414,12 +1430,12 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
         const state = store.state;
         const isMultiple = state.multiple;
         const hasItems = state.filteredOptions.length === 0;
-        const canNotSelect = !!state.searchText && !store.hasAllItems.value;
+        const canNotSelect = !!state.searchText && !vue.unref(store.hasAllItems);
         return !isMultiple || hasItems || canNotSelect;
     }
     get disableRevert() {
         const store = this.store;
-        return !store.state.multiple || !store.hasFetchedAllItems.value;
+        return !store.state.multiple || !vue.unref(store.hasFetchedAllItems);
     }
     get enableRevert() {
         const state = this.store.state;
@@ -1457,6 +1473,10 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
         this.store.commit('selectionIsExcluded', !this.selectionIsExcluded);
     }
     togglePanel() {
+        if (this.store.state.keepFilterOpen === true) {
+            this.closed = false;
+            return;
+        }
         this.closed = !this.closed;
     }
     getFocus() {
@@ -1473,7 +1493,8 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
     /* }}} */
     /* {{{ Life cycle */
     mounted() {
-        this.closed = !this.store.state.searchText;
+        const state = this.store.state;
+        this.closed = !state.keepFilterOpen && !state.searchText;
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
@@ -1482,24 +1503,27 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
     }
     /* }}} */
     render() {
+        const store = this.store;
+        const state = store.state;
+        const labels = store.data.labels;
         return (vtyx.h("div", { class: "filter-panel" },
             vtyx.h("div", { class: {
                     panelclosed: this.closed,
                     panelopened: !this.closed,
                 } },
                 vtyx.h("div", { class: "filter-panel__input form-group has-feedback" },
-                    vtyx.h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: this.store.state.searchText, on: {
+                    vtyx.h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: state.searchText, on: {
                             'input.stop.prevent': this.onInput,
                         }, ref: "filterInput" }),
                     vtyx.h("span", { class: "fa fa-search selectic-search-scope\n                                     form-control-feedback" })),
-                this.store.state.multiple && (vtyx.h("div", { class: "toggle-selectic" },
+                state.multiple && (vtyx.h("div", { class: "toggle-selectic" },
                     vtyx.h("label", { class: ['control-label', {
                                 'selectic__label-disabled': this.disableSelectAll,
                             }] },
-                        vtyx.h("input", { type: "checkbox", checked: this.store.state.status.areAllSelected, disabled: this.disableSelectAll, on: {
+                        vtyx.h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, on: {
                                 change: this.onSelectAll,
                             } }),
-                        this.store.data.labels.selectAll))),
+                        labels.selectAll))),
                 this.enableRevert && (vtyx.h("div", { class: ['toggle-selectic', {
                             'selectic__label-disabled': this.disableRevert,
                         }] },
@@ -1507,8 +1531,8 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
                         vtyx.h("input", { type: "checkbox", checked: this.selectionIsExcluded, disabled: this.disableRevert, on: {
                                 change: this.onExclude,
                             } }),
-                        this.store.data.labels.excludeResult)))),
-            vtyx.h("div", { class: "curtain-handler", on: {
+                        labels.excludeResult)))),
+            !state.keepFilterOpen && (vtyx.h("div", { class: "curtain-handler", on: {
                     'click.prevent.stop': this.togglePanel,
                 } },
                 vtyx.h("span", { class: "fa fa-search" }),
@@ -1516,7 +1540,7 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
                         'fa': true,
                         'fa-caret-down': this.closed,
                         'fa-caret-up': !this.closed,
-                    } }))));
+                    } })))));
     }
 };
 __decorate$3([
@@ -1558,9 +1582,8 @@ let List = class List extends vtyx.Vue {
         return this.store.state.multiple;
     }
     get itemsMargin() {
-        var _a;
         /* XXX: I don't really know when we should use value or not... */
-        return (_a = this.store.marginSize.value) !== null && _a !== void 0 ? _a : this.store.marginSize;
+        return vue.unref(this.store.marginSize);
     }
     get shortOptions() {
         const endIndex = this.endIndex;
@@ -2002,15 +2025,26 @@ let Selectic = class Selectic extends vtyx.Vue {
     }
     get outsideListener() {
         return (evt) => {
-            const target = evt.target;
             if (!this.$refs) {
                 /* this component should have been destroyed */
                 this.removeListeners();
                 this.store.commit('isOpen', false);
                 return;
             }
-            if (!this.$refs.extendedList.$el.contains(target) && !this.$el.contains(target)) {
-                this.store.commit('isOpen', false);
+            const store = this.store;
+            const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
+            const extendedList = this.$refs.extendedList;
+            if (!extendedList) {
+                /* this component is not focused anymore */
+                if (!keepOpenWithOtherSelectic) {
+                    this.removeListeners();
+                    this.store.commit('isOpen', false);
+                }
+                return;
+            }
+            const target = evt.target;
+            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+                store.commit('isOpen', false);
             }
         };
     }
@@ -2150,7 +2184,7 @@ let Selectic = class Selectic extends vtyx.Vue {
             window.addEventListener('resize', this.windowResize, false);
             document.addEventListener('click', this.outsideListener, true);
             this.computeOffset();
-            this.$emit('open', this);
+            this.emit('open');
         }
         else {
             this.removeListeners();
@@ -2158,7 +2192,7 @@ let Selectic = class Selectic extends vtyx.Vue {
                 this.$emit('change', this.getValue(), state.selectionIsExcluded, this);
                 this.store.resetChange();
             }
-            this.$emit('close', this);
+            this.emit('close');
         }
     }
     compareValues(oldValue, newValue) {
@@ -2221,9 +2255,9 @@ let Selectic = class Selectic extends vtyx.Vue {
         const canTrigger = (oldValue !== undefined || !this.hasGivenValue) && !areSimilar;
         if (canTrigger) {
             const selectionIsExcluded = this.store.state.selectionIsExcluded;
-            this.$emit('input', value, selectionIsExcluded, this);
+            this.emit('input', value, selectionIsExcluded);
             if (!this.isFocused) {
-                this.$emit('change', value, selectionIsExcluded, this);
+                this.emit('change', value, selectionIsExcluded);
                 this.store.resetChange();
             }
         }
@@ -2246,12 +2280,42 @@ let Selectic = class Selectic extends vtyx.Vue {
             this.store.commit('isOpen', false);
         }, 0);
     }
-    emit(event, ...args) {
+    _emit(event, ...args) {
         this.$emit(event, ...args);
         if (typeof this._on === 'function') {
             this._on(event, ...args);
         }
     }
+    emit(event, value, isExcluded) {
+        const automatic = this.store.state.status.automaticChange;
+        const options = {
+            instance: this,
+            eventType: event,
+            automatic,
+        };
+        switch (event) {
+            case 'input':
+            case 'change':
+                const changeOptions = Object.assign({
+                    isExcluded: isExcluded,
+                }, options);
+                this._emit(event, value, changeOptions);
+                break;
+            case 'open':
+            case 'focus':
+                this._emit('open', options);
+                this._emit('focus', options);
+                break;
+            case 'close':
+            case 'blur':
+                this._emit('close', options);
+                this._emit('blur', options);
+                break;
+            case 'item:click':
+                this._emit(event, value, options);
+                break;
+        }
+    }
     // private extractFromNode(node: Vue.VNode, text = ''): OptionValue {
     //     function styleToString(staticStyle?: {[key: string]: string}): string | undefined {
     //         if (!staticStyle) {
@@ -2330,7 +2394,7 @@ let Selectic = class Selectic extends vtyx.Vue {
     /* }}} */
     /* {{{ Life cycle */
     created() {
-        var _a, _b;
+        var _a, _b, _c;
         this._elementsListeners = [];
         this.store = new SelecticStore({
             options: this.options,
@@ -2343,8 +2407,7 @@ let Selectic = class Selectic extends vtyx.Vue {
             params: {
                 multiple: ((_a = this.multiple) !== null && _a !== void 0 ? _a : false) !== false,
                 pageSize: this.params.pageSize || 100,
-                hideFilter: this.params.hideFilter !== undefined
-                    ? this.params.hideFilter : 'auto',
+                hideFilter: (_b = this.params.hideFilter) !== null && _b !== void 0 ? _b : 'auto',
                 allowRevert: this.params.allowRevert,
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
@@ -2359,7 +2422,7 @@ let Selectic = class Selectic extends vtyx.Vue {
                 formatSelection: this.params.formatSelection,
                 listPosition: this.params.listPosition || 'auto',
                 optionBehavior: this.params.optionBehavior,
-                isOpen: ((_b = this.open) !== null && _b !== void 0 ? _b : false) !== false,
+                isOpen: ((_c = this.open) !== null && _c !== void 0 ? _c : false) !== false,
             },
             fetchCallback: this.params.fetchCallback,
             getItemsCallback: this.params.getItemsCallback,
@@ -2418,7 +2481,7 @@ let Selectic = class Selectic extends vtyx.Vue {
                     blur: this.checkFocus,
                 } }),
             vtyx.h(MainInput$1, { store: store, id: id, on: {
-                    'item:click': (id) => this.emit('item:click', id, this),
+                    'item:click': (id) => this.emit('item:click', id),
                 }, ref: "mainInput" }),
             this.isFocused && (vtyx.h(ExtendedList$1, { class: this.className, store: store, elementBottom: this.elementBottom, elementTop: this.elementTop, elementLeft: this.elementLeft, elementRight: this.elementRight, width: this.width, ref: "extendedList" }))));
     }
@@ -2505,10 +2568,19 @@ __decorate([
 __decorate([
     vtyx.Watch('store.state.internalValue')
 ], 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')
+], Selectic.prototype, "render", null);
 Selectic = __decorate([
     vtyx.Component
 ], Selectic);
 var Selectic$1 = Selectic;
 
 exports.changeTexts = changeTexts;
-exports['default'] = Selectic$1;
+exports["default"] = Selectic$1;