@nexdom/uimed-vue 2.0.0-beta.9 → 2.0.0

package/dist/composables.js

@@ -1,117 +1,6 @@
-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
-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
-//#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 };
+import useToast from "./composables/dialogs/use-toast.js";
+import useDialog from "./composables/dialogs/use-dialog.js";
+import useRunOrToast from "./composables/dialogs/use-run-or-toast.js";
+import useConfirm from "./composables/dialogs/use-confirm.js";
+import useUnsavedChanges from "./composables/navigation/use-unsaved-changes.js";
+export { useConfirm, useDialog, useRunOrToast, useToast, useUnsavedChanges };

package/dist/consts/icons.d.ts

@@ -0,0 +1,67 @@
+//#region src/consts/icons.d.ts
+/**
+ * SVG path of each icon, by its name, in the order the "Ícones" guide page lists them. The paths
+ * come from `@mdi/js`, which exports one constant per icon, so the apps' bundles only take the
+ * icons used here.
+ *
+ * Every name can be passed to the components that accept an icon (e.g. `UIconButton` and the items
+ * of the navigation menu). The map is also the set of icon aliases of the underlying components,
+ * which draw some icons by name on their own (e.g. `close`, the arrows of the pagination and the
+ * checkbox marks): those names must match the aliases exactly, and a component that renders an
+ * alias missing here draws an empty icon. The unit tests of `src/consts/icons.ts` check each
+ * component that renders one.
+ *
+ * - The first names describe the icon's drawing. A name ending in `Alternative` is an alternative
+ *   version of the same drawing (currently, outlined).
+ * - The others describe what the components use the icon for.
+ *
+ * To add an icon, add it here and to the list on the "Ícones" guide page (`docs/guide/icons.md`).
+ */
+export declare const icons: {
+  home: string;
+  homeAlternative: string;
+  account: string;
+  accountAlternative: string;
+  accountGroup: string;
+  accountGroupAlternative: string;
+  calendar: string;
+  calendarAlternative: string;
+  clipboardText: string;
+  clipboardTextAlternative: string;
+  fileDocument: string;
+  fileDocumentAlternative: string;
+  flask: string;
+  flaskAlternative: string;
+  folder: string;
+  folderAlternative: string;
+  chartBox: string;
+  chartBoxAlternative: string;
+  wallet: string;
+  walletAlternative: string;
+  cog: string;
+  cogAlternative: string;
+  stethoscope: string;
+  pill: string;
+  hospital: string;
+  help: string;
+  notifications: string;
+  menu: string;
+  search: string;
+  showPassword: string;
+  hidePassword: string;
+  close: string;
+  clear: string;
+  dropdown: string;
+  subgroup: string;
+  expand: string;
+  collapse: string;
+  prev: string;
+  next: string;
+  checkboxOn: string;
+  checkboxOff: string;
+  success: string;
+  info: string;
+  warning: string;
+  error: string;
+};
+//#endregion

package/dist/consts/icons.js

