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