@syncfusion/ej2-vue-dropdowns 20.4.54 → 21.1.35

package/dist/es6/ej2-vue-dropdowns.es2015.js

@@ -1,14 +1,7 @@
 import { AutoComplete, ComboBox, DropDownList, DropDownTree, ListBox, Mention, MultiSelect } from '@syncfusion/ej2-dropdowns';
+import { ComponentBase, getProps, gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
 import { getValue, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
-import { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties = ['isLazyUpdate', 'plugins', 'actionFailureTemplate', 'allowFiltering', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'floatLabelType', 'footerTemplate', 'groupTemplate', 'headerTemplate', 'htmlAttributes', 'ignoreAccent', 'ignoreCase', 'index', 'itemTemplate', 'locale', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'sortOrder', 'text', 'value', 'valueTemplate', 'width', 'zIndex', 'actionBegin', 'actionComplete', 'actionFailure', 'beforeOpen', 'blur', 'change', 'close', 'created', 'dataBound', 'destroyed', 'filtering', 'focus', 'open', 'select'];
 const modelProps = ['value'];
 const testProp = getProps({ props: properties });
@@ -25,28 +18,28 @@ for (let props of modelProps) {
  * <ejs-dropdownlist :dataSource='data'></ejs-dropdownlist>
  * ```
  */
-let DropDownListComponent = 
-/* Start Options({
+let DropDownListComponent = vueDefineComponent({
+    name: 'DropDownListComponent',
+    mixins: [ComponentBase],
     props: props,
     watch: watch,
     emits: emitProbs,
-    provide: function provide() {
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new DropDownList({}),
+            propKeys: properties,
+            models: modelProps,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class DropDownListComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties;
-        this.models = modelProps;
-        this.hasChildDirective = false;
-        this.hasInjectedModules = false;
-        this.tagMapper = {};
-        this.tagNameMapper = {};
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new DropDownList({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -54,154 +47,138 @@ class DropDownListComponent extends ComponentBase {
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+    },
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('input', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
                         }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
+                    });
+                });
+            }
+        },
+        trigger(eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
                         }
                     }
-                });
-            });
-        }
-    }
-    trigger(eventName, eventProp, successHandler) {
-        if (!isExecute) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/checked|value/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 }
-                else {
-                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
                         this.$emit('update:' + propKey, eventProp[propKey]);
                         this.$emit('modelchanged', eventProp[propKey]);
                     }
                 }
             }
-        }
-        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/currentView|selectedDate/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                }
-                else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
-                }
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
             }
-        }
-        if ((this.ej2Instances && this.ej2Instances._trigger)) {
-            this.ej2Instances._trigger(eventName, eventProp, successHandler);
-        }
-    }
-    render(createElement) {
-        let h = !isExecute ? gh : createElement;
-        let slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('input', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    addItem(items, itemIndex) {
-        return this.ej2Instances.addItem(items, itemIndex);
-    }
-    clear() {
-        return this.ej2Instances.clear();
-    }
-    filter(dataSource, query, fields) {
-        return this.ej2Instances.filter(dataSource, query, fields);
-    }
-    focusIn(e) {
-        return this.ej2Instances.focusIn(e);
-    }
-    focusOut(e) {
-        return this.ej2Instances.focusOut(e);
-    }
-    getDataByValue(value) {
-        return this.ej2Instances.getDataByValue(value);
-    }
-    getItems() {
-        return this.ej2Instances.getItems();
-    }
-    hidePopup(e) {
-        return this.ej2Instances.hidePopup(e);
-    }
-    hideSpinner() {
-        return this.ej2Instances.hideSpinner();
-    }
-    showPopup(e) {
-        return this.ej2Instances.showPopup(e);
-    }
-    showSpinner() {
-        return this.ej2Instances.showSpinner();
-    }
-};
-DropDownListComponent = __decorate([
-    EJComponentDecorator({
-        props: properties,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], DropDownListComponent);
+        },
+        custom() {
+            this.updated();
+        },
+        addItem(items, itemIndex) {
+            return this.ej2Instances.addItem(items, itemIndex);
+        },
+        clear() {
+            return this.ej2Instances.clear();
+        },
+        filter(dataSource, query, fields) {
+            return this.ej2Instances.filter(dataSource, query, fields);
+        },
+        focusIn(e) {
+            return this.ej2Instances.focusIn(e);
+        },
+        focusOut(e) {
+            return this.ej2Instances.focusOut(e);
+        },
+        getDataByValue(value) {
+            return this.ej2Instances.getDataByValue(value);
+        },
+        getItems() {
+            return this.ej2Instances.getItems();
+        },
+        hidePopup(e) {
+            return this.ej2Instances.hidePopup(e);
+        },
+        hideSpinner() {
+            return this.ej2Instances.hideSpinner();
+        },
+        showPopup(e) {
+            return this.ej2Instances.showPopup(e);
+        },
+        showSpinner() {
+            return this.ej2Instances.showSpinner();
+        },
+    }
+});
 const DropDownListPlugin = {
     name: 'ejs-dropdownlist',
     install(Vue) {
@@ -209,13 +186,6 @@ const DropDownListPlugin = {
     }
 };
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties$1 = ['isLazyUpdate', 'plugins', 'actionFailureTemplate', 'allowCustom', 'allowFiltering', 'autofill', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'floatLabelType', 'footerTemplate', 'groupTemplate', 'headerTemplate', 'htmlAttributes', 'ignoreAccent', 'ignoreCase', 'index', 'itemTemplate', 'locale', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'sortOrder', 'text', 'value', 'valueTemplate', 'width', 'zIndex', 'actionBegin', 'actionComplete', 'actionFailure', 'beforeOpen', 'blur', 'change', 'close', 'created', 'customValueSpecifier', 'dataBound', 'destroyed', 'filtering', 'focus', 'open', 'select'];
 const modelProps$1 = ['value'];
 const testProp$1 = getProps({ props: properties$1 });
@@ -232,28 +202,28 @@ for (let props of modelProps$1) {
  * <ejs-combobox :dataSource='data'></ejs-combobox>
  * ```
  */
-let ComboBoxComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let ComboBoxComponent = vueDefineComponent({
+    name: 'ComboBoxComponent',
+    mixins: [ComponentBase],
+    props: props$1,
+    watch: watch$1,
+    emits: emitProbs$1,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new ComboBox({}),
+            propKeys: properties$1,
+            models: modelProps$1,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class ComboBoxComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$1;
-        this.models = modelProps$1;
-        this.hasChildDirective = false;
-        this.hasInjectedModules = false;
-        this.tagMapper = {};
-        this.tagNameMapper = {};
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new ComboBox({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -261,154 +231,138 @@ class ComboBoxComponent extends ComponentBase {
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+    },
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('input', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
                         }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
+                    });
+                });
+            }
+        },
+        trigger(eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
                         }
                     }
-                });
-            });
-        }
-    }
-    trigger(eventName, eventProp, successHandler) {
-        if (!isExecute) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/checked|value/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 }
-                else {
-                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
                         this.$emit('update:' + propKey, eventProp[propKey]);
                         this.$emit('modelchanged', eventProp[propKey]);
                     }
                 }
             }