@@ -0,0 +1,69 @@
+import { mdiAccount, mdiAccountGroup, mdiAccountGroupOutline, mdiAccountOutline, mdiAlertCircle, mdiBellOutline, mdiCalendar, mdiCalendarOutline, mdiChartBox, mdiChartBoxOutline, mdiCheckCircle, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiChevronUp, mdiClipboardText, mdiClipboardTextOutline, mdiClose, mdiCloseCircle, mdiCog, mdiCogOutline, mdiEye, mdiEyeOff, mdiFileDocument, mdiFileDocumentOutline, mdiFlask, mdiFlaskOutline, mdiFolder, mdiFolderOutline, mdiHelpCircleOutline, mdiHome, mdiHomeOutline, mdiHospitalBuilding, mdiInformation, mdiMagnify, mdiMenu, mdiMenuDown, mdiPill, mdiStethoscope, mdiWallet, mdiWalletOutline } from "@mdi/js";
+//#region src/consts/icons.ts
+/**
+* SVG path of each icon, by its name, in the order the "Ícones" guide page lists them. The paths
+* come from `@mdi/js`, which exports one constant per icon, so the apps' bundles only take the
+* icons used here.
+*
+* Every name can be passed to the components that accept an icon (e.g. `UIconButton` and the items
+* of the navigation menu). The map is also the set of icon aliases of the underlying components,
+* which draw some icons by name on their own (e.g. `close`, the arrows of the pagination and the
+* checkbox marks): those names must match the aliases exactly, and a component that renders an
+* alias missing here draws an empty icon. The unit tests of `src/consts/icons.ts` check each
+* component that renders one.
+*
+* - The first names describe the icon's drawing. A name ending in `Alternative` is an alternative
+*   version of the same drawing (currently, outlined).
+* - The others describe what the components use the icon for.
+*
+* To add an icon, add it here and to the list on the "Ícones" guide page (`docs/guide/icons.md`).
+*/
+const icons = {
+	home: mdiHome,
+	homeAlternative: mdiHomeOutline,
+	account: mdiAccount,
+	accountAlternative: mdiAccountOutline,
+	accountGroup: mdiAccountGroup,
+	accountGroupAlternative: mdiAccountGroupOutline,
+	calendar: mdiCalendar,
+	calendarAlternative: mdiCalendarOutline,
+	clipboardText: mdiClipboardText,
+	clipboardTextAlternative: mdiClipboardTextOutline,
+	fileDocument: mdiFileDocument,
+	fileDocumentAlternative: mdiFileDocumentOutline,
+	flask: mdiFlask,
+	flaskAlternative: mdiFlaskOutline,
+	folder: mdiFolder,
+	folderAlternative: mdiFolderOutline,
+	chartBox: mdiChartBox,
+	chartBoxAlternative: mdiChartBoxOutline,
+	wallet: mdiWallet,
+	walletAlternative: mdiWalletOutline,
+	cog: mdiCog,
+	cogAlternative: mdiCogOutline,
+	stethoscope: mdiStethoscope,
+	pill: mdiPill,
+	hospital: mdiHospitalBuilding,
+	help: mdiHelpCircleOutline,
+	notifications: mdiBellOutline,
+	menu: mdiMenu,
+	search: mdiMagnify,
+	showPassword: mdiEye,
+	hidePassword: mdiEyeOff,
+	close: mdiClose,
+	clear: mdiCloseCircle,
+	dropdown: mdiMenuDown,
+	subgroup: mdiMenuDown,
+	expand: mdiChevronDown,
+	collapse: mdiChevronUp,
+	prev: mdiChevronLeft,
+	next: mdiChevronRight,
+	checkboxOn: mdiCheckboxMarked,
+	checkboxOff: mdiCheckboxBlankOutline,
+	success: mdiCheckCircle,
+	info: mdiInformation,
+	warning: mdiAlertCircle,
+	error: mdiCloseCircle
+};
+//#endregion
+export { icons };

package/dist/consts/locale.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 };

package/dist/consts/types.d.ts

@@ -0,0 +1,12 @@
+import { icons } from "./icons.js";
+//#region src/consts/types.d.ts
+/**
+ * Name of an icon available to the components that accept one (e.g. `UIconButton` and the items
+ * of the navigation menu): the content icons, such as `home` and `calendar`, and the icons the
+ * components draw on their own, such as `close` and `search`. The full list, with a preview of
+ * each icon, is on the "Ícones" guide page.
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/icons | Icons Guide}
+ */
+export type Icon = keyof typeof icons;
+//#endregion

package/dist/index.d.ts

@@ -1,17 +1,5 @@
-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
 /**

package/dist/index.js

@@ -1,26 +1,51 @@
-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 { icons } from "./consts/icons.js";
+import { localeOptions } from "./consts/locale.js";
 import "vuetify/styles";
+import "./styles/fonts/fonts.css";
 import { createVuetify } from "vuetify";
 import "vue";
+import { mdi } from "vuetify/iconsets/mdi-svg";
 //#region src/index.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)
 */
 function createUimed() {
-	return createVuetify({ theme: { defaultTheme: "light" } });
+	return createVuetify({
+		icons: {
+			defaultSet: "mdi",
+			aliases: icons,
+			sets: { mdi }
+		},
+		locale: localeOptions,
+		theme: {
+			defaultTheme: "light",
+			themes: { light: {
+				dark: false,
+				colors: {
+					background: "#EAEDF0",
+					surface: "#FCFCFD",
+					primary: "#074D31",
+					secondary: "#FCFCFD",
+					success: "#A9EFC5",
+					warning: "#FFE596",
+					error: "#D92D20",
+					info: "#9ACBE5",
+					"on-primary": "#FCFCFD",
+					"primary-text": "#074D31",
+					"success-text": "#16783E",
+					"info-text": "#277096",
+					"warning-text": "#846300",
+					"error-text": "#C92A1E",
+					link: "#0271AD"
+				},
+				variables: {
+					"border-color": "#D0D5DD",
+					"medium-emphasis-opacity": .7
+				}
+			} }
+		}
+	});
 }
 //#endregion
 export { createUimed };

package/dist/plugins.d.ts

