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

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/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/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.7",
+  "version": "2.0.0-beta.9",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",

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