@syncfusion/ej2-vue-navigations 20.4.53 → 21.1.37

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

@@ -1,42 +1,10 @@
 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 __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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;
-};
-import { Options } from 'vue-class-component';
-var vueImport;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport = Vue;
-}
-else {
-    vueImport = Vue$1;
-}
-var AccordionItemsDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends(AccordionItemsDirective, _super);
-    function AccordionItemsDirective() {
-        return _super.call(this, arguments) || this;
-    }
-    AccordionItemsDirective.prototype.render = function (createElement) {
+var AccordionItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
         if (!isExecute) {
             var h = !isExecute ? gh : createElement;
             var slots = null;
@@ -46,31 +14,22 @@ var AccordionItemsDirective = /** @__PURE__ @class */ (function (_super) {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    };
-    AccordionItemsDirective.prototype.updated = function () {
+    },
+    updated: function () {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    };
-    AccordionItemsDirective.prototype.getTag = function () {
-        return 'e-accordionitems';
-    };
-    AccordionItemsDirective = __decorate([
-        EJComponentDecorator({}, isExecute)
-        ,Options({
-            inject: {
-                custom: {
-                    default: null
-                }
-            }
-        })
-    ], AccordionItemsDirective);
-    return AccordionItemsDirective;
-}(vueImport));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-accordionitems';
+        }
+    }
+});
 var AccordionItemsPlugin = {
     name: 'e-accordionitems',
-    install: function (Vue$$1) {
-        Vue$$1.component(AccordionItemsPlugin.name, AccordionItemsDirective);
+    install: function (Vue) {
+        Vue.component(AccordionItemsPlugin.name, AccordionItemsDirective);
     }
 };
 /**
@@ -85,49 +44,23 @@ var AccordionItemsPlugin = {
  * </ejs-accordion>
  * ```
  */
-var AccordionItemDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends(AccordionItemDirective, _super);
-    function AccordionItemDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    AccordionItemDirective.prototype.render = function () {
+var AccordionItemDirective = vueDefineComponent({
+    render: function () {
         return;
-    };
-    AccordionItemDirective.prototype.getTag = function () {
-        return 'e-accordionitem';
-    };
-    AccordionItemDirective = __decorate([
-        EJComponentDecorator({}, isExecute)
-    ], AccordionItemDirective);
-    return AccordionItemDirective;
-}(vueImport));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-accordionitem';
+        }
+    }
+});
 var AccordionItemPlugin = {
     name: 'e-accordionitem',
-    install: function (Vue$$1) {
-        Vue$$1.component(AccordionItemPlugin.name, AccordionItemDirective);
+    install: function (Vue) {
+        Vue.component(AccordionItemPlugin.name, AccordionItemDirective);
     }
 };
 
-var __extends$1 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
 var properties = ['isLazyUpdate', 'plugins', 'animation', 'dataSource', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandMode', 'expandedIndices', 'headerTemplate', 'height', 'itemTemplate', 'items', 'locale', 'width', 'clicked', 'created', 'destroyed', 'expanded', 'expanding'];
 var modelProps = ['expandedIndices'];
 var testProp = getProps({ props: properties });
@@ -145,205 +78,167 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
  * <ejs-accordion></ejs-accordion>
  * ```
  */
-var AccordionComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$1(AccordionComponent, _super);
-    function AccordionComponent() {
-        var _this = _super.call(this, arguments) || this;
-        _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({});
-        _this.ej2Instances._trigger = _this.ej2Instances.trigger;
-        _this.ej2Instances.trigger = _this.trigger;
-        _this.bindProperties();
-        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
-        _this.ej2Instances.setProperties = _this.setProperties;
-        _this.ej2Instances.clearTemplate = _this.clearTemplate;
-        _this.updated = _this.updated;
-        return _this;
-    }
-    AccordionComponent.prototype.clearTemplate = function (templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+var AccordionComponent = vueDefineComponent({
+    name: 'AccordionComponent',
+    mixins: [ComponentBase],
+    props: props,
+    watch: watch,
+    emits: emitProbs,
+    model: { event: 'modelchanged' },
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            ej2Instances: new Accordion({}),
+            propKeys: properties,
+            models: modelProps,
+            hasChildDirective: true,
+            hasInjectedModules: false,
+            tagMapper: { "e-accordionitems": "e-accordionitem" },
+            tagNameMapper: { "e-accordionitems": "e-items" },
+            isVue3: !isExecute,
+            templateCollection: {},
+        };
+    },
+    created: function () {
+        this.ej2Instances._trigger = this.ej2Instances.trigger;
+        this.ej2Instances.trigger = this.trigger;
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    render: function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
-                var tempName = templateNames_1[_i];
-                var elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
-                        var ele = elementCollection_1[_a];
-                        var destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate: function (templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                    var tempName = templateNames_1[_i];
+                    var elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                            var ele = elementCollection_1[_a];
+                            var destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    };
-    AccordionComponent.prototype.setProperties = function (prop, muteOnChange) {
-        var _this = this;
-        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(function (key) {
-                _this.models.map(function (model) {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (_this.isVue3) {
-                            _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties: function (prop, muteOnChange) {
+            var _this = this;
+            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(function (key) {
+                    _this.models.map(function (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: function (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)) {
+                var key = this.models.toString().match(/checked|value/) || [];
+                var 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]);
                         }
                     }
-                });
-            });
-        }
-    };
-    AccordionComponent.prototype.trigger = function (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)) {
-            var key = this.models.toString().match(/checked|value/) || [];
-            var 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)) {
+                var key = this.models.toString().match(/currentView|selectedDate/) || [];
+                var 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)) {
-            var key = this.models.toString().match(/currentView|selectedDate/) || [];
-            var 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);
-        }
-    };
-    AccordionComponent.prototype.render = function (createElement) {
-        var h = !isExecute ? gh : createElement;
-        var slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('div', slots);
-    };
-    AccordionComponent.prototype.custom = function () {
-        this.updated();
-    };
-    AccordionComponent.prototype.addItem = function (item, index) {
-        return this.ej2Instances.addItem(item, index);
-    };
-    AccordionComponent.prototype.enableItem = function (index, isEnable) {
-        return this.ej2Instances.enableItem(index, isEnable);
-    };
-    AccordionComponent.prototype.expandItem = function (isExpand, index) {
-        return this.ej2Instances.expandItem(isExpand, index);
-    };
-    AccordionComponent.prototype.hideItem = function (index, isHidden) {
-        return this.ej2Instances.hideItem(index, isHidden);
-    };
-    AccordionComponent.prototype.removeItem = function (index) {
-        return this.ej2Instances.removeItem(index);
-    };
-    AccordionComponent.prototype.select = function (index) {
-        return this.ej2Instances.select(index);
-    };
-    AccordionComponent = __decorate$1([
-        EJComponentDecorator({
-            props: properties,
-            model: {
-                event: 'modelchanged'
-            }
-        }, isExecute)
-        ,Options({
-            props: props,
-            watch: watch,
-            emits: emitProbs,
-            provide: function provide() {
-                return {
-                    custom: this.custom
-                };
-            }
-        })
-    ], AccordionComponent);
-    return AccordionComponent;
-}(ComponentBase));
+        },
+        custom: function () {
+            this.updated();
+        },
+        addItem: function (item, index) {
+            return this.ej2Instances.addItem(item, index);
+        },
+        enableItem: function (index, isEnable) {
+            return this.ej2Instances.enableItem(index, isEnable);
+        },
+        expandItem: function (isExpand, index) {
+            return this.ej2Instances.expandItem(isExpand, index);
+        },
+        hideItem: function (index, isHidden) {
+            return this.ej2Instances.hideItem(index, isHidden);
+        },
+        removeItem: function (index) {
+            return this.ej2Instances.removeItem(index);
+        },
+        select: function (index) {
+            return this.ej2Instances.select(index);
+        },
+    }
+});
 var AccordionPlugin = {
     name: 'ejs-accordion',
-    install: function (Vue$$1) {
-        Vue$$1.component(AccordionPlugin.name, AccordionComponent);
-        Vue$$1.component(AccordionItemPlugin.name, AccordionItemDirective);
-        Vue$$1.component(AccordionItemsPlugin.name, AccordionItemsDirective);
+    install: function (Vue) {
+        Vue.component(AccordionPlugin.name, AccordionComponent);
+        Vue.component(AccordionItemPlugin.name, AccordionItemDirective);
+        Vue.component(AccordionItemsPlugin.name, AccordionItemsDirective);
     }
 };
 
-var __extends$2 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
-var vueImport$1;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$1 = Vue;
-}
-else {
-    vueImport$1 = Vue$1;
-}
-var ItemsDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(ItemsDirective, _super);
-    function ItemsDirective() {
-        return _super.call(this, arguments) || this;
-    }
-    ItemsDirective.prototype.render = function (createElement) {
+var ItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
         if (!isExecute) {
             var h = !isExecute ? gh : createElement;
             var slots = null;
@@ -353,31 +248,22 @@ var ItemsDirective = /** @__PURE__ @class */ (function (_super) {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    };
-    ItemsDirective.prototype.updated = function () {
+    },
+    updated: function () {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    };
-    ItemsDirective.prototype.getTag = function () {
-        return 'e-items';
-    };
-    ItemsDirective = __decorate$2([
-        EJComponentDecorator({}, isExecute)
-        ,Options({
-            inject: {
-                custom: {
-                    default: null
-                }
-            }
-        })
-    ], ItemsDirective);
-    return ItemsDirective;
-}(vueImport$1));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-items';
+        }
+    }
+});
 var ItemsPlugin = {
     name: 'e-items',
-    install: function (Vue$$1) {
-        Vue$$1.component(ItemsPlugin.name, ItemsDirective);
+    install: function (Vue) {
+        Vue.component(ItemsPlugin.name, ItemsDirective);
     }
 };
 /**
@@ -392,49 +278,23 @@ var ItemsPlugin = {
  * </ejs-toolbar>
  * ```
  */
-var ItemDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(ItemDirective, _super);
-    function ItemDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ItemDirective.prototype.render = function () {
+var ItemDirective = vueDefineComponent({
+    render: function () {
         return;
-    };
-    ItemDirective.prototype.getTag = function () {
-        return 'e-item';
-    };
-    ItemDirective = __decorate$2([
-        EJComponentDecorator({}, isExecute)
-    ], ItemDirective);
-    return ItemDirective;
-}(vueImport$1));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-item';
+        }
+    }
+});
 var ItemPlugin = {
     name: 'e-item',
-    install: function (Vue$$1) {
-        Vue$$1.component(ItemPlugin.name, ItemDirective);
+    install: function (Vue) {
+        Vue.component(ItemPlugin.name, ItemDirective);
     }
 };
 
-var __extends$3 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
 var properties$1 = ['isLazyUpdate', 'plugins', 'allowKeyboard', 'cssClass', 'enableCollision', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'height', 'items', 'locale', 'overflowMode', 'scrollStep', 'width', 'beforeCreate', 'clicked', 'created', 'destroyed'];
 var modelProps$1 = [];
 var testProp$1 = getProps({ props: properties$1 });
@@ -452,148 +312,122 @@ for (var _i$1 = 0, modelProps_1$1 = modelProps$1; _i$1 < modelProps_1$1.length;
  * <ejs-toolbar></ejs-toolbar>
  * ```
  */
-var ToolbarComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$3(ToolbarComponent, _super);
-    function ToolbarComponent() {
-        var _this = _super.call(this, arguments) || this;
-        _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({});
-        _this.bindProperties();
-        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
-        _this.ej2Instances.setProperties = _this.setProperties;
-        _this.ej2Instances.clearTemplate = _this.clearTemplate;
-        _this.updated = _this.updated;
-        return _this;
-    }
-    ToolbarComponent.prototype.clearTemplate = function (templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+var ToolbarComponent = vueDefineComponent({
+    name: 'ToolbarComponent',
+    mixins: [ComponentBase],
+    props: props$1,
+    watch: watch$1,
+    emits: emitProbs$1,
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            ej2Instances: new Toolbar({}),
+            propKeys: properties$1,
+            models: modelProps$1,
+            hasChildDirective: true,
+            hasInjectedModules: false,
+            tagMapper: { "e-items": "e-item" },
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
+        };
+    },
+    created: function () {
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    render: function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
-                var tempName = templateNames_1[_i];
-                var elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
-                        var ele = elementCollection_1[_a];
-                        var destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate: function (templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                    var tempName = templateNames_1[_i];
+                    var elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                            var ele = elementCollection_1[_a];
+                            var destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    };
-    ToolbarComponent.prototype.setProperties = function (prop, muteOnChange) {
-        var _this = this;
-        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(function (key) {
-                _this.models.map(function (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]);
+        },
+        setProperties: function (prop, muteOnChange) {
+            var _this = this;
+            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(function (key) {
+                    _this.models.map(function (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]);
+                            }
                         }
-                    }
+                    });
                 });
-            });
-        }
-    };
-    ToolbarComponent.prototype.render = function (createElement) {
-        var h = !isExecute ? gh : createElement;
-        var slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('div', slots);
-    };
-    ToolbarComponent.prototype.custom = function () {
-        this.updated();
-    };
-    ToolbarComponent.prototype.addItems = function (items, index) {
-        return this.ej2Instances.addItems(items, index);
-    };
-    ToolbarComponent.prototype.disable = function (value) {
-        return this.ej2Instances.disable(value);
-    };
-    ToolbarComponent.prototype.enableItems = function (items, isEnable) {
-        return this.ej2Instances.enableItems(items, isEnable);
-    };
-    ToolbarComponent.prototype.hideItem = function (index, value) {
-        return this.ej2Instances.hideItem(index, value);
-    };
-    ToolbarComponent.prototype.refreshOverflow = function () {
-        return this.ej2Instances.refreshOverflow();
-    };
-    ToolbarComponent.prototype.removeItems = function (args) {
-        return this.ej2Instances.removeItems(args);
-    };
-    ToolbarComponent = __decorate$3([
-        EJComponentDecorator({
-            props: properties$1
-        }, isExecute)
-        ,Options({
-            props: props,
-            watch: watch,
-            emits: emitProbs,
-            provide: function provide() {
-                return {
-                    custom: this.custom
-                };
-            }
-        })
-    ], ToolbarComponent);
-    return ToolbarComponent;
-}(ComponentBase));
+            }
+        },
+        custom: function () {
+            this.updated();
+        },
+        addItems: function (items, index) {
+            return this.ej2Instances.addItems(items, index);
+        },
+        disable: function (value) {
+            return this.ej2Instances.disable(value);
+        },
+        enableItems: function (items, isEnable) {
+            return this.ej2Instances.enableItems(items, isEnable);
+        },
+        hideItem: function (index, value) {
+            return this.ej2Instances.hideItem(index, value);
+        },
+        refreshOverflow: function () {
+            return this.ej2Instances.refreshOverflow();
+        },
+        removeItems: function (args) {
+            return this.ej2Instances.removeItems(args);
+        },
+    }
+});
 var ToolbarPlugin = {
     name: 'ejs-toolbar',
-    install: function (Vue$$1) {
-        Vue$$1.component(ToolbarPlugin.name, ToolbarComponent);
-        Vue$$1.component(ItemPlugin.name, ItemDirective);
-        Vue$$1.component(ItemsPlugin.name, ItemsDirective);
+    install: function (Vue) {
+        Vue.component(ToolbarPlugin.name, ToolbarComponent);
+        Vue.component(ItemPlugin.name, ItemDirective);
+        Vue.component(ItemsPlugin.name, ItemsDirective);
     }
 };
 
-var __extends$4 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
 var 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'];
 var modelProps$2 = [];
 var testProp$2 = getProps({ props: properties$2 });
@@ -612,171 +446,135 @@ for (var _i$2 = 0, modelProps_1$2 = modelProps$2; _i$2 < modelProps_1$2.length;
  * <ejs-contextmenu target='#target' :items='menuItems'></ejs-contextmenu>
  * ```
  */
-var ContextMenuComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$4(ContextMenuComponent, _super);
-    function ContextMenuComponent() {
-        var _this = _super.call(this, arguments) || this;
-        _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({});
-        _this.bindProperties();
-        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
-        _this.ej2Instances.setProperties = _this.setProperties;
-        _this.ej2Instances.clearTemplate = _this.clearTemplate;
-        _this.updated = _this.updated;
-        return _this;
-    }
-    ContextMenuComponent.prototype.clearTemplate = function (templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+var ContextMenuComponent = vueDefineComponent({
+    name: 'ContextMenuComponent',
+    mixins: [ComponentBase],
+    props: props$2,
+    watch: watch$2,
+    emits: emitProbs$2,
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            ej2Instances: new ContextMenu({}),
+            propKeys: properties$2,
+            models: modelProps$2,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
+        };
+    },
+    created: function () {
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    render: function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
-                var tempName = templateNames_1[_i];
-                var elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
-                        var ele = elementCollection_1[_a];
-                        var destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('ul', slots);
+    },
+    methods: {
+        clearTemplate: function (templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                    var tempName = templateNames_1[_i];
+                    var elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                            var ele = elementCollection_1[_a];
+                            var destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    };
-    ContextMenuComponent.prototype.setProperties = function (prop, muteOnChange) {
-        var _this = this;
-        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(function (key) {
-                _this.models.map(function (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]);
+        },
+        setProperties: function (prop, muteOnChange) {
+            var _this = this;
+            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(function (key) {
+                    _this.models.map(function (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]);
+                            }
                         }
-                    }
+                    });
                 });
-            });
-        }
-    };
-    ContextMenuComponent.prototype.render = function (createElement) {
-        var h = !isExecute ? gh : createElement;
-        var slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('ul', slots);
-    };
-    ContextMenuComponent.prototype.custom = function () {
-        this.updated();
-    };
-    ContextMenuComponent.prototype.close = function () {
-        return this.ej2Instances.close();
-    };
-    ContextMenuComponent.prototype.enableItems = function (items, enable, isUniqueId) {
-        return this.ej2Instances.enableItems(items, enable, isUniqueId);
-    };
-    ContextMenuComponent.prototype.getItemIndex = function (item, isUniqueId) {
-        return this.ej2Instances.getItemIndex(item, isUniqueId);
-    };
-    ContextMenuComponent.prototype.hideItems = function (items, isUniqueId) {
-        return this.ej2Instances.hideItems(items, isUniqueId);
-    };
-    ContextMenuComponent.prototype.insertAfter = function (items, text, isUniqueId) {
-        return this.ej2Instances.insertAfter(items, text, isUniqueId);
-    };
-    ContextMenuComponent.prototype.insertBefore = function (items, text, isUniqueId) {
-        return this.ej2Instances.insertBefore(items, text, isUniqueId);
-    };
-    ContextMenuComponent.prototype.open = function (top, left, target) {
-        return this.ej2Instances.open(top, left, target);
-    };
-    ContextMenuComponent.prototype.removeItems = function (items, isUniqueId) {
-        return this.ej2Instances.removeItems(items, isUniqueId);
-    };
-    ContextMenuComponent.prototype.setItem = function (item, id, isUniqueId) {
-        return this.ej2Instances.setItem(item, id, isUniqueId);
-    };
-    ContextMenuComponent.prototype.showItems = function (items, isUniqueId) {
-        return this.ej2Instances.showItems(items, isUniqueId);
-    };
-    ContextMenuComponent = __decorate$4([
-        EJComponentDecorator({
-            props: properties$2
-        }, isExecute)
-        ,Options({
-            props: props,
-            watch: watch,
-            emits: emitProbs,
-            provide: function provide() {
-                return {
-                    custom: this.custom
-                };
-            }
-        })
-    ], ContextMenuComponent);
-    return ContextMenuComponent;
-}(ComponentBase));
+            }
+        },
+        custom: function () {
+            this.updated();
+        },
+        close: function () {
+            return this.ej2Instances.close();
+        },
+        enableItems: function (items, enable, isUniqueId) {
+            return this.ej2Instances.enableItems(items, enable, isUniqueId);
+        },
+        getItemIndex: function (item, isUniqueId) {
+            return this.ej2Instances.getItemIndex(item, isUniqueId);
+        },
+        hideItems: function (items, isUniqueId) {
+            return this.ej2Instances.hideItems(items, isUniqueId);
+        },
+        insertAfter: function (items, text, isUniqueId) {
+            return this.ej2Instances.insertAfter(items, text, isUniqueId);
+        },
+        insertBefore: function (items, text, isUniqueId) {
+            return this.ej2Instances.insertBefore(items, text, isUniqueId);
+        },
+        open: function (top, left, target) {
+            return this.ej2Instances.open(top, left, target);
+        },
+        removeItems: function (items, isUniqueId) {
+            return this.ej2Instances.removeItems(items, isUniqueId);
+        },
+        setItem: function (item, id, isUniqueId) {
+            return this.ej2Instances.setItem(item, id, isUniqueId);
+        },
+        showItems: function (items, isUniqueId) {
+            return this.ej2Instances.showItems(items, isUniqueId);
+        },
+    }
+});
 var ContextMenuPlugin = {
     name: 'ejs-contextmenu',
-    install: function (Vue$$1) {
-        Vue$$1.component(ContextMenuPlugin.name, ContextMenuComponent);
+    install: function (Vue) {
+        Vue.component(ContextMenuPlugin.name, ContextMenuComponent);
     }
 };
 
-var __extends$5 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
-var vueImport$2;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$2 = Vue;
-}
-else {
-    vueImport$2 = Vue$1;
-}
-var BreadcrumbItemsDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$5(BreadcrumbItemsDirective, _super);
-    function BreadcrumbItemsDirective() {
-        return _super.call(this, arguments) || this;
-    }
-    BreadcrumbItemsDirective.prototype.render = function (createElement) {
+var BreadcrumbItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
         if (!isExecute) {
             var h = !isExecute ? gh : createElement;
             var slots = null;
@@ -786,31 +584,22 @@ var BreadcrumbItemsDirective = /** @__PURE__ @class */ (function (_super) {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    };
-    BreadcrumbItemsDirective.prototype.updated = function () {
+    },
+    updated: function () {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    };
-    BreadcrumbItemsDirective.prototype.getTag = function () {
-        return 'e-breadcrumb-items';
-    };
-    BreadcrumbItemsDirective = __decorate$5([
-        EJComponentDecorator({}, isExecute)
-        ,Options({
-            inject: {
-                custom: {
-                    default: null
-                }
-            }
-        })
-    ], BreadcrumbItemsDirective);
-    return BreadcrumbItemsDirective;
-}(vueImport$2));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-breadcrumb-items';
+        }
+    }
+});
 var BreadcrumbItemsPlugin = {
     name: 'e-breadcrumb-items',
-    install: function (Vue$$1) {
-        Vue$$1.component(BreadcrumbItemsPlugin.name, BreadcrumbItemsDirective);
+    install: function (Vue) {
+        Vue.component(BreadcrumbItemsPlugin.name, BreadcrumbItemsDirective);
     }
 };
 /**
@@ -825,49 +614,23 @@ var BreadcrumbItemsPlugin = {
  * </ejs-breadcrumb>
  * ```
  */
-var BreadcrumbItemDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$5(BreadcrumbItemDirective, _super);
-    function BreadcrumbItemDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    BreadcrumbItemDirective.prototype.render = function () {
+var BreadcrumbItemDirective = vueDefineComponent({
+    render: function () {
         return;
-    };
-    BreadcrumbItemDirective.prototype.getTag = function () {
-        return 'e-breadcrumb-item';
-    };
-    BreadcrumbItemDirective = __decorate$5([
-        EJComponentDecorator({}, isExecute)
-    ], BreadcrumbItemDirective);
-    return BreadcrumbItemDirective;
-}(vueImport$2));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-breadcrumb-item';
+        }
+    }
+});
 var BreadcrumbItemPlugin = {
     name: 'e-breadcrumb-item',
-    install: function (Vue$$1) {
-        Vue$$1.component(BreadcrumbItemPlugin.name, BreadcrumbItemDirective);
+    install: function (Vue) {
+        Vue.component(BreadcrumbItemPlugin.name, BreadcrumbItemDirective);
     }
 };
 
-var __extends$6 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
 var properties$3 = ['isLazyUpdate', 'plugins', 'activeItem', 'cssClass', 'disabled', 'enableActiveItemNavigation', 'enableNavigation', 'enablePersistence', 'enableRtl', 'itemTemplate', 'items', 'locale', 'maxItems', 'overflowMode', 'separatorTemplate', 'url', 'beforeItemRender', 'created', 'itemClick'];
 var modelProps$3 = ['activeItem'];
 var testProp$3 = getProps({ props: properties$3 });
@@ -885,187 +648,149 @@ for (var _i$3 = 0, modelProps_1$3 = modelProps$3; _i$3 < modelProps_1$3.length;
  * <ejs-breadcrumb :items='breadcrumbItems'></ejs-breadcrumb>
  * ```
  */
-var BreadcrumbComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$6(BreadcrumbComponent, _super);
-    function BreadcrumbComponent() {
-        var _this = _super.call(this, arguments) || this;
-        _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({});
-        _this.ej2Instances._trigger = _this.ej2Instances.trigger;
-        _this.ej2Instances.trigger = _this.trigger;
-        _this.bindProperties();
-        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
-        _this.ej2Instances.setProperties = _this.setProperties;
-        _this.ej2Instances.clearTemplate = _this.clearTemplate;
-        _this.updated = _this.updated;
-        return _this;
-    }
-    BreadcrumbComponent.prototype.clearTemplate = function (templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+var BreadcrumbComponent = vueDefineComponent({
+    name: 'BreadcrumbComponent',
+    mixins: [ComponentBase],
+    props: props$3,
+    watch: watch$3,
+    emits: emitProbs$3,
+    model: { event: 'modelchanged' },
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            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: {},
+        };
+    },
+    created: function () {
+        this.ej2Instances._trigger = this.ej2Instances.trigger;
+        this.ej2Instances.trigger = this.trigger;
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    render: function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
-                var tempName = templateNames_1[_i];
-                var elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
-                        var ele = elementCollection_1[_a];
-                        var destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('nav', slots);
+    },
+    methods: {
+        clearTemplate: function (templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                    var tempName = templateNames_1[_i];
+                    var elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                            var ele = elementCollection_1[_a];
+                            var destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    };
-    BreadcrumbComponent.prototype.setProperties = function (prop, muteOnChange) {
-        var _this = this;
-        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(function (key) {
-                _this.models.map(function (model) {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (_this.isVue3) {
-                            _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties: function (prop, muteOnChange) {
+            var _this = this;
+            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(function (key) {
+                    _this.models.map(function (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: function (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)) {
+                var key = this.models.toString().match(/checked|value/) || [];
+                var 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]);
                         }
                     }
-                });
-            });
-        }
-    };
-    BreadcrumbComponent.prototype.trigger = function (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)) {
-            var key = this.models.toString().match(/checked|value/) || [];
-            var 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)) {
+                var key = this.models.toString().match(/currentView|selectedDate/) || [];
+                var 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)) {
-            var key = this.models.toString().match(/currentView|selectedDate/) || [];
-            var 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);
-        }
-    };
-    BreadcrumbComponent.prototype.render = function (createElement) {
-        var h = !isExecute ? gh : createElement;
-        var slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('nav', slots);
-    };
-    BreadcrumbComponent.prototype.custom = function () {
-        this.updated();
-    };
-    BreadcrumbComponent = __decorate$6([
-        EJComponentDecorator({
-            props: properties$3,
-            model: {
-                event: 'modelchanged'
-            }
-        }, isExecute)
-        ,Options({
-            props: props,
-            watch: watch,
-            emits: emitProbs,
-            provide: function provide() {
-                return {
-                    custom: this.custom
-                };
-            }
-        })
-    ], BreadcrumbComponent);
-    return BreadcrumbComponent;
-}(ComponentBase));
+        },
+        custom: function () {
+            this.updated();
+        },
+    }
+});
 var BreadcrumbPlugin = {
     name: 'ejs-breadcrumb',
-    install: function (Vue$$1) {
-        Vue$$1.component(BreadcrumbPlugin.name, BreadcrumbComponent);
-        Vue$$1.component(BreadcrumbItemPlugin.name, BreadcrumbItemDirective);
-        Vue$$1.component(BreadcrumbItemsPlugin.name, BreadcrumbItemsDirective);
+    install: function (Vue) {
+        Vue.component(BreadcrumbPlugin.name, BreadcrumbComponent);
+        Vue.component(BreadcrumbItemPlugin.name, BreadcrumbItemDirective);
+        Vue.component(BreadcrumbItemsPlugin.name, BreadcrumbItemsDirective);
     }
 };
 
-var __extends$7 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
-var vueImport$3;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$3 = Vue;
-}
-else {
-    vueImport$3 = Vue$1;
-}
-var CarouselItemsDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$7(CarouselItemsDirective, _super);
-    function CarouselItemsDirective() {
-        return _super.call(this, arguments) || this;
-    }
-    CarouselItemsDirective.prototype.render = function (createElement) {
+var CarouselItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
         if (!isExecute) {
             var h = !isExecute ? gh : createElement;
             var slots = null;
@@ -1075,31 +800,22 @@ var CarouselItemsDirective = /** @__PURE__ @class */ (function (_super) {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    };
-    CarouselItemsDirective.prototype.updated = function () {
+    },
+    updated: function () {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    };
-    CarouselItemsDirective.prototype.getTag = function () {
-        return 'e-carousel-items';
-    };
-    CarouselItemsDirective = __decorate$7([
-        EJComponentDecorator({}, isExecute)
-        ,Options({
-            inject: {
-                custom: {
-                    default: null
-                }
-            }
-        })
-    ], CarouselItemsDirective);
-    return CarouselItemsDirective;
-}(vueImport$3));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-carousel-items';
+        }
+    }
+});
 var CarouselItemsPlugin = {
     name: 'e-carousel-items',
-    install: function (Vue$$1) {
-        Vue$$1.component(CarouselItemsPlugin.name, CarouselItemsDirective);
+    install: function (Vue) {
+        Vue.component(CarouselItemsPlugin.name, CarouselItemsDirective);
     }
 };
 /**
@@ -1114,49 +830,23 @@ var CarouselItemsPlugin = {
  * </ejs-carousel>
  * ```
  */
-var CarouselItemDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$7(CarouselItemDirective, _super);
-    function CarouselItemDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CarouselItemDirective.prototype.render = function () {
+var CarouselItemDirective = vueDefineComponent({
+    render: function () {
         return;
-    };
-    CarouselItemDirective.prototype.getTag = function () {
-        return 'e-carousel-item';
-    };
-    CarouselItemDirective = __decorate$7([
-        EJComponentDecorator({}, isExecute)
-    ], CarouselItemDirective);
-    return CarouselItemDirective;
-}(vueImport$3));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-carousel-item';
+        }
+    }
+});
 var CarouselItemPlugin = {
     name: 'e-carousel-item',
-    install: function (Vue$$1) {
-        Vue$$1.component(CarouselItemPlugin.name, CarouselItemDirective);
+    install: function (Vue) {
+        Vue.component(CarouselItemPlugin.name, CarouselItemDirective);
     }
 };
 
-var __extends$8 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
 var 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'];
 var modelProps$4 = ['selectedIndex'];
 var testProp$4 = getProps({ props: properties$4 });
@@ -1174,199 +864,161 @@ for (var _i$4 = 0, modelProps_1$4 = modelProps$4; _i$4 < modelProps_1$4.length;
  * <ejs-carousel :items='carouselItems'></ejs-carousel>
  * ```
  */
-var CarouselComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$8(CarouselComponent, _super);
-    function CarouselComponent() {
-        var _this = _super.call(this, arguments) || this;
-        _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({});
-        _this.ej2Instances._trigger = _this.ej2Instances.trigger;
-        _this.ej2Instances.trigger = _this.trigger;
-        _this.bindProperties();
-        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
-        _this.ej2Instances.setProperties = _this.setProperties;
-        _this.ej2Instances.clearTemplate = _this.clearTemplate;
-        _this.updated = _this.updated;
-        return _this;
-    }
-    CarouselComponent.prototype.clearTemplate = function (templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+var CarouselComponent = vueDefineComponent({
+    name: 'CarouselComponent',
+    mixins: [ComponentBase],
+    props: props$4,
+    watch: watch$4,
+    emits: emitProbs$4,
+    model: { event: 'modelchanged' },
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            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: {},
+        };
+    },
+    created: function () {
+        this.ej2Instances._trigger = this.ej2Instances.trigger;
+        this.ej2Instances.trigger = this.trigger;
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    render: function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
-                var tempName = templateNames_1[_i];
-                var elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
-                        var ele = elementCollection_1[_a];
-                        var destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate: function (templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                    var tempName = templateNames_1[_i];
+                    var elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                            var ele = elementCollection_1[_a];
+                            var destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    };
-    CarouselComponent.prototype.setProperties = function (prop, muteOnChange) {
-        var _this = this;
-        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(function (key) {
-                _this.models.map(function (model) {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (_this.isVue3) {
-                            _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties: function (prop, muteOnChange) {
+            var _this = this;
+            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(function (key) {
+                    _this.models.map(function (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: function (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)) {
+                var key = this.models.toString().match(/checked|value/) || [];
+                var 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]);
                         }
                     }
-                });
-            });
-        }
-    };
-    CarouselComponent.prototype.trigger = function (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)) {
-            var key = this.models.toString().match(/checked|value/) || [];
-            var 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)) {
+                var key = this.models.toString().match(/currentView|selectedDate/) || [];
+                var 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)) {
-            var key = this.models.toString().match(/currentView|selectedDate/) || [];
-            var 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);
-        }
-    };
-    CarouselComponent.prototype.render = function (createElement) {
-        var h = !isExecute ? gh : createElement;
-        var slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('div', slots);
-    };
-    CarouselComponent.prototype.custom = function () {
-        this.updated();
-    };
-    CarouselComponent.prototype.next = function () {
-        return this.ej2Instances.next();
-    };
-    CarouselComponent.prototype.pause = function () {
-        return this.ej2Instances.pause();
-    };
-    CarouselComponent.prototype.play = function () {
-        return this.ej2Instances.play();
-    };
-    CarouselComponent.prototype.prev = function () {
-        return this.ej2Instances.prev();
-    };
-    CarouselComponent = __decorate$8([
-        EJComponentDecorator({
-            props: properties$4,
-            model: {
-                event: 'modelchanged'
-            }
-        }, isExecute)
-        ,Options({
-            props: props,
-            watch: watch,
-            emits: emitProbs,
-            provide: function provide() {
-                return {
-                    custom: this.custom
-                };
-            }
-        })
-    ], CarouselComponent);
-    return CarouselComponent;
-}(ComponentBase));
+        },
+        custom: function () {
+            this.updated();
+        },
+        next: function () {
+            return this.ej2Instances.next();
+        },
+        pause: function () {
+            return this.ej2Instances.pause();
+        },
+        play: function () {
+            return this.ej2Instances.play();
+        },
+        prev: function () {
+            return this.ej2Instances.prev();
+        },
+    }
+});
 var CarouselPlugin = {
     name: 'ejs-carousel',
-    install: function (Vue$$1) {
-        Vue$$1.component(CarouselPlugin.name, CarouselComponent);
-        Vue$$1.component(CarouselItemPlugin.name, CarouselItemDirective);
-        Vue$$1.component(CarouselItemsPlugin.name, CarouselItemsDirective);
+    install: function (Vue) {
+        Vue.component(CarouselPlugin.name, CarouselComponent);
+        Vue.component(CarouselItemPlugin.name, CarouselItemDirective);
+        Vue.component(CarouselItemsPlugin.name, CarouselItemsDirective);
     }
 };
 
-var __extends$9 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
-var vueImport$4;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$4 = Vue;
-}
-else {
-    vueImport$4 = Vue$1;
-}
-var TabItemsDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$9(TabItemsDirective, _super);
-    function TabItemsDirective() {
-        return _super.call(this, arguments) || this;
-    }
-    TabItemsDirective.prototype.render = function (createElement) {
+var TabItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
         if (!isExecute) {
             var h = !isExecute ? gh : createElement;
             var slots = null;
@@ -1376,31 +1028,22 @@ var TabItemsDirective = /** @__PURE__ @class */ (function (_super) {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    };
-    TabItemsDirective.prototype.updated = function () {
+    },
+    updated: function () {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    };
-    TabItemsDirective.prototype.getTag = function () {
-        return 'e-tabitems';
-    };
-    TabItemsDirective = __decorate$9([
-        EJComponentDecorator({}, isExecute)
-        ,Options({
-            inject: {
-                custom: {
-                    default: null
-                }
-            }
-        })
-    ], TabItemsDirective);
-    return TabItemsDirective;
-}(vueImport$4));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-tabitems';
+        }
+    }
+});
 var TabItemsPlugin = {
     name: 'e-tabitems',
-    install: function (Vue$$1) {
-        Vue$$1.component(TabItemsPlugin.name, TabItemsDirective);
+    install: function (Vue) {
+        Vue.component(TabItemsPlugin.name, TabItemsDirective);
     }
 };
 /**
@@ -1415,49 +1058,23 @@ var TabItemsPlugin = {
  * </ejs-tab>
  * ```
  */
-var TabItemDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$9(TabItemDirective, _super);
-    function TabItemDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TabItemDirective.prototype.render = function () {
+var TabItemDirective = vueDefineComponent({
+    render: function () {
         return;
-    };
-    TabItemDirective.prototype.getTag = function () {
-        return 'e-tabitem';
-    };
-    TabItemDirective = __decorate$9([
-        EJComponentDecorator({}, isExecute)
-    ], TabItemDirective);
-    return TabItemDirective;
-}(vueImport$4));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-tabitem';
+        }
+    }
+});
 var TabItemPlugin = {
     name: 'e-tabitem',
-    install: function (Vue$$1) {
-        Vue$$1.component(TabItemPlugin.name, TabItemDirective);
+    install: function (Vue) {
+        Vue.component(TabItemPlugin.name, TabItemDirective);
     }
 };
 
-var __extends$10 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
 var 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'];
 var modelProps$5 = [];
 var testProp$5 = getProps({ props: properties$5 });
@@ -1475,160 +1092,134 @@ for (var _i$5 = 0, modelProps_1$5 = modelProps$5; _i$5 < modelProps_1$5.length;
  * <ejs-tab></ejs-tab>
  * ```
  */
-var TabComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$10(TabComponent, _super);
-    function TabComponent() {
-        var _this = _super.call(this, arguments) || this;
-        _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({});
-        _this.bindProperties();
-        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
-        _this.ej2Instances.setProperties = _this.setProperties;
-        _this.ej2Instances.clearTemplate = _this.clearTemplate;
-        _this.updated = _this.updated;
-        return _this;
-    }
-    TabComponent.prototype.clearTemplate = function (templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+var TabComponent = vueDefineComponent({
+    name: 'TabComponent',
+    mixins: [ComponentBase],
+    props: props$5,
+    watch: watch$5,
+    emits: emitProbs$5,
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            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: {},
+        };
+    },
+    created: function () {
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    render: function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
-                var tempName = templateNames_1[_i];
-                var elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
-                        var ele = elementCollection_1[_a];
-                        var destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate: function (templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                    var tempName = templateNames_1[_i];
+                    var elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                            var ele = elementCollection_1[_a];
+                            var destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    };
-    TabComponent.prototype.setProperties = function (prop, muteOnChange) {
-        var _this = this;
-        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(function (key) {
-                _this.models.map(function (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]);
+        },
+        setProperties: function (prop, muteOnChange) {
+            var _this = this;
+            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(function (key) {
+                    _this.models.map(function (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]);
+                            }
                         }
-                    }
+                    });
                 });
-            });
-        }
-    };
-    TabComponent.prototype.render = function (createElement) {
-        var h = !isExecute ? gh : createElement;
-        var slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('div', slots);
-    };
-    TabComponent.prototype.custom = function () {
-        this.updated();
-    };
-    TabComponent.prototype.addTab = function (items, index) {
-        return this.ej2Instances.addTab(items, index);
-    };
-    TabComponent.prototype.disable = function (value) {
-        return this.ej2Instances.disable(value);
-    };
-    TabComponent.prototype.enableTab = function (index, value) {
-        return this.ej2Instances.enableTab(index, value);
-    };
-    TabComponent.prototype.getItemIndex = function (tabItemId) {
-        return this.ej2Instances.getItemIndex(tabItemId);
-    };
-    TabComponent.prototype.hideTab = function (index, value) {
-        return this.ej2Instances.hideTab(index, value);
-    };
-    TabComponent.prototype.refresh = function () {
-        return this.ej2Instances.refresh();
-    };
-    TabComponent.prototype.refreshActiveTab = function () {
-        return this.ej2Instances.refreshActiveTab();
-    };
-    TabComponent.prototype.refreshActiveTabBorder = function () {
-        return this.ej2Instances.refreshActiveTabBorder();
-    };
-    TabComponent.prototype.removeTab = function (index) {
-        return this.ej2Instances.removeTab(index);
-    };
-    TabComponent.prototype.select = function (args, event) {
-        return this.ej2Instances.select(args, event);
-    };
-    TabComponent = __decorate$10([
-        EJComponentDecorator({
-            props: properties$5
-        }, isExecute)
-        ,Options({
-            props: props,
-            watch: watch,
-            emits: emitProbs,
-            provide: function provide() {
-                return {
-                    custom: this.custom
-                };
-            }
-        })
-    ], TabComponent);
-    return TabComponent;
-}(ComponentBase));
+            }
+        },
+        custom: function () {
+            this.updated();
+        },
+        addTab: function (items, index) {
+            return this.ej2Instances.addTab(items, index);
+        },
+        disable: function (value) {
+            return this.ej2Instances.disable(value);
+        },
+        enableTab: function (index, value) {
+            return this.ej2Instances.enableTab(index, value);
+        },
+        getItemIndex: function (tabItemId) {
+            return this.ej2Instances.getItemIndex(tabItemId);
+        },
+        hideTab: function (index, value) {
+            return this.ej2Instances.hideTab(index, value);
+        },
+        refresh: function () {
+            return this.ej2Instances.refresh();
+        },
+        refreshActiveTab: function () {
+            return this.ej2Instances.refreshActiveTab();
+        },
+        refreshActiveTabBorder: function () {
+            return this.ej2Instances.refreshActiveTabBorder();
+        },
+        removeTab: function (index) {
+            return this.ej2Instances.removeTab(index);
+        },
+        select: function (args, event) {
+            return this.ej2Instances.select(args, event);
+        },
+    }
+});
 var TabPlugin = {
     name: 'ejs-tab',
-    install: function (Vue$$1) {
-        Vue$$1.component(TabPlugin.name, TabComponent);
-        Vue$$1.component(TabItemPlugin.name, TabItemDirective);
-        Vue$$1.component(TabItemsPlugin.name, TabItemsDirective);
+    install: function (Vue) {
+        Vue.component(TabPlugin.name, TabComponent);
+        Vue.component(TabItemPlugin.name, TabItemDirective);
+        Vue.component(TabItemsPlugin.name, TabItemsDirective);
     }
 };
 
-var __extends$11 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
 var 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'];
 var modelProps$6 = [];
 var testProp$6 = getProps({ props: properties$6 });
@@ -1646,179 +1237,153 @@ for (var _i$6 = 0, modelProps_1$6 = modelProps$6; _i$6 < modelProps_1$6.length;
  * <ejs-treeview></ejs-treeview>
  * ```
  */
-var TreeViewComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$11(TreeViewComponent, _super);
-    function TreeViewComponent() {
-        var _this = _super.call(this, arguments) || this;
-        _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({});
-        _this.bindProperties();
-        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
-        _this.ej2Instances.setProperties = _this.setProperties;
-        _this.ej2Instances.clearTemplate = _this.clearTemplate;
-        _this.updated = _this.updated;
-        return _this;
-    }
-    TreeViewComponent.prototype.clearTemplate = function (templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+var TreeViewComponent = vueDefineComponent({
+    name: 'TreeViewComponent',
+    mixins: [ComponentBase],
+    props: props$6,
+    watch: watch$6,
+    emits: emitProbs$6,
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            ej2Instances: new TreeView({}),
+            propKeys: properties$6,
+            models: modelProps$6,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
+        };
+    },
+    created: function () {
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    render: function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
-                var tempName = templateNames_1[_i];
-                var elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
-                        var ele = elementCollection_1[_a];
-                        var destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate: function (templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                    var tempName = templateNames_1[_i];
+                    var elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                            var ele = elementCollection_1[_a];
+                            var destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    };
-    TreeViewComponent.prototype.setProperties = function (prop, muteOnChange) {
-        var _this = this;
-        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(function (key) {
-                _this.models.map(function (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]);
+        },
+        setProperties: function (prop, muteOnChange) {
+            var _this = this;
+            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(function (key) {
+                    _this.models.map(function (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]);
+                            }
                         }
-                    }
+                    });
                 });
-            });
-        }
-    };
-    TreeViewComponent.prototype.render = function (createElement) {
-        var h = !isExecute ? gh : createElement;
-        var slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('div', slots);
-    };
-    TreeViewComponent.prototype.custom = function () {
-        this.updated();
-    };
-    TreeViewComponent.prototype.addNodes = function (nodes, target, index, preventTargetExpand) {
-        return this.ej2Instances.addNodes(nodes, target, index, preventTargetExpand);
-    };
-    TreeViewComponent.prototype.beginEdit = function (node) {
-        return this.ej2Instances.beginEdit(node);
-    };
-    TreeViewComponent.prototype.checkAll = function (nodes) {
-        return this.ej2Instances.checkAll(nodes);
-    };
-    TreeViewComponent.prototype.collapseAll = function (nodes, level, excludeHiddenNodes) {
-        return this.ej2Instances.collapseAll(nodes, level, excludeHiddenNodes);
-    };
-    TreeViewComponent.prototype.disableNodes = function (nodes) {
-        return this.ej2Instances.disableNodes(nodes);
-    };
-    TreeViewComponent.prototype.enableNodes = function (nodes) {
-        return this.ej2Instances.enableNodes(nodes);
-    };
-    TreeViewComponent.prototype.ensureVisible = function (node) {
-        return this.ej2Instances.ensureVisible(node);
-    };
-    TreeViewComponent.prototype.expandAll = function (nodes, level, excludeHiddenNodes) {
-        return this.ej2Instances.expandAll(nodes, level, excludeHiddenNodes);
-    };
-    TreeViewComponent.prototype.getAllCheckedNodes = function () {
-        return this.ej2Instances.getAllCheckedNodes();
-    };
-    TreeViewComponent.prototype.getDisabledNodes = function () {
-        return this.ej2Instances.getDisabledNodes();
-    };
-    TreeViewComponent.prototype.getNode = function (node) {
-        return this.ej2Instances.getNode(node);
-    };
-    TreeViewComponent.prototype.getTreeData = function (node) {
-        return this.ej2Instances.getTreeData(node);
-    };
-    TreeViewComponent.prototype.moveNodes = function (sourceNodes, target, index, preventTargetExpand) {
-        return this.ej2Instances.moveNodes(sourceNodes, target, index, preventTargetExpand);
-    };
-    TreeViewComponent.prototype.refreshNode = function (target, newData) {
-        return this.ej2Instances.refreshNode(target, newData);
-    };
-    TreeViewComponent.prototype.removeNodes = function (nodes) {
-        return this.ej2Instances.removeNodes(nodes);
-    };
-    TreeViewComponent.prototype.uncheckAll = function (nodes) {
-        return this.ej2Instances.uncheckAll(nodes);
-    };
-    TreeViewComponent.prototype.updateNode = function (target, newText) {
-        return this.ej2Instances.updateNode(target, newText);
-    };
-    TreeViewComponent = __decorate$11([
-        EJComponentDecorator({
-            props: properties$6
-        }, isExecute)
-        ,Options({
-            props: props,
-            watch: watch,
-            emits: emitProbs,
-            provide: function provide() {
-                return {
-                    custom: this.custom
-                };
-            }
-        })
-    ], TreeViewComponent);
-    return TreeViewComponent;
-}(ComponentBase));
+            }
+        },
+        custom: function () {
+            this.updated();
+        },
+        addNodes: function (nodes, target, index, preventTargetExpand) {
+            return this.ej2Instances.addNodes(nodes, target, index, preventTargetExpand);
+        },
+        beginEdit: function (node) {
+            return this.ej2Instances.beginEdit(node);
+        },
+        checkAll: function (nodes) {
+            return this.ej2Instances.checkAll(nodes);
+        },
+        collapseAll: function (nodes, level, excludeHiddenNodes) {
+            return this.ej2Instances.collapseAll(nodes, level, excludeHiddenNodes);
+        },
+        disableNodes: function (nodes) {
+            return this.ej2Instances.disableNodes(nodes);
+        },
+        enableNodes: function (nodes) {
+            return this.ej2Instances.enableNodes(nodes);
+        },
+        ensureVisible: function (node) {
+            return this.ej2Instances.ensureVisible(node);
+        },
+        expandAll: function (nodes, level, excludeHiddenNodes) {
+            return this.ej2Instances.expandAll(nodes, level, excludeHiddenNodes);
+        },
+        getAllCheckedNodes: function () {
+            return this.ej2Instances.getAllCheckedNodes();
+        },
+        getDisabledNodes: function () {
+            return this.ej2Instances.getDisabledNodes();
+        },
+        getNode: function (node) {
+            return this.ej2Instances.getNode(node);
+        },
+        getTreeData: function (node) {
+            return this.ej2Instances.getTreeData(node);
+        },
+        moveNodes: function (sourceNodes, target, index, preventTargetExpand) {
+            return this.ej2Instances.moveNodes(sourceNodes, target, index, preventTargetExpand);
+        },
+        refreshNode: function (target, newData) {
+            return this.ej2Instances.refreshNode(target, newData);
+        },
+        removeNodes: function (nodes) {
+            return this.ej2Instances.removeNodes(nodes);
+        },
+        uncheckAll: function (nodes) {
+            return this.ej2Instances.uncheckAll(nodes);
+        },
+        updateNode: function (target, newText) {
+            return this.ej2Instances.updateNode(target, newText);
+        },
+    }
+});
 var TreeViewPlugin = {
     name: 'ejs-treeview',
-    install: function (Vue$$1) {
-        Vue$$1.component(TreeViewPlugin.name, TreeViewComponent);
+    install: function (Vue) {
+        Vue.component(TreeViewPlugin.name, TreeViewComponent);
     }
 };
 
-var __extends$12 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
 var 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'];
 var modelProps$7 = ['isOpen'];
 var testProp$7 = getProps({ props: properties$7 });
@@ -1836,194 +1401,156 @@ for (var _i$7 = 0, modelProps_1$7 = modelProps$7; _i$7 < modelProps_1$7.length;
  * <ejs-sidebar></ejs-sidebar>
  * ```
  */
-var SidebarComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$12(SidebarComponent, _super);
-    function SidebarComponent() {
-        var _this = _super.call(this, arguments) || this;
-        _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({});
-        _this.ej2Instances._trigger = _this.ej2Instances.trigger;
-        _this.ej2Instances.trigger = _this.trigger;
-        _this.bindProperties();
-        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
-        _this.ej2Instances.setProperties = _this.setProperties;
-        _this.ej2Instances.clearTemplate = _this.clearTemplate;
-        _this.updated = _this.updated;
-        return _this;
-    }
-    SidebarComponent.prototype.clearTemplate = function (templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+var SidebarComponent = vueDefineComponent({
+    name: 'SidebarComponent',
+    mixins: [ComponentBase],
+    props: props$7,
+    watch: watch$7,
+    emits: emitProbs$7,
+    model: { event: 'modelchanged' },
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            ej2Instances: new Sidebar({}),
+            propKeys: properties$7,
+            models: modelProps$7,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
+        };
+    },
+    created: function () {
+        this.ej2Instances._trigger = this.ej2Instances.trigger;
+        this.ej2Instances.trigger = this.trigger;
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    render: function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
-                var tempName = templateNames_1[_i];
-                var elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
-                        var ele = elementCollection_1[_a];
-                        var destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate: function (templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                    var tempName = templateNames_1[_i];
+                    var elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                            var ele = elementCollection_1[_a];
+                            var destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    };
-    SidebarComponent.prototype.setProperties = function (prop, muteOnChange) {
-        var _this = this;
-        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(function (key) {
-                _this.models.map(function (model) {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (_this.isVue3) {
-                            _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties: function (prop, muteOnChange) {
+            var _this = this;
+            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(function (key) {
+                    _this.models.map(function (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: function (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)) {
+                var key = this.models.toString().match(/checked|value/) || [];
+                var 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]);
                         }
                     }
-                });
-            });
-        }
-    };
-    SidebarComponent.prototype.trigger = function (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)) {
-            var key = this.models.toString().match(/checked|value/) || [];
-            var 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)) {
+                var key = this.models.toString().match(/currentView|selectedDate/) || [];
+                var 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)) {
-            var key = this.models.toString().match(/currentView|selectedDate/) || [];
-            var 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);
-        }
-    };
-    SidebarComponent.prototype.render = function (createElement) {
-        var h = !isExecute ? gh : createElement;
-        var slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('div', slots);
-    };
-    SidebarComponent.prototype.custom = function () {
-        this.updated();
-    };
-    SidebarComponent.prototype.hide = function (e) {
-        return this.ej2Instances.hide(e);
-    };
-    SidebarComponent.prototype.show = function (e) {
-        return this.ej2Instances.show(e);
-    };
-    SidebarComponent.prototype.toggle = function () {
-        return this.ej2Instances.toggle();
-    };
-    SidebarComponent = __decorate$12([
-        EJComponentDecorator({
-            props: properties$7,
-            model: {
-                event: 'modelchanged'
-            }
-        }, isExecute)
-        ,Options({
-            props: props,
-            watch: watch,
-            emits: emitProbs,
-            provide: function provide() {
-                return {
-                    custom: this.custom
-                };
-            }
-        })
-    ], SidebarComponent);
-    return SidebarComponent;
-}(ComponentBase));
+        },
+        custom: function () {
+            this.updated();
+        },
+        hide: function (e) {
+            return this.ej2Instances.hide(e);
+        },
+        show: function (e) {
+            return this.ej2Instances.show(e);
+        },
+        toggle: function () {
+            return this.ej2Instances.toggle();
+        },
+    }
+});
 var SidebarPlugin = {
     name: 'ejs-sidebar',
-    install: function (Vue$$1) {
-        Vue$$1.component(SidebarPlugin.name, SidebarComponent);
+    install: function (Vue) {
+        Vue.component(SidebarPlugin.name, SidebarComponent);
     }
 };
 
-var __extends$13 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
-var vueImport$5;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$5 = Vue;
-}
-else {
-    vueImport$5 = Vue$1;
-}
-var MenuItemsDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$13(MenuItemsDirective, _super);
-    function MenuItemsDirective() {
-        return _super.call(this, arguments) || this;
-    }
-    MenuItemsDirective.prototype.render = function (createElement) {
+var MenuItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
         if (!isExecute) {
             var h = !isExecute ? gh : createElement;
             var slots = null;
@@ -2033,76 +1560,41 @@ var MenuItemsDirective = /** @__PURE__ @class */ (function (_super) {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    };
-    MenuItemsDirective.prototype.updated = function () {
+    },
+    updated: function () {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    };
-    MenuItemsDirective.prototype.getTag = function () {
-        return 'e-menu-items';
-    };
-    MenuItemsDirective = __decorate$13([
-        EJComponentDecorator({}, isExecute)
-        ,Options({
-            inject: {
-                custom: {
-                    default: null
-                }
-            }
-        })
-    ], MenuItemsDirective);
-    return MenuItemsDirective;
-}(vueImport$5));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-menu-items';
+        }
+    }
+});
 var MenuItemsPlugin = {
     name: 'e-menu-items',
-    install: function (Vue$$1) {
-        Vue$$1.component(MenuItemsPlugin.name, MenuItemsDirective);
+    install: function (Vue) {
+        Vue.component(MenuItemsPlugin.name, MenuItemsDirective);
     }
 };
-var MenuItemDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$13(MenuItemDirective, _super);
-    function MenuItemDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MenuItemDirective.prototype.render = function () {
+var MenuItemDirective = vueDefineComponent({
+    render: function () {
         return;
-    };
-    MenuItemDirective.prototype.getTag = function () {
-        return 'e-';
-    };
-    MenuItemDirective = __decorate$13([
-        EJComponentDecorator({}, isExecute)
-    ], MenuItemDirective);
-    return MenuItemDirective;
-}(vueImport$5));
+    },
+    methods: {
+        getTag: function () {
+            return 'e-';
+        }
+    }
+});
 var MenuItemPlugin = {
     name: 'e-',
-    install: function (Vue$$1) {
-        Vue$$1.component(MenuItemPlugin.name, MenuItemDirective);
+    install: function (Vue) {
+        Vue.component(MenuItemPlugin.name, MenuItemDirective);
     }
 };
 
-var __extends$14 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
 var 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'];
 var modelProps$8 = [];
 var testProp$8 = getProps({ props: properties$8 });
@@ -2120,160 +1612,134 @@ for (var _i$8 = 0, modelProps_1$8 = modelProps$8; _i$8 < modelProps_1$8.length;
  * <ejs-menu :items='menuItems'></ejs-menu>
  * ```
  */
-var MenuComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$14(MenuComponent, _super);
-    function MenuComponent() {
-        var _this = _super.call(this, arguments) || this;
-        _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({});
-        _this.bindProperties();
-        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
-        _this.ej2Instances.setProperties = _this.setProperties;
-        _this.ej2Instances.clearTemplate = _this.clearTemplate;
-        _this.updated = _this.updated;
-        return _this;
-    }
-    MenuComponent.prototype.clearTemplate = function (templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+var MenuComponent = vueDefineComponent({
+    name: 'MenuComponent',
+    mixins: [ComponentBase],
+    props: props$8,
+    watch: watch$8,
+    emits: emitProbs$8,
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            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: {},
+        };
+    },
+    created: function () {
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    render: function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
-                var tempName = templateNames_1[_i];
-                var elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
-                        var ele = elementCollection_1[_a];
-                        var destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('ul', slots);
+    },
+    methods: {
+        clearTemplate: function (templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                    var tempName = templateNames_1[_i];
+                    var elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                            var ele = elementCollection_1[_a];
+                            var destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    };
-    MenuComponent.prototype.setProperties = function (prop, muteOnChange) {
-        var _this = this;
-        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(function (key) {
-                _this.models.map(function (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]);
+        },
+        setProperties: function (prop, muteOnChange) {
+            var _this = this;
+            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(function (key) {
+                    _this.models.map(function (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]);
+                            }
                         }
-                    }
+                    });
                 });
-            });
-        }
-    };
-    MenuComponent.prototype.render = function (createElement) {
-        var h = !isExecute ? gh : createElement;
-        var slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('ul', slots);
-    };
-    MenuComponent.prototype.custom = function () {
-        this.updated();
-    };
-    MenuComponent.prototype.close = function () {
-        return this.ej2Instances.close();
-    };
-    MenuComponent.prototype.enableItems = function (items, enable, isUniqueId) {
-        return this.ej2Instances.enableItems(items, enable, isUniqueId);
-    };
-    MenuComponent.prototype.getItemIndex = function (item, isUniqueId) {
-        return this.ej2Instances.getItemIndex(item, isUniqueId);
-    };
-    MenuComponent.prototype.hideItems = function (items, isUniqueId) {
-        return this.ej2Instances.hideItems(items, isUniqueId);
-    };
-    MenuComponent.prototype.insertAfter = function (items, text, isUniqueId) {
-        return this.ej2Instances.insertAfter(items, text, isUniqueId);
-    };
-    MenuComponent.prototype.insertBefore = function (items, text, isUniqueId) {
-        return this.ej2Instances.insertBefore(items, text, isUniqueId);
-    };
-    MenuComponent.prototype.open = function () {
-        return this.ej2Instances.open();
-    };
-    MenuComponent.prototype.removeItems = function (items, isUniqueId) {
-        return this.ej2Instances.removeItems(items, isUniqueId);
-    };
-    MenuComponent.prototype.setItem = function (item, id, isUniqueId) {
-        return this.ej2Instances.setItem(item, id, isUniqueId);
-    };
-    MenuComponent.prototype.showItems = function (items, isUniqueId) {
-        return this.ej2Instances.showItems(items, isUniqueId);
-    };
-    MenuComponent = __decorate$14([
-        EJComponentDecorator({
-            props: properties$8
-        }, isExecute)
-        ,Options({
-            props: props,
-            watch: watch,
-            emits: emitProbs,
-            provide: function provide() {
-                return {
-                    custom: this.custom
-                };
-            }
-        })
-    ], MenuComponent);
-    return MenuComponent;
-}(ComponentBase));
+            }
+        },
+        custom: function () {
+            this.updated();
+        },
+        close: function () {
+            return this.ej2Instances.close();
+        },
+        enableItems: function (items, enable, isUniqueId) {
+            return this.ej2Instances.enableItems(items, enable, isUniqueId);
+        },
+        getItemIndex: function (item, isUniqueId) {
+            return this.ej2Instances.getItemIndex(item, isUniqueId);
+        },
+        hideItems: function (items, isUniqueId) {
+            return this.ej2Instances.hideItems(items, isUniqueId);
+        },
+        insertAfter: function (items, text, isUniqueId) {
+            return this.ej2Instances.insertAfter(items, text, isUniqueId);
+        },
+        insertBefore: function (items, text, isUniqueId) {
+            return this.ej2Instances.insertBefore(items, text, isUniqueId);
+        },
+        open: function () {
+            return this.ej2Instances.open();
+        },
+        removeItems: function (items, isUniqueId) {
+            return this.ej2Instances.removeItems(items, isUniqueId);
+        },
+        setItem: function (item, id, isUniqueId) {
+            return this.ej2Instances.setItem(item, id, isUniqueId);
+        },
+        showItems: function (items, isUniqueId) {
+            return this.ej2Instances.showItems(items, isUniqueId);
+        },
+    }
+});
 var MenuPlugin = {
     name: 'ejs-menu',
-    install: function (Vue$$1) {
-        Vue$$1.component(MenuPlugin.name, MenuComponent);
-        Vue$$1.component(MenuItemPlugin.name, MenuItemDirective);
-        Vue$$1.component(MenuItemsPlugin.name, MenuItemsDirective);
+    install: function (Vue) {
+        Vue.component(MenuPlugin.name, MenuComponent);
+        Vue.component(MenuItemPlugin.name, MenuItemDirective);
+        Vue.component(MenuItemsPlugin.name, MenuItemsDirective);
     }
 };
 
-var __extends$15 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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}}
 var properties$9 = ['isLazyUpdate', 'plugins', 'colorMode', 'cssClass', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'isSticky', 'locale', 'mode', 'position', 'created', 'destroyed'];
 var modelProps$9 = [];
 var testProp$9 = getProps({ props: properties$9 });
