selectic 3.0.0 → 3.0.4

package/dist/selectic.esm.js

@@ -1,5 +1,5 @@
-import { Prop, Watch, Component, Vue, h } from 'vtyx';
-import { reactive, computed, watch } from 'vue';
+import { Prop, Watch, Component, Vue, h, Emit } from 'vtyx';
+import { reactive, computed, unref, watch } from 'vue';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -103,6 +103,7 @@ class SelecticStore {
             disabled: false,
             placeholder: '',
             hideFilter: false,
+            keepFilterOpen: false,
             allowRevert: undefined,
             allowClearSelection: false,
             autoSelect: true,
@@ -132,6 +133,8 @@ class SelecticStore {
                 errorMessage: '',
                 areAllSelected: false,
                 hasChanged: false,
+                automaticChange: false,
+                automaticClose: false,
             },
         });
         /* Do not need reactivity */
@@ -184,22 +187,33 @@ class SelecticStore {
             return this.state.filteredOptions.length >= nbItems;
         });
         this.hasFetchedAllItems = computed(() => {
-            var _a;
-            const isPartial = (_a = this.isPartial.value) !== null && _a !== void 0 ? _a : this.isPartial;
+            const isPartial = unref(this.isPartial);
             if (!isPartial) {
                 return true;
             }
             const state = this.state;
             return state.dynOptions.length === state.totalDynOptions;
         });
+        this.listOptions = computed(() => {
+            return this.getListOptions();
+        });
+        this.elementOptions = computed(() => {
+            return this.getElementOptions();
+        });
         /* }}} */
         /* {{{ watch */
         watch(() => [this.props.options, this.props.childOptions], () => {
             this.data.cacheItem.clear();
+            this.setAutomaticClose();
             this.commit('isOpen', false);
             this.buildAllOptions(true);
             this.buildSelectedOptions();
         });
