@syncfusion/ej2-vue-base 20.3.56 → 20.4.38

package/CHANGELOG.md

@@ -2,13 +2,16 @@
 
 ## [Unreleased]
 
-## 20.3.49 (2022-10-11)
-
 ### Common
 
+#### New Features
+
+- `#FB34897` - Provided Vue 3 direct script support for Syncfusion Vue components.
+
 #### Bug Fixes
 
-- `#I400596` - The issue with "Tab throwing script error while enabling a tab item using `v-if`" has been resolved.
+- `#I409205` - The issue with the "Signature plugin missing in the latest Vue 2 direct script" has been resolved.
+- The issue with the "v-model support is not working for the textbox component in Vue 3" has been resolved.
 
 ## 20.3.47 (2022-09-29)
 
@@ -204,4 +207,3 @@ Base library provide options to enable following Vue functionalities in Essentia
 #### Breaking Changes
 
 - The individual npm package will no longer bundle dependent component's style. The online web tool [CRG](https://crg.syncfusion.com/) can be used to combine specific set of component and its dependent component styles.
-

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

@@ -1,5 +1,14 @@
 /*!
 *  filename: ej2-vue-base.umd.min.js
+*  version : 20.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
+*  licensing@syncfusion.com. Any infringement will be prosecuted under
+*  applicable laws. 
+*/
+/*!
+*  filename: ej2-vue-base.umd.min.js
 *  version : 20.3.56
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.

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

@@ -16,7 +16,7 @@ function _interopRequireWildcard(obj) {
         if (obj != null) {
             for (let key in obj) {
                 if (Object.prototype.hasOwnProperty.call(obj, key))
-                    newObj[key] = obj[key];
+                    newObj[`${key}`] = obj[`${key}`];
             }
         }
         newObj.default = obj;
@@ -52,6 +52,7 @@ class ComponentBase extends vueImport {
         }
         let injectables = getValue('$root.$options.provide', this);
         let vueInjectables = getValue('$parent.$options.provide', this);
+        vueInjectables = !isNullOrUndefined(vueInjectables) ? vueInjectables : getValue('$.parent.provides', this);
         if (this.hasInjectedModules && !isExecute) {
             let prevModule = [];
             if (injectables && injectables.managed) {
@@ -77,7 +78,7 @@ class ComponentBase extends vueImport {
         let cusEle = this.$el ? this.$el.querySelectorAll("div.e-directive") : null;
         if (!isExecute && cusEle) {
             for (let i = 0; i < cusEle.length; i++) {
-                cusEle[i].parentElement && cusEle[i].parentElement.removeChild(cusEle[i]);
+                cusEle[parseInt(i.toString(), 10)].parentElement && cusEle[parseInt(i.toString(), 10)].parentElement.removeChild(cusEle[parseInt(i.toString(), 10)]);
             }
         }
         this.ej2Instances.isVue = true;
@@ -86,9 +87,19 @@ class ComponentBase extends vueImport {
         if (this.isVue3) {
             this.ej2Instances.ej2Instances = this.ej2Instances;
             this.ej2Instances.referModels = this.models;
+            this.setModelValue();
         }
         this.ej2Instances.appendTo(this.$el);
     }
+    setModelValue() {
+        if (!isNullOrUndefined(this.modelValue) || !isNullOrUndefined(this.$attrs.modelValue)) {
+            const key = this.models.toString().match(/checked|value/) || [];
+            const propKey = key[0];
+            if (!isNullOrUndefined(propKey)) {
+                this.ej2Instances[`${propKey}`] = !isNullOrUndefined(this.modelValue) ? this.modelValue : this.$attrs.modelValue;
+            }
+        }
+    }
     getInjectedServices() {
         let ret = [];
         let provide;
@@ -101,6 +112,9 @@ class ComponentBase extends vueImport {
         else if (this.$parent) {
             provide = getValue('$parent.$options.provide', this);
         }
+        if (isNullOrUndefined(provide) && !isNullOrUndefined(this.$)) {
+            provide = getValue('$.parent.provides', this);
+        }
         if (provide) {
             // tslint:disable:no-any
             let injectables = provide;
@@ -120,15 +134,15 @@ class ComponentBase extends vueImport {
                     }
                     for (let i = 0; i < provideValue.length; i++) {
                         for (let j = 0; j < key.length; j++) {
-                            if ((key[j].indexOf(provideValue[i])) !== -1) {
+                            if ((key[parseInt(j.toString(), 10)].indexOf(provideValue[parseInt(i.toString(), 10)])) !== -1) {
                                 if (this.$root && this.isDecorator) {
-                                    provideKey[provideValue[j]] = this.$root[key[i]];
+                                    provideKey[provideValue[parseInt(j.toString(), 10)]] = this.$root[key[parseInt(i.toString(), 10)]];
                                 }
                                 else if (this.$vnode) {
-                                    provideKey[provideValue[i]] = this.$vnode.context[key[j]];
+                                    provideKey[provideValue[parseInt(i.toString(), 10)]] = this.$vnode.context[key[parseInt(j.toString(), 10)]];
                                 }
                                 else if (this.$parent) {
-                                    provideKey[provideValue[i]] = this.$parent[key[j]];
+                                    provideKey[provideValue[parseInt(i.toString(), 10)]] = this.$parent[key[parseInt(j.toString(), 10)]];
                                 }
                                 injectables = provideKey;
                             }
@@ -149,6 +163,9 @@ class ComponentBase extends vueImport {
         return ret;
     }
     updated() {
+        if (this.isVue3) {
+            this.setModelValue();
+        }
         if (this.hasChildDirective) {
             let childKey = {};
             this.fetchChildPropValues(childKey);
@@ -168,8 +185,8 @@ class ComponentBase extends vueImport {
     bindProperties() {
         let options = {};
         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 ((!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) {
@@ -205,9 +222,10 @@ class ComponentBase extends vueImport {
             }
             if (propRef) {
                 for (let i = 0; i < propRef.length; i++) {
-                    if (propRef[i].type.methods) {
-                        let key = propRef[i].type.methods.getTag().replace("e-", "");
-                        let ref = this.resolveArrayDirectives(propRef[i].children, key);
+                    if (propRef[parseInt(i.toString(), 10)].type.methods || propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection') {
+                        let key = propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection' ? 'series-collection' :
+                            propRef[parseInt(i.toString(), 10)].type.methods.getTag().replace("e-", "");
+                        let ref = this.resolveArrayDirectives(propRef[parseInt(i.toString(), 10)].children, key);
                         let splitKeys = key.split('-');
                         let controlName = this.ej2Instances.getModuleName().toLowerCase();
                         let keyRef = (splitKeys.length > 1 && controlName.indexOf(splitKeys[0]) > -1) ? splitKeys[1] : splitKeys[0];
@@ -221,7 +239,7 @@ class ComponentBase extends vueImport {
                         else if (controlName == "schedule" && keyRef == "header") {
                             keyRef = "headerRows";
                         }
-                        dirProps[keyRef] = ref[key];
+                        dirProps[`${keyRef}`] = ref[`${key}`];
                     }
                 }
             }
@@ -233,7 +251,7 @@ class ComponentBase extends vueImport {
             this.childDirObjects = JSON.stringify(dirProps);
         }
         for (let dirProp of Object.keys(dirProps)) {
-            childOption[dirProp] = dirProps[dirProp];
+            childOption[`${dirProp}`] = dirProps[`${dirProp}`];
         }
     }
     resolveArrayDirectives(slots, tagName) {
@@ -241,7 +259,7 @@ class ComponentBase extends vueImport {
         let innerDirValues;
         slot = slots.default ? slots.default() : slots;
         let items = {};
-        items[tagName] = [];
+        items[`${tagName}`] = [];
         for (const childSlot of slot) {
             let tempObj = {};
             let tagRef = childSlot.type.methods ? childSlot.type.methods.getTag() : tagName;
@@ -253,22 +271,25 @@ class ComponentBase extends vueImport {
                 }
                 else {
                     for (var i = 0; i < Object.keys(innerDirValues).length; i++) {
-                        key = Object.keys(innerDirValues)[i];
-                        tempObj[key] = innerDirValues[key];
+                        key = Object.keys(innerDirValues)[parseInt(i.toString(), 10)];
+                        tempObj[`${key}`] = innerDirValues[`${key}`];
                     }
                     
                 }
             }
             if (childSlot.props) {
                 Object.keys(childSlot.props).forEach((key) => {
-                    tempObj[key] = childSlot.props[key];
+                    let propName = key.replace(/-[a-z]/g, (e) => { return e[1].toUpperCase(); });
+                    if (propName) {
+                        tempObj[`${propName}`] = childSlot.props[`${key}`];
+                    }
                 });
             }
             if (((/[s]\b/).test(tagRef) && innerDirValues) && (!(/[s]\b/).test(tagName) || innerDirValues.length)) {
-                items[tagName] = tempObj;
+                items[`${tagName}`] = tempObj;
             }
             else if (tempObj && Object.keys(tempObj).length !== 0) {
-                items[tagName].push(tempObj);
+                items[`${tagName}`].push(tempObj);
             }
         }
         return items;
@@ -281,9 +302,9 @@ class ComponentBase extends vueImport {
         for (const childSlot of slot) {
             let tagRef;
             let tag;
-            if (tagObject[tagName]) {
-                tagRef = Object.keys(tagObject[tagName]);
-                tag = tagRef.find((key) => tagObject[tagName][key] ===
+            if (tagObject[`${tagName}`]) {
+                tagRef = Object.keys(tagObject[`${tagName}`]);
+                tag = tagRef.find((key) => tagObject[`${tagName}`][`${key}`] ===
                     childSlot.type.methods.getTag().replace(/[s]\b/, ""));
                 tag = tag
                     ? tag.replace("e-", "")
@@ -293,17 +314,20 @@ class ComponentBase extends vueImport {
                 }
             }
             if (childSlot.children) {
-                innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
-                if (!items[tag]) {
-                    items[tag] = [];
+                innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[`${tagName}`], childSlot.type.methods.getTag());
+                if (!items[`${tag}`]) {
+                    items[`${tag}`] = [];
                 }
                 if (innerDirValues.length > 1) {
-                    items[tag] = innerDirValues;
+                    items[`${tag}`] = innerDirValues;
                 }
                 else {
-                    items[tag].push(innerDirValues);
+                    items[`${tag}`].push(innerDirValues);
                 }
             }
+            if (childSlot.props) {
+                childSlot.props = this.getCamelCaseProps(childSlot.props);
+            }
             if (slot.length > 1) {
                 items = Object.keys(items).length == 0 && !items.length ? [] : items;
                 if (childSlot.props) {
@@ -324,15 +348,15 @@ class ComponentBase extends vueImport {
         for (const childSlot of slot) {
             let tag = childSlot.type.methods.getTag().replace("e-", "");
             if (childSlot.children) {
-                innerDirValues = this.resolveMultilevelComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
+                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];
+                        items[`${tag}`] = !items[`${tag}`] ? [] : items[`${tag}`];
                         if (innerDirValues.length) {
-                            items[tag] = innerDirValues;
+                            items[`${tag}`] = innerDirValues;
                         }
                         else {
-                            items[tag].push(innerDirValues);
+                            items[`${tag}`].push(innerDirValues);
                         }
                     }
                     else if (innerDirValues) {
@@ -343,6 +367,9 @@ class ComponentBase extends vueImport {
                     items = innerDirValues ? innerDirValues : items;
                 }
             }
+            if (childSlot.props) {
+                childSlot.props = this.getCamelCaseProps(childSlot.props);
+            }
             if (slot.length > 1 && childSlot.props) {
                 if (items.length >= 0) {
                     items.push(childSlot.props);
@@ -365,18 +392,21 @@ class ComponentBase extends vueImport {
         for (const childSlot of slot) {
             let tag = childSlot.type.methods.getTag().replace("e-", "");
             if (childSlot.children) {
-                innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
+                innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[`${tagName}`], childSlot.type.methods.getTag());
+            }
+            if (childSlot.props) {
+                childSlot.props = this.getCamelCaseProps(childSlot.props);
             }
             if ((/[s]\b/).test(tag)) {
-                items[tag] = !items[tag] ? [] : items[tag];
+                items[`${tag}`] = !items[`${tag}`] ? [] : items[`${tag}`];
                 if (innerDirValues.length) {
-                    items[tag] = innerDirValues;
+                    items[`${tag}`] = innerDirValues;
                 }
                 else {
-                    items[tag].push(innerDirValues);
+                    items[`${tag}`].push(innerDirValues);
                 }
                 if (childSlot.props) {
-                    items[tag].push(childSlot.props);
+                    items[`${tag}`].push(childSlot.props);
                 }
             }
             else {
@@ -391,13 +421,16 @@ class ComponentBase extends vueImport {
         let dir = {};
         if (tagDirectives) {
             for (let tagDirective of tagDirectives) {
-                if (tagDirective.componentOptions && tagDirective.componentOptions.children && tagDirective.componentOptions.tag) {
-                    let dirTag = tagDirective.componentOptions.tag;
+                if (tagDirective.componentOptions && tagDirective.componentOptions.children && tagDirective.componentOptions.tag ||
+                    (tagDirective.tag === 'e-seriescollection' && tagDirective.children)) {
+                    let dirTag = tagDirective.componentOptions ? tagDirective.componentOptions.tag : tagDirective.tag;
+                    dirTag = (dirTag === 'e-seriescollection') ? 'e-seriesCollection' : dirTag;
                     if (keyTags.indexOf(dirTag) !== -1) {
-                        let tagName = tagNameMapper[dirTag] ? tagNameMapper[dirTag] : dirTag;
+                        let tagName = tagNameMapper[`${dirTag}`] ? tagNameMapper[`${dirTag}`] : dirTag;
                         dir[tagName.replace('e-', '')] = [];
-                        for (let tagDirChild of tagDirective.componentOptions.children) {
-                            let retObj = this.getVNodeValue(tagDirChild, tagMapper[dirTag], tagNameMapper);
+                        let children = tagDirective.componentOptions ? tagDirective.componentOptions.children : tagDirective.children;
+                        for (let tagDirChild of children) {
+                            let retObj = this.getVNodeValue(tagDirChild, tagMapper[`${dirTag}`], tagNameMapper);
                             if (Object.keys(retObj).length !== 0) {
                                 dir[tagName.replace('e-', '')].push(retObj);
                             }
@@ -411,13 +444,24 @@ class ComponentBase extends vueImport {
     getMultiLevelDirValue(tagDirectories, tagKey, tagNameMapper) {
         let mulObj = {};
         for (let tagDir of tagDirectories) {
+            let key;
+            let children;
             if (tagDir.componentOptions) {
-                let key = tagDir.componentOptions.tag;
-                let tagName = tagNameMapper[key] ? tagNameMapper[key] : key;
+                key = tagDir.componentOptions.tag;
+                if (tagDir.componentOptions.children) {
+                    children = tagDir.componentOptions.children;
+                }
+            }
+            else if ((tagDir.tag === 'e-markersettings' || tagDir.tag === 'e-markersetting') && tagDir.children) {
+                key = (tagDir.tag === 'e-markersettings') ? 'e-markerSettings' : 'e-markerSetting';
+                children = tagDir.children;
+            }
+            if (key) {
+                let tagName = tagNameMapper[`${key}`] ? tagNameMapper[`${key}`] : key;
                 mulObj[tagName.replace('e-', '')] = [];
-                if (tagDir.componentOptions && tagDir.componentOptions.children) {
-                    for (let tagDirChild of tagDir.componentOptions.children) {
-                        let mulLevObj = this.getVNodeValue(tagDirChild, tagKey[key], tagNameMapper);
+                if (children) {
+                    for (let tagDirChild of children) {
+                        let mulLevObj = this.getVNodeValue(tagDirChild, tagKey[`${key}`], tagNameMapper);
                         if (Object.keys(mulLevObj).length !== 0) {
                             mulObj[tagName.replace('e-', '')].push(mulLevObj);
                         }
@@ -429,14 +473,23 @@ class ComponentBase extends vueImport {
     }
     getVNodeValue(tagDirective, tagKey, tagNameMapper) {
         let ret = {};
-        if (tagDirective.componentOptions) {
-            let dirTag = tagDirective.componentOptions.tag;
+        if (tagDirective.componentOptions || ((tagDirective.tag === 'e-markersettings' || tagDirective.tag === 'e-markersetting') && tagDirective.context)) {
+            let dirTag;
+            if (tagDirective.componentOptions) {
+                dirTag = tagDirective.componentOptions.tag;
+            }
+            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);
             }
             else if (typeof tagKey === 'object') {
                 if (tagDirective.componentOptions.children && (Object.keys(tagKey).indexOf(dirTag) !== -1)) {
-                    ret = this.getMultiLevelDirValue(tagDirective.componentOptions.children, tagKey[dirTag], tagNameMapper);
+                    ret = this.getMultiLevelDirValue(tagDirective.componentOptions.children, tagKey[`${dirTag}`], tagNameMapper);
+                }
+                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));
@@ -451,7 +504,7 @@ class ComponentBase extends vueImport {
     getCamelCaseProps(props) {
         let retProps = {};
         for (let prop of Object.keys(props)) {
-            retProps[prop.replace(/-[a-z]/g, (e) => { return e[1].toUpperCase(); })] = props[prop];
+            retProps[prop.replace(/-[a-z]/g, (e) => { return e[1].toUpperCase(); })] = props[`${prop}`];
         }
         return retProps;
     }
@@ -485,9 +538,9 @@ let $internalHooks = [
 function getProps(options = {}) {
     if (options.props) {
         for (let prop of options.props) {
-            (options.newprops || (options.newprops = {}))[prop] = {};
-            (options.watch || (options.watch = {}))[prop] = function (newVal) {
-                this.ej2Instances[prop] = newVal;
+            (options.newprops || (options.newprops = {}))[`${prop}`] = {};
+            (options.watch || (options.watch = {}))[`${prop}`] = function (newVal) {
+                this.ej2Instances[`${prop}`] = newVal;
                 if (this.dataBind && (options.name !== 'DateRangePickerComponent')) {
                     this.dataBind();
                 }
@@ -510,9 +563,9 @@ function EJcomponentFactory(Component, options = {}) {
     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) {
-                this.ej2Instances[prop] = newVal;
+            (options.props || (options.props = {}))[`${prop}`] = {};
+            (options.watch || (options.watch = {}))[`${prop}`] = function (newVal) {
+                this.ej2Instances[`${prop}`] = newVal;
                 if (this.dataBind && (options.name !== 'DateRangePickerComponent')) {
                     this.dataBind();
                 }
@@ -525,17 +578,17 @@ function EJcomponentFactory(Component, options = {}) {
             return;
         }
         if ($internalHooks.indexOf(key) > -1) {
-            options[key] = proto[key];
+            options[`${key}`] = proto[`${key}`];
             return;
         }
         const descriptor = Object.getOwnPropertyDescriptor(proto, key);
         if (typeof descriptor.value === 'function') {
             // methods
-            (options.methods || (options.methods = {}))[key] = descriptor.value;
+            (options.methods || (options.methods = {}))[`${key}`] = descriptor.value;
         }
         else if (descriptor.get || descriptor.set) {
             // computed properties
-            (options.computed || (options.computed = {}))[key] = {
+            (options.computed || (options.computed = {}))[`${key}`] = {
                 get: descriptor.get,
                 set: descriptor.set
             };
@@ -543,7 +596,7 @@ function EJcomponentFactory(Component, options = {}) {
     });
     Object.getOwnPropertyNames(ComponentBase.prototype).forEach(function (key) {
         if ($internalHooks.indexOf(key) > -1) {
-            options[key] = proto[key];
+            options[`${key}`] = proto[`${key}`];
             return;
         }
     });
@@ -580,8 +633,8 @@ function collectDataFromConstructor(vm, Component) {
         keys.forEach(function (key) {
             if (key.charAt(0) !== '_') {
                 Object.defineProperty(_this, key, {
-                    get: function () { return vm[key]; },
-                    set: function (value) { return vm[key] = value; }
+                    get: function () { return vm[`${key}`]; },
+                    set: function (value) { return vm[`${key}`] = value; }
                 });
             }
         });
@@ -589,8 +642,8 @@ function collectDataFromConstructor(vm, Component) {
     var data = new Component();
     var plainData = {};
     Object.keys(data).forEach(function (key) {
-        if (data[key] !== undefined) {
-            plainData[key] = data[key];
+        if (data[`${key}`] !== undefined) {
+            plainData[`${key}`] = data[`${key}`];
         }
     });
     return plainData;
@@ -617,12 +670,12 @@ function compile(templateElement, helper) {
                     // Compilation for Vue 3 slot template
                     let app = allVue.createApp({
                         render() {
-                            return vueSlot[templateElement]({ data: data });
+                            return vueSlot[`${templateElement}`]({ data: data });
                         }
                     });
                     if (plugins) {
                         for (let i = 0; i < plugins.length; i++) {
-                            app.use(plugins[i]);
+                            app.use(plugins[parseInt(i.toString(), 10)]);
                         }
                     }
                     app.mount((context.getModuleName() === 'grid') ? ("#" + pid) : ("#" + id));
@@ -655,7 +708,7 @@ function compile(templateElement, helper) {
                     templateCompRef = object.template._context.components[templateElement.name];
                     if (!templateCompRef) {
                         let key = Object.keys(object.template._context.components)[0];
-                        templateCompRef = object.template._context.components[key];
+                        templateCompRef = object.template._context.components[`${key}`];
                     }
                 }
                 let tempRef;
@@ -667,7 +720,7 @@ function compile(templateElement, helper) {
                     if (templateCompRef.components) {
                         let objkeys = Object.keys(templateCompRef.components) || [];
                         for (let objstring of objkeys) {
-                            let intComponent = templateCompRef.components[objstring];
+                            let intComponent = templateCompRef.components[`${objstring}`];
                             if (intComponent && intComponent.data) {
                                 let tempRef2 = Object.assign(intComponent.data(), dataObj.data);
                                 intComponent.data = function () { return tempRef2; };
@@ -679,7 +732,7 @@ function compile(templateElement, helper) {
                 let app = allVue.createApp(templateCompRef);
                 if (plugins) {
                     for (let i = 0; i < plugins.length; i++) {
-                        app.use(plugins[i]);
+                        app.use(plugins[parseInt(i.toString(), 10)]);
                     }
                 }
                 app.mount((context.getModuleName() === 'grid') ? ("#" + pid) : ("#" + id));
@@ -692,7 +745,7 @@ function compile(templateElement, helper) {
                     // Compilation for Vue 2 slot template
                     let vueTemplate = new Vue$1__default({
                         render() {
-                            return vueSlot[templateElement]({ data: data });
+                            return vueSlot[`${templateElement}`]({ data: data });
                         }
                     });
                     vueTemplate.$mount("#" + id);
@@ -733,10 +786,10 @@ function compile(templateElement, helper) {
                         templateInstance = context.vueInstance.templateCollection;
                     }
                     if (propName) {
-                        if (!templateInstance[propName]) {
-                            templateInstance[propName] = [];
+                        if (!templateInstance[`${propName}`]) {
+                            templateInstance[`${propName}`] = [];
                         }
-                        templateInstance[propName].push(returnEle[0]);
+                        templateInstance[`${propName}`].push(returnEle[0]);
                     }
                 }
                 detach(ele);
@@ -762,24 +815,24 @@ function getVueChildSlot(vueInstance, templateElement) {
     let scopedSlots = vueInstance.$scopedSlots;
     let vSlots = vueInstance.scopedSlots;
     let children = vueInstance.children;
-    if (scopedSlots && scopedSlots[templateElement]) {
+    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 = getVueChildSlot(getSlot(childSlots[i]), templateElement);
+            let slot = getVueChildSlot(getSlot(childSlots[parseInt(i.toString(), 10)]), templateElement);
             if (slot) {
                 return slot;
             }
         }
     }
-    else if (vSlots && vSlots[templateElement]) {
+    else if (vSlots && vSlots[`${templateElement}`]) {
         return vSlots;
     }
     else if (children) {
         for (let i = 0; i < children.length; i++) {
-            let slot = getVueChildSlot(getSlot(children[i]), templateElement);
+            let slot = getVueChildSlot(getSlot(children[parseInt(i.toString(), 10)]), templateElement);
             if (slot) {
                 return slot;
             }
@@ -788,7 +841,8 @@ function getVueChildSlot(vueInstance, templateElement) {
     return undefined;
 }
 function getSlot(vnode) {
-    let slot = (vnode.componentOptions && vnode.componentOptions.children) ? vnode.componentOptions : vnode.data;
+    let 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.
@@ -800,13 +854,13 @@ function getCurrentVueSlot(vueInstance, templateElement, root) {
     return getChildVueSlot(slots, templateElement);
 }
 function getChildVueSlot(slots, templateElement) {
-    if (slots && 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 = getChildVueSlot(childSlots[i].children, templateElement);
+            let slot = getChildVueSlot(childSlots[parseInt(i.toString(), 10)].children, templateElement);
             if (slot) {
                 return slot;
             }