@syncfusion/ej2-vue-base 20.1.48 → 20.1.55

package/dist/es6/ej2-vue-base.es5.js

@@ -53,6 +53,7 @@ var ComponentBase = /** @__PURE__ @class */ (function (_super) {
         _this.hasInjectedModules = false;
         _this.hasChildDirective = false;
         _this.childDirObjects = '';
+        _this.isDecorator = false;
         return _this;
     }
     ComponentBase.prototype.created = function () {
@@ -74,7 +75,11 @@ var ComponentBase = /** @__PURE__ @class */ (function (_super) {
         var vueInjectables = getValue('$parent.$options.provide', this);
         if (this.hasInjectedModules && !isExecute) {
             var prevModule = [];
-            if (injectables) {
+            if (injectables && injectables.managed) {
+                this.isDecorator = true;
+                prevModule = this.getInjectedServices() || [];
+            }
+            else if (injectables) {
                 prevModule = injectables[this.ej2Instances.getModuleName()] || [];
             }
             else if (vueInjectables) {
@@ -109,7 +114,10 @@ var ComponentBase = /** @__PURE__ @class */ (function (_super) {
     ComponentBase.prototype.getInjectedServices = function () {
         var ret = [];
         var 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) {
@@ -119,8 +127,38 @@ var ComponentBase = /** @__PURE__ @class */ (function (_super) {
             // tslint:disable:no-any
             var injectables = provide;
             if (typeof provide === 'function') {
+                if (provide.managed) {
+                    var provideKey = provide.managed;
+                    var provideValue = Object.keys(provideKey);
+                    var key = void 0;
+                    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 (var i = 0; i < provideValue.length; i++) {
+                        for (var 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) {
@@ -129,6 +167,7 @@ var ComponentBase = /** @__PURE__ @class */ (function (_super) {
             }
             ret = injectables[this.ej2Instances.getModuleName()] || [];
         }
+        this.isDecorator = false;
         return ret;
     };
     ComponentBase.prototype.updated = function () {
@@ -185,8 +224,10 @@ var ComponentBase = /** @__PURE__ @class */ (function (_super) {
             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 (var i = 0; i < propRef.length; i++) {
@@ -203,6 +244,9 @@ var ComponentBase = /** @__PURE__ @class */ (function (_super) {
                         else if (controlName == "bulletchart" && keyRef == "range") {
                             keyRef = "ranges";
                         }
+                        else if (controlName == "schedule" && keyRef == "header") {
+                            keyRef = "headerRows";
+                        }
                         dirProps[keyRef] = ref[key];
                     }
                 }
@@ -618,11 +662,9 @@ function collectDataFromConstructor(vm, Component) {
 var stringCompiler = getTemplateEngine();
 function compile(templateElement, helper) {
     var that = this;
-    if (typeof templateElement === "string") {
-        return stringCompiler(templateElement, helper);
-    }
-    else {
-        return function (data, context, propName) {
+    return function (data, context, propName, element, root) {
+        var returnEle;
+        if (context) {
             var pid = getUniqueID("templateParentDiv");
             var id = getUniqueID("templateDiv");
             var ele = createElement("div", {
@@ -630,98 +672,205 @@ function compile(templateElement, helper) {
                 innerHTML: '<div id="' + id + '"></div>',
             });
             document.body.appendChild(ele);
-            var tempObj = templateElement.call(that, {});
-            var returnEle;
-            if (context) {
-                if (gh) {
-                    var object = tempObj;
-                    var propsData = getValue("template.propsData", tempObj);
-                    var dataObj = {
-                        data: { data: extend(tempObj.data || {}, data) },
-                        parent: context.vueInstance,
-                    };
-                    if (!object.template) {
-                        object.template = object[Object.keys(object)[0]];
-                    }
-                    var templateCompRef = void 0;
-                    if (object.template.extends) {
-                        templateCompRef = object.template.extends._context.components.template;
-                    }
-                    else {
-                        templateCompRef = object.template._context.components[templateElement.name];
-                        if (!templateCompRef) {
-                            var key = Object.keys(object.template._context.components)[0];
-                            templateCompRef = object.template._context.components[key];
+            if (gh && typeof templateElement === "string") {
+                var vue3Slots_1 = getVue3Slot(context.vueInstance, templateElement, root);
+                if (vue3Slots_1) {
+                    // Compilation for Vue 3 slot template
+                    allVue
+                        .createApp({
+                        render: function () {
+                            return vue3Slots_1[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
+                var tempObj = templateElement.call(that, {});
+                var object = tempObj;
+                var propsData = getValue("template.propsData", tempObj);
+                var dataObj = {
+                    data: { data: extend(tempObj.data || {}, data) },
+                    parent: context.vueInstance,
+                };
+                if (!object.template) {
+                    object.template = object[Object.keys(object)[0]];
+                }
+                var templateCompRef = void 0;
+                if (object.template.extends) {
+                    templateCompRef = object.template.extends._context.components.template;
+                }
+                else {
+                    templateCompRef = object.template._context.components[templateElement.name];
+                    if (!templateCompRef) {
+                        var key = Object.keys(object.template._context.components)[0];
+                        templateCompRef = object.template._context.components[key];
                     }
-                    var tempRef_1;
-                    if (propsData) {
-                        tempRef_1 = Object.assign(templateCompRef.data(), propsData);
-                    }
-                    else {
-                        tempRef_1 = Object.assign(templateCompRef.data(), dataObj.data);
-                        if (templateCompRef.components) {
-                            var objkeys = Object.keys(templateCompRef.components) || [];
-                            var _loop_1 = function (objstring) {
-                                var intComponent = templateCompRef.components[objstring];
-                                if (intComponent && intComponent.data) {
-                                    var tempRef2_1 = Object.assign(intComponent.data(), dataObj.data);
-                                    intComponent.data = function () { return tempRef2_1; };
-                                }
-                            };
-                            for (var _i = 0, objkeys_1 = objkeys; _i < objkeys_1.length; _i++) {
-                                var objstring = objkeys_1[_i];
-                                _loop_1(objstring);
+                }
+                var tempRef_1;
+                if (propsData) {
+                    tempRef_1 = Object.assign(templateCompRef.data(), propsData);
+                }
+                else {
+                    tempRef_1 = Object.assign(templateCompRef.data(), dataObj.data);
+                    if (templateCompRef.components) {
+                        var objkeys = Object.keys(templateCompRef.components) || [];
+                        var _loop_1 = function (objstring) {
+                            var intComponent = templateCompRef.components[objstring];
+                            if (intComponent && intComponent.data) {
+                                var tempRef2_1 = Object.assign(intComponent.data(), dataObj.data);
+                                intComponent.data = function () { return tempRef2_1; };
                             }
+                        };
+                        for (var _i = 0, objkeys_1 = objkeys; _i < objkeys_1.length; _i++) {
+                            var objstring = objkeys_1[_i];
+                            _loop_1(objstring);
                         }
                     }
-                    templateCompRef.data = function () { return tempRef_1; };
-                    allVue
-                        .createApp(templateCompRef)
-                        .mount("#" + id);
+                }
+                templateCompRef.data = function () { return tempRef_1; };
+                allVue
+                    .createApp(templateCompRef)
+                    .mount("#" + id);
+                returnEle = ele.childNodes;
+                detach(ele);
+            }
+            else if (typeof templateElement === "string") {
+                var vue2Slots_1 = getVue2Slot(context.vueInstance, templateElement, root);
+                if (vue2Slots_1) {
+                    // Compilation for Vue 2 slot template
+                    var vueTemplate = new Vue$1__default({
+                        render: function () {
+                            return vue2Slots_1[templateElement]({ data: data });
+                        }
+                    });
+                    vueTemplate.$mount("#" + id);
                     returnEle = ele.childNodes;
                     detach(ele);
                 }
                 else {
-                    var templateFunction = tempObj.template;
-                    var propsData = getValue("template.propsData", tempObj);
-                    var 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
+                var tempObj = templateElement.call(that, {});
+                var templateFunction = tempObj.template;
+                var propsData = getValue("template.propsData", tempObj);
+                var 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);
+                }
+                var 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) {
+                    var templateInstance = context.vueInstance.templateCollection;
+                    if (!templateInstance) {
+                        context.vueInstance.templateCollection = {};
+                        templateInstance = context.vueInstance.templateCollection;
                     }
-                    var 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) {
-                        var 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;
+    }
+    var instance = (root && root.vueInstance) ? root.vueInstance : vueInstance;
+    return getVue2ChildSlot(instance, templateElement);
+}
+function getVue2ChildSlot(vueInstance, templateElement) {
+    if (!vueInstance) {
+        return undefined;
+    }
+    var slots = vueInstance.$slots;
+    var scopedSlots = vueInstance.$scopedSlots;
+    var vSlots = vueInstance.scopedSlots;
+    var children = vueInstance.children;
+    if (scopedSlots && scopedSlots[templateElement]) {
+        return scopedSlots;
+    }
+    else if (slots && slots.default) {
+        var childSlots = slots.default;
+        for (var i = 0; i < childSlots.length; i++) {
+            var slot = getVue2ChildSlot(getSlot(childSlots[i]), templateElement);
+            if (slot) {
+                return slot;
+            }
+        }
+    }
+    else if (vSlots && vSlots[templateElement]) {
+        return vSlots;
+    }
+    else if (children) {
+        for (var i = 0; i < children.length; i++) {
+            var slot = getVue2ChildSlot(getSlot(children[i]), templateElement);
+            if (slot) {
+                return slot;
+            }
+        }
+    }
+    return undefined;
+}
+function getSlot(vnode) {
+    var 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;
+    }
+    var 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) {
+        var childSlots = slots.default();
+        for (var i = 0; i < childSlots.length; i++) {
+            var slot = getVue3ChildSlot(childSlots[i].children, templateElement);
+            if (slot) {
+                return slot;
+            }
+        }
+    }
+    return undefined;
+}
 
 /**
  * index for component base