@syncfusion/ej2-vue-base 20.3.59 → 20.4.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -8
- package/dist/ej2-vue-base.umd.min.js +2 -2
- package/dist/es6/ej2-vue-base.es2015.js +130 -80
- package/dist/es6/ej2-vue-base.es2015.js.map +1 -1
- package/dist/es6/ej2-vue-base.es5.js +132 -82
- package/dist/es6/ej2-vue-base.es5.js.map +1 -1
- package/dist/global/ej2-vue-base.min.js +2 -2
- package/dist/global/ej2-vue-base.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +26 -6
- package/postinstall.js +22 -5
- package/src/component-base.d.ts +1 -0
- package/src/component-base.js +101 -52
- package/src/component-decorator.js +14 -14
- package/src/template.js +17 -16
package/CHANGELOG.md
CHANGED
|
@@ -4,17 +4,14 @@
|
|
|
4
4
|
|
|
5
5
|
### Common
|
|
6
6
|
|
|
7
|
-
####
|
|
8
|
-
|
|
9
|
-
- `#I415706` - The issue with "Schedule component module injection is not working in the Vue 3 script setup" has been resolved.
|
|
10
|
-
|
|
11
|
-
## 20.3.49 (2022-10-11)
|
|
7
|
+
#### New Features
|
|
12
8
|
|
|
13
|
-
|
|
9
|
+
- `#FB34897` - Provided Vue 3 direct script support for Syncfusion Vue components.
|
|
14
10
|
|
|
15
11
|
#### Bug Fixes
|
|
16
12
|
|
|
17
|
-
- `#
|
|
13
|
+
- `#I409205` - The issue with the "Signature plugin missing in the latest Vue 2 direct script" has been resolved.
|
|
14
|
+
- The issue with the "v-model support is not working for the textbox component in Vue 3" has been resolved.
|
|
18
15
|
|
|
19
16
|
## 20.3.47 (2022-09-29)
|
|
20
17
|
|
|
@@ -210,4 +207,3 @@ Base library provide options to enable following Vue functionalities in Essentia
|
|
|
210
207
|
#### Breaking Changes
|
|
211
208
|
|
|
212
209
|
- 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.
|
|
213
|
-
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: ej2-vue-base.umd.min.js
|
|
3
|
-
* version : 20.
|
|
3
|
+
* version : 20.4.38
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
|
|
5
5
|
* Use of this code is subject to the terms of our license.
|
|
6
6
|
* A copy of the current license can be obtained at any time by e-mailing
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
* licensing@syncfusion.com. Any infringement will be prosecuted under
|
|
26
26
|
* applicable laws.
|
|
27
27
|
*/
|
|
28
|
-
!function
|
|
28
|
+
!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})});
|
|
29
29
|
//# sourceMappingURL=ej2-vue-base.umd.min.js.map
|
|
@@ -16,7 +16,7 @@ function _interopRequireWildcard(obj) {
|
|
|
16
16
|
if (obj != null) {
|
|
17
17
|
for (let key in obj) {
|
|
18
18
|
if (Object.prototype.hasOwnProperty.call(obj, key))
|
|
19
|
-
newObj[key] = obj[key];
|
|
19
|
+
newObj[`${key}`] = obj[`${key}`];
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
newObj.default = obj;
|
|
@@ -78,7 +78,7 @@ class ComponentBase extends vueImport {
|
|
|
78
78
|
let cusEle = this.$el ? this.$el.querySelectorAll("div.e-directive") : null;
|
|
79
79
|
if (!isExecute && cusEle) {
|
|
80
80
|
for (let i = 0; i < cusEle.length; i++) {
|
|
81
|
-
cusEle[i].parentElement && cusEle[i].parentElement.removeChild(cusEle[i]);
|
|
81
|
+
cusEle[parseInt(i.toString(), 10)].parentElement && cusEle[parseInt(i.toString(), 10)].parentElement.removeChild(cusEle[parseInt(i.toString(), 10)]);
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
this.ej2Instances.isVue = true;
|
|
@@ -87,9 +87,19 @@ class ComponentBase extends vueImport {
|
|
|
87
87
|
if (this.isVue3) {
|
|
88
88
|
this.ej2Instances.ej2Instances = this.ej2Instances;
|
|
89
89
|
this.ej2Instances.referModels = this.models;
|
|
90
|
+
this.setModelValue();
|
|
90
91
|
}
|
|
91
92
|
this.ej2Instances.appendTo(this.$el);
|
|
92
93
|
}
|
|
94
|
+
setModelValue() {
|
|
95
|
+
if (!isNullOrUndefined(this.modelValue) || !isNullOrUndefined(this.$attrs.modelValue)) {
|
|
96
|
+
const key = this.models.toString().match(/checked|value/) || [];
|
|
97
|
+
const propKey = key[0];
|
|
98
|
+
if (!isNullOrUndefined(propKey)) {
|
|
99
|
+
this.ej2Instances[`${propKey}`] = !isNullOrUndefined(this.modelValue) ? this.modelValue : this.$attrs.modelValue;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
93
103
|
getInjectedServices() {
|
|
94
104
|
let ret = [];
|
|
95
105
|
let provide;
|
|
@@ -124,15 +134,15 @@ class ComponentBase extends vueImport {
|
|
|
124
134
|
}
|
|
125
135
|
for (let i = 0; i < provideValue.length; i++) {
|
|
126
136
|
for (let j = 0; j < key.length; j++) {
|
|
127
|
-
if ((key[j].indexOf(provideValue[i])) !== -1) {
|
|
137
|
+
if ((key[parseInt(j.toString(), 10)].indexOf(provideValue[parseInt(i.toString(), 10)])) !== -1) {
|
|
128
138
|
if (this.$root && this.isDecorator) {
|
|
129
|
-
provideKey[provideValue[j]] = this.$root[key[i]];
|
|
139
|
+
provideKey[provideValue[parseInt(j.toString(), 10)]] = this.$root[key[parseInt(i.toString(), 10)]];
|
|
130
140
|
}
|
|
131
141
|
else if (this.$vnode) {
|
|
132
|
-
provideKey[provideValue[i]] = this.$vnode.context[key[j]];
|
|
142
|
+
provideKey[provideValue[parseInt(i.toString(), 10)]] = this.$vnode.context[key[parseInt(j.toString(), 10)]];
|
|
133
143
|
}
|
|
134
144
|
else if (this.$parent) {
|
|
135
|
-
provideKey[provideValue[i]] = this.$parent[key[j]];
|
|
145
|
+
provideKey[provideValue[parseInt(i.toString(), 10)]] = this.$parent[key[parseInt(j.toString(), 10)]];
|
|
136
146
|
}
|
|
137
147
|
injectables = provideKey;
|
|
138
148
|
}
|
|
@@ -153,6 +163,9 @@ class ComponentBase extends vueImport {
|
|
|
153
163
|
return ret;
|
|
154
164
|
}
|
|
155
165
|
updated() {
|
|
166
|
+
if (this.isVue3) {
|
|
167
|
+
this.setModelValue();
|
|
168
|
+
}
|
|
156
169
|
if (this.hasChildDirective) {
|
|
157
170
|
let childKey = {};
|
|
158
171
|
this.fetchChildPropValues(childKey);
|
|
@@ -172,8 +185,8 @@ class ComponentBase extends vueImport {
|
|
|
172
185
|
bindProperties() {
|
|
173
186
|
let options = {};
|
|
174
187
|
for (let prop of this.propKeys) {
|
|
175
|
-
if ((!isNullOrUndefined(this[prop]) && !this.isVue3) || (this[0] && !isNullOrUndefined(this[0][0]) && !isNullOrUndefined(this[0][0][prop]))) {
|
|
176
|
-
options[prop] = !this.isVue3 ? this[prop] : this[0][0][prop];
|
|
188
|
+
if ((!isNullOrUndefined(this[`${prop}`]) && !this.isVue3) || (this[0] && !isNullOrUndefined(this[0][0]) && !isNullOrUndefined(this[0][0][`${prop}`]))) {
|
|
189
|
+
options[`${prop}`] = !this.isVue3 ? this[`${prop}`] : this[0][0][`${prop}`];
|
|
177
190
|
}
|
|
178
191
|
}
|
|
179
192
|
if (this.hasChildDirective) {
|
|
@@ -209,9 +222,10 @@ class ComponentBase extends vueImport {
|
|
|
209
222
|
}
|
|
210
223
|
if (propRef) {
|
|
211
224
|
for (let i = 0; i < propRef.length; i++) {
|
|
212
|
-
if (propRef[i].type.methods) {
|
|
213
|
-
let key = propRef[i
|
|
214
|
-
|
|
225
|
+
if (propRef[parseInt(i.toString(), 10)].type.methods || propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection') {
|
|
226
|
+
let key = propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection' ? 'series-collection' :
|
|
227
|
+
propRef[parseInt(i.toString(), 10)].type.methods.getTag().replace("e-", "");
|
|
228
|
+
let ref = this.resolveArrayDirectives(propRef[parseInt(i.toString(), 10)].children, key);
|
|
215
229
|
let splitKeys = key.split('-');
|
|
216
230
|
let controlName = this.ej2Instances.getModuleName().toLowerCase();
|
|
217
231
|
let keyRef = (splitKeys.length > 1 && controlName.indexOf(splitKeys[0]) > -1) ? splitKeys[1] : splitKeys[0];
|
|
@@ -225,7 +239,7 @@ class ComponentBase extends vueImport {
|
|
|
225
239
|
else if (controlName == "schedule" && keyRef == "header") {
|
|
226
240
|
keyRef = "headerRows";
|
|
227
241
|
}
|
|
228
|
-
dirProps[keyRef] = ref[key];
|
|
242
|
+
dirProps[`${keyRef}`] = ref[`${key}`];
|
|
229
243
|
}
|
|
230
244
|
}
|
|
231
245
|
}
|
|
@@ -237,7 +251,7 @@ class ComponentBase extends vueImport {
|
|
|
237
251
|
this.childDirObjects = JSON.stringify(dirProps);
|
|
238
252
|
}
|
|
239
253
|
for (let dirProp of Object.keys(dirProps)) {
|
|
240
|
-
childOption[dirProp] = dirProps[dirProp];
|
|
254
|
+
childOption[`${dirProp}`] = dirProps[`${dirProp}`];
|
|
241
255
|
}
|
|
242
256
|
}
|
|
243
257
|
resolveArrayDirectives(slots, tagName) {
|
|
@@ -245,7 +259,7 @@ class ComponentBase extends vueImport {
|
|
|
245
259
|
let innerDirValues;
|
|
246
260
|
slot = slots.default ? slots.default() : slots;
|
|
247
261
|
let items = {};
|
|
248
|
-
items[tagName] = [];
|
|
262
|
+
items[`${tagName}`] = [];
|
|
249
263
|
for (const childSlot of slot) {
|
|
250
264
|
let tempObj = {};
|
|
251
265
|
let tagRef = childSlot.type.methods ? childSlot.type.methods.getTag() : tagName;
|
|
@@ -257,22 +271,25 @@ class ComponentBase extends vueImport {
|
|
|
257
271
|
}
|
|
258
272
|
else {
|
|
259
273
|
for (var i = 0; i < Object.keys(innerDirValues).length; i++) {
|
|
260
|
-
key = Object.keys(innerDirValues)[i];
|
|
261
|
-
tempObj[key] = innerDirValues[key];
|
|
274
|
+
key = Object.keys(innerDirValues)[parseInt(i.toString(), 10)];
|
|
275
|
+
tempObj[`${key}`] = innerDirValues[`${key}`];
|
|
262
276
|
}
|
|
263
277
|
|
|
264
278
|
}
|
|
265
279
|
}
|
|
266
280
|
if (childSlot.props) {
|
|
267
281
|
Object.keys(childSlot.props).forEach((key) => {
|
|
268
|
-
|
|
282
|
+
let propName = key.replace(/-[a-z]/g, (e) => { return e[1].toUpperCase(); });
|
|
283
|
+
if (propName) {
|
|
284
|
+
tempObj[`${propName}`] = childSlot.props[`${key}`];
|
|
285
|
+
}
|
|
269
286
|
});
|
|
270
287
|
}
|
|
271
288
|
if (((/[s]\b/).test(tagRef) && innerDirValues) && (!(/[s]\b/).test(tagName) || innerDirValues.length)) {
|
|
272
|
-
items[tagName] = tempObj;
|
|
289
|
+
items[`${tagName}`] = tempObj;
|
|
273
290
|
}
|
|
274
291
|
else if (tempObj && Object.keys(tempObj).length !== 0) {
|
|
275
|
-
items[tagName].push(tempObj);
|
|
292
|
+
items[`${tagName}`].push(tempObj);
|
|
276
293
|
}
|
|
277
294
|
}
|
|
278
295
|
return items;
|
|
@@ -285,9 +302,9 @@ class ComponentBase extends vueImport {
|
|
|
285
302
|
for (const childSlot of slot) {
|
|
286
303
|
let tagRef;
|
|
287
304
|
let tag;
|
|
288
|
-
if (tagObject[tagName]) {
|
|
289
|
-
tagRef = Object.keys(tagObject[tagName]);
|
|
290
|
-
tag = tagRef.find((key) => tagObject[tagName][key] ===
|
|
305
|
+
if (tagObject[`${tagName}`]) {
|
|
306
|
+
tagRef = Object.keys(tagObject[`${tagName}`]);
|
|
307
|
+
tag = tagRef.find((key) => tagObject[`${tagName}`][`${key}`] ===
|
|
291
308
|
childSlot.type.methods.getTag().replace(/[s]\b/, ""));
|
|
292
309
|
tag = tag
|
|
293
310
|
? tag.replace("e-", "")
|
|
@@ -297,17 +314,20 @@ class ComponentBase extends vueImport {
|
|
|
297
314
|
}
|
|
298
315
|
}
|
|
299
316
|
if (childSlot.children) {
|
|
300
|
-
innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
|
|
301
|
-
if (!items[tag]) {
|
|
302
|
-
items[tag] = [];
|
|
317
|
+
innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[`${tagName}`], childSlot.type.methods.getTag());
|
|
318
|
+
if (!items[`${tag}`]) {
|
|
319
|
+
items[`${tag}`] = [];
|
|
303
320
|
}
|
|
304
321
|
if (innerDirValues.length > 1) {
|
|
305
|
-
items[tag] = innerDirValues;
|
|
322
|
+
items[`${tag}`] = innerDirValues;
|
|
306
323
|
}
|
|
307
324
|
else {
|
|
308
|
-
items[tag].push(innerDirValues);
|
|
325
|
+
items[`${tag}`].push(innerDirValues);
|
|
309
326
|
}
|
|
310
327
|
}
|
|
328
|
+
if (childSlot.props) {
|
|
329
|
+
childSlot.props = this.getCamelCaseProps(childSlot.props);
|
|
330
|
+
}
|
|
311
331
|
if (slot.length > 1) {
|
|
312
332
|
items = Object.keys(items).length == 0 && !items.length ? [] : items;
|
|
313
333
|
if (childSlot.props) {
|
|
@@ -328,15 +348,15 @@ class ComponentBase extends vueImport {
|
|
|
328
348
|
for (const childSlot of slot) {
|
|
329
349
|
let tag = childSlot.type.methods.getTag().replace("e-", "");
|
|
330
350
|
if (childSlot.children) {
|
|
331
|
-
innerDirValues = this.resolveMultilevelComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
|
|
351
|
+
innerDirValues = this.resolveMultilevelComplexInnerDirs(childSlot.children, tagObject[`${tagName}`], childSlot.type.methods.getTag());
|
|
332
352
|
if ((/[s]\b/).test(tag) || slot.length > 1) {
|
|
333
353
|
if ((/[s]\b/).test(tag)) {
|
|
334
|
-
items[tag] = !items[tag] ? [] : items[tag];
|
|
354
|
+
items[`${tag}`] = !items[`${tag}`] ? [] : items[`${tag}`];
|
|
335
355
|
if (innerDirValues.length) {
|
|
336
|
-
items[tag] = innerDirValues;
|
|
356
|
+
items[`${tag}`] = innerDirValues;
|
|
337
357
|
}
|
|
338
358
|
else {
|
|
339
|
-
items[tag].push(innerDirValues);
|
|
359
|
+
items[`${tag}`].push(innerDirValues);
|
|
340
360
|
}
|
|
341
361
|
}
|
|
342
362
|
else if (innerDirValues) {
|
|
@@ -347,6 +367,9 @@ class ComponentBase extends vueImport {
|
|
|
347
367
|
items = innerDirValues ? innerDirValues : items;
|
|
348
368
|
}
|
|
349
369
|
}
|
|
370
|
+
if (childSlot.props) {
|
|
371
|
+
childSlot.props = this.getCamelCaseProps(childSlot.props);
|
|
372
|
+
}
|
|
350
373
|
if (slot.length > 1 && childSlot.props) {
|
|
351
374
|
if (items.length >= 0) {
|
|
352
375
|
items.push(childSlot.props);
|
|
@@ -369,18 +392,21 @@ class ComponentBase extends vueImport {
|
|
|
369
392
|
for (const childSlot of slot) {
|
|
370
393
|
let tag = childSlot.type.methods.getTag().replace("e-", "");
|
|
371
394
|
if (childSlot.children) {
|
|
372
|
-
innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
|
|
395
|
+
innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[`${tagName}`], childSlot.type.methods.getTag());
|
|
396
|
+
}
|
|
397
|
+
if (childSlot.props) {
|
|
398
|
+
childSlot.props = this.getCamelCaseProps(childSlot.props);
|
|
373
399
|
}
|
|
374
400
|
if ((/[s]\b/).test(tag)) {
|
|
375
|
-
items[tag] = !items[tag] ? [] : items[tag];
|
|
401
|
+
items[`${tag}`] = !items[`${tag}`] ? [] : items[`${tag}`];
|
|
376
402
|
if (innerDirValues.length) {
|
|
377
|
-
items[tag] = innerDirValues;
|
|
403
|
+
items[`${tag}`] = innerDirValues;
|
|
378
404
|
}
|
|
379
405
|
else {
|
|
380
|
-
items[tag].push(innerDirValues);
|
|
406
|
+
items[`${tag}`].push(innerDirValues);
|
|
381
407
|
}
|
|
382
408
|
if (childSlot.props) {
|
|
383
|
-
items[tag].push(childSlot.props);
|
|
409
|
+
items[`${tag}`].push(childSlot.props);
|
|
384
410
|
}
|
|
385
411
|
}
|
|
386
412
|
else {
|
|
@@ -395,13 +421,16 @@ class ComponentBase extends vueImport {
|
|
|
395
421
|
let dir = {};
|
|
396
422
|
if (tagDirectives) {
|
|
397
423
|
for (let tagDirective of tagDirectives) {
|
|
398
|
-
if (tagDirective.componentOptions && tagDirective.componentOptions.children && tagDirective.componentOptions.tag
|
|
399
|
-
|
|
424
|
+
if (tagDirective.componentOptions && tagDirective.componentOptions.children && tagDirective.componentOptions.tag ||
|
|
425
|
+
(tagDirective.tag === 'e-seriescollection' && tagDirective.children)) {
|
|
426
|
+
let dirTag = tagDirective.componentOptions ? tagDirective.componentOptions.tag : tagDirective.tag;
|
|
427
|
+
dirTag = (dirTag === 'e-seriescollection') ? 'e-seriesCollection' : dirTag;
|
|
400
428
|
if (keyTags.indexOf(dirTag) !== -1) {
|
|
401
|
-
let tagName = tagNameMapper[dirTag] ? tagNameMapper[dirTag] : dirTag;
|
|
429
|
+
let tagName = tagNameMapper[`${dirTag}`] ? tagNameMapper[`${dirTag}`] : dirTag;
|
|
402
430
|
dir[tagName.replace('e-', '')] = [];
|
|
403
|
-
|
|
404
|
-
|
|
431
|
+
let children = tagDirective.componentOptions ? tagDirective.componentOptions.children : tagDirective.children;
|
|
432
|
+
for (let tagDirChild of children) {
|
|
433
|
+
let retObj = this.getVNodeValue(tagDirChild, tagMapper[`${dirTag}`], tagNameMapper);
|
|
405
434
|
if (Object.keys(retObj).length !== 0) {
|
|
406
435
|
dir[tagName.replace('e-', '')].push(retObj);
|
|
407
436
|
}
|
|
@@ -415,13 +444,24 @@ class ComponentBase extends vueImport {
|
|
|
415
444
|
getMultiLevelDirValue(tagDirectories, tagKey, tagNameMapper) {
|
|
416
445
|
let mulObj = {};
|
|
417
446
|
for (let tagDir of tagDirectories) {
|
|
447
|
+
let key;
|
|
448
|
+
let children;
|
|
418
449
|
if (tagDir.componentOptions) {
|
|
419
|
-
|
|
420
|
-
|
|
450
|
+
key = tagDir.componentOptions.tag;
|
|
451
|
+
if (tagDir.componentOptions.children) {
|
|
452
|
+
children = tagDir.componentOptions.children;
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
else if ((tagDir.tag === 'e-markersettings' || tagDir.tag === 'e-markersetting') && tagDir.children) {
|
|
456
|
+
key = (tagDir.tag === 'e-markersettings') ? 'e-markerSettings' : 'e-markerSetting';
|
|
457
|
+
children = tagDir.children;
|
|
458
|
+
}
|
|
459
|
+
if (key) {
|
|
460
|
+
let tagName = tagNameMapper[`${key}`] ? tagNameMapper[`${key}`] : key;
|
|
421
461
|
mulObj[tagName.replace('e-', '')] = [];
|
|
422
|
-
if (
|
|
423
|
-
for (let tagDirChild of
|
|
424
|
-
let mulLevObj = this.getVNodeValue(tagDirChild, tagKey[key], tagNameMapper);
|
|
462
|
+
if (children) {
|
|
463
|
+
for (let tagDirChild of children) {
|
|
464
|
+
let mulLevObj = this.getVNodeValue(tagDirChild, tagKey[`${key}`], tagNameMapper);
|
|
425
465
|
if (Object.keys(mulLevObj).length !== 0) {
|
|
426
466
|
mulObj[tagName.replace('e-', '')].push(mulLevObj);
|
|
427
467
|
}
|
|
@@ -433,14 +473,23 @@ class ComponentBase extends vueImport {
|
|
|
433
473
|
}
|
|
434
474
|
getVNodeValue(tagDirective, tagKey, tagNameMapper) {
|
|
435
475
|
let ret = {};
|
|
436
|
-
if (tagDirective.componentOptions) {
|
|
437
|
-
let dirTag
|
|
476
|
+
if (tagDirective.componentOptions || ((tagDirective.tag === 'e-markersettings' || tagDirective.tag === 'e-markersetting') && tagDirective.context)) {
|
|
477
|
+
let dirTag;
|
|
478
|
+
if (tagDirective.componentOptions) {
|
|
479
|
+
dirTag = tagDirective.componentOptions.tag;
|
|
480
|
+
}
|
|
481
|
+
else {
|
|
482
|
+
dirTag = (tagDirective.tag === 'e-markersettings') ? 'e-markerSettings' : 'e-markerSetting';
|
|
483
|
+
}
|
|
438
484
|
if (typeof tagKey === 'string' && dirTag === tagKey && tagDirective.data) {
|
|
439
485
|
ret = tagDirective.data.attrs ? this.getCamelCaseProps(tagDirective.data.attrs) : this.getCamelCaseProps(tagDirective.data);
|
|
440
486
|
}
|
|
441
487
|
else if (typeof tagKey === 'object') {
|
|
442
488
|
if (tagDirective.componentOptions.children && (Object.keys(tagKey).indexOf(dirTag) !== -1)) {
|
|
443
|
-
ret = this.getMultiLevelDirValue(tagDirective.componentOptions.children, tagKey[dirTag], tagNameMapper);
|
|
489
|
+
ret = this.getMultiLevelDirValue(tagDirective.componentOptions.children, tagKey[`${dirTag}`], tagNameMapper);
|
|
490
|
+
}
|
|
491
|
+
else if (tagDirective.children && (Object.keys(tagKey).indexOf(dirTag) !== -1) && (dirTag === 'e-markersettings' || dirTag === 'e-markersetting')) {
|
|
492
|
+
ret = this.getMultiLevelDirValue(tagDirective.children, tagKey[`${dirTag}`], tagNameMapper);
|
|
444
493
|
}
|
|
445
494
|
if (tagDirective.data && tagDirective.data.attrs) {
|
|
446
495
|
ret = extend(ret, this.getCamelCaseProps(tagDirective.data.attrs));
|
|
@@ -455,7 +504,7 @@ class ComponentBase extends vueImport {
|
|
|
455
504
|
getCamelCaseProps(props) {
|
|
456
505
|
let retProps = {};
|
|
457
506
|
for (let prop of Object.keys(props)) {
|
|
458
|
-
retProps[prop.replace(/-[a-z]/g, (e) => { return e[1].toUpperCase(); })] = props[prop];
|
|
507
|
+
retProps[prop.replace(/-[a-z]/g, (e) => { return e[1].toUpperCase(); })] = props[`${prop}`];
|
|
459
508
|
}
|
|
460
509
|
return retProps;
|
|
461
510
|
}
|
|
@@ -489,9 +538,9 @@ let $internalHooks = [
|
|
|
489
538
|
function getProps(options = {}) {
|
|
490
539
|
if (options.props) {
|
|
491
540
|
for (let prop of options.props) {
|
|
492
|
-
(options.newprops || (options.newprops = {}))[prop] = {};
|
|
493
|
-
(options.watch || (options.watch = {}))[prop] = function (newVal) {
|
|
494
|
-
this.ej2Instances[prop] = newVal;
|
|
541
|
+
(options.newprops || (options.newprops = {}))[`${prop}`] = {};
|
|
542
|
+
(options.watch || (options.watch = {}))[`${prop}`] = function (newVal) {
|
|
543
|
+
this.ej2Instances[`${prop}`] = newVal;
|
|
495
544
|
if (this.dataBind && (options.name !== 'DateRangePickerComponent')) {
|
|
496
545
|
this.dataBind();
|
|
497
546
|
}
|
|
@@ -514,9 +563,9 @@ function EJcomponentFactory(Component, options = {}) {
|
|
|
514
563
|
const proto = Component.prototype;
|
|
515
564
|
if (options.props) {
|
|
516
565
|
for (let prop of options.props) {
|
|
517
|
-
(options.props || (options.props = {}))[prop] = {};
|
|
518
|
-
(options.watch || (options.watch = {}))[prop] = function (newVal) {
|
|
519
|
-
this.ej2Instances[prop] = newVal;
|
|
566
|
+
(options.props || (options.props = {}))[`${prop}`] = {};
|
|
567
|
+
(options.watch || (options.watch = {}))[`${prop}`] = function (newVal) {
|
|
568
|
+
this.ej2Instances[`${prop}`] = newVal;
|
|
520
569
|
if (this.dataBind && (options.name !== 'DateRangePickerComponent')) {
|
|
521
570
|
this.dataBind();
|
|
522
571
|
}
|
|
@@ -529,17 +578,17 @@ function EJcomponentFactory(Component, options = {}) {
|
|
|
529
578
|
return;
|
|
530
579
|
}
|
|
531
580
|
if ($internalHooks.indexOf(key) > -1) {
|
|
532
|
-
options[key] = proto[key];
|
|
581
|
+
options[`${key}`] = proto[`${key}`];
|
|
533
582
|
return;
|
|
534
583
|
}
|
|
535
584
|
const descriptor = Object.getOwnPropertyDescriptor(proto, key);
|
|
536
585
|
if (typeof descriptor.value === 'function') {
|
|
537
586
|
// methods
|
|
538
|
-
(options.methods || (options.methods = {}))[key] = descriptor.value;
|
|
587
|
+
(options.methods || (options.methods = {}))[`${key}`] = descriptor.value;
|
|
539
588
|
}
|
|
540
589
|
else if (descriptor.get || descriptor.set) {
|
|
541
590
|
// computed properties
|
|
542
|
-
(options.computed || (options.computed = {}))[key] = {
|
|
591
|
+
(options.computed || (options.computed = {}))[`${key}`] = {
|
|
543
592
|
get: descriptor.get,
|
|
544
593
|
set: descriptor.set
|
|
545
594
|
};
|
|
@@ -547,7 +596,7 @@ function EJcomponentFactory(Component, options = {}) {
|
|
|
547
596
|
});
|
|
548
597
|
Object.getOwnPropertyNames(ComponentBase.prototype).forEach(function (key) {
|
|
549
598
|
if ($internalHooks.indexOf(key) > -1) {
|
|
550
|
-
options[key] = proto[key];
|
|
599
|
+
options[`${key}`] = proto[`${key}`];
|
|
551
600
|
return;
|
|
552
601
|
}
|
|
553
602
|
});
|
|
@@ -584,8 +633,8 @@ function collectDataFromConstructor(vm, Component) {
|
|
|
584
633
|
keys.forEach(function (key) {
|
|
585
634
|
if (key.charAt(0) !== '_') {
|
|
586
635
|
Object.defineProperty(_this, key, {
|
|
587
|
-
get: function () { return vm[key]; },
|
|
588
|
-
set: function (value) { return vm[key] = value; }
|
|
636
|
+
get: function () { return vm[`${key}`]; },
|
|
637
|
+
set: function (value) { return vm[`${key}`] = value; }
|
|
589
638
|
});
|
|
590
639
|
}
|
|
591
640
|
});
|
|
@@ -593,8 +642,8 @@ function collectDataFromConstructor(vm, Component) {
|
|
|
593
642
|
var data = new Component();
|
|
594
643
|
var plainData = {};
|
|
595
644
|
Object.keys(data).forEach(function (key) {
|
|
596
|
-
if (data[key] !== undefined) {
|
|
597
|
-
plainData[key] = data[key];
|
|
645
|
+
if (data[`${key}`] !== undefined) {
|
|
646
|
+
plainData[`${key}`] = data[`${key}`];
|
|
598
647
|
}
|
|
599
648
|
});
|
|
600
649
|
return plainData;
|
|
@@ -621,12 +670,12 @@ function compile(templateElement, helper) {
|
|
|
621
670
|
// Compilation for Vue 3 slot template
|
|
622
671
|
let app = allVue.createApp({
|
|
623
672
|
render() {
|
|
624
|
-
return vueSlot[templateElement]({ data: data });
|
|
673
|
+
return vueSlot[`${templateElement}`]({ data: data });
|
|
625
674
|
}
|
|
626
675
|
});
|
|
627
676
|
if (plugins) {
|
|
628
677
|
for (let i = 0; i < plugins.length; i++) {
|
|
629
|
-
app.use(plugins[i]);
|
|
678
|
+
app.use(plugins[parseInt(i.toString(), 10)]);
|
|
630
679
|
}
|
|
631
680
|
}
|
|
632
681
|
app.mount((context.getModuleName() === 'grid') ? ("#" + pid) : ("#" + id));
|
|
@@ -659,7 +708,7 @@ function compile(templateElement, helper) {
|
|
|
659
708
|
templateCompRef = object.template._context.components[templateElement.name];
|
|
660
709
|
if (!templateCompRef) {
|
|
661
710
|
let key = Object.keys(object.template._context.components)[0];
|
|
662
|
-
templateCompRef = object.template._context.components[key];
|
|
711
|
+
templateCompRef = object.template._context.components[`${key}`];
|
|
663
712
|
}
|
|
664
713
|
}
|
|
665
714
|
let tempRef;
|
|
@@ -671,7 +720,7 @@ function compile(templateElement, helper) {
|
|
|
671
720
|
if (templateCompRef.components) {
|
|
672
721
|
let objkeys = Object.keys(templateCompRef.components) || [];
|
|
673
722
|
for (let objstring of objkeys) {
|
|
674
|
-
let intComponent = templateCompRef.components[objstring];
|
|
723
|
+
let intComponent = templateCompRef.components[`${objstring}`];
|
|
675
724
|
if (intComponent && intComponent.data) {
|
|
676
725
|
let tempRef2 = Object.assign(intComponent.data(), dataObj.data);
|
|
677
726
|
intComponent.data = function () { return tempRef2; };
|
|
@@ -683,7 +732,7 @@ function compile(templateElement, helper) {
|
|
|
683
732
|
let app = allVue.createApp(templateCompRef);
|
|
684
733
|
if (plugins) {
|
|
685
734
|
for (let i = 0; i < plugins.length; i++) {
|
|
686
|
-
app.use(plugins[i]);
|
|
735
|
+
app.use(plugins[parseInt(i.toString(), 10)]);
|
|
687
736
|
}
|
|
688
737
|
}
|
|
689
738
|
app.mount((context.getModuleName() === 'grid') ? ("#" + pid) : ("#" + id));
|
|
@@ -696,7 +745,7 @@ function compile(templateElement, helper) {
|
|
|
696
745
|
// Compilation for Vue 2 slot template
|
|
697
746
|
let vueTemplate = new Vue$1__default({
|
|
698
747
|
render() {
|
|
699
|
-
return vueSlot[templateElement]({ data: data });
|
|
748
|
+
return vueSlot[`${templateElement}`]({ data: data });
|
|
700
749
|
}
|
|
701
750
|
});
|
|
702
751
|
vueTemplate.$mount("#" + id);
|
|
@@ -737,10 +786,10 @@ function compile(templateElement, helper) {
|
|
|
737
786
|
templateInstance = context.vueInstance.templateCollection;
|
|
738
787
|
}
|
|
739
788
|
if (propName) {
|
|
740
|
-
if (!templateInstance[propName]) {
|
|
741
|
-
templateInstance[propName] = [];
|
|
789
|
+
if (!templateInstance[`${propName}`]) {
|
|
790
|
+
templateInstance[`${propName}`] = [];
|
|
742
791
|
}
|
|
743
|
-
templateInstance[propName].push(returnEle[0]);
|
|
792
|
+
templateInstance[`${propName}`].push(returnEle[0]);
|
|
744
793
|
}
|
|
745
794
|
}
|
|
746
795
|
detach(ele);
|
|
@@ -766,24 +815,24 @@ function getVueChildSlot(vueInstance, templateElement) {
|
|
|
766
815
|
let scopedSlots = vueInstance.$scopedSlots;
|
|
767
816
|
let vSlots = vueInstance.scopedSlots;
|
|
768
817
|
let children = vueInstance.children;
|
|
769
|
-
if (scopedSlots && scopedSlots[templateElement]) {
|
|
818
|
+
if (scopedSlots && scopedSlots[`${templateElement}`]) {
|
|
770
819
|
return scopedSlots;
|
|
771
820
|
}
|
|
772
821
|
else if (slots && slots.default) {
|
|
773
822
|
let childSlots = slots.default;
|
|
774
823
|
for (let i = 0; i < childSlots.length; i++) {
|
|
775
|
-
let slot = getVueChildSlot(getSlot(childSlots[i]), templateElement);
|
|
824
|
+
let slot = getVueChildSlot(getSlot(childSlots[parseInt(i.toString(), 10)]), templateElement);
|
|
776
825
|
if (slot) {
|
|
777
826
|
return slot;
|
|
778
827
|
}
|
|
779
828
|
}
|
|
780
829
|
}
|
|
781
|
-
else if (vSlots && vSlots[templateElement]) {
|
|
830
|
+
else if (vSlots && vSlots[`${templateElement}`]) {
|
|
782
831
|
return vSlots;
|
|
783
832
|
}
|
|
784
833
|
else if (children) {
|
|
785
834
|
for (let i = 0; i < children.length; i++) {
|
|
786
|
-
let slot = getVueChildSlot(getSlot(children[i]), templateElement);
|
|
835
|
+
let slot = getVueChildSlot(getSlot(children[parseInt(i.toString(), 10)]), templateElement);
|
|
787
836
|
if (slot) {
|
|
788
837
|
return slot;
|
|
789
838
|
}
|
|
@@ -792,7 +841,8 @@ function getVueChildSlot(vueInstance, templateElement) {
|
|
|
792
841
|
return undefined;
|
|
793
842
|
}
|
|
794
843
|
function getSlot(vnode) {
|
|
795
|
-
let slot = (vnode.componentOptions && vnode.componentOptions.children) ? vnode.componentOptions :
|
|
844
|
+
let slot = (vnode.componentOptions && vnode.componentOptions.children) ? vnode.componentOptions :
|
|
845
|
+
(!vnode.data && (vnode.tag === 'e-markersettings' || vnode.tag === 'e-markersetting')) ? vnode : vnode.data;
|
|
796
846
|
return vnode.componentInstance ? vnode.componentInstance : slot;
|
|
797
847
|
}
|
|
798
848
|
// Get the Vue3 slot template from the root or current Vue component.
|
|
@@ -804,13 +854,13 @@ function getCurrentVueSlot(vueInstance, templateElement, root) {
|
|
|
804
854
|
return getChildVueSlot(slots, templateElement);
|
|
805
855
|
}
|
|
806
856
|
function getChildVueSlot(slots, templateElement) {
|
|
807
|
-
if (slots && slots[templateElement]) {
|
|
857
|
+
if (slots && slots[`${templateElement}`]) {
|
|
808
858
|
return slots;
|
|
809
859
|
}
|
|
810
860
|
else if (slots && slots.default) {
|
|
811
861
|
let childSlots = slots.default();
|
|
812
862
|
for (let i = 0; i < childSlots.length; i++) {
|
|
813
|
-
let slot = getChildVueSlot(childSlots[i].children, templateElement);
|
|
863
|
+
let slot = getChildVueSlot(childSlots[parseInt(i.toString(), 10)].children, templateElement);
|
|
814
864
|
if (slot) {
|
|
815
865
|
return slot;
|
|
816
866
|
}
|