@nexdom/uimed-vue 2.0.0-beta.5 → 2.0.0-beta.50

package/dist/types-BbWo6RIy.d.ts

@@ -0,0 +1,69 @@
+import { RouteLocationRaw } from "vue-router";
+//#region src/composables/colors/types.d.ts
+type ColorVariant = "primary" | "secondary" | FeedbackColorVariant;
+type FeedbackColorVariant = "positive" | "informative" | "caution" | "danger";
+//#endregion
+//#region src/components/button/types.d.ts
+type ButtonVariant = "primary" | "secondary" | "ghost";
+/**
+ * Props exposed by the {@link Button} component.
+ */
+type ButtonProps = {
+  /**
+   * Applies a distinct style variation to the button.
+   * One of `primary`, `secondary`, or `ghost`.
+   * @default "primary"
+   */
+  variant?: ButtonVariant;
+  /**
+   * Applies a distinct behavior to the button.
+   * One of `button` or `submit`. Ignored when `route` is set.
+   * @default "button"
+   */
+  type?: "submit" | "button";
+  /**
+   * Applies a color to the button.
+   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
+   * @default "primary"
+   */
+  color?: ColorVariant;
+  /**
+   * Removes the ability to click or target the button.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Displays a loading indicator on the button and disables it while active, as `disabled` does:
+   * it can't be clicked or focused, `click` isn't emitted and its form isn't submitted, including
+   * by pressing `Enter` in one of the form's fields when it's the form's first submit button. It
+   * looks disabled, with the indicator, and loses focus if focused when loading starts, as any
+   * disabled button does. The button keeps its text as accessible name and is marked as busy, and
+   * assistive technologies ignore the indicator.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Stretches the button to the whole width of its parent, e.g. the only action of a form on a
+   * small screen.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Associated [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/form) id.
+   * Ignored when `route` is set.
+   */
+  form?: string;
+  /**
+   * Where the button goes when clicked, rendering it as a link with the button's look. A route
+   * inside the app (`"/patients"`, `{ name: "patient", params: { id } }`) navigates through the
+   * app's router; a URL starting with `http` navigates through the browser, in the same tab. While
+   * `disabled` or `loading`, the button doesn't navigate and is rendered as a disabled button.
+   */
+  route?: RouteLocationRaw;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+export { FeedbackColorVariant as i, ButtonVariant as n, ColorVariant as r, ButtonProps as t };

package/dist/unit-test.d.ts

@@ -3,6 +3,5 @@ import { createVuetify } from "vuetify";
 /**
  * Vue Test Utils plugin for Uimed.
  */
-declare function vueTestUtilsPluginUimed(): ReturnType<typeof createVuetify>;
-//#endregion
-export { vueTestUtilsPluginUimed };
+export declare function vueTestUtilsPluginUimed(): ReturnType<typeof createVuetify>;
+//#endregion

package/dist/unit-test.js

@@ -1,3 +1,4 @@
+import { t as localeOptions } from "./locale-CM4o8cD_.js";
 import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
@@ -10,7 +11,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 //#region src/unit-test.ts
 const vuetify = createVuetify({
 	components,
-	directives
+	directives,
+	locale: localeOptions
 });
 /**
 * Vue Test Utils plugin for Uimed.

package/dist/use-dialog-C0sM_bA2.js

@@ -0,0 +1,138 @@
+import { computed, ref, toValue } from "vue";
+const colorToVuetifyColor = {
+	primary: "primary",
+	secondary: "secondary",
+	positive: "success",
+	informative: "info",
+	caution: "warning",
+	danger: "error"
+};
+/**
+* The theme colors to use when a color is the text color, on the surface or background, instead
+* of a fill. The fills are too light to reach WCAG AA's contrast as text, so each one has a darker
+* shade, except `secondary`, which is almost white and gives way to the theme's text color.
+*/
+const colorToVuetifyTextColor = {
+	primary: "primary-text",
+	secondary: "on-surface",
+	positive: "success-text",
+	informative: "info-text",
+	caution: "warning-text",
+	danger: "error-text"
+};
+//#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}`,
+		timerColor: `rgb(var(--v-theme-on-${color.value}))`
+	};
+	messages.value.push(toastMessage);
+}
+//#endregion
+//#region src/composables/dialogs/use-dialog.ts
+/**
+* Dialogs waiting to be displayed, shared by `useDialog` and `useConfirm`. The first one is the
+* dialog on display (or about to be).
+*/
+const requests = ref([]);
+/**
+* Mounted `Dialog` components, in mounting order. Only the first one displays dialogs, so pages
+* with more than one `UMain` don't display duplicates.
+*/
+const owners = ref([]);
+/**
+* Queues a dialog and resolves with what `onSelect` returns for the clicked action's value
+* (`undefined` when the dialog is dismissed).
+*/
+function openDialog(options, onSelect) {
+	const { actions, ...content } = options;
+	const lastIndex = actions.length - 1;
+	return new Promise((resolve) => {
+		requests.value.push({
+			...content,
+			actions: actions.map((action, index) => ({
+				...action,
+				variant: action.variant ?? (index === lastIndex ? "primary" : "ghost")
+			})),
+			async select(value) {
+				resolve(await onSelect(value));
+			}
+		});
+	});
+}
+/**
+* Composable which returns a function to display dialogs.
+*
+* @example
+* ```ts
+* const { dialog } = useDialog();
+*
+* const answer = await dialog({
+*   title: "Sessão expirando",
+*   message: "Deseja continuar conectado?",
+*   actions: [
+*     { text: "Sair", value: "leave" },
+*     { text: "Continuar", value: "stay" },
+*   ],
+* });
+* ```
+*/
+function useDialog() {
+	return { dialog };
+}
+/**
+* Displays a dialog. Dialogs are displayed one at a time, in the order they were requested.
+* @param {DialogOptions} options - Options for the dialog.
+* @returns the `value` of the clicked action, or `undefined` when the dialog is closed by the
+* default action, the `Esc` key, a click outside it or the browser's back button.
+*
+* @example
+* ```ts
+* await dialog({ title: "Aviso", message: "Seu cadastro foi enviado para análise." });
+* ```
+*/
+function dialog(options) {
+	return openDialog({
+		title: options.title,
+		message: options.message,
+		role: "dialog",
+		actions: options.actions ?? [{ text: "Fechar" }]
+	}, (value) => value);
+}
+//#endregion
+export { messages as a, colorToVuetifyColor as c, useDialog as i, colorToVuetifyTextColor as l, owners as n, useToast as o, requests as r, useVuetifyColor as s, openDialog as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.50",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -52,11 +52,11 @@
     "postinstall": "playwright install --with-deps chromium"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
-    "@fontsource/roboto": "^5.3.0",
     "@mdi/font": "^7.4.47",
-    "@nexdom/shared": "^2.1.1",
+    "@nexdom/shared": "^2.3.0",
     "@playwright/test": "^1.62.1",
     "@sonar/scan": "^5.0.0",
     "@stryker-mutator/core": "^10.0.0",
@@ -64,7 +64,7 @@
     "@types/node": "^26.1.2",
     "@typescript/native-preview": "7.0.0-dev.20260707.2",
     "@vitejs/plugin-vue": "^6.0.8",
-    "@vitest/coverage-v8": "4.1.10",
+    "@vitest/coverage-v8": "5.0.1",
     "@vue/test-utils": "^2.4.11",
     "bumpp": "^12.1.1",
     "conventional-changelog-conventionalcommits": "^9.3.1",
@@ -76,10 +76,10 @@
     "sass-embedded": "^1.103.1",
     "stryker-vue-ignorer": "github:davidlandais/stryker-vue-ignorer",
     "typescript": "^6.0.3",
-    "vite-plugin-vuetify": "^2.1.3",
-    "vite-plus": "^0.2.9",
+    "vite-plus": "^1.0.0",
     "vitepress": "2.0.0-alpha.19",
     "vitepress-plugin-group-icons": "^1.7.6",
+    "vitest": "5.0.1",
     "vue": "^3.5.40",
     "vue-component-type-helpers": "^3.3.11",
     "vue-router": "^5.3.1",
@@ -87,12 +87,11 @@
     "vuetify": "^4.2.0"
   },
   "peerDependencies": {
-    "@fontsource/roboto": "^5.3.0",
     "@mdi/font": "^7.4.47",
-    "@nexdom/shared": "^2.1.1",
+    "@nexdom/shared": "^2.3.0",
     "resize-observer-polyfill": "^1.5.1",
-    "vite-plugin-vuetify": "^2.1.3",
-    "vite-plus": "^0.2.7",
+    "sass-embedded": "^1.103.1",
+    "vite-plus": "^1.0.0",
     "vue": "^3.5.40",
     "vue-component-type-helpers": "^3.3.11",
     "vue-router": "^5.3.1",

package/dist/types-BPXXtbmW.d.ts

@@ -1,5 +0,0 @@
-//#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

@@ -1,53 +0,0 @@
-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 };