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

package/dist/runtime-dom.esm-bundler.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
   **/
@@ -470,7 +470,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";
 	}
 }
@@ -777,7 +777,7 @@ var VueElementBase = class VueElementBase extends BaseClass {
 			this._resolveProps(def);
 			if (this.shadowRoot) this._applyStyles(styles);
 			else if (!!(process.env.NODE_ENV !== "production") && styles) 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) {
@@ -1101,6 +1101,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
@@ -1120,15 +1121,24 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 		const state = 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;
+		};
 		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) => {
@@ -1142,6 +1152,7 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 			const cssTransitionProps = resolveTransitionProps(rawProps);
 			let tag = rawProps.tag || 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]) {
@@ -1156,6 +1167,14 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 				if (child.key != null) setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance));
 				else if (!!(process.env.NODE_ENV !== "production") && child.type !== Text) warn(`<TransitionGroup> children must be keyed.`);
 			}
+			if (prevChildren.length) {
+				const root = instance.vnode.el;
+				origins = getOrigins(instance, root);
+				pendingGroups.set(instance, {
+					root,
+					willMove
+				});
+			}
 			return createVNode(tag, null, children);
 		};
 	}
@@ -1164,8 +1183,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;
@@ -1190,13 +1212,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(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];
@@ -1677,4 +1722,4 @@ const initDirectivesForSSR = () => {
 	}
 };
 //#endregion
-export { Transition, TransitionGroup, TransitionPropsValidators, VueElement, VueElementBase, baseApplyTranslation, callPendingCbs, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, ensureHydrationRenderer, ensureRenderer, forceReflow, handleMovedChildren, hasCSSTransform, hydrate, initDirectivesForSSR, nodeOps, normalizeContainer, parseEventName, patchClass, patchProp, patchStyle, render, resolveTransitionProps, setVarsOnNode, shouldSetAsProp, shouldSetAsPropForVueCE, svgNS, unsafeToTrustedHTML, useCssModule, useCssVars, useHost, useShadowRoot, vModelCheckbox, vModelCheckboxInit, vModelCheckboxUpdate, vModelDynamic, getValue as vModelGetValue, vModelRadio, vModelSelect, vModelSelectInit, vModelSetSelected, vModelText, vModelTextInit, vModelTextUpdate, vShow, vShowHidden, vShowOriginalDisplay, withKeys, withModifiers, xlinkNS };
+export { Transition, TransitionGroup, TransitionPropsValidators, VueElement, VueElementBase, baseApplyTranslation, callPendingCbs, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, ensureHydrationRenderer, ensureRenderer, forceReflow, getOrigins as getTransitionGroupOrigins, getPosition as getTransitionGroupPosition, getOriginShift as getTransitionGroupShift, handleMovedChildren, hasCSSTransform, hydrate, initDirectivesForSSR, nodeOps, normalizeContainer, parseEventName, patchClass, patchProp, patchStyle, pendingGroups as pendingTransitionGroups, render, resolveTransitionProps, setVarsOnNode, shouldSetAsProp, shouldSetAsPropForVueCE, svgNS, unsafeToTrustedHTML, useCssModule, useCssVars, useHost, useShadowRoot, vModelCheckbox, vModelCheckboxInit, vModelCheckboxUpdate, vModelDynamic, getValue as vModelGetValue, vModelRadio, vModelSelect, vModelSelectInit, vModelSetSelected, vModelText, vModelTextInit, vModelTextUpdate, vShow, vShowHidden, vShowOriginalDisplay, withKeys, withModifiers, xlinkNS };