@@ -2291,105 +1757,99 @@ for (var _i$9 = 0, modelProps_1$9 = modelProps$9; _i$9 < modelProps_1$9.length;
  * <ejs-appbar></ejs-appbar>
  * ```
  */
-var AppBarComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$15(AppBarComponent, _super);
-    function AppBarComponent() {
-        var _this = _super.call(this, arguments) || this;
-        _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({});
-        _this.bindProperties();
-        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
-        _this.ej2Instances.setProperties = _this.setProperties;
-        _this.ej2Instances.clearTemplate = _this.clearTemplate;
-        _this.updated = _this.updated;
-        return _this;
-    }
-    AppBarComponent.prototype.clearTemplate = function (templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+var AppBarComponent = vueDefineComponent({
+    name: 'AppBarComponent',
+    mixins: [ComponentBase],
+    props: props$9,
+    watch: watch$9,
+    emits: emitProbs$9,
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            ej2Instances: new AppBar({}),
+            propKeys: properties$9,
+            models: modelProps$9,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
+        };
+    },
+    created: function () {
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    render: function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
-        if (templateNames.length && this.templateCollection) {
-            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
-                var tempName = templateNames_1[_i];
-                var elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
-                        var ele = elementCollection_1[_a];
-                        var destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+        return h('header', slots);
+    },
+    methods: {
+        clearTemplate: function (templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                    var tempName = templateNames_1[_i];
+                    var elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                            var ele = elementCollection_1[_a];
+                            var destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    };
-    AppBarComponent.prototype.setProperties = function (prop, muteOnChange) {
-        var _this = this;
-        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(function (key) {
-                _this.models.map(function (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]);
+        },
+        setProperties: function (prop, muteOnChange) {
+            var _this = this;
+            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(function (key) {
+                    _this.models.map(function (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]);
+                            }
                         }
-                    }
+                    });
                 });
-            });
-        }
-    };
-    AppBarComponent.prototype.render = function (createElement) {
-        var h = !isExecute ? gh : createElement;
-        var slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('header', slots);
-    };
-    AppBarComponent.prototype.custom = function () {
-        this.updated();
-    };
-    AppBarComponent = __decorate$15([
-        EJComponentDecorator({
-            props: properties$9
-        }, isExecute)
-        ,Options({
-            props: props,
-            watch: watch,
-            emits: emitProbs,
-            provide: function provide() {
-                return {
-                    custom: this.custom
-                };
-            }
-        })
-    ], AppBarComponent);
-    return AppBarComponent;
-}(ComponentBase));
+            }
+        },
+        custom: function () {
+            this.updated();
+        },
+    }
+});
 var AppBarPlugin = {
     name: 'ejs-appbar',
-    install: function (Vue$$1) {
-        Vue$$1.component(AppBarPlugin.name, AppBarComponent);
+    install: function (Vue) {
+        Vue.component(AppBarPlugin.name, AppBarComponent);
     }
 };