@nexdom/uimed-vue 1.1.0-beta.4 → 1.2.0-beta.1

package/dist/components.d.ts

@@ -1,3 +1,4 @@
+import { t as ColorVariant } from "./types-BPXXtbmW.js";
 //#region src/components/root/types.d.ts
 /**
  * Props exposed by the {@link Root} component.
@@ -34,7 +35,6 @@ type __VLS_WithSlots$5<T, S> = T & {
 //#endregion
 //#region src/components/btn/types.d.ts
 type BtnVariant = "primary" | "secondary" | "ghost";
-type BtnColor = "primary" | "secondary" | "positive" | "informative" | "caution" | "danger";
 /**
  * Props exposed by the {@link Btn} component.
  */
@@ -56,7 +56,7 @@ type BtnProps = {
    * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
    * @default "primary"
    */
-  color?: BtnColor;
+  color?: ColorVariant;
   /**
    * Removes the ability to click or target the button.
    * @default false

package/dist/components.js

@@ -1,7 +1,58 @@
-import { computed, createBlock, createPropsRestProxy, defineComponent, mergeModels, openBlock, renderSlot, toValue, unref, useModel, withCtx, withModifiers } from "vue";
-import { VApp, VBtn, VCol, VContainer, VForm, VRow, VTextField } from "vuetify/components";
+import { r as useVuetifyColor, t as messages } from "./use-toast-CACuYhK_.js";
+import { computed, createBlock, createPropsRestProxy, createVNode, defineComponent, isRef, mergeModels, mergeProps, openBlock, renderSlot, toValue, unref, useModel, withCtx, withModifiers } from "vue";
+import { VApp, VBtn, VCol, VContainer, VForm, VIconBtn, VMain, VRow, VSnackbarQueue, VTextField } from "vuetify/components";
 import { isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
 //#endregion
+//#region src/components/grid/container/container.vue
+var container_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "container",
+	props: { dataTestid: {
+		type: String,
+		required: false
+	} },
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VContainer), {
+				"data-testid": props.dataTestid,
+				fluid: ""
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["data-testid"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/dialogs/toast.vue
+var toast_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "toast",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VSnackbarQueue), {
+				modelValue: unref(messages),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(messages) ? messages.value = $event : null),
+				"display-strategy": "overflow",
+				location: "top end",
+				"total-visible": "3",
+				collapsed: "",
+				closable: "",
+				timer: ""
+			}, {
+				actions: withCtx(({ props }) => [createVNode(unref(VIconBtn), mergeProps(props, {
+					"aria-label": "Fechar",
+					icon: "$close",
+					size: "small",
+					variant: "text"
+				}), null, 16)]),
+				_: 1
+			}, 8, ["modelValue"]);
+		};
+	}
+});
+//#endregion
 //#region src/components/root/root.vue
 var root_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
@@ -14,7 +65,13 @@ var root_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VApp), { "data-testid": props.dataTestid }, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				default: withCtx(() => [createVNode(unref(VMain), null, {
+					default: withCtx(() => [createVNode(container_default, null, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createVNode(toast_default)]),
+						_: 3
+					})]),
+					_: 3
+				})]),
 				_: 3
 			}, 8, ["data-testid"]);
 		};
@@ -27,26 +84,12 @@ const btnVariantToVuetifyVariant = {
 	secondary: "flat",
 	ghost: "outlined"
 };
-const btnColorToVuetifyColor = {
-	primary: "primary",
-	secondary: "secondary",
-	positive: "success",
-	informative: "info",
-	caution: "warning",
-	danger: "error"
-};
 function useBtnVariant(variant) {
 	return computed(() => {
 		const variantValue = toValue(variant);
 		return variantValue ? btnVariantToVuetifyVariant[variantValue] : btnVariantToVuetifyVariant.primary;
 	});
 }
-function useBtnColor(color) {
-	return computed(() => {
-		const colorValue = toValue(color);
-		return colorValue ? btnColorToVuetifyColor[colorValue] : btnColorToVuetifyColor.primary;
-	});
-}
 function useBtnType(type) {
 	return computed(() => {
 		return toValue(type) ?? "button";
@@ -95,7 +138,7 @@ var btn_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const variant = useBtnVariant(() => props.variant);
-		const color = useBtnColor(() => props.color);
+		const color = useVuetifyColor(() => props.color);
 		const type = useBtnType(() => props.type);
 		const form = useBtnForm(() => props.form);
 		function onClick(event) {
@@ -291,28 +334,6 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/grid/container/container.vue
-var container_default = /* @__PURE__ */ defineComponent({
-	inheritAttrs: false,
-	__name: "container",
-	props: { dataTestid: {
-		type: String,
-		required: false
-	} },
-	setup(__props) {
-		const props = __props;
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VContainer), {
-				"data-testid": props.dataTestid,
-				fluid: ""
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, ["data-testid"]);
-		};
-	}
-});
-//#endregion
 //#region src/components/grid/row/row.vue
 var row_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,

