@syncfusion/ej2-vue-layouts 20.4.53 → 21.1.36

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-layouts@*",
-  "_id": "@syncfusion/ej2-vue-layouts@20.4.48",
+  "_id": "@syncfusion/ej2-vue-layouts@22.1.34",
   "_inBundle": false,
-  "_integrity": "sha512-Yf+ZjXFWHNI764rCOTkmmaliXL6bmdaWMWlGv/Biw/0jCqMdoeYMDdfWhVLJiw+8DGIZ0knKO0MpDnc2pCaVug==",
+  "_integrity": "sha512-4Kt3+oKBhp6SKhIkKA+8VY3QvdUaoLzg7CoT/OX8A8s+CLWb7mEG1nsvGRaHWH0vLgbiQ4ZPgu8d5L2IwJtaTw==",
   "_location": "/@syncfusion/ej2-vue-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -19,10 +19,10 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-layouts/-/ej2-vue-layouts-20.4.48.tgz",
-  "_shasum": "2d92bb6b4a059ae7ef3d8b524077a453443c34ba",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-layouts/-/ej2-vue-layouts-22.1.34.tgz",
+  "_shasum": "e607a5b7558a1699dcb8a3499cfa39408fca5966",
   "_spec": "@syncfusion/ej2-vue-layouts@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.51",
-    "@syncfusion/ej2-layouts": "20.4.53",
-    "@syncfusion/ej2-vue-base": "~20.4.51"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-layouts": "21.1.36",
+    "@syncfusion/ej2-vue-base": "~22.1.34"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person. for Vue",
@@ -57,8 +57,9 @@
     "url": "git+https://github.com/syncfusion/ej2-vue-ui-components.git"
   },
   "scripts": {
-    "postinstall": "node ../ej2-vue-base/postinstall.js"
+    "ci-publish": "gulp ci-publish",
+    "compile": "gulp ci-compile && gulp vue-global-script"
   },
-  "version": "20.4.53",
+  "version": "21.1.36",
   "sideEffects": false
 }

package/src/dashboard-layout/dashboardlayout.component.d.ts

@@ -1,42 +1,15 @@
-import { ComponentBase } from '@syncfusion/ej2-vue-base';
 export declare const properties: string[];
 export declare const modelProps: string[];
 export declare const testProp: any;
-export declare const props: any;
-export declare const watch: any;
-export declare const emitProbs: any;
+export declare const props: any, watch: any, emitProbs: any;
 /**
  * Represents the Essential JS 2 VueJS DashboardLayout Component.
  * ```html
  * <ejs-dashboardlayout></ejs-dashboardlayout>
  * ```
  */
