@vue/compat 3.3.10 → 3.3.12

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.
@@ -235,20 +235,29 @@ const replacer = (_key, val) => {
235
235
  return replacer(_key, val.value);
236
236
  } else if (isMap(val)) {
237
237
  return {
238
- [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val2]) => {
239
- entries[`${key} =>`] = val2;
240
- return entries;
241
- }, {})
238
+ [`Map(${val.size})`]: [...val.entries()].reduce(
239
+ (entries, [key, val2], i) => {
240
+ entries[stringifySymbol(key, i) + " =>"] = val2;
241
+ return entries;
242
+ },
243
+ {}
244
+ )
242
245
  };
243
246
  } else if (isSet(val)) {
244
247
  return {
245
- [`Set(${val.size})`]: [...val.values()]
248
+ [`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v))
246
249
  };
250
+ } else if (isSymbol(val)) {
251
+ return stringifySymbol(val);
247
252
  } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
248
253
  return String(val);
249
254
  }
250
255
  return val;
251
256
  };
257
+ const stringifySymbol = (v, i = "") => {
258
+ var _a;
259
+ return isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v;
260
+ };
252
261
 
253
262
  function warn$1(msg, ...args) {
254
263
  console.warn(`[Vue warn] ${msg}`, ...args);
@@ -676,8 +685,13 @@ class BaseReactiveHandler {
676
685
  return isReadonly2;
677
686
  } else if (key === "__v_isShallow") {
678
687
  return shallow;
679
- } else if (key === "__v_raw" && receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target)) {
680
- return target;
688
+ } else if (key === "__v_raw") {
689
+ if (receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
690
+ // this means the reciever is a user proxy of the reactive proxy
691
+ Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
692
+ return target;
693
+ }
694
+ return;
681
695
  }
682
696
  const targetIsArray = isArray(target);
683
697
  if (!isReadonly2) {
@@ -713,17 +727,19 @@ class MutableReactiveHandler extends BaseReactiveHandler {
713
727
  }
714
728
  set(target, key, value, receiver) {
715
729
  let oldValue = target[key];
716
- if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
717
- return false;
718
- }
719
730
  if (!this._shallow) {
731
+ const isOldValueReadonly = isReadonly(oldValue);
720
732
  if (!isShallow(value) && !isReadonly(value)) {
721
733
  oldValue = toRaw(oldValue);
722
734
  value = toRaw(value);
723
735
  }
724
736
  if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
725
- oldValue.value = value;
726
- return true;
737
+ if (isOldValueReadonly) {
738
+ return false;
739
+ } else {
740
+ oldValue.value = value;
741
+ return true;
742
+ }
727
743
  }
728
744
  }
729
745
  const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
@@ -1698,13 +1714,16 @@ function queuePostFlushCb(cb) {
1698
1714
  }
1699
1715
  queueFlush();
1700
1716
  }
1701
- function flushPreFlushCbs(seen, i = isFlushing ? flushIndex + 1 : 0) {
1717
+ function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) {
1702
1718
  if (!!(process.env.NODE_ENV !== "production")) {
1703
1719
  seen = seen || /* @__PURE__ */ new Map();
1704
1720
  }
1705
1721
  for (; i < queue.length; i++) {
1706
1722
  const cb = queue[i];
1707
1723
  if (cb && cb.pre) {
1724
+ if (instance && cb.id !== instance.uid) {
1725
+ continue;
1726
+ }
1708
1727
  if (!!(process.env.NODE_ENV !== "production") && checkRecursiveUpdates(seen, cb)) {
1709
1728
  continue;
1710
1729
  }
@@ -3290,7 +3309,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
3290
3309
  timeout: typeof timeout === "number" ? timeout : -1,
3291
3310
  activeBranch: null,
3292
3311
  pendingBranch: null,
3293
- isInFallback: true,
3312
+ isInFallback: !isHydrating,
3294
3313
  isHydrating,
3295
3314
  isUnmounted: false,
3296
3315
  effects: [],
@@ -3376,6 +3395,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
3376
3395
  }
3377
3396
  const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, isSVG: isSVG2 } = suspense;
3378
3397
  triggerEvent(vnode2, "onFallback");
3398
+ const anchor2 = next(activeBranch);
3379
3399
  const mountFallback = () => {
3380
3400
  if (!suspense.isInFallback) {
3381
3401
  return;
@@ -3384,7 +3404,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
3384
3404
  null,
3385
3405
  fallbackVNode,
3386
3406
  container2,
3387
- next(activeBranch),
3407
+ anchor2,
3388
3408
  parentComponent2,
3389
3409
  null,
3390
3410
  // fallback tree will not have suspense context
@@ -6256,7 +6276,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
6256
6276
  return vm;
6257
6277
  }
6258
6278
  }
6259
- Vue.version = `2.6.14-compat:${"3.3.10"}`;
6279
+ Vue.version = `2.6.14-compat:${"3.3.12"}`;
6260
6280
  Vue.config = singletonApp.config;
6261
6281
  Vue.use = (p, ...options) => {
6262
6282
  if (p && isFunction(p.install)) {
@@ -7741,6 +7761,16 @@ function createHydrationFunctions(rendererInternals) {
7741
7761
  if (dirs) {
7742
7762
  invokeDirectiveHook(vnode, null, parentComponent, "created");
7743
7763
  }
7764
+ let needCallTransitionHooks = false;
7765
+ if (isTemplateNode(el)) {
7766
+ needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
7767
+ const content = el.content.firstChild;
7768
+ if (needCallTransitionHooks) {
7769
+ transition.beforeEnter(content);
7770
+ }
7771
+ replaceNode(content, el, parentComponent);
7772
+ vnode.el = el = content;
7773
+ }
7744
7774
  if (props) {
7745
7775
  if (forcePatch || !optimized || patchFlag & (16 | 32)) {
7746
7776
  for (const key in props) {
@@ -7773,16 +7803,6 @@ function createHydrationFunctions(rendererInternals) {
7773
7803
  if (vnodeHooks = props && props.onVnodeBeforeMount) {
7774
7804
  invokeVNodeHook(vnodeHooks, parentComponent, vnode);
7775
7805
  }
7776
- let needCallTransitionHooks = false;
7777
- if (isTemplateNode(el)) {
7778
- needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
7779
- const content = el.content.firstChild;
7780
- if (needCallTransitionHooks) {
7781
- transition.beforeEnter(content);
7782
- }
7783
- replaceNode(content, el, parentComponent);
7784
- vnode.el = el = content;
7785
- }
7786
7806
  if (dirs) {
7787
7807
  invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
7788
7808
  }
@@ -8931,7 +8951,7 @@ function baseCreateRenderer(options, createHydrationFns) {
8931
8951
  updateProps(instance, nextVNode.props, prevProps, optimized);
8932
8952
  updateSlots(instance, nextVNode.children, optimized);
8933
8953
  pauseTracking();
8934
- flushPreFlushCbs();
8954
+ flushPreFlushCbs(instance);
8935
8955
  resetTracking();
8936
8956
  };
8937
8957
  const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => {
@@ -10914,7 +10934,7 @@ function isMemoSame(cached, memo) {
10914
10934
  return true;
10915
10935
  }
10916
10936
 
10917
- const version = "3.3.10";
10937
+ const version = "3.3.12";
10918
10938
  const _ssrUtils = {
10919
10939
  createComponentInstance,
10920
10940
  setupComponent,
@@ -11368,6 +11388,69 @@ function initVShowForSSR() {
11368
11388
  };
11369
11389
  }
11370
11390
 
11391
+ const CSS_VAR_TEXT = Symbol(!!(process.env.NODE_ENV !== "production") ? "CSS_VAR_TEXT" : "");
11392
+ function useCssVars(getter) {
11393
+ const instance = getCurrentInstance();
11394
+ if (!instance) {
11395
+ !!(process.env.NODE_ENV !== "production") && warn(`useCssVars is called without current active component instance.`);
11396
+ return;
11397
+ }
11398
+ const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
11399
+ Array.from(
11400
+ document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
11401
+ ).forEach((node) => setVarsOnNode(node, vars));
11402
+ };
11403
+ const setVars = () => {
11404
+ const vars = getter(instance.proxy);
11405
+ setVarsOnVNode(instance.subTree, vars);
11406
+ updateTeleports(vars);
11407
+ };
11408
+ watchPostEffect(setVars);
11409
+ onMounted(() => {
11410
+ const ob = new MutationObserver(setVars);
11411
+ ob.observe(instance.subTree.el.parentNode, { childList: true });
11412
+ onUnmounted(() => ob.disconnect());
11413
+ });
11414
+ }
11415
+ function setVarsOnVNode(vnode, vars) {
11416
+ if (vnode.shapeFlag & 128) {
11417
+ const suspense = vnode.suspense;
11418
+ vnode = suspense.activeBranch;
11419
+ if (suspense.pendingBranch && !suspense.isHydrating) {
11420
+ suspense.effects.push(() => {
11421
+ setVarsOnVNode(suspense.activeBranch, vars);
11422
+ });
11423
+ }
11424
+ }
11425
+ while (vnode.component) {
11426
+ vnode = vnode.component.subTree;
11427
+ }
11428
+ if (vnode.shapeFlag & 1 && vnode.el) {
11429
+ setVarsOnNode(vnode.el, vars);
11430
+ } else if (vnode.type === Fragment) {
11431
+ vnode.children.forEach((c) => setVarsOnVNode(c, vars));
11432
+ } else if (vnode.type === Static) {
11433
+ let { el, anchor } = vnode;
11434
+ while (el) {
11435
+ setVarsOnNode(el, vars);
11436
+ if (el === anchor)
11437
+ break;
11438
+ el = el.nextSibling;
11439
+ }
11440
+ }
11441
+ }
11442
+ function setVarsOnNode(el, vars) {
11443
+ if (el.nodeType === 1) {
11444
+ const style = el.style;
11445
+ let cssText = "";
11446
+ for (const key in vars) {
11447
+ style.setProperty(`--${key}`, vars[key]);
11448
+ cssText += `--${key}: ${vars[key]};`;
11449
+ }
11450
+ style[CSS_VAR_TEXT] = cssText;
11451
+ }
11452
+ }
11453
+
11371
11454
  function patchStyle(el, prev, next) {
11372
11455
  const style = el.style;
11373
11456
  const isCssString = isString(next);
@@ -11386,6 +11469,10 @@ function patchStyle(el, prev, next) {
11386
11469
  const currentDisplay = style.display;
11387
11470
  if (isCssString) {
11388
11471
  if (prev !== next) {
11472
+ const cssVarText = style[CSS_VAR_TEXT];
11473
+ if (cssVarText) {
11474
+ next += ";" + cssVarText;
11475
+ }
11389
11476
  style.cssText = next;
11390
11477
  }
11391
11478
  } else if (prev) {
@@ -11682,7 +11769,9 @@ function shouldSetAsProp(el, key, value, isSVG) {
11682
11769
  }
11683
11770
  if (key === "width" || key === "height") {
11684
11771
  const tag = el.tagName;
11685
- return !(tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE");
11772
+ if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") {
11773
+ return false;
11774
+ }
11686
11775
  }
11687
11776
  if (isNativeOn(key) && isString(value)) {
11688
11777
  return false;
@@ -11933,65 +12022,6 @@ function useCssModule(name = "$style") {
11933
12022
  }
11934
12023
  }
11935
12024
 
11936
- function useCssVars(getter) {
11937
- const instance = getCurrentInstance();
11938
- if (!instance) {
11939
- !!(process.env.NODE_ENV !== "production") && warn(`useCssVars is called without current active component instance.`);
11940
- return;
11941
- }
11942
- const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
11943
- Array.from(
11944
- document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
11945
- ).forEach((node) => setVarsOnNode(node, vars));
11946
- };
11947
- const setVars = () => {
11948
- const vars = getter(instance.proxy);
11949
- setVarsOnVNode(instance.subTree, vars);
11950
- updateTeleports(vars);
11951
- };
11952
- watchPostEffect(setVars);
11953
- onMounted(() => {
11954
- const ob = new MutationObserver(setVars);
11955
- ob.observe(instance.subTree.el.parentNode, { childList: true });
11956
- onUnmounted(() => ob.disconnect());
11957
- });
11958
- }
11959
- function setVarsOnVNode(vnode, vars) {
11960
- if (vnode.shapeFlag & 128) {
11961
- const suspense = vnode.suspense;
11962
- vnode = suspense.activeBranch;
11963
- if (suspense.pendingBranch && !suspense.isHydrating) {
11964
- suspense.effects.push(() => {
11965
- setVarsOnVNode(suspense.activeBranch, vars);
11966
- });
11967
- }
11968
- }
11969
- while (vnode.component) {
11970
- vnode = vnode.component.subTree;
11971
- }
11972
- if (vnode.shapeFlag & 1 && vnode.el) {
11973
- setVarsOnNode(vnode.el, vars);
11974
- } else if (vnode.type === Fragment) {
11975
- vnode.children.forEach((c) => setVarsOnVNode(c, vars));
11976
- } else if (vnode.type === Static) {
11977
- let { el, anchor } = vnode;
11978
- while (el) {
11979
- setVarsOnNode(el, vars);
11980
- if (el === anchor)
11981
- break;
11982
- el = el.nextSibling;
11983
- }
11984
- }
11985
- }
11986
- function setVarsOnNode(el, vars) {
11987
- if (el.nodeType === 1) {
11988
- const style = el.style;
11989
- for (const key in vars) {
11990
- style.setProperty(`--${key}`, vars[key]);
11991
- }
11992
- }
11993
- }
11994
-
11995
12025
  const positionMap = /* @__PURE__ */ new WeakMap();
11996
12026
  const newPositionMap = /* @__PURE__ */ new WeakMap();
11997
12027
  const moveCbKey = Symbol("_moveCb");
@@ -238,20 +238,29 @@ var Vue = (function () {
238
238
  return replacer(_key, val.value);
239
239
  } else if (isMap(val)) {
240
240
  return {
241
- [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val2]) => {
242
- entries[`${key} =>`] = val2;
243
- return entries;
244
- }, {})
241
+ [`Map(${val.size})`]: [...val.entries()].reduce(
242
+ (entries, [key, val2], i) => {
243
+ entries[stringifySymbol(key, i) + " =>"] = val2;
244
+ return entries;
245
+ },
246
+ {}
247
+ )
245
248
  };
246
249
  } else if (isSet(val)) {
247
250
  return {
248
- [`Set(${val.size})`]: [...val.values()]
251
+ [`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v))
249
252
  };
