@syncfusion/ej2-vue-base 19.4.38 → 19.4.40

package/CHANGELOG.md

@@ -6,6 +6,14 @@
 
 #### Bug Fixes
 
+-  `I334904`, `I347008` - Compatability support for Vue components in Vite js has been resolved.
+
+## 19.4.38 (2021-12-17)
+
+### Common
+
+#### Bug Fixes
+
 -  `I348114` - Peer dependencies issue has been resolved.
 
 ## 19.3.47 (2021-10-26)

package/README.md

@@ -80,5 +80,5 @@ Check the license detail [here](https://github.com/syncfusion/ej2-vue-ui-compone
 
 Check the changelog [here](https://ej2.syncfusion.com/vue/documentation/release-notes?utm_source=npm&utm_campaign=ej2-vue-base)
 
-    © Copyright 2019 Syncfusion, Inc. All Rights Reserved.
+    © Copyright 2021 Syncfusion, Inc. All Rights Reserved.
     The Syncfusion Essential Studio license and copyright applies to this distribution.

package/dist/ej2-vue-base.umd.min.js

@@ -1,6 +1,15 @@
 /*!
 *  filename: ej2-vue-base.umd.min.js
-*  version : 19.4.38
+*  version : 19.4.40
+*  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
+*  Use of this code is subject to the terms of our license.
+*  A copy of the current license can be obtained at any time by e-mailing
+*  licensing@syncfusion.com. Any infringement will be prosecuted under
+*  applicable laws. 
+*/
+/*!
+*  filename: ej2-vue-base.umd.min.js
+*  version : 19.2.55
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/global/ej2-vue-base.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-vue-base.min.js
-*  version : 19.4.38
+*  version : 19.4.40
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.38
+*  version : 19.4.40
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-base@*",
-  "_id": "@syncfusion/ej2-vue-base@19.3.54",
+  "_id": "@syncfusion/ej2-vue-base@19.4.38",
   "_inBundle": false,
-  "_integrity": "sha512-mNXTKkcEY1Qg9SOZ2jZL74BaKZBDPLpmFU7RPvsTtna4e3MdTzBl0A+kaqZXrJhZKu5evN2U1BwLkbpMH1eIHQ==",
+  "_integrity": "sha512-dJeKjgvq/J0EiEeqZeIUq3eAhcFbDW52hqoAiHo8O98krYfYeytVrBg7hP4sVc8Hj6o7tfrZeCY+JyP2E+QL3A==",
   "_location": "/@syncfusion/ej2-vue-base",
   "_phantomChildren": {},
   "_requested": {
@@ -18,41 +18,23 @@
   },
   "_requiredBy": [
     "/",
-    "/@syncfusion/ej2-vue-barcode-generator",
-    "/@syncfusion/ej2-vue-buttons",
-    "/@syncfusion/ej2-vue-calendars",
     "/@syncfusion/ej2-vue-charts",
-    "/@syncfusion/ej2-vue-circulargauge",
     "/@syncfusion/ej2-vue-diagrams",
     "/@syncfusion/ej2-vue-documenteditor",
     "/@syncfusion/ej2-vue-dropdowns",
-    "/@syncfusion/ej2-vue-filemanager",
     "/@syncfusion/ej2-vue-gantt",
     "/@syncfusion/ej2-vue-grids",
-    "/@syncfusion/ej2-vue-heatmap",
-    "/@syncfusion/ej2-vue-inplace-editor",
-    "/@syncfusion/ej2-vue-inputs",
-    "/@syncfusion/ej2-vue-kanban",
-    "/@syncfusion/ej2-vue-layouts",
-    "/@syncfusion/ej2-vue-lineargauge",
-    "/@syncfusion/ej2-vue-lists",
-    "/@syncfusion/ej2-vue-maps",
     "/@syncfusion/ej2-vue-navigations",
-    "/@syncfusion/ej2-vue-notifications",
     "/@syncfusion/ej2-vue-pdfviewer",
     "/@syncfusion/ej2-vue-pivotview",
-    "/@syncfusion/ej2-vue-popups",
-    "/@syncfusion/ej2-vue-progressbar",
-    "/@syncfusion/ej2-vue-querybuilder",
     "/@syncfusion/ej2-vue-richtexteditor",
     "/@syncfusion/ej2-vue-schedule",
     "/@syncfusion/ej2-vue-splitbuttons",
     "/@syncfusion/ej2-vue-spreadsheet",
-    "/@syncfusion/ej2-vue-treegrid",
-    "/@syncfusion/ej2-vue-treemap"
+    "/@syncfusion/ej2-vue-treegrid"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-vue-base/-/ej2-vue-base-19.3.54.tgz",
-  "_shasum": "60aae462a46dbd51dc4486361cbaa30222780da1",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-base/-/ej2-vue-base-19.4.38.tgz",
+  "_shasum": "c7f2ab36cf30de7b2806684110c31152a49ae15b",
   "_spec": "@syncfusion/ej2-vue-base@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -96,6 +78,6 @@
     "postinstall": "node ./postinstall.js"
   },
   "typings": "index.d.ts",
-  "version": "19.4.38",
+  "version": "19.4.40",
   "sideEffects": true
 }

package/postinstall.js

@@ -21,8 +21,16 @@ if (fs.existsSync("../../vue/package.json")) {
   var packJson = JSON.parse(fs.readFileSync("../../vue/package.json", "utf8"));
   var version = parseInt(packJson.version.split(".")[0]);
   console.log("Vue version ---" + version);
-  if (version != 3) {
     var files = glob.sync("../ej2-vue-**/src/**/*.{component,directive}.js");
+   if (version === 3) {
+    files = files.concat(glob.sync('./src/**.js'));
+    for (var i = 0; i < files.length; i++){
+      var source = fs.readFileSync(files[i], "utf8");
+      var vuehead = (source.indexOf(`import Vue from 'vue';`) === -1) ? `import Vue from "vue"` : `import Vue from 'vue'`;
+      fs.writeFileSync(files[i], source.replace(vuehead, `import * as Vue from 'vue'`), "utf8");
+    }
+  }
+  if (version != 3) {
     files.push('./src/component-base.js');
     var file;
     for (var i = 0; i < files.length; i++) {

package/src/component-base.d.ts

@@ -2,7 +2,6 @@
  * Vue Component Base
  */
 
- 
  import Vue from 'vue';
  export declare const aVue: any;
 export declare function _interopRequireWildcard(obj: any): any;
@@ -18,7 +17,7 @@ export declare class ComponentBase extends Vue {
     protected hasChildDirective: boolean;
     protected childDirObjects: string;
     protected propKeys: any;
-    // // // constructor();
+    // // constructor();
     created(): void;
     mounted(): void;
     getInjectedServices(): Object[];

package/dist/ts/component-base.ts

@@ -1,406 +0,0 @@
-/**
- * Vue Component Base
- */
-
-import { isNullOrUndefined, extend, getValue } from '@syncfusion/ej2-base';
-
-import * as Vue3 from 'vue-class-component';
-import * as Vue2 from 'vue';
-import Vue from 'vue';
- 
- export const aVue = _interopRequireWildcard(Vue2);
- export function _interopRequireWildcard(obj: any) {
-     if (obj && obj.__esModule) {
-          return obj;
-    } else {
-        let newObj: any = {};
-        if (obj != null) {
-            for (let key in obj) {
-                if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
-            }
-        }
-        newObj.default = obj;
-        return newObj;
-    }
- }
- 
- export const allVue: any = aVue;
- export const gh: any = allVue.h;
- export const isExecute: any = gh ? false : true;
- 
- let vueImport: any;
- 
- if (!isExecute || parseInt(allVue.version) < 3) {
-     vueImport = (Vue3 as any).Vue;
- } else {
-     vueImport = Vue;
- }
- 
- export class ComponentBase extends vueImport {
- 
-     // tslint:disable:no-any
-     protected ej2Instances: any;
-     protected tagMapper: any;
-     protected tagNameMapper: any;
-     protected hasInjectedModules: boolean = false;
-     protected hasChildDirective: boolean = false;
-     protected childDirObjects: string = '';
-     protected propKeys: any;
- 
-    constructor() {
-        super(arguments);
-    }
-    
-     public created(): void {
-         if (!this.propKeys) {
-            return
-         }
-         for (let prop of this.propKeys) {
-             this.ej2Instances.addEventListener(prop, (args: object) => {
-                 this.$emit(prop, args);
-             });
-         }
-         let injectables: any = getValue('$root.$options.provide', this);
-         if (this.hasInjectedModules && !isExecute && injectables) {
-            let prevModule: Object[] = injectables[this.ej2Instances.getModuleName()] || [];
-            let curModule: Object[] = this.ej2Instances.getInjectedModules() || [];
-            for (let mod of curModule) {
-                if (prevModule.indexOf(mod) === -1) {
-                    prevModule.push(mod);
-                }
-            }
-            this.ej2Instances.injectedModules = prevModule;
-        }
-     }
- 
-     public mounted(): void {
-         this.ej2Instances.isVue = true;
-         this.ej2Instances.isVue3 = this.isVue3;
-         this.ej2Instances.vueInstance = this;
-         if (this.isVue3) {
-             this.ej2Instances.ej2Instances = this.ej2Instances;
-             this.ej2Instances.referModels = this.models;
-         }
-         this.ej2Instances.appendTo(this.$el);
-     }
-     public getInjectedServices(): Object[] {
-         let ret = [];
-         let provide: any = getValue('$vnode.context.$options.provide', this);
-         if (provide) {
-             // tslint:disable:no-any
-             let injectables: any = provide;
-             if (typeof provide === 'function') {
-                 // tslint:disable:no-any
-                 injectables = (this.$vnode.context.$options.provide as any)();
-             }
-             ret = injectables[this.ej2Instances.getModuleName()] || [];
-         }
-         return ret;
-     }
-     public updated(): void {
-         if (this.hasChildDirective) {
-             let childKey: Object = {};
-             this.fetchChildPropValues(childKey);
-             let curChildDir: string = JSON.stringify(childKey);
-             if (this.childDirObjects !== curChildDir) {
-                 this.childDirObjects = curChildDir;
-                 this.assignValueToWrapper(childKey, false);
-             }
-         }
-     }
- 
-     public beforeDestroy(): void {
-         let tempBeforeDestroyThis: any = this;
-         tempBeforeDestroyThis.ej2Instances.destroy();
-         (tempBeforeDestroyThis.$el as any).style.visibility = 'hidden';
-         tempBeforeDestroyThis = null;
-     }
- 
-     public bindProperties(): void {
-         let options: Object = {};
-         for (let prop of this.propKeys) {
-             if ((!isNullOrUndefined(this[prop]) && !this.isVue3) || (this[0] && !isNullOrUndefined(this[0][0]) && !isNullOrUndefined(this[0][0][prop]))) {
-                options[prop] = !this.isVue3 ? this[prop] : this[0][0][prop];
-             }
-         }
-         if (this.hasChildDirective) {
-             this.fetchChildPropValues(options);
-         }
-         if (this.hasInjectedModules) {
- 
-             let prevModule: Object[] = this.getInjectedServices() || [];
-             let curModule: Object[] = this.ej2Instances.getInjectedModules() || [];
-             for (let mod of curModule) {
-                 if (prevModule.indexOf(mod) === -1) {
-                     prevModule.push(mod);
-                 }
-             }
-             this.ej2Instances.injectedModules = prevModule;
-         }
-         this.assignValueToWrapper(options);
-     }
- 
-     public assignValueToWrapper(option: Object, silent?: boolean): void {
-         this.ej2Instances.setProperties(extend({}, {}, option, true), isNullOrUndefined(silent as any) ? true : silent);
-     }
- 
-     public fetchChildPropValues(childOption: Object): void {
-            let dirProps: Object = {};
-            if(!this.isVue3) {
-                dirProps = this.getDirectiveValues( this.$slots.default, this.tagMapper || {}, this.tagNameMapper || {});
-            } else {
-               if (this[0] && this[0][1].slots.default) {
-                   let propRef: any = this[0][1].slots.default();
-                   for (let i: number = 0; i < propRef.length; i++) {
-                     if (propRef[i].type.methods) {
-                        let key: string = propRef[i].type.methods.getTag().replace("e-", "");
-                        let ref: any = this.resolveArrayDirectives(propRef[i].children,key);
-                        let splitKeys: any = key.split('-');
-                        let controlName: string = this.ej2Instances.getModuleName().toLowerCase();
-                        let keyRef: string = (splitKeys.length > 1 && controlName.indexOf(splitKeys[0])>-1) ? splitKeys[1]: splitKeys[0];
-                        keyRef = keyRef.replace(controlName,'');
-                        if (controlName == "splitter" && keyRef == "panes") {
-                            keyRef = "paneSettings"
-                        } else if (controlName == "bulletchart" && keyRef == "range") {
-                            keyRef = "ranges";
-                        }
-                        dirProps[keyRef] = ref[key];
-                     }
-                     
-                   }
-               } else {
-                   return;
-               }
-            }
-            if (!this.childDirObjects) {
-                this.childDirObjects = JSON.stringify(dirProps);
-            }
-            for (let dirProp of Object.keys(dirProps)) {
-                childOption[dirProp] = dirProps[dirProp];
-            }
-      }
-        
-     public resolveArrayDirectives(slots: any, tagName: any) {
-              let slot: any = [];
-              let innerDirValues: any;
-              slot = slots.default ? slots.default() : slots;
-              let items: any = {};
-              items[tagName] = [];
-              for (const childSlot of slot) {
-                 let tempObj: any = {};
-                 let tagRef: any = childSlot.type.methods ? childSlot.type.methods.getTag() : tagName;
-                 if (childSlot.children) {
-                     let key: string;
-                     innerDirValues = this.resolveComplexDirs(childSlot.children, this.tagMapper["e-" + tagName], tagRef);
-                     if (innerDirValues.length) {
-                         tempObj = innerDirValues;
-                     } else {
-                         for(var i=0;i< Object.keys(innerDirValues).length;i++){
-                             key = Object.keys(innerDirValues)[i];
-                             tempObj[key] = innerDirValues[key];
-                           };
-                     }
-                 }
-                 if (childSlot.props) {
-                   Object.keys(childSlot.props).forEach((key) => {
-                       tempObj[key] = childSlot.props[key];
-                   });
-                 }
-                 if ((/[s]\b/).test(tagRef) && innerDirValues) {
-                    if (!(/[s]\b/).test(tagName) || innerDirValues.length) {
-                        items[tagName] = tempObj;
-                    } else {
-                        items[tagName].push(tempObj);
-                    }
-                } else {
-                    items[tagName].push(tempObj);
-                }
-              }
-             return items;
-      }
-          
-     public resolveComplexDirs(slots: any, tagObject: any, tagName: string) {
-             let slot: any = [];
-              let innerDirValues: any;
-              slot = slots.default ? slots.default() : slots;
-              let items: any = {};
-              for (const childSlot of slot) {
-                let tagRef: any;
-                let tag: any;
-                if (tagObject[tagName]) {
-                  tagRef= Object.keys(tagObject[tagName]);
-                  tag= tagRef.find(
-                    (key: any) =>
-                      tagObject[tagName][key] ===
-                      childSlot.type.methods.getTag().replace(/[s]\b/, "")
-                  );
-                  tag = tag
-                    ? tag.replace("e-", "")
-                    : childSlot.type.methods.getTag().replace("e-", "");
-                  if (this.ej2Instances.getModuleName().toLowerCase() == "diagram" && tag.indexOf('annotations') !=-1) {
-                    tag =  'annotations';
-                  }
-                }
-                 if (childSlot.children) {
-                     innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
-                     if (!items[tag]) {
-                         items[tag] = [];
-                     }
-                     if (innerDirValues.length >1) {
-                       items[tag] = innerDirValues;
-                     } else {
-                       items[tag].push(innerDirValues);
-                     }
-                 }
-                 if (slot.length > 1) {
-                     items = Object.keys(items).length == 0 &&  !items.length ? [] : items;
-                     if (childSlot.props) { items.push(childSlot.props); }
-                 }
-                 else {
-                     items = childSlot.props ? (<any>Object).assign(items, childSlot.props) : items;
-                 }
-              }
-             return items;
-      }
-     
-     public resolveComplexInnerDirs(slots: any, tagObject: any, tagName: string) {
-             let slot: any = [];
-             let innerDirValues: any;
-             slot = slots.default ? slots.default() : slots;
-             let items: any = slot.length > 1 ? [] : {};
-             for (const childSlot of slot) {
-                  let tag: string = childSlot.type.methods.getTag().replace("e-", "");
-                  if (childSlot.children) {
-                      innerDirValues = this.resolveMultilevelComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
-                      if ((/[s]\b/).test(tag) || slot.length > 1) {
-                        if ((/[s]\b/).test(tag)) {
-                            items[tag] = !items[tag] ? [] : items[tag];
-                            if (innerDirValues.length) {
-                                items[tag] = innerDirValues;
-                            } else {items[tag].push(innerDirValues);}
-                       } else if (innerDirValues) {
-                            items.push(innerDirValues)
-                       }
-                } else {
-                    items = innerDirValues ? innerDirValues : items;
-                }
-                  }
-                
-                if (slot.length > 1 && childSlot.props) {
-                    if (items.length >= 0) {
-                        items.push(childSlot.props);
-                    } else {
-                        items = childSlot.props ? (<any>Object).assign(items, childSlot.props) : items;
-                    }
-                } else {
-                    items = childSlot.props ? (<any>Object).assign(items, childSlot.props) : items;
-                }
-             }
-              return items;
-      }
-        
-     public resolveMultilevelComplexInnerDirs(slots: any, tagObject: any, tagName: string) {
-          let slot: any = [];
-          let innerDirValues: any;
-          slot = slots.default ? slots.default() : slots;
-          let items: any = slot.length > 1 ? [] : {};
-          for (const childSlot of slot) {
-              let tag: string =  childSlot.type.methods.getTag().replace("e-", "");
-              if (childSlot.children) {
-                  innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
-              }
-              if((/[s]\b/).test(tag)) {
-                  items[tag] = !items[tag] ? [] : items[tag];
-                  if(innerDirValues.length) {
-                     items[tag] = innerDirValues;
-                  } else { items[tag].push(innerDirValues); }
-                  if (childSlot.props) {items[tag].push(childSlot.props);}
-              } else {
-                  items = innerDirValues;
-                  items = childSlot.props ?  (<any>Object).assign(items, childSlot.props) : items;
-              }
-          }
-           return items;
-      }
-     
-     public getDirectiveValues(tagDirectives: any, tagMapper: { [key: string]: Object }, tagNameMapper: Object): Object {
-         let keyTags: string[] = Object.keys(tagMapper);
-         let dir: Object = {};
-         if (tagDirectives) {
-             for (let tagDirective of tagDirectives) {
-                 if (tagDirective.componentOptions && tagDirective.componentOptions.children && tagDirective.componentOptions.tag) {
-                     let dirTag: string = tagDirective.componentOptions.tag;
-                     if (keyTags.indexOf(dirTag) !== -1) {
-                         let tagName: string = tagNameMapper[dirTag] ? tagNameMapper[dirTag] : dirTag;
-                         dir[tagName.replace('e-', '')] = [];
-                         for (let tagDirChild of tagDirective.componentOptions.children) {
-                             let retObj: Object = this.getVNodeValue(tagDirChild, tagMapper[dirTag], tagNameMapper);
-                             if (Object.keys(retObj).length !== 0) {
-                                 dir[tagName.replace('e-', '')].push(retObj);
-                             }
-                         }
-                     }
-                 }
-             }
-         }
-         return dir;
-     }
- 
-     public getMultiLevelDirValue(tagDirectories: any, tagKey: string | Object, tagNameMapper: Object): Object {
-         let mulObj: Object = {};
-         for (let tagDir of tagDirectories) {
-             if (tagDir.componentOptions) {
-                 let key: string = tagDir.componentOptions.tag;
-                 let tagName: string = tagNameMapper[key] ? tagNameMapper[key] : key;
-                 mulObj[tagName.replace('e-', '')] = [];
-                 if (tagDir.componentOptions && tagDir.componentOptions.children) {
-                     for (let tagDirChild of tagDir.componentOptions.children) {
-                         let mulLevObj: Object = this.getVNodeValue(tagDirChild, tagKey[key], tagNameMapper);
-                         if (Object.keys(mulLevObj).length !== 0) {
-                             mulObj[tagName.replace('e-', '')].push(mulLevObj);
-                         }
-                     }
-                 }
-             }
-         }
-         return mulObj;
-     }
- 
-     public getVNodeValue(tagDirective: any, tagKey: string | Object, tagNameMapper: Object): Object {
-         let ret: Object = {};
-         if (tagDirective.componentOptions) {
-             let dirTag: string = tagDirective.componentOptions.tag;
-             if (typeof tagKey === 'string' && dirTag === tagKey && tagDirective.data) {
-                 ret = tagDirective.data.attrs ? this.getCamelCaseProps(tagDirective.data.attrs) : this.getCamelCaseProps(tagDirective.data);
-             } else if (typeof tagKey === 'object') {
-                 if (tagDirective.componentOptions.children && (Object.keys(tagKey).indexOf(dirTag) !== -1)) {
-                     ret = this.getMultiLevelDirValue(tagDirective.componentOptions.children, tagKey[dirTag], tagNameMapper);
-                 }
-                 if (tagDirective.data && tagDirective.data.attrs) {
-                     ret = extend(ret, this.getCamelCaseProps(tagDirective.data.attrs));
-                 }
-             }
-         }
-         return ret;
-     }
- 
-     /**
-      * convert kebab case directive props to camel case
-      */
-     public getCamelCaseProps(props: Object): Object {
-         let retProps: Object = {};
-         for (let prop of Object.keys(props)) {
-             retProps[prop.replace(/-[a-z]/g, (e) => {return e[1].toUpperCase()})] = props[prop];
-         }
-         return retProps;
-     }
- 
-     public dataBind() {
-         this.ej2Instances.dataBind();
-     }
- 
-     public setProperties(arg: Object, muteOnChange?: boolean): void {
-         return this.ej2Instances.setProperties(arg, muteOnChange);
-     }
- }
- 

package/dist/ts/component-decorator.ts

@@ -1,148 +0,0 @@
-/**
- * Vue Component Base
- */
-import Vue from 'vue';
-// import { Base, Component as EJ2Component, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { ComponentBase } from './component-base';
-export let $internalHooks = [
-  'data',
-  'beforeCreate',
-  'created',
-  'beforeMount',
-  'mounted',
-  'beforeDestroy',
-  'destroyed',
-  'beforeUpdate',
-  'updated',
-  'activated',
-  'deactivated',
-  'render',
-  'errorCaptured' // 2.5
-];
-
-export function getProps(
-  options: any = {}
-): any {
-  if (options.props) {
-    for (let prop of options.props) {
-      (options.newprops || (options.newprops = {}))[prop] = {
-
-      };
-      (options.watch || (options.watch = {}))[prop] = function (newVal: Object) { // watch it
-        this.ej2Instances[prop] = newVal;
-        if (this.dataBind && (options.name !== 'DateRangePickerComponent')) {
-            this.dataBind();    
-        }
-      };
-    }
-  }
-  return [options.newprops, options.watch];
-}
-
-export function EJComponentDecorator(options: any, isExecute?: any): any {
-  if(!isExecute) {
-        return;
-  }
-  return function (Component: any) {
-    return EJcomponentFactory(Component, options);
-  }
-}
-
-export function EJcomponentFactory(
-  Component: any,
-  options: any = {}
-): any {
-  options.name = options.name || (Component as any)._componentTag || (Component as any).name
-  // prototype props.
-  const proto = Component.prototype
-  if (options.props) {
-    for (let prop of options.props) {
-      (options.props || (options.props = {}))[prop] = {
-
-      };
-      (options.watch || (options.watch = {}))[prop] = function (newVal: Object) { // watch it
-        this.ej2Instances[prop] = newVal;
-        if (this.dataBind && (options.name !== 'DateRangePickerComponent')) {
-            this.dataBind();    
-        }
-      };
-    }
-  }
-  Object.getOwnPropertyNames(proto).forEach(function (key) {
-    // hooks
-    if (key === 'constructor') {
-      return;
-    }
-    if ($internalHooks.indexOf(key) > -1) {
-      options[key] = proto[key]
-      return
-    }
-    const descriptor = Object.getOwnPropertyDescriptor(proto, key)!
-    if (typeof descriptor.value === 'function') {
-      // methods
-      (options.methods || (options.methods = {}))[key] = descriptor.value
-    } else if (descriptor.get || descriptor.set) {
-      // computed properties
-      (options.computed || (options.computed = {}))[key] = {
-        get: descriptor.get,
-        set: descriptor.set
-      }
-    }
-  });
-  Object.getOwnPropertyNames(ComponentBase.prototype).forEach(function (key) {
-    if ($internalHooks.indexOf(key) > -1) {
-      options[key] = proto[key]
-      return
-    }
-  });
-  (options.mixins || (options.mixins = [])).push({
-    data(this: Vue) {
-      return collectDataFromConstructor(this, Component)
-    }
-  })
-  //  decorate options
-  const decorators = (Component as any).__decorators__
-  if (decorators) {
-    decorators.forEach(Function(options))
-    delete (Component as any).__decorators__
-  }
-
-  // find super
-  const superProto = Object.getPrototypeOf(Component.prototype)
-  const Super = superProto instanceof Vue
-    ? superProto.constructor as any
-    : Vue
-  const Extended = Super.extend(options)
-
-  return Extended
-}
-
-function collectDataFromConstructor(vm: any, Component: any) {
-  Component.prototype._init = function () {
-      var _this = this;
-      var keys = Object.getOwnPropertyNames(vm);
-      if (vm.$options.props) {
-          for (var key in vm.$options.props) {
-              if (!vm.hasOwnProperty(key)) {
-                  keys.push(key);
-              }
-          }
-      }
-      keys.forEach(function (key) {
-          if (key.charAt(0) !== '_') {
-              Object.defineProperty(_this, key, {
-                  get: function () { return vm[key]; },
-                  set: function (value) { return vm[key] = value; }
-              });
-          }
-      });
-  };
-  var data = new Component();
-  var plainData = {};
-  Object.keys(data).forEach(function (key) {
-      if (data[key] !== undefined) {
-          plainData[key] = data[key];
-      }
-  });
-  return plainData;
-}

package/dist/ts/template.ts

@@ -1,118 +0,0 @@
-import Vue from "vue";
-import {
-  setTemplateEngine,
-  getTemplateEngine,
-  getUniqueID,
-  createElement,
-  detach,
-  extend,
-  getValue,
-} from "@syncfusion/ej2-base";
-
-import { aVue, allVue, gh } from "./component-base";
-
-// tslint:disable:no-any
-let stringCompiler: (
-  template: string,
-  helper?: object
-) => (data: Object | JSON) => string = getTemplateEngine(); 
-
-export function compile(
-  templateElement: any,
-  helper?: Object
-): (data: Object | JSON, component?: any, propName?: any) => Object {
-  let that = this;
-  if (typeof templateElement === "string") {
-    return stringCompiler(templateElement, helper);
-  } else {
-    return (data: any, context: any,propName: any): any => {
-      let pid: string = getUniqueID("templateParentDiv");
-      let id: string = getUniqueID("templateDiv");
-      let ele: HTMLElement = createElement("div", {
-        id: pid,
-        innerHTML: '<div id="' + id + '"></div>',
-      });
-      document.body.appendChild(ele);
-
-      let tempObj: any = templateElement.call(that, {});
-      let returnEle: any;
-      if (context) {
-        if (gh) {
-          let object: any = tempObj;
-          let propsData: any = getValue("template.propsData", tempObj);
-          let dataObj: any = {
-            data: { data: extend(tempObj.data || {}, data) },
-            parent: context.vueInstance,
-          };
-          if (!object.template) {
-            object.template = object[Object.keys(object)[0]]; 
-          }
-          let templateCompRef: any;
-          if(object.template.extends) {
-            templateCompRef = object.template.extends._context.components.template;
-          } else {
-              templateCompRef = object.template._context.components[templateElement.name];
-          }
-          let tempRef: any;
-          if (propsData) {
-              tempRef = (<any>Object).assign(templateCompRef.data(), propsData);
-          } else {
-              tempRef = (<any>Object).assign(templateCompRef.data(), dataObj.data);
-              if(templateCompRef.components){
-                let objkeys: any = Object.keys(templateCompRef.components) || [];
-                for(let objstring of objkeys){
-                   let intComponent: any = templateCompRef.components[objstring]
-                    if(intComponent && intComponent.data){
-                       let tempRef2: any =  (Object as any).assign(intComponent.data(), dataObj.data);
-                       intComponent.data = function() {return tempRef2};
-                    }
-                }
-            }
-          }
-          templateCompRef.data = function () { return tempRef; };
-          allVue
-            .createApp(templateCompRef)
-            .mount("#" + id);
-          returnEle = ele.childNodes;
-          detach(ele);
-        } else {
-          let templateFunction = tempObj.template;
-          let propsData: any = getValue("template.propsData", tempObj);
-          let dataObj: any = {
-            data: { data: extend(tempObj.data || {}, data) },
-            parent: context.vueInstance,
-          };
-          if (propsData) {
-            templateFunction = tempObj.template.extends;
-            dataObj.propsData = propsData;
-          }
-          if (typeof templateFunction !== "function") {
-            templateFunction = Vue.extend(templateFunction);
-          }
-          let templateVue: any = new templateFunction(dataObj);
-          // let templateVue = new Vue(tempObj.template);
-          // templateVue.$data.data = extend(tempObj.data, data);
-          templateVue.$mount("#" + id);
-          returnEle = ele.childNodes;
-        if (context.vueInstance) {
-                let templateInstance: any = context.vueInstance.templateCollection;
-                if (!templateInstance) {
-                    context.vueInstance.templateCollection = {};
-                    templateInstance = context.vueInstance.templateCollection;
-                }
-                if (propName) {
-                    if (!templateInstance[propName]) {
-                        templateInstance[propName] = [];
-                    }
-                    templateInstance[propName].push(returnEle[0]);
-                }
-            }
-          detach(ele);
-        }
-      }
-      return returnEle || [];
-    };
-  }
-}
-
-setTemplateEngine({ compile: compile as any });