@syncfusion/ej2-vue-base 20.1.48 → 20.1.55

package/CHANGELOG.md

@@ -2,11 +2,35 @@
 
 ## [Unreleased]
 
-## Common
+## 20.1.51 (2022-04-26)
 
-### Bug Fixes
+### Common
+
+#### Bug Fixes
+
+- `#FB9750` - The issue with "Providers are not accessible for Vue component with typescript application environment" has been resolved.
+
+## 20.1.51 (2022-04-26)
+
+### Common
+
+#### Bug Fixes
+
+- `#I334904`, `#I347008` - The issue with "Script error in Vite + Vue application" has been resolved.
+
+## 20.1.48 (2022-04-12)
+
+### Common
+
+- The "Header Rows in Schedule component not rendered in Vue" issue has been fixed.
+
+## 20.1.47 (2022-04-04)
+
+### Common
+
+#### New Features
 
--  `358507` - The v-for support has been provided.
+-  `F140652`, `F138394`, `F148391`, `I309881`, `F167735`, `I228458` - Provided slot template support for the Vue components.
 
 ## 19.4.53 (2022-02-22)
 

package/README.md

@@ -78,9 +78,7 @@ Check the license detail [here](https://github.com/syncfusion/ej2-vue-ui-compone
 
 ## Changelog
 
-Check the changelog [here](https://ej2.syncfusion.com/vue/documentation/release-notes/index?utm_source=npm&utm_campaign=ej2-vue-base)
+Check the changelog [here](https://ej2.syncfusion.com/vue/documentation/release-notes?utm_source=npm&utm_campaign=ej2-vue-base)
 
     © Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
-    The Syncfusion Essential Studio license and copyright applies to this distribution.
-
-Added code
+    The Syncfusion Essential Studio license and copyright applies to this distribution.

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

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-vue-base.umd.min.js
-*  version : 20.1.48
+*  version : 20.1.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
@@ -9,7 +9,16 @@
 */
 /*!
 *  filename: ej2-vue-base.umd.min.js
-*  version : 19.2.55
+*  version : 20.1.47
+*  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.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/es6/ej2-vue-base.es2015.js

@@ -39,6 +39,7 @@ class ComponentBase extends vueImport {
         this.hasInjectedModules = false;
         this.hasChildDirective = false;
         this.childDirObjects = '';
+        this.isDecorator = false;
     }
     created() {
         if (!this.propKeys) {
@@ -53,7 +54,11 @@ class ComponentBase extends vueImport {
         let vueInjectables = getValue('$parent.$options.provide', this);
         if (this.hasInjectedModules && !isExecute) {
             let prevModule = [];
-            if (injectables) {
+            if (injectables && injectables.managed) {
+                this.isDecorator = true;
+                prevModule = this.getInjectedServices() || [];
+            }
+            else if (injectables) {
                 prevModule = injectables[this.ej2Instances.getModuleName()] || [];
             }
             else if (vueInjectables) {
@@ -87,7 +92,10 @@ class ComponentBase extends vueImport {
     getInjectedServices() {
         let ret = [];
         let provide;
-        if (this.$vnode) {
+        if (this.$root && this.isDecorator) {
+            provide = getValue('$root.$options.provide', this);
+        }
+        else if (this.$vnode) {
             provide = getValue('$vnode.context.$options.provide', this);
         }
         else if (this.$parent) {
@@ -97,8 +105,38 @@ class ComponentBase extends vueImport {
             // tslint:disable:no-any
             let injectables = provide;
             if (typeof provide === 'function') {
+                if (provide.managed) {
+                    let provideKey = provide.managed;
+                    let provideValue = Object.keys(provideKey);
+                    let key;
+                    if (this.$root && this.isDecorator) {
+                        key = Object.keys(this.$root);
+                    }
+                    else if (this.$vnode) {
+                        key = Object.keys(this.$vnode.context);
+                    }
+                    else if (this.$parent) {
+                        key = Object.keys(this.$parent);
+                    }
+                    for (let i = 0; i < provideValue.length; i++) {
+                        for (let j = 0; j < key.length; j++) {
+                            if ((key[j].indexOf(provideValue[i])) !== -1) {
+                                if (this.$root && this.isDecorator) {
+                                    provideKey[provideValue[j]] = this.$root[key[i]];
+                                }
+                                else if (this.$vnode) {
+                                    provideKey[provideValue[i]] = this.$vnode.context[key[j]];
+                                }
+                                else if (this.$parent) {
+                                    provideKey[provideValue[i]] = this.$parent[key[j]];
+                                }
+                                injectables = provideKey;
+                            }
+                        }
+                    }
+                }
                 // tslint:disable:no-any
-                if (this.$vnode) {
+                else if (this.$vnode) {
                     injectables = this.$vnode.context.$options.provide();
                 }
                 else if (this.$parent) {
@@ -107,6 +145,7 @@ class ComponentBase extends vueImport {
             }
             ret = injectables[this.ej2Instances.getModuleName()] || [];
         }
+        this.isDecorator = false;
         return ret;
     }
     updated() {
@@ -161,8 +200,10 @@ class ComponentBase extends vueImport {
             if (this[0] && this[0][1].slots.default) {
                 propRef = this[0][1].slots.default();
             }
-            else if (this && this.$slots) {
-                propRef = this.$slots.default();
+            else if (this && this.$) {
+                if (this.$.slots) {
+                    propRef = this.$.slots.default();
+                }
             }
             if (propRef) {
                 for (let i = 0; i < propRef.length; i++) {
@@ -179,6 +220,9 @@ class ComponentBase extends vueImport {
                         else if (controlName == "bulletchart" && keyRef == "range") {
                             keyRef = "ranges";
                         }
+                        else if (controlName == "schedule" && keyRef == "header") {
+                            keyRef = "headerRows";
+                        }
                         dirProps[keyRef] = ref[key];
                     }
                 }
@@ -563,11 +607,9 @@ function collectDataFromConstructor(vm, Component) {
 let stringCompiler = getTemplateEngine();
 function compile(templateElement, helper) {
     let that = this;
-    if (typeof templateElement === "string") {
-        return stringCompiler(templateElement, helper);
-    }
-    else {
-        return (data, context, propName) => {
+    return (data, context, propName, element, root) => {
+        let returnEle;
+        if (context) {
             let pid = getUniqueID("templateParentDiv");
             let id = getUniqueID("templateDiv");
             let ele = createElement("div", {
@@ -575,94 +617,201 @@ function compile(templateElement, helper) {
                 innerHTML: '<div id="' + id + '"></div>',
             });
             document.body.appendChild(ele);
-            let tempObj = templateElement.call(that, {});
-            let returnEle;
-            if (context) {
-                if (gh) {
-                    let object = tempObj;
-                    let propsData = getValue("template.propsData", tempObj);
-                    let dataObj = {
-                        data: { data: extend(tempObj.data || {}, data) },
-                        parent: context.vueInstance,
-                    };
-                    if (!object.template) {
-                        object.template = object[Object.keys(object)[0]];
-                    }
-                    let templateCompRef;
-                    if (object.template.extends) {
-                        templateCompRef = object.template.extends._context.components.template;
-                    }
-                    else {
-                        templateCompRef = object.template._context.components[templateElement.name];
-                        if (!templateCompRef) {
-                            let key = Object.keys(object.template._context.components)[0];
-                            templateCompRef = object.template._context.components[key];
+            if (gh && typeof templateElement === "string") {
+                let vue3Slots = getVue3Slot(context.vueInstance, templateElement, root);
+                if (vue3Slots) {
+                    // Compilation for Vue 3 slot template
+                    allVue
+                        .createApp({
+                        render() {
+                            return vue3Slots[templateElement]({ data: data });
                         }
+                    })
+                        .mount("#" + id);
+                    returnEle = ele.childNodes;
+                    detach(ele);
+                }
+                else {
+                    // Compilation for Vue 3 string template
+                    detach(ele);
+                    return stringCompiler(templateElement, helper)(data);
+                }
+            }
+            else if (gh) {
+                // Compilation for Vue 3 functional template
+                let tempObj = templateElement.call(that, {});
+                let object = tempObj;
+                let propsData = getValue("template.propsData", tempObj);
+                let dataObj = {
+                    data: { data: extend(tempObj.data || {}, data) },
+                    parent: context.vueInstance,
+                };
+                if (!object.template) {
+                    object.template = object[Object.keys(object)[0]];
+                }
+                let templateCompRef;
+                if (object.template.extends) {
+                    templateCompRef = object.template.extends._context.components.template;
+                }
+                else {
+                    templateCompRef = object.template._context.components[templateElement.name];
+                    if (!templateCompRef) {
+                        let key = Object.keys(object.template._context.components)[0];
+                        templateCompRef = object.template._context.components[key];
                     }
-                    let tempRef;
-                    if (propsData) {
-                        tempRef = Object.assign(templateCompRef.data(), propsData);
-                    }
-                    else {
-                        tempRef = Object.assign(templateCompRef.data(), dataObj.data);
-                        if (templateCompRef.components) {
-                            let objkeys = Object.keys(templateCompRef.components) || [];
-                            for (let objstring of objkeys) {
-                                let intComponent = templateCompRef.components[objstring];
-                                if (intComponent && intComponent.data) {
-                                    let tempRef2 = Object.assign(intComponent.data(), dataObj.data);
-                                    intComponent.data = function () { return tempRef2; };
-                                }
+                }
+                let tempRef;
+                if (propsData) {
+                    tempRef = Object.assign(templateCompRef.data(), propsData);
+                }
+                else {
+                    tempRef = Object.assign(templateCompRef.data(), dataObj.data);
+                    if (templateCompRef.components) {
+                        let objkeys = Object.keys(templateCompRef.components) || [];
+                        for (let objstring of objkeys) {
+                            let intComponent = templateCompRef.components[objstring];
+                            if (intComponent && intComponent.data) {
+                                let tempRef2 = Object.assign(intComponent.data(), dataObj.data);
+                                intComponent.data = function () { return tempRef2; };
                             }
                         }
                     }
-                    templateCompRef.data = function () { return tempRef; };
-                    allVue
-                        .createApp(templateCompRef)
-                        .mount("#" + id);
+                }
+                templateCompRef.data = function () { return tempRef; };
+                allVue
+                    .createApp(templateCompRef)
+                    .mount("#" + id);
+                returnEle = ele.childNodes;
+                detach(ele);
+            }
+            else if (typeof templateElement === "string") {
+                let vue2Slots = getVue2Slot(context.vueInstance, templateElement, root);
+                if (vue2Slots) {
+                    // Compilation for Vue 2 slot template
+                    let vueTemplate = new Vue$1__default({
+                        render() {
+                            return vue2Slots[templateElement]({ data: data });
+                        }
+                    });
+                    vueTemplate.$mount("#" + id);
                     returnEle = ele.childNodes;
                     detach(ele);
                 }
                 else {
-                    let templateFunction = tempObj.template;
-                    let propsData = getValue("template.propsData", tempObj);
-                    let dataObj = {
-                        data: { data: extend(tempObj.data || {}, data) },
-                        parent: context.vueInstance,
-                    };
-                    if (propsData) {
-                        templateFunction = tempObj.template.extends;
-                        dataObj.propsData = propsData;
-                    }
-                    if (typeof templateFunction !== "function") {
-                        templateFunction = Vue$1__default.extend(templateFunction);
+                    // Compilation for Vue 2 string template
+                    detach(ele);
+                    return stringCompiler(templateElement, helper)(data);
+                }
+            }
+            else {
+                // Compilation for Vue 2 functional template
+                let tempObj = templateElement.call(that, {});
+                let templateFunction = tempObj.template;
+                let propsData = getValue("template.propsData", tempObj);
+                let dataObj = {
+                    data: { data: extend(tempObj.data || {}, data) },
+                    parent: context.vueInstance,
+                };
+                if (propsData) {
+                    templateFunction = tempObj.template.extends;
+                    dataObj.propsData = propsData;
+                }
+                if (typeof templateFunction !== "function") {
+                    templateFunction = Vue$1__default.extend(templateFunction);
+                }
+                let templateVue = 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 = context.vueInstance.templateCollection;
+                    if (!templateInstance) {
+                        context.vueInstance.templateCollection = {};
+                        templateInstance = context.vueInstance.templateCollection;
                     }
-                    let templateVue = 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 = context.vueInstance.templateCollection;
-                        if (!templateInstance) {
-                            context.vueInstance.templateCollection = {};
-                            templateInstance = context.vueInstance.templateCollection;
-                        }
-                        if (propName) {
-                            if (!templateInstance[propName]) {
-                                templateInstance[propName] = [];
-                            }
-                            templateInstance[propName].push(returnEle[0]);
+                    if (propName) {
+                        if (!templateInstance[propName]) {
+                            templateInstance[propName] = [];
                         }
+                        templateInstance[propName].push(returnEle[0]);
                     }
-                    detach(ele);
                 }
+                detach(ele);
             }
-            return returnEle || [];
-        };
-    }
+        }
+        return returnEle || [];
+    };
 }
 setTemplateEngine({ compile: compile });
+// Get the Vue2 slot template from the root or current Vue component.
+function getVue2Slot(vueInstance, templateElement, root) {
+    if (!vueInstance && !(root && root.vueInstance)) {
+        return undefined;
+    }
+    let instance = (root && root.vueInstance) ? root.vueInstance : vueInstance;
+    return getVue2ChildSlot(instance, templateElement);
+}
+function getVue2ChildSlot(vueInstance, templateElement) {
+    if (!vueInstance) {
+        return undefined;
+    }
+    let slots = vueInstance.$slots;
+    let scopedSlots = vueInstance.$scopedSlots;
+    let vSlots = vueInstance.scopedSlots;
+    let children = vueInstance.children;
+    if (scopedSlots && scopedSlots[templateElement]) {
+        return scopedSlots;
+    }
+    else if (slots && slots.default) {
+        let childSlots = slots.default;
+        for (let i = 0; i < childSlots.length; i++) {
+            let slot = getVue2ChildSlot(getSlot(childSlots[i]), templateElement);
+            if (slot) {
+                return slot;
+            }
+        }
+    }
+    else if (vSlots && vSlots[templateElement]) {
+        return vSlots;
+    }
+    else if (children) {
+        for (let i = 0; i < children.length; i++) {
+            let slot = getVue2ChildSlot(getSlot(children[i]), templateElement);
+            if (slot) {
+                return slot;
+            }
+        }
+    }
+    return undefined;
+}
+function getSlot(vnode) {
+    let slot = (vnode.componentOptions && vnode.componentOptions.children) ? vnode.componentOptions : vnode.data;
+    return vnode.componentInstance ? vnode.componentInstance : slot;
+}
+// Get the Vue3 slot template from the root or current Vue component.
+function getVue3Slot(vueInstance, templateElement, root) {
+    if (!vueInstance && !(root && root.vueInstance)) {
+        return undefined;
+    }
+    let slots = (root && root.vueInstance) ? root.vueInstance.$slots : vueInstance.$slots;
+    return getVue3ChildSlot(slots, templateElement);
+}
+function getVue3ChildSlot(slots, templateElement) {
+    if (slots && slots[templateElement]) {
+        return slots;
+    }
+    else if (slots && slots.default) {
+        let childSlots = slots.default();
+        for (let i = 0; i < childSlots.length; i++) {
+            let slot = getVue3ChildSlot(childSlots[i].children, templateElement);
+            if (slot) {
+                return slot;
+            }
+        }
+    }
+    return undefined;
+}
 
 /**
  * index for component base