@@ -1,10 +1,21 @@
-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()],
+ * });
+ * ```
  */
-export declare function vitePluginUimed(): ReturnType<typeof vitePluginVuetify>;
+export declare function vitePluginUimed(): Plugin[];
 /**
  * Vitest Server plugin for UIMed.
  */

package/dist/plugins.js

@@ -1,10 +1,61 @@
-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.

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,155 @@
+@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,
+  // The utility classes are a render-blocking stylesheet in the apps, so only the ones the
+  // components use are generated. The theme's colors (`primary`, ...) don't come from here, and
+  // the palettes are left out: only the shades (black, white and transparent) remain, since
+  // Vuetify uses `bg-transparent` itself (e.g. on the navigation drawer's list)
+  $colors: (
+    "red": (),
+    "pink": (),
+    "purple": (),
+    "deep-purple": (),
+    "indigo": (),
+    "blue": (),
+    "light-blue": (),
+    "cyan": (),
+    "teal": (),
+    "green": (),
+    "light-green": (),
+    "lime": (),
+    "yellow": (),
+    "amber": (),
+    "orange": (),
+    "deep-orange": (),
+    "brown": (),
+    "blue-grey": (),
+    "grey": (),
+  ),
+  // The utility families the components use, or that Vuetify applies to them (e.g. `rounded-0` on
+  // list items), without the breakpoint and print variants, which they don't use. A class from
+  // another family needs its key enabled here
+  $utilities: (
+    "display": (
+      responsive: false,
+      print: false,
+    ),
+    "flex": (
+      responsive: false,
+    ),
+    "flex-direction": (
+      responsive: false,
+    ),
+    "flex-wrap": (
+      responsive: false,
+    ),
+    "justify-content": (
+      responsive: false,
+    ),
+    "align-items": (
+      responsive: false,
+    ),
+    "align-content": (
+      responsive: false,
+    ),
+    "margin": (
+      responsive: false,
+    ),
+    "margin-top": (
+      responsive: false,
+    ),
+    "margin-left": (
+      responsive: false,
+    ),
+    "negative-margin-right": (
+      responsive: false,
+    ),
+    "padding": (
+      responsive: false,
+    ),
+    "padding-x": (
+      responsive: false,
+    ),
+    "padding-y": (
+      responsive: false,
+    ),
+    "padding-top": (
+      responsive: false,
+    ),
+    "text-align": (
+      responsive: false,
+    ),
+    "height": (
+      responsive: false,
+    ),
+    "width": (
+      responsive: false,
+    ),
+    "overflow": false,
+    "overflow-x": false,
+    "overflow-y": false,
+    "float": false,
+    "float:rtl": false,
+    "float:ltr": false,
+    "flex-grow": false,
+    "flex-shrink": false,
+    "justify-items": false,
+    "align-self": false,
+    "order": false,
+    "gap": false,
+    "gap-row": false,
+    "gap-column": false,
+    "margin-x": false,
+    "margin-y": false,
+    "margin-right": false,
+    "margin-bottom": false,
+    "margin-start": false,
+    "margin-end": false,
+    "negative-margin": false,
+    "negative-margin-x": false,
+    "negative-margin-y": false,
+    "negative-margin-top": false,
+    "negative-margin-bottom": false,
+    "negative-margin-left": false,
+    "negative-margin-start": false,
+    "negative-margin-end": false,
+    "padding-right": false,
+    "padding-bottom": false,
+    "padding-left": false,
+    "padding-start": false,
+    "padding-end": false,
+    "rounded-top": false,
+    "rounded-end": false,
+    "rounded-bottom": false,
+    "rounded-start": false,
+    "rounded-top-start": false,
+    "rounded-top-end": false,
+    "rounded-bottom-end": false,
+    "rounded-bottom-start": false,
+    "border-current": false,
+    "border-opacity": false,
+    "border-top": false,
+    "border-end": false,
+    "border-bottom": false,
+    "border-start": false,
+    "border-style": false,
+    "white-space": false,
+    "overflow-wrap": false,
+    "opacity": false,
+    "text-overflow": false,
+    "typography": false,
+    "text-transform": false,
+    "font-weight": false,
+    "font-italic": false,
+    "text-mono": false,
+    "position": false,
+    "top": false,
+    "right": false,
+    "bottom": false,
+    "left": false,
+    "cursor": false,
+    "fill-height": false,
+  )
+);

package/dist/unit-test.js

@@ -1,16 +1,20 @@
+import { __require } from "./_virtual/_rolldown/runtime.js";
+import { icons } from "./consts/icons.js";
+import { localeOptions } from "./consts/locale.js";
 import { createVuetify } from "vuetify";
+import { mdi } from "vuetify/iconsets/mdi-svg";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
-//#region \0rolldown/runtime.js
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
-	if (typeof require !== "undefined") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-});
-//#endregion
 //#region src/unit-test.ts
 const vuetify = createVuetify({
 	components,
-	directives
+	directives,
+	icons: {
+		defaultSet: "mdi",
+		aliases: icons,
+		sets: { mdi }
+	},
+	locale: localeOptions
 });
 /**
 * Vue Test Utils plugin for Uimed.