-export declare class DashboardLayoutComponent extends ComponentBase {
-    ej2Instances: any;
-    propKeys: string[];
-    models: string[];
-    hasChildDirective: boolean;
-    protected hasInjectedModules: boolean;
-    tagMapper: {
-        [key: string]: Object;
-    };
-    tagNameMapper: Object;
-    isVue3: boolean;
-    templateCollection: any;
-    constructor();
-    clearTemplate(templateNames?: string[]): any;
-    setProperties(prop: any, muteOnChange: boolean): void;
-    render(createElement: any): any;
-    custom(): void;
-    addPanel(panel: Object): void;
-    movePanel(id: string, row: number, col: number): void;
-    refresh(): void;
-    removeAll(): void;
-    removePanel(id: string): void;
-    resizePanel(id: string, sizeX: number, sizeY: number): void;
-    serialize(): Object[];
-    updatePanel(panel: Object): void;
-}
+export declare let DashboardLayoutComponent: any;
+export declare type DashboardLayoutComponent = InstanceType<typeof DashboardLayoutComponent>;
 export declare const DashboardLayoutPlugin: {
     name: string;
     install(Vue: any): void;

package/src/dashboard-layout/dashboardlayout.component.js

@@ -1,33 +1,11 @@
-var __extends = (this && this.__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 = (this && this.__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 { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
+import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
 import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { DashboardLayout } from '@syncfusion/ej2-layouts';
 import { PanelsDirective, PanelDirective, PanelsPlugin, PanelPlugin } from './panels.directive';
-import { Options } from 'vue-class-component';
 export var properties = ['isLazyUpdate', 'plugins', 'allowDragging', 'allowFloating', 'allowPushing', 'allowResizing', 'cellAspectRatio', 'cellSpacing', 'columns', 'draggableHandle', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'locale', 'mediaQuery', 'panels', 'resizableHandles', 'showGridLines', 'change', 'created', 'destroyed', 'drag', 'dragStart', 'dragStop', 'resize', 'resizeStart', 'resizeStop'];
 export var modelProps = [];
 export var testProp = getProps({ props: properties });
-export var props = testProp[0];
-export var watch = testProp[1];
-export var emitProbs = Object.keys(watch);
+export var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);
 emitProbs.push('modelchanged', 'update:modelValue');
 for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
     var props_1 = modelProps_1[_i];
@@ -39,126 +17,119 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
  * <ejs-dashboardlayout></ejs-dashboardlayout>
  * ```
  */
-var DashboardLayoutComponent = /** @class */ (function (_super) {
-    __extends(DashboardLayoutComponent, _super);
-    function DashboardLayoutComponent() {
-        var _this = _super.call(this, arguments) || this;
-        _this.propKeys = properties;
-        _this.models = modelProps;
-        _this.hasChildDirective = true;
-        _this.hasInjectedModules = false;
-        _this.tagMapper = { "e-panels": "e-panel" };
-        _this.tagNameMapper = {};
-        _this.isVue3 = !isExecute;
-        _this.ej2Instances = new DashboardLayout({});
-        _this.bindProperties();
-        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
-        _this.ej2Instances.setProperties = _this.setProperties;
-        _this.ej2Instances.clearTemplate = _this.clearTemplate;
-        _this.updated = _this.updated;
-        return _this;
-    }
-    DashboardLayoutComponent.prototype.clearTemplate = function (templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
+export var DashboardLayoutComponent = vueDefineComponent({
+    name: 'DashboardLayoutComponent',
+    mixins: [ComponentBase],
+    props: props,
+    watch: watch,
+    emits: emitProbs,
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            ej2Instance: new DashboardLayout({}),
+            propKeys: properties,
+            models: modelProps,
+            hasChildDirective: true,
+            hasInjectedModules: false,
+            tagMapper: { "e-panels": "e-panel" },
+            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];
                 }
             }
-        }
-    };
-    DashboardLayoutComponent.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]);
+                            }
                         }
-                    }
+                    });
                 });
-            });
-        }
-    };
-    DashboardLayoutComponent.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);
-    };
-    DashboardLayoutComponent.prototype.custom = function () {
-        this.updated();
-    };
-    DashboardLayoutComponent.prototype.addPanel = function (panel) {
-        return this.ej2Instances.addPanel(panel);
-    };
-    DashboardLayoutComponent.prototype.movePanel = function (id, row, col) {
-        return this.ej2Instances.movePanel(id, row, col);
-    };
-    DashboardLayoutComponent.prototype.refresh = function () {
-        return this.ej2Instances.refresh();
-    };
-    DashboardLayoutComponent.prototype.removeAll = function () {
-        return this.ej2Instances.removeAll();
-    };
-    DashboardLayoutComponent.prototype.removePanel = function (id) {
-        return this.ej2Instances.removePanel(id);
-    };
-    DashboardLayoutComponent.prototype.resizePanel = function (id, sizeX, sizeY) {
-        return this.ej2Instances.resizePanel(id, sizeX, sizeY);
-    };
-    DashboardLayoutComponent.prototype.serialize = function () {
-        return this.ej2Instances.serialize();
-    };
-    DashboardLayoutComponent.prototype.updatePanel = function (panel) {
-        return this.ej2Instances.updatePanel(panel);
-    };
-    DashboardLayoutComponent = __decorate([
-        EJComponentDecorator({
-            props: properties
-        }, isExecute)
-        ,Options({
-            props: props,
-            watch: watch,
-            emits: emitProbs,
-            provide: function provide() {
-                return {
-                    custom: this.custom
-                };
             }
-        })
-    ], DashboardLayoutComponent);
-    return DashboardLayoutComponent;
-}(ComponentBase));
-export { DashboardLayoutComponent };
+        },
+        custom: function () {
+            this.updated();
+        },
+        addPanel: function (panel) {
+            return this.ej2Instances.addPanel(panel);
+        },
+        movePanel: function (id, row, col) {
+            return this.ej2Instances.movePanel(id, row, col);
+        },
+        refresh: function () {
+            return this.ej2Instances.refresh();
+        },
+        removeAll: function () {
+            return this.ej2Instances.removeAll();
+        },
+        removePanel: function (id) {
+            return this.ej2Instances.removePanel(id);
+        },
+        resizePanel: function (id, sizeX, sizeY) {
+            return this.ej2Instances.resizePanel(id, sizeX, sizeY);
+        },
+        serialize: function () {
+            return this.ej2Instances.serialize();
+        },
+        updatePanel: function (panel) {
+            return this.ej2Instances.updatePanel(panel);
+        },
+    }
+});
 export var DashboardLayoutPlugin = {
     name: 'ejs-dashboardlayout',
     install: function (Vue) {

package/src/dashboard-layout/panels.directive.d.ts

@@ -1,10 +1,4 @@
-declare let vueImport: any;
-export declare class PanelsDirective extends vueImport {
-    constructor();
-    render(createElement: any): void;
-    updated(): void;
-    getTag(): string;
-}
+export declare let PanelsDirective: any;
 export declare const PanelsPlugin: {
     name: string;
     install(Vue: any): void;
@@ -21,12 +15,8 @@ export declare const PanelsPlugin: {
  * </ejs-dashboardlayout>
  * ```
  */
-export declare class PanelDirective extends vueImport {
-    render(): void;
-    getTag(): string;
-}
+export declare let PanelDirective: any;
 export declare const PanelPlugin: {
     name: string;
     install(Vue: any): void;
 };
-export {};

package/src/dashboard-layout/panels.directive.js

@@ -1,40 +1,8 @@
-var __extends = (this && this.__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 = (this && this.__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 { EJComponentDecorator, allVue, gh, isExecute } from '@syncfusion/ej2-vue-base';
-import * as Vue3 from 'vue-class-component';
+import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
-import Vue from 'vue';
-import { Options } from 'vue-class-component';
-var vueImport;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport = Vue3.Vue;
-}
-else {
-    vueImport = Vue;
-}
-var PanelsDirective = /** @class */ (function (_super) {
-    __extends(PanelsDirective, _super);
-    function PanelsDirective() {
-        return _super.call(this, arguments) || this;
-    }
-    PanelsDirective.prototype.render = function (createElement) {
+export var PanelsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
         if (!isExecute) {
             var h = !isExecute ? gh : createElement;
             var slots = null;
@@ -44,28 +12,18 @@ var PanelsDirective = /** @class */ (function (_super) {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    };
-    PanelsDirective.prototype.updated = function () {
+    },
+    updated: function () {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    };
-    PanelsDirective.prototype.getTag = function () {
-        return 'e-panels';
-    };
-    PanelsDirective = __decorate([
-        EJComponentDecorator({}, isExecute)
-        ,Options({
-            inject: {
-                custom: {
-                    default: null
-                }
-            }
-        })
-    ], PanelsDirective);
-    return PanelsDirective;
-}(vueImport));
-export { PanelsDirective };
+    },
+    methods: {
+        getTag: function () {
+            return 'e-panels';
+        }
+    }
+});
 export var PanelsPlugin = {
     name: 'e-panels',
     install: function (Vue) {
@@ -84,23 +42,16 @@ export var PanelsPlugin = {
  * </ejs-dashboardlayout>
  * ```
  */
-var PanelDirective = /** @class */ (function (_super) {
-    __extends(PanelDirective, _super);
-    function PanelDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PanelDirective.prototype.render = function () {
+export var PanelDirective = vueDefineComponent({
+    render: function () {
         return;
-    };
-    PanelDirective.prototype.getTag = function () {
-        return 'e-panel';
-    };
-    PanelDirective = __decorate([
-        EJComponentDecorator({}, isExecute)
-    ], PanelDirective);
-    return PanelDirective;
-}(vueImport));
-export { PanelDirective };
+    },
+    methods: {
+        getTag: function () {
+            return 'e-panel';
+        }
+    }
+});
 export var PanelPlugin = {
     name: 'e-panel',
     install: function (Vue) {

package/src/splitter/panesettings.directive.d.ts

@@ -1,10 +1,4 @@
-declare let vueImport: any;
-export declare class PanesDirective extends vueImport {
-    constructor();
-    render(createElement: any): void;
-    updated(): void;
-    getTag(): string;
-}
+export declare let PanesDirective: any;
 export declare const PanesPlugin: {
     name: string;
     install(Vue: any): void;
@@ -21,12 +15,8 @@ export declare const PanesPlugin: {
  * </ejs-splitter>
  * ```
  */
-export declare class PaneDirective extends vueImport {
-    render(): void;
-    getTag(): string;
-}
+export declare let PaneDirective: any;
 export declare const PanePlugin: {
     name: string;
     install(Vue: any): void;
 };
-export {};

package/src/splitter/panesettings.directive.js

@@ -1,40 +1,8 @@
-var __extends = (this && this.__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 = (this && this.__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 { EJComponentDecorator, allVue, gh, isExecute } from '@syncfusion/ej2-vue-base';
-import * as Vue3 from 'vue-class-component';
+import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
-import Vue from 'vue';
-import { Options } from 'vue-class-component';
-var vueImport;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport = Vue3.Vue;
-}
-else {
-    vueImport = Vue;
-}
-var PanesDirective = /** @class */ (function (_super) {
-    __extends(PanesDirective, _super);
-    function PanesDirective() {
-        return _super.call(this, arguments) || this;
-    }
-    PanesDirective.prototype.render = function (createElement) {
+export var PanesDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
         if (!isExecute) {
             var h = !isExecute ? gh : createElement;
             var slots = null;
@@ -44,28 +12,18 @@ var PanesDirective = /** @class */ (function (_super) {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    };
-    PanesDirective.prototype.updated = function () {
+    },
+    updated: function () {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    };
-    PanesDirective.prototype.getTag = function () {
-        return 'e-panes';
-    };
-    PanesDirective = __decorate([
-        EJComponentDecorator({}, isExecute)
-        ,Options({
-            inject: {
-                custom: {
-                    default: null
-                }
-            }
-        })
-    ], PanesDirective);
-    return PanesDirective;
-}(vueImport));
-export { PanesDirective };
+    },
+    methods: {
+        getTag: function () {
+            return 'e-panes';
+        }
+    }
+});
 export var PanesPlugin = {
     name: 'e-panes',
     install: function (Vue) {
@@ -84,23 +42,16 @@ export var PanesPlugin = {
  * </ejs-splitter>
  * ```
  */
-var PaneDirective = /** @class */ (function (_super) {
-    __extends(PaneDirective, _super);
-    function PaneDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PaneDirective.prototype.render = function () {
+export var PaneDirective = vueDefineComponent({
+    render: function () {
         return;
-    };
-    PaneDirective.prototype.getTag = function () {
-        return 'e-pane';
-    };
-    PaneDirective = __decorate([
-        EJComponentDecorator({}, isExecute)
-    ], PaneDirective);
-    return PaneDirective;
-}(vueImport));
-export { PaneDirective };
+    },
+    methods: {
+        getTag: function () {
+            return 'e-pane';
+        }
+    }
+});
 export var PanePlugin = {
     name: 'e-pane',
     install: function (Vue) {