@syncfusion/ej2-vue-base 19.4.52 → 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 +16 -0
  2. package/README.md +2 -4
  3. package/dist/ej2-vue-base.umd.min.js +1 -1
  4. package/dist/es6/ej2-vue-base.es2015.js +198 -75
  5. package/dist/es6/ej2-vue-base.es2015.js.map +1 -1
  6. package/dist/es6/ej2-vue-base.es5.js +202 -79
  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 +6 -6
  12. package/postinstall.js +25 -10
  13. package/src/component-base.js +15 -1
  14. package/src/template.d.ts +1 -1
  15. package/src/template.js +187 -78
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,91 +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
- }
40
- var tempRef_1;
41
- if (propsData) {
42
- tempRef_1 = Object.assign(templateCompRef.data(), propsData);
43
- }
44
- else {
45
- tempRef_1 = Object.assign(templateCompRef.data(), dataObj.data);
46
- if (templateCompRef.components) {
47
- var objkeys = Object.keys(templateCompRef.components) || [];
48
- var _loop_1 = function (objstring) {
49
- var intComponent = templateCompRef.components[objstring];
50
- if (intComponent && intComponent.data) {
51
- var tempRef2_1 = Object.assign(intComponent.data(), dataObj.data);
52
- intComponent.data = function () { return tempRef2_1; };
53
- }
54
- };
55
- for (var _i = 0, objkeys_1 = objkeys; _i < objkeys_1.length; _i++) {
56
- var objstring = objkeys_1[_i];
57
- _loop_1(objstring);
58
- }
59
- }
60
- }
61
- templateCompRef.data = function () { return tempRef_1; };
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
62
22
  allVue
63
- .createApp(templateCompRef)
23
+ .createApp({
24
+ render: function () {
25
+ return vue3Slots_1[templateElement]({ data: data });
26
+ }
27
+ })
64
28
  .mount("#" + id);
65
29
  returnEle = ele.childNodes;
66
30
  detach(ele);
67
31
  }
68
32
  else {
69
- var templateFunction = tempObj.template;
70
- var propsData = getValue("template.propsData", tempObj);
71
- var dataObj = {
72
- data: { data: extend(tempObj.data || {}, data) },
73
- parent: context.vueInstance,
74
- };
75
- if (propsData) {
76
- templateFunction = tempObj.template.extends;
77
- dataObj.propsData = propsData;
78
- }
79
- if (typeof templateFunction !== "function") {
80
- templateFunction = Vue.extend(templateFunction);
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];
81
59
  }
82
- var templateVue = new templateFunction(dataObj);
83
- // let templateVue = new Vue(tempObj.template);
84
- // templateVue.$data.data = extend(tempObj.data, data);
85
- templateVue.$mount("#" + id);
86
- returnEle = ele.childNodes;
87
- if (context.vueInstance) {
88
- var templateInstance = context.vueInstance.templateCollection;
89
- if (!templateInstance) {
90
- context.vueInstance.templateCollection = {};
91
- templateInstance = context.vueInstance.templateCollection;
92
- }
93
- if (propName) {
94
- if (!templateInstance[propName]) {
95
- templateInstance[propName] = [];
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; };
96
74
  }
97
- templateInstance[propName].push(returnEle[0]);
75
+ };
76
+ for (var _i = 0, objkeys_1 = objkeys; _i < objkeys_1.length; _i++) {
77
+ var objstring = objkeys_1[_i];
78
+ _loop_1(objstring);
98
79
  }
99
80
  }
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);
99
+ returnEle = ele.childNodes;
100
100
  detach(ele);
101
101
  }
102
+ else {
103
+ // Compilation for Vue 2 string template
104
+ detach(ele);
105
+ return stringCompiler(templateElement, helper)(data);
106
+ }
102
107
  }
103
- return returnEle || [];
104
- };
105
- }
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;
134
+ }
135
+ if (propName) {
136
+ if (!templateInstance[propName]) {
137
+ templateInstance[propName] = [];
138
+ }
139
+ templateInstance[propName].push(returnEle[0]);
140
+ }
141
+ }
142
+ detach(ele);
143
+ }
144
+ }
145
+ return returnEle || [];
146
+ };
106
147
  }
107
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
+ }