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

package/dist/composables.d.ts

@@ -1,4 +1,5 @@
-import { n as FeedbackColorVariant } from "./types-BPXXtbmW.js";
+import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-BbWo6RIy.js";
+import { ComputedRef, MaybeRefOrGetter } from "vue";
 //#region src/composables/dialogs/types.d.ts
 interface ToastOptions {
   /**
@@ -6,12 +7,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 +110,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 +137,143 @@ 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
+//#region src/composables/navigation/types.d.ts
+/**
+ * Values compared by `useUnsavedChanges`.
+ */
+interface UnsavedChangesValues<T> {
+  /**
+   * Original (last saved) value. To mark the form as saved, assign it a copy of the current value.
+   */
+  previous: MaybeRefOrGetter<T>;
+  /**
+   * Current value of the form.
+   */
+  current: MaybeRefOrGetter<T>;
+}
+/**
+ * Options of `useUnsavedChanges`.
+ */
+interface UnsavedChangesOptions {
+  /**
+   * Plain text displayed as the confirmation dialog's title. HTML isn't interpreted.
+   * @default "Alterações não salvas"
+   */
+  title?: string;
+  /**
+   * Plain text displayed as the confirmation dialog's message. HTML isn't interpreted.
+   * @default "Existem alterações que ainda não foram salvas. Deseja sair sem salvar?"
+   */
+  message?: string;
+  /**
+   * Text displayed on the button which leaves the page.
+   * @default "Sair sem salvar"
+   */
+  confirmText?: string;
+  /**
+   * Text displayed on the button which cancels the navigation.
+   * @default "Continuar editando"
+   */
+  cancelText?: string;
+  /**
+   * Applies a color to the button which leaves the page.
+   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
+   * @default "danger"
+   */
+  color?: ColorVariant;
+  /**
+   * Also asks for the browser's native confirmation on reload (F5), tab close or leaving the app
+   * through an external link.
+   * @default true
+   */
+  beforeUnload?: boolean;
+}
+//#endregion
+//#region src/composables/navigation/use-unsaved-changes.d.ts
+/**
+ * Composable which compares the original and the current values of a form, and asks the user to
+ * confirm before leaving the page while they differ.
+ *
+ * Must be called in the `setup` of a component. Leaving through vue-router is only guarded in
+ * components rendered by a `<RouterView>`, and the confirmation dialog is displayed by `UMain`.
+ *
+ * @param values - The original (`previous`) and current (`current`) values, as refs, getters or
+ * reactive objects. They're compared in depth: key order doesn't matter, a key holding `undefined`
+ * equals a missing key, dates are compared by their time and arrays item by item, in order.
+ * @param options - Texts and color of the confirmation dialog, and whether to ask for the
+ * browser's native confirmation before unloading the page.
+ * @returns `hasChanges`, a computed property which is `true` while the values differ
+ *
+ * @example
+ * ```ts
+ * const saved = ref({ name: "Maria" });
+ * const form = ref(structuredClone(toRaw(saved.value)));
+ *
+ * const { hasChanges } = useUnsavedChanges({ previous: saved, current: form });
+ *
+ * async function save() {
+ *   await api.save(form.value);
+ *   // Marks the form as saved
+ *   saved.value = structuredClone(toRaw(form.value));
+ * }
+ * ```
+ */
+declare function useUnsavedChanges<T>(values: UnsavedChangesValues<T>, options?: UnsavedChangesOptions): {
+  hasChanges: ComputedRef<boolean>;
+};
+//#endregion
+export { useConfirm, useDialog, useRunOrToast, useToast, useUnsavedChanges };

package/dist/composables.js

@@ -1,6 +1,8 @@
-import { n as useToast } from "./use-toast-CACuYhK_.js";
-import { computed, ref } from "vue";
-//#region src/composables/dialogs/use-run-or-toast..ts
+import { i as useDialog, o as useToast, t as openDialog } from "./use-dialog-C0sM_bA2.js";
+import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, toValue, watch } from "vue";
+import { isDeepEqual } from "@nexdom/shared/utils";
+import { onBeforeRouteLeave } from "vue-router";
+//#region src/composables/dialogs/use-run-or-toast.ts
 const { toast } = useToast();
 /**
 * Generate `run` method and a computed property `isRunning`.
@@ -62,4 +64,139 @@ 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
+//#region src/composables/navigation/use-unsaved-changes.ts
+/**
+* Calls whose page is on display with unsaved changes. The `beforeunload` listener is registered
+* while at least one of them exists, so a call that stops guarding doesn't remove the guard of the
+* others.
+*/
+const unloadGuards = /* @__PURE__ */ new Set();
+function preventUnload(event) {
+	event.preventDefault();
+}
+function updateUnloadListener() {
+	if (unloadGuards.size > 0) globalThis.addEventListener("beforeunload", preventUnload);
+	else globalThis.removeEventListener("beforeunload", preventUnload);
+}
+/**
+* Composable which compares the original and the current values of a form, and asks the user to
+* confirm before leaving the page while they differ.
+*
+* Must be called in the `setup` of a component. Leaving through vue-router is only guarded in
+* components rendered by a `<RouterView>`, and the confirmation dialog is displayed by `UMain`.
+*
+* @param values - The original (`previous`) and current (`current`) values, as refs, getters or
+* reactive objects. They're compared in depth: key order doesn't matter, a key holding `undefined`
+* equals a missing key, dates are compared by their time and arrays item by item, in order.
+* @param options - Texts and color of the confirmation dialog, and whether to ask for the
+* browser's native confirmation before unloading the page.
+* @returns `hasChanges`, a computed property which is `true` while the values differ
+*
+* @example
+* ```ts
+* const saved = ref({ name: "Maria" });
+* const form = ref(structuredClone(toRaw(saved.value)));
+*
+* const { hasChanges } = useUnsavedChanges({ previous: saved, current: form });
+*
+* async function save() {
+*   await api.save(form.value);
+*   // Marks the form as saved
+*   saved.value = structuredClone(toRaw(form.value));
+* }
+* ```
+*/
+function useUnsavedChanges(values, options = {}) {
+	const hasChanges = computed(() => !isDeepEqual(toValue(values.previous), toValue(values.current)));
+	const { confirm } = useConfirm();
+	/** Answer of the dialog on display, shared by every navigation made while it's open. */
+	let pending;
+	onBeforeRouteLeave(() => {
+		if (!hasChanges.value) return true;
+		pending ??= confirm({
+			title: options.title ?? "Alterações não salvas",
+			message: options.message ?? "Existem alterações que ainda não foram salvas. Deseja sair sem salvar?",
+			confirmText: options.confirmText ?? "Sair sem salvar",
+			cancelText: options.cancelText ?? "Continuar editando",
+			color: options.color ?? "danger"
+		}, async () => {}).then((answer) => answer !== false).finally(() => pending = void 0);
+		return pending;
+	});
+	/** Whether the component is on display, which is false while `<KeepAlive>` keeps it deactivated. */
+	let isActive = true;
+	if (options.beforeUnload ?? true) {
+		onMounted(() => watch(hasChanges, updateBeforeUnload, { immediate: true }));
+		onUnmounted(deactivate);
+		onDeactivated(deactivate);
+		onActivated(() => {
+			isActive = true;
+			updateBeforeUnload();
+		});
+	}
+	/** Identifies this call in `unloadGuards`. */
+	const unloadGuard = {};
+	function updateBeforeUnload() {
+		if (hasChanges.value && isActive) unloadGuards.add(unloadGuard);
+		else unloadGuards.delete(unloadGuard);
+		updateUnloadListener();
+	}
+	function deactivate() {
+		isActive = false;
+		updateBeforeUnload();
+	}
+	return { hasChanges };
+}
+//#endregion
+export { useConfirm, useDialog, useRunOrToast, useToast, useUnsavedChanges };

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,35 @@ 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",
+					"on-primary": "#000000",
+					"primary-text": "#007A4A",
+					"success-text": "#16783E",
+					"info-text": "#277096",
+					"warning-text": "#846300",
+					"error-text": "#C92A1E"
+				},
+				variables: {
+					"border-color": "#D0D5DD",
+					"medium-emphasis-opacity": .7
+				}
+			} }
+		}
+	});
 }
 //#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,24 @@
-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, and
+ * loads the icon font with `font-display: swap`, so it doesn't block rendering while it loads.
+ * 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.
  */
-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,10 +1,78 @@
-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/;
+/** Matches the ids of the icon font's stylesheet, with or without a query and Windows separators */
+const iconFontStylesheet = /[\\/]node_modules[\\/]@mdi[\\/]font[\\/]css[\\/]materialdesignicons\.css(?:\?|$)/;
+/** Start of the icon font's `@font-face` rule, the only one in its stylesheet */
+const iconFontFace = "@font-face {";
+/**
+* Vite plugin that compiles the components' styles with the library's font and Sass settings, and
+* loads the icon font with `font-display: swap`, so it doesn't block rendering while it loads.
+* 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();
+		}
+	}, {
+		name: "uimed:icon-font",
+		enforce: "pre",
+		transform: {
+			filter: { id: {
+				include: iconFontStylesheet,
+				exclude: uncompiledStylesheetQuery
+			} },
+			handler(code) {
+				return code.replace(iconFontFace, `${iconFontFace} font-display: swap;`);
+			}
+		}
+	}];
 }
 /**
 * Vitest Server plugin for UIMed.

package/dist/styles/fonts/fonts.css

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

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
+);