@syncfusion/ej2-vue-base 19.3.55 → 19.4.38

package/.github/PULL_REQUEST_TEMPLATE/Bug.md

@@ -0,0 +1,60 @@
+### Bug description
+
+Clearly and concisely describe the problem or feature (this cannot be empty).
+
+### Root cause
+
+Briefly describe the root cause and analysis of the problem.
+If there is an internal discussion on the forum, provide the link.
+### Reason for not identifying earlier
+
+Find how it was missed in our earlier testing and development by analysing the below checklist. This will help prevent similar mistakes in the future. 
+
+ - [ ] Guidelines/documents are not followed
+
+    - Common guidelines / Core team guideline
+    - Specification document
+    - Requirement document
+
+ - [ ] Guidelines/documents are not given
+
+
+    - Common guidelines / Core team guideline
+    - Specification document
+    - Requirement document
+
+
+### Reason:
+Mention any one or more reasons from the above points.
+
+### Action taken:
+What action did you take to avoid this in future?
+
+### Related areas:
+Is there any other related areas also to be addressed?
+
+
+### Is it a breaking issue?
+
+If it is a breaking issue, provide the commit detail which caused this break.
+
+### Solution description
+
+Describe your code changes in detail for reviewers.
+
+### Output screenshots
+
+Post the output screenshots if an UI is affected or added due to this bug.
+### Areas affected and ensured
+
+List the areas affected by your code changes.
+
+### Additional checklist
+This may vary for different teams or products. Check with your scrum masters.
+
+  - Did you run the automation against your fix?
+  - Is there any API name change?
+  - Is there any existing behavior change of other features due to this code change?
+  - Does your new code introduce new warnings or binding errors?
+  - Does your code pass all FxCop and StyleCop rules?
+  - Did you record this case in the unit test or UI test?

package/.github/PULL_REQUEST_TEMPLATE/feature.md

@@ -0,0 +1,42 @@
+### Feature description
+
+Clearly and concisely describe the problem or feature (this cannot be empty).
+
+### Analysis and design
+
+If there is an external design, link to its project documentation area.
+If there is an internal discussion on the forum, provide the link.
+### Solution description
+
+Describe your code changes in detail for reviewers.
+
+### Output screenshots
+
+Post the output screenshots if an UI is affected or added due to this feature.
+### Areas affected and ensured
+
+List the areas are affected by your code changes.
+
+### Test cases
+
+Provide the unit testing written file details to understand the use cases considered in this implementation.
+If there is no TDD (if it’s not possible to follow), provide the UI automation script location and the Excel file that contains the use cases considered in this implementation.
+Provide the test cases Excel file alone if the feature cannot be automated in any case.
+Test bed sample location
+
+Provide the test bed sample location where code reviewers can review the new feature’s behaviors. This depends on the CI process that your team follows. It can be from NPMCI, HockeyApp, staging site, local server, etc.
+
+### Test bed sample location
+
+Provide the test bed sample location where code reviewers can review the new feature’s behaviors. This depends on the CI process that your team follows. It can be from NPMCI, HockeyApp, staging site, local server, etc.
+
+
+### Additional checklist
+This may vary for different teams or products. Check with your scrum masters.
+
+  - Did you run the automation against your fix?
+  - Is there any API name change?
+  - Is there any existing behavior change of other features due to this code change?
+  - Does your new code introduce new warnings or binding errors?
+  - Does your code pass all FxCop and StyleCop rules?
+  - Did you record this case in the unit test or UI test?

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

@@ -1,15 +1,6 @@
 /*!
 *  filename: ej2-vue-base.umd.min.js
-*  version : 19.3.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
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
-/*!
-*  filename: ej2-vue-base.umd.min.js
-*  version : 19.2.55
+*  version : 19.4.38
 *  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.3.55
+*  version : 19.4.38
 *  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.3.55
+*  version : 19.4.38
 *  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/ts/component-base.ts

@@ -0,0 +1,406 @@
+/**
+ * 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

@@ -0,0 +1,148 @@
+/**
+ * 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

@@ -0,0 +1,118 @@
+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 });

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-base@*",
-  "_id": "@syncfusion/ej2-vue-base@19.3.53",
+  "_id": "@syncfusion/ej2-vue-base@19.3.54",
   "_inBundle": false,
-  "_integrity": "sha512-eOpEHHkHRNt2COPWQA1/cIiZuJT/8ScdLOC3F1Q55jAoot0LqaP2DyV6FUhm8N7H0H8dFBnk10En6VydlwOqYA==",
+  "_integrity": "sha512-mNXTKkcEY1Qg9SOZ2jZL74BaKZBDPLpmFU7RPvsTtna4e3MdTzBl0A+kaqZXrJhZKu5evN2U1BwLkbpMH1eIHQ==",
   "_location": "/@syncfusion/ej2-vue-base",
   "_phantomChildren": {},
   "_requested": {
@@ -18,23 +18,41 @@
   },
   "_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-treegrid",
+    "/@syncfusion/ej2-vue-treemap"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-vue-base/-/ej2-vue-base-19.3.53.tgz",
-  "_shasum": "8a5f6151ae688700bdb3ddc4227e9774c734d28c",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-vue-base/-/ej2-vue-base-19.3.54.tgz",
+  "_shasum": "60aae462a46dbd51dc4486361cbaa30222780da1",
   "_spec": "@syncfusion/ej2-vue-base@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -45,7 +63,7 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.54",
+    "@syncfusion/ej2-base": "~19.4.38",
     "glob": "^7.0.5"
   },
   "deprecated": false,
@@ -78,6 +96,6 @@
     "postinstall": "node ./postinstall.js"
   },
   "typings": "index.d.ts",
-  "version": "19.3.55",
+  "version": "19.4.38",
   "sideEffects": true
 }

package/src/component-base.d.ts

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