@syncfusion/ej2-vue-navigations 20.4.53 → 21.1.37

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

@@ -1,35 +1,9 @@
 import { Accordion, AppBar, Breadcrumb, Carousel, ContextMenu, Menu, Sidebar, Tab, Toolbar, TreeView } from '@syncfusion/ej2-navigations';
-import { ComponentBase, EJComponentDecorator, allVue, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
-import { Vue } from 'vue-class-component';
+import { ComponentBase, getProps, gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
 import { getValue, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
-import Vue$1 from 'vue';
 
-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}}
-let vueImport;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport = Vue;
-}
-else {
-    vueImport = Vue$1;
-}
-let AccordionItemsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class AccordionItemsDirective extends vueImport {
-    constructor() {
-        super(arguments);
-    }
+let AccordionItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -40,30 +14,22 @@ class AccordionItemsDirective extends vueImport {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-accordionitems';
-    }
-};
-AccordionItemsDirective = __decorate([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-accordionitems';
         }
-    }) End */
-], AccordionItemsDirective);
+    }
+});
 const AccordionItemsPlugin = {
     name: 'e-accordionitems',
-    install(Vue$$1) {
-        Vue$$1.component(AccordionItemsPlugin.name, AccordionItemsDirective);
+    install(Vue) {
+        Vue.component(AccordionItemsPlugin.name, AccordionItemsDirective);
     }
 };
 /**
@@ -78,31 +44,23 @@ const AccordionItemsPlugin = {
  * </ejs-accordion>
  * ```
  */
-let AccordionItemDirective = class AccordionItemDirective extends vueImport {
+let AccordionItemDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-accordionitem';
+        }
     }
