@nexdom/uimed-vue 2.6.0 → 2.7.0

package/dist/components/navigation-menu/navigation-menu.vue_vue_type_script_setup_true_lang.js

@@ -34,6 +34,7 @@ var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const props = __props;
+		const layoutOrder = 1;
 		const open = useModel(__props, "modelValue");
 		const search = ref("");
 		const searchFieldDefaults = { VTextField: { hideDetails: "auto" } };
@@ -89,8 +90,8 @@ var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				permanent: !unref(mobile),
 				rail: !unref(mobile),
 				"expand-on-hover": "",
-				absolute: "",
 				temporary: "",
+				order: layoutOrder,
 				onFocusin: unref(onFocusin),
 				onFocusout: unref(onFocusout),
 				onMouseenter: unref(onMouseenter),
@@ -149,11 +150,12 @@ var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					type: "list-item@6",
 					color: "tertiary"
 				}, {
-					default: withCtx(() => [createCommentVNode(" Vuetify's `list` role only allows list items, but the items are links.\n      `indent` aligns the items of a group with its title, which the 24px between the icons and\n      the titles (`settings.scss`) move 8px to the left of Vuetify's default indentation. It\n      replaces the group's prepend width too, so it's the icon (24px) plus that gap (24px) "), createVNode(unref(VList), {
+					default: withCtx(() => [createCommentVNode(" Vuetify's `list` role only allows list items, but the items are links.\n      Vuetify makes the list the only tab stop and takes its items out of the tab order, for the arrow\n      keys: the items are links and buttons, so each one is a tab stop instead (the arrow keys still\n      move between them), and the list stays out of the tab order.\n      `indent` aligns the items of a group with its title, which the 24px between the icons and\n      the titles (`settings.scss`) move 8px to the left of Vuetify's default indentation. It\n      replaces the group's prepend width too, so it's the icon (24px) plus that gap (24px) "), createVNode(unref(VList), {
 						opened: unref(opened),
 						"onUpdate:opened": _cache[1] || (_cache[1] = ($event) => isRef(opened) ? opened.value = $event : null),
 						nav: "",
 						role: "group",
+						tabindex: "-1",
 						indent: 48
 					}, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
@@ -168,6 +170,7 @@ var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 									"aria-expanded": isOpen,
 									"aria-selected": void 0,
 									role: void 0,
+									tabindex: "0",
 									tag: "button",
 									type: "button",
 									class: "w-100 text-start v-treeview-item--activatable-group-activator"
@@ -180,6 +183,7 @@ var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (childItem, childIndex) => {
 									return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToListItemProps)(childItem.route), {
 										title: childItem.description,
+										tabindex: "0",
 										onClick: childItem.action
 									}), null, 16, ["title", "onClick"]);
 								}), 128))]),
@@ -188,7 +192,10 @@ var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 								key: 1,
 								title: item.description,
 								"prepend-icon": unref(icons)[item.icon]
-							}, { ref_for: true }, unref(routeToListItemProps)(item.route), { onClick: item.action }), null, 16, [
+							}, { ref_for: true }, unref(routeToListItemProps)(item.route), {
+								tabindex: "0",
+								onClick: item.action
+							}), null, 16, [
 								"title",
 								"prepend-icon",
 								"onClick"

package/package.json

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

package/skills/uimed-vue/references/api/components/main.md

@@ -11,7 +11,7 @@ Responsável por carregar o menu superior, o menu de navegação lateral, o roda
 | `dataTestid`     | `string`                                                                                         |         | Aplica atributo `data-testid` para testes sobre o componente.                                                                                                                                                                                                                                                                           |
 | `logo`           | `string`                                                                                         |         | URL utilizada para carregar a logo que será apresentada. A logo é decorativa (`alt=""`): o título do menu superior (`appBar.title`) identifica a aplicação.                                                                                                                                                                             |
 | `appBar`         | [`AppBar`](#appbar)                                                                              |         | Conjunto de propriedades para aplicar à barra superior.                                                                                                                                                                                                                                                                                 |
-| `navigationMenu` | [`NavigationMenu`](#navigationmenu)                                                              |         | Conjunto de propriedades para aplicar ao menu lateral de navegação.                                                                                                                                                                                                                                                                     |
+| `navigationMenu` | [`NavigationMenu`](#navigationmenu)                                                              |         | Conjunto de propriedades para aplicar ao menu lateral de navegação, fixo à esquerda da tela.                                                                                                                                                                                                                                            |
 | `footer`         | [`Footer`](#footer)                                                                              |         | Conjunto de propriedades para aplicar ao rodapé, fixo na parte inferior da tela e com a mesma elevação do menu superior. **O rodapé será ocultado sempre que essa prop for omitida ou o seu `description` for vazio.**                                                                                                                  |
 | `loading`        | `boolean`                                                                                        | `false` | Exibe skeletons no lugar das ações do menu superior e dos itens do menu de navegação enquanto os dados são carregados. O conteúdo da página não é afetado.                                                                                                                                                                              |
 | `background`     | `"primary" \| "secondary" \| "tertiary" \| "positive" \| "informative" \| "caution" \| "danger"` |         | Aplica uma cor ao fundo de toda a aplicação, como em landing pages. O texto colocado diretamente sobre o fundo passa a usar a cor associada a ele (branco, verde-escuro ou preto), enquanto o menu superior, o rodapé, as sections e os diálogos mantêm os próprios fundos. **Quando omitida, a aplicação usa o fundo padrão do tema.** |

package/skills/uimed-vue/references/guide/components/main.md

@@ -218,6 +218,8 @@ Em telas largas (a partir de 1145px), o menu fica sempre visível à esquerda do
 
 Em telas pequenas, o menu fica oculto e é aberto sobre o conteúdo pelo botão "Menu de navegação" do menu superior.
 
+O menu fica fixo na tela enquanto a página rola, abaixo do menu superior e acima do rodapé, quando ele é exibido. Se os itens não couberem na altura disponível, apenas a lista do menu rola, e a busca continua no topo dele.
+
 Os itens e grupos do primeiro nível do menu exibem um ícone antes da sua descrição, informado pelo nome na propriedade obrigatória `icon`. Os nomes disponíveis estão em [Ícones](../icons.md). Os itens dentro de um grupo não aceitam ícones, para que o menu siga o mesmo padrão visual em todas as aplicações.
 
 O menu também conta com um campo de busca que filtra itens e grupos em tempo real, no formato _case-insensitive_. Enquanto há texto na busca, os grupos com resultados ficam abertos, mostrando os itens encontrados. Um grupo ainda pode ser fechado pelo seu cabeçalho, até o texto mudar de novo. Ao limpar a busca, ficam abertos os grupos que estavam abertos antes dela.