@syncfusion/ej2-vue-base 25.2.4 → 26.2.4

package/src/template.js

@@ -9,27 +9,33 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { setTemplateEngine, getTemplateEngine, getUniqueID, createElement, detach, extend, getValue } from "@syncfusion/ej2-base";
-import { aVue as Vue, isExecute } from "./component-base";
-// tslint:disable:no-any
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types */
+import { setTemplateEngine, getTemplateEngine, getUniqueID, createElement, detach, extend, getValue } from '@syncfusion/ej2-base';
+import { aVue as Vue, isExecute } from './component-base';
 var stringCompiler = getTemplateEngine();
+/**
+ * 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 function compile(templateElement, helper) {
-    var that = this;
+    var _this = this;
     return function (data, context, propName, element, root) {
-        var _a, _b, _c, _d;
         var returnEle;
         if (context) {
             var plugins = context.vueInstance && context.vueInstance.plugins ? { plugins: context.vueInstance.plugins } : {};
             var vueInstance = context.vueInstance ? context.vueInstance :
                 ((root && root.vueInstance) ? root.vueInstance : null);
-            var pid = getUniqueID("templateParentDiv");
-            var id = getUniqueID("templateDiv");
-            var ele = createElement("div", {
+            var pid = getUniqueID('templateParentDiv');
+            var id = getUniqueID('templateDiv');
+            var ele = createElement('div', {
                 id: pid,
-                innerHTML: '<div id="' + id + '"></div>',
+                innerHTML: '<div id="' + id + '"></div>'
             });
             document.body.appendChild(ele);
-            if (!isExecute && (typeof templateElement === "string" || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function'))) {
+            if (!isExecute && (typeof templateElement === 'string' || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function'))) {
                 var vueSlot_1 = getCurrentVueSlot(context.vueInstance, templateElement, root);
                 if (vueSlot_1) {
                     // Compilation for Vue 3 slot template
@@ -42,13 +48,20 @@ export function compile(templateElement, helper) {
                     // Get values for Vue 3 slot template
                     getValues(app, context.vueInstance, root);
                     Vue.render(app, ele);
+                    returnEle = ele.childNodes;
                     if (vueInstance) {
-                        if (!vueInstance['portals']) {
-                            vueInstance['portals'] = [];
+                        var templateInstance = vueInstance.templateCollection;
+                        if (!templateInstance) {
+                            vueInstance.templateCollection = {};
+                            templateInstance = vueInstance.templateCollection;
+                        }
+                        if (propName) {
+                            if (!templateInstance["" + propName]) {
+                                templateInstance["" + propName] = [];
+                            }
+                            templateInstance["" + propName].push(ele);
                         }
-                        (_a = vueInstance.portals).push.apply(_a, [].slice.call(ele.children));
                     }
-                    returnEle = ele.childNodes;
                     detach(ele);
                 }
                 else {
@@ -59,12 +72,12 @@ export function compile(templateElement, helper) {
             }
             else if (!isExecute) {
                 // Compilation for Vue 3 functional template
-                var tempObj = templateElement.call(that, {});
+                var tempObj = templateElement.call(_this, {});
                 var object = tempObj;
-                var propsData = getValue("template.propsData", tempObj);
+                var propsData = getValue('template.propsData', tempObj);
                 var dataObj_1 = {
                     data: { data: extend(tempObj.data || {}, data) },
-                    parent: context.vueInstance,
+                    parent: context.vueInstance
                 };
                 if (!object.template) {
                     object.template = object[Object.keys(object)[0]];
@@ -101,9 +114,12 @@ export function compile(templateElement, helper) {
                         var _loop_1 = function (objstring) {
                             var intComponent = templateCompRef.components["" + objstring];
                             if (intComponent && intComponent.data) {
-                                if (!intComponent.__data)
+                                if (!intComponent.__data) {
                                     intComponent.__data = intComponent.data;
-                                intComponent.data = function (proxy) { return Object.assign(intComponent.__data.call(proxy), dataObj_1.data); };
+                                }
+                                intComponent.data = function (proxy) {
+                                    return Object.assign(intComponent.__data.call(proxy), dataObj_1.data);
+                                };
                             }
                         };
                         for (var _i = 0, objkeys_1 = objkeys; _i < objkeys_1.length; _i++) {
@@ -121,41 +137,38 @@ export function compile(templateElement, helper) {
                 // Get values for Vue 3 functional template
                 getValues(app, context.vueInstance, root);
                 Vue.render(app, ele);
-                if (vueInstance) {
-                    if (!vueInstance['portals']) {
-                        vueInstance['portals'] = [];
-                    }
-                    (_b = vueInstance.portals).push.apply(_b, [].slice.call(ele.children));
-                }
                 returnEle = ele.childNodes;
-                if (context.vueInstance) {
-                    var templateInstance = context.vueInstance.templateCollection;
+                dataObj_1.parent = null;
+                if (vueInstance) {
+                    var templateInstance = vueInstance.templateCollection;
                     if (!templateInstance) {
-                        context.vueInstance.templateCollection = {};
-                        templateInstance = context.vueInstance.templateCollection;
+                        vueInstance.templateCollection = {};
+                        templateInstance = vueInstance.templateCollection;
                     }
                     if (propName) {
                         if (!templateInstance["" + propName]) {
                             templateInstance["" + propName] = [];
                         }
-                        templateInstance["" + propName].push(returnEle[0]);
+                        templateInstance["" + propName].push(ele);
                     }
                 }
                 detach(ele);
             }
-            else if (typeof templateElement === "string" || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function')) {
+            else if (typeof templateElement === 'string' || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function')) {
                 var vueSlot_2 = getVueSlot(context.vueInstance, templateElement, root);
                 if (vueSlot_2) {
                     // Get provide values for Vue 2 slot template
                     var provided_1 = {};
                     var getProvideValues_1 = function (vueinstance) {
-                        if (vueinstance['$parent'])
+                        if (vueinstance['$parent']) {
                             getProvideValues_1(vueinstance.$parent);
+                        }
                         if (vueinstance['_provided'] && Object.keys(vueinstance['_provided']).length > 0) {
                             provided_1 = __assign({}, provided_1, vueinstance._provided);
                         }
                     };
-                    var vueInstance_1 = context.vueInstance ? context.vueInstance : ((root && root.vueInstance) ? root.vueInstance : null);
+                    var vueInstance_1 = context.vueInstance ? context.vueInstance :
+                        ((root && root.vueInstance) ? root.vueInstance : null);
                     if (vueInstance_1) {
                         getProvideValues_1(vueInstance_1);
                     }
@@ -166,14 +179,21 @@ export function compile(templateElement, helper) {
                             return vueSlot_2["" + templateElement]({ data: data });
                         }
                     });
-                    vueTemplate.$mount("#" + id);
+                    vueTemplate.$mount('#' + id);
+                    returnEle = ele.childNodes;
                     if (vueInstance_1) {
-                        if (!vueInstance_1['portals']) {
-                            vueInstance_1['portals'] = [];
+                        var templateInstance = vueInstance_1.templateCollection;
+                        if (!templateInstance) {
+                            vueInstance_1.templateCollection = {};
+                            templateInstance = vueInstance_1.templateCollection;
+                        }
+                        if (propName) {
+                            if (!templateInstance["" + propName]) {
+                                templateInstance["" + propName] = [];
+                            }
+                            templateInstance["" + propName].push(returnEle[0]);
                         }
-                        (_c = vueInstance_1.portals).push.apply(_c, [].slice.call(ele.children));
                     }
-                    returnEle = ele.childNodes;
                     detach(ele);
                 }
                 else {
@@ -184,18 +204,18 @@ export function compile(templateElement, helper) {
             }
             else {
                 // Compilation for Vue 2 functional template
-                var tempObj = templateElement.call(that, {});
+                var tempObj = templateElement.call(_this, {});
                 var templateFunction = tempObj.template;
-                var propsData = getValue("template.propsData", tempObj);
+                var propsData = getValue('template.propsData', tempObj);
                 var dataObj = {
                     data: { data: extend(tempObj.data || {}, data) },
-                    parent: context.vueInstance,
+                    parent: context.vueInstance
                 };
                 if (propsData) {
                     templateFunction = tempObj.template.extends;
                     dataObj.propsData = propsData;
                 }
-                if (typeof templateFunction !== "function") {
+                if (typeof templateFunction !== 'function') {
                     templateFunction = Vue.extend(templateFunction);
                 }
                 if (templateFunction.options.setup) {
@@ -204,19 +224,14 @@ export function compile(templateElement, helper) {
                 var templateVue = new templateFunction(dataObj);
                 // let templateVue = new Vue(tempObj.template);
                 // templateVue.$data.data = extend(tempObj.data, data);
-                templateVue.$mount("#" + id);
-                if (vueInstance) {
-                    if (!vueInstance['portals']) {
-                        vueInstance['portals'] = [];
-                    }
-                    (_d = vueInstance.portals).push.apply(_d, [].slice.call(ele.children));
-                }
+                templateVue.$mount('#' + id);
                 returnEle = ele.childNodes;
-                if (context.vueInstance) {
-                    var templateInstance = context.vueInstance.templateCollection;
+                dataObj.parent = null;
+                if (vueInstance) {
+                    var templateInstance = vueInstance.templateCollection;
                     if (!templateInstance) {
-                        context.vueInstance.templateCollection = {};
-                        templateInstance = context.vueInstance.templateCollection;
+                        vueInstance.templateCollection = {};
+                        templateInstance = vueInstance.templateCollection;
                     }
                     if (propName) {
                         if (!templateInstance["" + propName]) {
@@ -232,6 +247,14 @@ export function compile(templateElement, helper) {
     };
 }
 setTemplateEngine({ compile: compile });
+/**
+ * Collect values from the app instance.
+ *
+ * @param {any} app - represents global application instance
+ * @param {any} cInstance - represents Vue component instance
+ * @param {any} root - represents parent component instance
+ * @returns {void}
+ */
 function getValues(app, cInstance, root) {
     var vueInstance = cInstance ? cInstance : ((root && root.vueInstance) ? root.vueInstance : null);
     if (!vueInstance) {
@@ -242,8 +265,9 @@ function getValues(app, cInstance, root) {
     // Get provide value from child component.
     var provided = {};
     var getProvideValue = function (vueinstance) {
-        if (vueinstance['$'] && vueinstance['$']['parent'])
+        if (vueinstance['$'] && vueinstance['$']['parent']) {
             getProvideValue(vueinstance.$.parent);
+        }
         if (vueinstance['provides'] && Object.keys(vueinstance['provides']).length > 0) {
             provided = __assign({}, provided, vueinstance.provides);
         }
@@ -253,7 +277,14 @@ function getValues(app, cInstance, root) {
         app.appContext.provides = __assign({}, app.appContext.provides, provided);
     }
 }
-// Get the Vue2 slot template from the root or current Vue component.
+/**
+ * Get the Vue2 slot template from the root or current Vue component.
+ *
+ * @param {any} vueInstance - represents parent Vue instance.
+ * @param {any} templateElement - represents component property value
+ * @param {any} root - represents root Vue instance
+ * @returns {any} template Vue instance
+ */
 function getVueSlot(vueInstance, templateElement, root) {
     if (!vueInstance && !(root && root.vueInstance)) {
         return undefined;
@@ -261,6 +292,13 @@ function getVueSlot(vueInstance, templateElement, root) {
     var instance = (root && root.vueInstance) ? root.vueInstance : vueInstance;
     return getVueChildSlot(instance, templateElement);
 }
+/**
+ * Get the Vue2 nested slot template from the root or current Vue component.
+ *
+ * @param {any} vueInstance - represents parent Vue instance.
+ * @param {any} templateElement - represents component property value
+ * @returns {any} nested template Vue instance
+ */
 function getVueChildSlot(vueInstance, templateElement) {
     if (!vueInstance) {
         return undefined;
@@ -294,12 +332,25 @@ function getVueChildSlot(vueInstance, templateElement) {
     }
     return undefined;
 }
+/**
+ * Collect the component slot directive instance.
+ *
+ * @param {any} vnode - represents Vue components slot instance.
+ * @returns {any} the slot instance of the directive.
+ */
 function getSlot(vnode) {
     var slot = (vnode.componentOptions && vnode.componentOptions.children) ? vnode.componentOptions :
         (!vnode.data && (vnode.tag === 'e-markersettings' || vnode.tag === 'e-markersetting')) ? vnode : vnode.data;
     return vnode.componentInstance ? vnode.componentInstance : slot;
 }
-// Get the Vue3 slot template from the root or current Vue component.
+/**
+ * Get the Vue3 slot template from the root or current Vue component.
+ *
+ * @param {any} vueInstance - represents parent Vue instance.
+ * @param {any} templateElement - represents component property value
+ * @param {any} root - represents root Vue instance
+ * @returns {any} slot template instance
+ */
 function getCurrentVueSlot(vueInstance, templateElement, root) {
     if (!vueInstance && !(root && root.vueInstance)) {
         return undefined;
@@ -307,6 +358,13 @@ function getCurrentVueSlot(vueInstance, templateElement, root) {
     var slots = (root && root.vueInstance) ? root.vueInstance.$slots : vueInstance.$slots;
     return getChildVueSlot(slots, templateElement);
 }
+/**
+ * Get the Vue3 nested slot template from the root or current Vue component.
+ *
+ * @param {any} slots - represents slot instance.
+ * @param {any} templateElement - represents component property value
+ * @returns {any} nested template Vue instance
+ */
 function getChildVueSlot(slots, templateElement) {
     if (slots && slots["" + templateElement]) {
         return slots;

package/tslint.json

@@ -0,0 +1,111 @@
+{
+  "rules": {
+    "chai-vague-errors": true,
+    "use-isnan": true,
+    "missing-jsdoc": true,
+    "missing-optional-annotation": true,
+    "no-backbone-get-set-outside-model": true,
+    "no-banned-terms": true,
+    "no-constant-condition": true,
+    "no-control-regex": true,
+    "no-cookies": true,
+    "no-delete-expression": true,
+    "no-document-write": true,
+    "no-document-domain": true,
+    "no-disable-auto-sanitization": true,
+    "no-duplicate-case": true,
+    "no-duplicate-parameter-names": true,
+    "no-empty-interfaces": true,
+    "no-exec-script": true,
+    "no-function-constructor-with-string-args": true,
+    "no-function-expression": true,
+    "no-invalid-regexp": true,
+    "no-for-in": true,
+    "member-access": true,
+    "no-multiline-string": true,
+    "no-multiple-var-decl": true,
+    "no-unnecessary-bind": true,
+    "no-unnecessary-semicolons": true,
+    "no-octal-literal": true,
+    "no-regex-spaces": true,
+    "no-sparse-arrays": true,
+    "no-string-based-set-immediate": true,
+    "no-string-based-set-interval": true,
+    "no-unused-imports": true,
+    "no-with-statement": true,
+    "prefer-array-literal": true,
+    "promise-must-complete": false,
+    "react-no-dangerous-html": true,
+    "use-named-parameter": true,
+    "valid-typeof": true,
+    "max-func-body-length": [true, 100, {
+      "ignore-parameters-to-function-regex": "describe"
+    }],
+    "class-name": true,
+    "curly": true,
+    "eofline": false,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,       
+    "max-line-length": [true, 140],
+    "no-arg": true,
+    "no-console": [true,
+      "debug",
+      "info",
+      "log",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-parameter-properties": true,
+    "no-debugger": true,    
+    "no-duplicate-variable": true,
+    "no-empty": true,
+    "no-eval": true,
+    "no-string-literal": true,
+    "no-switch-case-fall-through": true,
+    "trailing-comma": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": false,
+    "no-var-requires": true,
+    "one-line": [true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "no-any": true,
+    "no-conditional-assignment": true,
+    "no-angle-bracket-type-assertion": false,
+    "align": [true, "parameters", "arguments", "statements"],
+    "no-empty-line-after-opening-brace": false,
+    "typedef-whitespace": [false],
+    "ban": true,
+    "quotemark": [true, "single"],
+    "semicolon": true,
+    "triple-equals": [true, "allow-null-check"],
+    "typedef": [true,
+      "call-signature",
+      "parameter",
+      "property-declaration",
+      "variable-declaration",
+      "arrow-parameter",
+      "member-variable-declaration"],    
+    "variable-name": true,
+    "whitespace": [true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "jsdoc-format": true,
+    "no-var-keyword": true,
+    "radix": true
+  }
+}