@nexdom/uimed-vue 1.2.0-beta.1 → 1.2.0-beta.3

package/AGENTS.md

@@ -0,0 +1,145 @@
+# AGENTS.md
+
+## Project
+
+`@nexdom/uimed-vue` is a Vue 3 UI component library for NEXDOM applications, built on top of [Vuetify](https://vuetifyjs.com/) and [Material Design 3](https://m3.material.io/). It's published to npm and documented via VitePress at https://nexdom-healthtech.github.io/uimed-vue/.
+
+Tooling is built around [Vite+](https://github.com/voidzero-dev/vite-plus) (`vp`/`vpr`/`vpx` CLIs), not raw `vite`/`vitest`/`eslint` invocations.
+
+## Using this library in an app
+
+These steps are for developers _consuming_ `@nexdom/uimed-vue` in a Vue application (not for contributing to this repo — see the rest of this document for that).
+
+### Install
+
+```bash
+vp add @nexdom/uimed-vue
+# But, if you're not using Vite+ yet...
+npm i @nexdom/uimed-vue
+# Or
+pnpm add @nexdom/uimed-vue
+# Or
+yarn add @nexdom/uimed-vue
+```
+
+Peer dependencies (`@fontsource/roboto`, `@mdi/font`, `@nexdom/shared`, `resize-observer-polyfill`, `vite-plugin-vuetify`, `vite-plus`, `vue`, `vue-router`, `vuetify`) must be installed alongside it — most package managers install these automatically, but confirm versions match what's declared in `package.json`'s `peerDependencies`.
+
+### Setup
+
+Add the Vite plugin:
+
+```ts
+// vite.config.ts
+import { vitePluginUimed } from "@nexdom/uimed-vue/plugins.ts";
+
+// ...
+
+plugins: [vue(), vitePluginUimed()];
+
+// ...
+```
+
+Register the plugin in the Vue app:
+
+```ts
+// main.js or main.ts
+import { createApp } from "vue";
+import { createUimed } from "@nexdom/uimed-vue";
+
+import App from "./App.vue";
+
+const uimed = createUimed();
+
+createApp(App).use(uimed).mount("#app");
+```
+
+### Usage
+
+Place the `Root` component at the top of `App.vue`, then add other components as needed:
+
+```vue
+<!-- App.vue -->
+<template>
+  <root>
+    <!-- ... -->
+  </root>
+</template>
+
+<script setup lang="ts">
+import { Root } from "@nexdom/uimed-vue/components";
+</script>
+```
+
+Never write CSS, classes or any kind of styling. Always use component props.
+
+Available entry points: `@nexdom/uimed-vue` (root), `@nexdom/uimed-vue/components`, `@nexdom/uimed-vue/composables`, `@nexdom/uimed-vue/plugins`, `@nexdom/uimed-vue/unit-test` (test helpers, e.g. `vueTestUtilsPluginUimed()` for mounting components with Vuetify in Vitest).
+
+Full component/composable reference lives in the [docs](https://nexdom-healthtech.github.io/uimed-vue/).
+
+## Contributing to this repo
+
+The sections below are for developers working _on_ this library itself.
+
+### Dev environment setup
+
+This project expects to be opened inside its devcontainer (VSCode). If commands below fail with missing shims/commands, run:
+
+```bash
+vp env doctor   # diagnose missing parts
+vp env setup    # create shims like vpr and vpx
+vp install      # install dependencies
+```
+
+## Commands
+
+- `vpr check` — lint, formatter, and type-check (requires `build`/`pack` to have run first for the type-check step)
+- `vp test --coverage` — unit tests with coverage (Vitest, jsdom, 100% coverage threshold enforced)
+- `vpr test:mutations` — mutation tests (Stryker; thresholds: high 100, low 95, break 95)
+- `vpr test:e2e` — E2E tests (Playwright, runs against the built docs preview site)
+- `vpr depcruise` — architecture/dependency rules (dependency-cruiser)
+- `vp pack` / `vpr build` — build the library
+- `vpr docs` / `vpr docs:dev` — run docs site (imports the lib from `dist`, not `src` — run `vpr dev` in a second terminal to keep `dist` updated while iterating)
+
+CI (`.github/workflows/ci.yml`) runs, in order: commitlint on PR commits, `vp pack`, `vpr check`, `vpr depcruise`, `vp test --coverage`, `vpr test:mutations`, `vpr test:e2e`. Match this locally before opening a PR.
+
+## Code conventions
+
+- All `src` code is written in English. `docs` content is written in Portuguese (aimed at Brazilian users), even though file/dir names stay in English.
+- Never write CSS, classes or any kind of styling. Always use component props.
+- Path aliases: `@/*` → `src/*`, `@e2e/*` → `e2e/*`.
+- Every public component follows this pattern to block access to internals and give it an editor-hover description:
+
+  ```vue
+  <script lang="ts">
+  /**
+   * A short description of the component, shown when hovering it in the
+   * editor.
+   */
+  export default {
+    inheritAttrs: false,
+  };
+  </script>
+
+  <script setup lang="ts">
+  // component's implementation
+  </script>
+  ```
+
+- Component layout: `src/components/<name>/<name>.vue`, `types.ts` for prop/option types, `__tests__/<name>.test.ts` for unit tests. Composables follow the same shape under `src/composables/<name>/`.
+- Public components/composables/types are re-exported from `src/components/index.ts` and `src/composables/index.ts`.
+- Use [JSDoc](https://jsdoc.app/about-getting-started) on every method/prop/type intended to be part of the public API — it's the primary documentation surface and supports markdown/code examples.
+- Known workarounds (see CONTRIBUTING.md before touching related config): `stryker-vue-ignorer` patches a Stryker/Vue macro-hoisting issue; `vue-tsc` is used for type-check instead of Vite+'s built-in one due to an oxlint/Vue support gap. Both are meant to be removed once their upstream issues are fixed — don't build further on top of them without checking if they're still needed.
+
+## Testing conventions
+
+- Unit tests use Vitest + `@vue/test-utils`, with `vueTestUtilsPluginUimed()` from `@/unit-test.ts` to mount a Vuetify instance.
+- Global unit test setup (`src/__tests__/setup.ts`) stubs `visualViewport`, uses fake timers, and silences `console.error/warn/log`.
+- Coverage threshold is 100%; mutation testing threshold is 100% (break at 100). Don't add code paths without covering tests.
+- E2E tests (Playwright, `e2e/`) run against the built docs preview (`http://localhost:4173/uimed-vue/`). Snapshots/screenshots live under `__snapshots__`/`__screenshot__` next to each spec.
+
+## Git workflow
+
+- Trunk-based development. `main` is the only long-lived branch (`beta`/`alpha` exist only for pre-release/prototype work — see CONTRIBUTING.md for when to use them). `main`, `beta`, `alpha` are all protected against direct pushes.
+- Short-lived branches are named after their intention (e.g. `fix-some-method-behavior`) and are deleted after merging back via PR.
+- Commit messages MUST follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) — enforced by commitlint in CI. Recent examples: `feat(components): ...`, `fix(composables): ...`, `test(e2e): ...`, `docs(root): ...`, `chore: ...`.
+- Releases are automated via `semantic-release` (conventional-commits preset) — don't hand-edit versions/changelogs.

package/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/README.md

@@ -4,6 +4,19 @@
 [![CD](https://github.com/nexdom-healthtech/uimed-vue/actions/workflows/cd.yml/badge.svg)](https://github.com/nexdom-healthtech/uimed-vue/actions/workflows/cd.yml)
 [![Dependabot](https://github.com/nexdom-healthtech/uimed-vue/actions/workflows/dependabot/dependabot-updates/badge.svg)](https://github.com/nexdom-healthtech/uimed-vue/actions/workflows/dependabot/dependabot-updates)
 
+[![Quality Gate Status](https://sonar-qube-public.services-dev.nexdom.tec.br/api/project_badges/measure?project=UIMed-Vue&metric=alert_status&token=sqb_12cf3033ebcf463511977eb64f95e614562e6773)](https://sonar-qube-public.services-dev.nexdom.tec.br/dashboard?id=UIMed-Vue)
+[![Maintainability Rating](https://sonar-qube-public.services-dev.nexdom.tec.br/api/project_badges/measure?project=UIMed-Vue&metric=software_quality_maintainability_rating&token=sqb_12cf3033ebcf463511977eb64f95e614562e6773)](https://sonar-qube-public.services-dev.nexdom.tec.br/dashboard?id=UIMed-Vue)
+[![Reliability Rating](https://sonar-qube-public.services-dev.nexdom.tec.br/api/project_badges/measure?project=UIMed-Vue&metric=software_quality_reliability_rating&token=sqb_12cf3033ebcf463511977eb64f95e614562e6773)](https://sonar-qube-public.services-dev.nexdom.tec.br/dashboard?id=UIMed-Vue)
+[![Security Rating](https://sonar-qube-public.services-dev.nexdom.tec.br/api/project_badges/measure?project=UIMed-Vue&metric=software_quality_security_rating&token=sqb_12cf3033ebcf463511977eb64f95e614562e6773)](https://sonar-qube-public.services-dev.nexdom.tec.br/dashboard?id=UIMed-Vue)
+[![Lines of Code](https://sonar-qube-public.services-dev.nexdom.tec.br/api/project_badges/measure?project=UIMed-Vue&metric=ncloc&token=sqb_12cf3033ebcf463511977eb64f95e614562e6773)](https://sonar-qube-public.services-dev.nexdom.tec.br/dashboard?id=UIMed-Vue)
+[![Coverage](https://sonar-qube-public.services-dev.nexdom.tec.br/api/project_badges/measure?project=UIMed-Vue&metric=coverage&token=sqb_12cf3033ebcf463511977eb64f95e614562e6773)](https://sonar-qube-public.services-dev.nexdom.tec.br/dashboard?id=UIMed-Vue)
+[![Duplicated Lines (%)](https://sonar-qube-public.services-dev.nexdom.tec.br/api/project_badges/measure?project=UIMed-Vue&metric=duplicated_lines_density&token=sqb_12cf3033ebcf463511977eb64f95e614562e6773)](https://sonar-qube-public.services-dev.nexdom.tec.br/dashboard?id=UIMed-Vue)
+[![Technical Debt](https://sonar-qube-public.services-dev.nexdom.tec.br/api/project_badges/measure?project=UIMed-Vue&metric=software_quality_maintainability_remediation_effort&token=sqb_12cf3033ebcf463511977eb64f95e614562e6773)](https://sonar-qube-public.services-dev.nexdom.tec.br/dashboard?id=UIMed-Vue)
+
+[![Docs Website](https://img.shields.io/website?url=https://nexdom-healthtech.github.io/uimed-vue/&label=Docs%20Website&logo=github)](https://nexdom-healthtech.github.io/uimed-vue)
+
+[![semantic-release: conventionalcommits](https://img.shields.io/badge/semantic--release-conventionalcommits-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
+
 A ui framework for NEXDOM applications, based on [Material Design](https://m3.material.io/).
 
 For more examples and information, check the [docs page](https://nexdom-healthtech.github.io/uimed-vue/).

package/dist/components.d.ts

@@ -1,4 +1,138 @@
 import { t as ColorVariant } from "./types-BPXXtbmW.js";
+import { RouteLocationRaw } from "vue-router";
+//#region src/components/app-bar/types.d.ts
+/**
+ * Props exposed by the {@link AppBar} component.
+ */
+type AppBarProps = {
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+  /**
+   * Main title to be presented.
+   */
+  title?: string;
+  /**
+   * Help page route.
+   */
+  help?: RouteLocationRaw;
+  /**
+   * Resources available to the user in the app-bar
+   */
+  user?: AppBarUserProps;
+  /**
+   * List of notifications to show in the {@link AppBar}.
+   */
+  notifications?: Array<AppBarNotification>;
+};
+/**
+ * A single notification entry shown in the {@link AppBar}.
+ */
+interface AppBarNotification {
+  /**
+   * Main text describing the notification.
+   */
+  title: string;
+  /**
+   * Complementary text with additional details.
+   */
+  subtitle?: string;
+  /**
+   * Whether the notification has already been read.
+   */
+  read?: boolean;
+  /**
+   * Date the notification was generated.
+   */
+  date?: Date;
+}
+interface AppBarUserProps {
+  /**
+   * Major identifier, like the user full name.
+   */
+  title?: string;
+  /**
+   * Complement to user identifier, like it's e-mail or username.
+   */
+  subtitle?: string;
+  /**
+   * URL leading to a user picture.
+   */
+  img?: string;
+  /**
+   * Options to show the user when its menu is opened.
+   * Can be plain options, grouped or both.
+   */
+  options?: Array<ParentOptionOrOption>;
+}
+type ParentOptionOrOption = ParentOption | Option;
+type ParentOption = {
+  /**
+   * Text to present for the group.
+   */
+  description: string;
+  /**
+   * Child {@link Option} list.
+   */
+  items: Array<Option>;
+};
+interface Option {
+  /**
+   * Text to present for the action.
+   */
+  description: string;
+  /**
+   * Route to navigate when item is clicked.
+   */
+  route?: RouteLocationRaw;
+  /**
+   * Callback to be triggered when the item is clicked.
+   */
+  action?: () => void;
+}
+//#endregion
+//#region src/components/navigation-menu/types.d.ts
+/**
+ * Props exposed by the {@link NavigationMenu} component.
+ */
+type NavigationMenuProps = {
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+  /**
+   * List of items to show in the {@link NavigationMenu}.
+   * Can be plain items, grouped or both.
+   */
+  items?: Array<NavigationMenuParentItemOrItem>;
+};
+type NavigationMenuParentItemOrItem = NavigationMenuParentItem | NavigationMenuItem;
+type NavigationMenuParentItem = {
+  /**
+   * Text to present for the group.
+   */
+  description: string;
+  /**
+   * Child {@link NavigationMenuItem} list.
+   */
+  items: Array<NavigationMenuItem>;
+};
+interface NavigationMenuItem {
+  /**
+   * Text to present for the item.
+   */
+  description: string;
+  /**
+   * Route to navigate when item is clicked.
+   */
+  route?: RouteLocationRaw;
+  /**
+   * Callback to be triggered when the item is clicked.
+   */
+  action?: () => void;
+}
+//#endregion
 //#region src/components/root/types.d.ts
 /**
  * Props exposed by the {@link Root} component.
@@ -8,6 +142,14 @@ type RootProps = {
    * Component id to use on automated tests.
    */
   dataTestid?: string;
+  /**
+   * App bar properties.
+   */
+  appBar?: AppBarProps;
+  /**
+   * Navigation menu properties.
+   */
+  navigationMenu?: NavigationMenuProps;
 };
 //#endregion
 //#region src/components/root/root.vue.d.ts
@@ -24,7 +166,15 @@ type RootProps = {
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/root | Root Guide}
  */
 declare const _default$4: typeof __VLS_export$6;
-declare const __VLS_export$6: __VLS_WithSlots$5<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RootProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<RootProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export$6: __VLS_WithSlots$5<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RootProps & {
+  notificationsOpen?: boolean;
+}, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
+  "update:notificationsOpen": (value: boolean) => any;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<RootProps & {
+  notificationsOpen?: boolean;
+}> & Readonly<{
+  "onUpdate:notificationsOpen"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots$5<T, S> = T & {
@@ -188,7 +338,11 @@ declare const __VLS_export$4: import("vue", { with: { "resolution-mode": "import
   modelValue?: string;
 }> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+}>, {
+  type: TextFieldType;
+  variant: TextFieldVariant;
+  clearable: boolean;
+}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/grid/container/types.d.ts
 /**
@@ -352,4 +506,4 @@ type __VLS_WithSlots<T, S> = T & {
   };
 };
 //#endregion
-export { _default as Btn, _default$1 as Column, _default$2 as Container, _default$3 as Frm, _default$4 as Root, _default$5 as Row, _default$6 as TextField };
+export { type AppBarProps as AppBarConfig, type AppBarUserProps as AppBarUserConfig, _default as Btn, _default$1 as Column, _default$2 as Container, _default$3 as Frm, type NavigationMenuProps as NavigationMenuConfig, _default$4 as Root, _default$5 as Row, _default$6 as TextField };

package/dist/components.js

@@ -1,171 +1,216 @@
 import { r as useVuetifyColor, t as messages } from "./use-toast-CACuYhK_.js";
-import { computed, createBlock, createPropsRestProxy, createVNode, defineComponent, isRef, mergeModels, mergeProps, openBlock, renderSlot, toValue, unref, useModel, withCtx, withModifiers } from "vue";
-import { VApp, VBtn, VCol, VContainer, VForm, VIconBtn, VMain, VRow, VSnackbarQueue, VTextField } from "vuetify/components";
-import { isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
-//#endregion
-//#region src/components/grid/container/container.vue
-var container_default = /* @__PURE__ */ defineComponent({
-	inheritAttrs: false,
-	__name: "container",
-	props: { dataTestid: {
-		type: String,
-		required: false
-	} },
-	setup(__props) {
-		const props = __props;
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VContainer), {
-				"data-testid": props.dataTestid,
-				fluid: ""
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, ["data-testid"]);
-		};
-	}
-});
-//#endregion
-//#region src/components/dialogs/toast.vue
-var toast_default = /* @__PURE__ */ defineComponent({
-	inheritAttrs: false,
-	__name: "toast",
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VSnackbarQueue), {
-				modelValue: unref(messages),
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(messages) ? messages.value = $event : null),
-				"display-strategy": "overflow",
-				location: "top end",
-				"total-visible": "3",
-				collapsed: "",
-				closable: "",
-				timer: ""
-			}, {
-				actions: withCtx(({ props }) => [createVNode(unref(VIconBtn), mergeProps(props, {
-					"aria-label": "Fechar",
-					icon: "$close",
-					size: "small",
-					variant: "text"
-				}), null, 16)]),
-				_: 1
-			}, 8, ["modelValue"]);
-		};
-	}
-});
-//#endregion
-//#region src/components/root/root.vue
-var root_default = /* @__PURE__ */ defineComponent({
-	inheritAttrs: false,
-	__name: "root",
-	props: { dataTestid: {
-		type: String,
-		required: false
-	} },
-	setup(__props) {
-		const props = __props;
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VApp), { "data-testid": props.dataTestid }, {
-				default: withCtx(() => [createVNode(unref(VMain), null, {
-					default: withCtx(() => [createVNode(container_default, null, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createVNode(toast_default)]),
-						_: 3
-					})]),
-					_: 3
-				})]),
-				_: 3
-			}, 8, ["data-testid"]);
-		};
-	}
-});
-//#endregion
-//#region src/composables/btn.ts
-const btnVariantToVuetifyVariant = {
-	primary: "elevated",
-	secondary: "flat",
-	ghost: "outlined"
-};
-function useBtnVariant(variant) {
-	return computed(() => {
-		const variantValue = toValue(variant);
-		return variantValue ? btnVariantToVuetifyVariant[variantValue] : btnVariantToVuetifyVariant.primary;
-	});
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, useModel, withCtx, withModifiers } from "vue";
+import { VApp, VAppBar, VAppBarNavIcon, VAvatar, VBadge, VBtn, VCard, VCardText, VCol, VContainer, VDivider, VForm, VIcon, VIconBtn, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VMain, VMenu, VNavigationDrawer, VRow, VSnackbarQueue, VTextField } from "vuetify/components";
+import { formatDateTime, isEmail, isEmpty, isPhone, isUrl, toPeriodInterval } from "@nexdom/shared/utils";
+//#region src/composables/navigation/use-route-props.ts
+function useRouteProps(route) {
+	return computed(() => routeToProps(route));
 }
-function useBtnType(type) {
-	return computed(() => {
-		return toValue(type) ?? "button";
-	});
+function routeToProps(route) {
+	const location = toValue(route);
+	return isExternalRoute(location) ? { href: location } : { to: location };
 }
-function useBtnForm(form) {
-	return computed(() => toValue(form));
+function isExternalRoute(route) {
+	return typeof route === "string" && route.startsWith("http");
 }
 //#endregion
-//#region src/components/btn/btn.vue
-var btn_default = /* @__PURE__ */ defineComponent({
+//#region src/components/app-bar/app-bar.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = { class: "opacity-60" };
+//#endregion
+//#region src/components/app-bar/app-bar.vue
+var app_bar_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
-	__name: "btn",
-	props: {
-		variant: {
+	__name: "app-bar",
+	props: /*@__PURE__*/ mergeModels({
+		dataTestid: {
 			type: String,
 			required: false
 		},
-		type: {
+		title: {
 			type: String,
 			required: false
 		},
-		color: {
-			type: String,
+		help: {
+			type: null,
 			required: false
 		},
-		disabled: {
-			type: Boolean,
+		user: {
+			type: Object,
 			required: false
 		},
-		loading: {
-			type: Boolean,
-			required: false
-		},
-		form: {
-			type: String,
+		notifications: {
+			type: Array,
 			required: false
 		},
-		dataTestid: {
-			type: String,
-			required: false
+		navigation: {
+			type: Boolean,
+			required: true
 		}
-	},
-	emits: ["click"],
-	setup(__props, { emit: __emit }) {
+	}, {
+		"notificationsOpen": {
+			type: Boolean,
+			default: false
+		},
+		"notificationsOpenModifiers": {},
+		"navigationOpen": { type: Boolean },
+		"navigationOpenModifiers": {}
+	}),
+	emits: ["update:notificationsOpen", "update:navigationOpen"],
+	setup(__props) {
 		const props = __props;
-		const emit = __emit;
-		const variant = useBtnVariant(() => props.variant);
-		const color = useVuetifyColor(() => props.color);
-		const type = useBtnType(() => props.type);
-		const form = useBtnForm(() => props.form);
-		function onClick(event) {
-			emit("click", event);
+		const notificationsOpen = useModel(__props, "notificationsOpen");
+		const navigationOpen = useModel(__props, "navigationOpen");
+		const helpBtnDataTestid = computed(() => `${props.dataTestid}-help`);
+		const notificationsBtnDataTestid = computed(() => `${props.dataTestid}-notifications`);
+		const navigationBtnDataTestid = computed(() => `${props.dataTestid}-navigation`);
+		const notificationsMenuDataTestid = computed(() => `${props.dataTestid}-notifications-menu`);
+		const userBtnDataTestid = computed(() => `${props.dataTestid}-user`);
+		const userMenuDataTestid = computed(() => `${props.dataTestid}-user-menu`);
+		const showHelp = computed(() => !!props.help);
+		const routeProps = useRouteProps(() => props.help);
+		const showNotifications = computed(() => !!props.notifications);
+		const unreadCount = computed(() => props.notifications.filter((notification) => !notification.read).length);
+		const hasUnreadNotifications = computed(() => unreadCount.value > 0);
+		const showUser = computed(() => !!props.user);
+		const userAvatarProps = computed(() => props.user.img ? { image: props.user.img } : { icon: "mdi-account-outline" });
+		function isParentOption(option) {
+			return "items" in option;
+		}
+		function formatNotificationDate(date) {
+			const interval = toPeriodInterval(date);
+			if (wasThisMonth(interval)) {
+				if (wasToday(interval)) return formatDateTime(date, "HH:mm");
+				else if (wasYesterday(interval)) return "Ontem";
+			}
+			return formatDateTime(date, "DD/MM/YYYY");
+		}
+		function wasThisMonth(interval) {
+			return interval.months === 0 && interval.years === 0;
+		}
+		function wasToday(interval) {
+			return interval.days === 0;
+		}
+		function wasYesterday(interval) {
+			return interval.days === 1;
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VBtn), {
-				disabled: props.disabled,
-				loading: props.loading,
-				"data-testid": props.dataTestid,
-				variant: unref(variant),
-				color: unref(color),
-				type: unref(type),
-				form: unref(form),
-				onClick
+			return openBlock(), createBlock(unref(VAppBar), {
+				title: props.title,
+				"data-testid": props.dataTestid
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, [
-				"disabled",
-				"loading",
-				"data-testid",
-				"variant",
-				"color",
-				"type",
-				"form"
-			]);
+				prepend: withCtx(() => [__props.navigation ? (openBlock(), createBlock(unref(VAppBarNavIcon), {
+					key: 0,
+					"data-testid": navigationBtnDataTestid.value,
+					onClick: _cache[0] || (_cache[0] = ($event) => navigationOpen.value = !navigationOpen.value)
+				}, null, 8, ["data-testid"])) : createCommentVNode("v-if", true)]),
+				append: withCtx(() => [
+					showHelp.value ? (openBlock(), createBlock(unref(VBtn), mergeProps({ key: 0 }, unref(routeProps), {
+						"data-testid": helpBtnDataTestid.value,
+						icon: "mdi-help-circle-outline"
+					}), null, 16, ["data-testid"])) : createCommentVNode("v-if", true),
+					showNotifications.value ? (openBlock(), createBlock(unref(VMenu), {
+						key: 1,
+						modelValue: notificationsOpen.value,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => notificationsOpen.value = $event),
+						"close-on-content-click": false
+					}, {
+						activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
+							"data-testid": notificationsBtnDataTestid.value,
+							icon: ""
+						}), {
+							default: withCtx(() => [createVNode(unref(VBadge), {
+								"model-value": hasUnreadNotifications.value,
+								content: unreadCount.value,
+								color: "error"
+							}, {
+								default: withCtx(() => [createVNode(unref(VIcon), { icon: "mdi-bell-outline" })]),
+								_: 1
+							}, 8, ["model-value", "content"])]),
+							_: 1
+						}, 16, ["data-testid"])]),
+						default: withCtx(() => [createVNode(unref(VCard), { "data-testid": notificationsMenuDataTestid.value }, {
+							default: withCtx(() => [props.notifications?.length ? (openBlock(), createBlock(unref(VList), { key: 0 }, {
+								default: withCtx(() => [createVNode(unref(VListSubheader), null, {
+									default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Notificações", -1)])]),
+									_: 1
+								}), (openBlock(true), createElementBlock(Fragment, null, renderList(props.notifications, (notification, index) => {
+									return openBlock(), createBlock(unref(VListItem), {
+										key: index,
+										active: !notification.read,
+										title: notification.title,
+										subtitle: notification.subtitle,
+										"active-class": "text-primary"
+									}, createSlots({ _: 2 }, [notification.date ? {
+										name: "append",
+										fn: withCtx(() => [createVNode(unref(VListItemAction), { end: "" }, {
+											default: withCtx(() => [createElementVNode("small", _hoisted_1$1, toDisplayString(formatNotificationDate(notification.date)), 1)]),
+											_: 2
+										}, 1024)]),
+										key: "0"
+									} : void 0]), 1032, [
+										"active",
+										"title",
+										"subtitle"
+									]);
+								}), 128))]),
+								_: 1
+							})) : (openBlock(), createBlock(unref(VCardText), { key: 1 }, {
+								default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Nenhuma notificação", -1)])]),
+								_: 1
+							}))]),
+							_: 1
+						}, 8, ["data-testid"])]),
+						_: 1
+					}, 8, ["modelValue"])) : createCommentVNode("v-if", true),
+					showUser.value ? (openBlock(), createBlock(unref(VMenu), {
+						key: 2,
+						"close-on-content-click": false
+					}, {
+						activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
+							"data-testid": userBtnDataTestid.value,
+							icon: ""
+						}), {
+							default: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
+							_: 1
+						}, 16, ["data-testid"])]),
+						default: withCtx(() => [createVNode(unref(VCard), {
+							title: __props.user?.title,
+							subtitle: __props.user?.subtitle,
+							"data-testid": userMenuDataTestid.value
+						}, {
+							prepend: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
+							default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), { nav: "" }, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.user?.options, (option, index) => {
+									return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createBlock(unref(VDivider), {
+										key: 0,
+										class: "mt-1"
+									})) : createCommentVNode("v-if", true), isParentOption(option) ? (openBlock(), createBlock(unref(VListGroup), { key: 1 }, {
+										activator: withCtx(({ props }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, props, { title: option.description }), null, 16, ["title"])]),
+										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(option.items, (childOption, index) => {
+											return openBlock(), createBlock(unref(VListItem), mergeProps({ key: index }, { ref_for: true }, unref(routeToProps)(childOption.route), {
+												title: childOption.description,
+												onClick: childOption.action
+											}), null, 16, ["title", "onClick"]);
+										}), 128))]),
+										_: 2
+									}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
+										key: 2,
+										title: option.description
+									}, { ref_for: true }, unref(routeToProps)(option.route), { onClick: option.action }), null, 16, ["title", "onClick"]))], 64);
+								}), 128))]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, [
+							"title",
+							"subtitle",
+							"data-testid"
+						])]),
+						_: 1
+					})) : createCommentVNode("v-if", true)
+				]),
+				_: 1
+			}, 8, ["title", "data-testid"]);
 		};
 	}
 });
@@ -214,13 +259,13 @@ const textFieldTypeToVuetifyRule = {
 function useTextFieldVariant(variant) {
 	return computed(() => {
 		const variantValue = toValue(variant);
-		return variantValue ? textFieldVariantToVuetifyVariant[variantValue] : textFieldVariantToVuetifyVariant.primary;
+		return textFieldVariantToVuetifyVariant[variantValue];
 	});
 }
 function useTextFieldType(type) {
 	return computed(() => {
 		const typeValue = toValue(type);
-		return typeValue ? textFieldTypeToVuetifyType[typeValue] : textFieldTypeToVuetifyType.text;
+		return textFieldTypeToVuetifyType[typeValue];
 	});
 }
 function useTextFieldRules(props) {
@@ -243,11 +288,13 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		variant: {
 			type: String,
-			required: false
+			required: false,
+			default: "primary"
 		},
 		type: {
 			type: String,
-			required: false
+			required: false,
+			default: "text"
 		},
 		disabled: {
 			type: Boolean,
@@ -260,7 +307,7 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 		clearable: {
 			type: Boolean,
 			required: false,
-			default: () => void 0
+			default: void 0
 		},
 		readonly: {
 			type: Boolean,
@@ -296,17 +343,23 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		const props = createPropsRestProxy(__props, ["clearable"]);
+		const props = __props;
 		const vuetifyVariant = useTextFieldVariant(() => props.variant);
 		const vuetifyType = useTextFieldType(() => props.type);
 		const rules = useTextFieldRules(props);
-		const computedClearable = computed(() => __props.clearable ?? props.type === "search");
+		const isSearchField = computed(() => props.type === "search");
+		const computedClearable = computed(() => props.clearable ?? isSearchField.value);
+		const prependIcon = computed(() => isSearchField.value ? "mdi-magnify" : void 0);
+		function clear() {
+			modelValue.value = "";
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VTextField), {
 				modelValue: modelValue.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
 				variant: unref(vuetifyVariant),
 				type: unref(vuetifyType),
+				"prepend-inner-icon": prependIcon.value,
 				rules: unref(rules),
 				"data-testid": props.dataTestid,
 				disabled: props.disabled,
@@ -315,11 +368,13 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 				label: props.label,
 				placeholder: props.placeholder,
 				hint: props.hint,
-				clearable: computedClearable.value
+				clearable: computedClearable.value,
+				"onClick:clear": clear
 			}, null, 8, [
 				"modelValue",
 				"variant",
 				"type",
+				"prepend-inner-icon",
 				"rules",
 				"data-testid",
 				"disabled",
@@ -334,6 +389,297 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/navigation-menu/navigation-menu.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "px-4 pt-2" };
+//#endregion
+//#region src/components/navigation-menu/navigation-menu.vue
+var navigation_menu_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "navigation-menu",
+	props: /*@__PURE__*/ mergeModels({
+		dataTestid: {
+			type: String,
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const open = useModel(__props, "modelValue");
+		const search = ref("");
+		const filteredItems = computed(() => filterItems());
+		const searchDataTestid = computed(() => `${props.dataTestid}-search`);
+		const query = computed(() => search.value.toLowerCase());
+		function filterItems() {
+			return (props.items ?? []).reduce((filtered, item) => {
+				if (matches(item)) filtered.push(item);
+				else if (isParentItem(item)) {
+					const matchingChildren = item.items.filter((child) => matches(child));
+					if (matchingChildren.length) filtered.push({
+						...item,
+						items: matchingChildren
+					});
+				}
+				return filtered;
+			}, []);
+		}
+		function matches(item) {
+			return item.description.toLowerCase().includes(query.value);
+		}
+		function isParentItem(item) {
+			return "items" in item;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VNavigationDrawer), {
+				modelValue: open.value,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => open.value = $event),
+				"data-testid": props.dataTestid,
+				absolute: "",
+				temporary: ""
+			}, {
+				prepend: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(text_field_default, {
+					modelValue: search.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
+					type: "search",
+					label: "Buscar",
+					"data-testid": searchDataTestid.value
+				}, null, 8, ["modelValue", "data-testid"])])]),
+				default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), { nav: "" }, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
+						return openBlock(), createElementBlock(Fragment, { key: index }, [isParentItem(item) ? (openBlock(), createBlock(unref(VListGroup), { key: 0 }, {
+							activator: withCtx(({ props: activatorProps }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, { title: item.description }), null, 16, ["title"])]),
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (childItem, childIndex) => {
+								return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToProps)(childItem.route), {
+									title: childItem.description,
+									onClick: childItem.action
+								}), null, 16, ["title", "onClick"]);
+							}), 128))]),
+							_: 2
+						}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
+							key: 1,
+							title: item.description
+						}, { ref_for: true }, unref(routeToProps)(item.route), { onClick: item.action }), null, 16, ["title", "onClick"]))], 64);
+					}), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["modelValue", "data-testid"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/grid/container/container.vue
+var container_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "container",
+	props: { dataTestid: {
+		type: String,
+		required: false
+	} },
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VContainer), {
+				"data-testid": props.dataTestid,
+				fluid: ""
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["data-testid"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/dialogs/toast.vue
+var toast_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "toast",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VSnackbarQueue), {
+				modelValue: unref(messages),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(messages) ? messages.value = $event : null),
+				"display-strategy": "overflow",
+				location: "top end",
+				"total-visible": "3",
+				collapsed: "",
+				closable: "",
+				timer: ""
+			}, {
+				actions: withCtx(({ props }) => [createVNode(unref(VIconBtn), mergeProps(props, {
+					"aria-label": "Fechar",
+					icon: "$close",
+					size: "small",
+					variant: "text"
+				}), null, 16)]),
+				_: 1
+			}, 8, ["modelValue"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/root/root.vue
+var root_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "root",
+	props: /*@__PURE__*/ mergeModels({
+		dataTestid: {
+			type: String,
+			required: false
+		},
+		appBar: {
+			type: Object,
+			required: false
+		},
+		navigationMenu: {
+			type: Object,
+			required: false
+		}
+	}, {
+		"notificationsOpen": {
+			type: Boolean,
+			default: false
+		},
+		"notificationsOpenModifiers": {}
+	}),
+	emits: ["update:notificationsOpen"],
+	setup(__props) {
+		const props = __props;
+		const appBarProps = computed(() => props.appBar ? {
+			...props.appBar,
+			navigation: props.navigationMenu !== void 0
+		} : void 0);
+		const notificationsOpen = useModel(__props, "notificationsOpen");
+		const navigationMenuOpen = ref(false);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VApp), { "data-testid": props.dataTestid }, {
+				default: withCtx(() => [
+					appBarProps.value ? (openBlock(), createBlock(app_bar_default, mergeProps({ key: 0 }, appBarProps.value, {
+						"notifications-open": notificationsOpen.value,
+						"onUpdate:notificationsOpen": _cache[0] || (_cache[0] = ($event) => notificationsOpen.value = $event),
+						"navigation-open": navigationMenuOpen.value,
+						"onUpdate:navigationOpen": _cache[1] || (_cache[1] = ($event) => navigationMenuOpen.value = $event)
+					}), null, 16, ["notifications-open", "navigation-open"])) : createCommentVNode("v-if", true),
+					props.navigationMenu ? (openBlock(), createBlock(navigation_menu_default, mergeProps({ key: 1 }, props.navigationMenu, {
+						modelValue: navigationMenuOpen.value,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => navigationMenuOpen.value = $event)
+					}), null, 16, ["modelValue"])) : createCommentVNode("v-if", true),
+					createVNode(unref(VMain), null, {
+						default: withCtx(() => [createVNode(container_default, null, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createVNode(toast_default)]),
+							_: 3
+						})]),
+						_: 3
+					})
+				]),
+				_: 3
+			}, 8, ["data-testid"]);
+		};
+	}
+});
+//#endregion
+//#region src/composables/btn.ts
+const btnVariantToVuetifyVariant = {
+	primary: "elevated",
+	secondary: "flat",
+	ghost: "outlined"
+};
+function useBtnVariant(variant) {
+	return computed(() => {
+		const variantValue = toValue(variant);
+		return variantValue ? btnVariantToVuetifyVariant[variantValue] : btnVariantToVuetifyVariant.primary;
+	});
+}
+function useBtnType(type) {
+	return computed(() => {
+		return toValue(type) ?? "button";
+	});
+}
+function useBtnForm(form) {
+	return computed(() => toValue(form));
+}
+//#endregion
+//#region src/components/btn/btn.vue
+var btn_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "btn",
+	props: {
+		variant: {
+			type: String,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const variant = useBtnVariant(() => props.variant);
+		const color = useVuetifyColor(() => props.color);
+		const type = useBtnType(() => props.type);
+		const form = useBtnForm(() => props.form);
+		function onClick(event) {
+			emit("click", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VBtn), {
+				disabled: props.disabled,
+				loading: props.loading,
+				"data-testid": props.dataTestid,
+				variant: unref(variant),
+				color: unref(color),
+				type: unref(type),
+				form: unref(form),
+				onClick
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"disabled",
+				"loading",
+				"data-testid",
+				"variant",
+				"color",
+				"type",
+				"form"
+			]);
+		};
+	}
+});
+//#endregion
 //#region src/components/grid/row/row.vue
 var row_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,