+        watch(() => [this.listOptions, this.elementOptions], () => {
+            /* TODO: transform allOptions as a computed properties and this
+             * watcher become useless */
+            this.buildAllOptions(true);
+        });
         watch(() => this.props.value, () => {
             var _a;
             const value = (_a = this.props.value) !== null && _a !== void 0 ? _a : null;
@@ -212,9 +226,8 @@ class SelecticStore {
             this.commit('disabled', this.props.disabled);
         });
         watch(() => this.state.filteredOptions, () => {
-            var _a;
             let areAllSelected = false;
-            const hasAllItems = (_a = this.hasAllItems.value) !== null && _a !== void 0 ? _a : this.hasAllItems;
+            const hasAllItems = unref(this.hasAllItems);
             if (hasAllItems) {
                 const selectionIsExcluded = +this.state.selectionIsExcluded;
                 /* eslint-disable-next-line no-bitwise */
@@ -234,6 +247,7 @@ class SelecticStore {
         });
         /* }}} */
         this.closeSelectic = () => {
+            this.setAutomaticClose();
             this.commit('isOpen', false);
         };
         const value = this.props.value;
@@ -247,9 +261,16 @@ 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, {
-            internalValue: value,
+        assignObject(this.state, stateParam);
+        /* XXX: should be done in 2 lines, in order to set the multiple state
+         * and ensure convertValue run with correct state */
+        assignObject(this.state, {
+            internalValue: this.convertTypeValue(value),
             selectionIsExcluded: props.selectionIsExcluded,
             disabled: props.disabled,
         });
@@ -319,11 +340,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)) {
@@ -366,10 +396,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 = unref(this.isPartial);
         /* Check that item is not disabled */
         if (!isPartial) {
             const item = state.allOptions.find((opt) => opt.id === id);
@@ -422,6 +451,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;
         }
@@ -430,11 +463,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 = unref(this.hasAllItems);
         if (!hasAllItems) {
             const labels = this.data.labels;
             if (this.state.searchText) {
@@ -467,8 +499,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 = unref(this.isPartial);
         const total = isPartial ? Infinity : 0;
         this.data.cacheItem.clear();
         this.state.allOptions = [];
@@ -513,39 +544,46 @@ class SelecticStore {
         }
         return this.state.filteredOptions.find(findId) ||
             this.state.dynOptions.find(findId) ||
-            this.getListOptions().find(findId) ||
-            this.getElementOptions().find(findId);
+            unref(this.listOptions).find(findId) ||
+            unref(this.elementOptions).find(findId);
     }
-    assertValueType() {
+    convertTypeValue(oldValue) {
         const state = this.state;
-        const internalValue = state.internalValue;
         const isMultiple = state.multiple;
-        let newValue = internalValue;
+        let newValue = oldValue;
         if (isMultiple) {
-            if (!Array.isArray(internalValue)) {
-                newValue = internalValue === null ? [] : [internalValue];
+            if (!Array.isArray(oldValue)) {
+                newValue = oldValue === null ? [] : [oldValue];
             }
         }
         else {
-            if (Array.isArray(internalValue)) {
-                const value = internalValue[0];
+            if (Array.isArray(oldValue)) {
+                const value = oldValue[0];
                 newValue = typeof value === 'undefined' ? null : value;
             }
         }
-        state.internalValue = newValue;
+        return newValue;
+    }
+    assertValueType() {
+        const state = this.state;
+        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;
         const selectionIsExcluded = state.selectionIsExcluded;
         const isMultiple = state.multiple;
         const checkStrict = state.strictValue;
         let newValue = internalValue;
-        const isPartial = (_a = this.isPartial.value) !== null && _a !== void 0 ? _a : this.isPartial;
-        this.assertValueType();
+        const isPartial = unref(this.isPartial);
         if (isMultiple) {
-            const hasFetchedAllItems = (_b = this.hasFetchedAllItems.value) !== null && _b !== void 0 ? _b : this.hasFetchedAllItems;
+            const hasFetchedAllItems = unref(this.hasFetchedAllItems);
             if (selectionIsExcluded && hasFetchedAllItems) {
                 newValue = state.allOptions.reduce((values, option) => {
                     const id = option.id;
@@ -573,7 +611,7 @@ class SelecticStore {
                     return;
                 }
             }
-            else if (!this.hasItemInStore(newValue)) {
+            else if (newValue !== null && !this.hasItemInStore(newValue)) {
                 filteredValue = null;
                 isDifferent = true;
                 if (isPartial && !applyStrict) {
@@ -583,6 +621,7 @@ class SelecticStore {
                 }
             }
             if (isDifferent) {
+                this.setAutomaticChange();
                 newValue = filteredValue;
             }
         }
@@ -602,13 +641,14 @@ class SelecticStore {
             this.state.groups.set(group.id, group.text);
         });
     }
-    /* XXX: This is not a computed property to avoid consuming more memory */
+    /* This method is for the computed property listOptions */
     getListOptions() {
         const options = this.props.options;
         const listOptions = [];
         if (!Array.isArray(options)) {
             return listOptions;
         }
+        const state = this.state;
         options.forEach((option) => {
             /* manage simple string */
             if (typeof option === 'string') {
@@ -621,13 +661,13 @@ class SelecticStore {
             const group = option.group;
             const subOptions = option.options;
             /* check for groups */
-            if (group && !this.state.groups.has(group)) {
-                this.state.groups.set(group, String(group));
+            if (group && !state.groups.has(group)) {
+                state.groups.set(group, String(group));
             }
             /* check for sub options */
             if (subOptions) {
                 const groupId = option.id;
-                this.state.groups.set(groupId, option.text);
+                state.groups.set(groupId, option.text);
                 subOptions.forEach((subOpt) => {
                     subOpt.group = groupId;
                 });
@@ -638,24 +678,25 @@ class SelecticStore {
         });
         return listOptions;
     }
-    /* XXX: This is not a computed property to avoid consuming more memory */
+    /* This method is for the computed property elementOptions */
     getElementOptions() {
         const options = this.props.childOptions;
         const childOptions = [];
         if (!Array.isArray(options) || options.length === 0) {
             return childOptions;
         }
+        const state = this.state;
         options.forEach((option) => {
             const group = option.group;
             const subOptions = option.options;
             /* check for groups */
-            if (group && !this.state.groups.has(group)) {
-                this.state.groups.set(group, String(group));
+            if (group && !state.groups.has(group)) {
+                state.groups.set(group, String(group));
             }
             /* check for sub options */
             if (subOptions) {
                 const groupId = option.id;
-                this.state.groups.set(groupId, option.text);
+                state.groups.set(groupId, option.text);
                 const sOpts = subOptions.map((subOpt) => {
                     return Object.assign({}, subOpt, {
                         group: groupId,
@@ -669,13 +710,12 @@ class SelecticStore {
         return childOptions;
     }
     buildAllOptions(keepFetched = false) {
-        var _a;
         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 = unref(this.isPartial);
         const arrayFromOrder = (orderValue) => {
             switch (orderValue) {
                 case 'O': return listOptions;
@@ -701,8 +741,8 @@ class SelecticStore {
                 this.state.totalDynOptions = 0;
             }
         }
-        listOptions = this.getListOptions();
-        elementOptions = this.getElementOptions();
+        listOptions = unref(this.listOptions);
+        elementOptions = unref(this.elementOptions);
         if (this.state.optionBehaviorOperation === 'force') {
             const orderValue = optionBehaviorOrder.find((value) => lengthFromOrder(value) > 0);
             allOptions.push(...arrayFromOrder(orderValue));
@@ -748,7 +788,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;
@@ -758,12 +797,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 = 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 = unref(this.hasFetchedAllItems);
         /* Check if all options have been fetched */
         if (hasFetchedAllItems) {
             if (!search) {
@@ -778,7 +817,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 = unref(this.marginSize);
         const endIndex = offsetItem + marginSize;
         if (endIndex <= filteredOptionsLength) {
             return;
@@ -786,7 +825,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 = unref(this.isPartial);
             if (isPartial && this.state.totalDynOptions === Infinity) {
                 this.fetchData();
             }
@@ -804,54 +843,56 @@ class SelecticStore {
     }
     async buildSelectedOptions() {
         const internalValue = this.state.internalValue;
-        if (this.state.multiple) {
+        const state = this.state;
+        if (state.multiple) {
             /* display partial information about selected items */
-            this.state.selectedOptions = this.buildSelectedItems(internalValue);
+            state.selectedOptions = this.buildSelectedItems(internalValue);
             const items = await this.getItems(internalValue).catch(() => []);
-            if (internalValue !== this.state.internalValue) {
+            if (internalValue !== state.internalValue) {
                 /* Values have been deprecated */
                 return;
             }
             if (items.length !== internalValue.length) {
-                if (!this.state.strictValue) {
-                    const updatedItems = this.state.selectedOptions.map((option) => {
+                if (!state.strictValue) {
+                    const updatedItems = state.selectedOptions.map((option) => {
                         const foundItem = items.find((item) => item.id === option.id);
                         return foundItem || option;
                     });
-                    this.state.selectedOptions = updatedItems;
+                    state.selectedOptions = updatedItems;
                 }
                 else {
                     const itemIds = items.map((item) => item.id);
+                    this.setAutomaticChange();
                     this.commit('internalValue', itemIds);
                 }
                 return;
             }
             /* display full information about selected items */
-            this.state.selectedOptions = items;
+            state.selectedOptions = items;
         }
         else if (internalValue === null) {
-            this.state.selectedOptions = null;
+            state.selectedOptions = null;
         }
         else {
             /* display partial information about selected items */
-            this.state.selectedOptions = this.buildSelectedItems([internalValue])[0];
+            state.selectedOptions = this.buildSelectedItems([internalValue])[0];
             const items = await this.getItems([internalValue]).catch(() => []);
-            if (internalValue !== this.state.internalValue) {
+            if (internalValue !== state.internalValue) {
                 /* Values have been deprecated */
                 return;
             }
             if (!items.length) {
-                if (this.state.strictValue) {
+                if (state.strictValue) {
+                    this.setAutomaticChange();
                     this.commit('internalValue', null);
                 }
                 return;
             }
             /* display full information about selected items */
-            this.state.selectedOptions = items[0];
+            state.selectedOptions = items[0];
         }
     }
     async fetchData() {
-        var _a;
         const state = this.state;
         const labels = this.data.labels;
         const fetchCallback = this.props.fetchCallback;
@@ -863,7 +904,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 = unref(this.marginSize);
         const endIndex = offsetItem + marginSize;
         const dynOffset = this.data.dynOffset;
         /* Run the query */
@@ -954,10 +995,10 @@ class SelecticStore {
             }
             switch (order) {
                 case 'O':
-                    options = this.filterOptions(this.getListOptions(), search);
+                    options = this.filterOptions(unref(this.listOptions), search);
                     break;
                 case 'E':
-                    options = this.filterOptions(this.getElementOptions(), search);
+                    options = this.filterOptions(unref(this.elementOptions), search);
                     break;
             }
             this.state.filteredOptions.push(...options);
@@ -1063,11 +1104,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 = 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 = unref(this.hasFetchedAllItems);
         if (doNotCheck || !hasFetchedAllItems) {
             return;
         }
@@ -1080,7 +1120,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 {
@@ -1088,13 +1131,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 = unref(this.isPartial);
         if (state.multiple || isPartial) {
             state.hideFilter = false;
         }
@@ -1384,12 +1426,12 @@ let FilterPanel = class FilterPanel extends 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 && !unref(store.hasAllItems);
         return !isMultiple || hasItems || canNotSelect;
     }
     get disableRevert() {
         const store = this.store;
-        return !store.state.multiple || !store.hasFetchedAllItems.value;
+        return !store.state.multiple || !unref(store.hasFetchedAllItems);
     }
     get enableRevert() {
         const state = this.store.state;
@@ -1427,6 +1469,10 @@ let FilterPanel = class FilterPanel extends Vue {
         this.store.commit('selectionIsExcluded', !this.selectionIsExcluded);
     }
     togglePanel() {
+        if (this.store.state.keepFilterOpen === true) {
+            this.closed = false;
+            return;
+        }
         this.closed = !this.closed;
     }
     getFocus() {
@@ -1443,7 +1489,8 @@ let FilterPanel = class FilterPanel extends 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();
     }
@@ -1452,24 +1499,27 @@ let FilterPanel = class FilterPanel extends Vue {
     }
     /* }}} */
     render() {
+        const store = this.store;
+        const state = store.state;
+        const labels = store.data.labels;
         return (h("div", { class: "filter-panel" },
             h("div", { class: {
                     panelclosed: this.closed,
                     panelopened: !this.closed,
                 } },
                 h("div", { class: "filter-panel__input form-group has-feedback" },
-                    h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: this.store.state.searchText, on: {
+                    h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: state.searchText, on: {
                             'input.stop.prevent': this.onInput,
                         }, ref: "filterInput" }),
                     h("span", { class: "fa fa-search selectic-search-scope\n                                     form-control-feedback" })),
-                this.store.state.multiple && (h("div", { class: "toggle-selectic" },
+                state.multiple && (h("div", { class: "toggle-selectic" },
                     h("label", { class: ['control-label', {
                                 'selectic__label-disabled': this.disableSelectAll,
                             }] },
-                        h("input", { type: "checkbox", checked: this.store.state.status.areAllSelected, disabled: this.disableSelectAll, on: {
+                        h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, on: {
                                 change: this.onSelectAll,
                             } }),
-                        this.store.data.labels.selectAll))),
+                        labels.selectAll))),
                 this.enableRevert && (h("div", { class: ['toggle-selectic', {
                             'selectic__label-disabled': this.disableRevert,
                         }] },
@@ -1477,8 +1527,8 @@ let FilterPanel = class FilterPanel extends Vue {
                         h("input", { type: "checkbox", checked: this.selectionIsExcluded, disabled: this.disableRevert, on: {
                                 change: this.onExclude,
                             } }),
-                        this.store.data.labels.excludeResult)))),
-            h("div", { class: "curtain-handler", on: {
+                        labels.excludeResult)))),
+            !state.keepFilterOpen && (h("div", { class: "curtain-handler", on: {
                     'click.prevent.stop': this.togglePanel,
                 } },
                 h("span", { class: "fa fa-search" }),
@@ -1486,7 +1536,7 @@ let FilterPanel = class FilterPanel extends Vue {
                         'fa': true,
                         'fa-caret-down': this.closed,
                         'fa-caret-up': !this.closed,
-                    } }))));
+                    } })))));
     }
 };
 __decorate$3([
@@ -1528,9 +1578,8 @@ let List = class List extends 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 unref(this.store.marginSize);
     }
     get shortOptions() {
         const endIndex = this.endIndex;
@@ -2120,7 +2169,7 @@ let Selectic = class Selectic extends 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();
@@ -2128,7 +2177,7 @@ let Selectic = class Selectic extends Vue {
                 this.$emit('change', this.getValue(), state.selectionIsExcluded, this);
                 this.store.resetChange();
             }
-            this.$emit('close', this);
+            this.emit('close');
         }
     }
     compareValues(oldValue, newValue) {
@@ -2158,7 +2207,7 @@ let Selectic = class Selectic extends Vue {
         this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
     onOptionsChange() {
-        this.store.props.options = this.options;
+        this.store.props.options = Array.from(this.options);
     }
     onTextsChange() {
         const texts = this.texts;
@@ -2191,9 +2240,9 @@ let Selectic = class Selectic extends 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();
             }
         }
@@ -2216,12 +2265,42 @@ let Selectic = class Selectic extends 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) {
@@ -2300,7 +2379,7 @@ let Selectic = class Selectic extends Vue {
     /* }}} */
     /* {{{ Life cycle */
     created() {
-        var _a, _b;
+        var _a, _b, _c;
         this._elementsListeners = [];
         this.store = new SelecticStore({
             options: this.options,
@@ -2313,8 +2392,7 @@ let Selectic = class Selectic extends 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
@@ -2329,7 +2407,7 @@ let Selectic = class Selectic extends 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,
@@ -2388,7 +2466,7 @@ let Selectic = class Selectic extends Vue {
                     blur: this.checkFocus,
                 } }),
             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 && (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" }))));
     }
@@ -2475,6 +2553,15 @@ __decorate([
 __decorate([
     Watch('store.state.internalValue')
 ], Selectic.prototype, "onInternalValueChange", null);
+__decorate([
+    Emit('input'),
+    Emit('change'),
+    Emit('open'),
+    Emit('focus'),
+    Emit('close'),
+    Emit('blur'),
+    Emit('item:click')
+], Selectic.prototype, "render", null);
 Selectic = __decorate([
     Component
 ], Selectic);