@vue/runtime-dom 3.2.39 → 3.2.41

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