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

package/dist/runtime-dom.esm-bundler.js

@@ -1,9 +1,9 @@
 /**
-  * @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
   **/
-import { BaseTransition, BaseTransitionPropsValidators, Fragment, Static, Text, assertNumber, callWithAsyncErrorHandling, camelize, createHydrationRenderer, createRenderer, createVNode, defineComponent, getCurrentInstance, getTransitionRawChildren, h, isRuntimeOnly, nextTick, onBeforeUpdate, onMounted, onUnmounted, onUpdated, queuePostFlushCb, resolveTransitionHooks, setIsHydratingEnabled, setTransitionHooks, toRaw, unref, useInstanceOption, useTransitionState, warn, watch } from "@vue/runtime-core";
+import { BaseTransition, BaseTransitionPropsValidators, Fragment, Static, Text, assertNumber, callWithAsyncErrorHandling, camelize, createHydrationRenderer, createRenderer, createVNode, defineComponent, getCurrentInstance, getTransitionRawChildren, h, isRuntimeOnly, isVaporInteropEnabled, nextTick, onBeforeUpdate, onMounted, onUnmounted, onUpdated, queuePostFlushCb, resolveTransitionHooks, setIsHydratingEnabled, setTransitionHooks, toRaw, unref, useInstanceOption, useTransitionState, warn, watch, withTransitionEnabled } from "@vue/runtime-core";
 import { EMPTY_OBJ, NOOP, camelize as camelize$1, canSetValueDirectly, capitalize, extend, hasOwn, hyphenate, includeBooleanAttr, invokeArrayFns, isArray, isFunction, isHTMLTag, isMathMLTag, isModelListener, isNativeOn, isObject, isOn, isPlainObject, isSVGTag, isSet, isSpecialBooleanAttr, isString, isSymbol, looseEqual, looseIndexOf, looseToNumber, normalizeCssVarValue, shouldSetAsAttr, toNumber } from "@vue/shared";
 export * from "@vue/runtime-core";
 //#region packages/runtime-dom/src/nodeOps.ts
@@ -400,14 +400,14 @@ function setVarsOnVNode(vnode, vars) {
 	}
 	while (vnode.component) {
 		const component = vnode.component;
-		if (component.vapor) {
+		if (isVaporInteropEnabled && component.vapor) {
 			component.appContext.vapor.applyCssVars(vnode, vars);
 			return;
 		}
 		vnode = vnode.component.subTree;
 	}
 	if (vnode.shapeFlag & 1 && vnode.el) setVarsOnNode(vnode.el, vars);
-	else if (vnode.vb) vnode.ctx.appContext.vapor.applyCssVars(vnode, vars);
+	else if (isVaporInteropEnabled && vnode.vb) vnode.ctx.appContext.vapor.applyCssVars(vnode, vars);
 	else if (vnode.type === Fragment) vnode.children.forEach((c) => setVarsOnVNode(c, vars));
 	else if (vnode.type === Static) {
 		let { el, anchor } = vnode;
@@ -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
@@ -1109,7 +1110,7 @@ const decorate = (t) => {
 	delete t.props.mode;
 	return t;
 };
-const TransitionGroup = /* @__PURE__ */ decorate({
+const TransitionGroup = /*@__PURE__*/ withTransitionEnabled(/* @__PURE__ */ decorate({
 	name: "TransitionGroup",
 	props: /*@__PURE__*/ extend({}, TransitionPropsValidators, {
 		tag: String,
@@ -1118,17 +1119,31 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 	setup(props, { slots }) {
 		const instance = getCurrentInstance();
 		const state = 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;
+		};
 		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) => {
@@ -1139,33 +1154,50 @@ const TransitionGroup = /* @__PURE__ */ decorate({
 		});
 		return () => {
 			const rawProps = toRaw(props);
-			const cssTransitionProps = resolveTransitionProps(rawProps);
+			const cssTransitionProps = group.props = 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]) {
 					prevChildren.push(child);
 					setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance));
 					positionMap.set(child, getPosition(child.el));
-				}
+				} else if (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 ? getTransitionRawChildren(slots.default()) : [];
 			for (let i = 0; i < children.length; i++) {
 				const child = children[i];
-				if (child.key != null) setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance));
+				if (isVaporInteropEnabled && child.vs) child.vs.group = group;
+				else 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);
 		};
 	}
-});
+}));
 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 +1222,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];
@@ -1277,7 +1332,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) {
@@ -1677,4 +1732,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 };