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

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.13
   * (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
@@ -1029,7 +1030,7 @@ const decorate = (t) => {
 	delete t.props.mode;
 	return t;
 };
-const TransitionGroup = /* @__PURE__ */ decorate({
+const TransitionGroupImpl = /*@__PURE__*/ decorate({
 	name: "TransitionGroup",
 	props: /*@__PURE__*/ (0, _vue_shared.extend)({}, TransitionPropsValidators, {
 		tag: String,
@@ -1038,17 +1039,31 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 	setup(props, { slots }) {
 		const instance = (0, _vue_runtime_core.getCurrentInstance)();
 		const state = (0, _vue_runtime_core.useTransitionState)();
+		const group = {
+			props: {},
+			state,
+			instance
+		};
 		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) => {
@@ -1059,33 +1074,51 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 		});
 		return () => {
 			const rawProps = (0, _vue_runtime_core.toRaw)(props);
-			const cssTransitionProps = resolveTransitionProps(rawProps);
+			const cssTransitionProps = group.props = 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]) {
 					prevChildren.push(child);
 					(0, _vue_runtime_core.setTransitionHooks)(child, (0, _vue_runtime_core.resolveTransitionHooks)(child, cssTransitionProps, state, instance));
 					positionMap.set(child, getPosition(child.el));
-				}
+				} else if (_vue_runtime_core.isVaporInteropEnabled && child.vs && child.vb) instance.appContext.vapor.forEachGroupChild(child, (el) => {
+					const row = { el };
+					prevChildren.push(row);
+					positionMap.set(row, getPosition(el));
+				});
 			}
 			children = slots.default ? (0, _vue_runtime_core.getTransitionRawChildren)(slots.default()) : [];
 			for (let i = 0; i < children.length; i++) {
 				const child = children[i];
-				if (child.key != null) (0, _vue_runtime_core.setTransitionHooks)(child, (0, _vue_runtime_core.resolveTransitionHooks)(child, cssTransitionProps, state, instance));
+				if (_vue_runtime_core.isVaporInteropEnabled && child.vs) child.vs.group = group;
+				else 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);
 		};
 	}
 });
+const TransitionGroup = /*@__PURE__*/ (0, _vue_runtime_core.withTransitionEnabled)(TransitionGroupImpl);
 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 +1143,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];
@@ -1197,7 +1253,7 @@ const vModelTextInit = (el, trim, number, lazy, set) => {
 		if (e.target.composing) return;
 		(set || el[assignKey])(castValue(el.value, trim, number || el.type === "number"));
 	});
-	if (trim || number) addEventListener(el, "change", () => {
+	if (trim || number || el.type === "number") addEventListener(el, "change", () => {
 		el.value = castValue(el.value, trim, number || el.type === "number");
 	});
 	if (!lazy) {

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.13
   * (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
@@ -970,7 +971,7 @@ const decorate = (t) => {
 	delete t.props.mode;
 	return t;
 };
-const TransitionGroup = /* @__PURE__ */ decorate({
+const TransitionGroupImpl = /*@__PURE__*/ decorate({
 	name: "TransitionGroup",
 	props: /*@__PURE__*/ (0, _vue_shared.extend)({}, TransitionPropsValidators, {
 		tag: String,
@@ -979,17 +980,31 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 	setup(props, { slots }) {
 		const instance = (0, _vue_runtime_core.getCurrentInstance)();
 		const state = (0, _vue_runtime_core.useTransitionState)();
+		const group = {
+			props: {},
+			state,
+			instance
+		};
 		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) => {
@@ -1000,32 +1015,50 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 		});
 		return () => {
 			const rawProps = (0, _vue_runtime_core.toRaw)(props);
-			const cssTransitionProps = resolveTransitionProps(rawProps);
+			const cssTransitionProps = group.props = 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]) {
 					prevChildren.push(child);
 					(0, _vue_runtime_core.setTransitionHooks)(child, (0, _vue_runtime_core.resolveTransitionHooks)(child, cssTransitionProps, state, instance));
 					positionMap.set(child, getPosition(child.el));
-				}
+				} else if (_vue_runtime_core.isVaporInteropEnabled && child.vs && child.vb) instance.appContext.vapor.forEachGroupChild(child, (el) => {
+					const row = { el };
+					prevChildren.push(row);
+					positionMap.set(row, getPosition(el));
+				});
 			}
 			children = slots.default ? (0, _vue_runtime_core.getTransitionRawChildren)(slots.default()) : [];
 			for (let i = 0; i < children.length; i++) {
 				const child = children[i];
-				if (child.key != null) (0, _vue_runtime_core.setTransitionHooks)(child, (0, _vue_runtime_core.resolveTransitionHooks)(child, cssTransitionProps, state, instance));
+				if (_vue_runtime_core.isVaporInteropEnabled && child.vs) child.vs.group = group;
+				else 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);
 		};
 	}
 });
+const TransitionGroup = /*@__PURE__*/ (0, _vue_runtime_core.withTransitionEnabled)(TransitionGroupImpl);
 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 +1083,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];
@@ -1137,7 +1193,7 @@ const vModelTextInit = (el, trim, number, lazy, set) => {
 		if (e.target.composing) return;
 		(set || el[assignKey])(castValue(el.value, trim, number || el.type === "number"));
 	});
-	if (trim || number) addEventListener(el, "change", () => {
+	if (trim || number || el.type === "number") addEventListener(el, "change", () => {
 		el.value = castValue(el.value, trim, number || el.type === "number");
 	});
 	if (!lazy) {