@vue/compat 3.4.18 → 3.4.20

package/dist/vue.global.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compat v3.4.18
+* @vue/compat v3.4.20
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -798,20 +798,20 @@ var Vue = (function () {
     return obj.hasOwnProperty(key);
   }
   class BaseReactiveHandler {
-    constructor(_isReadonly = false, _shallow = false) {
+    constructor(_isReadonly = false, _isShallow = false) {
       this._isReadonly = _isReadonly;
-      this._shallow = _shallow;
+      this._isShallow = _isShallow;
     }
     get(target, key, receiver) {
-      const isReadonly2 = this._isReadonly, shallow = this._shallow;
+      const isReadonly2 = this._isReadonly, isShallow2 = this._isShallow;
       if (key === "__v_isReactive") {
         return !isReadonly2;
       } else if (key === "__v_isReadonly") {
         return isReadonly2;
       } else if (key === "__v_isShallow") {
-        return shallow;
+        return isShallow2;
       } else if (key === "__v_raw") {
-        if (receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
+        if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
         // this means the reciever is a user proxy of the reactive proxy
         Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
           return target;
@@ -834,7 +834,7 @@ var Vue = (function () {
       if (!isReadonly2) {
         track(target, "get", key);
       }
-      if (shallow) {
+      if (isShallow2) {
         return res;
       }
       if (isRef(res)) {
@@ -847,12 +847,12 @@ var Vue = (function () {
     }
   }
   class MutableReactiveHandler extends BaseReactiveHandler {
-    constructor(shallow = false) {
-      super(false, shallow);
+    constructor(isShallow2 = false) {
+      super(false, isShallow2);
     }
     set(target, key, value, receiver) {
       let oldValue = target[key];
-      if (!this._shallow) {
+      if (!this._isShallow) {
         const isOldValueReadonly = isReadonly(oldValue);
         if (!isShallow(value) && !isReadonly(value)) {
           oldValue = toRaw(oldValue);
@@ -904,8 +904,8 @@ var Vue = (function () {
     }
   }
   class ReadonlyReactiveHandler extends BaseReactiveHandler {
-    constructor(shallow = false) {
-      super(true, shallow);
+    constructor(isShallow2 = false) {
+      super(true, isShallow2);
     }
     set(target, key) {
       {
@@ -1076,7 +1076,7 @@ var Vue = (function () {
     return function(...args) {
       {
         const key = args[0] ? `on key "${args[0]}" ` : ``;
-        console.warn(
+        warn$2(
           `${capitalize(type)} operation ${key}failed: target is readonly.`,
           toRaw(this)
         );
@@ -1214,7 +1214,7 @@ var Vue = (function () {
     const rawKey = toRaw(key);
     if (rawKey !== key && has2.call(target, rawKey)) {
       const type = toRawType(target);
-      console.warn(
+      warn$2(
         `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.`
       );
     }
@@ -1283,7 +1283,7 @@ var Vue = (function () {
   function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandlers, proxyMap) {
     if (!isObject(target)) {
       {
-        console.warn(`value cannot be made reactive: ${String(target)}`);
+        warn$2(`value cannot be made reactive: ${String(target)}`);
       }
       return target;
     }
@@ -1333,8 +1333,10 @@ var Vue = (function () {
   const toReactive = (value) => isObject(value) ? reactive(value) : value;
   const toReadonly = (value) => isObject(value) ? readonly(value) : value;
 
+  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`;
   class ComputedRefImpl {
     constructor(getter, _setter, isReadonly, isSSR) {
+      this.getter = getter;
       this._setter = _setter;
       this.dep = void 0;
       this.__v_isRef = true;
@@ -1357,6 +1359,11 @@ var Vue = (function () {
       }
       trackRefValue(self);
       if (self.effect._dirtyLevel >= 2) {
+        if (this._warnRecursive) {
+          warn$2(COMPUTED_SIDE_EFFECT_WARN, `
+
+getter: `, this.getter);
+        }
         triggerRefValue(self, 2);
       }
       return self._value;
@@ -1380,7 +1387,7 @@ var Vue = (function () {
     if (onlyGetter) {
       getter = getterOrOptions;
       setter = () => {
-        console.warn("Write operation failed: computed value is readonly");
+        warn$2("Write operation failed: computed value is readonly");
       } ;
     } else {
       getter = getterOrOptions.get;
@@ -1512,7 +1519,7 @@ var Vue = (function () {
   }
   function toRefs(object) {
     if (!isProxy(object)) {
-      console.warn(`toRefs() expects a reactive object but received a plain one.`);
+      warn$2(`toRefs() expects a reactive object but received a plain one.`);
     }
     const ret = isArray(object) ? new Array(object.length) : {};
     for (const key in object) {
@@ -1754,13 +1761,11 @@ var Vue = (function () {
     [14]: "scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core ."
   };
   function callWithErrorHandling(fn, instance, type, args) {
-    let res;
     try {
-      res = args ? fn(...args) : fn();
+      return args ? fn(...args) : fn();
     } catch (err) {
       handleError(err, instance, type);
     }
-    return res;
   }
   function callWithAsyncErrorHandling(fn, instance, type, args) {
     if (isFunction(fn)) {
@@ -3286,6 +3291,8 @@ If this is a native custom element, make sure to exclude it from component resol
       } else {
         if (parentSuspense && parentSuspense.deps > 0) {
           n2.suspense = n1.suspense;
+          n2.suspense.vnode = n2;
+          n2.el = n1.el;
           return;
         }
         patchSuspense(
@@ -4263,7 +4270,6 @@ If this is a native custom element, make sure to exclude it from component resol
     setup(props, { slots }) {
       const instance = getCurrentInstance();
       const state = useTransitionState();
-      let prevTransitionKey;
       return () => {
         const children = slots.default && getTransitionRawChildren(slots.default(), true);
         if (!children || !children.length) {
@@ -4306,18 +4312,7 @@ If this is a native custom element, make sure to exclude it from component resol
         setTransitionHooks(innerChild, enterHooks);
         const oldChild = instance.subTree;
         const oldInnerChild = oldChild && getKeepAliveChild(oldChild);
-        let transitionKeyChanged = false;
-        const { getTransitionKey } = innerChild.type;
-        if (getTransitionKey) {
-          const key = getTransitionKey();
-          if (prevTransitionKey === void 0) {
-            prevTransitionKey = key;
-          } else if (key !== prevTransitionKey) {
-            prevTransitionKey = key;
-            transitionKeyChanged = true;
-          }
-        }
-        if (oldInnerChild && oldInnerChild.type !== Comment && (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {
+        if (oldInnerChild && oldInnerChild.type !== Comment && !isSameVNodeType(innerChild, oldInnerChild)) {
           const leavingHooks = resolveTransitionHooks(
             oldInnerChild,
             rawProps,
@@ -6499,7 +6494,7 @@ If this is a native custom element, make sure to exclude it from component resol
         return vm;
       }
     }
-    Vue.version = `2.6.14-compat:${"3.4.18"}`;
+    Vue.version = `2.6.14-compat:${"3.4.20"}`;
     Vue.config = singletonApp.config;
     Vue.use = (p, ...options) => {
       if (p && isFunction(p.install)) {
@@ -7444,8 +7439,16 @@ If you want to remount the same app, move your app creation logic into a factory
     return false;
   }
   function getType(ctor) {
-    const match = ctor && ctor.toString().match(/^\s*(function|class) (\w+)/);
-    return match ? match[2] : ctor === null ? "null" : "";
+    if (ctor === null) {
+      return "null";
+    }
+    if (typeof ctor === "function") {
+      return ctor.name || "";
+    } else if (typeof ctor === "object") {
+      const name = ctor.constructor && ctor.constructor.name;
+      return name || "";
+    }
+    return "";
   }
   function isSameType(a, b) {
     return getType(a) === getType(b);
@@ -8244,9 +8247,12 @@ Server rendered element contains fewer child nodes than client vdom.`
           }
         }
       }
-      const cssVars = (_a = instance == null ? void 0 : instance.getCssVars) == null ? void 0 : _a.call(instance);
-      for (const key2 in cssVars) {
-        expectedMap.set(`--${key2}`, String(cssVars[key2]));
+      const root = instance == null ? void 0 : instance.subTree;
+      if (vnode === root || (root == null ? void 0 : root.type) === Fragment && root.children.includes(vnode)) {
+        const cssVars = (_a = instance == null ? void 0 : instance.getCssVars) == null ? void 0 : _a.call(instance);
+        for (const key2 in cssVars) {
+          expectedMap.set(`--${key2}`, String(cssVars[key2]));
+        }
       }
       if (!isMapEqual(actualMap, expectedMap)) {
         mismatchType = mismatchKey = "style";
@@ -10736,9 +10742,8 @@ Component that was made reactive: `,
     internalSetCurrentInstance(null);
   };
   const isBuiltInTag = /* @__PURE__ */ makeMap("slot,component");
-  function validateComponentName(name, config) {
-    const appIsNativeTag = config.isNativeTag || NO;
-    if (isBuiltInTag(name) || appIsNativeTag(name)) {
+  function validateComponentName(name, { isNativeTag }) {
+    if (isBuiltInTag(name) || isNativeTag(name)) {
       warn$1(
         "Do not use built-in or reserved HTML elements as component id: " + name
       );
@@ -11043,7 +11048,14 @@ Component that was made reactive: `,
   }
 
   const computed = (getterOrOptions, debugOptions) => {
-    return computed$1(getterOrOptions, debugOptions, isInSSRComponentSetup);
+    const c = computed$1(getterOrOptions, debugOptions, isInSSRComponentSetup);
+    {
+      const i = getCurrentInstance();
+      if (i && i.appContext.config.warnRecursiveComputed) {
+        c._warnRecursive = true;
+      }
+    }
+    return c;
   };
 
   function useModel(props, name, options = EMPTY_OBJ) {
@@ -11321,7 +11333,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.4.18";
+  const version = "3.4.20";
   const warn = warn$1 ;
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const devtools = devtools$1 ;
@@ -11726,10 +11738,11 @@ Component that was made reactive: `,
     }
   }
 
-  const vShowOldKey = Symbol("_vod");
+  const vShowOriginalDisplay = Symbol("_vod");
+  const vShowHidden = Symbol("_vsh");
   const vShow = {
     beforeMount(el, { value }, { transition }) {
-      el[vShowOldKey] = el.style.display === "none" ? "" : el.style.display;
+      el[vShowOriginalDisplay] = el.style.display === "none" ? "" : el.style.display;
       if (transition && value) {
         transition.beforeEnter(el);
       } else {
@@ -11742,7 +11755,7 @@ Component that was made reactive: `,
       }
     },
     updated(el, { value, oldValue }, { transition }) {
-      if (!value === !oldValue && el.style.display === el[vShowOldKey])
+      if (!value === !oldValue)
         return;
       if (transition) {
         if (value) {
@@ -11766,7 +11779,8 @@ Component that was made reactive: `,
     vShow.name = "show";
   }
   function setDisplay(el, value) {
-    el.style.display = value ? el[vShowOldKey] : "none";
+    el.style.display = value ? el[vShowOriginalDisplay] : "none";
+    el[vShowHidden] = !value;
   }
 
   const CSS_VAR_TEXT = Symbol("CSS_VAR_TEXT" );
@@ -11839,13 +11853,21 @@ Component that was made reactive: `,
   function patchStyle(el, prev, next) {
     const style = el.style;
     const isCssString = isString(next);
-    const currentDisplay = style.display;
     let hasControlledDisplay = false;
     if (next && !isCssString) {
-      if (prev && !isString(prev)) {
-        for (const key in prev) {
-          if (next[key] == null) {
-            setStyle(style, key, "");
+      if (prev) {
+        if (!isString(prev)) {
+          for (const key in prev) {
+            if (next[key] == null) {
+              setStyle(style, key, "");
+            }
+          }
+        } else {
+          for (const prevStyle of prev.split(";")) {
+            const key = prevStyle.slice(0, prevStyle.indexOf(":")).trim();
+            if (next[key] == null) {
+              setStyle(style, key, "");
+            }
           }
         }
       }
@@ -11869,9 +11891,11 @@ Component that was made reactive: `,
         el.removeAttribute("style");
       }
     }
-    if (vShowOldKey in el) {
-      el[vShowOldKey] = hasControlledDisplay ? style.display : "";
-      style.display = currentDisplay;
+    if (vShowOriginalDisplay in el) {
+      el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : "";
+      if (el[vShowHidden]) {
+        style.display = "none";
+      }
     }
   }
   const semicolonRE = /[^\\];\s*$/;
@@ -11983,7 +12007,7 @@ Component that was made reactive: `,
     if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
     !tag.includes("-")) {
       el._value = value;
-      const oldValue = tag === "OPTION" ? el.getAttribute("value") : el.value;
+      const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
       const newValue = value == null ? "" : value;
       if (oldValue !== newValue) {
         el.value = newValue;
@@ -12687,19 +12711,19 @@ Component that was made reactive: `,
     },
     // set value in mounted & updated because <select> relies on its children
     // <option>s.
-    mounted(el, { value, oldValue, modifiers: { number } }) {
-      setSelected(el, value, oldValue, number);
+    mounted(el, { value, modifiers: { number } }) {
+      setSelected(el, value, number);
     },
     beforeUpdate(el, _binding, vnode) {
       el[assignKey] = getModelAssigner(vnode);
     },
-    updated(el, { value, oldValue, modifiers: { number } }) {
+    updated(el, { value, modifiers: { number } }) {
       if (!el._assigning) {
-        setSelected(el, value, oldValue, number);
+        setSelected(el, value, number);
       }
     }
   };
-  function setSelected(el, value, oldValue, number) {
+  function setSelected(el, value, number) {
     const isMultiple = el.multiple;
     const isArrayValue = isArray(value);
     if (isMultiple && !isArrayValue && !isSet(value)) {
@@ -12724,12 +12748,10 @@ Component that was made reactive: `,
         } else {
           option.selected = value.has(optionValue);
         }
-      } else {
-        if (looseEqual(getValue(option), value)) {
-          if (el.selectedIndex !== i)
-            el.selectedIndex = i;
-          return;
-        }
+      } else if (looseEqual(getValue(option), value)) {
+        if (el.selectedIndex !== i)
+          el.selectedIndex = i;
+        return;
       }
     }
     if (!isMultiple && el.selectedIndex !== -1) {
@@ -13738,11 +13760,10 @@ Make sure to use the production build (*.prod.js) when deploying for production.
         } else if (this.inSFCRoot) {
           this.state = 34;
         } else if (!this.inXML) {
-          const lower = c | 32;
-          if (lower === 116) {
+          if (c === 116) {
             this.state = 30;
           } else {
-            this.state = lower === 115 ? 29 : 6;
+            this.state = c === 115 ? 29 : 6;
           }
         } else {
           this.state = 6;
@@ -14014,10 +14035,9 @@ Make sure to use the production build (*.prod.js) when deploying for production.
       }
     }
     stateBeforeSpecialS(c) {
-      const lower = c | 32;
-      if (lower === Sequences.ScriptEnd[3]) {
+      if (c === Sequences.ScriptEnd[3]) {
         this.startSpecial(Sequences.ScriptEnd, 4);
-      } else if (lower === Sequences.StyleEnd[3]) {
+      } else if (c === Sequences.StyleEnd[3]) {
         this.startSpecial(Sequences.StyleEnd, 4);
       } else {
         this.state = 6;
@@ -14025,10 +14045,9 @@ Make sure to use the production build (*.prod.js) when deploying for production.
       }
     }
     stateBeforeSpecialT(c) {
-      const lower = c | 32;
-      if (lower === Sequences.TitleEnd[3]) {
+      if (c === Sequences.TitleEnd[3]) {
         this.startSpecial(Sequences.TitleEnd, 4);
-      } else if (lower === Sequences.TextareaEnd[3]) {
+      } else if (c === Sequences.TextareaEnd[3]) {
         this.startSpecial(Sequences.TextareaEnd, 4);
       } else {
         this.state = 6;