@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.
@@ -300,20 +300,29 @@ const replacer = (_key, val) => {
300
300
  return replacer(_key, val.value);
301
301
  } else if (isMap(val)) {
302
302
  return {
303
- [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val2]) => {
304
- entries[`${key} =>`] = val2;
305
- return entries;
306
- }, {})
303
+ [`Map(${val.size})`]: [...val.entries()].reduce(
304
+ (entries, [key, val2], i) => {
305
+ entries[stringifySymbol(key, i) + " =>"] = val2;
306
+ return entries;
307
+ },
308
+ {}
309
+ )
307
310
  };
308
311
  } else if (isSet(val)) {
309
312
  return {
310
- [`Set(${val.size})`]: [...val.values()]
313
+ [`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v))
311
314
  };
315
+ } else if (isSymbol(val)) {
316
+ return stringifySymbol(val);
312
317
  } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
313
318
  return String(val);
314
319
  }
315
320
  return val;
316
321
  };
322
+ const stringifySymbol = (v, i = "") => {
323
+ var _a;
324
+ return isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v;
325
+ };
317
326
 
318
327
  function warn$1(msg, ...args) {
319
328
  console.warn(`[Vue warn] ${msg}`, ...args);
@@ -741,8 +750,13 @@ class BaseReactiveHandler {
741
750
  return isReadonly2;
742
751
  } else if (key === "__v_isShallow") {
743
752
  return shallow;
744
- } else if (key === "__v_raw" && receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target)) {
745
- return target;
753
+ } else if (key === "__v_raw") {
754
+ if (receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
755
+ // this means the reciever is a user proxy of the reactive proxy
756
+ Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
757
+ return target;
758
+ }
759
+ return;
746
760
  }
747
761
  const targetIsArray = isArray(target);
748
762
  if (!isReadonly2) {
@@ -778,17 +792,19 @@ class MutableReactiveHandler extends BaseReactiveHandler {
778
792
  }
779
793
  set(target, key, value, receiver) {
780
794
  let oldValue = target[key];
781
- if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
782
- return false;
783
- }
784
795
  if (!this._shallow) {
796
+ const isOldValueReadonly = isReadonly(oldValue);
785
797
  if (!isShallow(value) && !isReadonly(value)) {
786
798
  oldValue = toRaw(oldValue);
787
799
  value = toRaw(value);
788
800
  }
789
801
  if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
790
- oldValue.value = value;
791
- return true;
802
+ if (isOldValueReadonly) {
803
+ return false;
804
+ } else {
805
+ oldValue.value = value;
806
+ return true;
807
+ }
792
808
  }
793
809
  }
794
810
  const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
@@ -1763,13 +1779,16 @@ function queuePostFlushCb(cb) {
1763
1779
  }
1764
1780
  queueFlush();
1765
1781
  }
1766
- function flushPreFlushCbs(seen, i = isFlushing ? flushIndex + 1 : 0) {
1782
+ function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) {
1767
1783
  if (!!(process.env.NODE_ENV !== "production")) {
1768
1784
  seen = seen || /* @__PURE__ */ new Map();
1769
1785
  }
1770
1786
  for (; i < queue.length; i++) {
1771
1787
  const cb = queue[i];
1772
1788
  if (cb && cb.pre) {
1789
+ if (instance && cb.id !== instance.uid) {
1790
+ continue;
1791
+ }
1773
1792
  if (!!(process.env.NODE_ENV !== "production") && checkRecursiveUpdates(seen, cb)) {
1774
1793
  continue;
1775
1794
  }
@@ -3355,7 +3374,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
3355
3374
  timeout: typeof timeout === "number" ? timeout : -1,
3356
3375
  activeBranch: null,
3357
3376
  pendingBranch: null,
3358
- isInFallback: true,
3377
+ isInFallback: !isHydrating,
3359
3378
  isHydrating,
3360
3379
  isUnmounted: false,
3361
3380
  effects: [],
@@ -3441,6 +3460,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
3441
3460
  }
3442
3461
  const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, isSVG: isSVG2 } = suspense;
3443
3462
  triggerEvent(vnode2, "onFallback");
3463
+ const anchor2 = next(activeBranch);
3444
3464
  const mountFallback = () => {
3445
3465
  if (!suspense.isInFallback) {
3446
3466
  return;
@@ -3449,7 +3469,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
3449
3469
  null,
3450
3470
  fallbackVNode,
3451
3471
  container2,
3452
- next(activeBranch),
3472
+ anchor2,
3453
3473
  parentComponent2,
3454
3474
  null,
3455
3475
  // fallback tree will not have suspense context
@@ -6321,7 +6341,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
6321
6341
  return vm;
6322
6342
  }
6323
6343
  }
6324
- Vue.version = `2.6.14-compat:${"3.3.10"}`;
6344
+ Vue.version = `2.6.14-compat:${"3.3.12"}`;
6325
6345
  Vue.config = singletonApp.config;
6326
6346
  Vue.use = (p, ...options) => {
6327
6347
  if (p && isFunction(p.install)) {
@@ -7806,6 +7826,16 @@ function createHydrationFunctions(rendererInternals) {
7806
7826
  if (dirs) {
7807
7827
  invokeDirectiveHook(vnode, null, parentComponent, "created");
7808
7828
  }
7829
+ let needCallTransitionHooks = false;
7830
+ if (isTemplateNode(el)) {
7831
+ needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
7832
+ const content = el.content.firstChild;
7833
+ if (needCallTransitionHooks) {
7834
+ transition.beforeEnter(content);
7835
+ }
7836
+ replaceNode(content, el, parentComponent);
7837
+ vnode.el = el = content;
7838
+ }
7809
7839
  if (props) {
7810
7840
  if (forcePatch || !optimized || patchFlag & (16 | 32)) {
7811
7841
  for (const key in props) {
@@ -7838,16 +7868,6 @@ function createHydrationFunctions(rendererInternals) {
7838
7868
  if (vnodeHooks = props && props.onVnodeBeforeMount) {
7839
7869
  invokeVNodeHook(vnodeHooks, parentComponent, vnode);
7840
7870
  }
7841
- let needCallTransitionHooks = false;
7842
- if (isTemplateNode(el)) {
7843
- needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
7844
- const content = el.content.firstChild;
7845
- if (needCallTransitionHooks) {
7846
- transition.beforeEnter(content);
7847
- }
7848
- replaceNode(content, el, parentComponent);
7849
- vnode.el = el = content;
7850
- }
7851
7871
  if (dirs) {
7852
7872
  invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
7853
7873
  }
@@ -8996,7 +9016,7 @@ function baseCreateRenderer(options, createHydrationFns) {
8996
9016
  updateProps(instance, nextVNode.props, prevProps, optimized);
8997
9017
  updateSlots(instance, nextVNode.children, optimized);
8998
9018
  pauseTracking();
8999
- flushPreFlushCbs();
9019
+ flushPreFlushCbs(instance);
9000
9020
  resetTracking();
9001
9021
  };
9002
9022
  const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => {
@@ -10979,7 +10999,7 @@ function isMemoSame(cached, memo) {
10979
10999
  return true;
10980
11000
  }
10981
11001
 
10982
- const version = "3.3.10";
11002
+ const version = "3.3.12";
10983
11003
  const _ssrUtils = {
10984
11004
  createComponentInstance,
10985
11005
  setupComponent,
@@ -11433,6 +11453,69 @@ function initVShowForSSR() {
11433
11453
  };
11434
11454
  }
11435
11455
 
11456
+ const CSS_VAR_TEXT = Symbol(!!(process.env.NODE_ENV !== "production") ? "CSS_VAR_TEXT" : "");
11457
+ function useCssVars(getter) {
11458
+ const instance = getCurrentInstance();
11459
+ if (!instance) {
11460
+ !!(process.env.NODE_ENV !== "production") && warn(`useCssVars is called without current active component instance.`);
11461
+ return;
11462
+ }
11463
+ const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
11464
+ Array.from(
11465
+ document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
11466
+ ).forEach((node) => setVarsOnNode(node, vars));
11467
+ };
11468
+ const setVars = () => {
11469
+ const vars = getter(instance.proxy);
11470
+ setVarsOnVNode(instance.subTree, vars);
11471
+ updateTeleports(vars);
11472
+ };
11473
+ watchPostEffect(setVars);
11474
+ onMounted(() => {
11475
+ const ob = new MutationObserver(setVars);
11476
+ ob.observe(instance.subTree.el.parentNode, { childList: true });
11477
+ onUnmounted(() => ob.disconnect());
11478
+ });
11479
+ }
11480
+ function setVarsOnVNode(vnode, vars) {
11481
+ if (vnode.shapeFlag & 128) {
11482
+ const suspense = vnode.suspense;
11483
+ vnode = suspense.activeBranch;
11484
+ if (suspense.pendingBranch && !suspense.isHydrating) {
11485
+ suspense.effects.push(() => {
11486
+ setVarsOnVNode(suspense.activeBranch, vars);
11487
+ });
11488
+ }
11489
+ }
11490
+ while (vnode.component) {
11491
+ vnode = vnode.component.subTree;
11492
+ }
11493
+ if (vnode.shapeFlag & 1 && vnode.el) {
11494
+ setVarsOnNode(vnode.el, vars);
11495
+ } else if (vnode.type === Fragment) {
11496
+ vnode.children.forEach((c) => setVarsOnVNode(c, vars));
11497
+ } else if (vnode.type === Static) {
11498
+ let { el, anchor } = vnode;
11499
+ while (el) {
11500
+ setVarsOnNode(el, vars);
11501
+ if (el === anchor)
11502
+ break;
11503
+ el = el.nextSibling;
11504
+ }
11505
+ }
11506
+ }
11507
+ function setVarsOnNode(el, vars) {
11508
+ if (el.nodeType === 1) {
11509
+ const style = el.style;
11510
+ let cssText = "";
11511
+ for (const key in vars) {
11512
+ style.setProperty(`--${key}`, vars[key]);
11513
+ cssText += `--${key}: ${vars[key]};`;
11514
+ }
11515
+ style[CSS_VAR_TEXT] = cssText;
11516
+ }
11517
+ }
11518
+
11436
11519
  function patchStyle(el, prev, next) {
11437
11520
  const style = el.style;
11438
11521
  const isCssString = isString(next);
@@ -11451,6 +11534,10 @@ function patchStyle(el, prev, next) {
11451
11534
  const currentDisplay = style.display;
11452
11535
  if (isCssString) {
11453
11536
  if (prev !== next) {
11537
+ const cssVarText = style[CSS_VAR_TEXT];
11538
+ if (cssVarText) {
11539
+ next += ";" + cssVarText;
11540
+ }
11454
11541
  style.cssText = next;
11455
11542
  }
11456
11543
  } else if (prev) {
@@ -11747,7 +11834,9 @@ function shouldSetAsProp(el, key, value, isSVG) {
11747
11834
  }
11748
11835
  if (key === "width" || key === "height") {
11749
11836
  const tag = el.tagName;
11750
- return !(tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE");
11837
+ if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") {
11838
+ return false;
11839
+ }
11751
11840
  }
11752
11841
  if (isNativeOn(key) && isString(value)) {
11753
11842
  return false;
@@ -11998,65 +12087,6 @@ function useCssModule(name = "$style") {
11998
12087
  }
11999
12088
  }
12000
12089
 
12001
- function useCssVars(getter) {
12002
- const instance = getCurrentInstance();
12003
- if (!instance) {
12004
- !!(process.env.NODE_ENV !== "production") && warn(`useCssVars is called without current active component instance.`);
12005
- return;
12006
- }
12007
- const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
12008
- Array.from(
12009
- document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
12010
- ).forEach((node) => setVarsOnNode(node, vars));
12011
- };
12012
- const setVars = () => {
12013
- const vars = getter(instance.proxy);
12014
- setVarsOnVNode(instance.subTree, vars);
12015
- updateTeleports(vars);
12016
- };
12017
- watchPostEffect(setVars);
12018
- onMounted(() => {
12019
- const ob = new MutationObserver(setVars);
12020
- ob.observe(instance.subTree.el.parentNode, { childList: true });
12021
- onUnmounted(() => ob.disconnect());
12022
- });
12023
- }
12024
- function setVarsOnVNode(vnode, vars) {
12025
- if (vnode.shapeFlag & 128) {
12026
- const suspense = vnode.suspense;
12027
- vnode = suspense.activeBranch;
12028
- if (suspense.pendingBranch && !suspense.isHydrating) {
12029
- suspense.effects.push(() => {
12030
- setVarsOnVNode(suspense.activeBranch, vars);
12031
- });
12032
- }
12033
- }
12034
- while (vnode.component) {
12035
- vnode = vnode.component.subTree;
12036
- }
12037
- if (vnode.shapeFlag & 1 && vnode.el) {
12038
- setVarsOnNode(vnode.el, vars);
12039
- } else if (vnode.type === Fragment) {
12040
- vnode.children.forEach((c) => setVarsOnVNode(c, vars));
12041
- } else if (vnode.type === Static) {
12042
- let { el, anchor } = vnode;
12043
- while (el) {
12044
- setVarsOnNode(el, vars);
12045
- if (el === anchor)
12046
- break;
12047
- el = el.nextSibling;
12048
- }
12049
- }
12050
- }
12051
- function setVarsOnNode(el, vars) {
12052
- if (el.nodeType === 1) {
12053
- const style = el.style;
12054
- for (const key in vars) {
12055
- style.setProperty(`--${key}`, vars[key]);
12056
- }
12057
- }
12058
- }
12059
-
12060
12090
  const positionMap = /* @__PURE__ */ new WeakMap();
12061
12091
  const newPositionMap = /* @__PURE__ */ new WeakMap();
12062
12092
  const moveCbKey = Symbol("_moveCb");
@@ -303,20 +303,29 @@ var Vue = (function () {
303
303
  return replacer(_key, val.value);
304
304
  } else if (isMap(val)) {
305
305
  return {
306
- [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val2]) => {
307
- entries[`${key} =>`] = val2;
308
- return entries;
309
- }, {})
306
+ [`Map(${val.size})`]: [...val.entries()].reduce(
307
+ (entries, [key, val2], i) => {
308
+ entries[stringifySymbol(key, i) + " =>"] = val2;
309
+ return entries;
310
+ },
311
+ {}
312
+ )
310
313
  };
311
314
  } else if (isSet(val)) {
312
315
  return {
313
- [`Set(${val.size})`]: [...val.values()]
316
+ [`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v))
314
317
  };
