@syncfusion/ej2-vue-base 19.4.56 → 20.1.47

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.
Files changed (15) hide show
  1. package/CHANGELOG.md +3 -3
  2. package/README.md +2 -4
  3. package/dist/ej2-vue-base.umd.min.js +2 -2
  4. package/dist/es6/ej2-vue-base.es2015.js +186 -79
  5. package/dist/es6/ej2-vue-base.es2015.js.map +1 -1
  6. package/dist/es6/ej2-vue-base.es5.js +190 -83
  7. package/dist/es6/ej2-vue-base.es5.js.map +1 -1
  8. package/dist/global/ej2-vue-base.min.js +2 -2
  9. package/dist/global/ej2-vue-base.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +25 -7
  12. package/postinstall.js +2 -10
  13. package/src/component-base.js +4 -2
  14. package/src/template.d.ts +1 -1
  15. package/src/template.js +186 -81
package/src/template.js CHANGED
@@ -5,11 +5,9 @@ import { allVue, gh } from "./component-base";
5
5
  var stringCompiler = getTemplateEngine();
6
6
  export function compile(templateElement, helper) {
7
7
  var that = this;
8
- if (typeof templateElement === "string") {
9
- return stringCompiler(templateElement, helper);
10
- }
11
- else {
12
- return function (data, context, propName) {
8
+ return function (data, context, propName, element, root) {
9
+ var returnEle;
10
+ if (context) {
13
11
  var pid = getUniqueID("templateParentDiv");
14
12
  var id = getUniqueID("templateDiv");
15
13
  var ele = createElement("div", {
@@ -17,95 +15,202 @@ export function compile(templateElement, helper) {
17
15
  innerHTML: '<div id="' + id + '"></div>',
18
16
  });
19
17
  document.body.appendChild(ele);
20
- var tempObj = templateElement.call(that, {});
21
- var returnEle;
22
- if (context) {
23
- if (gh) {
24
- var object = tempObj;
25
- var propsData = getValue("template.propsData", tempObj);
26
- var dataObj = {
27
- data: { data: extend(tempObj.data || {}, data) },
28
- parent: context.vueInstance,
29
- };
30
- if (!object.template) {
31
- object.template = object[Object.keys(object)[0]];
32
- }
33
- var templateCompRef = void 0;
34
- if (object.template.extends) {
35
- templateCompRef = object.template.extends._context.components.template;
36
- }
37
- else {
38
- templateCompRef = object.template._context.components[templateElement.name];
39
- if (!templateCompRef) {
40
- var key = Object.keys(object.template._context.components)[0];
41
- templateCompRef = object.template._context.components[key];
18
+ if (gh && typeof templateElement === "string") {
19
+ var vue3Slots_1 = getVue3Slot(context.vueInstance, templateElement, root);
20
+ if (vue3Slots_1) {
21
+ // Compilation for Vue 3 slot template
22
+ allVue
23
+ .createApp({
24
+ render: function () {
25
+ return vue3Slots_1[templateElement]({ data: data });
42
26
  }
27
+ })
28
+ .mount("#" + id);
29
+ returnEle = ele.childNodes;
30
+ detach(ele);
31
+ }
32
+ else {
33
+ // Compilation for Vue 3 string template
34
+ detach(ele);
35
+ return stringCompiler(templateElement, helper)(data);
36
+ }
37
+ }
38
+ else if (gh) {
39
+ // Compilation for Vue 3 functional template
40
+ var tempObj = templateElement.call(that, {});
41
+ var object = tempObj;
42
+ var propsData = getValue("template.propsData", tempObj);
43
+ var dataObj = {
44
+ data: { data: extend(tempObj.data || {}, data) },
45
+ parent: context.vueInstance,
46
+ };
47
+ if (!object.template) {
48
+ object.template = object[Object.keys(object)[0]];
49
+ }
50
+ var templateCompRef = void 0;
51
+ if (object.template.extends) {
52
+ templateCompRef = object.template.extends._context.components.template;
53
+ }
54
+ else {
55
+ templateCompRef = object.template._context.components[templateElement.name];
56
+ if (!templateCompRef) {
57
+ var key = Object.keys(object.template._context.components)[0];
58
+ templateCompRef = object.template._context.components[key];
43
59
  }
44
- var tempRef_1;
45
- if (propsData) {
46
- tempRef_1 = Object.assign(templateCompRef.data(), propsData);
47
- }
48
- else {
49
- tempRef_1 = Object.assign(templateCompRef.data(), dataObj.data);
50
- if (templateCompRef.components) {
51
- var objkeys = Object.keys(templateCompRef.components) || [];
52
- var _loop_1 = function (objstring) {
53
- var intComponent = templateCompRef.components[objstring];
54
- if (intComponent && intComponent.data) {
55
- var tempRef2_1 = Object.assign(intComponent.data(), dataObj.data);
56
- intComponent.data = function () { return tempRef2_1; };
57
- }
58
- };
59
- for (var _i = 0, objkeys_1 = objkeys; _i < objkeys_1.length; _i++) {
60
- var objstring = objkeys_1[_i];
61
- _loop_1(objstring);
60
+ }
61
+ var tempRef_1;
62
+ if (propsData) {
63
+ tempRef_1 = Object.assign(templateCompRef.data(), propsData);
64
+ }
65
+ else {
66
+ tempRef_1 = Object.assign(templateCompRef.data(), dataObj.data);
67
+ if (templateCompRef.components) {
68
+ var objkeys = Object.keys(templateCompRef.components) || [];
69
+ var _loop_1 = function (objstring) {
70
+ var intComponent = templateCompRef.components[objstring];
71
+ if (intComponent && intComponent.data) {
72
+ var tempRef2_1 = Object.assign(intComponent.data(), dataObj.data);
73
+ intComponent.data = function () { return tempRef2_1; };
62
74
  }
75
+ };
76
+ for (var _i = 0, objkeys_1 = objkeys; _i < objkeys_1.length; _i++) {
77
+ var objstring = objkeys_1[_i];
78
+ _loop_1(objstring);
63
79
  }
64
80
  }
65
- templateCompRef.data = function () { return tempRef_1; };
66
- allVue
67
- .createApp(templateCompRef)
68
- .mount("#" + id);
81
+ }
82
+ templateCompRef.data = function () { return tempRef_1; };
83
+ allVue
84
+ .createApp(templateCompRef)
85
+ .mount("#" + id);
86
+ returnEle = ele.childNodes;
87
+ detach(ele);
88
+ }
89
+ else if (typeof templateElement === "string") {
90
+ var vue2Slots_1 = getVue2Slot(context.vueInstance, templateElement, root);
91
+ if (vue2Slots_1) {
92
+ // Compilation for Vue 2 slot template
93
+ var vueTemplate = new Vue({
94
+ render: function () {
95
+ return vue2Slots_1[templateElement]({ data: data });
96
+ }
97
+ });
98
+ vueTemplate.$mount("#" + id);
69
99
  returnEle = ele.childNodes;
70
100
  detach(ele);
71
101
  }
72
102
  else {
73
- var templateFunction = tempObj.template;
74
- var propsData = getValue("template.propsData", tempObj);
75
- var dataObj = {
76
- data: { data: extend(tempObj.data || {}, data) },
77
- parent: context.vueInstance,
78
- };
79
- if (propsData) {
80
- templateFunction = tempObj.template.extends;
81
- dataObj.propsData = propsData;
82
- }
83
- if (typeof templateFunction !== "function") {
84
- templateFunction = Vue.extend(templateFunction);
103
+ // Compilation for Vue 2 string template
104
+ detach(ele);
105
+ return stringCompiler(templateElement, helper)(data);
106
+ }
107
+ }
108
+ else {
109
+ // Compilation for Vue 2 functional template
110
+ var tempObj = templateElement.call(that, {});
111
+ var templateFunction = tempObj.template;
112
+ var propsData = getValue("template.propsData", tempObj);
113
+ var dataObj = {
114
+ data: { data: extend(tempObj.data || {}, data) },
115
+ parent: context.vueInstance,
116
+ };
117
+ if (propsData) {
118
+ templateFunction = tempObj.template.extends;
119
+ dataObj.propsData = propsData;
120
+ }
121
+ if (typeof templateFunction !== "function") {
122
+ templateFunction = Vue.extend(templateFunction);
123
+ }
124
+ var templateVue = new templateFunction(dataObj);
125
+ // let templateVue = new Vue(tempObj.template);
126
+ // templateVue.$data.data = extend(tempObj.data, data);
127
+ templateVue.$mount("#" + id);
128
+ returnEle = ele.childNodes;
129
+ if (context.vueInstance) {
130
+ var templateInstance = context.vueInstance.templateCollection;
131
+ if (!templateInstance) {
132
+ context.vueInstance.templateCollection = {};
133
+ templateInstance = context.vueInstance.templateCollection;
85
134
  }
86
- var templateVue = new templateFunction(dataObj);
87
- // let templateVue = new Vue(tempObj.template);
88
- // templateVue.$data.data = extend(tempObj.data, data);
89
- templateVue.$mount("#" + id);
90
- returnEle = ele.childNodes;
91
- if (context.vueInstance) {
92
- var templateInstance = context.vueInstance.templateCollection;
93
- if (!templateInstance) {
94
- context.vueInstance.templateCollection = {};
95
- templateInstance = context.vueInstance.templateCollection;
96
- }
97
- if (propName) {
98
- if (!templateInstance[propName]) {
99
- templateInstance[propName] = [];
100
- }
101
- templateInstance[propName].push(returnEle[0]);
135
+ if (propName) {
136
+ if (!templateInstance[propName]) {
137
+ templateInstance[propName] = [];
102
138
  }
139
+ templateInstance[propName].push(returnEle[0]);
103
140
  }
104
- detach(ele);
105
141
  }
142
+ detach(ele);
106
143
  }
107
- return returnEle || [];
108
- };
109
- }
144
+ }
145
+ return returnEle || [];
146
+ };
110
147
  }
111
148
  setTemplateEngine({ compile: compile });
149
+ // Get the Vue2 slot template from the root or current Vue component.
150
+ function getVue2Slot(vueInstance, templateElement, root) {
151
+ if (!vueInstance && !(root && root.vueInstance)) {
152
+ return undefined;
153
+ }
154
+ var instance = (root && root.vueInstance) ? root.vueInstance : vueInstance;
155
+ return getVue2ChildSlot(instance, templateElement);
156
+ }
157
+ function getVue2ChildSlot(vueInstance, templateElement) {
158
+ if (!vueInstance) {
159
+ return undefined;
160
+ }
161
+ var slots = vueInstance.$slots;
162
+ var scopedSlots = vueInstance.$scopedSlots;
163
+ var vSlots = vueInstance.scopedSlots;
164
+ var children = vueInstance.children;
165
+ if (scopedSlots && scopedSlots[templateElement]) {
166
+ return scopedSlots;
167
+ }
168
+ else if (slots && slots.default) {
169
+ var childSlots = slots.default;
170
+ for (var i = 0; i < childSlots.length; i++) {
171
+ var slot = getVue2ChildSlot(getSlot(childSlots[i]), templateElement);
172
+ if (slot) {
173
+ return slot;
174
+ }
175
+ }
176
+ }
177
+ else if (vSlots && vSlots[templateElement]) {
178
+ return vSlots;
179
+ }
180
+ else if (children) {
181
+ for (var i = 0; i < children.length; i++) {
182
+ var slot = getVue2ChildSlot(getSlot(children[i]), templateElement);
183
+ if (slot) {
184
+ return slot;
185
+ }
186
+ }
187
+ }
188
+ return undefined;
189
+ }
190
+ function getSlot(vnode) {
191
+ var slot = (vnode.componentOptions && vnode.componentOptions.children) ? vnode.componentOptions : vnode.data;
192
+ return vnode.componentInstance ? vnode.componentInstance : slot;
193
+ }
194
+ // Get the Vue3 slot template from the root or current Vue component.
195
+ function getVue3Slot(vueInstance, templateElement, root) {
196
+ if (!vueInstance && !(root && root.vueInstance)) {
197
+ return undefined;
198
+ }
199
+ var slots = (root && root.vueInstance) ? root.vueInstance.$slots : vueInstance.$slots;
200
+ return getVue3ChildSlot(slots, templateElement);
201
+ }
202
+ function getVue3ChildSlot(slots, templateElement) {
203
+ if (slots && slots[templateElement]) {
204
+ return slots;
205
+ }
206
+ else if (slots && slots.default) {
207
+ var childSlots = slots.default();
208
+ for (var i = 0; i < childSlots.length; i++) {
209
+ var slot = getVue3ChildSlot(childSlots[i].children, templateElement);
210
+ if (slot) {
211
+ return slot;
212
+ }
213
+ }
214
+ }
215
+ return undefined;
216
+ }