@nexdom/uimed-vue 2.0.0-beta.46 → 2.0.0-beta.48

package/dist/components.d.ts

@@ -575,8 +575,8 @@ declare const __VLS_export$16: import("vue", { with: { "resolution-mode": "impor
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   variant: TextFieldVariant;
-  type: TextFieldType;
   clearable: boolean;
+  type: TextFieldType;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/inputs/checkbox/types.d.ts
@@ -1715,6 +1715,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 +1732,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

@@ -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;
@@ -1005,7 +1005,7 @@ function useVuetifyTextColor(color) {
 //#region src/composables/button/button.ts
 const buttonVariantToVuetifyVariant = {
 	primary: "elevated",
-	secondary: "flat",
+	secondary: "outlined",
 	ghost: "text"
 };
 function useButtonVariant(variant) {
@@ -1034,13 +1034,15 @@ function useButtonType(type, route, blocked) {
 	});
 }
 /**
-* Maps the button's color to Vuetify's. A ghost button has no fill, so its color is the text's,
-* which takes the color's text shade to keep WCAG AA's contrast.
+* Maps the button's color to Vuetify's. Secondary (outlined) and ghost buttons have no fill, so
+* their color is the text's, which takes the color's text shade to keep WCAG AA's contrast.
 */
 function useButtonColor(color, variant) {
 	const fillColor = useVuetifyColor(color);
 	const textColor = useVuetifyTextColor(color);
-	return computed(() => toValue(variant) === "ghost" ? textColor.value : fillColor.value);
+	return computed(() => {
+		return toValue(variant) === "secondary" || toValue(variant) === "ghost" ? textColor.value : fillColor.value;
+	});
 }
 /**
 * The button's `form`, or `undefined` when it has a `route`, even while blocked, since `form`
@@ -1173,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 };
 }
@@ -1212,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
@@ -1264,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;
@@ -1273,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,
@@ -1350,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));

package/package.json

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