@nexdom/uimed-vue 2.0.0-beta.25 → 2.0.0-beta.27

package/AGENTS.md

@@ -216,7 +216,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 - Keep temporary files (scripts, specs, configs) outside the repo, e.g. in the system's temp folder. Vitest collects test files from every folder except the excluded ones in `vite.config.ts`, so a temporary spec in a gitignored folder such as `reports/` still runs, and fails, with the unit tests.
 - Never run Stryker at the same time as another test command: they share build output and Stryker fails with `ENOENT`.
 - Unit tests that mount several apps at once (e.g. nested dialogs) need a distinct `global.config.idPrefix` per mount, since `useId()` restarts in each app.
-- In E2E, a paused `page.clock` also freezes transitions, so overlays never finish leaving. Use `page.clock.pauseAt` to hold time-based work (e.g. a demo action with `setTimeout`), `page.clock.fastForward` to complete it, then `page.clock.resume()` before expecting the overlay to be hidden (see `e2e/composables/use-confirm.spec.ts`).
+- In E2E, a paused `page.clock` also freezes transitions, so overlays never finish leaving. Use `pauseClock(page)` from `e2e/utils.ts` to hold time-based work (e.g. a demo action with `setTimeout`), `page.clock.fastForward` to complete it, then `page.clock.resume()` before expecting the overlay to be hidden (see `e2e/composables/use-confirm.spec.ts`). Don't call `page.clock.pauseAt` with the test runner's time (`new Date()`, `Date.now()`): the page clock can be ahead of it, and the pause then fails with "Cannot fast-forward to the past". `pauseClock` pauses from the page's own time instead.
 
 ## Public API design
 

package/dist/components.d.ts

@@ -1,4 +1,4 @@
-import { t as ButtonProps } from "./types-HPMP8IrV.js";
+import { t as ButtonProps } from "./types-Zex9kf7C.js";
 import { RouteLocationRaw } from "vue-router";
 //#region src/components/app-bar/types.d.ts
 /**
@@ -433,8 +433,8 @@ declare const __VLS_export$14: import("vue", { with: { "resolution-mode": "impor
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   variant: TextFieldVariant;
-  clearable: boolean;
   type: TextFieldType;
+  clearable: boolean;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/inputs/checkbox/types.d.ts

package/dist/components.js

@@ -1,7 +1,7 @@
-import { a as messages, n as owners, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { a as messages, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 import { pt } from "vuetify/locale";
-import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
+import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressCircular, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
 import { formatDateTime, isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
 //#region src/composables/navigation/use-route-props.ts
 function useRouteProps(route) {
@@ -15,6 +15,101 @@ function isExternalRoute(route) {
 	return typeof route === "string" && route.startsWith("http");
 }
 //#endregion
+//#region src/composables/navigation/use-navigation-search-shortcut.ts
+/**
+* Mounted navigation menus, in mounting order. Only the first one answers the shortcut, so pages
+* with more than one `UMain` (like the docs) don't open every menu at once.
+*/
+const owners = ref([]);
+/**
+* Focus targets where the shortcut is left to the page: overlays (dialogs, confirmations and
+* menus) and other modals, the activators of open menus (which keep the focus when opened by a
+* click, and would pull it back from the navigation menu) and rich text editors, which usually
+* take Ctrl+K to insert links.
+*/
+const IGNORED_TARGETS = [
+	".v-overlay",
+	"dialog",
+	"[aria-modal='true']",
+	"[aria-haspopup][aria-expanded='true']",
+	"[contenteditable]:not([contenteditable='false'])"
+].join(", ");
+/** Accessible name of the search field, whose placeholder also shows the shortcut. */
+const SEARCH_NAME = "Buscar";
+/**
+* Shortcut keys for the current platform. Starts with the non-macOS keys and switches on mount,
+* so server-rendered pages (the docs) hydrate without mismatches.
+*/
+function useNavigationShortcutKeys() {
+	const isMac = ref(false);
+	onMounted(() => isMac.value = isMacOS());
+	return {
+		label: computed(() => isMac.value ? "⌘K" : "Ctrl+K"),
+		ariaKeyshortcuts: computed(() => isMac.value ? "Meta+K" : "Control+K")
+	};
+}
+/**
+* Listens to Ctrl+K (⌘K on macOS) on `window` while mounted: opens the menu, waits for it to
+* render (the drawer is `inert` while closed) and focuses the search field (a disabled field, as
+* while loading, can't take the focus). When the menu opened by the shortcut closes with the focus
+* inside it, the focus goes back to where it was.
+*/
+function useNavigationSearchShortcut(options) {
+	const { open, field } = options;
+	const owner = Symbol("navigation-search-shortcut");
+	/** Element focused before the shortcut opened the menu, which gets the focus back on close. */
+	let origin = null;
+	onMounted(() => {
+		owners.value.push(owner);
+		globalThis.addEventListener("keydown", onKeydown, { capture: true });
+		findInput().setAttribute("aria-label", SEARCH_NAME);
+	});
+	onUnmounted(() => {
+		owners.value = owners.value.filter((item) => item !== owner);
+		globalThis.removeEventListener("keydown", onKeydown, { capture: true });
+	});
+	watch(open, (isOpen) => {
+		if (isOpen) return;
+		const target = origin;
+		origin = null;
+		if (!findInput().closest(".v-navigation-drawer").contains(document.activeElement)) return;
+		if (target instanceof HTMLElement || target instanceof SVGElement) target.focus();
+	});
+	function onKeydown(event) {
+		if (owners.value[0] !== owner || isIgnoredTarget(event)) return;
+		if (isShortcut(event)) openAndFocus(event);
+		else if (event.key === "Escape" && origin) close();
+	}
+	async function openAndFocus(event) {
+		event.preventDefault();
+		if (!open.value) origin = document.activeElement;
+		open.value = true;
+		await nextTick();
+		const input = findInput();
+		input.focus({ preventScroll: true });
+		input.select();
+	}
+	function findInput() {
+		return field.value.$el.querySelector("input");
+	}
+	function close() {
+		open.value = false;
+	}
+	return {
+		...useNavigationShortcutKeys(),
+		close
+	};
+}
+function isMacOS() {
+	return navigator.userAgent.includes("Macintosh");
+}
+function isShortcut(event) {
+	return (isMacOS() ? event.metaKey : event.ctrlKey) && !event.shiftKey && !event.altKey && !event.isComposing && event.key.toLowerCase() === "k";
+}
+function isIgnoredTarget(event) {
+	return event.target instanceof Element && event.target.closest(IGNORED_TARGETS) !== null;
+}
+//#endregion
 //#region src/components/app-bar/app-bar.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1$3 = { class: "opacity-60" };
 //#endregion
