@nexdom/uimed-vue 2.0.0-beta.47 → 2.0.0-beta.49

package/dist/components.d.ts

@@ -252,6 +252,18 @@ type MainProps = {
    * @default false
    */
   loading?: boolean;
+  /**
+   * Applies a color to the background of the whole app, e.g. on landing pages. Text placed
+   * directly on the background takes the color the theme pairs with it (white or black), while
+   * the app bar, the footer, sections and dialogs keep their own backgrounds. When omitted, the
+   * app uses the theme's default background.
+   *
+   * @example
+   * ```vue
+   * <u-main background="primary" />
+   * ```
+   */
+  background?: ColorVariant;
 };
 //#endregion
 //#region src/components/main/main.vue.d.ts
@@ -1715,6 +1727,8 @@ type DialogProps = {
    * Buttons displayed at the bottom of the dialog, right-aligned, in the given order.
    * Place the main action last. When undefined or empty, no actions area is rendered.
    * Clicking an action doesn't close the dialog: set `v-model` to `false` in `onClick`.
+   * While any action is `loading`, the user can't close the dialog with `Esc`, a click outside or
+   * the browser's back button, but setting `v-model` to `false` still closes it.
    */
   actions?: DialogButtonAction[];
   /**
@@ -1730,7 +1744,7 @@ type DialogProps = {
 };
 /**
  * A single action rendered inside {@link Dialog}'s actions area. Same shape as `USection`'s
- * actions.
+ * actions. While it's `loading`, the user can't close the dialog, but setting `v-model` to `false` still does.
  */
 interface DialogButtonAction extends ButtonProps {
   /**

package/dist/components.js

@@ -1,4 +1,4 @@
-import { a as messages, c as colorToVuetifyTextColor, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-Czq2P-Z9.js";
+import { a as messages, c as colorToVuetifyColor, l as colorToVuetifyTextColor, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-C0sM_bA2.js";
 import { useLocale, useMask } from "vuetify";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 import { pt } from "vuetify/locale";
@@ -100,7 +100,7 @@ function useNavigationSearchShortcut(options) {
 		input.select();
 	}
 	function findInput() {
-		return field.value.$el.querySelector("input");
+		return toValue(field).$el.querySelector("input");
 	}
 	function close() {
 		open.value = false;
@@ -1175,23 +1175,23 @@ const focusable = [
 function useDialogFocus(isActive, card) {
 	/** Focus state of this dialog, shared with the dialogs opened from it. */
 	const focusState = {
-		isOpen: isActive,
+		isOpen: () => toValue(isActive),
 		origin: null
 	};
-	onMounted(() => onActiveChange(isActive()));
-	watch(isActive, onActiveChange);
+	onMounted(() => onActiveChange(toValue(isActive)));
+	watch(() => toValue(isActive), onActiveChange);
 	function onActiveChange(active) {
 		if (active) {
 			focusState.origin = document.activeElement;
 			return;
 		}
-		const element = card();
+		const element = toValue(card);
 		if (element) closedDialogs.set(element, focusState);
 		const target = findFocusTarget(focusState.origin);
 		if (hasFocus(element) && (target instanceof HTMLElement || target instanceof SVGElement)) target.focus();
 	}
 	function focusFirstElement() {
-		card()?.querySelector(focusable)?.focus();
+		toValue(card)?.querySelector(focusable)?.focus();
 	}
 	return { focusFirstElement };
 }
@@ -1214,6 +1214,17 @@ function hasFocus(card) {
 	return !!card && (card.contains(active) || active.contains(card));
 }
 //#endregion
+//#region src/composables/dialogs/use-dialog-loading.ts
+/**
+* Tells whether any action of a dialog is loading, during which the user can't close it with
+* `Esc`, a click outside or the browser's back button. Internal to the dialog components.
+* @param actions - The dialog's actions, if any.
+* @returns `isLoading`, which is `true` while at least one action is `loading`.
+*/
+function useDialogLoading(actions) {
+	return { isLoading: computed(() => toValue(actions)?.some((action) => action.loading) ?? false) };
+}
+//#endregion
 //#region src/components/dialogs/dialog/dialog.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1$1 = ["id"];
 //#endregion
@@ -1266,6 +1277,7 @@ var dialog_default = /* @__PURE__ */ defineComponent({
 		*/
 		const isActive = ref(model.value);
 		watch(model, (value) => isActive.value = value);
+		const { isLoading } = useDialogLoading(() => props.actions);
 		const { focusFirstElement } = useDialogFocus(() => isActive.value, () => card.value?.$el);
 		function onAfterLeave() {
 			model.value = false;
@@ -1275,7 +1287,7 @@ var dialog_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createBlock(unref(VDialog), {
 				modelValue: isActive.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
-				persistent: unref(host)?.persistent(),
+				persistent: unref(isLoading),
 				"max-width": maxWidth.value,
 				role: role.value,
 				"aria-label": title.value,
@@ -1352,7 +1364,6 @@ var dialog_host_default = /* @__PURE__ */ defineComponent({
 		});
 		provide(dialogHostKey, {
 			role: () => request.value?.role,
-			persistent: () => isRunning.value,
 			afterLeave: showNext
 		});
 		onMounted(() => owners$1.value.push(owner));
@@ -1398,6 +1409,19 @@ var dialog_host_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/composables/colors/use-vuetify-background-color.ts
+/**
+* Vuetify's utility class that applies a color to the background of an element, and the color the
+* theme pairs with it to its text, for props that color a background. No class when the color is
+* omitted, so the element keeps its default background.
+*/
+function useVuetifyBackgroundColor(color) {
+	return computed(() => {
+		const colorValue = toValue(color);
+		return colorValue ? `bg-${colorToVuetifyColor[colorValue]}` : void 0;
+	});
+}
+//#endregion
 //#region src/components/main/main.vue
 var main_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
@@ -1426,6 +1450,10 @@ var main_default = /* @__PURE__ */ defineComponent({
 		loading: {
 			type: Boolean,
 			required: false
+		},
+		background: {
+			type: String,
+			required: false
 		}
 	}, {
 		"notificationsOpen": {
@@ -1443,10 +1471,14 @@ var main_default = /* @__PURE__ */ defineComponent({
 			navigation: props.navigationMenu !== void 0,
 			loading: props.loading
 		} : void 0);
+		const backgroundClass = useVuetifyBackgroundColor(() => props.background);
 		const notificationsOpen = useModel(__props, "notificationsOpen");
 		const navigationMenuOpen = ref(false);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VApp), { "data-testid": props.dataTestid }, {
+			return openBlock(), createBlock(unref(VApp), {
+				class: normalizeClass(unref(backgroundClass)),
+				"data-testid": props.dataTestid
+			}, {
 				default: withCtx(() => [
 					appBarProps.value ? (openBlock(), createBlock(app_bar_default, mergeProps({ key: 0 }, appBarProps.value, {
 						"notifications-open": notificationsOpen.value,
@@ -1473,7 +1505,7 @@ var main_default = /* @__PURE__ */ defineComponent({
 					props.footer?.description ? (openBlock(), createBlock(footer_default, normalizeProps(mergeProps({ key: 2 }, props.footer)), null, 16)) : createCommentVNode("v-if", true)
 				]),
 				_: 3
-			}, 8, ["data-testid"]);
+			}, 8, ["class", "data-testid"]);
 		};
 	}
 });

package/dist/composables.js

@@ -1,4 +1,4 @@
-import { i as useDialog, o as useToast, t as openDialog } from "./use-dialog-Czq2P-Z9.js";
+import { i as useDialog, o as useToast, t as openDialog } from "./use-dialog-C0sM_bA2.js";
 import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, toValue, watch } from "vue";
 import { isDeepEqual } from "@nexdom/shared/utils";
 import { onBeforeRouteLeave } from "vue-router";

package/dist/{use-dialog-Czq2P-Z9.js → use-dialog-C0sM_bA2.js}

@@ -135,4 +135,4 @@ function dialog(options) {
 	}, (value) => value);
 }
 //#endregion
-export { messages as a, colorToVuetifyTextColor as c, useDialog as i, owners as n, useToast as o, requests as r, useVuetifyColor as s, openDialog as t };
+export { messages as a, colorToVuetifyColor as c, useDialog as i, colorToVuetifyTextColor as l, owners as n, useToast as o, requests as r, useVuetifyColor as s, openDialog as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.47",
+  "version": "2.0.0-beta.49",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",