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

package/dist/composables/alignment/alignment.js

@@ -0,0 +1,41 @@
+import { computed, toValue } from "vue";
+//#region src/composables/alignment/alignment.ts
+const alignXToClass = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end"
+};
+const alignYToClasses = {
+	start: {
+		items: "align-start",
+		content: "align-content-start"
+	},
+	center: {
+		items: "align-center",
+		content: "align-content-center"
+	},
+	end: {
+		items: "align-end",
+		content: "align-content-end"
+	},
+	stretch: {
+		items: "align-stretch",
+		content: "align-content-stretch"
+	}
+};
+/**
+* Vuetify's `justify-*` utility class for components with an `alignX` prop, laid out with flexbox.
+* Falls back to `"start"`.
+*/
+function useAlignX(alignX) {
+	return computed(() => alignXToClass[toValue(alignX) ?? "start"]);
+}
+/**
+* Vuetify's `align-*` and `align-content-*` utility classes for components with an `alignY` prop,
+* laid out with flexbox. Falls back to `"start"`.
+*/
+function useAlignY(alignY) {
+	return computed(() => alignYToClasses[toValue(alignY) ?? "start"]);
+}
+//#endregion
+export { useAlignX, useAlignY };

package/dist/composables/alignment/types.d.ts

@@ -0,0 +1,12 @@
+//#region src/composables/alignment/types.d.ts
+/**
+ * Horizontal alignment of a component's items: to the start, to the center or to the end,
+ * following the text direction.
+ */
+export type AlignX = "start" | "center" | "end";
+/**
+ * Vertical alignment of a component's items: to the top, to the center, to the bottom, or
+ * stretched to the whole height available.
+ */
+export type AlignY = "start" | "center" | "end" | "stretch";
+//#endregion

package/dist/composables/button/button.js

@@ -0,0 +1,54 @@
+import useVuetifyColor from "../colors/use-vuetify-color.js";
+import useVuetifyTextColor from "../colors/use-vuetify-text-color.js";
+import { computed, toValue } from "vue";
+//#region src/composables/button/button.ts
+const buttonVariantToVuetifyVariant = {
+	primary: "elevated",
+	secondary: "outlined",
+	ghost: "text"
+};
+function useButtonVariant(variant) {
+	return computed(() => {
+		const variantValue = toValue(variant);
+		return variantValue ? buttonVariantToVuetifyVariant[variantValue] : buttonVariantToVuetifyVariant.primary;
+	});
+}
+/**
+* The route the button navigates to, or `undefined` while it's blocked, so a `disabled` or
+* `loading` button is rendered as a disabled `<button>` instead of a link that the keyboard,
+* assistive technologies or `element.click()` could still follow.
+*/
+function useButtonRoute(route, blocked) {
+	return computed(() => toValue(blocked) ? void 0 : toValue(route));
+}
+/**
+* The button's `type`. It doesn't apply to a button with a `route`, which is `undefined` while
+* rendered as a link, and `"button"` while blocked, so the disabled `<button>` it's rendered as
+* isn't a submit button.
+*/
+function useButtonType(type, route, blocked) {
+	return computed(() => {
+		if (!toValue(route)) return toValue(type) ?? "button";
+		return toValue(blocked) ? "button" : void 0;
+	});
+}
+/**
+* Maps the button's color to Vuetify's. Secondary (outlined) and ghost buttons have no fill, so
+* their color is the text's, which takes the color's text shade to keep WCAG AA's contrast.
+*/
+function useButtonColor(color, variant) {
+	const fillColor = useVuetifyColor(color);
+	const textColor = useVuetifyTextColor(color);
+	return computed(() => {
+		return toValue(variant) === "secondary" || toValue(variant) === "ghost" ? textColor.value : fillColor.value;
+	});
+}
+/**
+* The button's `form`, or `undefined` when it has a `route`, even while blocked, since `form`
+* doesn't apply to it.
+*/
+function useButtonForm(form, route) {
+	return computed(() => toValue(route) ? void 0 : toValue(form));
+}
+//#endregion
+export { useButtonColor, useButtonForm, useButtonRoute, useButtonType, useButtonVariant };

package/dist/composables/colors/constants.js