package/dist/index.d.ts

@@ -15,7 +15,7 @@ import "vuetify/styles";
 import { Plugin } from "vue";
 //#region src/index.d.ts
 /**
- * Create an uimed-vue instance to be installed after [createApp](https://vuejs.org/guide/essentials/application.html#the-application-instance).
+ * Create an UIMed-Vue instance to be installed after [createApp](https://vuejs.org/guide/essentials/application.html#the-application-instance).
  * @returns an instance to be used with [app.use](https://vuejs.org/guide/essentials/application.html#the-application-instance)
  */
 declare function createUimed(): Plugin;

package/dist/index.js

@@ -16,7 +16,7 @@ import { createVuetify } from "vuetify";
 import "vue";
 //#region src/index.ts
 /**
-* Create an uimed-vue instance to be installed after [createApp](https://vuejs.org/guide/essentials/application.html#the-application-instance).
+* Create an UIMed-Vue instance to be installed after [createApp](https://vuejs.org/guide/essentials/application.html#the-application-instance).
 * @returns an instance to be used with [app.use](https://vuejs.org/guide/essentials/application.html#the-application-instance)
 */
 function createUimed() {

package/dist/unit-test.js

@@ -16,7 +16,7 @@ const vuetify = createVuetify({
 * Vue Test Utils plugin for Uimed.
 */
 function vueTestUtilsPluginUimed() {
-	global.ResizeObserver = __require("resize-observer-polyfill");
+	globalThis.ResizeObserver = __require("resize-observer-polyfill");
 	return vuetify;
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0-beta.3",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -21,7 +21,9 @@
     "home": "https://github.com/nexdom-healthtech/uimed-vue#readme"
   },
   "files": [
-    "dist"
+    "dist",
+    "AGENTS.md",
+    "CLAUDE.md"
   ],
   "type": "module",
   "exports": {
@@ -57,6 +59,7 @@
     "@mdi/font": "^7.4.47",
     "@nexdom/shared": "^2.1.1",
     "@playwright/test": "^1.62.1",
+    "@sonar/scan": "^5.0.0",
     "@stryker-mutator/core": "^10.0.0",
     "@stryker-mutator/vitest-runner": "^10.0.0",
     "@types/node": "^26.1.2",
@@ -79,6 +82,7 @@
     "vitepress": "2.0.0-alpha.19",
     "vitepress-plugin-group-icons": "^1.7.6",
     "vue": "^3.5.40",
+    "vue-router": "^5.3.1",
     "vue-tsc": "^3.3.9",
     "vuetify": "^4.2.0"
   },
@@ -90,6 +94,7 @@
     "vite-plugin-vuetify": "^2.1.3",
     "vite-plus": "^0.2.7",
     "vue": "^3.5.40",
+    "vue-router": "^5.3.1",
     "vuetify": "^4.2.0"
   },
   "commitlint": {