@nexdom/uimed-vue 1.1.0 → 1.2.0-beta.2

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 (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/dist/components.d.ts

@@ -1,3 +1,97 @@
+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/root/types.d.ts
 /**
  * Props exposed by the {@link Root} component.
@@ -7,6 +101,10 @@ type RootProps = {
    * Component id to use on automated tests.
    */
   dataTestid?: string;
+  /**
+   * App bar properties.
+   */
+  appBar?: AppBarProps;
 };
 //#endregion
 //#region src/components/root/root.vue.d.ts
@@ -23,7 +121,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 & {
@@ -34,7 +140,6 @@ type __VLS_WithSlots$5<T, S> = T & {
 //#endregion
 //#region src/components/btn/types.d.ts
 type BtnVariant = "primary" | "secondary" | "ghost";
-type BtnColor = "primary" | "secondary" | "positive" | "informative" | "caution" | "danger";
 /**
  * Props exposed by the {@link Btn} component.
  */
@@ -56,7 +161,7 @@ type BtnProps = {
    * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
    * @default "primary"
    */
-  color?: BtnColor;
+  color?: ColorVariant;
   /**
    * Removes the ability to click or target the button.
    * @default false
@@ -352,4 +457,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, _default$4 as Root, _default$5 as Row, _default$6 as TextField };

package/dist/components.js

@@ -1,11 +1,211 @@
-import { computed, createBlock, createPropsRestProxy, defineComponent, mergeModels, openBlock, renderSlot, toValue, unref, useModel, withCtx, withModifiers } from "vue";
-import { VApp, VBtn, VCol, VContainer, VForm, VRow, VTextField } from "vuetify/components";
-import { isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
+import { r as useVuetifyColor, t as messages } from "./use-toast-CACuYhK_.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createPropsRestProxy, createSlots, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, openBlock, renderList, renderSlot, toDisplayString, toValue, unref, useModel, withCtx, withModifiers } from "vue";
+import { VApp, VAppBar, VAvatar, VBadge, VBtn, VCard, VCardText, VCol, VContainer, VDivider, VForm, VIcon, VIconBtn, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VMain, VMenu, 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 routeToProps(route) {
+	const location = toValue(route);
+	return isExternalRoute(location) ? { href: location } : { to: location };
+}
+function isExternalRoute(route) {
+	return typeof route === "string" && route.startsWith("http");
+}
 //#endregion
-//#region src/components/root/root.vue
-var root_default = /* @__PURE__ */ defineComponent({
+//#region src/components/app-bar/app-bar.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "opacity-60" };
+//#endregion
+//#region src/components/app-bar/app-bar.vue
+var app_bar_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
-	__name: "root",
+	__name: "app-bar",
+	props: /*@__PURE__*/ mergeModels({
+		dataTestid: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		help: {
+			type: null,
+			required: false
+		},
+		user: {
+			type: Object,
+			required: false
+		},
+		notifications: {
+			type: Array,
+			required: false
+		}
+	}, {
+		"notificationsOpen": {
+			type: Boolean,
+			default: false
+		},
+		"notificationsOpenModifiers": {}
+	}),
+	emits: ["update:notificationsOpen"],
+	setup(__props) {
+		const props = __props;
+		const notificationsOpen = useModel(__props, "notificationsOpen");
+		const helpBtnDataTestid = computed(() => `${props.dataTestid}-help`);
+		const notificationsBtnDataTestid = computed(() => `${props.dataTestid}-notifications`);
+		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(VAppBar), {
+				title: props.title,
+				"data-testid": props.dataTestid
+			}, {
+				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[0] || (_cache[0] = ($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[1] || (_cache[1] = [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, 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[2] || (_cache[2] = [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"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/grid/container/container.vue
+var container_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "container",
 	props: { dataTestid: {
 		type: String,
 		required: false
@@ -13,7 +213,10 @@ var root_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const props = __props;
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VApp), { "data-testid": props.dataTestid }, {
+			return openBlock(), createBlock(unref(VContainer), {
+				"data-testid": props.dataTestid,
+				fluid: ""
+			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 8, ["data-testid"]);
@@ -21,32 +224,88 @@ var root_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#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
+		}
+	}, {
+		"notificationsOpen": {
+			type: Boolean,
+			default: false
+		},
+		"notificationsOpenModifiers": {}
+	}),
+	emits: ["update:notificationsOpen"],
+	setup(__props) {
+		const props = __props;
+		const notificationsOpen = useModel(__props, "notificationsOpen");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VApp), { "data-testid": props.dataTestid }, {
+				default: withCtx(() => [props.appBar ? (openBlock(), createBlock(app_bar_default, mergeProps({ key: 0 }, props.appBar, {
+					"notifications-open": notificationsOpen.value,
+					"onUpdate:notificationsOpen": _cache[0] || (_cache[0] = ($event) => notificationsOpen.value = $event)
+				}), null, 16, ["notifications-open"])) : 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"
 };
-const btnColorToVuetifyColor = {
-	primary: "primary",
-	secondary: "secondary",
-	positive: "success",
-	informative: "info",
-	caution: "warning",
-	danger: "error"
-};
 function useBtnVariant(variant) {
 	return computed(() => {
 		const variantValue = toValue(variant);
 		return variantValue ? btnVariantToVuetifyVariant[variantValue] : btnVariantToVuetifyVariant.primary;
 	});
 }
-function useBtnColor(color) {
-	return computed(() => {
-		const colorValue = toValue(color);
-		return colorValue ? btnColorToVuetifyColor[colorValue] : btnColorToVuetifyColor.primary;
-	});
-}
 function useBtnType(type) {
 	return computed(() => {
 		return toValue(type) ?? "button";
@@ -95,7 +354,7 @@ var btn_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const variant = useBtnVariant(() => props.variant);
-		const color = useBtnColor(() => props.color);
+		const color = useVuetifyColor(() => props.color);
 		const type = useBtnType(() => props.type);
 		const form = useBtnForm(() => props.form);
 		function onClick(event) {
@@ -291,28 +550,6 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#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/grid/row/row.vue
 var row_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,

package/dist/composables.d.ts

@@ -0,0 +1,67 @@
+import { n as FeedbackColorVariant } from "./types-BPXXtbmW.js";
+//#region src/composables/dialogs/types.d.ts
+interface ToastOptions {
+  /**
+   * Text to be presented in the toast.
+   */
+  message: string;
+  /**
+   * Applies a color to the button.
+   * One of `positive`, `informative`, `caution`, or `danger`.
+   * @default "informative"
+   */
+  color?: FeedbackColorVariant;
+}
+//#endregion
+//#region src/composables/dialogs/use-toast.d.ts
+/**
+ * Composable which returns a function to display toast messages.
+ *
+ * @example
+ * ```ts
+ * const { toast } = useToast();
+ * toast({ message: "Hello, World!" });
+ * ```
+ */
+declare function useToast(): {
+  toast: typeof toast;
+};
+/**
+ * Displays a toast message.
+ * @param {ToastOptions} options - Options for the toast message.
+ *
+ * @example
+ * ```ts
+ * toast({ message: "Hello, World!" });
+ * ```
+ */
+declare function toast(options: ToastOptions): void;
+//#endregion
+//#region src/composables/dialogs/use-run-or-toast..d.ts
+/**
+ * Generate `run` method and a computed property `isRunning`.
+ * Calling `run` will  reactively update `isRunning`.
+ *
+ * @example
+ * ```ts
+ * const { run, isRunning } = useRunOrToast();
+ *
+ * // Logs: false
+ * console.log(isRunning.value);
+ *
+ * const promise = run(() => someFunction(param1, param2));
+ *
+ * // Logs: true
+ * console.log(isRunning.value);
+ *
+ * await promise;
+ * // Logs: false
+ * console.log(isRunning.value);
+ * ```
+ */
+declare function useRunOrToast(): {
+  run: <T extends (...args: Parameters<T>) => PromiseLike<Awaited<ReturnType<T>>>>(toRun: T, ...params: Parameters<T>) => Promise<Awaited<ReturnType<T>> | false>;
+  isRunning: import("vue").ComputedRef<boolean>;
+};
+//#endregion
+export { useRunOrToast, useToast };

package/dist/composables.js

@@ -0,0 +1,65 @@
+import { n as useToast } from "./use-toast-CACuYhK_.js";
+import { computed, ref } from "vue";
+//#region src/composables/dialogs/use-run-or-toast..ts
+const { toast } = useToast();
+/**
+* Generate `run` method and a computed property `isRunning`.
+* Calling `run` will  reactively update `isRunning`.
+*
+* @example
+* ```ts
+* const { run, isRunning } = useRunOrToast();
+*
+* // Logs: false
+* console.log(isRunning.value);
+*
+* const promise = run(() => someFunction(param1, param2));
+*
+* // Logs: true
+* console.log(isRunning.value);
+*
+* await promise;
+* // Logs: false
+* console.log(isRunning.value);
+* ```
+*/
+function useRunOrToast() {
+	const running = ref(false);
+	const isRunning = computed(() => running.value);
+	/**
+	* Receives a function and its parameters, runs it, and if it throws an error, shows a toast with the error message.
+	* @returns the function returned value or `false` on error
+	*
+	* @example
+	* ```ts
+	* const { run, isRunning } = useRunOrToast();
+	*
+	* // Call like this:
+	* const someFunctionResult1 = await run(() => someFunction(param1, param2));
+	*
+	* // Or this:
+	* const someFunctionResult2 = await run(someFunction, param1, param2);
+	* ```
+	*/
+	async function run(toRun, ...params) {
+		try {
+			running.value = true;
+			return await toRun(...params);
+		} catch (error) {
+			if (error instanceof Error) toast({
+				message: error.message,
+				color: "danger"
+			});
+			else console.error(error);
+			return false;
+		} finally {
+			running.value = false;
+		}
+	}
+	return {
+		run,
+		isRunning
+	};
+}
+//#endregion
+export { useRunOrToast, useToast };

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/types-BPXXtbmW.d.ts

@@ -0,0 +1,5 @@
+//#region src/composables/colors/types.d.ts
+type ColorVariant = "primary" | "secondary" | FeedbackColorVariant;
+type FeedbackColorVariant = "positive" | "informative" | "caution" | "danger";
+//#endregion
+export { FeedbackColorVariant as n, ColorVariant as t };

package/dist/use-toast-CACuYhK_.js

@@ -0,0 +1,53 @@
+import { computed, ref, toValue } from "vue";
+const colorToVuetifyColor = {
+	primary: "primary",
+	secondary: "secondary",
+	positive: "success",
+	informative: "info",
+	caution: "warning",
+	danger: "error"
+};
+//#endregion
+//#region src/composables/colors/use-vuetify-color.ts
+function useVuetifyColor(color) {
+	return computed(() => {
+		const colorValue = toValue(color);
+		return colorValue ? colorToVuetifyColor[colorValue] : colorToVuetifyColor.primary;
+	});
+}
+//#endregion
+//#region src/composables/dialogs/use-toast.ts
+const messages = ref([]);
+/**
+* Composable which returns a function to display toast messages.
+*
+* @example
+* ```ts
+* const { toast } = useToast();
+* toast({ message: "Hello, World!" });
+* ```
+*/
+function useToast() {
+	return { toast };
+}
+/**
+* Displays a toast message.
+* @param {ToastOptions} options - Options for the toast message.
+*
+* @example
+* ```ts
+* toast({ message: "Hello, World!" });
+* ```
+*/
+function toast(options) {
+	const text = options.message;
+	const color = useVuetifyColor(options.color ?? "informative");
+	const toastMessage = {
+		text,
+		color: color.value,
+		prependIcon: `$${color.value}`
+	};
+	messages.value.push(toastMessage);
+}
+//#endregion
+export { useToast as n, useVuetifyColor as r, messages as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "1.1.0",
+  "version": "1.2.0-beta.2",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -21,12 +21,14 @@
     "home": "https://github.com/nexdom-healthtech/uimed-vue#readme"
   },
   "files": [
-    "dist"
+    "dist",
+    "AGENTS.md"
   ],
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
     "./components": "./dist/components.js",
+    "./composables": "./dist/composables.js",
     "./plugins": "./dist/plugins.js",
     "./unit-test": "./dist/unit-test.js",
     "./package.json": "./package.json"
@@ -78,8 +80,9 @@
     "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.1.7"
+    "vuetify": "^4.2.0"
   },
   "peerDependencies": {
     "@fontsource/roboto": "^5.3.0",
@@ -89,7 +92,8 @@
     "vite-plugin-vuetify": "^2.1.3",
     "vite-plus": "^0.2.7",
     "vue": "^3.5.40",
-    "vuetify": "^4.1.7"
+    "vue-router": "^5.3.1",
+    "vuetify": "^4.2.0"
   },
   "commitlint": {
     "extends": [