@nexdom/uimed-vue 2.0.0-beta.2 → 2.0.0-beta.20

package/dist/composables.d.ts

@@ -1,4 +1,4 @@
-import { n as FeedbackColorVariant } from "./types-BPXXtbmW.js";
+import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-HPMP8IrV.js";
 //#region src/composables/dialogs/types.d.ts
 interface ToastOptions {
   /**
@@ -6,12 +6,84 @@ interface ToastOptions {
    */
   message: string;
   /**
-   * Applies a color to the button.
+   * Applies a color to the toast.
    * One of `positive`, `informative`, `caution`, or `danger`.
    * @default "informative"
    */
   color?: FeedbackColorVariant;
 }
+/**
+ * A button displayed at the bottom of a dialog opened by `useDialog`'s `dialog`.
+ */
+interface DialogAction<T extends string = string> {
+  /**
+   * Text displayed on the button.
+   */
+  text: string;
+  /**
+   * Value the dialog resolves with when the button is clicked.
+   */
+  value: T;
+  /**
+   * Applies a distinct style variation to the button.
+   * One of `primary`, `secondary`, or `ghost`.
+   * @default "ghost", or "primary" for the last action
+   */
+  variant?: ButtonVariant;
+  /**
+   * Applies a color to the button.
+   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
+   * @default "primary"
+   */
+  color?: ColorVariant;
+}
+/**
+ * Options of a dialog opened by `useDialog`'s `dialog`.
+ */
+interface DialogOptions<T extends string = string> {
+  /**
+   * Plain text displayed as the dialog's title. HTML isn't interpreted.
+   */
+  title?: string;
+  /**
+   * Plain text displayed as the dialog's message. HTML isn't interpreted.
+   */
+  message: string;
+  /**
+   * Buttons displayed at the bottom of the dialog, right-aligned, in the given order.
+   * @default [{ text: "Fechar" }], which resolves `undefined`
+   */
+  actions?: DialogAction<T>[];
+}
+/**
+ * Options of a dialog opened by `useConfirm`'s `confirm`.
+ */
+interface ConfirmOptions {
+  /**
+   * Plain text displayed as the dialog's title. HTML isn't interpreted.
+   */
+  title?: string;
+  /**
+   * Plain text displayed as the dialog's message. HTML isn't interpreted.
+   */
+  message: string;
+  /**
+   * Text displayed on the confirm button.
+   * @default "Confirmar"
+   */
+  confirmText?: string;
+  /**
+   * Text displayed on the cancel button.
+   * @default "Cancelar"
+   */
+  cancelText?: string;
+  /**
+   * Applies a color to the confirm button.
+   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
+   * @default "primary"
+   */
+  color?: ColorVariant;
+}
 //#endregion
 //#region src/composables/dialogs/use-toast.d.ts
 /**
@@ -37,7 +109,7 @@ declare function useToast(): {
  */
 declare function toast(options: ToastOptions): void;
 //#endregion