@@ -0,0 +1,27 @@
+//#region src/composables/colors/constants.ts
+const feedbackColorToVuetifyColor = {
+	positive: "success",
+	informative: "info",
+	caution: "warning",
+	danger: "error"
+};
+const colorToVuetifyColor = {
+	primary: "primary",
+	secondary: "secondary",
+	...feedbackColorToVuetifyColor
+};
+/**
+* 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
+export { colorToVuetifyColor, colorToVuetifyTextColor, feedbackColorToVuetifyColor };

package/dist/composables/colors/types.d.ts

@@ -0,0 +1,4 @@
+//#region src/composables/colors/types.d.ts
+export type ColorVariant = "primary" | "secondary" | FeedbackColorVariant;
+export type FeedbackColorVariant = "positive" | "informative" | "caution" | "danger";
+//#endregion

package/dist/composables/colors/use-vuetify-background-color.js

@@ -0,0 +1,16 @@
+import { colorToVuetifyColor } from "./constants.js";
+import { computed, toValue } from "vue";
+//#region src/composables/colors/use-vuetify-background-color.ts
+/**
+* Vuetify's utility class that applies a color to the background of an element, and the color the
+* theme pairs with it to its text, for props that color a background. No class when the color is
+* omitted, so the element keeps its default background.
+*/
+function useVuetifyBackgroundColor(color) {
+	return computed(() => {
+		const colorValue = toValue(color);
+		return colorValue ? `bg-${colorToVuetifyColor[colorValue]}` : void 0;
+	});
+}
+//#endregion
+export { useVuetifyBackgroundColor as default };

package/dist/composables/colors/use-vuetify-color.js

@@ -0,0 +1,11 @@
+import { colorToVuetifyColor } from "./constants.js";
+import { computed, toValue } from "vue";
+//#region src/composables/colors/use-vuetify-color.ts
+function useVuetifyColor(color) {
+	return computed(() => {
+		const colorValue = toValue(color);
+		return colorValue ? colorToVuetifyColor[colorValue] : colorToVuetifyColor.primary;
+	});
+}
+//#endregion
+export { useVuetifyColor as default };

package/dist/composables/colors/use-vuetify-text-color.js

@@ -0,0 +1,12 @@
+import { colorToVuetifyTextColor } from "./constants.js";
+import { computed, toValue } from "vue";
+//#region src/composables/colors/use-vuetify-text-color.ts
+/**
+* Maps a color to the theme color to use when it's the text color, e.g. in a ghost button, so it
+* keeps WCAG AA's contrast on the surface and background.
+*/
+function useVuetifyTextColor(color) {
+	return computed(() => colorToVuetifyTextColor[toValue(color) ?? "primary"]);
+}
+//#endregion
+export { useVuetifyTextColor as default };

package/dist/composables/data-set/data-set.js