-        }
-        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/currentView|selectedDate/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                }
-                else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
-                }
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
             }
-        }
-        if ((this.ej2Instances && this.ej2Instances._trigger)) {
-            this.ej2Instances._trigger(eventName, eventProp, successHandler);
-        }
-    }
-    render(createElement) {
-        let h = !isExecute ? gh : createElement;
-        let slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('input', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    addItem(items, itemIndex) {
-        return this.ej2Instances.addItem(items, itemIndex);
-    }
-    clear() {
-        return this.ej2Instances.clear();
-    }
-    filter(dataSource, query, fields) {
-        return this.ej2Instances.filter(dataSource, query, fields);
-    }
-    focusIn() {
-        return this.ej2Instances.focusIn();
-    }
-    focusOut(e) {
-        return this.ej2Instances.focusOut(e);
-    }
-    getDataByValue(value) {
-        return this.ej2Instances.getDataByValue(value);
-    }
-    getItems() {
-        return this.ej2Instances.getItems();
-    }
-    hidePopup(e) {
-        return this.ej2Instances.hidePopup(e);
-    }
-    hideSpinner() {
-        return this.ej2Instances.hideSpinner();
-    }
-    showPopup(e) {
-        return this.ej2Instances.showPopup(e);
-    }
-    showSpinner() {
-        return this.ej2Instances.showSpinner();
-    }
-};
-ComboBoxComponent = __decorate$1([
-    EJComponentDecorator({
-        props: properties$1,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], ComboBoxComponent);
+        },
+        custom() {
+            this.updated();
+        },
+        addItem(items, itemIndex) {
+            return this.ej2Instances.addItem(items, itemIndex);
+        },
+        clear() {
+            return this.ej2Instances.clear();
+        },
+        filter(dataSource, query, fields) {
+            return this.ej2Instances.filter(dataSource, query, fields);
+        },
+        focusIn() {
+            return this.ej2Instances.focusIn();
+        },
+        focusOut(e) {
+            return this.ej2Instances.focusOut(e);
+        },
+        getDataByValue(value) {
+            return this.ej2Instances.getDataByValue(value);
+        },
+        getItems() {
+            return this.ej2Instances.getItems();
+        },
+        hidePopup(e) {
+            return this.ej2Instances.hidePopup(e);
+        },
+        hideSpinner() {
+            return this.ej2Instances.hideSpinner();
+        },
+        showPopup(e) {
+            return this.ej2Instances.showPopup(e);
+        },
+        showSpinner() {
+            return this.ej2Instances.showSpinner();
+        },
+    }
+});
 const ComboBoxPlugin = {
     name: 'ejs-combobox',
     install(Vue) {
@@ -416,13 +370,6 @@ const ComboBoxPlugin = {
     }
 };
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties$2 = ['isLazyUpdate', 'plugins', 'actionFailureTemplate', 'allowCustom', 'allowFiltering', 'autofill', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'floatLabelType', 'footerTemplate', 'groupTemplate', 'headerTemplate', 'highlight', 'htmlAttributes', 'ignoreAccent', 'ignoreCase', 'index', 'itemTemplate', 'locale', 'minLength', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'showPopupButton', 'sortOrder', 'suggestionCount', 'text', 'value', 'valueTemplate', 'width', 'zIndex', 'actionBegin', 'actionComplete', 'actionFailure', 'beforeOpen', 'blur', 'change', 'close', 'created', 'customValueSpecifier', 'dataBound', 'destroyed', 'filtering', 'focus', 'open', 'select'];
 const modelProps$2 = ['value'];
 const testProp$2 = getProps({ props: properties$2 });
@@ -439,28 +386,28 @@ for (let props of modelProps$2) {
  * <ejs-autocomplete :dataSource='data'></ejs-autocomplete>
  * ```
  */
-let AutoCompleteComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let AutoCompleteComponent = vueDefineComponent({
+    name: 'AutoCompleteComponent',
+    mixins: [ComponentBase],
+    props: props$2,
+    watch: watch$2,
+    emits: emitProbs$2,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new AutoComplete({}),
+            propKeys: properties$2,
+            models: modelProps$2,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class AutoCompleteComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$2;
-        this.models = modelProps$2;
-        this.hasChildDirective = false;
-        this.hasInjectedModules = false;
-        this.tagMapper = {};
-        this.tagNameMapper = {};
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new AutoComplete({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -468,154 +415,138 @@ class AutoCompleteComponent extends ComponentBase {
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+    },
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('input', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
                         }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
+                    });
+                });
+            }
+        },
+        trigger(eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
                         }
                     }
-                });
-            });
-        }
-    }
-    trigger(eventName, eventProp, successHandler) {
-        if (!isExecute) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/checked|value/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 }
-                else {
-                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
                         this.$emit('update:' + propKey, eventProp[propKey]);
                         this.$emit('modelchanged', eventProp[propKey]);
                     }
                 }
             }
-        }
-        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/currentView|selectedDate/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                }
-                else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
-                }
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
             }
-        }
-        if ((this.ej2Instances && this.ej2Instances._trigger)) {
-            this.ej2Instances._trigger(eventName, eventProp, successHandler);
-        }
-    }
-    render(createElement) {
-        let h = !isExecute ? gh : createElement;
-        let slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('input', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    addItem(items, itemIndex) {
-        return this.ej2Instances.addItem(items, itemIndex);
-    }
-    clear() {
-        return this.ej2Instances.clear();
-    }
-    filter(dataSource, query, fields) {
-        return this.ej2Instances.filter(dataSource, query, fields);
-    }
-    focusIn() {
-        return this.ej2Instances.focusIn();
-    }
-    focusOut(e) {
-        return this.ej2Instances.focusOut(e);
-    }
-    getDataByValue(value) {
-        return this.ej2Instances.getDataByValue(value);
-    }
-    getItems() {
-        return this.ej2Instances.getItems();
-    }
-    hidePopup(e) {
-        return this.ej2Instances.hidePopup(e);
-    }
-    hideSpinner() {
-        return this.ej2Instances.hideSpinner();
-    }
-    showPopup(e) {
-        return this.ej2Instances.showPopup(e);
-    }
-    showSpinner() {
-        return this.ej2Instances.showSpinner();
-    }
-};
-AutoCompleteComponent = __decorate$2([
-    EJComponentDecorator({
-        props: properties$2,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], AutoCompleteComponent);
+        },
+        custom() {
+            this.updated();
+        },
+        addItem(items, itemIndex) {
+            return this.ej2Instances.addItem(items, itemIndex);
+        },
+        clear() {
+            return this.ej2Instances.clear();
+        },
+        filter(dataSource, query, fields) {
+            return this.ej2Instances.filter(dataSource, query, fields);
+        },
+        focusIn() {
+            return this.ej2Instances.focusIn();
+        },
+        focusOut(e) {
+            return this.ej2Instances.focusOut(e);
+        },
+        getDataByValue(value) {
+            return this.ej2Instances.getDataByValue(value);
+        },
+        getItems() {
+            return this.ej2Instances.getItems();
+        },
+        hidePopup(e) {
+            return this.ej2Instances.hidePopup(e);
+        },
+        hideSpinner() {
+            return this.ej2Instances.hideSpinner();
+        },
+        showPopup(e) {
+            return this.ej2Instances.showPopup(e);
+        },
+        showSpinner() {
+            return this.ej2Instances.showSpinner();
+        },
+    }
+});
 const AutoCompletePlugin = {
     name: 'ejs-autocomplete',
     install(Vue) {
@@ -623,13 +554,6 @@ const AutoCompletePlugin = {
     }
 };
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties$3 = ['isLazyUpdate', 'plugins', 'actionFailureTemplate', 'addTagOnBlur', 'allowCustomValue', 'allowFiltering', 'changeOnBlur', 'closePopupOnSelect', 'cssClass', 'dataSource', 'delimiterChar', 'enableGroupCheckBox', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableSelectionOrder', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'floatLabelType', 'footerTemplate', 'groupTemplate', 'headerTemplate', 'hideSelectedItem', 'htmlAttributes', 'ignoreAccent', 'ignoreCase', 'itemTemplate', 'locale', 'maximumSelectionLength', 'mode', 'noRecordsTemplate', 'openOnClick', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'selectAllText', 'showClearButton', 'showDropDownIcon', 'showSelectAll', 'sortOrder', 'text', 'unSelectAllText', 'value', 'valueTemplate', 'width', 'zIndex', 'actionBegin', 'actionComplete', 'actionFailure', 'beforeOpen', 'beforeSelectAll', 'blur', 'change', 'chipSelection', 'close', 'created', 'customValueSelection', 'dataBound', 'destroyed', 'filtering', 'focus', 'open', 'removed', 'removing', 'select', 'selectedAll', 'tagging'];
 const modelProps$3 = ['value'];
 const testProp$3 = getProps({ props: properties$3 });
@@ -646,28 +570,28 @@ for (let props of modelProps$3) {
  * <ejs-multiselect :dataSource='data'></ejs-multiselect>
  * ```
  */
-let MultiSelectComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let MultiSelectComponent = vueDefineComponent({
+    name: 'MultiSelectComponent',
+    mixins: [ComponentBase],
+    props: props$3,
+    watch: watch$3,
+    emits: emitProbs$3,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new MultiSelect({}),
+            propKeys: properties$3,
+            models: modelProps$3,
+            hasChildDirective: false,
+            hasInjectedModules: true,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class MultiSelectComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$3;
-        this.models = modelProps$3;
-        this.hasChildDirective = false;
-        this.hasInjectedModules = true;
-        this.tagMapper = {};
-        this.tagNameMapper = {};
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new MultiSelect({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -675,160 +599,144 @@ class MultiSelectComponent extends ComponentBase {
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+    },
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('input', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
                         }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
+                    });
+                });
+            }
+        },
+        trigger(eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
                         }
                     }