-    getTag() {
-        return 'e-accordionitem';
-    }
-};
-AccordionItemDirective = __decorate([
-    EJComponentDecorator({}, isExecute)
-], AccordionItemDirective);
+});
 const AccordionItemPlugin = {
     name: 'e-accordionitem',
-    install(Vue$$1) {
-        Vue$$1.component(AccordionItemPlugin.name, AccordionItemDirective);
+    install(Vue) {
+        Vue.component(AccordionItemPlugin.name, AccordionItemDirective);
     }
 };
 
-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 = ['isLazyUpdate', 'plugins', 'animation', 'dataSource', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandMode', 'expandedIndices', 'headerTemplate', 'height', 'itemTemplate', 'items', 'locale', 'width', 'clicked', 'created', 'destroyed', 'expanded', 'expanding'];
 const modelProps = ['expandedIndices'];
 const testProp = getProps({ props: properties });
@@ -119,28 +77,28 @@ for (let props of modelProps) {
  * <ejs-accordion></ejs-accordion>
  * ```
  */
-let AccordionComponent = 
-/* Start Options({
+let AccordionComponent = vueDefineComponent({
+    name: 'AccordionComponent',
+    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 Accordion({}),
+            propKeys: properties,
+            models: modelProps,
+            hasChildDirective: true,
+            hasInjectedModules: false,
+            tagMapper: { "e-accordionitems": "e-accordionitem" },
+            tagNameMapper: { "e-accordionitems": "e-items" },
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class AccordionComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties;
-        this.models = modelProps;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = false;
-        this.tagMapper = { "e-accordionitems": "e-accordionitem" };
-        this.tagNameMapper = { "e-accordionitems": "e-items" };
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new Accordion({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -148,174 +106,134 @@ class AccordionComponent 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('div', 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('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    addItem(item, index) {
-        return this.ej2Instances.addItem(item, index);
-    }
-    enableItem(index, isEnable) {
-        return this.ej2Instances.enableItem(index, isEnable);
-    }
-    expandItem(isExpand, index) {
-        return this.ej2Instances.expandItem(isExpand, index);
-    }
-    hideItem(index, isHidden) {
-        return this.ej2Instances.hideItem(index, isHidden);
-    }
-    removeItem(index) {
-        return this.ej2Instances.removeItem(index);
-    }
-    select(index) {
-        return this.ej2Instances.select(index);
-    }
-};
-AccordionComponent = __decorate$1([
-    EJComponentDecorator({
-        props: properties,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], AccordionComponent);
+        },
+        custom() {
+            this.updated();
+        },
+        addItem(item, index) {
+            return this.ej2Instances.addItem(item, index);
+        },
+        enableItem(index, isEnable) {
+            return this.ej2Instances.enableItem(index, isEnable);
+        },
+        expandItem(isExpand, index) {
+            return this.ej2Instances.expandItem(isExpand, index);
+        },
+        hideItem(index, isHidden) {
+            return this.ej2Instances.hideItem(index, isHidden);
+        },
+        removeItem(index) {
+            return this.ej2Instances.removeItem(index);
+        },
+        select(index) {
+            return this.ej2Instances.select(index);
+        },
+    }
+});
 const AccordionPlugin = {
     name: 'ejs-accordion',
-    install(Vue$$1) {
-        Vue$$1.component(AccordionPlugin.name, AccordionComponent);
-        Vue$$1.component(AccordionItemPlugin.name, AccordionItemDirective);
-        Vue$$1.component(AccordionItemsPlugin.name, AccordionItemsDirective);
+    install(Vue) {
+        Vue.component(AccordionPlugin.name, AccordionComponent);
+        Vue.component(AccordionItemPlugin.name, AccordionItemDirective);
+        Vue.component(AccordionItemsPlugin.name, AccordionItemsDirective);
     }
 };
 
-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}}
-let vueImport$1;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$1 = Vue;
-}
-else {
-    vueImport$1 = Vue$1;
-}
-let ItemsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class ItemsDirective extends vueImport$1 {
-    constructor() {
-        super(arguments);
-    }
+let ItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -326,30 +244,22 @@ class ItemsDirective extends vueImport$1 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-items';
-    }
-};
-ItemsDirective = __decorate$2([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-items';
         }
-    }) End */
-], ItemsDirective);
+    }
+});
 const ItemsPlugin = {
     name: 'e-items',
-    install(Vue$$1) {
-        Vue$$1.component(ItemsPlugin.name, ItemsDirective);
+    install(Vue) {
+        Vue.component(ItemsPlugin.name, ItemsDirective);
     }
 };
 /**
@@ -364,31 +274,23 @@ const ItemsPlugin = {
  * </ejs-toolbar>
  * ```
  */
-let ItemDirective = class ItemDirective extends vueImport$1 {
+let ItemDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-item';
+        }
     }
-    getTag() {
-        return 'e-item';
-    }
-};
-ItemDirective = __decorate$2([
-    EJComponentDecorator({}, isExecute)
-], ItemDirective);
+});
 const ItemPlugin = {
     name: 'e-item',
-    install(Vue$$1) {
-        Vue$$1.component(ItemPlugin.name, ItemDirective);
+    install(Vue) {
+        Vue.component(ItemPlugin.name, ItemDirective);
     }
 };
 
-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$1 = ['isLazyUpdate', 'plugins', 'allowKeyboard', 'cssClass', 'enableCollision', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'height', 'items', 'locale', 'overflowMode', 'scrollStep', 'width', 'beforeCreate', 'clicked', 'created', 'destroyed'];
 const modelProps$1 = [];
 const testProp$1 = getProps({ props: properties$1 });
@@ -405,79 +307,33 @@ for (let props of modelProps$1) {
  * <ejs-toolbar></ejs-toolbar>
  * ```
  */
-let ToolbarComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let ToolbarComponent = vueDefineComponent({
+    name: 'ToolbarComponent',
+    mixins: [ComponentBase],
+    props: props$1,
+    watch: watch$1,
+    emits: emitProbs$1,
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new Toolbar({}),
+            propKeys: properties$1,
+            models: modelProps$1,
+            hasChildDirective: true,
+            hasInjectedModules: false,
+            tagMapper: { "e-items": "e-item" },
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class ToolbarComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$1;
-        this.models = modelProps$1;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = false;
-        this.tagMapper = { "e-items": "e-item" };
-        this.tagNameMapper = {};
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new Toolbar({});
+    },
+    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;
@@ -485,60 +341,85 @@ class ToolbarComponent extends ComponentBase {
             slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    addItems(items, index) {
-        return this.ej2Instances.addItems(items, index);
-    }
-    disable(value) {
-        return this.ej2Instances.disable(value);
-    }
-    enableItems(items, isEnable) {
-        return this.ej2Instances.enableItems(items, isEnable);
-    }
-    hideItem(index, value) {
-        return this.ej2Instances.hideItem(index, value);
-    }
-    refreshOverflow() {
-        return this.ej2Instances.refreshOverflow();
-    }
-    removeItems(args) {
-        return this.ej2Instances.removeItems(args);
-    }
-};
-ToolbarComponent = __decorate$3([
-    EJComponentDecorator({
-        props: properties$1
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], ToolbarComponent);
+    },
+    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();
+        },
+        addItems(items, index) {
+            return this.ej2Instances.addItems(items, index);
+        },
+        disable(value) {
+            return this.ej2Instances.disable(value);
+        },
+        enableItems(items, isEnable) {
+            return this.ej2Instances.enableItems(items, isEnable);
+        },
+        hideItem(index, value) {
+            return this.ej2Instances.hideItem(index, value);
+        },
+        refreshOverflow() {
+            return this.ej2Instances.refreshOverflow();
+        },
+        removeItems(args) {
+            return this.ej2Instances.removeItems(args);
+        },
+    }
+});
 const ToolbarPlugin = {
     name: 'ejs-toolbar',
-    install(Vue$$1) {
-        Vue$$1.component(ToolbarPlugin.name, ToolbarComponent);
-        Vue$$1.component(ItemPlugin.name, ItemDirective);
-        Vue$$1.component(ItemsPlugin.name, ItemsDirective);
+    install(Vue) {
+        Vue.component(ToolbarPlugin.name, ToolbarComponent);
+        Vue.component(ItemPlugin.name, ItemDirective);
+        Vue.component(ItemsPlugin.name, ItemsDirective);
     }
 };
 
-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$2 = ['isLazyUpdate', 'plugins', 'animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hoverDelay', 'items', 'locale', 'showItemOnClick', 'target', 'template', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
 const modelProps$2 = [];
 const testProp$2 = getProps({ props: properties$2 });
@@ -556,79 +437,33 @@ for (let props of modelProps$2) {
  * <ejs-contextmenu target='#target' :items='menuItems'></ejs-contextmenu>
  * ```
  */
-let ContextMenuComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let ContextMenuComponent = vueDefineComponent({
+    name: 'ContextMenuComponent',
+    mixins: [ComponentBase],
+    props: props$2,
+    watch: watch$2,
+    emits: emitProbs$2,
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new ContextMenu({}),
+            propKeys: properties$2,
+            models: modelProps$2,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class ContextMenuComponent 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 ContextMenu({});
+    },
+    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;
@@ -636,89 +471,97 @@ class ContextMenuComponent extends ComponentBase {
             slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('ul', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    close() {
-        return this.ej2Instances.close();
-    }
-    enableItems(items, enable, isUniqueId) {
-        return this.ej2Instances.enableItems(items, enable, isUniqueId);
-    }
-    getItemIndex(item, isUniqueId) {
-        return this.ej2Instances.getItemIndex(item, isUniqueId);
-    }
-    hideItems(items, isUniqueId) {
-        return this.ej2Instances.hideItems(items, isUniqueId);
-    }
-    insertAfter(items, text, isUniqueId) {
-        return this.ej2Instances.insertAfter(items, text, isUniqueId);
-    }
-    insertBefore(items, text, isUniqueId) {
-        return this.ej2Instances.insertBefore(items, text, isUniqueId);
-    }
-    open(top, left, target) {
-        return this.ej2Instances.open(top, left, target);
-    }
-    removeItems(items, isUniqueId) {
-        return this.ej2Instances.removeItems(items, isUniqueId);
-    }
-    setItem(item, id, isUniqueId) {
-        return this.ej2Instances.setItem(item, id, isUniqueId);
-    }
-    showItems(items, isUniqueId) {
-        return this.ej2Instances.showItems(items, isUniqueId);
-    }
-};
-ContextMenuComponent = __decorate$4([
-    EJComponentDecorator({
-        props: properties$2
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], ContextMenuComponent);
+    },
+    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();
+        },
+        close() {
+            return this.ej2Instances.close();
+        },
+        enableItems(items, enable, isUniqueId) {
+            return this.ej2Instances.enableItems(items, enable, isUniqueId);
+        },
+        getItemIndex(item, isUniqueId) {
+            return this.ej2Instances.getItemIndex(item, isUniqueId);
+        },
+        hideItems(items, isUniqueId) {
+            return this.ej2Instances.hideItems(items, isUniqueId);
+        },
+        insertAfter(items, text, isUniqueId) {
+            return this.ej2Instances.insertAfter(items, text, isUniqueId);
+        },
+        insertBefore(items, text, isUniqueId) {
+            return this.ej2Instances.insertBefore(items, text, isUniqueId);
+        },
+        open(top, left, target) {
+            return this.ej2Instances.open(top, left, target);
+        },
+        removeItems(items, isUniqueId) {
+            return this.ej2Instances.removeItems(items, isUniqueId);
+        },
+        setItem(item, id, isUniqueId) {
+            return this.ej2Instances.setItem(item, id, isUniqueId);
+        },
+        showItems(items, isUniqueId) {
+            return this.ej2Instances.showItems(items, isUniqueId);
+        },
+    }
+});
 const ContextMenuPlugin = {
     name: 'ejs-contextmenu',
-    install(Vue$$1) {
-        Vue$$1.component(ContextMenuPlugin.name, ContextMenuComponent);
+    install(Vue) {
+        Vue.component(ContextMenuPlugin.name, ContextMenuComponent);
     }
 };
 
-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}}
-let vueImport$2;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$2 = Vue;
-}
-else {
-    vueImport$2 = Vue$1;
-}
-let BreadcrumbItemsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class BreadcrumbItemsDirective extends vueImport$2 {
-    constructor() {
-        super(arguments);
-    }
+let BreadcrumbItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -729,30 +572,22 @@ class BreadcrumbItemsDirective extends vueImport$2 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-breadcrumb-items';
-    }
-};
-BreadcrumbItemsDirective = __decorate$5([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-breadcrumb-items';
         }
-    }) End */
-], BreadcrumbItemsDirective);
+    }
+});
 const BreadcrumbItemsPlugin = {
     name: 'e-breadcrumb-items',
-    install(Vue$$1) {
-        Vue$$1.component(BreadcrumbItemsPlugin.name, BreadcrumbItemsDirective);
+    install(Vue) {
+        Vue.component(BreadcrumbItemsPlugin.name, BreadcrumbItemsDirective);
     }
 };
 /**
@@ -767,31 +602,23 @@ const BreadcrumbItemsPlugin = {
  * </ejs-breadcrumb>
  * ```
  */
-let BreadcrumbItemDirective = class BreadcrumbItemDirective extends vueImport$2 {
+let BreadcrumbItemDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-breadcrumb-item';
+        }
     }