@@ -0,0 +1,128 @@
+import { computed, onScopeDispose, ref, toValue, watch } from "vue";
+//#region src/composables/data-set/data-set.ts
+/**
+* Width, out of the grid's 12 columns, taken by each record so that
+* `columns` records fit side by side on a row.
+*/
+const dataSetColumnsToColumnCols = {
+	1: "12",
+	2: "6",
+	3: "4",
+	4: "3",
+	6: "2"
+};
+/**
+* Space, in pixels, between two cards of the same row: the default gutter of
+* `URow`/`UColumn` (Vuetify's `v-row` with its default density puts a 24px
+* gap between its columns). `n` cards side by side take `n` card widths plus
+* `n - 1` gaps, so they fit in `width` pixels when
+* `n * (minDataSetItemWidth + gap) <= width + gap`.
+*/
+const dataSetItemGap = 24;
+/**
+* Supported numbers of records per row, from the largest to the smallest.
+*/
+const dataSetColumnsOptions = [
+	6,
+	4,
+	3,
+	2,
+	1
+];
+/**
+* Number of records to place side by side: the largest supported amount, up
+* to `columns`, that keeps each card at least {@link minDataSetItemWidth}
+* pixels wide, besides the {@link dataSetItemGap} between cards, in a data set
+* `width` pixels wide, but never less than one.
+* While the width is unknown (`0`, e.g. before the first measure or during
+* server-side rendering), `columns` is used as is.
+*/
+function getDataSetFittingColumns(columns, width) {
+	if (!width) return columns;
+	const fittingColumns = Math.min(columns, Math.floor((width + dataSetItemGap) / 264));
+	return dataSetColumnsOptions.find((option) => option <= fittingColumns) ?? 1;
+}
+/**
+* Reactive version of {@link getDataSetFittingColumns}.
+*/
+function useDataSetFittingColumns(columns, width) {
+	return computed(() => getDataSetFittingColumns(toValue(columns), toValue(width)));
+}
+/**
+* Width, in pixels, of the given element, kept up to date with a
+* `ResizeObserver`. It's `0` while there's no element, e.g. before it's
+* mounted, and the observer is disconnected when the element changes or the
+* calling scope is disposed.
+*/
+function useDataSetWidth(element) {
+	const width = ref(0);
+	let observer;
+	function disconnect() {
+		observer?.disconnect();
+		observer = void 0;
+	}
+	watch(() => toValue(element), (currentElement) => {
+		disconnect();
+		width.value = 0;
+		if (!currentElement) return;
+		observer = new ResizeObserver(([entry]) => {
+			width.value = entry.contentRect.width;
+		});
+		observer.observe(currentElement);
+	}, { immediate: true });
+	onScopeDispose(disconnect);
+	return width;
+}
+/**
+* Maps the number of records per row to the width of each record's grid
+* column.
+*/
+function useDataSetColumnCols(columns) {
+	return computed(() => dataSetColumnsToColumnCols[toValue(columns)]);
+}
+/**
+* Width, out of the bar's 12 columns, of the actions and of the search field
+* above the records of a data set `width` pixels wide: they share the bar in
+* halves (`"6"`) where two cards fit side by side, so the search field, as wide
+* as a card, fits in its half, and take a line each (`"12"`) otherwise.
+*/
+function useDataSetBarCols(width) {
+	return computed(() => getDataSetFittingColumns(2, toValue(width)) === 2 ? "6" : "12");
+}
+/**
+* Maps the record properties considered by the search to Vuetify's filter
+* keys. An empty list means every property, just like an undefined one.
+*/
+function useDataSetFilterKeys(searchKeys) {
+	return computed(() => {
+		const keys = toValue(searchKeys);
+		return keys?.length ? keys : void 0;
+	});
+}
+/**
+* Up to this many pages, every page button is shown. Vuetify's automatic
+* sizing collapses 3 pages into `1 … 2 … 3` in containers narrower than
+* ~336px, although showing every page never takes more room than its
+* collapsed form (`1 … x … 5`, 5 buttons) up to this amount.
+*/
+const maxAlwaysVisiblePages = 5;
+/**
+* Number of page buttons to show for `pageCount` pages: every page up to
+* {@link maxAlwaysVisiblePages}, otherwise `undefined` to let Vuetify fit them
+* to the available width.
+*/
+function getDataSetTotalVisible(pageCount) {
+	return pageCount <= maxAlwaysVisiblePages ? pageCount : void 0;
+}
+/**
+* Goes back to the first page whenever the search changes. It must run before
+* the new search reaches Vuetify's iterator, which would otherwise clamp the
+* outdated page to the last one of the filtered records.
+*/
+function useDataSetSearchPageReset(search, page) {
+	watch(() => toValue(search), () => {
+		page.value = 1;
+	});
+}
+//#endregion
+export { getDataSetFittingColumns, getDataSetTotalVisible, useDataSetBarCols, useDataSetColumnCols, useDataSetFilterKeys, useDataSetFittingColumns, useDataSetSearchPageReset, useDataSetWidth };

package/dist/composables/dialogs/types.d.ts