package/dist/composables.d.ts

@@ -0,0 +1,67 @@
+import { n as FeedbackColorVariant } from "./types-BPXXtbmW.js";
+//#region src/composables/dialogs/types.d.ts
+interface ToastOptions {
+  /**
+   * Text to be presented in the toast.
+   */
+  message: string;
+  /**
+   * Applies a color to the button.
+   * One of `positive`, `informative`, `caution`, or `danger`.
+   * @default "informative"
+   */
+  color?: FeedbackColorVariant;
+}
+//#endregion
+//#region src/composables/dialogs/use-toast.d.ts
+/**
+ * Composable which returns a function to display toast messages.
+ *
+ * @example
+ * ```ts
+ * const { toast } = useToast();
+ * toast({ message: "Hello, World!" });
+ * ```
+ */
+declare function useToast(): {
+  toast: typeof toast;
+};
+/**
+ * Displays a toast message.
+ * @param {ToastOptions} options - Options for the toast message.
+ *
+ * @example
+ * ```ts
+ * toast({ message: "Hello, World!" });
+ * ```
+ */
+declare function toast(options: ToastOptions): void;
+//#endregion
+//#region src/composables/dialogs/use-run-or-toast..d.ts
+/**
+ * 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);
+ * ```
+ */
+declare function useRunOrToast(): {
+  run: <T extends (...args: Parameters<T>) => PromiseLike<Awaited<ReturnType<T>>>>(toRun: T, ...params: Parameters<T>) => Promise<Awaited<ReturnType<T>> | false>;
+  isRunning: import("vue").ComputedRef<boolean>;
+};
+//#endregion
+export { useRunOrToast, useToast };

package/dist/composables.js

@@ -0,0 +1,65 @@
+import { n as useToast } from "./use-toast-CACuYhK_.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
+export { useRunOrToast, useToast };

package/dist/types-BPXXtbmW.d.ts

@@ -0,0 +1,5 @@
+//#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

@@ -0,0 +1,53 @@
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "1.1.0-beta.4",
+  "version": "1.2.0-beta.1",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -27,6 +27,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./components": "./dist/components.js",
+    "./composables": "./dist/composables.js",
     "./plugins": "./dist/plugins.js",
     "./unit-test": "./dist/unit-test.js",
     "./package.json": "./package.json"
@@ -67,7 +68,7 @@
     "conventional-changelog-conventionalcommits": "^9.3.1",
     "dependency-cruiser": "^18.1.1",
     "jsdom": "^30.0.1",
-    "oxc-minify": "^0.143.0",
+    "oxc-minify": "^0.147.0",
     "postcss": "^8.5.25",
     "resize-observer-polyfill": "^1.5.1",
     "sass-embedded": "^1.103.1",
@@ -79,7 +80,7 @@
     "vitepress-plugin-group-icons": "^1.7.6",
     "vue": "^3.5.40",
     "vue-tsc": "^3.3.9",
-    "vuetify": "^4.1.7"
+    "vuetify": "^4.2.0"
   },
   "peerDependencies": {
     "@fontsource/roboto": "^5.3.0",
@@ -89,7 +90,7 @@
     "vite-plugin-vuetify": "^2.1.3",
     "vite-plus": "^0.2.7",
     "vue": "^3.5.40",
-    "vuetify": "^4.1.7"
+    "vuetify": "^4.2.0"
   },
   "commitlint": {
     "extends": [