@syncfusion/ej2-vue-base 29.1.33 → 30.1.37

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

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-vue-base.umd.min.js
-*  version : 29.1.33
+*  version : 30.1.37
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

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

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-vue-base.min.js
-*  version : 29.1.33
+*  version : 30.1.37
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.1.33
+*  version : 30.1.37
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/ts/component-base.d.ts

@@ -0,0 +1,30 @@
+export declare const isExecute: boolean;
+export declare const aVue: any;
+export declare const gh: any;
+export declare const vueDefineComponent: Function;
+declare type ComponentBaseType = {
+    getInjectedServices(): Object[];
+    updated(): void;
+    bindProperties(): void;
+    assignValueToWrapper(option: Object, silent?: boolean): void;
+    fetchChildPropValues(childOption: Object): void;
+    getDirectiveValues(tagDirectives: any, tagMapper: {
+        [key: string]: Object;
+    }, tagNameMapper: Object): Object;
+    getMultiLevelDirValue(tagDirectories: any, tagKey: string | Object, tagNameMapper: Object): Object;
+    getVNodeValue(tagDirective: any, tagKey: string | Object, tagNameMapper: Object): Object;
+    /**
+     * convert kebab case directive props to camel case
+     */
+    getCamelCaseProps(props: Object): Object;
+    dataBind(): void;
+};
+export declare const ComponentBase: ComponentBaseType;
+/**
+ * Collect public property values for the Vue component.
+ *
+ * @param {any} options - represents props object.
+ * @returns {any} array of props object and `watchobject` respectively.
+ */
+export declare function getProps(options?: any): any;
+export {};

package/dist/ts/component-base.ts