@@ -0,0 +1,88 @@
+import { ColorVariant, FeedbackColorVariant } from "../colors/types.js";
+import { ButtonVariant } from "../../components/button/types.js";
+//#region src/composables/dialogs/types.d.ts
+export interface ToastOptions {
+  /**
+   * Text to be presented in the toast.
+   */
+  message: string;
+  /**
+   * 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`.
+ */
+export 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`.
+ */
+export 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`.
+ */
+export 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

package/dist/composables/dialogs/use-confirm.d.ts

@@ -0,0 +1,21 @@
+import { ConfirmOptions } from "./types.js";
+//#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),
+ * );
+ * ```
+ */
+export default 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

package/dist/composables/dialogs/use-confirm.js

@@ -0,0 +1,55 @@
+import { openDialog } from "./use-dialog.js";
+import useRunOrToast from "./use-run-or-toast.js";
+//#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 as default };

package/dist/composables/dialogs/use-decorative-timer.js

@@ -0,0 +1,25 @@
+//#region src/composables/dialogs/use-decorative-timer.ts
+/**
+* Content props that hide a snackbar's timer bar from assistive technologies,
+* keeping it only as a visual countdown, since the message itself is already
+* announced by the snackbar's live region.
+*
+* Workaround until Vuetify offers an option for it: the timer bar is a
+* `VProgressLinear` that always renders `role="progressbar"` with
+* `aria-hidden="false"` and no accessible name, and neither `VSnackbar` nor
+* Vuetify's defaults can set attributes on it. So these vnode hooks mark the
+* bar after every render of the snackbar content, which also covers the bar
+* recreated when the pointer leaves the snackbar. Vue doesn't patch the
+* attribute back, since Vuetify keeps rendering the same `"false"` value.
+*/
+function useDecorativeTimer() {
+	return {
+		onVnodeMounted: hideTimer,
+		onVnodeUpdated: hideTimer
+	};
+}
+function hideTimer({ el }) {
+	el?.querySelector(".v-snackbar__timer [role='progressbar']")?.setAttribute("aria-hidden", "true");
+}
+//#endregion
+export { useDecorativeTimer as default };

package/dist/composables/dialogs/use-dialog-focus.js

@@ -0,0 +1,64 @@
+import { onMounted, toValue, watch } from "vue";
+//#region src/composables/dialogs/use-dialog-focus.ts
+/** Focus state of the closed dialogs, by their card, for the dialogs opened from them. */
+const closedDialogs = /* @__PURE__ */ new WeakMap();
+/** Elements that can get the focus when the dialog opens. The first one in the dialog gets it. */
+const focusable = [
+	"button:not([disabled])",
+	"[href]",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
+/**
+* Moves the focus into a dialog once it opens and back to where it was when it closes, including
+* when dialogs are opened from others. Internal to the dialog components.
+* @param isActive - Whether the dialog is displayed. It turns `false` as soon as the dialog starts
+* leaving, so the focus returns right away.
+* @param card - The dialog's card, marked with `data-u-dialog`, or nothing while it isn't rendered.
+* @returns `focusFirstElement`, to call once the dialog finishes entering.
+*/
+function useDialogFocus(isActive, card) {
+	/** Focus state of this dialog, shared with the dialogs opened from it. */
+	const focusState = {
+		isOpen: () => toValue(isActive),
+		origin: null
+	};
+	onMounted(() => onActiveChange(toValue(isActive)));
+	watch(() => toValue(isActive), onActiveChange);
+	function onActiveChange(active) {
+		if (active) {
+			focusState.origin = document.activeElement;
+			return;
+		}
+		const element = toValue(card);
+		if (element) closedDialogs.set(element, focusState);
+		const target = findFocusTarget(focusState.origin);
+		if (hasFocus(element) && (target instanceof HTMLElement || target instanceof SVGElement)) target.focus();
+	}
+	function focusFirstElement() {
+		toValue(card)?.querySelector(focusable)?.focus();
+	}
+	return { focusFirstElement };
+}
+/**
+* Element that gets the focus back when a dialog closes: its origin or, when the origin is inside
+* another dialog that closed meanwhile (and can't get the focus anymore), that dialog's.
+*/
+function findFocusTarget(origin) {
+	const card = origin?.closest("[data-u-dialog]");
+	const owner = card && closedDialogs.get(card);
+	return owner && !owner.isOpen() ? findFocusTarget(owner.origin) : origin;
+}
+/**
+* Whether the focus is on the dialog or lost (on nothing or on the page's body), so it can move.
+* Otherwise it moved elsewhere, e.g. to another dialog opened over this one.
+*/
+function hasFocus(card) {
+	const active = document.activeElement;
+	if (!active) return true;
+	return !!card && (card.contains(active) || active.contains(card));
+}
+//#endregion
+export { useDialogFocus };

package/dist/composables/dialogs/use-dialog-loading.js

@@ -0,0 +1,13 @@
+import { computed, toValue } from "vue";
+//#region src/composables/dialogs/use-dialog-loading.ts
+/**
+* Tells whether any action of a dialog is loading, during which the user can't close it with
+* `Esc`, a click outside or the browser's back button. Internal to the dialog components.
+* @param actions - The dialog's actions, if any.
+* @returns `isLoading`, which is `true` while at least one action is `loading`.
+*/
+function useDialogLoading(actions) {
+	return { isLoading: computed(() => toValue(actions)?.some((action) => action.loading) ?? false) };
+}
+//#endregion
+export { useDialogLoading };

package/dist/composables/dialogs/use-dialog.d.ts

@@ -0,0 +1,36 @@
+import "../../components/button/types.js";
+import { DialogOptions } from "./types.js";
+//#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" },
+ *   ],
+ * });
+ * ```
+ */
+export default 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