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

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,26 @@ 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" }
+			} }
+		}
+	});
 }
 //#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

@@ -1,13 +1,23 @@
-import vitePluginVuetify from "vite-plugin-vuetify";
-import { UserConfig } from "vite-plus";
+import { Plugin, UserConfig } from "vite-plus";
 //#region src/plugins.d.ts
 /**
- * Vite plugin for Uimed.
+ * Vite plugin that compiles the components' styles with the library's font and Sass settings.
+ * Required: without it, the components lose the Unimed Slab font. Needs `sass-embedded`, a peer
+ * dependency.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { vitePluginUimed } from "@nexdom/uimed-vue/plugins";
+ *
+ * export default defineConfig({
+ *   plugins: [vue(), vitePluginUimed()],
+ * });
+ * ```
  */
-declare function vitePluginUimed(): ReturnType<typeof vitePluginVuetify>;
+export declare function vitePluginUimed(): Plugin[];
 /**
- * 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,67 @@
-import vitePluginVuetify from "vite-plugin-vuetify";
+import { existsSync } from "node:fs";
+import { pathToFileURL } from "node:url";
 //#region src/plugins.ts
+/** Matches the ids of CSS files, with or without a query */
+const stylesheet = /\.css(?:\?|$)/;
+/** Path of Vuetify's stylesheets folder, inside the `node_modules` folder where it's installed */
+const vuetifyStylesheets = "/node_modules/vuetify/lib/";
 /**
-* Vite plugin for Uimed.
+* Matches the queries that import a stylesheet's file as is (`?raw`) or its URL (`?url`), which
+* Vite doesn't compile. The URL still serves the compiled stylesheet, which Vite loads separately
+*/
+const uncompiledStylesheetQuery = /[?&](?:raw|url)\b/;
+/**
+* Vite plugin that compiles the components' styles with the library's font and Sass settings.
+* Required: without it, the components lose the Unimed Slab font. Needs `sass-embedded`, a peer
+* dependency.
+*
+* @example
+* ```ts
+* // vite.config.ts
+* import { vitePluginUimed } from "@nexdom/uimed-vue/plugins";
+*
+* export default defineConfig({
+*   plugins: [vue(), vitePluginUimed()],
+* });
+* ```
 */
 function vitePluginUimed() {
-	return vitePluginVuetify({ autoImport: false });
+	const settings = new URL("./styles/settings.scss", import.meta.url);
+	let compiler;
+	return [{
+		name: "uimed:vuetify-styles",
+		enforce: "pre",
+		load: {
+			filter: { id: {
+				include: stylesheet,
+				exclude: uncompiledStylesheetQuery
+			} },
+			async handler(id) {
+				const file = id.split("?")[0].replaceAll("\\", "/");
+				const folder = file.lastIndexOf(vuetifyStylesheets);
+				if (folder === -1) return null;
+				const nodeModules = `${file.slice(0, folder)}/node_modules`;
+				const source = [".sass", ".scss"].map((extension) => `${file.slice(0, -4)}${extension}`).find((path) => existsSync(path));
+				if (!source) return null;
+				compiler ??= import("sass-embedded").then((sass) => sass.initAsyncCompiler());
+				const sass = await compiler;
+				const entry = `@use "${settings.href}";\n@use "${pathToFileURL(source).href}";`;
+				const { css } = await sass.compileStringAsync(entry, { loadPaths: [nodeModules] });
+				return css;
+			}
+		},
+		async closeBundle() {
+			const current = compiler;
+			compiler = void 0;
+			await (await current)?.dispose();
+		}
+	}];
 }
 /**
-* 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/styles/settings.scss

@@ -0,0 +1,6 @@
+@use "vuetify/settings" with (
+  $body-font-family: var(--v-font-body, "Unimed Slab", sans-serif),
+  // Unimed Slab's ascent and descent take 1.26em, more than the subtitles' default 1rem line
+  // height, which clipped its descenders and accented capitals
+  $list-item-subtitle-line-height: normal
+);

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