318
+ } else if (isSymbol(val)) {
319
+ return stringifySymbol(val);
315
320
  } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
316
321
  return String(val);
317
322
  }
318
323
  return val;
319
324
  };
325
+ const stringifySymbol = (v, i = "") => {
326
+ var _a;
327
+ return isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v;
328
+ };
320
329
 
321
330
  function warn$1(msg, ...args) {
322
331
  console.warn(`[Vue warn] ${msg}`, ...args);
@@ -740,8 +749,13 @@ var Vue = (function () {
740
749
  return isReadonly2;
741
750
  } else if (key === "__v_isShallow") {
742
751
  return shallow;
743
- } else if (key === "__v_raw" && receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target)) {
744
- return target;
752
+ } else if (key === "__v_raw") {
753
+ if (receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
754
+ // this means the reciever is a user proxy of the reactive proxy
755
+ Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
756
+ return target;
757
+ }
758
+ return;
745
759
  }
746
760
  const targetIsArray = isArray(target);
747
761
  if (!isReadonly2) {
@@ -777,17 +791,19 @@ var Vue = (function () {
777
791
  }
778
792
  set(target, key, value, receiver) {
779
793
  let oldValue = target[key];
780
- if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
781
- return false;
782
- }
783
794
  if (!this._shallow) {
795
+ const isOldValueReadonly = isReadonly(oldValue);
784
796
  if (!isShallow(value) && !isReadonly(value)) {
785
797
  oldValue = toRaw(oldValue);
786
798
  value = toRaw(value);
787
799
  }
788
800
  if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
789
- oldValue.value = value;
790
- return true;
801
+ if (isOldValueReadonly) {
802
+ return false;
803
+ } else {
804
+ oldValue.value = value;
805
+ return true;
806
+ }
791
807
  }
792
808
  }
793
809
  const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
@@ -1752,13 +1768,16 @@ var Vue = (function () {
1752
1768
  }
1753
1769
  queueFlush();
1754
1770
  }
1755
- function flushPreFlushCbs(seen, i = isFlushing ? flushIndex + 1 : 0) {
1771
+ function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) {
1756
1772
  {
1757
1773
  seen = seen || /* @__PURE__ */ new Map();
1758
1774
  }
1759
1775
  for (; i < queue.length; i++) {
1760
1776
  const cb = queue[i];
1761
1777
  if (cb && cb.pre) {
1778
+ if (instance && cb.id !== instance.uid) {
1779
+ continue;
1780
+ }
1762
1781
  if (checkRecursiveUpdates(seen, cb)) {
1763
1782
  continue;
1764
1783
  }
@@ -3341,7 +3360,7 @@ If this is a native custom element, make sure to exclude it from component resol
3341
3360
  timeout: typeof timeout === "number" ? timeout : -1,
3342
3361
  activeBranch: null,
3343
3362
  pendingBranch: null,
3344
- isInFallback: true,
3363
+ isInFallback: !isHydrating,
3345
3364
  isHydrating,
3346
3365
  isUnmounted: false,
3347
3366
  effects: [],
@@ -3427,6 +3446,7 @@ If this is a native custom element, make sure to exclude it from component resol
3427
3446
  }
3428
3447
  const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, isSVG: isSVG2 } = suspense;
3429
3448
  triggerEvent(vnode2, "onFallback");
3449
+ const anchor2 = next(activeBranch);
3430
3450
  const mountFallback = () => {
3431
3451
  if (!suspense.isInFallback) {
3432
3452
  return;
@@ -3435,7 +3455,7 @@ If this is a native custom element, make sure to exclude it from component resol
3435
3455
  null,
3436
3456
  fallbackVNode,
3437
3457
  container2,
3438
- next(activeBranch),
3458
+ anchor2,
3439
3459
  parentComponent2,
3440
3460
  null,
3441
3461
  // fallback tree will not have suspense context
@@ -6276,7 +6296,7 @@ If this is a native custom element, make sure to exclude it from component resol
6276
6296
  return vm;
6277
6297
  }
6278
6298
  }
6279
- Vue.version = `2.6.14-compat:${"3.3.10"}`;
6299
+ Vue.version = `2.6.14-compat:${"3.3.12"}`;
6280
6300
  Vue.config = singletonApp.config;
6281
6301
  Vue.use = (p, ...options) => {
6282
6302
  if (p && isFunction(p.install)) {
@@ -7758,6 +7778,16 @@ If you want to remount the same app, move your app creation logic into a factory
7758
7778
  if (dirs) {
7759
7779
  invokeDirectiveHook(vnode, null, parentComponent, "created");
7760
7780
  }
7781
+ let needCallTransitionHooks = false;
7782
+ if (isTemplateNode(el)) {
7783
+ needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
7784
+ const content = el.content.firstChild;
7785
+ if (needCallTransitionHooks) {
7786
+ transition.beforeEnter(content);
7787
+ }
7788
+ replaceNode(content, el, parentComponent);
7789
+ vnode.el = el = content;
7790
+ }
7761
7791
  if (props) {
7762
7792
  if (forcePatch || !optimized || patchFlag & (16 | 32)) {
7763
7793
  for (const key in props) {
@@ -7790,16 +7820,6 @@ If you want to remount the same app, move your app creation logic into a factory
7790
7820
  if (vnodeHooks = props && props.onVnodeBeforeMount) {
7791
7821
  invokeVNodeHook(vnodeHooks, parentComponent, vnode);
7792
7822
  }
7793
- let needCallTransitionHooks = false;
7794
- if (isTemplateNode(el)) {
7795
- needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
7796
- const content = el.content.firstChild;
7797
- if (needCallTransitionHooks) {
7798
- transition.beforeEnter(content);
7799
- }
7800
- replaceNode(content, el, parentComponent);
7801
- vnode.el = el = content;
7802
- }
7803
7823
  if (dirs) {
7804
7824
  invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
7805
7825
  }
@@ -8914,7 +8934,7 @@ If you want to remount the same app, move your app creation logic into a factory
8914
8934
  updateProps(instance, nextVNode.props, prevProps, optimized);
8915
8935
  updateSlots(instance, nextVNode.children, optimized);
8916
8936
  pauseTracking();
8917
- flushPreFlushCbs();
8937
+ flushPreFlushCbs(instance);
8918
8938
  resetTracking();
8919
8939
  };
8920
8940
  const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => {
@@ -10863,7 +10883,7 @@ Component that was made reactive: `,
10863
10883
  return true;
10864
10884
  }
10865
10885
 
10866
- const version = "3.3.10";
10886
+ const version = "3.3.12";
10867
10887
  const ssrUtils = null;
10868
10888
  const resolveFilter = resolveFilter$1 ;
10869
10889
  const _compatUtils = {
@@ -11302,6 +11322,69 @@ Component that was made reactive: `,
11302
11322
  el.style.display = value ? el[vShowOldKey] : "none";
11303
11323
  }
11304
11324
 
11325
+ const CSS_VAR_TEXT = Symbol("CSS_VAR_TEXT" );
11326
+ function useCssVars(getter) {
11327
+ const instance = getCurrentInstance();
11328
+ if (!instance) {
11329
+ warn(`useCssVars is called without current active component instance.`);
11330
+ return;
11331
+ }
11332
+ const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
11333
+ Array.from(
11334
+ document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
11335
+ ).forEach((node) => setVarsOnNode(node, vars));
11336
+ };
11337
+ const setVars = () => {
11338
+ const vars = getter(instance.proxy);
11339
+ setVarsOnVNode(instance.subTree, vars);
11340
+ updateTeleports(vars);
11341
+ };
11342
+ watchPostEffect(setVars);
11343
+ onMounted(() => {
11344
+ const ob = new MutationObserver(setVars);
11345
+ ob.observe(instance.subTree.el.parentNode, { childList: true });
11346
+ onUnmounted(() => ob.disconnect());
11347
+ });
11348
+ }
11349
+ function setVarsOnVNode(vnode, vars) {
11350
+ if (vnode.shapeFlag & 128) {
11351
+ const suspense = vnode.suspense;
11352
+ vnode = suspense.activeBranch;
11353
+ if (suspense.pendingBranch && !suspense.isHydrating) {
11354
+ suspense.effects.push(() => {
11355
+ setVarsOnVNode(suspense.activeBranch, vars);
11356
+ });
11357
+ }
11358
+ }
11359
+ while (vnode.component) {
11360
+ vnode = vnode.component.subTree;
11361
+ }
11362
+ if (vnode.shapeFlag & 1 && vnode.el) {
11363
+ setVarsOnNode(vnode.el, vars);
11364
+ } else if (vnode.type === Fragment) {
11365
+ vnode.children.forEach((c) => setVarsOnVNode(c, vars));
11366
+ } else if (vnode.type === Static) {
11367
+ let { el, anchor } = vnode;
11368
+ while (el) {
11369
+ setVarsOnNode(el, vars);
11370
+ if (el === anchor)
11371
+ break;
11372
+ el = el.nextSibling;
11373
+ }
11374
+ }
11375
+ }
11376
+ function setVarsOnNode(el, vars) {
11377
+ if (el.nodeType === 1) {
11378
+ const style = el.style;
11379
+ let cssText = "";
11380
+ for (const key in vars) {
11381
+ style.setProperty(`--${key}`, vars[key]);
11382
+ cssText += `--${key}: ${vars[key]};`;
11383
+ }
11384
+ style[CSS_VAR_TEXT] = cssText;
11385
+ }
11386
+ }
11387
+
11305
11388
  function patchStyle(el, prev, next) {
11306
11389
  const style = el.style;
11307
11390
  const isCssString = isString(next);
@@ -11320,6 +11403,10 @@ Component that was made reactive: `,
11320
11403
  const currentDisplay = style.display;
11321
11404
  if (isCssString) {
11322
11405
  if (prev !== next) {
11406
+ const cssVarText = style[CSS_VAR_TEXT];
11407
+ if (cssVarText) {
11408
+ next += ";" + cssVarText;
11409
+ }
11323
11410
  style.cssText = next;
11324
11411
  }
11325
11412
  } else if (prev) {
@@ -11616,7 +11703,9 @@ Component that was made reactive: `,
11616
11703
  }
11617
11704
  if (key === "width" || key === "height") {
11618
11705
  const tag = el.tagName;
11619
- return !(tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE");
11706
+ if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") {
11707
+ return false;
11708
+ }
11620
11709
  }
11621
11710
  if (isNativeOn(key) && isString(value)) {
11622
11711
  return false;
@@ -11855,65 +11944,6 @@ Component that was made reactive: `,
11855
11944
  }
11856
11945
  }
11857
11946
 
11858
- function useCssVars(getter) {
11859
- const instance = getCurrentInstance();
11860
- if (!instance) {
11861
- warn(`useCssVars is called without current active component instance.`);
11862
- return;
11863
- }
11864
- const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
11865
- Array.from(
11866
- document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
11867
- ).forEach((node) => setVarsOnNode(node, vars));
11868
- };
11869
- const setVars = () => {
11870
- const vars = getter(instance.proxy);
11871
- setVarsOnVNode(instance.subTree, vars);
11872
- updateTeleports(vars);
11873
- };
11874
- watchPostEffect(setVars);
11875
- onMounted(() => {
11876
- const ob = new MutationObserver(setVars);
11877
- ob.observe(instance.subTree.el.parentNode, { childList: true });
11878
- onUnmounted(() => ob.disconnect());
11879
- });
11880
- }
11881
- function setVarsOnVNode(vnode, vars) {
11882
- if (vnode.shapeFlag & 128) {
11883
- const suspense = vnode.suspense;
11884
- vnode = suspense.activeBranch;
11885
- if (suspense.pendingBranch && !suspense.isHydrating) {
11886
- suspense.effects.push(() => {
11887
- setVarsOnVNode(suspense.activeBranch, vars);
11888
- });
11889
- }
11890
- }
11891
- while (vnode.component) {
11892
- vnode = vnode.component.subTree;
11893
- }
11894
- if (vnode.shapeFlag & 1 && vnode.el) {
11895
- setVarsOnNode(vnode.el, vars);
11896
- } else if (vnode.type === Fragment) {
11897
- vnode.children.forEach((c) => setVarsOnVNode(c, vars));
11898
- } else if (vnode.type === Static) {
11899
- let { el, anchor } = vnode;
11900
- while (el) {
11901
- setVarsOnNode(el, vars);
11902
- if (el === anchor)
11903
- break;
11904
- el = el.nextSibling;
11905
- }
11906
- }
11907
- }
11908
- function setVarsOnNode(el, vars) {
11909
- if (el.nodeType === 1) {
11910
- const style = el.style;
11911
- for (const key in vars) {
11912
- style.setProperty(`--${key}`, vars[key]);
11913
- }
11914
- }
11915
- }
11916
-
11917
11947
  const positionMap = /* @__PURE__ */ new WeakMap();
11918
11948
  const newPositionMap = /* @__PURE__ */ new WeakMap();
11919
11949
  const moveCbKey = Symbol("_moveCb");