@syncfusion/ej2-vue-base 25.2.4 → 26.2.4

package/src/component-base.js

@@ -1,8 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Vue Component Base
  */
 import * as Vue from 'vue';
 import { isNullOrUndefined, extend, getValue, setProxyToRaw } from '@syncfusion/ej2-base';
+/**
+ * Clone the Vue compiler instance.
+ *
+ * @param {any} obj - representes the Vue compiler.
+ * @returns {any} cloned object of Vue compiler.
+ */
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) {
     return obj;
 }
@@ -10,15 +17,18 @@ else {
     var newObj = {};
     if (obj != null) {
         for (var key in obj) {
-            if (Object.prototype.hasOwnProperty.call(obj, key))
+            if (Object.prototype.hasOwnProperty.call(obj, key)) {
                 newObj["" + key] = obj["" + key];
+            }
         }
     }
     newObj.default = obj;
     return newObj;
 } }
 var curVue = _interopRequireWildcard(Vue);
-export var isExecute = (parseInt(curVue['version']) > 2) ? false : true, aVue = !isExecute ? curVue : (curVue['default']['default'] ? curVue['default']['default'] : curVue['default']), gh = curVue['h'];
+export var isExecute = (parseInt(curVue['version'], 10) > 2) ? false : true;
+export var aVue = !isExecute ? curVue : (curVue['default']['default'] ? curVue['default']['default'] : curVue['default']);
+export var gh = curVue['h'];
 export var vueDefineComponent = function (options) { return !isExecute ? aVue['defineComponent'](options) : aVue['extend'](options); };
 export var ComponentBase = vueDefineComponent({
     name: 'ComponentBase',
@@ -77,10 +87,13 @@ export var ComponentBase = vueDefineComponent({
         }
     },
     mounted: function () {
-        var cusEle = this.$el ? this.$el.querySelectorAll("div.e-directive") : null;
+        var cusEle = this.$el ? this.$el.querySelectorAll('div.e-directive') : null;
         if (!isExecute && cusEle) {
             for (var i = 0; i < cusEle.length; i++) {
-                cusEle[parseInt(i.toString(), 10)].parentElement && cusEle[parseInt(i.toString(), 10)].parentElement.removeChild(cusEle[parseInt(i.toString(), 10)]);
+                var cusElement = cusEle[parseInt(i.toString(), 10)];
+                if (cusElement.parentElement) {
+                    cusElement.parentElement.removeChild(cusElement);
+                }
             }
         }
         this.ej2Instances.isVue = true;
@@ -142,12 +155,11 @@ export var ComponentBase = vueDefineComponent({
                 provide = getValue('$.parent.provides', this);
             }
             if (provide) {
-                // tslint:disable:no-any
                 var injectables = provide;
                 if (typeof provide === 'function') {
                     if (provide.managed) {
-                        var provideKey = provide.managed;
-                        var provideValue = Object.keys(provideKey);
+                        var pKey = provide.managed;
+                        var pValue = Object.keys(pKey);
                         var key = void 0;
                         if (this.$root && this.isDecorator) {
                             key = Object.keys(this.$root);
@@ -158,24 +170,23 @@ export var ComponentBase = vueDefineComponent({
                         else if (this.$parent) {
                             key = Object.keys(this.$parent);
                         }
-                        for (var i = 0; i < provideValue.length; i++) {
+                        for (var i = 0; i < pValue.length; i++) {
                             for (var j = 0; j < key.length; j++) {
-                                if ((key[parseInt(j.toString(), 10)].indexOf(provideValue[parseInt(i.toString(), 10)])) !== -1) {
+                                if ((key[parseInt(j.toString(), 10)].indexOf(pValue[parseInt(i.toString(), 10)])) !== -1) {
                                     if (this.$root && this.isDecorator) {
-                                        provideKey[provideValue[parseInt(j.toString(), 10)]] = this.$root[key[parseInt(i.toString(), 10)]];
+                                        pKey[pValue[parseInt(j.toString(), 10)]] = this.$root[key[parseInt(i.toString(), 10)]];
                                     }
                                     else if (this.$vnode) {
-                                        provideKey[provideValue[parseInt(i.toString(), 10)]] = this.$vnode.context[key[parseInt(j.toString(), 10)]];
+                                        pKey[pValue[parseInt(i.toString(), 10)]] = this.$vnode.context[key[parseInt(j.toString(), 10)]];
                                     }
                                     else if (this.$parent) {
-                                        provideKey[provideValue[parseInt(i.toString(), 10)]] = this.$parent[key[parseInt(j.toString(), 10)]];
+                                        pKey[pValue[parseInt(i.toString(), 10)]] = this.$parent[key[parseInt(j.toString(), 10)]];
                                     }
-                                    injectables = provideKey;
+                                    injectables = pKey;
                                 }
                             }
                         }
                     }
-                    // tslint:disable:no-any
                     else if (this.$vnode) {
                         injectables = this.$vnode.context.$options.provide();
                     }
@@ -189,26 +200,25 @@ export var ComponentBase = vueDefineComponent({
             return ret;
         },
         destroyComponent: function () {
-            var tempBeforeDestroyThis = this;
-            tempBeforeDestroyThis.ej2Instances.destroy();
-            tempBeforeDestroyThis.$el.style.visibility = 'hidden';
-            tempBeforeDestroyThis.destroyPortals();
-            tempBeforeDestroyThis = null;
+            this.ej2Instances.destroy();
+            this.$el.style.visibility = 'hidden';
+            this.clearTemplate();
         },
-        destroyPortals: function () {
-            if (this.portals) {
-                for (var _i = 0, _a = this.portals; _i < _a.length; _i++) {
-                    var portal = _a[_i];
-                    var controls = portal.classList.contains('e-control') ? [portal] : portal.getElementsByClassName('e-control');
-                    for (var index = 0; index < controls.length; index++) {
-                        var control = controls[parseInt(index.toString(), 10)];
-                        if (control.ej2_instances && control.ej2_instances[0]) {
-                            control.ej2_instances[0].destroy();
-                            index--;
-                        }
+        destroyPortals: function (element) {
+            if (element) {
+                var destroy = getValue('__vue__.$destroy', element);
+                if (destroy) {
+                    element.__vue__.$destroy();
+                }
+                else if (!isExecute && element._vnode) {
+                    try {
+                        aVue.render(null, element);
                     }
+                    catch (e) { /* Handle error */ }
+                }
+                if (element.innerHTML) {
+                    element.innerHTML = '';
                 }
-                this.portals = null;
             }
         },
         bindProperties: function () {
@@ -258,21 +268,21 @@ export var ComponentBase = vueDefineComponent({
                     for (var i = 0; i < propRef.length; i++) {
                         if (propRef[parseInt(i.toString(), 10)].type.methods || propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection') {
                             var key = propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection' ? 'series-collection' :
-                                propRef[parseInt(i.toString(), 10)].type.methods.getTag().replace("e-", "");
+                                propRef[parseInt(i.toString(), 10)].type.methods.getTag().replace('e-', '');
                             var ref = this.resolveArrayDirectives(propRef[parseInt(i.toString(), 10)].children, key);
-                            var splitKeys = key.split('-');
+                            var spKeys = key.split('-');
                             var controlName = this.ej2Instances.getModuleName().toLowerCase();
-                            var keyRef = (splitKeys.length > 1 && controlName.indexOf(splitKeys[0]) > -1) ? splitKeys[1] : splitKeys[0];
+                            var keyRef = (spKeys.length > 1 && controlName.indexOf(spKeys[0]) > -1) ? spKeys[1] : spKeys[0];
                             keyRef = keyRef.replace(controlName, '');
                             keyRef = this.tagNameMapper['e-' + key] ? this.tagNameMapper['e-' + key].replace('e-', '') : keyRef;
-                            if (controlName == "splitter" && keyRef == "panes") {
-                                keyRef = "paneSettings";
+                            if (controlName === 'splitter' && keyRef === 'panes') {
+                                keyRef = 'paneSettings';
                             }
-                            else if (controlName == "bulletchart" && keyRef == "range") {
-                                keyRef = "ranges";
+                            else if (controlName === 'bulletchart' && keyRef === 'range') {
+                                keyRef = 'ranges';
                             }
-                            else if (controlName == "schedule" && keyRef == "header") {
-                                keyRef = "headerRows";
+                            else if (controlName === 'schedule' && keyRef === 'header') {
+                                keyRef = 'headerRows';
                             }
                             dirProps["" + keyRef] = ref["" + key];
                         }
@@ -302,7 +312,7 @@ export var ComponentBase = vueDefineComponent({
                 var tagRef = childSlot.type.methods ? childSlot.type.methods.getTag() : tagName;
                 if (childSlot.children) {
                     var key = void 0;
-                    innerDirValues = this_2.resolveComplexDirs(childSlot.children, this_2.tagMapper["e-" + tagName], tagRef);
+                    innerDirValues = this_2.resolveComplexDirs(childSlot.children, this_2.tagMapper['e-' + tagName], tagRef);
                     if (innerDirValues.length) {
                         tempObj = innerDirValues;
                     }
@@ -322,7 +332,12 @@ export var ComponentBase = vueDefineComponent({
                     });
                 }
                 if (((/[s]\b/).test(tagRef) && innerDirValues) && (!(/[s]\b/).test(tagName) || innerDirValues.length)) {
-                    Array.isArray(tempObj) ? tempObj.forEach(function (item) { items["" + tagName].push(item); }) : items["" + tagName].push(tempObj);
+                    if (Array.isArray(tempObj)) {
+                        tempObj.forEach(function (item) { items["" + tagName].push(item); });
+                    }
+                    else {
+                        items["" + tagName].push(tempObj);
+                    }
                 }
                 else if (tempObj && Object.keys(tempObj).length !== 0) {
                     items["" + tagName].push(tempObj);
@@ -347,12 +362,11 @@ export var ComponentBase = vueDefineComponent({
                     tagRef = Object.keys(tagObject["" + tagName]);
                     tag = tagRef.find(function (key) {
                         return tagObject["" + tagName]["" + key] ===
-                            childSlot.type.methods.getTag().replace(/[s]\b/, "");
+                            childSlot.type.methods.getTag().replace(/[s]\b/, '');
                     });
-                    var moduleName = this_3.ej2Instances.getModuleName().toLowerCase();
                     tag = tag ? tag : childSlot.type.methods.getTag();
-                    tag = (this_3.tagNameMapper["" + tag] ? this_3.tagNameMapper["" + tag] : tag).replace("e-", "");
-                    if (this_3.ej2Instances.getModuleName().toLowerCase() == "diagram" && tag.indexOf('annotations') != -1) {
+                    tag = (this_3.tagNameMapper["" + tag] ? this_3.tagNameMapper["" + tag] : tag).replace('e-', '');
+                    if (this_3.ej2Instances.getModuleName().toLowerCase() === 'diagram' && tag.indexOf('annotations') !== -1) {
                         tag = 'annotations';
                     }
                 }
@@ -372,7 +386,7 @@ export var ComponentBase = vueDefineComponent({
                     childSlot.props = this_3.getCamelCaseProps(childSlot.props);
                 }
                 if (slot.length > 1) {
-                    items = Object.keys(items).length == 0 && !items.length ? [] : items;
+                    items = Object.keys(items).length === 0 && !items.length ? [] : items;
                     if (childSlot.props) {
                         items.push(childSlot.props);
                     }
@@ -396,7 +410,7 @@ export var ComponentBase = vueDefineComponent({
                 var childSlot = slot_3[_i];
                 var innerDirValues = null;
                 var tag = childSlot.type.methods.getTag();
-                tag = (this.tagNameMapper[tag] ? this.tagNameMapper[tag] : tag).replace("e-", "");
+                tag = (this.tagNameMapper["" + tag] ? this.tagNameMapper["" + tag] : tag).replace('e-', '');
                 if (childSlot.children) {
                     innerDirValues = this.resolveMultilevelComplexInnerDirs(childSlot.children, tagObject["" + tagName], childSlot.type.methods.getTag());
                     if ((/[s]\b/).test(tag) || slot.length > 1) {
@@ -445,9 +459,8 @@ export var ComponentBase = vueDefineComponent({
             for (var _i = 0, slot_4 = slot; _i < slot_4.length; _i++) {
                 var childSlot = slot_4[_i];
                 var innerDirValues = null;
-                var moduleName = this.ej2Instances.getModuleName().toLowerCase();
                 var tag = childSlot.type.methods.getTag();
-                tag = (this.tagNameMapper[tag] ? this.tagNameMapper[tag] : tag).replace("e-", "");
+                tag = (this.tagNameMapper["" + tag] ? this.tagNameMapper["" + tag] : tag).replace('e-', '');
                 if (childSlot.children) {
                     innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject["" + tagName], childSlot.type.methods.getTag());
                 }
@@ -479,14 +492,15 @@ export var ComponentBase = vueDefineComponent({
             if (tagDirectives) {
                 for (var _i = 0, tagDirectives_1 = tagDirectives; _i < tagDirectives_1.length; _i++) {
                     var tagDirective = tagDirectives_1[_i];
-                    if (tagDirective.componentOptions && tagDirective.componentOptions.children && this.getTagName(tagDirective.componentOptions) ||
+                    var tagCompOption = tagDirective.componentOptions;
+                    if (tagCompOption && tagCompOption.children && this.getTagName(tagCompOption) ||
                         (tagDirective.tag === 'e-seriescollection' && tagDirective.children)) {
-                        var dirTag = tagDirective.componentOptions ? this.getTagName(tagDirective.componentOptions) : tagDirective.tag;
+                        var dirTag = tagCompOption ? this.getTagName(tagCompOption) : tagDirective.tag;
                         dirTag = (dirTag === 'e-seriescollection') ? 'e-seriesCollection' : dirTag;
                         if (keyTags.indexOf(dirTag) !== -1) {
                             var tagName = tagNameMapper["" + dirTag] ? tagNameMapper["" + dirTag] : dirTag;
                             dir[tagName.replace('e-', '')] = [];
-                            var children = tagDirective.componentOptions ? tagDirective.componentOptions.children : tagDirective.children;
+                            var children = tagCompOption ? tagCompOption.children : tagDirective.children;
                             for (var _a = 0, children_1 = children; _a < children_1.length; _a++) {
                                 var tagDirChild = children_1[_a];
                                 var retObj = this.getVNodeValue(tagDirChild, tagMapper["" + dirTag], tagNameMapper);
@@ -542,8 +556,9 @@ export var ComponentBase = vueDefineComponent({
                 else {
                     dirTag = (tagDirective.tag === 'e-markersettings') ? 'e-markerSettings' : 'e-markerSetting';
                 }
-                if (typeof tagKey === 'string' && dirTag === tagKey && tagDirective.data) {
-                    ret = tagDirective.data.attrs ? this.getCamelCaseProps(tagDirective.data.attrs) : this.getCamelCaseProps(tagDirective.data);
+                var tagData = tagDirective.data;
+                if (typeof tagKey === 'string' && dirTag === tagKey && tagData) {
+                    ret = tagData.attrs ? this.getCamelCaseProps(tagData.attrs) : this.getCamelCaseProps(tagData);
                 }
                 else if (typeof tagKey === 'object') {
                     if (tagDirective.componentOptions.children && (Object.keys(tagKey).indexOf(dirTag) !== -1)) {
@@ -552,15 +567,18 @@ export var ComponentBase = vueDefineComponent({
                     else if (tagDirective.children && (Object.keys(tagKey).indexOf(dirTag) !== -1) && (dirTag === 'e-markersettings' || dirTag === 'e-markersetting')) {
                         ret = this.getMultiLevelDirValue(tagDirective.children, tagKey["" + dirTag], tagNameMapper);
                     }
-                    if (tagDirective.data && tagDirective.data.attrs) {
-                        ret = extend(ret, this.getCamelCaseProps(tagDirective.data.attrs));
+                    if (tagData && tagData.attrs) {
+                        ret = extend(ret, this.getCamelCaseProps(tagData.attrs));
                     }
                 }
             }
             return ret;
         },
         /**
-         * convert kebab case directive props to camel case
+         * convert kebab case directive props to camel case.
+         *
+         * @param {Object} props - Objects in kebab case directive props.
+         * @returns {Object} Object converted into camel case directive props.
          */
         getCamelCaseProps: function (props) {
             var retProps = {};
@@ -578,13 +596,20 @@ export var ComponentBase = vueDefineComponent({
         },
         getTagName: function (options) {
             var tag = options.tag;
-            if (!tag && options.Ctor && options.Ctor.extendOptions && options.Ctor.extendOptions.methods && options.Ctor.extendOptions.methods.getTag) {
+            var optCtor = options.Ctor;
+            if (!tag && optCtor && optCtor.extendOptions && optCtor.extendOptions.methods && optCtor.extendOptions.methods.getTag) {
                 tag = options.Ctor.extendOptions.methods.getTag();
             }
             return tag;
         }
     }
 });
+/**
+ * Collect public property values for the Vue component.
+ *
+ * @param {any} options - represents props object.
+ * @returns {any} array of props object and `watchobject` respectively.
+ */
 export function getProps(options) {
     if (options === void 0) { options = {}; }
     if (options.props) {
@@ -604,5 +629,6 @@ export function getProps(options) {
     }
     return [options.newprops, options.watch];
 }
-if (!isExecute)
+if (!isExecute) {
     setProxyToRaw(aVue.toRaw);
+}

package/src/template.d.ts

@@ -1 +1,8 @@
+/**
+ * Compiler function that convert the template property to DOM element.
+ *
+ * @param {any} templateElement - represents value of the template property from the component.
+ * @param {Object} helper - represents helper object to utilize on template compilation.
+ * @returns {NodeList} template element that append to the component.
+ */
 export declare function compile(templateElement: any, helper?: Object): (data: Object | JSON, component?: any, propName?: any, element?: any, root?: any) => Object;