@vue/runtime-dom 3.6.0-rc.11 → 3.6.0-rc.12

package/dist/runtime-dom.cjs.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/runtime-dom v3.6.0-rc.11
+  * @vue/runtime-dom v3.6.0-rc.12
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -398,7 +398,7 @@ function patchStyle(el, prev, next) {
 		else el.removeAttribute("style");
 	}
 	if (vShowOriginalDisplay in el) {
-		el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : "";
+		if (!isCssString || prev !== next) el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : "";
 		if (el[vShowHidden]) style.display = "none";
 	}
 }
@@ -703,7 +703,7 @@ var VueElementBase = class VueElementBase extends BaseClass {
 			this._resolveProps(def);
 			if (this.shadowRoot) this._applyStyles(styles);
 			else if (styles) (0, _vue_runtime_core.warn)("Custom element style injection is not supported when using shadowRoot: false");
-			this._mountComponent(def);
+			if (this._connected) this._mountComponent(def);
 		};
 		const asyncDef = this._def.__asyncLoader;
 		if (asyncDef) {
@@ -1021,6 +1021,7 @@ const positionMap = /* @__PURE__ */ new WeakMap();
 const newPositionMap = /* @__PURE__ */ new WeakMap();
 const moveCbKey = Symbol("_moveCb");
 const enterCbKey = Symbol("_enterCb");
+const pendingGroups = /* @__PURE__ */ new WeakMap();
 /**
 * Wrap logic that modifies TransitionGroup properties in a function
 * so that it can be annotated as pure
@@ -1040,15 +1041,24 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 		const state = (0, _vue_runtime_core.useTransitionState)();
 		let prevChildren;
 		let children;
+		let origins;
+		let moves;
+		const willMove = () => {
+			if (moves === void 0) moves = prevChildren.length > 0 && hasCSSTransform(prevChildren[0].el, instance.vnode.el, resolveMoveClass(props));
+			return moves;
+		};
 		(0, _vue_runtime_core.onUpdated)(() => {
-			if (!prevChildren.length) return;
-			const moveClass = props.moveClass || `${props.name || "v"}-move`;
-			if (!hasCSSTransform(prevChildren[0].el, instance.vnode.el, moveClass)) {
+			pendingGroups.delete(instance);
+			if (!willMove()) {
 				prevChildren = [];
+				origins = void 0;
 				return;
 			}
+			const moveClass = resolveMoveClass(props);
 			prevChildren.forEach((vnode) => callPendingCbs(vnode.el));
-			prevChildren.forEach(recordPosition);
+			const shift = origins && getOriginShift(origins, instance.vnode.el);
+			origins = void 0;
+			prevChildren.forEach((c) => recordPosition(c, shift));
 			const movedChildren = prevChildren.filter(applyTranslation);
 			forceReflow(instance.vnode.el);
 			movedChildren.forEach((c) => {
@@ -1062,6 +1072,7 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 			const cssTransitionProps = resolveTransitionProps(rawProps);
 			let tag = rawProps.tag || _vue_runtime_core.Fragment;
 			prevChildren = [];
+			moves = void 0;
 			if (children) for (let i = 0; i < children.length; i++) {
 				const child = children[i];
 				if (child.el && child.el instanceof Element && !child.el[vShowHidden]) {
@@ -1076,6 +1087,14 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 				if (child.key != null) (0, _vue_runtime_core.setTransitionHooks)(child, (0, _vue_runtime_core.resolveTransitionHooks)(child, cssTransitionProps, state, instance));
 				else if (child.type !== _vue_runtime_core.Text) (0, _vue_runtime_core.warn)(`<TransitionGroup> children must be keyed.`);
 			}
+			if (prevChildren.length) {
+				const root = instance.vnode.el;
+				origins = getOrigins(instance, root);
+				pendingGroups.set(instance, {
+					root,
+					willMove
+				});
+			}
 			return (0, _vue_runtime_core.createVNode)(tag, null, children);
 		};
 	}
@@ -1084,8 +1103,11 @@ function callPendingCbs(el) {
 	if (el[moveCbKey]) el[moveCbKey]();
 	if (el[enterCbKey]) el[enterCbKey]();
 }
-function recordPosition(c) {
-	newPositionMap.set(c, getPosition(c.el));
+function resolveMoveClass(props) {
+	return props.moveClass || `${props.name || "v"}-move`;
+}
+function recordPosition(c, shift) {
+	newPositionMap.set(c, getPosition(c.el, shift));
 }
 function applyTranslation(c) {
 	if (baseApplyTranslation(positionMap.get(c), newPositionMap.get(c), c.el)) return c;
@@ -1110,13 +1132,36 @@ function baseApplyTranslation(oldPos, newPos, el) {
 	}
 	return false;
 }
-function getPosition(el) {
+function getPosition(el, shift) {
 	const rect = el.getBoundingClientRect();
 	return {
-		left: rect.left,
-		top: rect.top
+		left: rect.left - (shift ? shift.left : 0),
+		top: rect.top - (shift ? shift.top : 0)
 	};
 }
+function getOrigins(instance, root) {
+	let origins;
+	for (let group = instance.parent; group; group = group.parent) {
+		const pending = pendingGroups.get(group);
+		if (pending) {
+			const item = findItem(pending.root, root);
+			if (item) (origins || (origins = [])).push((0, _vue_shared.extend)(getPosition(item), {
+				item,
+				willMove: pending.willMove
+			}));
+		}
+	}
+	return origins;
+}
+function findItem(root, node) {
+	const container = root.nodeType === 1 ? root : root.parentNode;
+	while (node && node.parentNode !== container) node = node.parentNode;
+	if (node && node.nodeType === 1) return node;
+}
+function getOriginShift(origins, root) {
+	const origin = origins.find((o) => o.willMove() && o.item.contains(root));
+	return origin && getPosition(origin.item, origin);
+}
 function hasCSSTransform(el, root, moveClass) {
 	const clone = el.cloneNode();
 	const _vtc = el[vtcKey];

package/dist/runtime-dom.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/runtime-dom v3.6.0-rc.11
+  * @vue/runtime-dom v3.6.0-rc.12
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -394,7 +394,7 @@ function patchStyle(el, prev, next) {
 		else el.removeAttribute("style");
 	}
 	if (vShowOriginalDisplay in el) {
-		el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : "";
+		if (!isCssString || prev !== next) el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : "";
 		if (el[vShowHidden]) style.display = "none";
 	}
 }
@@ -689,7 +689,7 @@ var VueElementBase = class VueElementBase extends BaseClass {
 			this._numberProps = numberProps;
 			this._resolveProps(def);
 			if (this.shadowRoot) this._applyStyles(styles);
-			this._mountComponent(def);
+			if (this._connected) this._mountComponent(def);
 		};
 		const asyncDef = this._def.__asyncLoader;
 		if (asyncDef) {
@@ -962,6 +962,7 @@ const positionMap = /* @__PURE__ */ new WeakMap();
 const newPositionMap = /* @__PURE__ */ new WeakMap();
 const moveCbKey = Symbol("_moveCb");
 const enterCbKey = Symbol("_enterCb");
+const pendingGroups = /* @__PURE__ */ new WeakMap();
 /**
 * Wrap logic that modifies TransitionGroup properties in a function
 * so that it can be annotated as pure
@@ -981,15 +982,24 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 		const state = (0, _vue_runtime_core.useTransitionState)();
 		let prevChildren;
 		let children;
+		let origins;
+		let moves;
+		const willMove = () => {
+			if (moves === void 0) moves = prevChildren.length > 0 && hasCSSTransform(prevChildren[0].el, instance.vnode.el, resolveMoveClass(props));
+			return moves;
+		};
 		(0, _vue_runtime_core.onUpdated)(() => {
-			if (!prevChildren.length) return;
-			const moveClass = props.moveClass || `${props.name || "v"}-move`;
-			if (!hasCSSTransform(prevChildren[0].el, instance.vnode.el, moveClass)) {
+			pendingGroups.delete(instance);
+			if (!willMove()) {
 				prevChildren = [];
+				origins = void 0;
 				return;
 			}
+			const moveClass = resolveMoveClass(props);
 			prevChildren.forEach((vnode) => callPendingCbs(vnode.el));
-			prevChildren.forEach(recordPosition);
+			const shift = origins && getOriginShift(origins, instance.vnode.el);
+			origins = void 0;
+			prevChildren.forEach((c) => recordPosition(c, shift));
 			const movedChildren = prevChildren.filter(applyTranslation);
 			forceReflow(instance.vnode.el);
 			movedChildren.forEach((c) => {
@@ -1003,6 +1013,7 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 			const cssTransitionProps = resolveTransitionProps(rawProps);
 			let tag = rawProps.tag || _vue_runtime_core.Fragment;
 			prevChildren = [];
+			moves = void 0;
 			if (children) for (let i = 0; i < children.length; i++) {
 				const child = children[i];
 				if (child.el && child.el instanceof Element && !child.el[vShowHidden]) {
@@ -1016,6 +1027,14 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 				const child = children[i];
 				if (child.key != null) (0, _vue_runtime_core.setTransitionHooks)(child, (0, _vue_runtime_core.resolveTransitionHooks)(child, cssTransitionProps, state, instance));
 			}
+			if (prevChildren.length) {
+				const root = instance.vnode.el;
+				origins = getOrigins(instance, root);
+				pendingGroups.set(instance, {
+					root,
+					willMove
+				});
+			}
 			return (0, _vue_runtime_core.createVNode)(tag, null, children);
 		};
 	}
@@ -1024,8 +1043,11 @@ function callPendingCbs(el) {
 	if (el[moveCbKey]) el[moveCbKey]();
 	if (el[enterCbKey]) el[enterCbKey]();
 }
-function recordPosition(c) {
-	newPositionMap.set(c, getPosition(c.el));
+function resolveMoveClass(props) {
+	return props.moveClass || `${props.name || "v"}-move`;
+}
+function recordPosition(c, shift) {
+	newPositionMap.set(c, getPosition(c.el, shift));
 }
 function applyTranslation(c) {
 	if (baseApplyTranslation(positionMap.get(c), newPositionMap.get(c), c.el)) return c;
@@ -1050,13 +1072,36 @@ function baseApplyTranslation(oldPos, newPos, el) {
 	}
 	return false;
 }
-function getPosition(el) {
+function getPosition(el, shift) {
 	const rect = el.getBoundingClientRect();
 	return {
-		left: rect.left,
-		top: rect.top
+		left: rect.left - (shift ? shift.left : 0),
+		top: rect.top - (shift ? shift.top : 0)
 	};
 }
+function getOrigins(instance, root) {
+	let origins;
+	for (let group = instance.parent; group; group = group.parent) {
+		const pending = pendingGroups.get(group);
+		if (pending) {
+			const item = findItem(pending.root, root);
+			if (item) (origins || (origins = [])).push((0, _vue_shared.extend)(getPosition(item), {
+				item,
+				willMove: pending.willMove
+			}));
+		}
+	}
+	return origins;
+}
+function findItem(root, node) {
+	const container = root.nodeType === 1 ? root : root.parentNode;
+	while (node && node.parentNode !== container) node = node.parentNode;
+	if (node && node.nodeType === 1) return node;
+}
+function getOriginShift(origins, root) {
+	const origin = origins.find((o) => o.willMove() && o.item.contains(root));
+	return origin && getPosition(origin.item, origin);
+}
 function hasCSSTransform(el, root, moveClass) {
 	const clone = el.cloneNode();
 	const _vtc = el[vtcKey];