@@ -69,6 +164,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const notificationsOpen = useModel(__props, "notificationsOpen");
 		const navigationOpen = useModel(__props, "navigationOpen");
+		const { ariaKeyshortcuts: navigationKeyshortcuts } = useNavigationShortcutKeys();
 		const helpBtnDataTestid = computed(() => `${props.dataTestid}-help`);
 		const notificationsBtnDataTestid = computed(() => `${props.dataTestid}-notifications`);
 		const navigationBtnDataTestid = computed(() => `${props.dataTestid}-navigation`);
@@ -221,8 +317,13 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 						"data-testid": navigationBtnDataTestid.value,
 						"aria-expanded": navigationOpen.value,
 						"aria-label": "Menu de navegação",
+						"aria-keyshortcuts": unref(navigationKeyshortcuts),
 						onClick: _cache[0] || (_cache[0] = ($event) => navigationOpen.value = !navigationOpen.value)
-					}, null, 8, ["data-testid", "aria-expanded"])) : createCommentVNode("v-if", true),
+					}, null, 8, [
+						"data-testid",
+						"aria-expanded",
+						"aria-keyshortcuts"
+					])) : createCommentVNode("v-if", true),
 					__props.logo ? (openBlock(), createBlock(unref(VImg), {
 						key: 1,
 						src: props.logo,
@@ -488,6 +589,10 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const open = useModel(__props, "modelValue");
 		const search = ref("");
+		const { label: shortcutLabel, close } = useNavigationSearchShortcut({
+			open,
+			field: useTemplateRef("searchField")
+		});
 		const filteredItems = computed(() => filterItems());
 		const searchDataTestid = computed(() => `${props.dataTestid}-search`);
 		const query = computed(() => search.value.toLowerCase());
@@ -518,17 +623,20 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 				"data-testid": props.dataTestid,
 				"aria-busy": props.loading || void 0,
 				absolute: "",
-				temporary: ""
+				temporary: "",
+				onKeydown: withKeys(unref(close), ["esc"])
 			}, {
 				prepend: withCtx(() => [createElementVNode("div", _hoisted_1$2, [createVNode(text_field_default, {
+					ref: "searchField",
 					modelValue: search.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
 					type: "search",
-					label: "Buscar",
+					placeholder: `Buscar (${unref(shortcutLabel)})`,
 					"data-testid": searchDataTestid.value,
 					disabled: props.loading
 				}, null, 8, [
 					"modelValue",
+					"placeholder",
 					"data-testid",
 					"disabled"
 				])])]),
@@ -561,7 +669,8 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 			}, 8, [
 				"modelValue",
 				"data-testid",
-				"aria-busy"
+				"aria-busy",
+				"onKeydown"
 			]);
 		};
 	}
@@ -694,6 +803,11 @@ var button_default = /* @__PURE__ */ defineComponent({
 				form: unref(form),
 				onClick
 			}, {
+				loader: withCtx(() => [createVNode(unref(VProgressCircular), {
+					indeterminate: "",
+					width: "2",
+					"aria-hidden": "true"
+				})]),
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 8, [
@@ -892,7 +1006,7 @@ var dialog_host_default = /* @__PURE__ */ defineComponent({
 	__name: "dialog-host",
 	setup(__props) {
 		const owner = Symbol("dialog");
-		const isOwner = computed(() => owners.value[0] === owner);
+		const isOwner = computed(() => owners$1.value[0] === owner);
 		const next = computed(() => isOwner.value ? requests.value[0] : void 0);
 		/** Dialog on display, kept until its leave transition ends. */
 		const request = shallowRef();
@@ -921,8 +1035,8 @@ var dialog_host_default = /* @__PURE__ */ defineComponent({
 			persistent: () => isRunning.value,
 			afterLeave: showNext
 		});
-		onMounted(() => owners.value.push(owner));
-		onUnmounted(() => owners.value = owners.value.filter((item) => item !== owner));
+		onMounted(() => owners$1.value.push(owner));
+		onUnmounted(() => owners$1.value = owners$1.value.filter((item) => item !== owner));
 		watch(next, show);
 		function show() {
 			if (request.value) return;

package/dist/composables.d.ts

@@ -1,4 +1,4 @@
-import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-HPMP8IrV.js";
+import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-Zex9kf7C.js";
 //#region src/composables/dialogs/types.d.ts
 interface ToastOptions {
   /**

package/dist/{types-HPMP8IrV.d.ts → types-Zex9kf7C.d.ts}

@@ -33,6 +33,8 @@ type ButtonProps = {
   disabled?: boolean;
   /**
    * Displays a loading indicator on the button, disabling interaction.
+   * The button keeps its text as accessible name and is marked as busy, and
+   * assistive technologies ignore the indicator.
    * @default false
    */
   loading?: boolean;

package/package.json

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