@nexdom/uimed-vue 2.0.0-beta.33 → 2.0.0-beta.35

package/dist/components.d.ts

@@ -1,4 +1,4 @@
-import { t as ButtonProps } from "./types-DNT_odv7.js";
+import { t as ButtonProps } from "./types-CjaJ2WAC.js";
 import { RouteLocationRaw } from "vue-router";
 //#region src/components/app-bar/types.d.ts
 /**
@@ -245,6 +245,10 @@ type TextFieldProps = {
   /**
    * Applies a distinct behavior to the field.
    * One of `text`, `phone`, `email`, `url`, `password` or `search`.
+   *
+   * With `password`, the field hides its value and shows a "Mostrar senha"
+   * button that toggles between showing and hiding it. The value hides again
+   * when the button is pressed again or the type changes.
    * @default "text"
    */
   type?: TextFieldType;
@@ -961,7 +965,8 @@ interface SectionAction extends ButtonProps {
    */
   label: string;
   /**
-   * Called when the action button is clicked.
+   * Called when the action button is clicked. Not called while the action is `disabled` or
+   * `loading`.
    */
   onClick?: (event: MouseEvent) => void;
 }
@@ -1406,7 +1411,8 @@ interface DialogButtonAction extends ButtonProps {
    */
   label: string;
   /**
-   * Called when the action button is clicked. The dialog stays open.
+   * Called when the action button is clicked. Not called while the action is `disabled` or
+   * `loading`. The dialog stays open.
    */
   onClick?: (event: MouseEvent) => void;
 }

package/dist/components.js

@@ -1,5 +1,5 @@
 import { a as messages, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 import { pt } from "vuetify/locale";
 import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressCircular, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
 import { formatDateTime, isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
@@ -401,12 +401,39 @@ const textFieldTypeToVuetifyRule = {
 	email,
 	url
 };
-function useTextFieldType(type) {
+/**
+* Maps the field type to the input type, showing as plain text a password
+* the user chose to make visible.
+*/
+function useTextFieldType(type, isPasswordVisible) {
 	return computed(() => {
 		const typeValue = toValue(type);
+		if (typeValue === "password" && toValue(isPasswordVisible)) return "text";
 		return textFieldTypeToVuetifyType[typeValue];
 	});
 }
+/**
+* Controls the button that shows or hides a password field's value. The
+* password starts hidden and hides again whenever the type stops being
+* `password`.
+*/
+function useTextFieldPasswordToggle(type) {
+	const isPasswordField = computed(() => toValue(type) === "password");
+	const isPasswordVisible = ref(false);
+	const icon = computed(() => isPasswordVisible.value ? "mdi-eye-off" : "mdi-eye");
+	watch(isPasswordField, () => {
+		isPasswordVisible.value = false;
+	});
+	function toggle() {
+		isPasswordVisible.value = !isPasswordVisible.value;
+	}
+	return {
+		isPasswordField,
+		isPasswordVisible: readonly(isPasswordVisible),
+		icon,
+		toggle
+	};
+}
 function useTextFieldRules(props) {
 	const defaultRules = useRules(props);
 	return computed(() => {
@@ -512,7 +539,8 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 		const modelValue = useModel(__props, "modelValue");
 		const props = __props;
 		const vuetifyVariant = useTextFieldVariant(() => props.variant);
-		const vuetifyType = useTextFieldType(() => props.type);
+		const { isPasswordField, isPasswordVisible, icon: passwordToggleIcon, toggle: togglePassword } = useTextFieldPasswordToggle(() => props.type);
+		const vuetifyType = useTextFieldType(() => props.type, isPasswordVisible);
 		const rules = useTextFieldRules(props);
 		const isSearchField = computed(() => props.type === "search");
 		const computedClearable = computed(() => props.clearable ?? isSearchField.value);
@@ -538,10 +566,27 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 				hint: props.hint,
 				clearable: computedClearable.value,
 				"onClick:clear": clear
-			}, {
+			}, createSlots({
 				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
-				_: 1
-			}, 8, [
+				_: 2
+			}, [unref(isPasswordField) ? {
+				name: "append-inner",
+				fn: withCtx(() => [createVNode(unref(VBtn), {
+					icon: unref(passwordToggleIcon),
+					"aria-label": "Mostrar senha",
+					"aria-pressed": unref(isPasswordVisible),
+					disabled: props.disabled,
+					size: "small",
+					variant: "text",
+					onClick: unref(togglePassword)
+				}, null, 8, [
+					"icon",
+					"aria-pressed",
+					"disabled",
+					"onClick"
+				])]),
+				key: "0"
+			} : void 0]), 1032, [
 				"modelValue",
 				"variant",
 				"type",
@@ -822,12 +867,13 @@ var button_default = /* @__PURE__ */ defineComponent({
 		const type = useButtonType(() => props.type);
 		const form = useButtonForm(() => props.form);
 		const widthClass = useFullWidth(() => props.fullWidth);
+		const isDisabled = computed(() => props.disabled || props.loading);
 		function onClick(event) {
 			emit("click", event);
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VBtn), {
-				disabled: props.disabled,
+				disabled: isDisabled.value,
 				loading: props.loading,
 				"data-testid": props.dataTestid,
 				variant: unref(variant),
@@ -1084,7 +1130,6 @@ var dialog_host_default = /* @__PURE__ */ defineComponent({
 			show();
 		}
 		async function select(current, action) {
-			if (isRunning.value) return;
 			requests.value.shift();
 			selected.value = action;
 			await current.select(action?.value);

package/dist/composables.d.ts

@@ -1,4 +1,4 @@
-import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-DNT_odv7.js";
+import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-CjaJ2WAC.js";
 import { ComputedRef, MaybeRefOrGetter } from "vue";
 //#region src/composables/dialogs/types.d.ts
 interface ToastOptions {

package/dist/{types-DNT_odv7.d.ts → types-CjaJ2WAC.d.ts}

@@ -32,8 +32,11 @@ type ButtonProps = {
    */
   disabled?: boolean;
   /**
-   * Displays a loading indicator on the button, disabling interaction.
-   * The button keeps its text as accessible name and is marked as busy, and
+   * Displays a loading indicator on the button and disables it while active, as `disabled` does:
+   * it can't be clicked or focused, `click` isn't emitted and its form isn't submitted, including
+   * by pressing `Enter` in one of the form's fields when it's the form's first submit button. It
+   * looks disabled, with the indicator, and loses focus if focused when loading starts, as any
+   * disabled button does. The button keeps its text as accessible name and is marked as busy, and
    * assistive technologies ignore the indicator.
    * @default false
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.33",
+  "version": "2.0.0-beta.35",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",