@nexdom/uimed-vue 2.0.0-beta.41 → 2.0.0-beta.42

package/dist/components.d.ts

@@ -463,8 +463,8 @@ declare const __VLS_export$16: 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

@@ -488,25 +488,41 @@ function useTextFieldType(type, isPasswordVisible) {
 	});
 }
 /**
-* 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`.
+* Controls the icon at the end of the field: a decorative magnifier on
+* `search`, and the toggle that shows or hides the value on `password`. The
+* toggle works with click, `Enter` and `Space`, does nothing while disabled,
+* and the password hides again whenever the type stops being `password`.
 */
-function useTextFieldPasswordToggle(type) {
+function useTextFieldAppendIcon(type, disabled) {
 	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() {
+		if (toValue(disabled)) return;
 		isPasswordVisible.value = !isPasswordVisible.value;
 	}
+	function onKeydown(event) {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		event.stopPropagation();
+		toggle();
+	}
+	const iconProps = computed(() => {
+		if (toValue(type) === "search") return { icon: "mdi-magnify" };
+		if (!isPasswordField.value) return void 0;
+		return {
+			icon: isPasswordVisible.value ? "mdi-eye-off" : "mdi-eye",
+			"aria-label": "Mostrar senha",
+			"aria-pressed": isPasswordVisible.value,
+			onClick: toggle,
+			onKeydown
+		};
+	});
 	return {
-		isPasswordField,
 		isPasswordVisible: readonly(isPasswordVisible),
-		icon,
-		toggle
+		iconProps
 	};
 }
 function useTextFieldRules(props) {
@@ -614,12 +630,10 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 		const modelValue = useModel(__props, "modelValue");
 		const props = __props;
 		const vuetifyVariant = useTextFieldVariant(() => props.variant);
-		const { isPasswordField, isPasswordVisible, icon: passwordToggleIcon, toggle: togglePassword } = useTextFieldPasswordToggle(() => props.type);
+		const { isPasswordVisible, iconProps: appendIconProps } = useTextFieldAppendIcon(() => props.type, () => props.disabled);
 		const vuetifyType = useTextFieldType(() => props.type, isPasswordVisible);
 		const rules = useTextFieldRules(props);
-		const isSearchField = computed(() => props.type === "search");
-		const computedClearable = computed(() => props.clearable ?? isSearchField.value);
-		const appendIcon = computed(() => isSearchField.value ? "mdi-magnify" : void 0);
+		const computedClearable = computed(() => props.clearable ?? props.type === "search");
 		function clear() {
 			modelValue.value = "";
 		}
@@ -629,7 +643,6 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
 				variant: unref(vuetifyVariant),
 				type: unref(vuetifyType),
-				"append-inner-icon": appendIcon.value,
 				rules: unref(rules),
 				"data-testid": props.dataTestid,
 				disabled: props.disabled,
@@ -644,28 +657,14 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 			}, createSlots({
 				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
 				_: 2
-			}, [unref(isPasswordField) ? {
+			}, [unref(appendIconProps) ? {
 				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"
-				])]),
+				fn: withCtx(() => [createVNode(unref(VIcon), mergeProps(unref(appendIconProps), { disabled: props.disabled }), null, 16, ["disabled"])]),
 				key: "0"
 			} : void 0]), 1032, [
 				"modelValue",
 				"variant",
 				"type",
-				"append-inner-icon",
 				"rules",
 				"data-testid",
 				"disabled",

package/package.json

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