@syncfusion/ej2-vue-base 20.3.59 → 20.4.40

package/CHANGELOG.md

@@ -2,19 +2,18 @@
 
 ## [Unreleased]
 
-### Common
-
-#### Bug Fixes
+## 20.4.38 (2022-12-21)
 
-- `#I415706` - The issue with "Schedule component module injection is not working in the Vue 3 script setup" has been resolved.
+### Common
 
-## 20.3.49 (2022-10-11)
+#### New Features
 
-### Common
+- `#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)
 
@@ -210,4 +209,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,6 +1,6 @@
 /*!
 *  filename: ej2-vue-base.umd.min.js
-*  version : 20.3.59
+*  version : 20.4.40
 *  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,21 +9,12 @@
 */
 /*!
 *  filename: ej2-vue-base.umd.min.js
-*  version : 20.3.56
+*  version : 20.2.45
 *  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.49
-*  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. 
-*/
-!function (e, t) { "object" == typeof exports && "undefined" != typeof module ? t(exports, require("vue"), require("@syncfusion/ej2-base")) : "function" == typeof define && define.amd ? define(["exports", "vue", "@syncfusion/ej2-base"], t) : t(e.ej = {}, e.Vue, e.ej2Base) }(this, function (e, t, n) { "use strict"; function o(e, n) { void 0 === n && (n = {}), n.name = n.name || e._componentTag || e.name; var o = e.prototype; if (n.props) for (var r = function (e) { (n.props || (n.props = {}))[e] = {}, (n.watch || (n.watch = {}))[e] = function (t) { this.ej2Instances[e] = t, this.dataBind && "DateRangePickerComponent" !== n.name && this.dataBind() } }, i = 0, p = n.props; i < p.length; i++) { r(p[i]) } Object.getOwnPropertyNames(o).forEach(function (e) { if ("constructor" !== e) if (a.indexOf(e) > -1) n[e] = o[e]; else { var t = Object.getOwnPropertyDescriptor(o, e); "function" == typeof t.value ? (n.methods || (n.methods = {}))[e] = t.value : (t.get || t.set) && ((n.computed || (n.computed = {}))[e] = { get: t.get, set: t.set }) } }), Object.getOwnPropertyNames(s.prototype).forEach(function (e) { a.indexOf(e) > -1 && (n[e] = o[e]) }), (n.mixins || (n.mixins = [])).push({ data: function () { return function (e, t) { t.prototype._init = function () { var t = this, n = Object.getOwnPropertyNames(e); if (e.$options.props) for (var o in e.$options.props) e.hasOwnProperty(o) || n.push(o); n.forEach(function (n) { "_" !== n.charAt(0) && Object.defineProperty(t, n, { get: function () { return e[n] }, set: function (t) { return e[n] = t } }) }) }; var n = new t, o = {}; return Object.keys(n).forEach(function (e) { void 0 !== n[e] && (o[e] = n[e]) }), o }(this, e) } }); var c = e.__decorators__; c && (c.forEach(Function(n)), delete e.__decorators__); var u = Object.getPrototypeOf(e.prototype); return (u instanceof t ? u.constructor : t).extend(n) } function r(e, o) { var r = this; return "string" == typeof e ? p(e, o) : function (o, i) { var s = n.getUniqueID("templateParentDiv"), a = n.getUniqueID("templateDiv"), p = n.createElement("div", { id: s, innerHTML: '<div id="' + a + '"></div>' }); document.body.appendChild(p); var c, u = e.call(r, {}); if (i) { var d = u.template, f = n.getValue("template.propsData", u), h = { data: { data: n.extend(u.data || {}, o) }, parent: i.vueInstance }; f && (d = u.template.extends, h.propsData = f), "function" != typeof d && (d = t.extend(d)); new d(h).$mount("#" + a), c = p.childNodes, n.detach(p) } return c || [] } } t = t && t.hasOwnProperty("default") ? t.default : t; var i = function () { var e = function (t, n) { return (e = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function (e, t) { e.__proto__ = t } || function (e, t) { for (var n in t) t.hasOwnProperty(n) && (e[n] = t[n]) })(t, n) }; return function (t, n) { function o() { this.constructor = t } e(t, n), t.prototype = null === n ? Object.create(n) : (o.prototype = n.prototype, new o) } }(), s = function (e) { function t() { var t = null !== e && e.apply(this, arguments) || this; return t.hasInjectedModules = !1, t.hasChildDirective = !1, t.childDirObjects = "", t } return i(t, e), t.prototype.created = function () { for (var e = this, t = function (t) { n.ej2Instances.addEventListener(t, function (n) { e.$emit(t, n) }) }, n = this, o = 0, r = this.propKeys; o < r.length; o++) { t(r[o]) } }, t.prototype.mounted = function () { this.ej2Instances.isVue = !0, this.ej2Instances.vueInstance = this, this.ej2Instances.appendTo(this.$el) }, t.prototype.getInjectedServices = function () { var e = [], t = n.getValue("$vnode.context.$options.provide", this); if (t) { var o = t; "function" == typeof t && (o = this.$vnode.context.$options.provide()), e = o[this.ej2Instances.getModuleName()] || [] } return e }, t.prototype.updated = function () { if (this.hasChildDirective) { var e = {}; this.fetchChildPropValues(e); var t = JSON.stringify(e); this.childDirObjects !== t && (this.childDirObjects = t, this.assignValueToWrapper(e, !1)) } }, t.prototype.beforeDestroy = function () { var e = this; e.ej2Instances.destroy(), e.$el.style.visibility = "hidden", e = null }, t.prototype.bindProperties = function () { for (var e = {}, t = 0, o = this.propKeys; t < o.length; t++) { var r = o[t]; n.isNullOrUndefined(this[r]) || (e[r] = this[r]) } if (this.hasChildDirective && this.fetchChildPropValues(e), this.hasInjectedModules) { for (var i = this.getInjectedServices() || [], s = 0, a = this.ej2Instances.getInjectedModules() || []; s < a.length; s++) { var p = a[s]; -1 === i.indexOf(p) && i.push(p) } this.ej2Instances.injectedModules = i } this.assignValueToWrapper(e) }, t.prototype.assignValueToWrapper = function (e, t) { this.ej2Instances.setProperties(n.extend({}, {}, e, !0), !!n.isNullOrUndefined(t) || t) }, t.prototype.fetchChildPropValues = function (e) { var t = this.getDirectiveValues(this.$slots.default, this.tagMapper || {}, this.tagNameMapper || {}); this.childDirObjects || (this.childDirObjects = JSON.stringify(t)); for (var n = 0, o = Object.keys(t); n < o.length; n++) { var r = o[n]; e[r] = t[r] } }, t.prototype.getDirectiveValues = function (e, t, n) { var o = Object.keys(t), r = {}; if (e) for (var i = 0, s = e; i < s.length; i++) { var a = s[i]; if (a.componentOptions && a.componentOptions.children && a.componentOptions.tag) { var p = a.componentOptions.tag; if (-1 !== o.indexOf(p)) { var c = n[p] ? n[p] : p; r[c.replace("e-", "")] = []; for (var u = 0, d = a.componentOptions.children; u < d.length; u++) { var f = d[u], h = this.getVNodeValue(f, t[p], n); 0 !== Object.keys(h).length && r[c.replace("e-", "")].push(h) } } } } return r }, t.prototype.getMultiLevelDirValue = function (e, t, n) { for (var o = {}, r = 0, i = e; r < i.length; r++) { var s = i[r]; if (s.componentOptions) { var a = s.componentOptions.tag, p = n[a] ? n[a] : a; if (o[p.replace("e-", "")] = [], s.componentOptions && s.componentOptions.children) for (var c = 0, u = s.componentOptions.children; c < u.length; c++) { var d = u[c], f = this.getVNodeValue(d, t[a], n); 0 !== Object.keys(f).length && o[p.replace("e-", "")].push(f) } } } return o }, t.prototype.getVNodeValue = function (e, t, o) { var r = {}; if (e.componentOptions) { var i = e.componentOptions.tag; "string" == typeof t && i === t && e.data ? r = e.data.attrs ? this.getCamelCaseProps(e.data.attrs) : this.getCamelCaseProps(e.data) : "object" == typeof t && (e.componentOptions.children && -1 !== Object.keys(t).indexOf(i) && (r = this.getMultiLevelDirValue(e.componentOptions.children, t[i], o)), e.data && e.data.attrs && (r = n.extend(r, this.getCamelCaseProps(e.data.attrs)))) } return r }, t.prototype.getCamelCaseProps = function (e) { for (var t = {}, n = 0, o = Object.keys(e); n < o.length; n++) { var r = o[n]; t[r.replace(/-[a-z]/g, function (e) { return e[1].toUpperCase() })] = e[r] } return t }, t.prototype.dataBind = function () { this.ej2Instances.dataBind() }, t.prototype.setProperties = function (e, t) { return this.ej2Instances.setProperties(e, t) }, t }(t), a = ["data", "beforeCreate", "created", "beforeMount", "mounted", "beforeDestroy", "destroyed", "beforeUpdate", "updated", "activated", "deactivated", "render", "errorCaptured"], p = n.getTemplateEngine(); n.setTemplateEngine({ compile: r }), e.ComponentBase = s, e.$internalHooks = a, e.EJComponentDecorator = function (e) { return function (t) { return o(t, e) } }, e.EJcomponentFactory = o, e.compile = r, Object.defineProperty(e, "__esModule", { value: !0 }) });
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@syncfusion/ej2-base")):"function"==typeof define&&define.amd?define(["exports","vue","@syncfusion/ej2-base"],t):t(e.ej={},e.Vue,e.ej2Base)}(this,function(e,t,n){"use strict";function o(e,n){void 0===n&&(n={}),n.name=n.name||e._componentTag||e.name;var o=e.prototype;if(n.props)for(var r=function(e){(n.props||(n.props={}))[e]={},(n.watch||(n.watch={}))[e]=function(t){this.ej2Instances[e]=t,this.dataBind&&"DateRangePickerComponent"!==n.name&&this.dataBind()}},i=0,p=n.props;i<p.length;i++){r(p[i])}Object.getOwnPropertyNames(o).forEach(function(e){if("constructor"!==e)if(a.indexOf(e)>-1)n[e]=o[e];else{var t=Object.getOwnPropertyDescriptor(o,e);"function"==typeof t.value?(n.methods||(n.methods={}))[e]=t.value:(t.get||t.set)&&((n.computed||(n.computed={}))[e]={get:t.get,set:t.set})}}),Object.getOwnPropertyNames(s.prototype).forEach(function(e){a.indexOf(e)>-1&&(n[e]=o[e])}),(n.mixins||(n.mixins=[])).push({data:function(){return function(e,t){t.prototype._init=function(){var t=this,n=Object.getOwnPropertyNames(e);if(e.$options.props)for(var o in e.$options.props)e.hasOwnProperty(o)||n.push(o);n.forEach(function(n){"_"!==n.charAt(0)&&Object.defineProperty(t,n,{get:function(){return e[n]},set:function(t){return e[n]=t}})})};var n=new t,o={};return Object.keys(n).forEach(function(e){void 0!==n[e]&&(o[e]=n[e])}),o}(this,e)}});var c=e.__decorators__;c&&(c.forEach(Function(n)),delete e.__decorators__);var u=Object.getPrototypeOf(e.prototype);return(u instanceof t?u.constructor:t).extend(n)}function r(e,o){var r=this;return"string"==typeof e?p(e,o):function(o,i){var s=n.getUniqueID("templateParentDiv"),a=n.getUniqueID("templateDiv"),p=n.createElement("div",{id:s,innerHTML:'<div id="'+a+'"></div>'});document.body.appendChild(p);var c,u=e.call(r,{});if(i){var d=u.template,f=n.getValue("template.propsData",u),h={data:{data:n.extend(u.data||{},o)},parent:i.vueInstance};f&&(d=u.template.extends,h.propsData=f),"function"!=typeof d&&(d=t.extend(d));new d(h).$mount("#"+a),c=p.childNodes,n.detach(p)}return c||[]}}t=t&&t.hasOwnProperty("default")?t.default:t;var i=function(){var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(t,n)};return function(t,n){function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}(),s=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.hasInjectedModules=!1,t.hasChildDirective=!1,t.childDirObjects="",t}return i(t,e),t.prototype.created=function(){for(var e=this,t=function(t){n.ej2Instances.addEventListener(t,function(n){e.$emit(t,n)})},n=this,o=0,r=this.propKeys;o<r.length;o++){t(r[o])}},t.prototype.mounted=function(){this.ej2Instances.isVue=!0,this.ej2Instances.vueInstance=this,this.ej2Instances.appendTo(this.$el)},t.prototype.getInjectedServices=function(){var e=[],t=n.getValue("$vnode.context.$options.provide",this);if(t){var o=t;"function"==typeof t&&(o=this.$vnode.context.$options.provide()),e=o[this.ej2Instances.getModuleName()]||[]}return e},t.prototype.updated=function(){if(this.hasChildDirective){var e={};this.fetchChildPropValues(e);var t=JSON.stringify(e);this.childDirObjects!==t&&(this.childDirObjects=t,this.assignValueToWrapper(e,!1))}},t.prototype.beforeDestroy=function(){var e=this;e.ej2Instances.destroy(),e.$el.style.visibility="hidden",e=null},t.prototype.bindProperties=function(){for(var e={},t=0,o=this.propKeys;t<o.length;t++){var r=o[t];n.isNullOrUndefined(this[r])||(e[r]=this[r])}if(this.hasChildDirective&&this.fetchChildPropValues(e),this.hasInjectedModules){for(var i=this.getInjectedServices()||[],s=0,a=this.ej2Instances.getInjectedModules()||[];s<a.length;s++){var p=a[s];-1===i.indexOf(p)&&i.push(p)}this.ej2Instances.injectedModules=i}this.assignValueToWrapper(e)},t.prototype.assignValueToWrapper=function(e,t){this.ej2Instances.setProperties(n.extend({},{},e,!0),!!n.isNullOrUndefined(t)||t)},t.prototype.fetchChildPropValues=function(e){var t=this.getDirectiveValues(this.$slots.default,this.tagMapper||{},this.tagNameMapper||{});this.childDirObjects||(this.childDirObjects=JSON.stringify(t));for(var n=0,o=Object.keys(t);n<o.length;n++){var r=o[n];e[r]=t[r]}},t.prototype.getDirectiveValues=function(e,t,n){var o=Object.keys(t),r={};if(e)for(var i=0,s=e;i<s.length;i++){var a=s[i];if(a.componentOptions&&a.componentOptions.children&&a.componentOptions.tag){var p=a.componentOptions.tag;if(-1!==o.indexOf(p)){var c=n[p]?n[p]:p;r[c.replace("e-","")]=[];for(var u=0,d=a.componentOptions.children;u<d.length;u++){var f=d[u],h=this.getVNodeValue(f,t[p],n);0!==Object.keys(h).length&&r[c.replace("e-","")].push(h)}}}}return r},t.prototype.getMultiLevelDirValue=function(e,t,n){for(var o={},r=0,i=e;r<i.length;r++){var s=i[r];if(s.componentOptions){var a=s.componentOptions.tag,p=n[a]?n[a]:a;if(o[p.replace("e-","")]=[],s.componentOptions&&s.componentOptions.children)for(var c=0,u=s.componentOptions.children;c<u.length;c++){var d=u[c],f=this.getVNodeValue(d,t[a],n);0!==Object.keys(f).length&&o[p.replace("e-","")].push(f)}}}return o},t.prototype.getVNodeValue=function(e,t,o){var r={};if(e.componentOptions){var i=e.componentOptions.tag;"string"==typeof t&&i===t&&e.data?r=e.data.attrs?this.getCamelCaseProps(e.data.attrs):this.getCamelCaseProps(e.data):"object"==typeof t&&(e.componentOptions.children&&-1!==Object.keys(t).indexOf(i)&&(r=this.getMultiLevelDirValue(e.componentOptions.children,t[i],o)),e.data&&e.data.attrs&&(r=n.extend(r,this.getCamelCaseProps(e.data.attrs))))}return r},t.prototype.getCamelCaseProps=function(e){for(var t={},n=0,o=Object.keys(e);n<o.length;n++){var r=o[n];t[r.replace(/-[a-z]/g,function(e){return e[1].toUpperCase()})]=e[r]}return t},t.prototype.dataBind=function(){this.ej2Instances.dataBind()},t.prototype.setProperties=function(e,t){return this.ej2Instances.setProperties(e,t)},t}(t),a=["data","beforeCreate","created","beforeMount","mounted","beforeDestroy","destroyed","beforeUpdate","updated","activated","deactivated","render","errorCaptured"],p=n.getTemplateEngine();n.setTemplateEngine({compile:r}),e.ComponentBase=s,e.$internalHooks=a,e.EJComponentDecorator=function(e){return function(t){return o(t,e)}},e.EJcomponentFactory=o,e.compile=r,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ej2-vue-base.umd.min.js.map

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;
@@ -78,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;
@@ -87,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;
@@ -124,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;
                             }
@@ -153,6 +163,9 @@ class ComponentBase extends vueImport {
         return ret;
     }
     updated() {
+        if (this.isVue3) {
+            this.setModelValue();
+        }
         if (this.hasChildDirective) {
             let childKey = {};
             this.fetchChildPropValues(childKey);
@@ -172,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) {
@@ -209,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];
@@ -225,7 +239,7 @@ class ComponentBase extends vueImport {
                         else if (controlName == "schedule" && keyRef == "header") {
                             keyRef = "headerRows";
                         }
-                        dirProps[keyRef] = ref[key];
+                        dirProps[`${keyRef}`] = ref[`${key}`];
                     }
                 }
             }
@@ -237,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) {
@@ -245,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;
@@ -257,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;
@@ -285,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-", "")
@@ -297,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) {
@@ -328,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) {
@@ -347,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);
@@ -369,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 {
@@ -395,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);
                             }
@@ -415,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);
                         }
@@ -433,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));
@@ -455,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;
     }
@@ -489,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();
                 }
@@ -514,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();
                 }
@@ -529,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
             };
@@ -547,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;
         }
     });
@@ -584,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; }
                 });
             }
         });
@@ -593,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;
@@ -621,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));
@@ -659,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;
@@ -671,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; };
@@ -683,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));
@@ -696,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);
@@ -737,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);
@@ -766,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;
             }
@@ -792,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.
@@ -804,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;
             }