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

package/dist/components.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;
@@ -433,8 +437,8 @@ declare const __VLS_export$14: import("vue", { with: { "resolution-mode": "impor
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   variant: TextFieldVariant;
-  clearable: boolean;
   type: TextFieldType;
+  clearable: boolean;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/inputs/checkbox/types.d.ts

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",

package/package.json

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