@vue/runtime-dom 3.2.47 → 3.3.0-alpha.1
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/dist/runtime-dom.cjs.js +1279 -1456
- package/dist/runtime-dom.cjs.prod.js +1192 -1367
- package/dist/runtime-dom.d.ts +137 -180
- package/dist/runtime-dom.esm-browser.js +9244 -9907
- package/dist/runtime-dom.esm-browser.prod.js +1 -1
- package/dist/runtime-dom.esm-bundler.js +1333 -1516
- package/dist/runtime-dom.global.js +9230 -9895
- package/dist/runtime-dom.global.prod.js +1 -1
- package/package.json +3 -3
|
@@ -5,1540 +5,1365 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var runtimeCore = require('@vue/runtime-core');
|
|
6
6
|
var shared = require('@vue/shared');
|
|
7
7
|
|
|
8
|
-
const svgNS =
|
|
9
|
-
const doc =
|
|
10
|
-
const templateContainer = doc &&
|
|
8
|
+
const svgNS = "http://www.w3.org/2000/svg";
|
|
9
|
+
const doc = typeof document !== "undefined" ? document : null;
|
|
10
|
+
const templateContainer = doc && /* @__PURE__ */ doc.createElement("template");
|
|
11
11
|
const nodeOps = {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
parent.insertBefore(template, anchor);
|
|
75
|
-
}
|
|
76
|
-
return [
|
|
77
|
-
// first
|
|
78
|
-
before ? before.nextSibling : parent.firstChild,
|
|
79
|
-
// last
|
|
80
|
-
anchor ? anchor.previousSibling : parent.lastChild
|
|
81
|
-
];
|
|
82
|
-
}
|
|
12
|
+
insert: (child, parent, anchor) => {
|
|
13
|
+
parent.insertBefore(child, anchor || null);
|
|
14
|
+
},
|
|
15
|
+
remove: (child) => {
|
|
16
|
+
const parent = child.parentNode;
|
|
17
|
+
if (parent) {
|
|
18
|
+
parent.removeChild(child);
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
createElement: (tag, isSVG, is, props) => {
|
|
22
|
+
const el = isSVG ? doc.createElementNS(svgNS, tag) : doc.createElement(tag, is ? { is } : void 0);
|
|
23
|
+
if (tag === "select" && props && props.multiple != null) {
|
|
24
|
+
el.setAttribute("multiple", props.multiple);
|
|
25
|
+
}
|
|
26
|
+
return el;
|
|
27
|
+
},
|
|
28
|
+
createText: (text) => doc.createTextNode(text),
|
|
29
|
+
createComment: (text) => doc.createComment(text),
|
|
30
|
+
setText: (node, text) => {
|
|
31
|
+
node.nodeValue = text;
|
|
32
|
+
},
|
|
33
|
+
setElementText: (el, text) => {
|
|
34
|
+
el.textContent = text;
|
|
35
|
+
},
|
|
36
|
+
parentNode: (node) => node.parentNode,
|
|
37
|
+
nextSibling: (node) => node.nextSibling,
|
|
38
|
+
querySelector: (selector) => doc.querySelector(selector),
|
|
39
|
+
setScopeId(el, id) {
|
|
40
|
+
el.setAttribute(id, "");
|
|
41
|
+
},
|
|
42
|
+
// __UNSAFE__
|
|
43
|
+
// Reason: innerHTML.
|
|
44
|
+
// Static content here can only come from compiled templates.
|
|
45
|
+
// As long as the user only uses trusted templates, this is safe.
|
|
46
|
+
insertStaticContent(content, parent, anchor, isSVG, start, end) {
|
|
47
|
+
const before = anchor ? anchor.previousSibling : parent.lastChild;
|
|
48
|
+
if (start && (start === end || start.nextSibling)) {
|
|
49
|
+
while (true) {
|
|
50
|
+
parent.insertBefore(start.cloneNode(true), anchor);
|
|
51
|
+
if (start === end || !(start = start.nextSibling))
|
|
52
|
+
break;
|
|
53
|
+
}
|
|
54
|
+
} else {
|
|
55
|
+
templateContainer.innerHTML = isSVG ? `<svg>${content}</svg>` : content;
|
|
56
|
+
const template = templateContainer.content;
|
|
57
|
+
if (isSVG) {
|
|
58
|
+
const wrapper = template.firstChild;
|
|
59
|
+
while (wrapper.firstChild) {
|
|
60
|
+
template.appendChild(wrapper.firstChild);
|
|
61
|
+
}
|
|
62
|
+
template.removeChild(wrapper);
|
|
63
|
+
}
|
|
64
|
+
parent.insertBefore(template, anchor);
|
|
65
|
+
}
|
|
66
|
+
return [
|
|
67
|
+
// first
|
|
68
|
+
before ? before.nextSibling : parent.firstChild,
|
|
69
|
+
// last
|
|
70
|
+
anchor ? anchor.previousSibling : parent.lastChild
|
|
71
|
+
];
|
|
72
|
+
}
|
|
83
73
|
};
|
|
84
74
|
|
|
85
|
-
// compiler should normalize class + :class bindings on the same element
|
|
86
|
-
// into a single binding ['staticClass', dynamic]
|
|
87
75
|
function patchClass(el, value, isSVG) {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
el.setAttribute('class', value);
|
|
100
|
-
}
|
|
101
|
-
else {
|
|
102
|
-
el.className = value;
|
|
103
|
-
}
|
|
76
|
+
const transitionClasses = el._vtc;
|
|
77
|
+
if (transitionClasses) {
|
|
78
|
+
value = (value ? [value, ...transitionClasses] : [...transitionClasses]).join(" ");
|
|
79
|
+
}
|
|
80
|
+
if (value == null) {
|
|
81
|
+
el.removeAttribute("class");
|
|
82
|
+
} else if (isSVG) {
|
|
83
|
+
el.setAttribute("class", value);
|
|
84
|
+
} else {
|
|
85
|
+
el.className = value;
|
|
86
|
+
}
|
|
104
87
|
}
|
|
105
88
|
|
|
106
89
|
function patchStyle(el, prev, next) {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
// value, thus handing over control to `v-show`.
|
|
134
|
-
if ('_vod' in el) {
|
|
135
|
-
style.display = currentDisplay;
|
|
136
|
-
}
|
|
137
|
-
}
|
|
90
|
+
const style = el.style;
|
|
91
|
+
const isCssString = shared.isString(next);
|
|
92
|
+
if (next && !isCssString) {
|
|
93
|
+
if (prev && !shared.isString(prev)) {
|
|
94
|
+
for (const key in prev) {
|
|
95
|
+
if (next[key] == null) {
|
|
96
|
+
setStyle(style, key, "");
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
for (const key in next) {
|
|
101
|
+
setStyle(style, key, next[key]);
|
|
102
|
+
}
|
|
103
|
+
} else {
|
|
104
|
+
const currentDisplay = style.display;
|
|
105
|
+
if (isCssString) {
|
|
106
|
+
if (prev !== next) {
|
|
107
|
+
style.cssText = next;
|
|
108
|
+
}
|
|
109
|
+
} else if (prev) {
|
|
110
|
+
el.removeAttribute("style");
|
|
111
|
+
}
|
|
112
|
+
if ("_vod" in el) {
|
|
113
|
+
style.display = currentDisplay;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
138
116
|
}
|
|
139
117
|
const importantRE = /\s*!important$/;
|
|
140
118
|
function setStyle(style, name, val) {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
}
|
|
119
|
+
if (shared.isArray(val)) {
|
|
120
|
+
val.forEach((v) => setStyle(style, name, v));
|
|
121
|
+
} else {
|
|
122
|
+
if (val == null)
|
|
123
|
+
val = "";
|
|
124
|
+
if (name.startsWith("--")) {
|
|
125
|
+
style.setProperty(name, val);
|
|
126
|
+
} else {
|
|
127
|
+
const prefixed = autoPrefix(style, name);
|
|
128
|
+
if (importantRE.test(val)) {
|
|
129
|
+
style.setProperty(
|
|
130
|
+
shared.hyphenate(prefixed),
|
|
131
|
+
val.replace(importantRE, ""),
|
|
132
|
+
"important"
|
|
133
|
+
);
|
|
134
|
+
} else {
|
|
135
|
+
style[prefixed] = val;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
162
139
|
}
|
|
163
|
-
const prefixes = [
|
|
140
|
+
const prefixes = ["Webkit", "Moz", "ms"];
|
|
164
141
|
const prefixCache = {};
|
|
165
142
|
function autoPrefix(style, rawName) {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
143
|
+
const cached = prefixCache[rawName];
|
|
144
|
+
if (cached) {
|
|
145
|
+
return cached;
|
|
146
|
+
}
|
|
147
|
+
let name = runtimeCore.camelize(rawName);
|
|
148
|
+
if (name !== "filter" && name in style) {
|
|
149
|
+
return prefixCache[rawName] = name;
|
|
150
|
+
}
|
|
151
|
+
name = shared.capitalize(name);
|
|
152
|
+
for (let i = 0; i < prefixes.length; i++) {
|
|
153
|
+
const prefixed = prefixes[i] + name;
|
|
154
|
+
if (prefixed in style) {
|
|
155
|
+
return prefixCache[rawName] = prefixed;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
return rawName;
|
|
182
159
|
}
|
|
183
160
|
|
|
184
|
-
const xlinkNS =
|
|
161
|
+
const xlinkNS = "http://www.w3.org/1999/xlink";
|
|
185
162
|
function patchAttr(el, key, value, isSVG, instance) {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
}
|
|
201
|
-
else {
|
|
202
|
-
el.setAttribute(key, isBoolean ? '' : value);
|
|
203
|
-
}
|
|
204
|
-
}
|
|
163
|
+
if (isSVG && key.startsWith("xlink:")) {
|
|
164
|
+
if (value == null) {
|
|
165
|
+
el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
|
|
166
|
+
} else {
|
|
167
|
+
el.setAttributeNS(xlinkNS, key, value);
|
|
168
|
+
}
|
|
169
|
+
} else {
|
|
170
|
+
const isBoolean = shared.isSpecialBooleanAttr(key);
|
|
171
|
+
if (value == null || isBoolean && !shared.includeBooleanAttr(value)) {
|
|
172
|
+
el.removeAttribute(key);
|
|
173
|
+
} else {
|
|
174
|
+
el.setAttribute(key, isBoolean ? "" : value);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
205
177
|
}
|
|
206
178
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
// overriding existing VNodes, in which case the old tree must be properly
|
|
212
|
-
// unmounted.
|
|
213
|
-
prevChildren, parentComponent, parentSuspense, unmountChildren) {
|
|
214
|
-
if (key === 'innerHTML' || key === 'textContent') {
|
|
215
|
-
if (prevChildren) {
|
|
216
|
-
unmountChildren(prevChildren, parentComponent, parentSuspense);
|
|
217
|
-
}
|
|
218
|
-
el[key] = value == null ? '' : value;
|
|
219
|
-
return;
|
|
179
|
+
function patchDOMProp(el, key, value, prevChildren, parentComponent, parentSuspense, unmountChildren) {
|
|
180
|
+
if (key === "innerHTML" || key === "textContent") {
|
|
181
|
+
if (prevChildren) {
|
|
182
|
+
unmountChildren(prevChildren, parentComponent, parentSuspense);
|
|
220
183
|
}
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
el.tagName === 'OPTION') {
|
|
234
|
-
el.value = newValue;
|
|
235
|
-
}
|
|
236
|
-
if (value == null) {
|
|
237
|
-
el.removeAttribute(key);
|
|
238
|
-
}
|
|
239
|
-
return;
|
|
240
|
-
}
|
|
241
|
-
let needRemove = false;
|
|
242
|
-
if (value === '' || value == null) {
|
|
243
|
-
const type = typeof el[key];
|
|
244
|
-
if (type === 'boolean') {
|
|
245
|
-
// e.g. <select multiple> compiles to { multiple: '' }
|
|
246
|
-
value = shared.includeBooleanAttr(value);
|
|
247
|
-
}
|
|
248
|
-
else if (value == null && type === 'string') {
|
|
249
|
-
// e.g. <div :id="null">
|
|
250
|
-
value = '';
|
|
251
|
-
needRemove = true;
|
|
252
|
-
}
|
|
253
|
-
else if (type === 'number') {
|
|
254
|
-
// e.g. <img :width="null">
|
|
255
|
-
value = 0;
|
|
256
|
-
needRemove = true;
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
// some properties perform value validation and throw,
|
|
260
|
-
// some properties has getter, no setter, will error in 'use strict'
|
|
261
|
-
// eg. <select :type="null"></select> <select :willValidate="null"></select>
|
|
262
|
-
try {
|
|
263
|
-
el[key] = value;
|
|
184
|
+
el[key] = value == null ? "" : value;
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
if (key === "value" && el.tagName !== "PROGRESS" && // custom elements may use _value internally
|
|
188
|
+
!el.tagName.includes("-")) {
|
|
189
|
+
el._value = value;
|
|
190
|
+
const newValue = value == null ? "" : value;
|
|
191
|
+
if (el.value !== newValue || // #4956: always set for OPTION elements because its value falls back to
|
|
192
|
+
// textContent if no value attribute is present. And setting .value for
|
|
193
|
+
// OPTION has no side effect
|
|
194
|
+
el.tagName === "OPTION") {
|
|
195
|
+
el.value = newValue;
|
|
264
196
|
}
|
|
265
|
-
|
|
197
|
+
if (value == null) {
|
|
198
|
+
el.removeAttribute(key);
|
|
266
199
|
}
|
|
267
|
-
|
|
200
|
+
return;
|
|
201
|
+
}
|
|
202
|
+
let needRemove = false;
|
|
203
|
+
if (value === "" || value == null) {
|
|
204
|
+
const type = typeof el[key];
|
|
205
|
+
if (type === "boolean") {
|
|
206
|
+
value = shared.includeBooleanAttr(value);
|
|
207
|
+
} else if (value == null && type === "string") {
|
|
208
|
+
value = "";
|
|
209
|
+
needRemove = true;
|
|
210
|
+
} else if (type === "number") {
|
|
211
|
+
value = 0;
|
|
212
|
+
needRemove = true;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
try {
|
|
216
|
+
el[key] = value;
|
|
217
|
+
} catch (e) {
|
|
218
|
+
}
|
|
219
|
+
needRemove && el.removeAttribute(key);
|
|
268
220
|
}
|
|
269
221
|
|
|
270
222
|
function addEventListener(el, event, handler, options) {
|
|
271
|
-
|
|
223
|
+
el.addEventListener(event, handler, options);
|
|
272
224
|
}
|
|
273
225
|
function removeEventListener(el, event, handler, options) {
|
|
274
|
-
|
|
226
|
+
el.removeEventListener(event, handler, options);
|
|
275
227
|
}
|
|
276
228
|
function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
else if (existingInvoker) {
|
|
292
|
-
// remove
|
|
293
|
-
removeEventListener(el, name, existingInvoker, options);
|
|
294
|
-
invokers[rawName] = undefined;
|
|
295
|
-
}
|
|
296
|
-
}
|
|
229
|
+
const invokers = el._vei || (el._vei = {});
|
|
230
|
+
const existingInvoker = invokers[rawName];
|
|
231
|
+
if (nextValue && existingInvoker) {
|
|
232
|
+
existingInvoker.value = nextValue;
|
|
233
|
+
} else {
|
|
234
|
+
const [name, options] = parseName(rawName);
|
|
235
|
+
if (nextValue) {
|
|
236
|
+
const invoker = invokers[rawName] = createInvoker(nextValue, instance);
|
|
237
|
+
addEventListener(el, name, invoker, options);
|
|
238
|
+
} else if (existingInvoker) {
|
|
239
|
+
removeEventListener(el, name, existingInvoker, options);
|
|
240
|
+
invokers[rawName] = void 0;
|
|
241
|
+
}
|
|
242
|
+
}
|
|
297
243
|
}
|
|
298
244
|
const optionsModifierRE = /(?:Once|Passive|Capture)$/;
|
|
299
245
|
function parseName(name) {
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
246
|
+
let options;
|
|
247
|
+
if (optionsModifierRE.test(name)) {
|
|
248
|
+
options = {};
|
|
249
|
+
let m;
|
|
250
|
+
while (m = name.match(optionsModifierRE)) {
|
|
251
|
+
name = name.slice(0, name.length - m[0].length);
|
|
252
|
+
options[m[0].toLowerCase()] = true;
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
const event = name[2] === ":" ? name.slice(3) : shared.hyphenate(name.slice(2));
|
|
256
|
+
return [event, options];
|
|
311
257
|
}
|
|
312
|
-
// To avoid the overhead of repeatedly calling Date.now(), we cache
|
|
313
|
-
// and use the same timestamp for all event listeners attached in the same tick.
|
|
314
258
|
let cachedNow = 0;
|
|
315
|
-
const p =
|
|
316
|
-
const getNow = () => cachedNow || (p.then(() =>
|
|
259
|
+
const p = /* @__PURE__ */ Promise.resolve();
|
|
260
|
+
const getNow = () => cachedNow || (p.then(() => cachedNow = 0), cachedNow = Date.now());
|
|
317
261
|
function createInvoker(initialValue, instance) {
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
else if (e._vts <= invoker.attached) {
|
|
335
|
-
return;
|
|
336
|
-
}
|
|
337
|
-
runtimeCore.callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5 /* ErrorCodes.NATIVE_EVENT_HANDLER */, [e]);
|
|
338
|
-
};
|
|
339
|
-
invoker.value = initialValue;
|
|
340
|
-
invoker.attached = getNow();
|
|
341
|
-
return invoker;
|
|
262
|
+
const invoker = (e) => {
|
|
263
|
+
if (!e._vts) {
|
|
264
|
+
e._vts = Date.now();
|
|
265
|
+
} else if (e._vts <= invoker.attached) {
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
268
|
+
runtimeCore.callWithAsyncErrorHandling(
|
|
269
|
+
patchStopImmediatePropagation(e, invoker.value),
|
|
270
|
+
instance,
|
|
271
|
+
5,
|
|
272
|
+
[e]
|
|
273
|
+
);
|
|
274
|
+
};
|
|
275
|
+
invoker.value = initialValue;
|
|
276
|
+
invoker.attached = getNow();
|
|
277
|
+
return invoker;
|
|
342
278
|
}
|
|
343
279
|
function patchStopImmediatePropagation(e, value) {
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
}
|
|
280
|
+
if (shared.isArray(value)) {
|
|
281
|
+
const originalStop = e.stopImmediatePropagation;
|
|
282
|
+
e.stopImmediatePropagation = () => {
|
|
283
|
+
originalStop.call(e);
|
|
284
|
+
e._stopped = true;
|
|
285
|
+
};
|
|
286
|
+
return value.map((fn) => (e2) => !e2._stopped && fn && fn(e2));
|
|
287
|
+
} else {
|
|
288
|
+
return value;
|
|
289
|
+
}
|
|
355
290
|
}
|
|
356
291
|
|
|
357
292
|
const nativeOnRE = /^on[a-z]/;
|
|
358
293
|
const patchProp = (el, key, prevValue, nextValue, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
}
|
|
386
|
-
else if (key === 'false-value') {
|
|
387
|
-
el._falseValue = nextValue;
|
|
388
|
-
}
|
|
389
|
-
patchAttr(el, key, nextValue, isSVG);
|
|
390
|
-
}
|
|
294
|
+
if (key === "class") {
|
|
295
|
+
patchClass(el, nextValue, isSVG);
|
|
296
|
+
} else if (key === "style") {
|
|
297
|
+
patchStyle(el, prevValue, nextValue);
|
|
298
|
+
} else if (shared.isOn(key)) {
|
|
299
|
+
if (!shared.isModelListener(key)) {
|
|
300
|
+
patchEvent(el, key, prevValue, nextValue, parentComponent);
|
|
301
|
+
}
|
|
302
|
+
} else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, nextValue, isSVG)) {
|
|
303
|
+
patchDOMProp(
|
|
304
|
+
el,
|
|
305
|
+
key,
|
|
306
|
+
nextValue,
|
|
307
|
+
prevChildren,
|
|
308
|
+
parentComponent,
|
|
309
|
+
parentSuspense,
|
|
310
|
+
unmountChildren
|
|
311
|
+
);
|
|
312
|
+
} else {
|
|
313
|
+
if (key === "true-value") {
|
|
314
|
+
el._trueValue = nextValue;
|
|
315
|
+
} else if (key === "false-value") {
|
|
316
|
+
el._falseValue = nextValue;
|
|
317
|
+
}
|
|
318
|
+
patchAttr(el, key, nextValue, isSVG);
|
|
319
|
+
}
|
|
391
320
|
};
|
|
392
321
|
function shouldSetAsProp(el, key, value, isSVG) {
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
}
|
|
419
|
-
// #1526 <input list> must be set as attribute
|
|
420
|
-
if (key === 'list' && el.tagName === 'INPUT') {
|
|
421
|
-
return false;
|
|
422
|
-
}
|
|
423
|
-
// #2766 <textarea type> must be set as attribute
|
|
424
|
-
if (key === 'type' && el.tagName === 'TEXTAREA') {
|
|
425
|
-
return false;
|
|
426
|
-
}
|
|
427
|
-
// native onclick with string value, must be set as attribute
|
|
428
|
-
if (nativeOnRE.test(key) && shared.isString(value)) {
|
|
429
|
-
return false;
|
|
430
|
-
}
|
|
431
|
-
return key in el;
|
|
322
|
+
if (isSVG) {
|
|
323
|
+
if (key === "innerHTML" || key === "textContent") {
|
|
324
|
+
return true;
|
|
325
|
+
}
|
|
326
|
+
if (key in el && nativeOnRE.test(key) && shared.isFunction(value)) {
|
|
327
|
+
return true;
|
|
328
|
+
}
|
|
329
|
+
return false;
|
|
330
|
+
}
|
|
331
|
+
if (key === "spellcheck" || key === "draggable" || key === "translate") {
|
|
332
|
+
return false;
|
|
333
|
+
}
|
|
334
|
+
if (key === "form") {
|
|
335
|
+
return false;
|
|
336
|
+
}
|
|
337
|
+
if (key === "list" && el.tagName === "INPUT") {
|
|
338
|
+
return false;
|
|
339
|
+
}
|
|
340
|
+
if (key === "type" && el.tagName === "TEXTAREA") {
|
|
341
|
+
return false;
|
|
342
|
+
}
|
|
343
|
+
if (nativeOnRE.test(key) && shared.isString(value)) {
|
|
344
|
+
return false;
|
|
345
|
+
}
|
|
346
|
+
return key in el;
|
|
432
347
|
}
|
|
433
348
|
|
|
434
|
-
function defineCustomElement(options,
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
349
|
+
function defineCustomElement(options, hydrate2) {
|
|
350
|
+
const Comp = runtimeCore.defineComponent(options);
|
|
351
|
+
class VueCustomElement extends VueElement {
|
|
352
|
+
constructor(initialProps) {
|
|
353
|
+
super(Comp, initialProps, hydrate2);
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
VueCustomElement.def = Comp;
|
|
357
|
+
return VueCustomElement;
|
|
443
358
|
}
|
|
444
|
-
const defineSSRCustomElement = (
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
});
|
|
359
|
+
const defineSSRCustomElement = (options) => {
|
|
360
|
+
return defineCustomElement(options, hydrate);
|
|
361
|
+
};
|
|
362
|
+
const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
|
|
363
|
+
};
|
|
450
364
|
class VueElement extends BaseClass {
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
/**
|
|
456
|
-
* @internal
|
|
457
|
-
*/
|
|
458
|
-
this._instance = null;
|
|
459
|
-
this._connected = false;
|
|
460
|
-
this._resolved = false;
|
|
461
|
-
this._numberProps = null;
|
|
462
|
-
if (this.shadowRoot && hydrate) {
|
|
463
|
-
hydrate(this._createVNode(), this.shadowRoot);
|
|
464
|
-
}
|
|
465
|
-
else {
|
|
466
|
-
this.attachShadow({ mode: 'open' });
|
|
467
|
-
if (!this._def.__asyncLoader) {
|
|
468
|
-
// for sync component defs we can immediately resolve props
|
|
469
|
-
this._resolveProps(this._def);
|
|
470
|
-
}
|
|
471
|
-
}
|
|
472
|
-
}
|
|
473
|
-
connectedCallback() {
|
|
474
|
-
this._connected = true;
|
|
475
|
-
if (!this._instance) {
|
|
476
|
-
if (this._resolved) {
|
|
477
|
-
this._update();
|
|
478
|
-
}
|
|
479
|
-
else {
|
|
480
|
-
this._resolveDef();
|
|
481
|
-
}
|
|
482
|
-
}
|
|
483
|
-
}
|
|
484
|
-
disconnectedCallback() {
|
|
485
|
-
this._connected = false;
|
|
486
|
-
runtimeCore.nextTick(() => {
|
|
487
|
-
if (!this._connected) {
|
|
488
|
-
render(null, this.shadowRoot);
|
|
489
|
-
this._instance = null;
|
|
490
|
-
}
|
|
491
|
-
});
|
|
492
|
-
}
|
|
493
|
-
/**
|
|
494
|
-
* resolve inner component definition (handle possible async component)
|
|
495
|
-
*/
|
|
496
|
-
_resolveDef() {
|
|
497
|
-
this._resolved = true;
|
|
498
|
-
// set initial attrs
|
|
499
|
-
for (let i = 0; i < this.attributes.length; i++) {
|
|
500
|
-
this._setAttr(this.attributes[i].name);
|
|
501
|
-
}
|
|
502
|
-
// watch future attr changes
|
|
503
|
-
new MutationObserver(mutations => {
|
|
504
|
-
for (const m of mutations) {
|
|
505
|
-
this._setAttr(m.attributeName);
|
|
506
|
-
}
|
|
507
|
-
}).observe(this, { attributes: true });
|
|
508
|
-
const resolve = (def, isAsync = false) => {
|
|
509
|
-
const { props, styles } = def;
|
|
510
|
-
// cast Number-type props set before resolve
|
|
511
|
-
let numberProps;
|
|
512
|
-
if (props && !shared.isArray(props)) {
|
|
513
|
-
for (const key in props) {
|
|
514
|
-
const opt = props[key];
|
|
515
|
-
if (opt === Number || (opt && opt.type === Number)) {
|
|
516
|
-
if (key in this._props) {
|
|
517
|
-
this._props[key] = shared.toNumber(this._props[key]);
|
|
518
|
-
}
|
|
519
|
-
(numberProps || (numberProps = Object.create(null)))[shared.camelize(key)] = true;
|
|
520
|
-
}
|
|
521
|
-
}
|
|
522
|
-
}
|
|
523
|
-
this._numberProps = numberProps;
|
|
524
|
-
if (isAsync) {
|
|
525
|
-
// defining getter/setters on prototype
|
|
526
|
-
// for sync defs, this already happened in the constructor
|
|
527
|
-
this._resolveProps(def);
|
|
528
|
-
}
|
|
529
|
-
// apply CSS
|
|
530
|
-
this._applyStyles(styles);
|
|
531
|
-
// initial render
|
|
532
|
-
this._update();
|
|
533
|
-
};
|
|
534
|
-
const asyncDef = this._def.__asyncLoader;
|
|
535
|
-
if (asyncDef) {
|
|
536
|
-
asyncDef().then(def => resolve(def, true));
|
|
537
|
-
}
|
|
538
|
-
else {
|
|
539
|
-
resolve(this._def);
|
|
540
|
-
}
|
|
541
|
-
}
|
|
542
|
-
_resolveProps(def) {
|
|
543
|
-
const { props } = def;
|
|
544
|
-
const declaredPropKeys = shared.isArray(props) ? props : Object.keys(props || {});
|
|
545
|
-
// check if there are props set pre-upgrade or connect
|
|
546
|
-
for (const key of Object.keys(this)) {
|
|
547
|
-
if (key[0] !== '_' && declaredPropKeys.includes(key)) {
|
|
548
|
-
this._setProp(key, this[key], true, false);
|
|
549
|
-
}
|
|
550
|
-
}
|
|
551
|
-
// defining getter/setters on prototype
|
|
552
|
-
for (const key of declaredPropKeys.map(shared.camelize)) {
|
|
553
|
-
Object.defineProperty(this, key, {
|
|
554
|
-
get() {
|
|
555
|
-
return this._getProp(key);
|
|
556
|
-
},
|
|
557
|
-
set(val) {
|
|
558
|
-
this._setProp(key, val);
|
|
559
|
-
}
|
|
560
|
-
});
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
_setAttr(key) {
|
|
564
|
-
let value = this.getAttribute(key);
|
|
565
|
-
const camelKey = shared.camelize(key);
|
|
566
|
-
if (this._numberProps && this._numberProps[camelKey]) {
|
|
567
|
-
value = shared.toNumber(value);
|
|
568
|
-
}
|
|
569
|
-
this._setProp(camelKey, value, false);
|
|
570
|
-
}
|
|
365
|
+
constructor(_def, _props = {}, hydrate2) {
|
|
366
|
+
super();
|
|
367
|
+
this._def = _def;
|
|
368
|
+
this._props = _props;
|
|
571
369
|
/**
|
|
572
370
|
* @internal
|
|
573
371
|
*/
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
372
|
+
this._instance = null;
|
|
373
|
+
this._connected = false;
|
|
374
|
+
this._resolved = false;
|
|
375
|
+
this._numberProps = null;
|
|
376
|
+
if (this.shadowRoot && hydrate2) {
|
|
377
|
+
hydrate2(this._createVNode(), this.shadowRoot);
|
|
378
|
+
} else {
|
|
379
|
+
this.attachShadow({ mode: "open" });
|
|
380
|
+
if (!this._def.__asyncLoader) {
|
|
381
|
+
this._resolveProps(this._def);
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
connectedCallback() {
|
|
386
|
+
this._connected = true;
|
|
387
|
+
if (!this._instance) {
|
|
388
|
+
if (this._resolved) {
|
|
389
|
+
this._update();
|
|
390
|
+
} else {
|
|
391
|
+
this._resolveDef();
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
disconnectedCallback() {
|
|
396
|
+
this._connected = false;
|
|
397
|
+
runtimeCore.nextTick(() => {
|
|
398
|
+
if (!this._connected) {
|
|
399
|
+
render(null, this.shadowRoot);
|
|
400
|
+
this._instance = null;
|
|
401
|
+
}
|
|
402
|
+
});
|
|
403
|
+
}
|
|
404
|
+
/**
|
|
405
|
+
* resolve inner component definition (handle possible async component)
|
|
406
|
+
*/
|
|
407
|
+
_resolveDef() {
|
|
408
|
+
this._resolved = true;
|
|
409
|
+
for (let i = 0; i < this.attributes.length; i++) {
|
|
410
|
+
this._setAttr(this.attributes[i].name);
|
|
411
|
+
}
|
|
412
|
+
new MutationObserver((mutations) => {
|
|
413
|
+
for (const m of mutations) {
|
|
414
|
+
this._setAttr(m.attributeName);
|
|
415
|
+
}
|
|
416
|
+
}).observe(this, { attributes: true });
|
|
417
|
+
const resolve = (def, isAsync = false) => {
|
|
418
|
+
const { props, styles } = def;
|
|
419
|
+
let numberProps;
|
|
420
|
+
if (props && !shared.isArray(props)) {
|
|
421
|
+
for (const key in props) {
|
|
422
|
+
const opt = props[key];
|
|
423
|
+
if (opt === Number || opt && opt.type === Number) {
|
|
424
|
+
if (key in this._props) {
|
|
425
|
+
this._props[key] = shared.toNumber(this._props[key]);
|
|
597
426
|
}
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
427
|
+
(numberProps || (numberProps = /* @__PURE__ */ Object.create(null)))[shared.camelize(key)] = true;
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
this._numberProps = numberProps;
|
|
432
|
+
if (isAsync) {
|
|
433
|
+
this._resolveProps(def);
|
|
434
|
+
}
|
|
435
|
+
this._applyStyles(styles);
|
|
436
|
+
this._update();
|
|
437
|
+
};
|
|
438
|
+
const asyncDef = this._def.__asyncLoader;
|
|
439
|
+
if (asyncDef) {
|
|
440
|
+
asyncDef().then((def) => resolve(def, true));
|
|
441
|
+
} else {
|
|
442
|
+
resolve(this._def);
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
_resolveProps(def) {
|
|
446
|
+
const { props } = def;
|
|
447
|
+
const declaredPropKeys = shared.isArray(props) ? props : Object.keys(props || {});
|
|
448
|
+
for (const key of Object.keys(this)) {
|
|
449
|
+
if (key[0] !== "_" && declaredPropKeys.includes(key)) {
|
|
450
|
+
this._setProp(key, this[key], true, false);
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
for (const key of declaredPropKeys.map(shared.camelize)) {
|
|
454
|
+
Object.defineProperty(this, key, {
|
|
455
|
+
get() {
|
|
456
|
+
return this._getProp(key);
|
|
457
|
+
},
|
|
458
|
+
set(val) {
|
|
459
|
+
this._setProp(key, val);
|
|
460
|
+
}
|
|
461
|
+
});
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
_setAttr(key) {
|
|
465
|
+
let value = this.getAttribute(key);
|
|
466
|
+
const camelKey = shared.camelize(key);
|
|
467
|
+
if (this._numberProps && this._numberProps[camelKey]) {
|
|
468
|
+
value = shared.toNumber(value);
|
|
469
|
+
}
|
|
470
|
+
this._setProp(camelKey, value, false);
|
|
471
|
+
}
|
|
472
|
+
/**
|
|
473
|
+
* @internal
|
|
474
|
+
*/
|
|
475
|
+
_getProp(key) {
|
|
476
|
+
return this._props[key];
|
|
477
|
+
}
|
|
478
|
+
/**
|
|
479
|
+
* @internal
|
|
480
|
+
*/
|
|
481
|
+
_setProp(key, val, shouldReflect = true, shouldUpdate = true) {
|
|
482
|
+
if (val !== this._props[key]) {
|
|
483
|
+
this._props[key] = val;
|
|
484
|
+
if (shouldUpdate && this._instance) {
|
|
485
|
+
this._update();
|
|
486
|
+
}
|
|
487
|
+
if (shouldReflect) {
|
|
488
|
+
if (val === true) {
|
|
489
|
+
this.setAttribute(shared.hyphenate(key), "");
|
|
490
|
+
} else if (typeof val === "string" || typeof val === "number") {
|
|
491
|
+
this.setAttribute(shared.hyphenate(key), val + "");
|
|
492
|
+
} else if (!val) {
|
|
493
|
+
this.removeAttribute(shared.hyphenate(key));
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
_update() {
|
|
499
|
+
render(this._createVNode(), this.shadowRoot);
|
|
500
|
+
}
|
|
501
|
+
_createVNode() {
|
|
502
|
+
const vnode = runtimeCore.createVNode(this._def, shared.extend({}, this._props));
|
|
503
|
+
if (!this._instance) {
|
|
504
|
+
vnode.ce = (instance) => {
|
|
505
|
+
this._instance = instance;
|
|
506
|
+
instance.isCE = true;
|
|
507
|
+
const dispatch = (event, args) => {
|
|
508
|
+
this.dispatchEvent(
|
|
509
|
+
new CustomEvent(event, {
|
|
510
|
+
detail: args
|
|
511
|
+
})
|
|
512
|
+
);
|
|
513
|
+
};
|
|
514
|
+
instance.emit = (event, ...args) => {
|
|
515
|
+
dispatch(event, args);
|
|
516
|
+
if (shared.hyphenate(event) !== event) {
|
|
517
|
+
dispatch(shared.hyphenate(event), args);
|
|
518
|
+
}
|
|
519
|
+
};
|
|
520
|
+
let parent = this;
|
|
521
|
+
while (parent = parent && (parent.parentNode || parent.host)) {
|
|
522
|
+
if (parent instanceof VueElement) {
|
|
523
|
+
instance.parent = parent._instance;
|
|
524
|
+
instance.provides = parent._instance.provides;
|
|
525
|
+
break;
|
|
526
|
+
}
|
|
527
|
+
}
|
|
528
|
+
};
|
|
529
|
+
}
|
|
530
|
+
return vnode;
|
|
531
|
+
}
|
|
532
|
+
_applyStyles(styles) {
|
|
533
|
+
if (styles) {
|
|
534
|
+
styles.forEach((css) => {
|
|
535
|
+
const s = document.createElement("style");
|
|
536
|
+
s.textContent = css;
|
|
537
|
+
this.shadowRoot.appendChild(s);
|
|
538
|
+
});
|
|
539
|
+
}
|
|
540
|
+
}
|
|
646
541
|
}
|
|
647
542
|
|
|
648
|
-
function useCssModule(name =
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
}
|
|
543
|
+
function useCssModule(name = "$style") {
|
|
544
|
+
{
|
|
545
|
+
const instance = runtimeCore.getCurrentInstance();
|
|
546
|
+
if (!instance) {
|
|
547
|
+
return shared.EMPTY_OBJ;
|
|
548
|
+
}
|
|
549
|
+
const modules = instance.type.__cssModules;
|
|
550
|
+
if (!modules) {
|
|
551
|
+
return shared.EMPTY_OBJ;
|
|
552
|
+
}
|
|
553
|
+
const mod = modules[name];
|
|
554
|
+
if (!mod) {
|
|
555
|
+
return shared.EMPTY_OBJ;
|
|
556
|
+
}
|
|
557
|
+
return mod;
|
|
558
|
+
}
|
|
665
559
|
}
|
|
666
560
|
|
|
667
|
-
/**
|
|
668
|
-
* Runtime helper for SFC's CSS variable injection feature.
|
|
669
|
-
* @private
|
|
670
|
-
*/
|
|
671
561
|
function useCssVars(getter) {
|
|
672
|
-
|
|
562
|
+
return;
|
|
673
563
|
}
|
|
674
564
|
|
|
675
|
-
const TRANSITION =
|
|
676
|
-
const ANIMATION =
|
|
677
|
-
// DOM Transition is a higher-order-component based on the platform-agnostic
|
|
678
|
-
// base Transition component, with DOM-specific logic.
|
|
565
|
+
const TRANSITION = "transition";
|
|
566
|
+
const ANIMATION = "animation";
|
|
679
567
|
const Transition = (props, { slots }) => runtimeCore.h(runtimeCore.BaseTransition, resolveTransitionProps(props), slots);
|
|
680
|
-
Transition.displayName =
|
|
568
|
+
Transition.displayName = "Transition";
|
|
681
569
|
const DOMTransitionPropsValidators = {
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
570
|
+
name: String,
|
|
571
|
+
type: String,
|
|
572
|
+
css: {
|
|
573
|
+
type: Boolean,
|
|
574
|
+
default: true
|
|
575
|
+
},
|
|
576
|
+
duration: [String, Number, Object],
|
|
577
|
+
enterFromClass: String,
|
|
578
|
+
enterActiveClass: String,
|
|
579
|
+
enterToClass: String,
|
|
580
|
+
appearFromClass: String,
|
|
581
|
+
appearActiveClass: String,
|
|
582
|
+
appearToClass: String,
|
|
583
|
+
leaveFromClass: String,
|
|
584
|
+
leaveActiveClass: String,
|
|
585
|
+
leaveToClass: String
|
|
698
586
|
};
|
|
699
|
-
const TransitionPropsValidators =
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
*/
|
|
587
|
+
const TransitionPropsValidators = Transition.props = /* @__PURE__ */ shared.extend(
|
|
588
|
+
{},
|
|
589
|
+
runtimeCore.BaseTransitionPropsValidators,
|
|
590
|
+
DOMTransitionPropsValidators
|
|
591
|
+
);
|
|
705
592
|
const callHook = (hook, args = []) => {
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
}
|
|
593
|
+
if (shared.isArray(hook)) {
|
|
594
|
+
hook.forEach((h2) => h2(...args));
|
|
595
|
+
} else if (hook) {
|
|
596
|
+
hook(...args);
|
|
597
|
+
}
|
|
712
598
|
};
|
|
713
|
-
/**
|
|
714
|
-
* Check if a hook expects a callback (2nd arg), which means the user
|
|
715
|
-
* intends to explicitly control the end of the transition.
|
|
716
|
-
*/
|
|
717
599
|
const hasExplicitCallback = (hook) => {
|
|
718
|
-
|
|
719
|
-
? shared.isArray(hook)
|
|
720
|
-
? hook.some(h => h.length > 1)
|
|
721
|
-
: hook.length > 1
|
|
722
|
-
: false;
|
|
600
|
+
return hook ? shared.isArray(hook) ? hook.some((h2) => h2.length > 1) : hook.length > 1 : false;
|
|
723
601
|
};
|
|
724
602
|
function resolveTransitionProps(rawProps) {
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
603
|
+
const baseProps = {};
|
|
604
|
+
for (const key in rawProps) {
|
|
605
|
+
if (!(key in DOMTransitionPropsValidators)) {
|
|
606
|
+
baseProps[key] = rawProps[key];
|
|
607
|
+
}
|
|
608
|
+
}
|
|
609
|
+
if (rawProps.css === false) {
|
|
610
|
+
return baseProps;
|
|
611
|
+
}
|
|
612
|
+
const {
|
|
613
|
+
name = "v",
|
|
614
|
+
type,
|
|
615
|
+
duration,
|
|
616
|
+
enterFromClass = `${name}-enter-from`,
|
|
617
|
+
enterActiveClass = `${name}-enter-active`,
|
|
618
|
+
enterToClass = `${name}-enter-to`,
|
|
619
|
+
appearFromClass = enterFromClass,
|
|
620
|
+
appearActiveClass = enterActiveClass,
|
|
621
|
+
appearToClass = enterToClass,
|
|
622
|
+
leaveFromClass = `${name}-leave-from`,
|
|
623
|
+
leaveActiveClass = `${name}-leave-active`,
|
|
624
|
+
leaveToClass = `${name}-leave-to`
|
|
625
|
+
} = rawProps;
|
|
626
|
+
const durations = normalizeDuration(duration);
|
|
627
|
+
const enterDuration = durations && durations[0];
|
|
628
|
+
const leaveDuration = durations && durations[1];
|
|
629
|
+
const {
|
|
630
|
+
onBeforeEnter,
|
|
631
|
+
onEnter,
|
|
632
|
+
onEnterCancelled,
|
|
633
|
+
onLeave,
|
|
634
|
+
onLeaveCancelled,
|
|
635
|
+
onBeforeAppear = onBeforeEnter,
|
|
636
|
+
onAppear = onEnter,
|
|
637
|
+
onAppearCancelled = onEnterCancelled
|
|
638
|
+
} = baseProps;
|
|
639
|
+
const finishEnter = (el, isAppear, done) => {
|
|
640
|
+
removeTransitionClass(el, isAppear ? appearToClass : enterToClass);
|
|
641
|
+
removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
|
|
642
|
+
done && done();
|
|
643
|
+
};
|
|
644
|
+
const finishLeave = (el, done) => {
|
|
645
|
+
el._isLeaving = false;
|
|
646
|
+
removeTransitionClass(el, leaveFromClass);
|
|
647
|
+
removeTransitionClass(el, leaveToClass);
|
|
648
|
+
removeTransitionClass(el, leaveActiveClass);
|
|
649
|
+
done && done();
|
|
650
|
+
};
|
|
651
|
+
const makeEnterHook = (isAppear) => {
|
|
652
|
+
return (el, done) => {
|
|
653
|
+
const hook = isAppear ? onAppear : onEnter;
|
|
654
|
+
const resolve = () => finishEnter(el, isAppear, done);
|
|
655
|
+
callHook(hook, [el, resolve]);
|
|
656
|
+
nextFrame(() => {
|
|
657
|
+
removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);
|
|
658
|
+
addTransitionClass(el, isAppear ? appearToClass : enterToClass);
|
|
659
|
+
if (!hasExplicitCallback(hook)) {
|
|
660
|
+
whenTransitionEnds(el, type, enterDuration, resolve);
|
|
661
|
+
}
|
|
662
|
+
});
|
|
743
663
|
};
|
|
744
|
-
|
|
745
|
-
|
|
664
|
+
};
|
|
665
|
+
return shared.extend(baseProps, {
|
|
666
|
+
onBeforeEnter(el) {
|
|
667
|
+
callHook(onBeforeEnter, [el]);
|
|
668
|
+
addTransitionClass(el, enterFromClass);
|
|
669
|
+
addTransitionClass(el, enterActiveClass);
|
|
670
|
+
},
|
|
671
|
+
onBeforeAppear(el) {
|
|
672
|
+
callHook(onBeforeAppear, [el]);
|
|
673
|
+
addTransitionClass(el, appearFromClass);
|
|
674
|
+
addTransitionClass(el, appearActiveClass);
|
|
675
|
+
},
|
|
676
|
+
onEnter: makeEnterHook(false),
|
|
677
|
+
onAppear: makeEnterHook(true),
|
|
678
|
+
onLeave(el, done) {
|
|
679
|
+
el._isLeaving = true;
|
|
680
|
+
const resolve = () => finishLeave(el, done);
|
|
681
|
+
addTransitionClass(el, leaveFromClass);
|
|
682
|
+
forceReflow();
|
|
683
|
+
addTransitionClass(el, leaveActiveClass);
|
|
684
|
+
nextFrame(() => {
|
|
685
|
+
if (!el._isLeaving) {
|
|
686
|
+
return;
|
|
687
|
+
}
|
|
746
688
|
removeTransitionClass(el, leaveFromClass);
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
};
|
|
751
|
-
const makeEnterHook = (isAppear) => {
|
|
752
|
-
return (el, done) => {
|
|
753
|
-
const hook = isAppear ? onAppear : onEnter;
|
|
754
|
-
const resolve = () => finishEnter(el, isAppear, done);
|
|
755
|
-
callHook(hook, [el, resolve]);
|
|
756
|
-
nextFrame(() => {
|
|
757
|
-
removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);
|
|
758
|
-
addTransitionClass(el, isAppear ? appearToClass : enterToClass);
|
|
759
|
-
if (!hasExplicitCallback(hook)) {
|
|
760
|
-
whenTransitionEnds(el, type, enterDuration, resolve);
|
|
761
|
-
}
|
|
762
|
-
});
|
|
763
|
-
};
|
|
764
|
-
};
|
|
765
|
-
return shared.extend(baseProps, {
|
|
766
|
-
onBeforeEnter(el) {
|
|
767
|
-
callHook(onBeforeEnter, [el]);
|
|
768
|
-
addTransitionClass(el, enterFromClass);
|
|
769
|
-
addTransitionClass(el, enterActiveClass);
|
|
770
|
-
},
|
|
771
|
-
onBeforeAppear(el) {
|
|
772
|
-
callHook(onBeforeAppear, [el]);
|
|
773
|
-
addTransitionClass(el, appearFromClass);
|
|
774
|
-
addTransitionClass(el, appearActiveClass);
|
|
775
|
-
},
|
|
776
|
-
onEnter: makeEnterHook(false),
|
|
777
|
-
onAppear: makeEnterHook(true),
|
|
778
|
-
onLeave(el, done) {
|
|
779
|
-
el._isLeaving = true;
|
|
780
|
-
const resolve = () => finishLeave(el, done);
|
|
781
|
-
addTransitionClass(el, leaveFromClass);
|
|
782
|
-
// force reflow so *-leave-from classes immediately take effect (#2593)
|
|
783
|
-
forceReflow();
|
|
784
|
-
addTransitionClass(el, leaveActiveClass);
|
|
785
|
-
nextFrame(() => {
|
|
786
|
-
if (!el._isLeaving) {
|
|
787
|
-
// cancelled
|
|
788
|
-
return;
|
|
789
|
-
}
|
|
790
|
-
removeTransitionClass(el, leaveFromClass);
|
|
791
|
-
addTransitionClass(el, leaveToClass);
|
|
792
|
-
if (!hasExplicitCallback(onLeave)) {
|
|
793
|
-
whenTransitionEnds(el, type, leaveDuration, resolve);
|
|
794
|
-
}
|
|
795
|
-
});
|
|
796
|
-
callHook(onLeave, [el, resolve]);
|
|
797
|
-
},
|
|
798
|
-
onEnterCancelled(el) {
|
|
799
|
-
finishEnter(el, false);
|
|
800
|
-
callHook(onEnterCancelled, [el]);
|
|
801
|
-
},
|
|
802
|
-
onAppearCancelled(el) {
|
|
803
|
-
finishEnter(el, true);
|
|
804
|
-
callHook(onAppearCancelled, [el]);
|
|
805
|
-
},
|
|
806
|
-
onLeaveCancelled(el) {
|
|
807
|
-
finishLeave(el);
|
|
808
|
-
callHook(onLeaveCancelled, [el]);
|
|
689
|
+
addTransitionClass(el, leaveToClass);
|
|
690
|
+
if (!hasExplicitCallback(onLeave)) {
|
|
691
|
+
whenTransitionEnds(el, type, leaveDuration, resolve);
|
|
809
692
|
}
|
|
810
|
-
|
|
693
|
+
});
|
|
694
|
+
callHook(onLeave, [el, resolve]);
|
|
695
|
+
},
|
|
696
|
+
onEnterCancelled(el) {
|
|
697
|
+
finishEnter(el, false);
|
|
698
|
+
callHook(onEnterCancelled, [el]);
|
|
699
|
+
},
|
|
700
|
+
onAppearCancelled(el) {
|
|
701
|
+
finishEnter(el, true);
|
|
702
|
+
callHook(onAppearCancelled, [el]);
|
|
703
|
+
},
|
|
704
|
+
onLeaveCancelled(el) {
|
|
705
|
+
finishLeave(el);
|
|
706
|
+
callHook(onLeaveCancelled, [el]);
|
|
707
|
+
}
|
|
708
|
+
});
|
|
811
709
|
}
|
|
812
710
|
function normalizeDuration(duration) {
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
return [n, n];
|
|
822
|
-
}
|
|
711
|
+
if (duration == null) {
|
|
712
|
+
return null;
|
|
713
|
+
} else if (shared.isObject(duration)) {
|
|
714
|
+
return [NumberOf(duration.enter), NumberOf(duration.leave)];
|
|
715
|
+
} else {
|
|
716
|
+
const n = NumberOf(duration);
|
|
717
|
+
return [n, n];
|
|
718
|
+
}
|
|
823
719
|
}
|
|
824
720
|
function NumberOf(val) {
|
|
825
|
-
|
|
826
|
-
|
|
721
|
+
const res = shared.toNumber(val);
|
|
722
|
+
return res;
|
|
827
723
|
}
|
|
828
724
|
function addTransitionClass(el, cls) {
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
(el._vtc = new Set())).add(cls);
|
|
725
|
+
cls.split(/\s+/).forEach((c) => c && el.classList.add(c));
|
|
726
|
+
(el._vtc || (el._vtc = /* @__PURE__ */ new Set())).add(cls);
|
|
832
727
|
}
|
|
833
728
|
function removeTransitionClass(el, cls) {
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
729
|
+
cls.split(/\s+/).forEach((c) => c && el.classList.remove(c));
|
|
730
|
+
const { _vtc } = el;
|
|
731
|
+
if (_vtc) {
|
|
732
|
+
_vtc.delete(cls);
|
|
733
|
+
if (!_vtc.size) {
|
|
734
|
+
el._vtc = void 0;
|
|
735
|
+
}
|
|
736
|
+
}
|
|
842
737
|
}
|
|
843
738
|
function nextFrame(cb) {
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
739
|
+
requestAnimationFrame(() => {
|
|
740
|
+
requestAnimationFrame(cb);
|
|
741
|
+
});
|
|
847
742
|
}
|
|
848
743
|
let endId = 0;
|
|
849
744
|
function whenTransitionEnds(el, expectedType, explicitTimeout, resolve) {
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
745
|
+
const id = el._endId = ++endId;
|
|
746
|
+
const resolveIfNotStale = () => {
|
|
747
|
+
if (id === el._endId) {
|
|
748
|
+
resolve();
|
|
749
|
+
}
|
|
750
|
+
};
|
|
751
|
+
if (explicitTimeout) {
|
|
752
|
+
return setTimeout(resolveIfNotStale, explicitTimeout);
|
|
753
|
+
}
|
|
754
|
+
const { type, timeout, propCount } = getTransitionInfo(el, expectedType);
|
|
755
|
+
if (!type) {
|
|
756
|
+
return resolve();
|
|
757
|
+
}
|
|
758
|
+
const endEvent = type + "end";
|
|
759
|
+
let ended = 0;
|
|
760
|
+
const end = () => {
|
|
761
|
+
el.removeEventListener(endEvent, onEnd);
|
|
762
|
+
resolveIfNotStale();
|
|
763
|
+
};
|
|
764
|
+
const onEnd = (e) => {
|
|
765
|
+
if (e.target === el && ++ended >= propCount) {
|
|
766
|
+
end();
|
|
767
|
+
}
|
|
768
|
+
};
|
|
769
|
+
setTimeout(() => {
|
|
770
|
+
if (ended < propCount) {
|
|
771
|
+
end();
|
|
772
|
+
}
|
|
773
|
+
}, timeout + 1);
|
|
774
|
+
el.addEventListener(endEvent, onEnd);
|
|
880
775
|
}
|
|
881
776
|
function getTransitionInfo(el, expectedType) {
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
? transitionDurations.length
|
|
920
|
-
: animationDurations.length
|
|
921
|
-
: 0;
|
|
922
|
-
}
|
|
923
|
-
const hasTransform = type === TRANSITION &&
|
|
924
|
-
/\b(transform|all)(,|$)/.test(getStyleProperties(`${TRANSITION}Property`).toString());
|
|
925
|
-
return {
|
|
926
|
-
type,
|
|
927
|
-
timeout,
|
|
928
|
-
propCount,
|
|
929
|
-
hasTransform
|
|
930
|
-
};
|
|
777
|
+
const styles = window.getComputedStyle(el);
|
|
778
|
+
const getStyleProperties = (key) => (styles[key] || "").split(", ");
|
|
779
|
+
const transitionDelays = getStyleProperties(`${TRANSITION}Delay`);
|
|
780
|
+
const transitionDurations = getStyleProperties(`${TRANSITION}Duration`);
|
|
781
|
+
const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
|
|
782
|
+
const animationDelays = getStyleProperties(`${ANIMATION}Delay`);
|
|
783
|
+
const animationDurations = getStyleProperties(`${ANIMATION}Duration`);
|
|
784
|
+
const animationTimeout = getTimeout(animationDelays, animationDurations);
|
|
785
|
+
let type = null;
|
|
786
|
+
let timeout = 0;
|
|
787
|
+
let propCount = 0;
|
|
788
|
+
if (expectedType === TRANSITION) {
|
|
789
|
+
if (transitionTimeout > 0) {
|
|
790
|
+
type = TRANSITION;
|
|
791
|
+
timeout = transitionTimeout;
|
|
792
|
+
propCount = transitionDurations.length;
|
|
793
|
+
}
|
|
794
|
+
} else if (expectedType === ANIMATION) {
|
|
795
|
+
if (animationTimeout > 0) {
|
|
796
|
+
type = ANIMATION;
|
|
797
|
+
timeout = animationTimeout;
|
|
798
|
+
propCount = animationDurations.length;
|
|
799
|
+
}
|
|
800
|
+
} else {
|
|
801
|
+
timeout = Math.max(transitionTimeout, animationTimeout);
|
|
802
|
+
type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION : ANIMATION : null;
|
|
803
|
+
propCount = type ? type === TRANSITION ? transitionDurations.length : animationDurations.length : 0;
|
|
804
|
+
}
|
|
805
|
+
const hasTransform = type === TRANSITION && /\b(transform|all)(,|$)/.test(
|
|
806
|
+
getStyleProperties(`${TRANSITION}Property`).toString()
|
|
807
|
+
);
|
|
808
|
+
return {
|
|
809
|
+
type,
|
|
810
|
+
timeout,
|
|
811
|
+
propCount,
|
|
812
|
+
hasTransform
|
|
813
|
+
};
|
|
931
814
|
}
|
|
932
815
|
function getTimeout(delays, durations) {
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
816
|
+
while (delays.length < durations.length) {
|
|
817
|
+
delays = delays.concat(delays);
|
|
818
|
+
}
|
|
819
|
+
return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));
|
|
937
820
|
}
|
|
938
|
-
// Old versions of Chromium (below 61.0.3163.100) formats floating pointer
|
|
939
|
-
// numbers in a locale-dependent way, using a comma instead of a dot.
|
|
940
|
-
// If comma is not replaced with a dot, the input will be rounded down
|
|
941
|
-
// (i.e. acting as a floor function) causing unexpected behaviors
|
|
942
821
|
function toMs(s) {
|
|
943
|
-
|
|
822
|
+
return Number(s.slice(0, -1).replace(",", ".")) * 1e3;
|
|
944
823
|
}
|
|
945
|
-
// synchronously force layout to put elements into a certain state
|
|
946
824
|
function forceReflow() {
|
|
947
|
-
|
|
825
|
+
return document.body.offsetHeight;
|
|
948
826
|
}
|
|
949
827
|
|
|
950
|
-
const positionMap = new WeakMap();
|
|
951
|
-
const newPositionMap = new WeakMap();
|
|
828
|
+
const positionMap = /* @__PURE__ */ new WeakMap();
|
|
829
|
+
const newPositionMap = /* @__PURE__ */ new WeakMap();
|
|
952
830
|
const TransitionGroupImpl = {
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
});
|
|
994
|
-
el.addEventListener('transitionend', cb);
|
|
995
|
-
});
|
|
996
|
-
});
|
|
997
|
-
return () => {
|
|
998
|
-
const rawProps = runtimeCore.toRaw(props);
|
|
999
|
-
const cssTransitionProps = resolveTransitionProps(rawProps);
|
|
1000
|
-
let tag = rawProps.tag || runtimeCore.Fragment;
|
|
1001
|
-
prevChildren = children;
|
|
1002
|
-
children = slots.default ? runtimeCore.getTransitionRawChildren(slots.default()) : [];
|
|
1003
|
-
for (let i = 0; i < children.length; i++) {
|
|
1004
|
-
const child = children[i];
|
|
1005
|
-
if (child.key != null) {
|
|
1006
|
-
runtimeCore.setTransitionHooks(child, runtimeCore.resolveTransitionHooks(child, cssTransitionProps, state, instance));
|
|
1007
|
-
}
|
|
1008
|
-
}
|
|
1009
|
-
if (prevChildren) {
|
|
1010
|
-
for (let i = 0; i < prevChildren.length; i++) {
|
|
1011
|
-
const child = prevChildren[i];
|
|
1012
|
-
runtimeCore.setTransitionHooks(child, runtimeCore.resolveTransitionHooks(child, cssTransitionProps, state, instance));
|
|
1013
|
-
positionMap.set(child, child.el.getBoundingClientRect());
|
|
1014
|
-
}
|
|
1015
|
-
}
|
|
1016
|
-
return runtimeCore.createVNode(tag, null, children);
|
|
831
|
+
name: "TransitionGroup",
|
|
832
|
+
props: /* @__PURE__ */ shared.extend({}, TransitionPropsValidators, {
|
|
833
|
+
tag: String,
|
|
834
|
+
moveClass: String
|
|
835
|
+
}),
|
|
836
|
+
setup(props, { slots }) {
|
|
837
|
+
const instance = runtimeCore.getCurrentInstance();
|
|
838
|
+
const state = runtimeCore.useTransitionState();
|
|
839
|
+
let prevChildren;
|
|
840
|
+
let children;
|
|
841
|
+
runtimeCore.onUpdated(() => {
|
|
842
|
+
if (!prevChildren.length) {
|
|
843
|
+
return;
|
|
844
|
+
}
|
|
845
|
+
const moveClass = props.moveClass || `${props.name || "v"}-move`;
|
|
846
|
+
if (!hasCSSTransform(
|
|
847
|
+
prevChildren[0].el,
|
|
848
|
+
instance.vnode.el,
|
|
849
|
+
moveClass
|
|
850
|
+
)) {
|
|
851
|
+
return;
|
|
852
|
+
}
|
|
853
|
+
prevChildren.forEach(callPendingCbs);
|
|
854
|
+
prevChildren.forEach(recordPosition);
|
|
855
|
+
const movedChildren = prevChildren.filter(applyTranslation);
|
|
856
|
+
forceReflow();
|
|
857
|
+
movedChildren.forEach((c) => {
|
|
858
|
+
const el = c.el;
|
|
859
|
+
const style = el.style;
|
|
860
|
+
addTransitionClass(el, moveClass);
|
|
861
|
+
style.transform = style.webkitTransform = style.transitionDuration = "";
|
|
862
|
+
const cb = el._moveCb = (e) => {
|
|
863
|
+
if (e && e.target !== el) {
|
|
864
|
+
return;
|
|
865
|
+
}
|
|
866
|
+
if (!e || /transform$/.test(e.propertyName)) {
|
|
867
|
+
el.removeEventListener("transitionend", cb);
|
|
868
|
+
el._moveCb = null;
|
|
869
|
+
removeTransitionClass(el, moveClass);
|
|
870
|
+
}
|
|
1017
871
|
};
|
|
1018
|
-
|
|
872
|
+
el.addEventListener("transitionend", cb);
|
|
873
|
+
});
|
|
874
|
+
});
|
|
875
|
+
return () => {
|
|
876
|
+
const rawProps = runtimeCore.toRaw(props);
|
|
877
|
+
const cssTransitionProps = resolveTransitionProps(rawProps);
|
|
878
|
+
let tag = rawProps.tag || runtimeCore.Fragment;
|
|
879
|
+
prevChildren = children;
|
|
880
|
+
children = slots.default ? runtimeCore.getTransitionRawChildren(slots.default()) : [];
|
|
881
|
+
for (let i = 0; i < children.length; i++) {
|
|
882
|
+
const child = children[i];
|
|
883
|
+
if (child.key != null) {
|
|
884
|
+
runtimeCore.setTransitionHooks(
|
|
885
|
+
child,
|
|
886
|
+
runtimeCore.resolveTransitionHooks(child, cssTransitionProps, state, instance)
|
|
887
|
+
);
|
|
888
|
+
}
|
|
889
|
+
}
|
|
890
|
+
if (prevChildren) {
|
|
891
|
+
for (let i = 0; i < prevChildren.length; i++) {
|
|
892
|
+
const child = prevChildren[i];
|
|
893
|
+
runtimeCore.setTransitionHooks(
|
|
894
|
+
child,
|
|
895
|
+
runtimeCore.resolveTransitionHooks(child, cssTransitionProps, state, instance)
|
|
896
|
+
);
|
|
897
|
+
positionMap.set(child, child.el.getBoundingClientRect());
|
|
898
|
+
}
|
|
899
|
+
}
|
|
900
|
+
return runtimeCore.createVNode(tag, null, children);
|
|
901
|
+
};
|
|
902
|
+
}
|
|
1019
903
|
};
|
|
1020
|
-
/**
|
|
1021
|
-
* TransitionGroup does not support "mode" so we need to remove it from the
|
|
1022
|
-
* props declarations, but direct delete operation is considered a side effect
|
|
1023
|
-
* and will make the entire transition feature non-tree-shakeable, so we do it
|
|
1024
|
-
* in a function and mark the function's invocation as pure.
|
|
1025
|
-
*/
|
|
1026
904
|
const removeMode = (props) => delete props.mode;
|
|
1027
|
-
|
|
905
|
+
/* @__PURE__ */ removeMode(TransitionGroupImpl.props);
|
|
1028
906
|
const TransitionGroup = TransitionGroupImpl;
|
|
1029
907
|
function callPendingCbs(c) {
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
908
|
+
const el = c.el;
|
|
909
|
+
if (el._moveCb) {
|
|
910
|
+
el._moveCb();
|
|
911
|
+
}
|
|
912
|
+
if (el._enterCb) {
|
|
913
|
+
el._enterCb();
|
|
914
|
+
}
|
|
1037
915
|
}
|
|
1038
916
|
function recordPosition(c) {
|
|
1039
|
-
|
|
917
|
+
newPositionMap.set(c, c.el.getBoundingClientRect());
|
|
1040
918
|
}
|
|
1041
919
|
function applyTranslation(c) {
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
920
|
+
const oldPos = positionMap.get(c);
|
|
921
|
+
const newPos = newPositionMap.get(c);
|
|
922
|
+
const dx = oldPos.left - newPos.left;
|
|
923
|
+
const dy = oldPos.top - newPos.top;
|
|
924
|
+
if (dx || dy) {
|
|
925
|
+
const s = c.el.style;
|
|
926
|
+
s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`;
|
|
927
|
+
s.transitionDuration = "0s";
|
|
928
|
+
return c;
|
|
929
|
+
}
|
|
1052
930
|
}
|
|
1053
931
|
function hasCSSTransform(el, root, moveClass) {
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
const container = (root.nodeType === 1 ? root : root.parentNode);
|
|
1068
|
-
container.appendChild(clone);
|
|
1069
|
-
const { hasTransform } = getTransitionInfo(clone);
|
|
1070
|
-
container.removeChild(clone);
|
|
1071
|
-
return hasTransform;
|
|
932
|
+
const clone = el.cloneNode();
|
|
933
|
+
if (el._vtc) {
|
|
934
|
+
el._vtc.forEach((cls) => {
|
|
935
|
+
cls.split(/\s+/).forEach((c) => c && clone.classList.remove(c));
|
|
936
|
+
});
|
|
937
|
+
}
|
|
938
|
+
moveClass.split(/\s+/).forEach((c) => c && clone.classList.add(c));
|
|
939
|
+
clone.style.display = "none";
|
|
940
|
+
const container = root.nodeType === 1 ? root : root.parentNode;
|
|
941
|
+
container.appendChild(clone);
|
|
942
|
+
const { hasTransform } = getTransitionInfo(clone);
|
|
943
|
+
container.removeChild(clone);
|
|
944
|
+
return hasTransform;
|
|
1072
945
|
}
|
|
1073
946
|
|
|
1074
947
|
const getModelAssigner = (vnode) => {
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
return shared.isArray(fn) ? value => shared.invokeArrayFns(fn, value) : fn;
|
|
948
|
+
const fn = vnode.props["onUpdate:modelValue"] || false;
|
|
949
|
+
return shared.isArray(fn) ? (value) => shared.invokeArrayFns(fn, value) : fn;
|
|
1078
950
|
};
|
|
1079
951
|
function onCompositionStart(e) {
|
|
1080
|
-
|
|
952
|
+
e.target.composing = true;
|
|
1081
953
|
}
|
|
1082
954
|
function onCompositionEnd(e) {
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
955
|
+
const target = e.target;
|
|
956
|
+
if (target.composing) {
|
|
957
|
+
target.composing = false;
|
|
958
|
+
target.dispatchEvent(new Event("input"));
|
|
959
|
+
}
|
|
1088
960
|
}
|
|
1089
|
-
// We are exporting the v-model runtime directly as vnode hooks so that it can
|
|
1090
|
-
// be tree-shaken in case v-model is never used.
|
|
1091
961
|
const vModelText = {
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
return;
|
|
1137
|
-
}
|
|
1138
|
-
if ((number || el.type === 'number') &&
|
|
1139
|
-
shared.looseToNumber(el.value) === value) {
|
|
1140
|
-
return;
|
|
1141
|
-
}
|
|
1142
|
-
}
|
|
1143
|
-
const newValue = value == null ? '' : value;
|
|
1144
|
-
if (el.value !== newValue) {
|
|
1145
|
-
el.value = newValue;
|
|
1146
|
-
}
|
|
962
|
+
created(el, { modifiers: { lazy, trim, number } }, vnode) {
|
|
963
|
+
el._assign = getModelAssigner(vnode);
|
|
964
|
+
const castToNumber = number || vnode.props && vnode.props.type === "number";
|
|
965
|
+
addEventListener(el, lazy ? "change" : "input", (e) => {
|
|
966
|
+
if (e.target.composing)
|
|
967
|
+
return;
|
|
968
|
+
let domValue = el.value;
|
|
969
|
+
if (trim) {
|
|
970
|
+
domValue = domValue.trim();
|
|
971
|
+
}
|
|
972
|
+
if (castToNumber) {
|
|
973
|
+
domValue = shared.looseToNumber(domValue);
|
|
974
|
+
}
|
|
975
|
+
el._assign(domValue);
|
|
976
|
+
});
|
|
977
|
+
if (trim) {
|
|
978
|
+
addEventListener(el, "change", () => {
|
|
979
|
+
el.value = el.value.trim();
|
|
980
|
+
});
|
|
981
|
+
}
|
|
982
|
+
if (!lazy) {
|
|
983
|
+
addEventListener(el, "compositionstart", onCompositionStart);
|
|
984
|
+
addEventListener(el, "compositionend", onCompositionEnd);
|
|
985
|
+
addEventListener(el, "change", onCompositionEnd);
|
|
986
|
+
}
|
|
987
|
+
},
|
|
988
|
+
// set value on mounted so it's after min/max for type="range"
|
|
989
|
+
mounted(el, { value }) {
|
|
990
|
+
el.value = value == null ? "" : value;
|
|
991
|
+
},
|
|
992
|
+
beforeUpdate(el, { value, modifiers: { lazy, trim, number } }, vnode) {
|
|
993
|
+
el._assign = getModelAssigner(vnode);
|
|
994
|
+
if (el.composing)
|
|
995
|
+
return;
|
|
996
|
+
if (document.activeElement === el && el.type !== "range") {
|
|
997
|
+
if (lazy) {
|
|
998
|
+
return;
|
|
999
|
+
}
|
|
1000
|
+
if (trim && el.value.trim() === value) {
|
|
1001
|
+
return;
|
|
1002
|
+
}
|
|
1003
|
+
if ((number || el.type === "number") && shared.looseToNumber(el.value) === value) {
|
|
1004
|
+
return;
|
|
1005
|
+
}
|
|
1147
1006
|
}
|
|
1007
|
+
const newValue = value == null ? "" : value;
|
|
1008
|
+
if (el.value !== newValue) {
|
|
1009
|
+
el.value = newValue;
|
|
1010
|
+
}
|
|
1011
|
+
}
|
|
1148
1012
|
};
|
|
1149
1013
|
const vModelCheckbox = {
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
beforeUpdate(el, binding, vnode) {
|
|
1189
|
-
el._assign = getModelAssigner(vnode);
|
|
1190
|
-
setChecked(el, binding, vnode);
|
|
1191
|
-
}
|
|
1014
|
+
// #4096 array checkboxes need to be deep traversed
|
|
1015
|
+
deep: true,
|
|
1016
|
+
created(el, _, vnode) {
|
|
1017
|
+
el._assign = getModelAssigner(vnode);
|
|
1018
|
+
addEventListener(el, "change", () => {
|
|
1019
|
+
const modelValue = el._modelValue;
|
|
1020
|
+
const elementValue = getValue(el);
|
|
1021
|
+
const checked = el.checked;
|
|
1022
|
+
const assign = el._assign;
|
|
1023
|
+
if (shared.isArray(modelValue)) {
|
|
1024
|
+
const index = shared.looseIndexOf(modelValue, elementValue);
|
|
1025
|
+
const found = index !== -1;
|
|
1026
|
+
if (checked && !found) {
|
|
1027
|
+
assign(modelValue.concat(elementValue));
|
|
1028
|
+
} else if (!checked && found) {
|
|
1029
|
+
const filtered = [...modelValue];
|
|
1030
|
+
filtered.splice(index, 1);
|
|
1031
|
+
assign(filtered);
|
|
1032
|
+
}
|
|
1033
|
+
} else if (shared.isSet(modelValue)) {
|
|
1034
|
+
const cloned = new Set(modelValue);
|
|
1035
|
+
if (checked) {
|
|
1036
|
+
cloned.add(elementValue);
|
|
1037
|
+
} else {
|
|
1038
|
+
cloned.delete(elementValue);
|
|
1039
|
+
}
|
|
1040
|
+
assign(cloned);
|
|
1041
|
+
} else {
|
|
1042
|
+
assign(getCheckboxValue(el, checked));
|
|
1043
|
+
}
|
|
1044
|
+
});
|
|
1045
|
+
},
|
|
1046
|
+
// set initial checked on mount to wait for true-value/false-value
|
|
1047
|
+
mounted: setChecked,
|
|
1048
|
+
beforeUpdate(el, binding, vnode) {
|
|
1049
|
+
el._assign = getModelAssigner(vnode);
|
|
1050
|
+
setChecked(el, binding, vnode);
|
|
1051
|
+
}
|
|
1192
1052
|
};
|
|
1193
1053
|
function setChecked(el, { value, oldValue }, vnode) {
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
el.checked = shared.looseEqual(value, getCheckboxValue(el, true));
|
|
1203
|
-
}
|
|
1054
|
+
el._modelValue = value;
|
|
1055
|
+
if (shared.isArray(value)) {
|
|
1056
|
+
el.checked = shared.looseIndexOf(value, vnode.props.value) > -1;
|
|
1057
|
+
} else if (shared.isSet(value)) {
|
|
1058
|
+
el.checked = value.has(vnode.props.value);
|
|
1059
|
+
} else if (value !== oldValue) {
|
|
1060
|
+
el.checked = shared.looseEqual(value, getCheckboxValue(el, true));
|
|
1061
|
+
}
|
|
1204
1062
|
}
|
|
1205
1063
|
const vModelRadio = {
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
}
|
|
1064
|
+
created(el, { value }, vnode) {
|
|
1065
|
+
el.checked = shared.looseEqual(value, vnode.props.value);
|
|
1066
|
+
el._assign = getModelAssigner(vnode);
|
|
1067
|
+
addEventListener(el, "change", () => {
|
|
1068
|
+
el._assign(getValue(el));
|
|
1069
|
+
});
|
|
1070
|
+
},
|
|
1071
|
+
beforeUpdate(el, { value, oldValue }, vnode) {
|
|
1072
|
+
el._assign = getModelAssigner(vnode);
|
|
1073
|
+
if (value !== oldValue) {
|
|
1074
|
+
el.checked = shared.looseEqual(value, vnode.props.value);
|
|
1218
1075
|
}
|
|
1076
|
+
}
|
|
1219
1077
|
};
|
|
1220
1078
|
const vModelSelect = {
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
setSelected(el, value);
|
|
1247
|
-
}
|
|
1079
|
+
// <select multiple> value need to be deep traversed
|
|
1080
|
+
deep: true,
|
|
1081
|
+
created(el, { value, modifiers: { number } }, vnode) {
|
|
1082
|
+
const isSetModel = shared.isSet(value);
|
|
1083
|
+
addEventListener(el, "change", () => {
|
|
1084
|
+
const selectedVal = Array.prototype.filter.call(el.options, (o) => o.selected).map(
|
|
1085
|
+
(o) => number ? shared.looseToNumber(getValue(o)) : getValue(o)
|
|
1086
|
+
);
|
|
1087
|
+
el._assign(
|
|
1088
|
+
el.multiple ? isSetModel ? new Set(selectedVal) : selectedVal : selectedVal[0]
|
|
1089
|
+
);
|
|
1090
|
+
});
|
|
1091
|
+
el._assign = getModelAssigner(vnode);
|
|
1092
|
+
},
|
|
1093
|
+
// set value in mounted & updated because <select> relies on its children
|
|
1094
|
+
// <option>s.
|
|
1095
|
+
mounted(el, { value }) {
|
|
1096
|
+
setSelected(el, value);
|
|
1097
|
+
},
|
|
1098
|
+
beforeUpdate(el, _binding, vnode) {
|
|
1099
|
+
el._assign = getModelAssigner(vnode);
|
|
1100
|
+
},
|
|
1101
|
+
updated(el, { value }) {
|
|
1102
|
+
setSelected(el, value);
|
|
1103
|
+
}
|
|
1248
1104
|
};
|
|
1249
1105
|
function setSelected(el, value) {
|
|
1250
|
-
|
|
1251
|
-
|
|
1106
|
+
const isMultiple = el.multiple;
|
|
1107
|
+
if (isMultiple && !shared.isArray(value) && !shared.isSet(value)) {
|
|
1108
|
+
return;
|
|
1109
|
+
}
|
|
1110
|
+
for (let i = 0, l = el.options.length; i < l; i++) {
|
|
1111
|
+
const option = el.options[i];
|
|
1112
|
+
const optionValue = getValue(option);
|
|
1113
|
+
if (isMultiple) {
|
|
1114
|
+
if (shared.isArray(value)) {
|
|
1115
|
+
option.selected = shared.looseIndexOf(value, optionValue) > -1;
|
|
1116
|
+
} else {
|
|
1117
|
+
option.selected = value.has(optionValue);
|
|
1118
|
+
}
|
|
1119
|
+
} else {
|
|
1120
|
+
if (shared.looseEqual(getValue(option), value)) {
|
|
1121
|
+
if (el.selectedIndex !== i)
|
|
1122
|
+
el.selectedIndex = i;
|
|
1252
1123
|
return;
|
|
1124
|
+
}
|
|
1253
1125
|
}
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
if (shared.isArray(value)) {
|
|
1259
|
-
option.selected = shared.looseIndexOf(value, optionValue) > -1;
|
|
1260
|
-
}
|
|
1261
|
-
else {
|
|
1262
|
-
option.selected = value.has(optionValue);
|
|
1263
|
-
}
|
|
1264
|
-
}
|
|
1265
|
-
else {
|
|
1266
|
-
if (shared.looseEqual(getValue(option), value)) {
|
|
1267
|
-
if (el.selectedIndex !== i)
|
|
1268
|
-
el.selectedIndex = i;
|
|
1269
|
-
return;
|
|
1270
|
-
}
|
|
1271
|
-
}
|
|
1272
|
-
}
|
|
1273
|
-
if (!isMultiple && el.selectedIndex !== -1) {
|
|
1274
|
-
el.selectedIndex = -1;
|
|
1275
|
-
}
|
|
1126
|
+
}
|
|
1127
|
+
if (!isMultiple && el.selectedIndex !== -1) {
|
|
1128
|
+
el.selectedIndex = -1;
|
|
1129
|
+
}
|
|
1276
1130
|
}
|
|
1277
|
-
// retrieve raw value set via :value bindings
|
|
1278
1131
|
function getValue(el) {
|
|
1279
|
-
|
|
1132
|
+
return "_value" in el ? el._value : el.value;
|
|
1280
1133
|
}
|
|
1281
|
-
// retrieve raw value for true-value and false-value set via :true-value or :false-value bindings
|
|
1282
1134
|
function getCheckboxValue(el, checked) {
|
|
1283
|
-
|
|
1284
|
-
|
|
1135
|
+
const key = checked ? "_trueValue" : "_falseValue";
|
|
1136
|
+
return key in el ? el[key] : checked;
|
|
1285
1137
|
}
|
|
1286
1138
|
const vModelDynamic = {
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1139
|
+
created(el, binding, vnode) {
|
|
1140
|
+
callModelHook(el, binding, vnode, null, "created");
|
|
1141
|
+
},
|
|
1142
|
+
mounted(el, binding, vnode) {
|
|
1143
|
+
callModelHook(el, binding, vnode, null, "mounted");
|
|
1144
|
+
},
|
|
1145
|
+
beforeUpdate(el, binding, vnode, prevVNode) {
|
|
1146
|
+
callModelHook(el, binding, vnode, prevVNode, "beforeUpdate");
|
|
1147
|
+
},
|
|
1148
|
+
updated(el, binding, vnode, prevVNode) {
|
|
1149
|
+
callModelHook(el, binding, vnode, prevVNode, "updated");
|
|
1150
|
+
}
|
|
1299
1151
|
};
|
|
1300
1152
|
function resolveDynamicModel(tagName, type) {
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1153
|
+
switch (tagName) {
|
|
1154
|
+
case "SELECT":
|
|
1155
|
+
return vModelSelect;
|
|
1156
|
+
case "TEXTAREA":
|
|
1157
|
+
return vModelText;
|
|
1158
|
+
default:
|
|
1159
|
+
switch (type) {
|
|
1160
|
+
case "checkbox":
|
|
1161
|
+
return vModelCheckbox;
|
|
1162
|
+
case "radio":
|
|
1163
|
+
return vModelRadio;
|
|
1306
1164
|
default:
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
case 'radio':
|
|
1311
|
-
return vModelRadio;
|
|
1312
|
-
default:
|
|
1313
|
-
return vModelText;
|
|
1314
|
-
}
|
|
1315
|
-
}
|
|
1165
|
+
return vModelText;
|
|
1166
|
+
}
|
|
1167
|
+
}
|
|
1316
1168
|
}
|
|
1317
1169
|
function callModelHook(el, binding, vnode, prevVNode, hook) {
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1170
|
+
const modelToUse = resolveDynamicModel(
|
|
1171
|
+
el.tagName,
|
|
1172
|
+
vnode.props && vnode.props.type
|
|
1173
|
+
);
|
|
1174
|
+
const fn = modelToUse[hook];
|
|
1175
|
+
fn && fn(el, binding, vnode, prevVNode);
|
|
1321
1176
|
}
|
|
1322
|
-
// SSR vnode transforms, only used when user includes client-oriented render
|
|
1323
|
-
// function in SSR
|
|
1324
1177
|
function initVModelForSSR() {
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1178
|
+
vModelText.getSSRProps = ({ value }) => ({ value });
|
|
1179
|
+
vModelRadio.getSSRProps = ({ value }, vnode) => {
|
|
1180
|
+
if (vnode.props && shared.looseEqual(vnode.props.value, value)) {
|
|
1181
|
+
return { checked: true };
|
|
1182
|
+
}
|
|
1183
|
+
};
|
|
1184
|
+
vModelCheckbox.getSSRProps = ({ value }, vnode) => {
|
|
1185
|
+
if (shared.isArray(value)) {
|
|
1186
|
+
if (vnode.props && shared.looseIndexOf(value, vnode.props.value) > -1) {
|
|
1187
|
+
return { checked: true };
|
|
1188
|
+
}
|
|
1189
|
+
} else if (shared.isSet(value)) {
|
|
1190
|
+
if (vnode.props && value.has(vnode.props.value)) {
|
|
1191
|
+
return { checked: true };
|
|
1192
|
+
}
|
|
1193
|
+
} else if (value) {
|
|
1194
|
+
return { checked: true };
|
|
1195
|
+
}
|
|
1196
|
+
};
|
|
1197
|
+
vModelDynamic.getSSRProps = (binding, vnode) => {
|
|
1198
|
+
if (typeof vnode.type !== "string") {
|
|
1199
|
+
return;
|
|
1200
|
+
}
|
|
1201
|
+
const modelToUse = resolveDynamicModel(
|
|
1202
|
+
// resolveDynamicModel expects an uppercase tag name, but vnode.type is lowercase
|
|
1203
|
+
vnode.type.toUpperCase(),
|
|
1204
|
+
vnode.props && vnode.props.type
|
|
1205
|
+
);
|
|
1206
|
+
if (modelToUse.getSSRProps) {
|
|
1207
|
+
return modelToUse.getSSRProps(binding, vnode);
|
|
1208
|
+
}
|
|
1209
|
+
};
|
|
1357
1210
|
}
|
|
1358
1211
|
|
|
1359
|
-
const systemModifiers = [
|
|
1212
|
+
const systemModifiers = ["ctrl", "shift", "alt", "meta"];
|
|
1360
1213
|
const modifierGuards = {
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1214
|
+
stop: (e) => e.stopPropagation(),
|
|
1215
|
+
prevent: (e) => e.preventDefault(),
|
|
1216
|
+
self: (e) => e.target !== e.currentTarget,
|
|
1217
|
+
ctrl: (e) => !e.ctrlKey,
|
|
1218
|
+
shift: (e) => !e.shiftKey,
|
|
1219
|
+
alt: (e) => !e.altKey,
|
|
1220
|
+
meta: (e) => !e.metaKey,
|
|
1221
|
+
left: (e) => "button" in e && e.button !== 0,
|
|
1222
|
+
middle: (e) => "button" in e && e.button !== 1,
|
|
1223
|
+
right: (e) => "button" in e && e.button !== 2,
|
|
1224
|
+
exact: (e, modifiers) => systemModifiers.some((m) => e[`${m}Key`] && !modifiers.includes(m))
|
|
1372
1225
|
};
|
|
1373
|
-
/**
|
|
1374
|
-
* @private
|
|
1375
|
-
*/
|
|
1376
1226
|
const withModifiers = (fn, modifiers) => {
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1227
|
+
return (event, ...args) => {
|
|
1228
|
+
for (let i = 0; i < modifiers.length; i++) {
|
|
1229
|
+
const guard = modifierGuards[modifiers[i]];
|
|
1230
|
+
if (guard && guard(event, modifiers))
|
|
1231
|
+
return;
|
|
1232
|
+
}
|
|
1233
|
+
return fn(event, ...args);
|
|
1234
|
+
};
|
|
1385
1235
|
};
|
|
1386
|
-
// Kept for 2.x compat.
|
|
1387
|
-
// Note: IE11 compat for `spacebar` and `del` is removed for now.
|
|
1388
1236
|
const keyNames = {
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1237
|
+
esc: "escape",
|
|
1238
|
+
space: " ",
|
|
1239
|
+
up: "arrow-up",
|
|
1240
|
+
left: "arrow-left",
|
|
1241
|
+
right: "arrow-right",
|
|
1242
|
+
down: "arrow-down",
|
|
1243
|
+
delete: "backspace"
|
|
1396
1244
|
};
|
|
1397
|
-
/**
|
|
1398
|
-
* @private
|
|
1399
|
-
*/
|
|
1400
1245
|
const withKeys = (fn, modifiers) => {
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1246
|
+
return (event) => {
|
|
1247
|
+
if (!("key" in event)) {
|
|
1248
|
+
return;
|
|
1249
|
+
}
|
|
1250
|
+
const eventKey = shared.hyphenate(event.key);
|
|
1251
|
+
if (modifiers.some((k) => k === eventKey || keyNames[k] === eventKey)) {
|
|
1252
|
+
return fn(event);
|
|
1253
|
+
}
|
|
1254
|
+
};
|
|
1410
1255
|
};
|
|
1411
1256
|
|
|
1412
1257
|
const vShow = {
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
beforeUnmount(el, { value }) {
|
|
1447
|
-
setDisplay(el, value);
|
|
1448
|
-
}
|
|
1258
|
+
beforeMount(el, { value }, { transition }) {
|
|
1259
|
+
el._vod = el.style.display === "none" ? "" : el.style.display;
|
|
1260
|
+
if (transition && value) {
|
|
1261
|
+
transition.beforeEnter(el);
|
|
1262
|
+
} else {
|
|
1263
|
+
setDisplay(el, value);
|
|
1264
|
+
}
|
|
1265
|
+
},
|
|
1266
|
+
mounted(el, { value }, { transition }) {
|
|
1267
|
+
if (transition && value) {
|
|
1268
|
+
transition.enter(el);
|
|
1269
|
+
}
|
|
1270
|
+
},
|
|
1271
|
+
updated(el, { value, oldValue }, { transition }) {
|
|
1272
|
+
if (!value === !oldValue)
|
|
1273
|
+
return;
|
|
1274
|
+
if (transition) {
|
|
1275
|
+
if (value) {
|
|
1276
|
+
transition.beforeEnter(el);
|
|
1277
|
+
setDisplay(el, true);
|
|
1278
|
+
transition.enter(el);
|
|
1279
|
+
} else {
|
|
1280
|
+
transition.leave(el, () => {
|
|
1281
|
+
setDisplay(el, false);
|
|
1282
|
+
});
|
|
1283
|
+
}
|
|
1284
|
+
} else {
|
|
1285
|
+
setDisplay(el, value);
|
|
1286
|
+
}
|
|
1287
|
+
},
|
|
1288
|
+
beforeUnmount(el, { value }) {
|
|
1289
|
+
setDisplay(el, value);
|
|
1290
|
+
}
|
|
1449
1291
|
};
|
|
1450
1292
|
function setDisplay(el, value) {
|
|
1451
|
-
|
|
1293
|
+
el.style.display = value ? el._vod : "none";
|
|
1452
1294
|
}
|
|
1453
|
-
// SSR vnode transforms, only used when user includes client-oriented render
|
|
1454
|
-
// function in SSR
|
|
1455
1295
|
function initVShowForSSR() {
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1296
|
+
vShow.getSSRProps = ({ value }) => {
|
|
1297
|
+
if (!value) {
|
|
1298
|
+
return { style: { display: "none" } };
|
|
1299
|
+
}
|
|
1300
|
+
};
|
|
1461
1301
|
}
|
|
1462
1302
|
|
|
1463
|
-
const rendererOptions =
|
|
1464
|
-
// lazy create the renderer - this makes core renderer logic tree-shakable
|
|
1465
|
-
// in case the user only imports reactivity utilities from Vue.
|
|
1303
|
+
const rendererOptions = /* @__PURE__ */ shared.extend({ patchProp }, nodeOps);
|
|
1466
1304
|
let renderer;
|
|
1467
1305
|
let enabledHydration = false;
|
|
1468
1306
|
function ensureRenderer() {
|
|
1469
|
-
|
|
1470
|
-
(renderer = runtimeCore.createRenderer(rendererOptions)));
|
|
1307
|
+
return renderer || (renderer = runtimeCore.createRenderer(rendererOptions));
|
|
1471
1308
|
}
|
|
1472
1309
|
function ensureHydrationRenderer() {
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
enabledHydration = true;
|
|
1477
|
-
return renderer;
|
|
1310
|
+
renderer = enabledHydration ? renderer : runtimeCore.createHydrationRenderer(rendererOptions);
|
|
1311
|
+
enabledHydration = true;
|
|
1312
|
+
return renderer;
|
|
1478
1313
|
}
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
const
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
if (container) {
|
|
1518
|
-
return mount(container, true, container instanceof SVGElement);
|
|
1519
|
-
}
|
|
1520
|
-
};
|
|
1521
|
-
return app;
|
|
1522
|
-
});
|
|
1314
|
+
const render = (...args) => {
|
|
1315
|
+
ensureRenderer().render(...args);
|
|
1316
|
+
};
|
|
1317
|
+
const hydrate = (...args) => {
|
|
1318
|
+
ensureHydrationRenderer().hydrate(...args);
|
|
1319
|
+
};
|
|
1320
|
+
const createApp = (...args) => {
|
|
1321
|
+
const app = ensureRenderer().createApp(...args);
|
|
1322
|
+
const { mount } = app;
|
|
1323
|
+
app.mount = (containerOrSelector) => {
|
|
1324
|
+
const container = normalizeContainer(containerOrSelector);
|
|
1325
|
+
if (!container)
|
|
1326
|
+
return;
|
|
1327
|
+
const component = app._component;
|
|
1328
|
+
if (!shared.isFunction(component) && !component.render && !component.template) {
|
|
1329
|
+
component.template = container.innerHTML;
|
|
1330
|
+
}
|
|
1331
|
+
container.innerHTML = "";
|
|
1332
|
+
const proxy = mount(container, false, container instanceof SVGElement);
|
|
1333
|
+
if (container instanceof Element) {
|
|
1334
|
+
container.removeAttribute("v-cloak");
|
|
1335
|
+
container.setAttribute("data-v-app", "");
|
|
1336
|
+
}
|
|
1337
|
+
return proxy;
|
|
1338
|
+
};
|
|
1339
|
+
return app;
|
|
1340
|
+
};
|
|
1341
|
+
const createSSRApp = (...args) => {
|
|
1342
|
+
const app = ensureHydrationRenderer().createApp(...args);
|
|
1343
|
+
const { mount } = app;
|
|
1344
|
+
app.mount = (containerOrSelector) => {
|
|
1345
|
+
const container = normalizeContainer(containerOrSelector);
|
|
1346
|
+
if (container) {
|
|
1347
|
+
return mount(container, true, container instanceof SVGElement);
|
|
1348
|
+
}
|
|
1349
|
+
};
|
|
1350
|
+
return app;
|
|
1351
|
+
};
|
|
1523
1352
|
function normalizeContainer(container) {
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1353
|
+
if (shared.isString(container)) {
|
|
1354
|
+
const res = document.querySelector(container);
|
|
1355
|
+
return res;
|
|
1356
|
+
}
|
|
1357
|
+
return container;
|
|
1529
1358
|
}
|
|
1530
1359
|
let ssrDirectiveInitialized = false;
|
|
1531
|
-
/**
|
|
1532
|
-
* @internal
|
|
1533
|
-
*/
|
|
1534
1360
|
const initDirectivesForSSR = () => {
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
;
|
|
1361
|
+
if (!ssrDirectiveInitialized) {
|
|
1362
|
+
ssrDirectiveInitialized = true;
|
|
1363
|
+
initVModelForSSR();
|
|
1364
|
+
initVShowForSSR();
|
|
1365
|
+
}
|
|
1366
|
+
} ;
|
|
1542
1367
|
|
|
1543
1368
|
exports.Transition = Transition;
|
|
1544
1369
|
exports.TransitionGroup = TransitionGroup;
|