@@ -0,0 +1,568 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Vue Component Base
+ */
+import * as Vue from 'vue';
+import { isNullOrUndefined, extend, getValue, setProxyToRaw } from '@syncfusion/ej2-base';
+
+/**
+ * Clone the Vue compiler instance.
+ *
+ * @param {any} obj - representes the Vue compiler.
+ * @returns {any} cloned object of Vue compiler.
+ */
+function _interopRequireWildcard(obj: any): any { if (obj && obj.__esModule) { return obj; } else { const newObj: any = {}; if (obj != null) { for (const key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[`${key}`] = obj[`${key}`]; } } } newObj.default = obj; return newObj; } }
+
+const curVue: any = _interopRequireWildcard(Vue);
+export const isExecute: boolean = (parseInt(curVue['version'], 10) > 2) ? false : true;
+export const aVue: any = !isExecute ? curVue : (curVue['default']['default'] ? curVue['default']['default'] : curVue['default']);
+export const gh: any = curVue['h'];
+
+export const vueDefineComponent: Function = (options: Object): any => { return !isExecute ? aVue['defineComponent'](options) : aVue['extend'](options); };
+
+type ComponentBaseType = {
+    getInjectedServices(): Object[];
+    updated(): void;
+    bindProperties(): void;
+    assignValueToWrapper(option: Object, silent?: boolean): void;
+    fetchChildPropValues(childOption: Object): void;
+    getDirectiveValues(tagDirectives: any, tagMapper: {
+        [key: string]: Object;
+    }, tagNameMapper: Object): Object;
+    getMultiLevelDirValue(tagDirectories: any, tagKey: string | Object, tagNameMapper: Object): Object;
+    getVNodeValue(tagDirective: any, tagKey: string | Object, tagNameMapper: Object): Object;
+    /**
+     * convert kebab case directive props to camel case
+     */
+    getCamelCaseProps(props: Object): Object;
+    dataBind(): void;
+}
+
+export const ComponentBase: ComponentBaseType = vueDefineComponent({
+    name: 'ComponentBase',
+    data(): Object {
+        return {
+            tagMapper: {} as any,
+            tagNameMapper: {} as any,
+            hasInjectedModules: false as boolean,
+            hasChildDirective: false as boolean,
+            childDirObjects: '' as string,
+            propKeys: {} as any,
+            isDecorator: false as boolean
+        };
+    },
+    created(): void {
+        if (this.ej2Instance) {
+            this.ej2Instances = this.isVue3 ? aVue.toRaw(this.ej2Instance) : this.ej2Instance;
+        }
+        if (!this.propKeys) {
+            return;
+        }
+        for (const prop of this.propKeys) {
+            this.ej2Instances.addEventListener(prop, (args: object) => {
+                this.$emit(prop, args);
+            });
+        }
+        const injectables: any = getValue('$root.$options.provide', this);
+        let vueInjectables: any = getValue('$parent.$options.provide', this);
+        vueInjectables = !isNullOrUndefined(vueInjectables) ? vueInjectables : getValue('$.parent.provides', this);
+        if (this.hasInjectedModules && !isExecute) {
+            let prevModule: Object[] = [];
+            if (injectables && injectables.managed) {
+                this.isDecorator = true;
+                prevModule = this.getInjectedServices() || [];
+            } else if (injectables) {
+                prevModule = injectables[this.ej2Instances.getModuleName()] || [];
+            } else if (vueInjectables) {
+                prevModule = this.getInjectedServices() || [];
+            }
+            const curModule: Object[] = this.ej2Instances.getInjectedModules() || [];
+            for (const mod of curModule) {
+                if (prevModule.indexOf(mod) === -1) {
+                    prevModule.push(mod);
+                }
+            }
+            this.ej2Instances.injectedModules = prevModule;
+        }
+    },
+    mounted(): void {
+        const cusEle: any = this.$el ? this.$el.querySelectorAll('div.e-directive') : null;
+        if (!isExecute && cusEle) {
+            for (let i: number = 0; i < cusEle.length; i++) {
+                const cusElement: HTMLElement = cusEle[parseInt(i.toString(), 10)];
+                if (cusElement.parentElement) { cusElement.parentElement.removeChild(cusElement); }
+            }
+        }
+        this.ej2Instances.isVue = true;
+        this.ej2Instances.isVue3 = this.isVue3;
+        this.ej2Instances.vueInstance = this;
+        if (this.isVue3) {
+            this.ej2Instances.ej2Instances = this.ej2Instances;
+            this.ej2Instances.referModels = this.models;
+            this.setModelValue();
+        }
+        this.ej2Instances.appendTo(this.$el);
+    },
+    updated(): void {
+        this.updated();
+    },
+    beforeDestroy(): void {
+        this.destroyComponent();
+    },
+    beforeUnmount(): void {
+        this.destroyComponent();
+    },
+    methods: {
+        setModelValue(): void {
+            if (!isNullOrUndefined(this.modelValue) || !isNullOrUndefined(this.$attrs.modelValue)) {
+                const key: string[] = this.models.toString().match(/checked|value/) || [];
+                const propKey: string = key[0];
+                if (!isNullOrUndefined(propKey)) {
+                    this.ej2Instances[`${propKey}`] = !isNullOrUndefined(this.modelValue) ? this.modelValue : this.$attrs.modelValue;
+                }
+            }
+        },
+        updated(): void {
+            if (this.isVue3) {
+                this.setModelValue();
+            }
+            if (this.hasChildDirective) {
+                const childKey: Object = {};
+                this.fetchChildPropValues(childKey);
+                const curChildDir: string = JSON.stringify(childKey);
+                if (this.childDirObjects !== curChildDir) {
+                    this.childDirObjects = curChildDir;
+                    this.assignValueToWrapper(childKey, false);
+                }
+            }
+        },
+        getInjectedServices(): Object[] {
+            let ret: Object[] = []; let provide: any;
+            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) {
+                provide = getValue('$parent.$options.provide', this);
+            }
+            if (isNullOrUndefined(provide) && !isNullOrUndefined(this.$)) {
+                provide = getValue('$.parent.provides', this);
+            }
+            if (provide) {
+                let injectables: any = provide;
+                if (typeof provide === 'function') {
+                    if (provide.managed) {
+                        const pKey: Object = provide.managed;
+                        const pValue: string[] = Object.keys(pKey);
+                        let key: string[];
+                        if (this.$root && this.isDecorator) {
+                            key = Object.keys(this.$root);
+                        } else if (this.$vnode) {
+                            key = Object.keys(this.$vnode.context);
+                        } else if (this.$parent) {
+                            key = Object.keys(this.$parent);
+                        }
+                        for (let i: number = 0; i < pValue.length; i++) {
+                            for (let j: number = 0; j < key.length; j++) {
+                                if ((key[parseInt(j.toString(), 10)].indexOf(pValue[parseInt(i.toString(), 10)])) !== -1) {
+                                    if (this.$root && this.isDecorator) {
+                                        pKey[pValue[parseInt(j.toString(), 10)]] = this.$root[key[parseInt(i.toString(), 10)]];
+                                    } else if (this.$vnode) {
+                                        pKey[pValue[parseInt(i.toString(), 10)]] = this.$vnode.context[key[parseInt(j.toString(), 10)]];
+                                    } else if (this.$parent) {
+                                        pKey[pValue[parseInt(i.toString(), 10)]] = this.$parent[key[parseInt(j.toString(), 10)]];
+                                    }
+                                    injectables = pKey;
+                                }
+                            }
+                        }
+                    }
+                    else if (this.$vnode) {
+                        injectables = this.$vnode.context.$options.provide();
+                    } else if (this.$parent) {
+                        injectables = this.$parent.$options.provide();
+                    }
+                }
+                ret = injectables[this.ej2Instances.getModuleName()] || [];
+            }
+            this.isDecorator = false;
+            return ret;
+        },
+        destroyComponent(): void {
+            this.ej2Instances.destroy();
+            (this.$el as any).style.visibility = 'hidden';
+            this.clearTemplate();
+        },
+        destroyPortals(element?: any): void {
+            if (element) {
+                const destroy: any = getValue('__vue__.$destroy', element);
+                if (destroy) {
+                    element.__vue__.$destroy();
+                } else if (!isExecute && element._vnode) {
+                    try { aVue.render(null, element); }
+                    catch (e) { /* Handle error */ }
+                }
+                if (element.innerHTML) {
+                    element.innerHTML = '';
+                }
+            }
+        },
+        bindProperties(): void {
+            const options: Object = {};
+            for (const prop of this.propKeys) {
+                if (!isNullOrUndefined(this[`${prop}`])) {
+                    options[`${prop}`] = this[`${prop}`];
+                }
+                else if (this[0] && !isNullOrUndefined(this[0][0]) && !isNullOrUndefined(this[0][0][`${prop}`])) {
+                    options[`${prop}`] = this[0][0][`${prop}`];
+                }
+            }
+            if (this.hasChildDirective) {
+                this.fetchChildPropValues(options);
+            }
+            if (this.hasInjectedModules) {
+
+                const prevModule: Object[] = this.getInjectedServices() || [];
+                const curModule: Object[] = this.ej2Instances.getInjectedModules() || [];
+                for (const mod of curModule) {
+                    if (prevModule.indexOf(mod) === -1) {
+                        prevModule.push(mod);
+                    }
+                }
+                this.ej2Instances.injectedModules = prevModule;
+            }
+            this.assignValueToWrapper(options);
+        },
+        assignValueToWrapper(option: Object, silent?: boolean): void {
+            this.ej2Instances.setProperties(extend({}, {}, option, true), isNullOrUndefined(silent as any) ? true : silent);
+        },
+        fetchChildPropValues(childOption: Object): void {
+            let dirProps: Object = {};
+            if (!this.isVue3) {
+                dirProps = this.getDirectiveValues(this.$slots.default, this.tagMapper || {}, this.tagNameMapper || {});
+            } else {
+                let propRef: any;
+                if (this[0] && this[0][1].slots.default) {
+                    propRef = this[0][1].slots.default();
+                }
+                else if (this && this.$ && this.$.slots && this.$.slots.default) {
+                    propRef = this.$.slots.default();
+                }
+                if (propRef) {
+                    for (let i: number = 0; i < propRef.length; i++) {
+                        if (propRef[parseInt(i.toString(), 10)].type.methods || propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection') {
+                            const key: string = propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection' ? 'series-collection' :
+                                propRef[parseInt(i.toString(), 10)].type.methods.getTag().replace('e-', '');
+                            const ref: any = this.resolveArrayDirectives(propRef[parseInt(i.toString(), 10)].children, key);
+                            const spKeys: any = key.split('-');
+                            const controlName: string = this.ej2Instances.getModuleName().toLowerCase();
+                            let keyRef: string = (spKeys.length > 1 && controlName.indexOf(spKeys[0]) > -1) ? spKeys[1] : spKeys[0];
+                            keyRef = keyRef.replace(controlName, '');
+                            keyRef = this.tagNameMapper['e-' + key] ? this.tagNameMapper['e-' + key].replace('e-', '') : keyRef;
+                            if (controlName === 'splitter' && keyRef === 'panes') {
+                                keyRef = 'paneSettings';
+                            } else if (controlName === 'bulletchart' && keyRef === 'range') {
+                                keyRef = 'ranges';
+                            } else if (controlName === 'schedule' && keyRef === 'header') {
+                                keyRef = 'headerRows';
+                            }
+                            dirProps[`${keyRef}`] = ref[`${key}`];
+                        }
+                    }
+                } else {
+                    return;
+                }
+            }
+            if (!this.childDirObjects) {
+                this.childDirObjects = JSON.stringify(dirProps);
+            }
+            for (const dirProp of Object.keys(dirProps)) {
+                childOption[`${dirProp}`] = dirProps[`${dirProp}`];
+            }
+        },
+        resolveArrayDirectives(slots: any, tagName: any): any {
+            let slot: any = [];
+            let innerDirValues: any;
+            slot = slots.default ? slots.default() : slots;
+            slot = slot.flatMap((item: any) => Array.isArray(item.children) ? item.children : item);
+            const items: any = {};
+            items[`${tagName}`] = [];
+            for (const childSlot of slot) {
+                let tempObj: any = {};
+                const tagRef: any = childSlot.type.methods ? childSlot.type.methods.getTag() : tagName;
+                if (childSlot.children) {
+                    let key: string;
+                    innerDirValues = this.resolveComplexDirs(childSlot.children, this.tagMapper['e-' + tagName], tagRef);
+                    if (innerDirValues.length) {
+                        tempObj = innerDirValues;
+                    } else {
+                        for (let i: number = 0; i < Object.keys(innerDirValues).length; i++) {
+                            key = Object.keys(innerDirValues)[parseInt(i.toString(), 10)];
+                            tempObj[`${key}`] = innerDirValues[`${key}`];
+                        }
+                    }
+                }
+                if (childSlot.props) {
+                    Object.keys(childSlot.props).forEach((key: string) => {
+                        const propName: string = key.replace(/-[a-z]/g, (e: any) => { return e[1].toUpperCase(); });
+                        if (propName) {
+                            tempObj[`${propName}`] = childSlot.props[`${key}`];
+                        }
+                    });
+                }
+                if (((/[s]\b/).test(tagRef) && innerDirValues) && (!(/[s]\b/).test(tagName) || innerDirValues.length)) {
+                    if (Array.isArray(tempObj)) { tempObj.forEach((item: any) => { items[`${tagName}`].push(item); }); } else { items[`${tagName}`].push(tempObj); }
+                }
+                else if (tempObj && Object.keys(tempObj).length !== 0) {
+                    items[`${tagName}`].push(tempObj);
+                }
+            }
+            return items;
+        },
+        resolveComplexDirs(slots: any, tagObject: any, tagName: string): any {
+            let slot: any = [];
+            let innerDirValues: any;
+            slot = slots.default ? slots.default() : slots;
+            let items: any = {};
+            for (const childSlot of slot) {
+                let tagRef: any;
+                let tag: any;
+                if (tagObject[`${tagName}`]) {
+                    tagRef = Object.keys(tagObject[`${tagName}`]);
+                    tag = tagRef.find(
+                        (key: any) =>
+                            tagObject[`${tagName}`][`${key}`] ===
+                        childSlot.type.methods.getTag().replace(/[s]\b/, '')
+                    );
+                    tag = tag ? tag : childSlot.type.methods.getTag();
+                    tag = (this.tagNameMapper[`${tag}`] ? this.tagNameMapper[`${tag}`] : tag).replace('e-', '');
+                    if (this.ej2Instances.getModuleName().toLowerCase() === 'diagram' && tag.indexOf('annotations') !== -1) {
+                        tag = 'annotations';
+                    }
+                }
+                if (childSlot.children) {
+                    innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[`${tagName}`], childSlot.type.methods.getTag());
+                    if (!items[`${tag}`]) {
+                        items[`${tag}`] = [];
+                    }
+                    if (innerDirValues.length > 1) {
+                        items[`${tag}`] = innerDirValues;
+                    } else {
+                        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) { items.push(childSlot.props); }
+                }
+                else {
+                    items = childSlot.props ? (<any>Object).assign(items, childSlot.props) : items;
+                }
+            }
+            return items;
+        },
+        resolveComplexInnerDirs(slots: any, tagObject: any, tagName: string): any {
+            let slot: any = [];
+            slot = slots.default ? slots.default() : slots;
+            let items: any = slot.length > 1 ? [] : {};
+            for (const childSlot of slot) {
+                let innerDirValues: any = null;
+                let tag: string = childSlot.type.methods.getTag();
+                tag = (this.tagNameMapper[`${tag}`] ? this.tagNameMapper[`${tag}`] : tag).replace('e-', '');
+                if (childSlot.children) {
+                    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}`];
+                            if (innerDirValues.length) {
+                                items[`${tag}`] = innerDirValues;
+                            } else { items[`${tag}`].push(innerDirValues); }
+                        } else if (innerDirValues && !childSlot.props) {
+                            items.push(innerDirValues);
+                        }
+                    } else {
+                        items = innerDirValues ? innerDirValues : items;
+                    }
+                }
+                if (childSlot.props) {
+                    childSlot.props = this.getCamelCaseProps(childSlot.props);
+                }
+                if (slot.length > 1 && childSlot.props) {
+                    if (innerDirValues) {
+                        innerDirValues = childSlot.props ? (<any>Object).assign(innerDirValues, childSlot.props) : innerDirValues;
+                        items.push(innerDirValues);
+                    }
+                    else if (items.length >= 0) {
+                        items.push(childSlot.props);
+                    } else {
+                        items = childSlot.props ? (<any>Object).assign(items, childSlot.props) : items;
+                    }
+                } else {
+                    items = childSlot.props ? (<any>Object).assign(items, childSlot.props) : items;
+                }
+            }
+            return items;
+        },
+        resolveMultilevelComplexInnerDirs(slots: any, tagObject: any, tagName: string): any {
+            let slot: any = [];
+            slot = slots.default ? slots.default() : slots;
+            let items: any = slot.length > 1 ? [] : {};
+            for (const childSlot of slot) {
+                let innerDirValues: any = null;
+                let tag: string = childSlot.type.methods.getTag();
+                tag = (this.tagNameMapper[`${tag}`] ? this.tagNameMapper[`${tag}`] : tag).replace('e-', '');
+                if (childSlot.children) {
+                    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}`];
+                    if (innerDirValues.length) {
+                        items[`${tag}`] = innerDirValues;
+                    } else { items[`${tag}`].push(innerDirValues); }
+                    if (childSlot.props) { items[`${tag}`].push(childSlot.props); }
+                } else {
+                    items = innerDirValues;
+                    items = childSlot.props ? (<any>Object).assign(items, childSlot.props) : items;
+                }
+            }
+            return items;
+        },
+        getDirectiveValues(tagDirectives: any, tagMapper: { [key: string]: Object }, tagNameMapper: Object): Object {
+            const keyTags: string[] = Object.keys(tagMapper);
+            const dir: Object = {};
+            if (tagDirectives) {
+                for (const tagDirective of tagDirectives) {
+                    const tagCompOption: any = tagDirective.componentOptions;
+                    if (tagCompOption && tagCompOption.children && this.getTagName(tagCompOption) ||
+                    (tagDirective.tag === 'e-seriescollection' && tagDirective.children)) {
+                        let dirTag: string = tagCompOption ? this.getTagName(tagCompOption) : tagDirective.tag;
+                        dirTag = (dirTag === 'e-seriescollection') ? 'e-seriesCollection' : dirTag;
+                        if (keyTags.indexOf(dirTag) !== -1) {
+                            const tagName: string = tagNameMapper[`${dirTag}`] ? tagNameMapper[`${dirTag}`] : dirTag;
+                            dir[tagName.replace('e-', '')] = [];
+                            const children: any = tagCompOption ? tagCompOption.children : tagDirective.children;
+                            for (const tagDirChild of children) {
+                                const retObj: Object = this.getVNodeValue(tagDirChild, tagMapper[`${dirTag}`], tagNameMapper);
+                                if (Object.keys(retObj).length !== 0) {
+                                    dir[tagName.replace('e-', '')].push(retObj);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            return dir;
+        },
+        getMultiLevelDirValue(tagDirectories: any, tagKey: string | Object, tagNameMapper: Object): Object {
+            const mulObj: Object = {};
+            for (const tagDir of tagDirectories) {
+                let key: string;
+                let children: any;
+                if (tagDir.componentOptions) {
+                    key = this.getTagName(tagDir.componentOptions);
+                    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) {
+                    const tagName: string = tagNameMapper[`${key}`] ? tagNameMapper[`${key}`] : key;
+                    mulObj[tagName.replace('e-', '')] = [];
+                    if (children) {
+                        for (const tagDirChild of children) {
+                            const mulLevObj: Object = this.getVNodeValue(tagDirChild, tagKey[`${key}`], tagNameMapper);
+                            if (Object.keys(mulLevObj).length !== 0) {
+                                mulObj[tagName.replace('e-', '')].push(mulLevObj);
+                            }
+                        }
+                    }
+                }
+            }
+            return mulObj;
+        },
+        getVNodeValue(tagDirective: any, tagKey: string | Object, tagNameMapper: Object): Object {
+            let ret: Object = {};
+            if (tagDirective.componentOptions || ((tagDirective.tag === 'e-markersettings' || tagDirective.tag === 'e-markersetting') && tagDirective.context)) {
+                let dirTag: string;
+                if (tagDirective.componentOptions) {
+                    dirTag = this.getTagName(tagDirective.componentOptions);
+                } else {
+                    dirTag = (tagDirective.tag === 'e-markersettings') ? 'e-markerSettings' : 'e-markerSetting';
+                }
+                const tagData: any = tagDirective.data;
+                if (typeof tagKey === 'string' && dirTag === tagKey && tagData) {
+                    ret = tagData.attrs ? this.getCamelCaseProps(tagData.attrs) : this.getCamelCaseProps(tagData);
+                } else if (typeof tagKey === 'object') {
+                    if (tagDirective.componentOptions.children && (Object.keys(tagKey).indexOf(dirTag) !== -1)) {
+                        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 (tagData && tagData.attrs) {
+                        ret = extend(ret, this.getCamelCaseProps(tagData.attrs));
+                    }
+                }
+            }
+            return ret;
+        },
+        /**
+         * convert kebab case directive props to camel case.
+         *
+         * @param {Object} props - Objects in kebab case directive props.
+         * @returns {Object} Object converted into camel case directive props.
+         */
+        getCamelCaseProps(props: Object): Object {
+            const retProps: Object = {};
+            for (const prop of Object.keys(props)) {
+                retProps[prop.replace(/-[a-z]/g, (e: any) => { return e[1].toUpperCase(); })] = props[`${prop}`];
+            }
+            return retProps;
+        },
+        dataBind(): void {
+            this.ej2Instances.dataBind();
+        },
+        setProperties(arg: Object, muteOnChange?: boolean): void {
+            return this.ej2Instances.setProperties(arg, muteOnChange);
+        },
+        getTagName(options: any): string | undefined {
+            let tag: any = options.tag;
+            const optCtor: any = options.Ctor;
+            if (!tag && optCtor && optCtor.extendOptions && optCtor.extendOptions.methods && optCtor.extendOptions.methods.getTag) {
+                tag = options.Ctor.extendOptions.methods.getTag();
+            }
+            return tag;
+        }
+    }
+});
+
+/**
+ * Collect public property values for the Vue component.
+ *
+ * @param {any} options - represents props object.
+ * @returns {any} array of props object and `watchobject` respectively.
+ */
+export function getProps(options: any = {}): any {
+    if (options.props) {
+        for (const prop of options.props) {
+            (options.newprops || (options.newprops = {}))[`${prop}`] = {};
+            (options.watch || (options.watch = {}))[`${prop}`] = function (newVal: Object): void { // watch it
+                this.ej2Instances[`${prop}`] = newVal;
+                if (this.dataBind && (options.name !== 'DateRangePickerComponent')) {
+                    this.dataBind();
+                }
+            };
+        }
+    }
+    return [options.newprops, options.watch];
+}
+
+if (!isExecute) { setProxyToRaw(aVue.toRaw); }
+

package/dist/ts/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * index for component base
+ */
+export * from './component-base';
+export * from './template';
+export * from './vue-types';

package/dist/ts/index.ts

@@ -0,0 +1,6 @@
+/**
+ * index for component base
+ */
+export * from './component-base';
+export * from './template';
+export * from './vue-types';

package/dist/ts/template.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Compiler function that convert the template property to DOM element.
+ *
+ * @param {any} templateElement - represents value of the template property from the component.
+ * @param {Object} helper - represents helper object to utilize on template compilation.
+ * @returns {NodeList} template element that append to the component.
+ */
+export declare function compile(templateElement: any, helper?: Object): (data: Object | JSON, component?: any, propName?: any, element?: any, root?: any) => Object;

package/dist/ts/template.ts

@@ -0,0 +1,361 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types */
+import { setTemplateEngine, getTemplateEngine, getUniqueID, createElement, detach, extend, getValue } from '@syncfusion/ej2-base';
+import { aVue as Vue, isExecute } from './component-base';
+
+const stringCompiler: (template: string, helper?: object) => (data: Object | JSON) => string = getTemplateEngine();
+
+/**
+ * Compiler function that convert the template property to DOM element.
+ *
+ * @param {any} templateElement - represents value of the template property from the component.
+ * @param {Object} helper - represents helper object to utilize on template compilation.
+ * @returns {NodeList} template element that append to the component.
+ */
+export function compile(
+    templateElement: any,
+    helper?: Object
+): (data: Object | JSON, component?: any, propName?: any, element?: any, root?: any) => Object {
+    return (data: any, context: any, propName: any, element: any, root: any): any => {
+        let returnEle: any;
+        if (context) {
+            let plugins: any = context.vueInstance && context.vueInstance.plugins ? { plugins: context.vueInstance.plugins } : {};
+            const vueInstance: any = context.vueInstance ? context.vueInstance :
+                ((root && root.vueInstance) ? root.vueInstance : null);
+            const pid: string = getUniqueID('templateParentDiv');
+            const id: string = getUniqueID('templateDiv');
+            const ele: HTMLElement = createElement('div', {
+                id: pid,
+                innerHTML: '<div id="' + id + '"></div>'
+            });
+            document.body.appendChild(ele);
+            if (!isExecute && (typeof templateElement === 'string' || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function'))) {
+                const vueSlot: any = getCurrentVueSlot(context.vueInstance, templateElement, root);
+                if (vueSlot) {
+                    // Compilation for Vue 3 slot template
+                    const app: any = Vue.createVNode({
+                        render(): any {
+                            return vueSlot[`${templateElement}`]({ data: data });
+                        }
+                    }, plugins);
+                    ele.innerHTML = '';
+                    // Get values for Vue 3 slot template
+                    getValues(app, context.vueInstance, root);
+                    Vue.render(app, ele);
+                    returnEle = ele.childNodes;
+                    if (vueInstance) {
+                        let templateInstance: any = vueInstance.templateCollection;
+                        if (!templateInstance) {
+                            vueInstance.templateCollection = {};
+                            templateInstance = vueInstance.templateCollection;
+                        }
+                        if (propName) {
+                            if (!templateInstance[`${propName}`]) {
+                                templateInstance[`${propName}`] = [];
+                            }
+                            templateInstance[`${propName}`].push(ele);
+                        }
+                    }
+                    detach(ele);
+                } else {
+                    // Compilation for Vue 3 string template
+                    detach(ele);
+                    return stringCompiler(templateElement, helper)(data);
+                }
+            } else if (!isExecute) {
+                // Compilation for Vue 3 functional template
+                const tempObj: any = templateElement.call(this, {});
+                const object: any = tempObj;
+                const propsData: any = getValue('template.propsData', tempObj);
+                const dataObj: any = {
+                    data: { data: extend(tempObj.data || {}, data) },
+                    parent: context.vueInstance
+                };
+                if (!object.template) {
+                    object.template = object[Object.keys(object)[0]];
+                }
+                let templateCompRef: any;
+                if (object.template.extends) {
+                    templateCompRef = object.template.extends._context.components.template;
+                } else {
+                    templateCompRef = object.template._context.components[templateElement.name];
+                    if (!templateCompRef) {
+                        const key: any = Object.keys(object.template._context.components)[0];
+                        templateCompRef = object.template._context.components[`${key}`];
+                    }
+                }
+                let tempRef: any;
+                if (propsData) {
+                    if (templateCompRef.setup) {
+                        tempRef = (<any>Object).assign({}, propsData);
+                    } else {
+                        tempRef = (<any>Object).assign(templateCompRef.data(), propsData);
+                    }
+                }
+                else {
+                    if (templateCompRef.setup) {
+                        tempRef = (<any>Object).assign({}, dataObj.data);
+                    } else {
+                        tempRef = (<any>Object).assign(templateCompRef.data(), dataObj.data);
+                    }
+                    if (templateCompRef.components) {
+                        const objkeys: any = Object.keys(templateCompRef.components) || [];
+                        for (const objstring of objkeys) {
+                            const intComponent: any = templateCompRef.components[`${objstring}`];
+                            if (intComponent && intComponent.data) {
+                                if (!intComponent.__data) { intComponent.__data = intComponent.data; }
+                                intComponent.data = function (proxy: any): Object {
+                                    return (Object as any).assign(intComponent.__data.call(proxy), dataObj.data);
+                                };
+                            }
+                        }
+                    }
+                }
+                if (templateCompRef.setup) {
+                    plugins = (<any>Object).assign(plugins, data);
+                }
+                templateCompRef.data = function (): any { return tempRef; };
+                const app: any = Vue.createVNode(templateCompRef, plugins);
+                ele.innerHTML = '';
+                // Get values for Vue 3 functional template
+                getValues(app, context.vueInstance, root);
+                Vue.render(app, ele);
+                returnEle = ele.childNodes;
+                dataObj.parent = null;
+                if (vueInstance) {
+                    let templateInstance: any = vueInstance.templateCollection;
+                    if (!templateInstance) {
+                        vueInstance.templateCollection = {};
+                        templateInstance = vueInstance.templateCollection;
+                    }
+                    if (propName) {
+                        if (!templateInstance[`${propName}`]) {
+                            templateInstance[`${propName}`] = [];
+                        }
+                        templateInstance[`${propName}`].push(ele);
+                    }
+                }
+                detach(ele);
+            } else if (typeof templateElement === 'string' || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function')) {
+                const vueSlot: any = getVueSlot(context.vueInstance, templateElement, root);
+                if (vueSlot) {
+                    // Get provide values for Vue 2 slot template
+                    let provided: any = {};
+                    const getProvideValues: any = (vueinstance: any) => {
+                        if (vueinstance['$parent']) { getProvideValues(vueinstance.$parent); }
+                        if (vueinstance['_provided'] && Object.keys(vueinstance['_provided']).length > 0) {
+                            provided = { ...provided, ...vueinstance._provided };
+                        }
+                    };
+                    const vueInstance: any = context.vueInstance ? context.vueInstance :
+                        ((root && root.vueInstance) ? root.vueInstance : null);
+                    if (vueInstance) {
+                        getProvideValues(vueInstance);
+                    }
+                    // Compilation for Vue 2 slot template
+                    const vueTemplate: any = new Vue({
+                        provide: { ...provided },
+                        render(): any {
+                            return vueSlot[`${templateElement}`]({ data: data });
+                        }
+                    });
+                    vueTemplate.$mount('#' + id);
+                    returnEle = ele.childNodes;
+                    if (vueInstance) {
+                        let templateInstance: any = vueInstance.templateCollection;
+                        if (!templateInstance) {
+                            vueInstance.templateCollection = {};
+                            templateInstance = vueInstance.templateCollection;
+                        }
+                        if (propName) {
+                            if (!templateInstance[`${propName}`]) {
+                                templateInstance[`${propName}`] = [];
+                            }
+                            templateInstance[`${propName}`].push(returnEle[0]);
+                        }
+                    }
+                    detach(ele);
+                } else {
+                    // Compilation for Vue 2 string template
+                    detach(ele);
+                    return stringCompiler(templateElement, helper)(data);
+                }
+            } else {
+                // Compilation for Vue 2 functional template
+                const tempObj: any = templateElement.call(this, {});
+                let templateFunction: any = tempObj.template;
+                const propsData: any = getValue('template.propsData', tempObj);
+                const dataObj: any = {
+                    data: { data: extend(tempObj.data || {}, data) },
+                    parent: context.vueInstance
+                };
+                if (propsData) {
+                    templateFunction = tempObj.template.extends;
+                    dataObj.propsData = propsData;
+                }
+                if (typeof templateFunction !== 'function') {
+                    templateFunction = Vue.extend(templateFunction);
+                }
+                if (templateFunction.options.setup) {
+                    dataObj.propsData = (<any>Object).assign(dataObj.propsData || {}, data);
+                }
+                const templateVue: any = new templateFunction(dataObj);
+                // let templateVue = new Vue(tempObj.template);
+                // templateVue.$data.data = extend(tempObj.data, data);
+                templateVue.$mount('#' + id);
+                returnEle = ele.childNodes;
+                dataObj.parent = null;
+                if (vueInstance) {
+                    let templateInstance: any = vueInstance.templateCollection;
+                    if (!templateInstance) {
+                        vueInstance.templateCollection = {};
+                        templateInstance = vueInstance.templateCollection;
+                    }
+                    if (propName) {
+                        if (!templateInstance[`${propName}`]) {
+                            templateInstance[`${propName}`] = [];
+                        }
+                        templateInstance[`${propName}`].push(returnEle[0]);
+                    }
+                }
+                detach(ele);
+            }
+        }
+        return returnEle || [];
+    };
+}
+
+setTemplateEngine({ compile: compile as any });
+
+/**
+ * Collect values from the app instance.
+ *
+ * @param {any} app - represents global application instance
+ * @param {any} cInstance - represents Vue component instance
+ * @param {any} root - represents parent component instance
+ * @returns {void}
+ */
+function getValues(app: any, cInstance: any, root: any): void {
+    const vueInstance: any = cInstance ? cInstance : ((root && root.vueInstance) ? root.vueInstance : null);
+    if (!vueInstance) {
+        return;
+    }
+    // Get globally defined variables.
+    app['appContext'] = vueInstance['$']['appContext'];
+    // Get provide value from child component.
+    let provided: any = {};
+    const getProvideValue: any = (vueinstance: any) => {
+        if (vueinstance['$'] && vueinstance['$']['parent']) { getProvideValue(vueinstance.$.parent); }
+        if (vueinstance['provides'] && Object.keys(vueinstance['provides']).length > 0) {
+            provided = { ...provided, ...vueinstance.provides };
+        }
+    };
+    getProvideValue(vueInstance);
+    if (app['appContext']['provides']) {
+        app.appContext.provides = { ...app.appContext.provides, ...provided };
+    }
+}
+
+/**
+ * Get the Vue2 slot template from the root or current Vue component.
+ *
+ * @param {any} vueInstance - represents parent Vue instance.
+ * @param {any} templateElement - represents component property value
+ * @param {any} root - represents root Vue instance
+ * @returns {any} template Vue instance
+ */
+function getVueSlot(vueInstance: any, templateElement: any, root: any): any {
+    if (!vueInstance && !(root && root.vueInstance)) {
+        return undefined;
+    }
+    const instance: any = (root && root.vueInstance) ? root.vueInstance : vueInstance;
+    return getVueChildSlot(instance, templateElement);
+}
+
+/**
+ * Get the Vue2 nested slot template from the root or current Vue component.
+ *
+ * @param {any} vueInstance - represents parent Vue instance.
+ * @param {any} templateElement - represents component property value
+ * @returns {any} nested template Vue instance
+ */
+function getVueChildSlot(vueInstance: any, templateElement: any): any {
+    if (!vueInstance) {
+        return undefined;
+    }
+    const slots: any = vueInstance.$slots;
+    const scopedSlots: any = vueInstance.$scopedSlots;
+    const vSlots: any = vueInstance.scopedSlots;
+    const children: any = vueInstance.children;
+    if (scopedSlots && scopedSlots[`${templateElement}`]) {
+        return scopedSlots;
+    } else if (slots && slots.default) {
+        const childSlots: any = slots.default;
+        for (let i: number = 0; i < childSlots.length; i++) {
+            const slot: any = getVueChildSlot(getSlot(childSlots[parseInt(i.toString(), 10)]), templateElement);
+            if (slot) {
+                return slot;
+            }
+        }
+    } else if (vSlots && vSlots[`${templateElement}`]) {
+        return vSlots;
+    } else if (children) {
+        for (let i: number = 0; i < children.length; i++) {
+            const slot: any = getVueChildSlot(getSlot(children[parseInt(i.toString(), 10)]), templateElement);
+            if (slot) {
+                return slot;
+            }
+        }
+    }
+    return undefined;
+}
+
+/**
+ * Collect the component slot directive instance.
+ *
+ * @param {any} vnode - represents Vue components slot instance.
+ * @returns {any} the slot instance of the directive.
+ */
+function getSlot(vnode: any): any {
+    const slot: any = (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.
+ *
+ * @param {any} vueInstance - represents parent Vue instance.
+ * @param {any} templateElement - represents component property value
+ * @param {any} root - represents root Vue instance
+ * @returns {any} slot template instance
+ */
+function getCurrentVueSlot(vueInstance: any, templateElement: any, root: any): any {
+    if (!vueInstance && !(root && root.vueInstance)) {
+        return undefined;
+    }
+    const slots: any = (root && root.vueInstance) ? root.vueInstance.$slots : vueInstance.$slots;
+    return getChildVueSlot(slots, templateElement);
+}
+
+/**
+ * Get the Vue3 nested slot template from the root or current Vue component.
+ *
+ * @param {any} slots - represents slot instance.
+ * @param {any} templateElement - represents component property value
+ * @returns {any} nested template Vue instance
+ */
+function getChildVueSlot(slots: any, templateElement: any): any {
+    if (slots && slots[`${templateElement}`]) {
+        return slots;
+    } else if (slots && slots.default) {
+        let childSlots: any = slots.default();
+        childSlots = childSlots.flatMap((item: any) => Array.isArray(item.children) ? item.children : item);
+        for (let i: number = 0; i < childSlots.length; i++) {
+            const slot: any = getChildVueSlot(childSlots[parseInt(i.toString(), 10)].children, templateElement);
+            if (slot) {
+                return slot;
+            }
+        }
+    }
+    return undefined;
+}

package/dist/ts/vue-types.d.ts

@@ -0,0 +1,15 @@
+// @ts-ignore
+import Vue, { VueConstructor } from 'vue';
+// @ts-ignore
+import { DefineComponent } from 'vue';
+
+interface CommonProps {
+    isLazyUpdate?: Boolean,
+    plugins?: any[]
+}
+
+// @ts-ignore
+export type DefineVueComponent<Props> = typeof Vue.compile extends (template: string) => Function ? DefineComponent<Props & CommonProps, any, {}, {}, {}, {}, {}, {}, string, Props & CommonProps, Props & CommonProps, {}> : VueConstructor<Vue<{}, Props & CommonProps>>;
+
+//@ts-ignore
+export type DefineVueDirective<Props> = typeof Vue.compile extends (template: string) => Function ? DefineComponent<Props, any, {}, {}, {}, {}, {}, {}, string, Props, Props, {}> : VueConstructor<Vue<{}, Props>>;

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-base@*",
-  "_id": "@syncfusion/ej2-vue-base@19.3.53",
+  "_id": "@syncfusion/ej2-vue-base@19.4.0",
   "_inBundle": false,
-  "_integrity": "sha512-6DSS1xSFZjbDCDDUeeuJGQU6UKqMF2tG9Yma3GigYbbeLtzbrYEye7HVi219D8pdX1Rx0hwbNY5EHZCae5NByQ==",
+  "_integrity": "sha512-53+ZNczobBgtMW6+L/kmf+TNgwscH7j23U3zxNl8QHcUEUFuK7TgJXPxCTY6/6tpibO0d3+11xH1hpxTTZgJWA==",
   "_location": "/@syncfusion/ej2-vue-base",
   "_phantomChildren": {},
   "_requested": {
@@ -55,10 +55,10 @@
     "/@syncfusion/ej2-vue-treegrid",
     "/@syncfusion/ej2-vue-treemap"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-vue-base/-/ej2-vue-base-19.3.53.tgz",
-  "_shasum": "e2dd43098b2efc2e5175e82345e45ec6775ecd4a",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-development/@syncfusion/ej2-vue-base/-/ej2-vue-base-19.4.0.tgz",
+  "_shasum": "68bbaf7d6c214f1d9677d9ba882e16e3795806eb",
   "_spec": "@syncfusion/ej2-vue-base@*",
-  "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
+  "_where": "D:\\SF3992\\WFH\\Nexus\\ej2-nexus-branch-switching-dev\\release",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -67,7 +67,7 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~29.1.33"
+    "@syncfusion/ej2-base": "~30.1.37"
   },
   "deprecated": false,
   "description": "A common package of Essential JS 2 base Vue libraries, methods and class definitions",
@@ -100,6 +100,6 @@
     "test": "gulp ci-test"
   },
   "typings": "index.d.ts",
-  "version": "29.1.33",
+  "version": "30.1.37",
   "sideEffects": true
 }