@vue/runtime-dom 3.2.47 → 3.3.0-alpha.2

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