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

package/dist/components.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,5 +1,5 @@
-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 { formatDateTime, isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
@@ -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"
 			]);
 		};
 	}
@@ -892,7 +1001,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 +1030,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/package.json

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