-    getTag() {
-        return 'e-breadcrumb-item';
-    }
-};
-BreadcrumbItemDirective = __decorate$5([
-    EJComponentDecorator({}, isExecute)
-], BreadcrumbItemDirective);
+});
 const BreadcrumbItemPlugin = {
     name: 'e-breadcrumb-item',
-    install(Vue$$1) {
-        Vue$$1.component(BreadcrumbItemPlugin.name, BreadcrumbItemDirective);
+    install(Vue) {
+        Vue.component(BreadcrumbItemPlugin.name, BreadcrumbItemDirective);
     }
 };
 
-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$3 = ['isLazyUpdate', 'plugins', 'activeItem', 'cssClass', 'disabled', 'enableActiveItemNavigation', 'enableNavigation', 'enablePersistence', 'enableRtl', 'itemTemplate', 'items', 'locale', 'maxItems', 'overflowMode', 'separatorTemplate', 'url', 'beforeItemRender', 'created', 'itemClick'];
 const modelProps$3 = ['activeItem'];
 const testProp$3 = getProps({ props: properties$3 });
@@ -808,28 +635,28 @@ for (let props of modelProps$3) {
  * <ejs-breadcrumb :items='breadcrumbItems'></ejs-breadcrumb>
  * ```
  */
-let BreadcrumbComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let BreadcrumbComponent = vueDefineComponent({
+    name: 'BreadcrumbComponent',
+    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 Breadcrumb({}),
+            propKeys: properties$3,
+            models: modelProps$3,
+            hasChildDirective: true,
+            hasInjectedModules: false,
+            tagMapper: { "e-breadcrumb-items": "e-breadcrumb-item" },
+            tagNameMapper: { "e-breadcrumb-items": "e-items" },
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class BreadcrumbComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$3;
-        this.models = modelProps$3;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = false;
-        this.tagMapper = { "e-breadcrumb-items": "e-breadcrumb-item" };
-        this.tagNameMapper = { "e-breadcrumb-items": "e-items" };
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new Breadcrumb({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -837,156 +664,116 @@ class BreadcrumbComponent 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('nav', 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('nav', slots);
-    }
-    custom() {
-        this.updated();
+        },
+        custom() {
+            this.updated();
+        },
     }
-};
-BreadcrumbComponent = __decorate$6([
-    EJComponentDecorator({
-        props: properties$3,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], BreadcrumbComponent);
+});
 const BreadcrumbPlugin = {
     name: 'ejs-breadcrumb',
-    install(Vue$$1) {
-        Vue$$1.component(BreadcrumbPlugin.name, BreadcrumbComponent);
-        Vue$$1.component(BreadcrumbItemPlugin.name, BreadcrumbItemDirective);
-        Vue$$1.component(BreadcrumbItemsPlugin.name, BreadcrumbItemsDirective);
+    install(Vue) {
+        Vue.component(BreadcrumbPlugin.name, BreadcrumbComponent);
+        Vue.component(BreadcrumbItemPlugin.name, BreadcrumbItemDirective);
+        Vue.component(BreadcrumbItemsPlugin.name, BreadcrumbItemsDirective);
     }
 };
 
-var __decorate$7 = (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}}
-let vueImport$3;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$3 = Vue;
-}
-else {
-    vueImport$3 = Vue$1;
-}
-let CarouselItemsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class CarouselItemsDirective extends vueImport$3 {
-    constructor() {
-        super(arguments);
-    }
+let CarouselItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -997,30 +784,22 @@ class CarouselItemsDirective extends vueImport$3 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-carousel-items';
-    }
-};
-CarouselItemsDirective = __decorate$7([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-carousel-items';
         }
-    }) End */
-], CarouselItemsDirective);
+    }
+});
 const CarouselItemsPlugin = {
     name: 'e-carousel-items',
-    install(Vue$$1) {
-        Vue$$1.component(CarouselItemsPlugin.name, CarouselItemsDirective);
+    install(Vue) {
+        Vue.component(CarouselItemsPlugin.name, CarouselItemsDirective);
     }
 };
 /**
@@ -1035,31 +814,23 @@ const CarouselItemsPlugin = {
  * </ejs-carousel>
  * ```
  */
-let CarouselItemDirective = class CarouselItemDirective extends vueImport$3 {
+let CarouselItemDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-carousel-item';
+        }
     }
-    getTag() {
-        return 'e-carousel-item';
-    }
-};
-CarouselItemDirective = __decorate$7([
-    EJComponentDecorator({}, isExecute)
-], CarouselItemDirective);
+});
 const CarouselItemPlugin = {
     name: 'e-carousel-item',
-    install(Vue$$1) {
-        Vue$$1.component(CarouselItemPlugin.name, CarouselItemDirective);
+    install(Vue) {
+        Vue.component(CarouselItemPlugin.name, CarouselItemDirective);
     }
 };
 
-var __decorate$8 = (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', 'animationEffect', 'autoPlay', 'buttonsVisibility', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableTouchSwipe', 'height', 'htmlAttributes', 'indicatorsTemplate', 'interval', 'itemTemplate', 'items', 'locale', 'loop', 'nextButtonTemplate', 'partialVisible', 'pauseOnHover', 'playButtonTemplate', 'previousButtonTemplate', 'selectedIndex', 'showIndicators', 'showPlayButton', 'width', 'slideChanged', 'slideChanging'];
 const modelProps$4 = ['selectedIndex'];
 const testProp$4 = getProps({ props: properties$4 });
@@ -1076,28 +847,28 @@ for (let props of modelProps$4) {
  * <ejs-carousel :items='carouselItems'></ejs-carousel>
  * ```
  */
-let CarouselComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let CarouselComponent = vueDefineComponent({
+    name: 'CarouselComponent',
+    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 Carousel({}),
+            propKeys: properties$4,
+            models: modelProps$4,
+            hasChildDirective: true,
+            hasInjectedModules: false,
+            tagMapper: { "e-carousel-items": "e-carousel-item" },
+            tagNameMapper: { "e-carousel-items": "e-items" },
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class CarouselComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$4;
-        this.models = modelProps$4;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = false;
-        this.tagMapper = { "e-carousel-items": "e-carousel-item" };
-        this.tagNameMapper = { "e-carousel-items": "e-items" };
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new Carousel({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -1105,168 +876,128 @@ class CarouselComponent 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 || {});
-        }
-        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 = '';
+    },
+    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('div', 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('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    next() {
-        return this.ej2Instances.next();
-    }
-    pause() {
-        return this.ej2Instances.pause();
-    }
-    play() {
-        return this.ej2Instances.play();
-    }
-    prev() {
-        return this.ej2Instances.prev();
-    }
-};
-CarouselComponent = __decorate$8([
-    EJComponentDecorator({
-        props: properties$4,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], CarouselComponent);
+        },
+        custom() {
+            this.updated();
+        },
+        next() {
+            return this.ej2Instances.next();
+        },
+        pause() {
+            return this.ej2Instances.pause();
+        },
+        play() {
+            return this.ej2Instances.play();
+        },
+        prev() {
+            return this.ej2Instances.prev();
+        },
+    }
+});
 const CarouselPlugin = {
     name: 'ejs-carousel',
-    install(Vue$$1) {
-        Vue$$1.component(CarouselPlugin.name, CarouselComponent);
-        Vue$$1.component(CarouselItemPlugin.name, CarouselItemDirective);
-        Vue$$1.component(CarouselItemsPlugin.name, CarouselItemsDirective);
+    install(Vue) {
+        Vue.component(CarouselPlugin.name, CarouselComponent);
+        Vue.component(CarouselItemPlugin.name, CarouselItemDirective);
+        Vue.component(CarouselItemsPlugin.name, CarouselItemsDirective);
     }
 };
 
-var __decorate$9 = (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}}
-let vueImport$4;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$4 = Vue;
-}
-else {
-    vueImport$4 = Vue$1;
-}
-let TabItemsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class TabItemsDirective extends vueImport$4 {
-    constructor() {
-        super(arguments);
-    }
+let TabItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -1277,30 +1008,22 @@ class TabItemsDirective extends vueImport$4 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-tabitems';
-    }
-};
-TabItemsDirective = __decorate$9([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-tabitems';
         }
-    }) End */
-], TabItemsDirective);
+    }
+});
 const TabItemsPlugin = {
     name: 'e-tabitems',
-    install(Vue$$1) {
-        Vue$$1.component(TabItemsPlugin.name, TabItemsDirective);
+    install(Vue) {
+        Vue.component(TabItemsPlugin.name, TabItemsDirective);
     }
 };
 /**
@@ -1315,31 +1038,23 @@ const TabItemsPlugin = {
  * </ejs-tab>
  * ```
  */
-let TabItemDirective = class TabItemDirective extends vueImport$4 {
+let TabItemDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-tabitem';
+        }
     }
-    getTag() {
-        return 'e-tabitem';
-    }
-};
-TabItemDirective = __decorate$9([
-    EJComponentDecorator({}, isExecute)
-], TabItemDirective);
+});
 const TabItemPlugin = {
     name: 'e-tabitem',
-    install(Vue$$1) {
-        Vue$$1.component(TabItemPlugin.name, TabItemDirective);
+    install(Vue) {
+        Vue.component(TabItemPlugin.name, TabItemDirective);
     }
 };
 
-var __decorate$10 = (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', 'allowDragAndDrop', 'animation', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'reorderActiveTab', 'scrollStep', 'selectedItem', 'showCloseButton', 'width', 'added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];
 const modelProps$5 = [];
 const testProp$5 = getProps({ props: properties$5 });
@@ -1356,79 +1071,33 @@ for (let props of modelProps$5) {
  * <ejs-tab></ejs-tab>
  * ```
  */
-let TabComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let TabComponent = vueDefineComponent({
+    name: 'TabComponent',
+    mixins: [ComponentBase],
+    props: props$5,
+    watch: watch$5,
+    emits: emitProbs$5,
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new Tab({}),
+            propKeys: properties$5,
+            models: modelProps$5,
+            hasChildDirective: true,
+            hasInjectedModules: false,
+            tagMapper: { "e-tabitems": "e-tabitem" },
+            tagNameMapper: { "e-tabitems": "e-items" },
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class TabComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$5;
-        this.models = modelProps$5;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = false;
-        this.tagMapper = { "e-tabitems": "e-tabitem" };
-        this.tagNameMapper = { "e-tabitems": "e-items" };
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new Tab({});
+    },
+    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;
@@ -1436,72 +1105,97 @@ class TabComponent extends ComponentBase {
             slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    addTab(items, index) {
-        return this.ej2Instances.addTab(items, index);
-    }
-    disable(value) {
-        return this.ej2Instances.disable(value);
-    }
-    enableTab(index, value) {
-        return this.ej2Instances.enableTab(index, value);
-    }
-    getItemIndex(tabItemId) {
-        return this.ej2Instances.getItemIndex(tabItemId);
-    }
-    hideTab(index, value) {
-        return this.ej2Instances.hideTab(index, value);
-    }
-    refresh() {
-        return this.ej2Instances.refresh();
-    }
-    refreshActiveTab() {
-        return this.ej2Instances.refreshActiveTab();
-    }
-    refreshActiveTabBorder() {
-        return this.ej2Instances.refreshActiveTabBorder();
-    }
-    removeTab(index) {
-        return this.ej2Instances.removeTab(index);
-    }
-    select(args, event) {
-        return this.ej2Instances.select(args, event);
-    }
-};
-TabComponent = __decorate$10([
-    EJComponentDecorator({
-        props: properties$5
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], TabComponent);
+    },
+    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();
+        },
+        addTab(items, index) {
+            return this.ej2Instances.addTab(items, index);
+        },
+        disable(value) {
+            return this.ej2Instances.disable(value);
+        },
+        enableTab(index, value) {
+            return this.ej2Instances.enableTab(index, value);
+        },
+        getItemIndex(tabItemId) {
+            return this.ej2Instances.getItemIndex(tabItemId);
+        },
+        hideTab(index, value) {
+            return this.ej2Instances.hideTab(index, value);
+        },
+        refresh() {
+            return this.ej2Instances.refresh();
+        },
+        refreshActiveTab() {
+            return this.ej2Instances.refreshActiveTab();
+        },
+        refreshActiveTabBorder() {
+            return this.ej2Instances.refreshActiveTabBorder();
+        },
+        removeTab(index) {
+            return this.ej2Instances.removeTab(index);
+        },
+        select(args, event) {
+            return this.ej2Instances.select(args, event);
+        },
+    }
+});
 const TabPlugin = {
     name: 'ejs-tab',
-    install(Vue$$1) {
-        Vue$$1.component(TabPlugin.name, TabComponent);
-        Vue$$1.component(TabItemPlugin.name, TabItemDirective);
-        Vue$$1.component(TabItemsPlugin.name, TabItemsDirective);
+    install(Vue) {
+        Vue.component(TabPlugin.name, TabComponent);
+        Vue.component(TabItemPlugin.name, TabItemDirective);
+        Vue.component(TabItemsPlugin.name, TabItemsDirective);
     }
 };
 
-var __decorate$11 = (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', 'allowDragAndDrop', 'allowEditing', 'allowMultiSelection', 'allowTextWrap', 'animation', 'autoCheck', 'checkedNodes', 'cssClass', 'disabled', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandOn', 'expandedNodes', 'fields', 'fullRowNavigable', 'fullRowSelect', 'loadOnDemand', 'locale', 'nodeTemplate', 'selectedNodes', 'showCheckBox', 'sortOrder', 'actionFailure', 'created', 'dataBound', 'dataSourceChanged', 'destroyed', 'drawNode', 'keyPress', 'nodeChecked', 'nodeChecking', 'nodeClicked', 'nodeCollapsed', 'nodeCollapsing', 'nodeDragStart', 'nodeDragStop', 'nodeDragging', 'nodeDropped', 'nodeEdited', 'nodeEditing', 'nodeExpanded', 'nodeExpanding', 'nodeSelected', 'nodeSelecting'];
 const modelProps$6 = [];
 const testProp$6 = getProps({ props: properties$6 });
@@ -1518,79 +1212,33 @@ for (let props of modelProps$6) {
  * <ejs-treeview></ejs-treeview>
  * ```
  */
-let TreeViewComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let TreeViewComponent = vueDefineComponent({
+    name: 'TreeViewComponent',
+    mixins: [ComponentBase],
+    props: props$6,
+    watch: watch$6,
+    emits: emitProbs$6,
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new TreeView({}),
+            propKeys: properties$6,
+            models: modelProps$6,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class TreeViewComponent 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 TreeView({});
+    },
+    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;
@@ -1598,91 +1246,116 @@ class TreeViewComponent extends ComponentBase {
             slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    addNodes(nodes, target, index, preventTargetExpand) {
-        return this.ej2Instances.addNodes(nodes, target, index, preventTargetExpand);
-    }
-    beginEdit(node) {
-        return this.ej2Instances.beginEdit(node);
-    }
-    checkAll(nodes) {
-        return this.ej2Instances.checkAll(nodes);
-    }
-    collapseAll(nodes, level, excludeHiddenNodes) {
-        return this.ej2Instances.collapseAll(nodes, level, excludeHiddenNodes);
-    }
-    disableNodes(nodes) {
-        return this.ej2Instances.disableNodes(nodes);
-    }
-    enableNodes(nodes) {
-        return this.ej2Instances.enableNodes(nodes);
-    }
-    ensureVisible(node) {
-        return this.ej2Instances.ensureVisible(node);
-    }
-    expandAll(nodes, level, excludeHiddenNodes) {
-        return this.ej2Instances.expandAll(nodes, level, excludeHiddenNodes);
-    }
-    getAllCheckedNodes() {
-        return this.ej2Instances.getAllCheckedNodes();
-    }
-    getDisabledNodes() {
-        return this.ej2Instances.getDisabledNodes();
-    }
-    getNode(node) {
-        return this.ej2Instances.getNode(node);
-    }
-    getTreeData(node) {
-        return this.ej2Instances.getTreeData(node);
-    }
-    moveNodes(sourceNodes, target, index, preventTargetExpand) {
-        return this.ej2Instances.moveNodes(sourceNodes, target, index, preventTargetExpand);
-    }
-    refreshNode(target, newData) {
-        return this.ej2Instances.refreshNode(target, newData);
-    }
-    removeNodes(nodes) {
-        return this.ej2Instances.removeNodes(nodes);
-    }
-    uncheckAll(nodes) {
-        return this.ej2Instances.uncheckAll(nodes);
-    }
-    updateNode(target, newText) {
-        return this.ej2Instances.updateNode(target, newText);
-    }
-};
-TreeViewComponent = __decorate$11([
-    EJComponentDecorator({
-        props: properties$6
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], TreeViewComponent);
+    },
+    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();
+        },
+        addNodes(nodes, target, index, preventTargetExpand) {
+            return this.ej2Instances.addNodes(nodes, target, index, preventTargetExpand);
+        },
+        beginEdit(node) {
+            return this.ej2Instances.beginEdit(node);
+        },
+        checkAll(nodes) {
+            return this.ej2Instances.checkAll(nodes);
+        },
+        collapseAll(nodes, level, excludeHiddenNodes) {
+            return this.ej2Instances.collapseAll(nodes, level, excludeHiddenNodes);
+        },
+        disableNodes(nodes) {
+            return this.ej2Instances.disableNodes(nodes);
+        },
+        enableNodes(nodes) {
+            return this.ej2Instances.enableNodes(nodes);
+        },
+        ensureVisible(node) {
+            return this.ej2Instances.ensureVisible(node);
+        },
+        expandAll(nodes, level, excludeHiddenNodes) {
+            return this.ej2Instances.expandAll(nodes, level, excludeHiddenNodes);
+        },
+        getAllCheckedNodes() {
+            return this.ej2Instances.getAllCheckedNodes();
+        },
+        getDisabledNodes() {
+            return this.ej2Instances.getDisabledNodes();
+        },
+        getNode(node) {
+            return this.ej2Instances.getNode(node);
+        },
+        getTreeData(node) {
+            return this.ej2Instances.getTreeData(node);
+        },
+        moveNodes(sourceNodes, target, index, preventTargetExpand) {
+            return this.ej2Instances.moveNodes(sourceNodes, target, index, preventTargetExpand);
+        },
+        refreshNode(target, newData) {
+            return this.ej2Instances.refreshNode(target, newData);
+        },
+        removeNodes(nodes) {
+            return this.ej2Instances.removeNodes(nodes);
+        },
+        uncheckAll(nodes) {
+            return this.ej2Instances.uncheckAll(nodes);
+        },
+        updateNode(target, newText) {
+            return this.ej2Instances.updateNode(target, newText);
+        },
+    }
+});
 const TreeViewPlugin = {
     name: 'ejs-treeview',
-    install(Vue$$1) {
-        Vue$$1.component(TreeViewPlugin.name, TreeViewComponent);
+    install(Vue) {
+        Vue.component(TreeViewPlugin.name, TreeViewComponent);
     }
 };
 
-var __decorate$12 = (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$7 = ['isLazyUpdate', 'plugins', 'animate', 'closeOnDocumentClick', 'dockSize', 'enableDock', 'enableGestures', 'enablePersistence', 'enableRtl', 'height', 'isOpen', 'locale', 'mediaQuery', 'position', 'showBackdrop', 'target', 'type', 'width', 'zIndex', 'change', 'close', 'created', 'destroyed', 'open'];
 const modelProps$7 = ['isOpen'];
 const testProp$7 = getProps({ props: properties$7 });
@@ -1699,28 +1372,28 @@ for (let props of modelProps$7) {
  * <ejs-sidebar></ejs-sidebar>
  * ```
  */
-let SidebarComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let SidebarComponent = vueDefineComponent({
+    name: 'SidebarComponent',
+    mixins: [ComponentBase],
+    props: props$7,
+    watch: watch$7,
+    emits: emitProbs$7,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new Sidebar({}),
+            propKeys: properties$7,
+            models: modelProps$7,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class SidebarComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$7;
-        this.models = modelProps$7;
-        this.hasChildDirective = false;
-        this.hasInjectedModules = false;
-        this.tagMapper = {};
-        this.tagNameMapper = {};
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new Sidebar({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -1728,163 +1401,123 @@ class SidebarComponent 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('div', 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('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    hide(e) {
-        return this.ej2Instances.hide(e);
-    }
-    show(e) {
-        return this.ej2Instances.show(e);
-    }
-    toggle() {
-        return this.ej2Instances.toggle();
-    }
-};
-SidebarComponent = __decorate$12([
-    EJComponentDecorator({
-        props: properties$7,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], SidebarComponent);
+        },
+        custom() {
+            this.updated();
+        },
+        hide(e) {
+            return this.ej2Instances.hide(e);
+        },
+        show(e) {
+            return this.ej2Instances.show(e);
+        },
+        toggle() {
+            return this.ej2Instances.toggle();
+        },
+    }
+});
 const SidebarPlugin = {
     name: 'ejs-sidebar',
-    install(Vue$$1) {
-        Vue$$1.component(SidebarPlugin.name, SidebarComponent);
+    install(Vue) {
+        Vue.component(SidebarPlugin.name, SidebarComponent);
     }
 };
 
-var __decorate$13 = (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}}
-let vueImport$5;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$5 = Vue;
-}
-else {
-    vueImport$5 = Vue$1;
-}
-let MenuItemsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class MenuItemsDirective extends vueImport$5 {
-    constructor() {
-        super(arguments);
-    }
+let MenuItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -1895,57 +1528,41 @@ class MenuItemsDirective extends vueImport$5 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-menu-items';
-    }
-};
-MenuItemsDirective = __decorate$13([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-menu-items';
         }
-    }) End */
-], MenuItemsDirective);
+    }
+});
 const MenuItemsPlugin = {
     name: 'e-menu-items',
-    install(Vue$$1) {
-        Vue$$1.component(MenuItemsPlugin.name, MenuItemsDirective);
+    install(Vue) {
+        Vue.component(MenuItemsPlugin.name, MenuItemsDirective);
     }
 };
-let MenuItemDirective = class MenuItemDirective extends vueImport$5 {
+let MenuItemDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-';
+        }
     }
-    getTag() {
-        return 'e-';
-    }
-};
-MenuItemDirective = __decorate$13([
-    EJComponentDecorator({}, isExecute)
-], MenuItemDirective);
+});
 const MenuItemPlugin = {
     name: 'e-',
-    install(Vue$$1) {
-        Vue$$1.component(MenuItemPlugin.name, MenuItemDirective);
+    install(Vue) {
+        Vue.component(MenuItemPlugin.name, MenuItemDirective);
     }
 };
 
-var __decorate$14 = (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$8 = ['isLazyUpdate', 'plugins', 'animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hamburgerMode', 'hoverDelay', 'items', 'locale', 'orientation', 'showItemOnClick', 'target', 'template', 'title', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
 const modelProps$8 = [];
 const testProp$8 = getProps({ props: properties$8 });
@@ -1962,79 +1579,33 @@ for (let props of modelProps$8) {
  * <ejs-menu :items='menuItems'></ejs-menu>
  * ```
  */
-let MenuComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let MenuComponent = vueDefineComponent({
+    name: 'MenuComponent',
+    mixins: [ComponentBase],
+    props: props$8,
+    watch: watch$8,
+    emits: emitProbs$8,
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new Menu({}),
+            propKeys: properties$8,
+            models: modelProps$8,
+            hasChildDirective: true,
+            hasInjectedModules: false,
+            tagMapper: { "e-menu-items": "e-" },
+            tagNameMapper: { "e-menu-items": "e-items" },
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class MenuComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$8;
-        this.models = modelProps$8;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = false;
-        this.tagMapper = { "e-menu-items": "e-" };
-        this.tagNameMapper = { "e-menu-items": "e-items" };
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new Menu({});
+    },
+    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;
@@ -2042,72 +1613,97 @@ class MenuComponent extends ComponentBase {
             slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('ul', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    close() {
-        return this.ej2Instances.close();
-    }
-    enableItems(items, enable, isUniqueId) {
-        return this.ej2Instances.enableItems(items, enable, isUniqueId);
-    }
-    getItemIndex(item, isUniqueId) {
-        return this.ej2Instances.getItemIndex(item, isUniqueId);
-    }
-    hideItems(items, isUniqueId) {
-        return this.ej2Instances.hideItems(items, isUniqueId);
-    }
-    insertAfter(items, text, isUniqueId) {
-        return this.ej2Instances.insertAfter(items, text, isUniqueId);
-    }
-    insertBefore(items, text, isUniqueId) {
-        return this.ej2Instances.insertBefore(items, text, isUniqueId);
-    }
-    open() {
-        return this.ej2Instances.open();
-    }
-    removeItems(items, isUniqueId) {
-        return this.ej2Instances.removeItems(items, isUniqueId);
-    }
-    setItem(item, id, isUniqueId) {
-        return this.ej2Instances.setItem(item, id, isUniqueId);
-    }
-    showItems(items, isUniqueId) {
-        return this.ej2Instances.showItems(items, isUniqueId);
-    }
-};
-MenuComponent = __decorate$14([
-    EJComponentDecorator({
-        props: properties$8
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], MenuComponent);
+    },
+    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();
+        },
+        close() {
+            return this.ej2Instances.close();
+        },
+        enableItems(items, enable, isUniqueId) {
+            return this.ej2Instances.enableItems(items, enable, isUniqueId);
+        },
+        getItemIndex(item, isUniqueId) {
+            return this.ej2Instances.getItemIndex(item, isUniqueId);
+        },
+        hideItems(items, isUniqueId) {
+            return this.ej2Instances.hideItems(items, isUniqueId);
+        },
+        insertAfter(items, text, isUniqueId) {
+            return this.ej2Instances.insertAfter(items, text, isUniqueId);
+        },
+        insertBefore(items, text, isUniqueId) {
+            return this.ej2Instances.insertBefore(items, text, isUniqueId);
+        },
+        open() {
+            return this.ej2Instances.open();
+        },
+        removeItems(items, isUniqueId) {
+            return this.ej2Instances.removeItems(items, isUniqueId);
+        },
+        setItem(item, id, isUniqueId) {
+            return this.ej2Instances.setItem(item, id, isUniqueId);
+        },
+        showItems(items, isUniqueId) {
+            return this.ej2Instances.showItems(items, isUniqueId);
+        },
+    }
+});
 const MenuPlugin = {
     name: 'ejs-menu',
-    install(Vue$$1) {
-        Vue$$1.component(MenuPlugin.name, MenuComponent);
-        Vue$$1.component(MenuItemPlugin.name, MenuItemDirective);
-        Vue$$1.component(MenuItemsPlugin.name, MenuItemsDirective);
+    install(Vue) {
+        Vue.component(MenuPlugin.name, MenuComponent);
+        Vue.component(MenuItemPlugin.name, MenuItemDirective);
+        Vue.component(MenuItemsPlugin.name, MenuItemsDirective);
     }
 };
 
-var __decorate$15 = (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$9 = ['isLazyUpdate', 'plugins', 'colorMode', 'cssClass', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'isSticky', 'locale', 'mode', 'position', 'created', 'destroyed'];
 const modelProps$9 = [];
 const testProp$9 = getProps({ props: properties$9 });
@@ -2124,79 +1720,33 @@ for (let props of modelProps$9) {
  * <ejs-appbar></ejs-appbar>
  * ```
  */
-let AppBarComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let AppBarComponent = vueDefineComponent({
+    name: 'AppBarComponent',
+    mixins: [ComponentBase],
+    props: props$9,
+    watch: watch$9,
+    emits: emitProbs$9,
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new AppBar({}),
+            propKeys: properties$9,
+            models: modelProps$9,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class AppBarComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$9;
-        this.models = modelProps$9;
-        this.hasChildDirective = false;
-        this.hasInjectedModules = false;
-        this.tagMapper = {};
-        this.tagNameMapper = {};
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new AppBar({});
+    },
+    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;
@@ -2204,30 +1754,62 @@ class AppBarComponent extends ComponentBase {
             slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('header', 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];
+                    }
+                }
+            }
+        },
+        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();
+        },
     }
-    custom() {
-        this.updated();
-    }
-};
-AppBarComponent = __decorate$15([
-    EJComponentDecorator({
-        props: properties$9
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], AppBarComponent);
+});
 const AppBarPlugin = {
     name: 'ejs-appbar',
-    install(Vue$$1) {
-        Vue$$1.component(AppBarPlugin.name, AppBarComponent);
+    install(Vue) {
+        Vue.component(AppBarPlugin.name, AppBarComponent);
     }
 };