@vue/runtime-dom 3.4.18 → 3.4.20

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.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @vue/runtime-dom v3.4.18
2
+ * @vue/runtime-dom v3.4.20
3
3
  * (c) 2018-present Yuxi (Evan) You and Vue contributors
4
4
  * @license MIT
5
5
  **/
@@ -361,10 +361,11 @@ function patchClass(el, value, isSVG) {
361
361
  }
362
362
  }
363
363
 
364
- const vShowOldKey = Symbol("_vod");
364
+ const vShowOriginalDisplay = Symbol("_vod");
365
+ const vShowHidden = Symbol("_vsh");
365
366
  const vShow = {
366
367
  beforeMount(el, { value }, { transition }) {
367
- el[vShowOldKey] = el.style.display === "none" ? "" : el.style.display;
368
+ el[vShowOriginalDisplay] = el.style.display === "none" ? "" : el.style.display;
368
369
  if (transition && value) {
369
370
  transition.beforeEnter(el);
370
371
  } else {
@@ -377,7 +378,7 @@ const vShow = {
377
378
  }
378
379
  },
379
380
  updated(el, { value, oldValue }, { transition }) {
380
- if (!value === !oldValue && el.style.display === el[vShowOldKey])
381
+ if (!value === !oldValue)
381
382
  return;
382
383
  if (transition) {
383
384
  if (value) {
@@ -401,7 +402,8 @@ const vShow = {
401
402
  vShow.name = "show";
402
403
  }
403
404
  function setDisplay(el, value) {
404
- el.style.display = value ? el[vShowOldKey] : "none";
405
+ el.style.display = value ? el[vShowOriginalDisplay] : "none";
406
+ el[vShowHidden] = !value;
405
407
  }
406
408
  function initVShowForSSR() {
407
409
  vShow.getSSRProps = ({ value }) => {
@@ -420,13 +422,21 @@ const displayRE = /(^|;)\s*display\s*:/;
420
422
  function patchStyle(el, prev, next) {
421
423
  const style = el.style;
422
424
  const isCssString = shared.isString(next);
423
- const currentDisplay = style.display;
424
425
  let hasControlledDisplay = false;
425
426
  if (next && !isCssString) {
426
- if (prev && !shared.isString(prev)) {
427
- for (const key in prev) {
428
- if (next[key] == null) {
429
- setStyle(style, key, "");
427
+ if (prev) {
428
+ if (!shared.isString(prev)) {
429
+ for (const key in prev) {
430
+ if (next[key] == null) {
431
+ setStyle(style, key, "");
432
+ }
433
+ }
434
+ } else {
435
+ for (const prevStyle of prev.split(";")) {
436
+ const key = prevStyle.slice(0, prevStyle.indexOf(":")).trim();
437
+ if (next[key] == null) {
438
+ setStyle(style, key, "");
439
+ }
430
440
  }
431
441
  }
432
442
  }
@@ -450,9 +460,11 @@ function patchStyle(el, prev, next) {
450
460
  el.removeAttribute("style");
451
461
  }
452
462
  }
453
- if (vShowOldKey in el) {
454
- el[vShowOldKey] = hasControlledDisplay ? style.display : "";
455
- style.display = currentDisplay;
463
+ if (vShowOriginalDisplay in el) {
464
+ el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : "";
465
+ if (el[vShowHidden]) {
466
+ style.display = "none";
467
+ }
456
468
  }
457
469
  }
458
470
  const semicolonRE = /[^\\];\s*$/;
@@ -537,7 +549,7 @@ function patchDOMProp(el, key, value, prevChildren, parentComponent, parentSuspe
537
549
  if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
538
550
  !tag.includes("-")) {
539
551
  el._value = value;
540
- const oldValue = tag === "OPTION" ? el.getAttribute("value") : el.value;
552
+ const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
541
553
  const newValue = value == null ? "" : value;
542
554
  if (oldValue !== newValue) {
543
555
  el.value = newValue;
@@ -1228,19 +1240,19 @@ const vModelSelect = {
1228
1240
  },
1229
1241
  // set value in mounted & updated because <select> relies on its children
1230
1242
  // <option>s.
1231
- mounted(el, { value, oldValue, modifiers: { number } }) {
1232
- setSelected(el, value, oldValue, number);
1243
+ mounted(el, { value, modifiers: { number } }) {
1244
+ setSelected(el, value, number);
1233
1245
  },
1234
1246
  beforeUpdate(el, _binding, vnode) {
1235
1247
  el[assignKey] = getModelAssigner(vnode);
1236
1248
  },
1237
- updated(el, { value, oldValue, modifiers: { number } }) {
1249
+ updated(el, { value, modifiers: { number } }) {
1238
1250
  if (!el._assigning) {
1239
- setSelected(el, value, oldValue, number);
1251
+ setSelected(el, value, number);
1240
1252
  }
1241
1253
  }
1242
1254
  };
1243
- function setSelected(el, value, oldValue, number) {
1255
+ function setSelected(el, value, number) {
1244
1256
  const isMultiple = el.multiple;
1245
1257
  const isArrayValue = shared.isArray(value);
1246
1258
  if (isMultiple && !isArrayValue && !shared.isSet(value)) {
@@ -1265,12 +1277,10 @@ function setSelected(el, value, oldValue, number) {
1265
1277
  } else {
1266
1278
  option.selected = value.has(optionValue);
1267
1279
  }
1268
- } else {
1269
- if (shared.looseEqual(getValue(option), value)) {
1270
- if (el.selectedIndex !== i)
1271
- el.selectedIndex = i;
1272
- return;
1273
- }
1280
+ } else if (shared.looseEqual(getValue(option), value)) {
1281
+ if (el.selectedIndex !== i)
1282
+ el.selectedIndex = i;
1283
+ return;
1274
1284
  }
1275
1285
  }
1276
1286
  if (!isMultiple && el.selectedIndex !== -1) {
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @vue/runtime-dom v3.4.18
2
+ * @vue/runtime-dom v3.4.20
3
3
  * (c) 2018-present Yuxi (Evan) You and Vue contributors
4
4
  * @license MIT
5
5
  **/
@@ -358,10 +358,11 @@ function patchClass(el, value, isSVG) {
358
358
  }
359
359
  }
360
360
 
361
- const vShowOldKey = Symbol("_vod");
361
+ const vShowOriginalDisplay = Symbol("_vod");
362
+ const vShowHidden = Symbol("_vsh");
362
363
  const vShow = {
363
364
  beforeMount(el, { value }, { transition }) {
364
- el[vShowOldKey] = el.style.display === "none" ? "" : el.style.display;
365
+ el[vShowOriginalDisplay] = el.style.display === "none" ? "" : el.style.display;
365
366
  if (transition && value) {
366
367
  transition.beforeEnter(el);
367
368
  } else {
@@ -374,7 +375,7 @@ const vShow = {
374
375
  }
375
376
  },
376
377
  updated(el, { value, oldValue }, { transition }) {
377
- if (!value === !oldValue && el.style.display === el[vShowOldKey])
378
+ if (!value === !oldValue)
378
379
  return;
379
380
  if (transition) {
380
381
  if (value) {
@@ -395,7 +396,8 @@ const vShow = {
395
396
  }
396
397
  };
397
398
  function setDisplay(el, value) {
398
- el.style.display = value ? el[vShowOldKey] : "none";
399
+ el.style.display = value ? el[vShowOriginalDisplay] : "none";
400
+ el[vShowHidden] = !value;
399
401
  }
400
402
  function initVShowForSSR() {
401
403
  vShow.getSSRProps = ({ value }) => {
@@ -414,13 +416,21 @@ const displayRE = /(^|;)\s*display\s*:/;
414
416
  function patchStyle(el, prev, next) {
415
417
  const style = el.style;
416
418
  const isCssString = shared.isString(next);
417
- const currentDisplay = style.display;
418
419
  let hasControlledDisplay = false;
419
420
  if (next && !isCssString) {
420
- if (prev && !shared.isString(prev)) {
421
- for (const key in prev) {
422
- if (next[key] == null) {
423
- setStyle(style, key, "");
421
+ if (prev) {
422
+ if (!shared.isString(prev)) {
423
+ for (const key in prev) {
424
+ if (next[key] == null) {
425
+ setStyle(style, key, "");
426
+ }
427
+ }
428
+ } else {
429
+ for (const prevStyle of prev.split(";")) {
430
+ const key = prevStyle.slice(0, prevStyle.indexOf(":")).trim();
431
+ if (next[key] == null) {
432
+ setStyle(style, key, "");
433
+ }
424
434
  }
425
435
  }
426
436
  }
@@ -444,9 +454,11 @@ function patchStyle(el, prev, next) {
444
454
  el.removeAttribute("style");
445
455
  }
446
456
  }
447
- if (vShowOldKey in el) {
448
- el[vShowOldKey] = hasControlledDisplay ? style.display : "";
449
- style.display = currentDisplay;
457
+ if (vShowOriginalDisplay in el) {
458
+ el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : "";
459
+ if (el[vShowHidden]) {
460
+ style.display = "none";
461
+ }
450
462
  }
451
463
  }
452
464
  const importantRE = /\s*!important$/;
@@ -523,7 +535,7 @@ function patchDOMProp(el, key, value, prevChildren, parentComponent, parentSuspe
523
535
  if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
524
536
  !tag.includes("-")) {
525
537
  el._value = value;
526
- const oldValue = tag === "OPTION" ? el.getAttribute("value") : el.value;
538
+ const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
527
539
  const newValue = value == null ? "" : value;
528
540
  if (oldValue !== newValue) {
529
541
  el.value = newValue;
@@ -1184,19 +1196,19 @@ const vModelSelect = {
1184
1196
  },
1185
1197
  // set value in mounted & updated because <select> relies on its children
1186
1198
  // <option>s.
1187
- mounted(el, { value, oldValue, modifiers: { number } }) {
1188
- setSelected(el, value, oldValue, number);
1199
+ mounted(el, { value, modifiers: { number } }) {
1200
+ setSelected(el, value, number);
1189
1201
  },
1190
1202
  beforeUpdate(el, _binding, vnode) {
1191
1203
  el[assignKey] = getModelAssigner(vnode);
1192
1204
  },
1193
- updated(el, { value, oldValue, modifiers: { number } }) {
1205
+ updated(el, { value, modifiers: { number } }) {
1194
1206
  if (!el._assigning) {
1195
- setSelected(el, value, oldValue, number);
1207
+ setSelected(el, value, number);
1196
1208
  }
1197
1209
  }
1198
1210
  };
1199
- function setSelected(el, value, oldValue, number) {
1211
+ function setSelected(el, value, number) {
1200
1212
  const isMultiple = el.multiple;
1201
1213
  const isArrayValue = shared.isArray(value);
1202
1214
  if (isMultiple && !isArrayValue && !shared.isSet(value)) {
@@ -1218,12 +1230,10 @@ function setSelected(el, value, oldValue, number) {
1218
1230
  } else {
1219
1231
  option.selected = value.has(optionValue);
1220
1232
  }
1221
- } else {
1222
- if (shared.looseEqual(getValue(option), value)) {
1223
- if (el.selectedIndex !== i)
1224
- el.selectedIndex = i;
1225
- return;
1226
- }
1233
+ } else if (shared.looseEqual(getValue(option), value)) {
1234
+ if (el.selectedIndex !== i)
1235
+ el.selectedIndex = i;
1236
+ return;
1227
1237
  }
1228
1238
  }
1229
1239
  if (!isMultiple && el.selectedIndex !== -1) {
@@ -117,9 +117,11 @@ export declare const withKeys: <T extends (event: KeyboardEvent) => any>(fn: T &
117
117
  } | undefined;
118
118
  }, modifiers: string[]) => T;
119
119
 
120
- declare const vShowOldKey: unique symbol;
120
+ declare const vShowOriginalDisplay: unique symbol;
121
+ declare const vShowHidden: unique symbol;
121
122
  interface VShowElement extends HTMLElement {
122
- [vShowOldKey]: string;
123
+ [vShowOriginalDisplay]: string;
124
+ [vShowHidden]: boolean;
123
125
  }
124
126
  export declare const vShow: ObjectDirective<VShowElement> & {
125
127
  name?: 'show';
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @vue/runtime-dom v3.4.18
2
+ * @vue/runtime-dom v3.4.20
3
3
  * (c) 2018-present Yuxi (Evan) You and Vue contributors
4
4
  * @license MIT
5
5
  **/
@@ -730,20 +730,20 @@ function hasOwnProperty(key) {
730
730
  return obj.hasOwnProperty(key);
731
731
  }
732
732
  class BaseReactiveHandler {
733
- constructor(_isReadonly = false, _shallow = false) {
733
+ constructor(_isReadonly = false, _isShallow = false) {
734
734
  this._isReadonly = _isReadonly;
735
- this._shallow = _shallow;
735
+ this._isShallow = _isShallow;
736
736
  }
737
737
  get(target, key, receiver) {
738
- const isReadonly2 = this._isReadonly, shallow = this._shallow;
738
+ const isReadonly2 = this._isReadonly, isShallow2 = this._isShallow;
739
739
  if (key === "__v_isReactive") {
740
740
  return !isReadonly2;
741
741
  } else if (key === "__v_isReadonly") {
742
742
  return isReadonly2;
743
743
  } else if (key === "__v_isShallow") {
744
- return shallow;
744
+ return isShallow2;
745
745
  } else if (key === "__v_raw") {
746
- if (receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
746
+ if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
747
747
  // this means the reciever is a user proxy of the reactive proxy
748
748
  Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
749
749
  return target;
@@ -766,7 +766,7 @@ class BaseReactiveHandler {
766
766
  if (!isReadonly2) {
767
767
  track(target, "get", key);
768
768
  }
769
- if (shallow) {
769
+ if (isShallow2) {
770
770
  return res;
771
771
  }
772
772
  if (isRef(res)) {
@@ -779,12 +779,12 @@ class BaseReactiveHandler {
779
779
  }
780
780
  }
781
781
  class MutableReactiveHandler extends BaseReactiveHandler {
782
- constructor(shallow = false) {
783
- super(false, shallow);
782
+ constructor(isShallow2 = false) {
783
+ super(false, isShallow2);
784
784
  }
785
785
  set(target, key, value, receiver) {
786
786
  let oldValue = target[key];
787
- if (!this._shallow) {
787
+ if (!this._isShallow) {
788
788
  const isOldValueReadonly = isReadonly(oldValue);
789
789
  if (!isShallow(value) && !isReadonly(value)) {
790
790
  oldValue = toRaw(oldValue);
@@ -836,8 +836,8 @@ class MutableReactiveHandler extends BaseReactiveHandler {
836
836
  }
837
837
  }
838
838
  class ReadonlyReactiveHandler extends BaseReactiveHandler {
839
- constructor(shallow = false) {
840
- super(true, shallow);
839
+ constructor(isShallow2 = false) {
840
+ super(true, isShallow2);
841
841
  }
842
842
  set(target, key) {
843
843
  {
@@ -1008,7 +1008,7 @@ function createReadonlyMethod(type) {
1008
1008
  return function(...args) {
1009
1009
  {
1010
1010
  const key = args[0] ? `on key "${args[0]}" ` : ``;
1011
- console.warn(
1011
+ warn$2(
1012
1012
  `${capitalize(type)} operation ${key}failed: target is readonly.`,
1013
1013
  toRaw(this)
1014
1014
  );
@@ -1146,7 +1146,7 @@ function checkIdentityKeys(target, has2, key) {
1146
1146
  const rawKey = toRaw(key);
1147
1147
  if (rawKey !== key && has2.call(target, rawKey)) {
1148
1148
  const type = toRawType(target);
1149
- console.warn(
1149
+ warn$2(
1150
1150
  `Reactive ${type} contains both the raw and reactive versions of the same object${type === `Map` ? ` as keys` : ``}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`
1151
1151
  );
1152
1152
  }
@@ -1215,7 +1215,7 @@ function shallowReadonly(target) {
1215
1215
  function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandlers, proxyMap) {
1216
1216
  if (!isObject(target)) {
1217
1217
  {
1218
- console.warn(`value cannot be made reactive: ${String(target)}`);
1218
+ warn$2(`value cannot be made reactive: ${String(target)}`);
1219
1219
  }
1220
1220
  return target;
1221
1221
  }
@@ -1265,8 +1265,10 @@ function markRaw(value) {
1265
1265
  const toReactive = (value) => isObject(value) ? reactive(value) : value;
1266
1266
  const toReadonly = (value) => isObject(value) ? readonly(value) : value;
1267
1267
 
1268
+ const COMPUTED_SIDE_EFFECT_WARN = `Computed is still dirty after getter evaluation, likely because a computed is mutating its own dependency in its getter. State mutations in computed getters should be avoided. Check the docs for more details: https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free`;
1268
1269
  class ComputedRefImpl {
1269
1270
  constructor(getter, _setter, isReadonly, isSSR) {
1271
+ this.getter = getter;
1270
1272
  this._setter = _setter;
1271
1273
  this.dep = void 0;
1272
1274
  this.__v_isRef = true;
@@ -1289,6 +1291,11 @@ class ComputedRefImpl {
1289
1291
  }
1290
1292
  trackRefValue(self);
1291
1293
  if (self.effect._dirtyLevel >= 2) {
1294
+ if (this._warnRecursive) {
1295
+ warn$2(COMPUTED_SIDE_EFFECT_WARN, `
1296
+
1297
+ getter: `, this.getter);
1298
+ }
1292
1299
  triggerRefValue(self, 2);
1293
1300
  }
1294
1301
  return self._value;
@@ -1312,7 +1319,7 @@ function computed$1(getterOrOptions, debugOptions, isSSR = false) {
1312
1319
  if (onlyGetter) {
1313
1320
  getter = getterOrOptions;
1314
1321
  setter = () => {
1315
- console.warn("Write operation failed: computed value is readonly");
1322
+ warn$2("Write operation failed: computed value is readonly");
1316
1323
  } ;
1317
1324
  } else {
1318
1325
  getter = getterOrOptions.get;
@@ -1444,7 +1451,7 @@ function customRef(factory) {
1444
1451
  }
1445
1452
  function toRefs(object) {
1446
1453
  if (!isProxy(object)) {
1447
- console.warn(`toRefs() expects a reactive object but received a plain one.`);
1454
+ warn$2(`toRefs() expects a reactive object but received a plain one.`);
1448
1455
  }
1449
1456
  const ret = isArray(object) ? new Array(object.length) : {};
1450
1457
  for (const key in object) {
@@ -1686,13 +1693,11 @@ const ErrorTypeStrings$1 = {
1686
1693
  [14]: "scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core ."
1687
1694
  };
1688
1695
  function callWithErrorHandling(fn, instance, type, args) {
1689
- let res;
1690
1696
  try {
1691
- res = args ? fn(...args) : fn();
1697
+ return args ? fn(...args) : fn();
1692
1698
  } catch (err) {
1693
1699
  handleError(err, instance, type);
1694
1700
  }
1695
- return res;
1696
1701
  }
1697
1702
  function callWithAsyncErrorHandling(fn, instance, type, args) {
1698
1703
  if (isFunction(fn)) {
@@ -2697,6 +2702,8 @@ const SuspenseImpl = {
2697
2702
  } else {
2698
2703
  if (parentSuspense && parentSuspense.deps > 0) {
2699
2704
  n2.suspense = n1.suspense;
2705
+ n2.suspense.vnode = n2;
2706
+ n2.el = n1.el;
2700
2707
  return;
2701
2708
  }
2702
2709
  patchSuspense(
@@ -3629,7 +3636,6 @@ const BaseTransitionImpl = {
3629
3636
  setup(props, { slots }) {
3630
3637
  const instance = getCurrentInstance();
3631
3638
  const state = useTransitionState();
3632
- let prevTransitionKey;
3633
3639
  return () => {
3634
3640
  const children = slots.default && getTransitionRawChildren(slots.default(), true);
3635
3641
  if (!children || !children.length) {
@@ -3672,18 +3678,7 @@ const BaseTransitionImpl = {
3672
3678
  setTransitionHooks(innerChild, enterHooks);
3673
3679
  const oldChild = instance.subTree;
3674
3680
  const oldInnerChild = oldChild && getKeepAliveChild(oldChild);
3675
- let transitionKeyChanged = false;
3676
- const { getTransitionKey } = innerChild.type;
3677
- if (getTransitionKey) {
3678
- const key = getTransitionKey();
3679
- if (prevTransitionKey === void 0) {
3680
- prevTransitionKey = key;
3681
- } else if (key !== prevTransitionKey) {
3682
- prevTransitionKey = key;
3683
- transitionKeyChanged = true;
3684
- }
3685
- }
3686
- if (oldInnerChild && oldInnerChild.type !== Comment && (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {
3681
+ if (oldInnerChild && oldInnerChild.type !== Comment && !isSameVNodeType(innerChild, oldInnerChild)) {
3687
3682
  const leavingHooks = resolveTransitionHooks(
3688
3683
  oldInnerChild,
3689
3684
  rawProps,
@@ -5754,8 +5749,16 @@ function validatePropName(key) {
5754
5749
  return false;
5755
5750
  }
5756
5751
  function getType(ctor) {
5757
- const match = ctor && ctor.toString().match(/^\s*(function|class) (\w+)/);
5758
- return match ? match[2] : ctor === null ? "null" : "";
5752
+ if (ctor === null) {
5753
+ return "null";
5754
+ }
5755
+ if (typeof ctor === "function") {
5756
+ return ctor.name || "";
5757
+ } else if (typeof ctor === "object") {
5758
+ const name = ctor.constructor && ctor.constructor.name;
5759
+ return name || "";
5760
+ }
5761
+ return "";
5759
5762
  }
5760
5763
  function isSameType(a, b) {
5761
5764
  return getType(a) === getType(b);
@@ -6552,9 +6555,12 @@ function propHasMismatch(el, key, clientValue, vnode, instance) {
6552
6555
  }
6553
6556
  }
6554
6557
  }
6555
- const cssVars = (_a = instance == null ? void 0 : instance.getCssVars) == null ? void 0 : _a.call(instance);
6556
- for (const key2 in cssVars) {
6557
- expectedMap.set(`--${key2}`, String(cssVars[key2]));
6558
+ const root = instance == null ? void 0 : instance.subTree;
6559
+ if (vnode === root || (root == null ? void 0 : root.type) === Fragment && root.children.includes(vnode)) {
6560
+ const cssVars = (_a = instance == null ? void 0 : instance.getCssVars) == null ? void 0 : _a.call(instance);
6561
+ for (const key2 in cssVars) {
6562
+ expectedMap.set(`--${key2}`, String(cssVars[key2]));
6563
+ }
6558
6564
  }
6559
6565
  if (!isMapEqual(actualMap, expectedMap)) {
6560
6566
  mismatchType = mismatchKey = "style";
@@ -8949,9 +8955,8 @@ const unsetCurrentInstance = () => {
8949
8955
  internalSetCurrentInstance(null);
8950
8956
  };
8951
8957
  const isBuiltInTag = /* @__PURE__ */ makeMap("slot,component");
8952
- function validateComponentName(name, config) {
8953
- const appIsNativeTag = config.isNativeTag || NO;
8954
- if (isBuiltInTag(name) || appIsNativeTag(name)) {
8958
+ function validateComponentName(name, { isNativeTag }) {
8959
+ if (isBuiltInTag(name) || isNativeTag(name)) {
8955
8960
  warn$1(
8956
8961
  "Do not use built-in or reserved HTML elements as component id: " + name
8957
8962
  );
@@ -9244,7 +9249,14 @@ function isClassComponent(value) {
9244
9249
  }
9245
9250
 
9246
9251
  const computed = (getterOrOptions, debugOptions) => {
9247
- return computed$1(getterOrOptions, debugOptions, isInSSRComponentSetup);
9252
+ const c = computed$1(getterOrOptions, debugOptions, isInSSRComponentSetup);
9253
+ {
9254
+ const i = getCurrentInstance();
9255
+ if (i && i.appContext.config.warnRecursiveComputed) {
9256
+ c._warnRecursive = true;
9257
+ }
9258
+ }
9259
+ return c;
9248
9260
  };
9249
9261
 
9250
9262
  function useModel(props, name, options = EMPTY_OBJ) {
@@ -9522,7 +9534,7 @@ function isMemoSame(cached, memo) {
9522
9534
  return true;
9523
9535
  }
9524
9536
 
9525
- const version = "3.4.18";
9537
+ const version = "3.4.20";
9526
9538
  const warn = warn$1 ;
9527
9539
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
9528
9540
  const devtools = devtools$1 ;
@@ -9883,10 +9895,11 @@ function patchClass(el, value, isSVG) {
9883
9895
  }
9884
9896
  }
9885
9897
 
9886
- const vShowOldKey = Symbol("_vod");
9898
+ const vShowOriginalDisplay = Symbol("_vod");
9899
+ const vShowHidden = Symbol("_vsh");
9887
9900
  const vShow = {
9888
9901
  beforeMount(el, { value }, { transition }) {
9889
- el[vShowOldKey] = el.style.display === "none" ? "" : el.style.display;
9902
+ el[vShowOriginalDisplay] = el.style.display === "none" ? "" : el.style.display;
9890
9903
  if (transition && value) {
9891
9904
  transition.beforeEnter(el);
9892
9905
  } else {
@@ -9899,7 +9912,7 @@ const vShow = {
9899
9912
  }
9900
9913
  },
9901
9914
  updated(el, { value, oldValue }, { transition }) {
9902
- if (!value === !oldValue && el.style.display === el[vShowOldKey])
9915
+ if (!value === !oldValue)
9903
9916
  return;
9904
9917
  if (transition) {
9905
9918
  if (value) {
@@ -9923,7 +9936,8 @@ const vShow = {
9923
9936
  vShow.name = "show";
9924
9937
  }
9925
9938
  function setDisplay(el, value) {
9926
- el.style.display = value ? el[vShowOldKey] : "none";
9939
+ el.style.display = value ? el[vShowOriginalDisplay] : "none";
9940
+ el[vShowHidden] = !value;
9927
9941
  }
9928
9942
 
9929
9943
  const CSS_VAR_TEXT = Symbol("CSS_VAR_TEXT" );
@@ -9996,13 +10010,21 @@ const displayRE = /(^|;)\s*display\s*:/;
9996
10010
  function patchStyle(el, prev, next) {
9997
10011
  const style = el.style;
9998
10012
  const isCssString = isString(next);
9999
- const currentDisplay = style.display;
10000
10013
  let hasControlledDisplay = false;
10001
10014
  if (next && !isCssString) {
10002
- if (prev && !isString(prev)) {
10003
- for (const key in prev) {
10004
- if (next[key] == null) {
10005
- setStyle(style, key, "");
10015
+ if (prev) {
10016
+ if (!isString(prev)) {
10017
+ for (const key in prev) {
10018
+ if (next[key] == null) {
10019
+ setStyle(style, key, "");
10020
+ }
10021
+ }
10022
+ } else {
10023
+ for (const prevStyle of prev.split(";")) {
10024
+ const key = prevStyle.slice(0, prevStyle.indexOf(":")).trim();
10025
+ if (next[key] == null) {
10026
+ setStyle(style, key, "");
10027
+ }
10006
10028
  }
10007
10029
  }
10008
10030
  }
@@ -10026,9 +10048,11 @@ function patchStyle(el, prev, next) {
10026
10048
  el.removeAttribute("style");
10027
10049
  }
10028
10050
  }
10029
- if (vShowOldKey in el) {
10030
- el[vShowOldKey] = hasControlledDisplay ? style.display : "";
10031
- style.display = currentDisplay;
10051
+ if (vShowOriginalDisplay in el) {
10052
+ el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : "";
10053
+ if (el[vShowHidden]) {
10054
+ style.display = "none";
10055
+ }
10032
10056
  }
10033
10057
  }
10034
10058
  const semicolonRE = /[^\\];\s*$/;
@@ -10113,7 +10137,7 @@ function patchDOMProp(el, key, value, prevChildren, parentComponent, parentSuspe
10113
10137
  if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
10114
10138
  !tag.includes("-")) {
10115
10139
  el._value = value;
10116
- const oldValue = tag === "OPTION" ? el.getAttribute("value") : el.value;
10140
+ const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
10117
10141
  const newValue = value == null ? "" : value;
10118
10142
  if (oldValue !== newValue) {
10119
10143
  el.value = newValue;
@@ -10804,19 +10828,19 @@ const vModelSelect = {
10804
10828
  },
10805
10829
  // set value in mounted & updated because <select> relies on its children
10806
10830
  // <option>s.
10807
- mounted(el, { value, oldValue, modifiers: { number } }) {
10808
- setSelected(el, value, oldValue, number);
10831
+ mounted(el, { value, modifiers: { number } }) {
10832
+ setSelected(el, value, number);
10809
10833
  },
10810
10834
  beforeUpdate(el, _binding, vnode) {
10811
10835
  el[assignKey] = getModelAssigner(vnode);
10812
10836
  },
10813
- updated(el, { value, oldValue, modifiers: { number } }) {
10837
+ updated(el, { value, modifiers: { number } }) {
10814
10838
  if (!el._assigning) {
10815
- setSelected(el, value, oldValue, number);
10839
+ setSelected(el, value, number);
10816
10840
  }
10817
10841
  }
10818
10842
  };
10819
- function setSelected(el, value, oldValue, number) {
10843
+ function setSelected(el, value, number) {
10820
10844
  const isMultiple = el.multiple;
10821
10845
  const isArrayValue = isArray(value);
10822
10846
  if (isMultiple && !isArrayValue && !isSet(value)) {
@@ -10841,12 +10865,10 @@ function setSelected(el, value, oldValue, number) {
10841
10865
  } else {
10842
10866
  option.selected = value.has(optionValue);
10843
10867
  }
10844
- } else {
10845
- if (looseEqual(getValue(option), value)) {
10846
- if (el.selectedIndex !== i)
10847
- el.selectedIndex = i;
10848
- return;
10849
- }
10868
+ } else if (looseEqual(getValue(option), value)) {
10869
+ if (el.selectedIndex !== i)
10870
+ el.selectedIndex = i;
10871
+ return;
10850
10872
  }
10851
10873
  }
10852
10874
  if (!isMultiple && el.selectedIndex !== -1) {