-//#region src/composables/dialogs/use-run-or-toast..d.ts
+//#region src/composables/dialogs/use-run-or-toast.d.ts
 /**
  * Generate `run` method and a computed property `isRunning`.
  * Calling `run` will  reactively update `isRunning`.
@@ -64,4 +136,58 @@ declare function useRunOrToast(): {
   isRunning: import("vue").ComputedRef<boolean>;
 };
 //#endregion
-export { useRunOrToast, useToast };
+//#region src/composables/dialogs/use-dialog.d.ts
+/**
+ * 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" },
+ *   ],
+ * });
+ * ```
+ */
+declare function useDialog(): {
+  dialog: typeof 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." });
+ * ```
+ */
+declare function dialog<T extends string = never>(options: DialogOptions<T>): Promise<T | undefined>;
+//#endregion
+//#region src/composables/dialogs/use-confirm.d.ts
+/**
+ * Composable which returns a function to run actions only after the user confirms them in a
+ * dialog, and a computed property `isRunning`.
+ *
+ * @example
+ * ```ts
+ * const { confirm, isRunning } = useConfirm();
+ *
+ * const removed = await confirm(
+ *   { title: "Excluir paciente", message: "Esta ação não pode ser desfeita.", confirmText: "Excluir", color: "danger" },
+ *   () => api.deletePatient(id),
+ * );
+ * ```
+ */
+declare function useConfirm(): {
+  confirm: <F extends (...args: Parameters<F>) => PromiseLike<Awaited<ReturnType<F>>>>(options: ConfirmOptions, action: F, ...params: Parameters<F>) => Promise<Awaited<ReturnType<F>> | false>;
+  isRunning: import("vue").ComputedRef<boolean>;
+};
+//#endregion
+export { useConfirm, useDialog, useRunOrToast, useToast };

package/dist/composables.js

@@ -1,6 +1,6 @@
-import { n as useToast } from "./use-toast-CACuYhK_.js";
+import { i as useDialog, o as useToast, t as openDialog } from "./use-dialog-Ck2_ZW7T.js";
 import { computed, ref } from "vue";
-//#region src/composables/dialogs/use-run-or-toast..ts
+//#region src/composables/dialogs/use-run-or-toast.ts
 const { toast } = useToast();
 /**
 * Generate `run` method and a computed property `isRunning`.
@@ -62,4 +62,56 @@ function useRunOrToast() {
 	};
 }
 //#endregion
-export { useRunOrToast, useToast };
+//#region src/composables/dialogs/use-confirm.ts
+/**
+* Composable which returns a function to run actions only after the user confirms them in a
+* dialog, and a computed property `isRunning`.
+*
+* @example
+* ```ts
+* const { confirm, isRunning } = useConfirm();
+*
+* const removed = await confirm(
+*   { title: "Excluir paciente", message: "Esta ação não pode ser desfeita.", confirmText: "Excluir", color: "danger" },
+*   () => api.deletePatient(id),
+* );
+* ```
+*/
+function useConfirm() {
+	const { run, isRunning } = useRunOrToast();
+	/**
+	* Displays a confirmation dialog and, if the user confirms, runs the given function while the
+	* dialog shows the confirm button loading. If the function throws an error, the dialog closes
+	* and a toast shows the error message.
+	* @returns the function returned value, or `false` if the user cancels or the function fails
+	*
+	* @example
+	* ```ts
+	* const { confirm } = useConfirm();
+	*
+	* // Call like this:
+	* const result1 = await confirm({ message: "Salvar alterações?" }, () => save(form));
+	*
+	* // Or this:
+	* const result2 = await confirm({ message: "Salvar alterações?" }, save, form);
+	* ```
+	*/
+	function confirm(options, action, ...params) {
+		return openDialog({
+			title: options.title,
+			message: options.message,
+			role: "alertdialog",
+			actions: [{ text: options.cancelText ?? "Cancelar" }, {
+				text: options.confirmText ?? "Confirmar",
+				value: "confirm",
+				color: options.color
+			}]
+		}, (value) => value === "confirm" ? run(action, ...params) : false);
+	}
+	return {
+		confirm,
+		isRunning
+	};
+}
+//#endregion
+export { useConfirm, useDialog, useRunOrToast, useToast };

package/dist/index.d.ts

@@ -1,23 +1,11 @@
-import "@fontsource/roboto/100.css";
-import "@fontsource/roboto/300.css";
-import "@fontsource/roboto/400.css";
-import "@fontsource/roboto/500.css";
-import "@fontsource/roboto/700.css";
-import "@fontsource/roboto/900.css";
-import "@fontsource/roboto/100-italic.css";
-import "@fontsource/roboto/300-italic.css";
-import "@fontsource/roboto/400-italic.css";
-import "@fontsource/roboto/500-italic.css";
-import "@fontsource/roboto/700-italic.css";
-import "@fontsource/roboto/900-italic.css";
 import "@mdi/font/css/materialdesignicons.css";
 import "vuetify/styles";
+import "./styles/fonts/fonts.css";
 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).
  * @returns an instance to be used with [app.use](https://vuejs.org/guide/essentials/application.html#the-application-instance)
  */
-declare function createUimed(): Plugin;
-//#endregion
-export { createUimed };
+export declare function createUimed(): Plugin;
+//#endregion

package/dist/index.js

@@ -1,17 +1,7 @@
-import "@fontsource/roboto/100.css";
-import "@fontsource/roboto/300.css";
-import "@fontsource/roboto/400.css";
-import "@fontsource/roboto/500.css";
-import "@fontsource/roboto/700.css";
-import "@fontsource/roboto/900.css";
-import "@fontsource/roboto/100-italic.css";
-import "@fontsource/roboto/300-italic.css";
-import "@fontsource/roboto/400-italic.css";
-import "@fontsource/roboto/500-italic.css";
-import "@fontsource/roboto/700-italic.css";
-import "@fontsource/roboto/900-italic.css";
+import { t as localeOptions } from "./locale-CM4o8cD_.js";
 import "@mdi/font/css/materialdesignicons.css";
 import "vuetify/styles";
+import "./styles/fonts/fonts.css";
 import { createVuetify } from "vuetify";
 import "vue";
 //#region src/index.ts
@@ -20,7 +10,29 @@ import "vue";
 * @returns an instance to be used with [app.use](https://vuejs.org/guide/essentials/application.html#the-application-instance)
 */
 function createUimed() {
-	return createVuetify({ theme: { defaultTheme: "light" } });
+	return createVuetify({
+		locale: localeOptions,
+		theme: {
+			defaultTheme: "light",
+			themes: { light: {
+				dark: false,
+				colors: {
+					background: "#EAEDF0",
+					surface: "#FCFCFD",
+					primary: "#00995D",
+					secondary: "#FCFCFD",
+					success: "#A9EFC5",
+					warning: "#FFE596",
+					error: "#D92D20",
+					info: "#9ACBE5"
+				},
+				variables: {
+					"border-color": "#D0D5DD",
+					"font-body": "\"Unimed Slab\", sans-serif"
+				}
+			} }
+		}
+	});
 }
 //#endregion
 export { createUimed };

package/dist/locale-CM4o8cD_.js

@@ -0,0 +1,12 @@
+import { pt } from "vuetify/locale";
+//#region src/consts/locale.ts
+/**
+* Language of the texts the components generate on their own, such as
+* screen reader announcements and pagination labels. Fixed in pt-BR.
+*/
+const localeOptions = {
+	locale: "pt-BR",
+	messages: { "pt-BR": pt }
+};
+//#endregion
+export { localeOptions as t };

package/dist/plugins.d.ts

@@ -2,12 +2,11 @@ import vitePluginVuetify from "vite-plugin-vuetify";
 import { UserConfig } from "vite-plus";
 //#region src/plugins.d.ts
 /**
- * Vite plugin for Uimed.
+ * Vite plugin for UIMed.
  */
-declare function vitePluginUimed(): ReturnType<typeof vitePluginVuetify>;
+export declare function vitePluginUimed(): ReturnType<typeof vitePluginVuetify>;
 /**
- * Vitest Server plugin for Uimed.
+ * Vitest Server plugin for UIMed.
  */
-declare function vitestServerPluginUimed(): NonNullable<NonNullable<UserConfig["test"]>["server"]>;
-//#endregion
-export { vitePluginUimed, vitestServerPluginUimed };
+export declare function vitestServerPluginUimed(): NonNullable<NonNullable<UserConfig["test"]>["server"]>;
+//#endregion

package/dist/plugins.js

@@ -1,16 +1,16 @@
 import vitePluginVuetify from "vite-plugin-vuetify";
 //#region src/plugins.ts
 /**
-* Vite plugin for Uimed.
+* Vite plugin for UIMed.
 */
 function vitePluginUimed() {
 	return vitePluginVuetify({ autoImport: false });
 }
 /**
-* Vitest Server plugin for Uimed.
+* Vitest Server plugin for UIMed.
 */
 function vitestServerPluginUimed() {
-	return { deps: { inline: ["vuetify"] } };
+	return { deps: { inline: ["vuetify", "@nexdom/uimed-vue"] } };
 }
 //#endregion
 export { vitePluginUimed, vitestServerPluginUimed };

package/dist/styles/fonts/fonts.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Unimed Slab";
+  src: url("./UnimedSlab-Regular.woff2");
+}

package/dist/types-HPMP8IrV.d.ts

@@ -0,0 +1,49 @@
+//#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`.
+   * @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, disabling interaction.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Associated [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/form) id.
+   */
+  form?: string;
+  /**
+   * 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-Ck2_ZW7T.js

@@ -0,0 +1,124 @@
+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
+//#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, useDialog as i, 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.2",
+  "version": "2.0.0-beta.20",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -54,7 +54,6 @@
   "devDependencies": {
     "@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",
     "@playwright/test": "^1.62.1",
@@ -64,7 +63,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",
@@ -77,22 +76,24 @@
     "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",
     "vue-tsc": "^3.3.9",
     "vuetify": "^4.2.0"
   },
   "peerDependencies": {
-    "@fontsource/roboto": "^5.3.0",
     "@mdi/font": "^7.4.47",
     "@nexdom/shared": "^2.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "vite-plugin-vuetify": "^2.1.3",
-    "vite-plus": "^0.2.7",
+    "vite-plus": "^1.0.0",
     "vue": "^3.5.40",
+    "vue-component-type-helpers": "^3.3.11",
     "vue-router": "^5.3.1",
     "vuetify": "^4.2.0"
   },

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 };