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

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",
@@ -859,15 +858,41 @@ var container_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/composables/dialogs/use-decorative-timer.ts
+/**
+* Content props that hide a snackbar's timer bar from assistive technologies,
+* keeping it only as a visual countdown, since the message itself is already
+* announced by the snackbar's live region.
+*
+* Workaround until Vuetify offers an option for it: the timer bar is a
+* `VProgressLinear` that always renders `role="progressbar"` with
+* `aria-hidden="false"` and no accessible name, and neither `VSnackbar` nor
+* Vuetify's defaults can set attributes on it. So these vnode hooks mark the
+* bar after every render of the snackbar content, which also covers the bar
+* recreated when the pointer leaves the snackbar. Vue doesn't patch the
+* attribute back, since Vuetify keeps rendering the same `"false"` value.
+*/
+function useDecorativeTimer() {
+	return {
+		onVnodeMounted: hideTimer,
+		onVnodeUpdated: hideTimer
+	};
+}
+function hideTimer({ el }) {
+	el?.querySelector(".v-snackbar__timer [role='progressbar']")?.setAttribute("aria-hidden", "true");
+}
+//#endregion
 //#region src/components/dialogs/toast.vue
 var toast_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "toast",
 	setup(__props) {
+		const decorativeTimer = useDecorativeTimer();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VSnackbarQueue), {
 				modelValue: unref(messages),
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(messages) ? messages.value = $event : null),
+				"content-props": unref(decorativeTimer),
 				"display-strategy": "overflow",
 				location: "top end",
 				"total-visible": "3",
@@ -882,7 +907,7 @@ var toast_default = /* @__PURE__ */ defineComponent({
 					variant: "text"
 				}), null, 16)]),
 				_: 1
-			}, 8, ["modelValue"]);
+			}, 8, ["modelValue", "content-props"]);
 		};
 	}
 });

package/package.json

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