-                });
-            });
-        }
-    }
-    trigger(eventName, eventProp, successHandler) {
-        if (!isExecute) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/checked|value/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 }
-                else {
-                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
                         this.$emit('update:' + propKey, eventProp[propKey]);
                         this.$emit('modelchanged', eventProp[propKey]);
                     }
                 }
             }
-        }
-        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/currentView|selectedDate/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                }
-                else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
-                }
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
             }
-        }
-        if ((this.ej2Instances && this.ej2Instances._trigger)) {
-            this.ej2Instances._trigger(eventName, eventProp, successHandler);
-        }
-    }
-    render(createElement) {
-        let h = !isExecute ? gh : createElement;
-        let slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('input', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    addItem(items, itemIndex) {
-        return this.ej2Instances.addItem(items, itemIndex);
-    }
-    clear() {
-        return this.ej2Instances.clear();
-    }
-    filter(dataSource, query, fields) {
-        return this.ej2Instances.filter(dataSource, query, fields);
-    }
-    focusIn() {
-        return this.ej2Instances.focusIn();
-    }
-    focusOut() {
-        return this.ej2Instances.focusOut();
-    }
-    getDataByValue(value) {
-        return this.ej2Instances.getDataByValue(value);
-    }
-    getItems() {
-        return this.ej2Instances.getItems();
-    }
-    hidePopup(e) {
-        return this.ej2Instances.hidePopup(e);
-    }
-    hideSpinner() {
-        return this.ej2Instances.hideSpinner();
-    }
-    requiredModules() {
-        return this.ej2Instances.requiredModules();
-    }
-    selectAll(state) {
-        return this.ej2Instances.selectAll(state);
-    }
-    showPopup(e) {
-        return this.ej2Instances.showPopup(e);
-    }
-    showSpinner() {
-        return this.ej2Instances.showSpinner();
-    }
-};
-MultiSelectComponent = __decorate$3([
-    EJComponentDecorator({
-        props: properties$3,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], MultiSelectComponent);
+        },
+        custom() {
+            this.updated();
+        },
+        addItem(items, itemIndex) {
+            return this.ej2Instances.addItem(items, itemIndex);
+        },
+        clear() {
+            return this.ej2Instances.clear();
+        },
+        filter(dataSource, query, fields) {
+            return this.ej2Instances.filter(dataSource, query, fields);
+        },
+        focusIn() {
+            return this.ej2Instances.focusIn();
+        },
+        focusOut() {
+            return this.ej2Instances.focusOut();
+        },
+        getDataByValue(value) {
+            return this.ej2Instances.getDataByValue(value);
+        },
+        getItems() {
+            return this.ej2Instances.getItems();
+        },
+        hidePopup(e) {
+            return this.ej2Instances.hidePopup(e);
+        },
+        hideSpinner() {
+            return this.ej2Instances.hideSpinner();
+        },
+        requiredModules() {
+            return this.ej2Instances.requiredModules();
+        },
+        selectAll(state) {
+            return this.ej2Instances.selectAll(state);
+        },
+        showPopup(e) {
+            return this.ej2Instances.showPopup(e);
+        },
+        showSpinner() {
+            return this.ej2Instances.showSpinner();
+        },
+    }
+});
 const MultiSelectPlugin = {
     name: 'ejs-multiselect',
     install(Vue) {
@@ -836,13 +744,6 @@ const MultiSelectPlugin = {
     }
 };
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties$4 = ['isLazyUpdate', 'plugins', 'actionFailureTemplate', 'allowDragAndDrop', 'allowFiltering', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'groupTemplate', 'height', 'ignoreAccent', 'ignoreCase', 'itemTemplate', 'locale', 'maximumSelectionLength', 'noRecordsTemplate', 'query', 'scope', 'selectionSettings', 'sortOrder', 'toolbarSettings', 'value', 'zIndex', 'actionBegin', 'actionComplete', 'actionFailure', 'beforeDrop', 'beforeItemRender', 'change', 'created', 'dataBound', 'destroyed', 'drag', 'dragStart', 'drop', 'filtering', 'select'];
 const modelProps$4 = ['value'];
 const testProp$4 = getProps({ props: properties$4 });
@@ -859,28 +760,28 @@ for (let props of modelProps$4) {
  * <ejs-listbox :dataSource='data'></ejs-listbox>
  * ```
  */
-let ListBoxComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let ListBoxComponent = vueDefineComponent({
+    name: 'ListBoxComponent',
+    mixins: [ComponentBase],
+    props: props$4,
+    watch: watch$4,
+    emits: emitProbs$4,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new ListBox({}),
+            propKeys: properties$4,
+            models: modelProps$4,
+            hasChildDirective: false,
+            hasInjectedModules: true,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class ListBoxComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$4;
-        this.models = modelProps$4;
-        this.hasChildDirective = false;
-        this.hasInjectedModules = true;
-        this.tagMapper = {};
-        this.tagNameMapper = {};
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new ListBox({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -888,178 +789,162 @@ class ListBoxComponent extends ComponentBase {
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+    },
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('input', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
                         }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
+                    });
+                });
+            }
+        },
+        trigger(eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
                         }
                     }
-                });
-            });
-        }
-    }
-    trigger(eventName, eventProp, successHandler) {
-        if (!isExecute) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/checked|value/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 }
-                else {
-                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
                         this.$emit('update:' + propKey, eventProp[propKey]);
                         this.$emit('modelchanged', eventProp[propKey]);
                     }
                 }
             }
-        }
-        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/currentView|selectedDate/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                }
-                else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
-                }
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
             }
-        }
-        if ((this.ej2Instances && this.ej2Instances._trigger)) {
-            this.ej2Instances._trigger(eventName, eventProp, successHandler);
-        }
-    }
-    render(createElement) {
-        let h = !isExecute ? gh : createElement;
-        let slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('input', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    addItems(items, itemIndex) {
-        return this.ej2Instances.addItems(items, itemIndex);
-    }
-    enableItems(items, enable, isValue) {
-        return this.ej2Instances.enableItems(items, enable, isValue);
-    }
-    filter(dataSource, query, fields) {
-        return this.ej2Instances.filter(dataSource, query, fields);
-    }
-    getDataByValue(value) {
-        return this.ej2Instances.getDataByValue(value);
-    }
-    getDataByValues(value) {
-        return this.ej2Instances.getDataByValues(value);
-    }
-    getDataList() {
-        return this.ej2Instances.getDataList();
-    }
-    getItems() {
-        return this.ej2Instances.getItems();
-    }
-    getSortedList() {
-        return this.ej2Instances.getSortedList();
-    }
-    hideSpinner() {
-        return this.ej2Instances.hideSpinner();
-    }
-    moveAllTo(targetId, index) {
-        return this.ej2Instances.moveAllTo(targetId, index);
-    }
-    moveDown(value) {
-        return this.ej2Instances.moveDown(value);
-    }
-    moveTo(value, index, targetId) {
-        return this.ej2Instances.moveTo(value, index, targetId);
-    }
-    moveUp(value) {
-        return this.ej2Instances.moveUp(value);
-    }
-    removeItem(items, itemIndex) {
-        return this.ej2Instances.removeItem(items, itemIndex);
-    }
-    removeItems(items, itemIndex) {
-        return this.ej2Instances.removeItems(items, itemIndex);
-    }
-    requiredModules() {
-        return this.ej2Instances.requiredModules();
-    }
-    selectAll(state) {
-        return this.ej2Instances.selectAll(state);
-    }
-    selectItems(items, state, isValue) {
-        return this.ej2Instances.selectItems(items, state, isValue);
-    }
-    showSpinner() {
-        return this.ej2Instances.showSpinner();
-    }
-};
-ListBoxComponent = __decorate$4([
-    EJComponentDecorator({
-        props: properties$4,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], ListBoxComponent);
+        },
+        custom() {
+            this.updated();
+        },
+        addItems(items, itemIndex) {
+            return this.ej2Instances.addItems(items, itemIndex);
+        },
+        enableItems(items, enable, isValue) {
+            return this.ej2Instances.enableItems(items, enable, isValue);
+        },
+        filter(dataSource, query, fields) {
+            return this.ej2Instances.filter(dataSource, query, fields);
+        },
+        getDataByValue(value) {
+            return this.ej2Instances.getDataByValue(value);
+        },
+        getDataByValues(value) {
+            return this.ej2Instances.getDataByValues(value);
+        },
+        getDataList() {
+            return this.ej2Instances.getDataList();
+        },
+        getItems() {
+            return this.ej2Instances.getItems();
+        },
+        getSortedList() {
+            return this.ej2Instances.getSortedList();
+        },
+        hideSpinner() {
+            return this.ej2Instances.hideSpinner();
+        },
+        moveAllTo(targetId, index) {
+            return this.ej2Instances.moveAllTo(targetId, index);
+        },
+        moveDown(value) {
+            return this.ej2Instances.moveDown(value);
+        },
+        moveTo(value, index, targetId) {
+            return this.ej2Instances.moveTo(value, index, targetId);
+        },
+        moveUp(value) {
+            return this.ej2Instances.moveUp(value);
+        },
+        removeItem(items, itemIndex) {
+            return this.ej2Instances.removeItem(items, itemIndex);
+        },
+        removeItems(items, itemIndex) {
+            return this.ej2Instances.removeItems(items, itemIndex);
+        },
+        requiredModules() {
+            return this.ej2Instances.requiredModules();
+        },
+        selectAll(state) {
+            return this.ej2Instances.selectAll(state);
+        },
+        selectItems(items, state, isValue) {
+            return this.ej2Instances.selectItems(items, state, isValue);
+        },
+        showSpinner() {
+            return this.ej2Instances.showSpinner();
+        },
+    }
+});
 const ListBoxPlugin = {
     name: 'ejs-listbox',
     install(Vue) {
@@ -1067,13 +952,6 @@ const ListBoxPlugin = {
     }
 };
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties$5 = ['isLazyUpdate', 'plugins', 'actionFailureTemplate', 'allowFiltering', 'allowMultiSelection', 'changeOnBlur', 'cssClass', 'customTemplate', 'delimiterChar', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'floatLabelType', 'footerTemplate', 'headerTemplate', 'htmlAttributes', 'ignoreAccent', 'ignoreCase', 'itemTemplate', 'locale', 'mode', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'readonly', 'selectAllText', 'showCheckBox', 'showClearButton', 'showDropDownIcon', 'showSelectAll', 'sortOrder', 'text', 'treeSettings', 'unSelectAllText', 'value', 'width', 'wrapText', 'zIndex', 'actionFailure', 'beforeOpen', 'blur', 'change', 'close', 'created', 'dataBound', 'destroyed', 'filtering', 'focus', 'keyPress', 'open', 'select'];
 const modelProps$5 = ['value'];
 const testProp$5 = getProps({ props: properties$5 });
@@ -1090,28 +968,28 @@ for (let props of modelProps$5) {
  * <ejs-dropdowntree></ejs-dropdowntree>
  * ```
  */
-let DropDownTreeComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let DropDownTreeComponent = vueDefineComponent({
+    name: 'DropDownTreeComponent',
+    mixins: [ComponentBase],
+    props: props$5,
+    watch: watch$5,
+    emits: emitProbs$5,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new DropDownTree({}),
+            propKeys: properties$5,
+            models: modelProps$5,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class DropDownTreeComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$5;
-        this.models = modelProps$5;
-        this.hasChildDirective = false;
-        this.hasInjectedModules = false;
-        this.tagMapper = {};
-        this.tagNameMapper = {};
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new DropDownTree({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -1119,142 +997,126 @@ class DropDownTreeComponent extends ComponentBase {
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+    },
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('input', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
                         }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
+                    });
+                });
+            }
+        },
+        trigger(eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
                         }
                     }
