quasar 2.22.0 → 2.23.0

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
-* Quasar Framework v2.22.0
+* Quasar Framework v2.23.0
 * (c) 2015-present Razvan Stoenescu
 * Released under the MIT License.
 */
@@ -1101,7 +1101,7 @@
 		};
 	}
 	var install_quasar_default = function installQuasar(parentApp, opts = {}) {
-		const $q = { version: "2.22.0" };
+		const $q = { version: "2.23.0" };
 		if (!globalConfigIsFrozen) {
 			if (opts.config !== void 0) Object.assign(globalConfig, opts.config);
 			$q.config = { ...globalConfig };
@@ -2441,7 +2441,7 @@
 				const blurTarget = blurTargetRef.value;
 				if (!destroying && (touchTarget === rootRef.value || mouseTarget === rootRef.value) && blurTarget !== null && blurTarget !== document.activeElement) {
 					blurTarget.setAttribute("tabindex", -1);
-					blurTarget.focus();
+					blurTarget.focus({ preventScroll: true });
 				}
 				if (touchTarget === rootRef.value) {
 					if (localTouchTargetEl !== null) {
@@ -3285,19 +3285,25 @@
 		}
 		const target = evt.target;
 		if (target === void 0 || target.nodeType === 8 || target.classList.contains("no-pointer-events")) return;
-		let portalIndex = portalProxyList.length - 1;
-		while (portalIndex >= 0) {
-			const proxy = portalProxyList[portalIndex].$;
-			if (proxy.type.name === "QTooltip") {
-				portalIndex--;
+		let closableContentEls = null;
+		let sawClosablePortal = false;
+		for (let i = portalProxyList.length - 1; i >= 0; i--) {
+			const proxy = portalProxyList[i].$;
+			const name = proxy.type.name;
+			if (name === "QTooltip") continue;
+			if (name === "QDialog") {
+				if (proxy.props.seamless !== true) {
+					if (sawClosablePortal === false) return;
+					closableContentEls = new Set(portalProxyList.slice(i + 1).map((vm) => vm.contentEl));
+					break;
+				}
 				continue;
 			}
-			if (proxy.type.name !== "QDialog") break;
-			if (!proxy.props.seamless) return;
-			portalIndex--;
+			sawClosablePortal = true;
 		}
 		for (let i = registeredList.length - 1; i >= 0; i--) {
 			const state = registeredList[i];
+			if (closableContentEls !== null && !closableContentEls.has(state.innerRef.value)) return;
 			if ((state.anchorEl.value === null || !state.anchorEl.value.contains(target)) && (target === document.body || state.innerRef.value !== null && !state.innerRef.value.contains(target))) {
 				evt.qClickOutside = true;
 				state.onClickOutside(evt);
@@ -4621,8 +4627,33 @@
 		};
 	}
 	//#endregion
+	//#region src/composables/use-animation-frame/use-animation-frame.js
+	function useAnimationFrame() {
+		let frameId = null;
+		const vm = (0, vue.getCurrentInstance)();
+		function removeAnimationFrame() {
+			if (frameId !== null) {
+				cancelAnimationFrame(frameId);
+				frameId = null;
+			}
+		}
+		(0, vue.onDeactivated)(removeAnimationFrame);
+		(0, vue.onBeforeUnmount)(removeAnimationFrame);
+		return {
+			removeAnimationFrame,
+			registerAnimationFrame(fn) {
+				removeAnimationFrame();
+				if (!vmIsDestroyed(vm)) frameId = requestAnimationFrame(() => {
+					frameId = null;
+					fn();
+				});
+			}
+		};
+	}
+	//#endregion
 	//#region src/composables/private.use-fullscreen/use-fullscreen.js
 	let counter = 0;
+	let restoreState = null;
 	const useFullscreenProps = {
 		fullscreen: Boolean,
 		noRouteFullscreenExit: Boolean
@@ -4631,8 +4662,10 @@
 	function useFullscreen() {
 		const vm = (0, vue.getCurrentInstance)();
 		const { props, emit, proxy } = vm;
-		let historyEntry, fullscreenFillerNode, isUnmounting = false;
+		let historyEntry, fullscreenFillerNode;
 		const inFullscreen = (0, vue.ref)(false);
+		const { registerTick, removeTick } = useTick();
+		const { registerAnimationFrame, removeAnimationFrame } = useAnimationFrame();
 		if (vmHasRouter(vm)) (0, vue.watch)(() => proxy.$route.fullPath, () => {
 			if (!props.noRouteFullscreenExit) exitFullscreen();
 		});
@@ -4648,7 +4681,15 @@
 			else setFullscreen();
 		}
 		function setFullscreen() {
-			if (inFullscreen.value) return;
+			if (vmIsDestroyed(vm) || inFullscreen.value) return;
+			removeAnimationFrame();
+			removeTick();
+			if (counter === 0) restoreState = {
+				left: getHorizontalScrollPosition(window),
+				top: getVerticalScrollPosition(window),
+				width: window.innerWidth,
+				height: window.innerHeight
+			};
 			inFullscreen.value = true;
 			proxy.$el.replaceWith(fullscreenFillerNode);
 			document.body.append(proxy.$el);
@@ -4657,21 +4698,40 @@
 			historyEntry = { handler: exitFullscreen };
 			History_default.add(historyEntry);
 		}
-		function exitFullscreen() {
+		function exitFullscreenImpl(shouldRestoreElement) {
 			if (!inFullscreen.value) return;
 			if (historyEntry !== void 0) {
 				History_default.remove(historyEntry);
 				historyEntry = void 0;
 			}
-			fullscreenFillerNode.replaceWith(proxy.$el);
+			if (shouldRestoreElement === true) fullscreenFillerNode.replaceWith(proxy.$el);
+			else fullscreenFillerNode.remove();
 			inFullscreen.value = false;
 			counter = Math.max(0, counter - 1);
-			if (counter === 0) {
-				document.body.classList.remove("q-body--fullscreen-mixin");
-				if (!isUnmounting && proxy.$el.scrollIntoView !== void 0) setTimeout(() => {
+			if (counter !== 0) return;
+			document.body.classList.remove("q-body--fullscreen-mixin");
+			if (restoreState === null) return;
+			const { left, top, width, height } = restoreState;
+			restoreState = null;
+			if (vmIsDestroyed(vm)) return;
+			registerTick(() => {
+				if (counter !== 0) return;
+				registerAnimationFrame(() => {
+					if (counter !== 0) return;
+					if (window.innerWidth !== width || window.innerHeight !== height)
+ /**
+					* If user has resized the window while in fullscreen mode,
+					* we cannot restore the scroll position because it will be wrong.
+					* So we just scroll the element into view instead,
+					* which is the best we can do.
+					*/
 					proxy.$el.scrollIntoView();
-				}, 0);
-			}
+					else window.scrollTo(left, top);
+				});
+			});
+		}
+		function exitFullscreen() {
+			exitFullscreenImpl(true);
 		}
 		(0, vue.onBeforeMount)(() => {
 			fullscreenFillerNode = document.createElement("span");
@@ -4679,10 +4739,13 @@
 		(0, vue.onMounted)(() => {
 			if (props.fullscreen) setFullscreen();
 		});
-		(0, vue.onBeforeUnmount)(() => {
-			isUnmounting = true;
-			exitFullscreen();
+		(0, vue.onDeactivated)(() => {
+			exitFullscreenImpl(proxy.$el.isConnected);
+		});
+		(0, vue.onActivated)(() => {
+			if (props.fullscreen) setFullscreen();
 		});
+		(0, vue.onBeforeUnmount)(exitFullscreen);
 		Object.assign(proxy, {
 			toggleFullscreen,
 			setFullscreen,
@@ -15395,8 +15458,8 @@
 		lg: 10,
 		xl: 14
 	};
-	function width(val, reverse, $q) {
-		return { transform: reverse ? `translateX(${$q.lang.rtl ? "-" : ""}100%) scale3d(${-val},1,1)` : `scale3d(${val},1,1)` };
+	function width(val) {
+		return { transform: `scale3d(${val},1,1)` };
 	}
 	var QLinearProgress_default = createComponent({
 		name: "QLinearProgress",
@@ -15426,16 +15489,15 @@
 			const isDark = useDark(props, proxy.$q);
 			const sizeStyle = useSize(props, defaultSizes);
 			const motion = (0, vue.computed)(() => props.indeterminate || props.query);
-			const widthReverse = (0, vue.computed)(() => props.reverse !== props.query);
 			const style = (0, vue.computed)(() => ({
 				...sizeStyle.value !== null ? sizeStyle.value : {},
 				"--q-linear-progress-speed": `${props.animationSpeed}ms`
 			}));
 			const classes = (0, vue.computed)(() => "q-linear-progress" + (props.color !== void 0 ? ` text-${props.color}` : "") + (props.reverse || props.query ? " q-linear-progress--reverse" : "") + (props.rounded ? " rounded-borders" : ""));
-			const trackStyle = (0, vue.computed)(() => width(props.buffer !== void 0 ? props.buffer : 1, widthReverse.value, proxy.$q));
+			const trackStyle = (0, vue.computed)(() => width(props.buffer !== void 0 ? props.buffer : 1));
 			const transitionSuffix = (0, vue.computed)(() => `with${props.instantFeedback ? "out" : ""}-transition`);
 			const trackClass = (0, vue.computed)(() => `q-linear-progress__track absolute-full q-linear-progress__track--${transitionSuffix.value} q-linear-progress__track--${isDark.value ? "dark" : "light"}` + (props.trackColor !== void 0 ? ` bg-${props.trackColor}` : ""));
-			const modelStyle = (0, vue.computed)(() => width(motion.value ? 1 : props.value, widthReverse.value, proxy.$q));
+			const modelStyle = (0, vue.computed)(() => width(motion.value ? 1 : props.value));
 			const modelClass = (0, vue.computed)(() => `q-linear-progress__model absolute-full q-linear-progress__model--${transitionSuffix.value} q-linear-progress__model--${motion.value ? "in" : ""}determinate`);
 			const stripeStyle = (0, vue.computed)(() => ({ width: `${props.value * 100}%` }));
 			const stripeClass = (0, vue.computed)(() => `q-linear-progress__stripe absolute-${props.reverse ? "right" : "left"} q-linear-progress__stripe--${transitionSuffix.value}`);
@@ -26368,6 +26430,7 @@
 	//#endregion
 	//#region src/composables.js
 	var composables_exports = /* @__PURE__ */ __exportAll({
+		useAnimationFrame: () => useAnimationFrame,
 		useDialogPluginComponent: () => useDialogPluginComponent,
 		useFormChild: () => useFormChild,
 		useHydration: () => useHydration,
@@ -26387,7 +26450,7 @@
 	*/
 	if (window.Vue === void 0) console.error("[ Quasar ] Vue is required to run. Please add a script tag for it before loading Quasar.");
 	window.Quasar = {
-		version: "2.22.0",
+		version: "2.23.0",
 		install(app, opts) {
 			install_quasar_default(app, {
 				components: components_exports,