253
+ } else if (isSymbol(val)) {
254
+ return stringifySymbol(val);
250
255
  } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
251
256
  return String(val);
252
257
  }
253
258
  return val;
254
259
  };
260
+ const stringifySymbol = (v, i = "") => {
261
+ var _a;
262
+ return isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v;
263
+ };
255
264
 
256
265
  function warn$1(msg, ...args) {
257
266
  console.warn(`[Vue warn] ${msg}`, ...args);
@@ -675,8 +684,13 @@ var Vue = (function () {
675
684
  return isReadonly2;
676
685
  } else if (key === "__v_isShallow") {
677
686
  return shallow;
678
- } else if (key === "__v_raw" && receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target)) {
679
- return target;
687
+ } else if (key === "__v_raw") {
688
+ if (receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
689
+ // this means the reciever is a user proxy of the reactive proxy
690
+ Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
691
+ return target;
692
+ }
693
+ return;
680
694
  }
681
695
  const targetIsArray = isArray(target);
682
696
  if (!isReadonly2) {
@@ -712,17 +726,19 @@ var Vue = (function () {
712
726
  }
713
727
  set(target, key, value, receiver) {
714
728
  let oldValue = target[key];
715
- if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
716
- return false;
717
- }
718
729
  if (!this._shallow) {
730
+ const isOldValueReadonly = isReadonly(oldValue);
719
731
  if (!isShallow(value) && !isReadonly(value)) {
720
732
  oldValue = toRaw(oldValue);
721
733
  value = toRaw(value);
722
734
  }
723
735
  if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
724
- oldValue.value = value;
725
- return true;
736
+ if (isOldValueReadonly) {
737
+ return false;
738
+ } else {
739
+ oldValue.value = value;
740
+ return true;
741
+ }
726
742
  }
727
743
  }
728
744
  const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
@@ -1687,13 +1703,16 @@ var Vue = (function () {
1687
1703
  }
1688
1704
  queueFlush();
1689
1705
  }
1690
- function flushPreFlushCbs(seen, i = isFlushing ? flushIndex + 1 : 0) {
1706
+ function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) {
1691
1707
  {
1692
1708
  seen = seen || /* @__PURE__ */ new Map();
1693
1709
  }
1694
1710
  for (; i < queue.length; i++) {
1695
1711
  const cb = queue[i];
1696
1712
  if (cb && cb.pre) {
1713
+ if (instance && cb.id !== instance.uid) {
1714
+ continue;
1715
+ }
1697
1716
  if (checkRecursiveUpdates(seen, cb)) {
1698
1717
  continue;
1699
1718
  }
@@ -3276,7 +3295,7 @@ If this is a native custom element, make sure to exclude it from component resol
3276
3295
  timeout: typeof timeout === "number" ? timeout : -1,
3277
3296
  activeBranch: null,
3278
3297
  pendingBranch: null,
3279
- isInFallback: true,
3298
+ isInFallback: !isHydrating,
3280
3299
  isHydrating,
3281
3300
  isUnmounted: false,
3282
3301
  effects: [],
@@ -3362,6 +3381,7 @@ If this is a native custom element, make sure to exclude it from component resol
3362
3381
  }
3363
3382
  const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, isSVG: isSVG2 } = suspense;
3364
3383
  triggerEvent(vnode2, "onFallback");
3384
+ const anchor2 = next(activeBranch);
3365
3385
  const mountFallback = () => {
3366
3386
  if (!suspense.isInFallback) {
3367
3387
  return;
@@ -3370,7 +3390,7 @@ If this is a native custom element, make sure to exclude it from component resol
3370
3390
  null,
3371
3391
  fallbackVNode,
3372
3392
  container2,
3373
- next(activeBranch),
3393
+ anchor2,
3374
3394
  parentComponent2,
3375
3395
  null,
3376
3396
  // fallback tree will not have suspense context
@@ -6211,7 +6231,7 @@ If this is a native custom element, make sure to exclude it from component resol
6211
6231
  return vm;
6212
6232
  }
6213
6233
  }
6214
- Vue.version = `2.6.14-compat:${"3.3.10"}`;
6234
+ Vue.version = `2.6.14-compat:${"3.3.12"}`;
6215
6235
  Vue.config = singletonApp.config;
6216
6236
  Vue.use = (p, ...options) => {
6217
6237
  if (p && isFunction(p.install)) {
@@ -7693,6 +7713,16 @@ If you want to remount the same app, move your app creation logic into a factory
7693
7713
  if (dirs) {
7694
7714
  invokeDirectiveHook(vnode, null, parentComponent, "created");
7695
7715
  }
7716
+ let needCallTransitionHooks = false;
7717
+ if (isTemplateNode(el)) {
7718
+ needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
7719
+ const content = el.content.firstChild;
7720
+ if (needCallTransitionHooks) {
7721
+ transition.beforeEnter(content);
7722
+ }
7723
+ replaceNode(content, el, parentComponent);
7724
+ vnode.el = el = content;
7725
+ }
7696
7726
  if (props) {
7697
7727
  if (forcePatch || !optimized || patchFlag & (16 | 32)) {
7698
7728
  for (const key in props) {
@@ -7725,16 +7755,6 @@ If you want to remount the same app, move your app creation logic into a factory
7725
7755
  if (vnodeHooks = props && props.onVnodeBeforeMount) {
7726
7756
  invokeVNodeHook(vnodeHooks, parentComponent, vnode);
7727
7757
  }
7728
- let needCallTransitionHooks = false;
7729
- if (isTemplateNode(el)) {
7730
- needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
7731
- const content = el.content.firstChild;
7732
- if (needCallTransitionHooks) {
7733
- transition.beforeEnter(content);
7734
- }
7735
- replaceNode(content, el, parentComponent);
7736
- vnode.el = el = content;
7737
- }
7738
7758
  if (dirs) {
7739
7759
  invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
7740
7760
  }
@@ -8849,7 +8869,7 @@ If you want to remount the same app, move your app creation logic into a factory
8849
8869
  updateProps(instance, nextVNode.props, prevProps, optimized);
8850
8870
  updateSlots(instance, nextVNode.children, optimized);
8851
8871
  pauseTracking();
8852
- flushPreFlushCbs();
8872
+ flushPreFlushCbs(instance);
8853
8873
  resetTracking();
8854
8874
  };
8855
8875
  const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => {
@@ -10798,7 +10818,7 @@ Component that was made reactive: `,
10798
10818
  return true;
10799
10819
  }
10800
10820
 
10801
- const version = "3.3.10";
10821
+ const version = "3.3.12";
10802
10822
  const ssrUtils = null;
10803
10823
  const resolveFilter = resolveFilter$1 ;
10804
10824
  const _compatUtils = {
@@ -11237,6 +11257,69 @@ Component that was made reactive: `,
11237
11257
  el.style.display = value ? el[vShowOldKey] : "none";
11238
11258
  }
11239
11259
 
11260
+ const CSS_VAR_TEXT = Symbol("CSS_VAR_TEXT" );
11261
+ function useCssVars(getter) {
11262
+ const instance = getCurrentInstance();
11263
+ if (!instance) {
11264
+ warn(`useCssVars is called without current active component instance.`);
11265
+ return;
11266
+ }
11267
+ const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
11268
+ Array.from(
11269
+ document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
11270
+ ).forEach((node) => setVarsOnNode(node, vars));
11271
+ };
11272
+ const setVars = () => {
11273
+ const vars = getter(instance.proxy);
11274
+ setVarsOnVNode(instance.subTree, vars);
11275
+ updateTeleports(vars);
11276
+ };
11277
+ watchPostEffect(setVars);
11278
+ onMounted(() => {
11279
+ const ob = new MutationObserver(setVars);
11280
+ ob.observe(instance.subTree.el.parentNode, { childList: true });
11281
+ onUnmounted(() => ob.disconnect());
11282
+ });
11283
+ }
11284
+ function setVarsOnVNode(vnode, vars) {
11285
+ if (vnode.shapeFlag & 128) {
11286
+ const suspense = vnode.suspense;
11287
+ vnode = suspense.activeBranch;
11288
+ if (suspense.pendingBranch && !suspense.isHydrating) {
11289
+ suspense.effects.push(() => {
11290
+ setVarsOnVNode(suspense.activeBranch, vars);
11291
+ });
11292
+ }
11293
+ }
11294
+ while (vnode.component) {
11295
+ vnode = vnode.component.subTree;
11296
+ }
11297
+ if (vnode.shapeFlag & 1 && vnode.el) {
11298
+ setVarsOnNode(vnode.el, vars);
11299
+ } else if (vnode.type === Fragment) {
11300
+ vnode.children.forEach((c) => setVarsOnVNode(c, vars));
11301
+ } else if (vnode.type === Static) {
11302
+ let { el, anchor } = vnode;
11303
+ while (el) {
11304
+ setVarsOnNode(el, vars);
11305
+ if (el === anchor)
11306
+ break;
11307
+ el = el.nextSibling;
11308
+ }
11309
+ }
11310
+ }
11311
+ function setVarsOnNode(el, vars) {
11312
+ if (el.nodeType === 1) {
11313
+ const style = el.style;
11314
+ let cssText = "";
11315
+ for (const key in vars) {
11316
+ style.setProperty(`--${key}`, vars[key]);
11317
+ cssText += `--${key}: ${vars[key]};`;
11318
+ }
11319
+ style[CSS_VAR_TEXT] = cssText;
11320
+ }
11321
+ }
11322
+
11240
11323
  function patchStyle(el, prev, next) {
11241
11324
  const style = el.style;
11242
11325
  const isCssString = isString(next);
@@ -11255,6 +11338,10 @@ Component that was made reactive: `,
11255
11338
  const currentDisplay = style.display;
11256
11339
  if (isCssString) {
11257
11340
  if (prev !== next) {
11341
+ const cssVarText = style[CSS_VAR_TEXT];
11342
+ if (cssVarText) {
11343
+ next += ";" + cssVarText;
11344
+ }
11258
11345
  style.cssText = next;
11259
11346
  }
11260
11347
  } else if (prev) {
@@ -11551,7 +11638,9 @@ Component that was made reactive: `,
11551
11638
  }
11552
11639
  if (key === "width" || key === "height") {
11553
11640
  const tag = el.tagName;
11554
- return !(tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE");
11641
+ if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") {
11642
+ return false;
11643
+ }
11555
11644
  }
11556
11645
  if (isNativeOn(key) && isString(value)) {
11557
11646
  return false;
@@ -11790,65 +11879,6 @@ Component that was made reactive: `,
11790
11879
  }
11791
11880
  }
11792
11881
 
11793
- function useCssVars(getter) {
11794
- const instance = getCurrentInstance();
11795
- if (!instance) {
11796
- warn(`useCssVars is called without current active component instance.`);
11797
- return;
11798
- }
11799
- const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
11800
- Array.from(
11801
- document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
11802
- ).forEach((node) => setVarsOnNode(node, vars));
11803
- };
11804
- const setVars = () => {
11805
- const vars = getter(instance.proxy);
11806
- setVarsOnVNode(instance.subTree, vars);
11807
- updateTeleports(vars);
11808
- };
11809
- watchPostEffect(setVars);
11810
- onMounted(() => {
11811
- const ob = new MutationObserver(setVars);
11812
- ob.observe(instance.subTree.el.parentNode, { childList: true });
11813
- onUnmounted(() => ob.disconnect());
11814
- });
11815
- }
11816
- function setVarsOnVNode(vnode, vars) {
11817
- if (vnode.shapeFlag & 128) {
11818
- const suspense = vnode.suspense;
11819
- vnode = suspense.activeBranch;
11820
- if (suspense.pendingBranch && !suspense.isHydrating) {
11821
- suspense.effects.push(() => {
11822
- setVarsOnVNode(suspense.activeBranch, vars);
11823
- });
11824
- }
11825
- }
11826
- while (vnode.component) {
11827
- vnode = vnode.component.subTree;
11828
- }
11829
- if (vnode.shapeFlag & 1 && vnode.el) {
11830
- setVarsOnNode(vnode.el, vars);
11831
- } else if (vnode.type === Fragment) {
11832
- vnode.children.forEach((c) => setVarsOnVNode(c, vars));
11833
- } else if (vnode.type === Static) {
11834
- let { el, anchor } = vnode;
11835
- while (el) {
11836
- setVarsOnNode(el, vars);
11837
- if (el === anchor)
11838
- break;
11839
- el = el.nextSibling;
11840
- }
11841
- }
11842
- }
11843
- function setVarsOnNode(el, vars) {
11844
- if (el.nodeType === 1) {
11845
- const style = el.style;
11846
- for (const key in vars) {
11847
- style.setProperty(`--${key}`, vars[key]);
11848
- }
11849
- }
11850
- }
11851
-
11852
11882
  const positionMap = /* @__PURE__ */ new WeakMap();
11853
11883
  const newPositionMap = /* @__PURE__ */ new WeakMap();
11854
11884
  const moveCbKey = Symbol("_moveCb");