-                });
-            });
-        }
-    }
-    trigger(eventName, eventProp, successHandler) {
-        if (!isExecute) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/checked|value/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 }
-                else {
-                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
                         this.$emit('update:' + propKey, eventProp[propKey]);
                         this.$emit('modelchanged', eventProp[propKey]);
                     }
                 }
             }
-        }
-        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/currentView|selectedDate/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                }
-                else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
-                }
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
             }
-        }
-        if ((this.ej2Instances && this.ej2Instances._trigger)) {
-            this.ej2Instances._trigger(eventName, eventProp, successHandler);
-        }
-    }
-    render(createElement) {
-        let h = !isExecute ? gh : createElement;
-        let slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('input', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    clear() {
-        return this.ej2Instances.clear();
-    }
-    ensureVisible(item) {
-        return this.ej2Instances.ensureVisible(item);
-    }
-    getData(item) {
-        return this.ej2Instances.getData(item);
-    }
-    getLocaleName() {
-        return this.ej2Instances.getLocaleName();
-    }
-    hidePopup() {
-        return this.ej2Instances.hidePopup();
-    }
-    selectAll(state) {
-        return this.ej2Instances.selectAll(state);
-    }
-    showPopup() {
-        return this.ej2Instances.showPopup();
-    }
-};
-DropDownTreeComponent = __decorate$5([
-    EJComponentDecorator({
-        props: properties$5,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], DropDownTreeComponent);
+        },
+        custom() {
+            this.updated();
+        },
+        clear() {
+            return this.ej2Instances.clear();
+        },
+        ensureVisible(item) {
+            return this.ej2Instances.ensureVisible(item);
+        },
+        getData(item) {
+            return this.ej2Instances.getData(item);
+        },
+        getLocaleName() {
+            return this.ej2Instances.getLocaleName();
+        },
+        hidePopup() {
+            return this.ej2Instances.hidePopup();
+        },
+        selectAll(state) {
+            return this.ej2Instances.selectAll(state);
+        },
+        showPopup() {
+            return this.ej2Instances.showPopup();
+        },
+    }
+});
 const DropDownTreePlugin = {
     name: 'ejs-dropdowntree',
     install(Vue) {
@@ -1262,13 +1124,6 @@ const DropDownTreePlugin = {
     }
 };
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties$6 = ['isLazyUpdate', 'plugins', 'allowSpaces', 'cssClass', 'dataSource', 'displayTemplate', 'fields', 'filterType', 'highlight', 'ignoreCase', 'itemTemplate', 'locale', 'mentionChar', 'minLength', 'noRecordsTemplate', 'popupHeight', 'popupWidth', 'query', 'showMentionChar', 'sortOrder', 'spinnerTemplate', 'suffixText', 'suggestionCount', 'target', 'actionBegin', 'actionComplete', 'actionFailure', 'beforeOpen', 'change', 'closed', 'created', 'destroyed', 'filtering', 'opened', 'select'];
 const modelProps$6 = [];
 const testProp$6 = getProps({ props: properties$6 });
@@ -1285,79 +1140,33 @@ for (let props of modelProps$6) {
  * <ejs-mention :dataSource='data'></ejs-mention>
  * ```
  */
-let MentionComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let MentionComponent = vueDefineComponent({
+    name: 'MentionComponent',
+    mixins: [ComponentBase],
+    props: props$6,
+    watch: watch$6,
+    emits: emitProbs$6,
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new Mention({}),
+            propKeys: properties$6,
+            models: modelProps$6,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class MentionComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$6;
-        this.models = modelProps$6;
-        this.hasChildDirective = false;
-        this.hasInjectedModules = false;
-        this.tagMapper = {};
-        this.tagNameMapper = {};
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new Mention({});
+    },
+    created() {
         this.bindProperties();
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
-        }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
-                        }
-                    }
-                    delete this.templateCollection[tempName];
-                }
-            }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
-                        }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
-                        }
-                    }
-                });
-            });
-        }
-    }
+    },
     render(createElement) {
         let h = !isExecute ? gh : createElement;
         let slots = null;
@@ -1365,44 +1174,76 @@ class MentionComponent extends ComponentBase {
             slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    addItem(items, itemIndex) {
-        return this.ej2Instances.addItem(items, itemIndex);
-    }
-    getDataByValue(value) {
-        return this.ej2Instances.getDataByValue(value);
-    }
-    getItems() {
-        return this.ej2Instances.getItems();
-    }
-    hidePopup(e) {
-        return this.ej2Instances.hidePopup(e);
-    }
-    search(text, positionX, positionY) {
-        return this.ej2Instances.search(text, positionX, positionY);
-    }
-    showPopup() {
-        return this.ej2Instances.showPopup();
-    }
-};
-MentionComponent = __decorate$6([
-    EJComponentDecorator({
-        props: properties$6
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], MentionComponent);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
+                        }
+                        delete this.templateCollection[tempName];
+                    }
+                }
+            }
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
+                        }
+                    });
+                });
+            }
+        },
+        custom() {
+            this.updated();
+        },
+        addItem(items, itemIndex) {
+            return this.ej2Instances.addItem(items, itemIndex);
+        },
+        getDataByValue(value) {
+            return this.ej2Instances.getDataByValue(value);
+        },
+        getItems() {
+            return this.ej2Instances.getItems();
+        },
+        hidePopup(e) {
+            return this.ej2Instances.hidePopup(e);
+        },
+        search(text, positionX, positionY) {
+            return this.ej2Instances.search(text, positionX, positionY);
+        },
+        showPopup() {
+            return this.ej2Instances.showPopup();
+        },
+    }
+});
 const MentionPlugin = {
     name: 'ejs-mention',
     install(Vue) {