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

package/dist/components.d.ts

@@ -652,7 +652,9 @@ type MaskFieldVariant = TextFieldVariant;
  * Masks the library provides:
  *
  * - `cpf`: `###.###.###-##` (e.g. `123.456.789-09`);
- * - `cnpj`: `##.###.###/####-##` (e.g. `12.345.678/0001-95`);
+ * - `cnpj`: `##.###.###/####-##`, where the first 12 positions also accept
+ *   letters, typed in uppercase or lowercase and kept in uppercase (e.g.
+ *   `12.345.678/0001-95` or the alphanumeric `12.ABC.345/01DE-35`);
  * - `cep`: `#####-###` (e.g. `01310-100`);
  * - `phone`: `(##) #####-####` (e.g. `(11) 91234-5678`);
  * - `date`: `##/##/####` (e.g. `31/12/2026`), formatting only.
@@ -691,14 +693,21 @@ type MaskFieldProps = {
    * inserted automatically (e.g. `####-##/####` or `Nº ####`). A custom mask
    * must contain at least one `#`.
    *
-   * Only digits are accepted, up to the number of `#` in the mask, and the
-   * `v-model` holds only the digits (e.g. `12345678909` for `cpf`). A literal
-   * the user could also type, such as a fixed digit (`0800 ###-####`), isn't
-   * supported: where the literal is expected, the same character is read as
-   * the literal.
+   * Only digits are accepted, up to the number of `#` in the mask, except in
+   * the first 12 positions of `cnpj`, which also accept letters (A–Z, without
+   * accents, typed in uppercase or lowercase) for the alphanumeric CNPJ (only
+   * with `cnpj`: the custom mask `##.###.###/####-##` accepts only digits). The
+   * `v-model` holds only these characters, with letters in uppercase (e.g.
+   * `12345678909` for `cpf`, and `12345678000195` or `12ABC34501DE35` for
+   * `cnpj`). A literal the user could also type, such as a fixed digit
+   * (`0800 ###-####`), isn't supported: where the literal is expected, the
+   * same character is read as the literal.
    *
-   * The `cpf` and `cnpj` masks don't validate check digits, and `cnpj` only
-   * accepts digits (not the alphanumeric CNPJ).
+   * Editing in the middle of the value shifts the characters after it, and one
+   * that doesn't fit its new position (e.g. a letter of `cnpj` shifted into
+   * the last 2 positions) is discarded.
+   *
+   * The `cpf` and `cnpj` masks don't validate check digits.
    *
    * Changing it keeps the `v-model`: a value that doesn't fit the new mask
    * (e.g. longer than it) is displayed cut and fails validation with "Valor
@@ -738,7 +747,8 @@ type MaskFieldProps = {
   label?: string;
   /**
    * Field placeholder. Defaults to the mask, with `0` in place of each `#`,
-   * e.g. `000.000.000-00` for `cpf` and `Nº 0000` for `Nº ####`.
+   * e.g. `000.000.000-00` for `cpf`, `00.000.000/0000-00` for `cnpj` and
+   * `Nº 0000` for `Nº ####`.
    */
   placeholder?: string;
   /**
@@ -755,9 +765,10 @@ type MaskFieldProps = {
 //#endregion
 //#region src/components/inputs/mask-field/mask-field.vue.d.ts
 /**
- * Text field that masks the value while the user types, such as CPF, CNPJ,
- * CEP, phone or a custom mask. Its value holds only the digits, without the
- * mask's literals.
+ * Text field that masks the value while the user types, such as CPF, CNPJ
+ * (numeric or alphanumeric), CEP, phone or a custom mask. Its value holds only
+ * the typed characters, without the mask's literals and with letters in
+ * uppercase.
  *
  * @example
  * ```vue

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",
@@ -1918,79 +1917,96 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/composables/inputs/mask-field.ts
 /**
-* Masks of the presets. Our preset names always map to these masks, never to
-* Vuetify's own presets (e.g. its American `phone`).
+* Masks of the presets, as Vuetify reads them: `#` is a digit and `N` is a
+* letter or a digit, with letters converted to uppercase. Our preset names
+* always map to these masks, never to Vuetify's own presets (e.g. its American
+* `phone`).
 */
 const maskFieldPresets = {
 	cpf: "###.###.###-##",
-	cnpj: "##.###.###/####-##",
+	cnpj: "NN.NNN.NNN/NNNN-##",
 	cep: "#####-###",
 	phone: "(##) #####-####",
 	date: "##/##/####"
 };
 /**
-* Returns the mask of a preset, or the given mask itself when it's a custom
-* one.
+* Returns the mask as Vuetify reads it: the mask of a preset, or the given mask
+* itself, escaped, when it's a custom one.
 *
 * It takes any string, as the `mask` prop may get one through a cast or from
 * JavaScript: a string that isn't a preset is taken as the mask.
 */
 function resolveMask(mask) {
-	return isMaskFieldPreset(mask) ? maskFieldPresets[mask] : mask;
+	return isMaskFieldPreset(mask) ? maskFieldPresets[mask] : toVuetifyMask(mask);
 }
 /**
-* Returns a mask as Vuetify reads it. `#` is our only token, but Vuetify always
-* adds its own tokens (`A`, `a`, `N`, `n` and `X`) and its escape (`\`), so
-* these characters are escaped to stay literals.
+* Returns a custom mask as Vuetify reads it. `#` is the only token of custom
+* masks, but Vuetify always adds its own tokens (`A`, `a`, `N`, `n` and `X`)
+* and its escape (`\`), so these characters are escaped to stay literals.
 */
 function toVuetifyMask(mask) {
 	return mask.replaceAll(/[AaNnX\\]/g, String.raw`\$&`);
 }
 /**
-* Returns the default placeholder of a mask: the mask with `0` in place of each
-* `#`, keeping its literals (e.g. `000.000.000-00` for `cpf`).
+* Returns the tokens of a mask as Vuetify reads it (see {@link resolveMask}),
+* in order, without its literals (e.g. `NNNNNNNNNNNN##` for `cnpj`).
+*/
+function getMaskTokens(mask) {
+	return mask.replaceAll(/\\.|[^#N]/g, "");
+}
+/**
+* Returns the default placeholder of a mask as Vuetify reads it (see
+* {@link resolveMask}): the mask with `0` in place of each token, keeping its
+* literals (e.g. `000.000.000-00` for `cpf` and `Nº 0000` for `Nº ####`).
 */
 function getMaskPlaceholder(mask) {
-	return mask.replaceAll("#", "0");
+	return mask.replaceAll(/\\(.)|[#N]/g, (_token, literal) => literal ?? "0");
 }
 function isMaskFieldPreset(mask) {
 	return Object.hasOwn(maskFieldPresets, mask);
 }
 /**
-* Keeps the input masked while the user edits it, emitting only the digits
-* (Vuetify's `unmask`).
+* Keeps the input masked while the user edits it, emitting only the
+* characters of the tokens (Vuetify's `unmask`), with letters in uppercase.
 *
-* A `v-model` out of the mask's format (masked, or with characters or length
-* the mask doesn't accept) is displayed normalized, without being emitted, and
-* validated as it is, so a value that doesn't fit the mask fails validation.
+* A `v-model` out of the mask's format (masked, with lowercase letters, or with
+* characters or length the mask doesn't accept) is displayed normalized,
+* without being emitted, and validated as it is, so a value that doesn't fit
+* the mask fails validation.
 */
 function useMaskField(props, model) {
 	const mask = computed(() => resolveMask(props.mask));
-	const digitCount = computed(() => mask.value.split("#").length - 1);
+	const tokens = computed(() => getMaskTokens(mask.value));
+	const acceptsLetters = computed(() => tokens.value.includes("N"));
 	const vuetifyMask = useMask({ get mask() {
 		return {
-			mask: toVuetifyMask(mask.value),
+			mask: mask.value,
 			tokens: {}
 		};
 	} });
 	const displayValue = computed(() => vuetifyMask.mask(unmask(model.value)));
 	const placeholder = computed(() => props.placeholder ?? getMaskPlaceholder(mask.value));
+	const inputMode = computed(() => acceptsLetters.value ? "text" : "numeric");
+	const autocapitalize = computed(() => acceptsLetters.value ? "characters" : void 0);
 	const defaultRules = useRules(props);
 	const rules = computed(() => [
 		...defaultRules.value,
-		(value) => !value || !vuetifyMask.isValid(value) || isComplete(value) || "Valor incompleto",
-		(value) => !value || vuetifyMask.isValid(value) || "Valor inválido"
+		(value) => !value || !isValid(value) || isComplete(value) || "Valor incompleto",
+		(value) => !value || isValid(value) || "Valor inválido"
 	]);
 	function unmask(text) {
 		return vuetifyMask.unmask(text) ?? "";
 	}
+	function isValid(value) {
+		return unmask(value).toUpperCase() === unmask(vuetifyMask.mask(value));
+	}
 	function isComplete(value) {
-		return unmask(vuetifyMask.mask(value)).length === digitCount.value;
+		return unmask(vuetifyMask.mask(value)).length === tokens.value.length;
 	}
 	/**
 	* Returns the position in a masked text right after the given number of
-	* digits, skipping the literals after it unless the user deleted backwards
-	* (as Vuetify's mask input does).
+	* characters of the value, skipping the literals after it unless the user
+	* deleted backwards (as Vuetify's mask input does).
 	*/
 	function findCaret(masked, valueLength, deletedBackwards) {
 		let caret = 0;
@@ -2020,6 +2036,8 @@ function useMaskField(props, model) {
 	return {
 		displayValue,
 		placeholder,
+		inputMode,
+		autocapitalize,
 		rules,
 		onInput,
 		onCompositionEnd
@@ -2088,7 +2106,7 @@ var mask_field_default = /* @__PURE__ */ defineComponent({
 		const modelValue = useModel(__props, "modelValue");
 		const props = __props;
 		const vuetifyVariant = useTextFieldVariant(() => props.variant);
-		const { displayValue, placeholder, rules, onInput, onCompositionEnd } = useMaskField(props, modelValue);
+		const { displayValue, placeholder, inputMode, autocapitalize, rules, onInput, onCompositionEnd } = useMaskField(props, modelValue);
 		function keepFieldControlled() {}
 		function clear() {
 			modelValue.value = "";
@@ -2109,7 +2127,8 @@ var mask_field_default = /* @__PURE__ */ defineComponent({
 				hint: props.hint,
 				clearable: props.clearable,
 				type: "text",
-				inputmode: "numeric",
+				inputmode: unref(inputMode),
+				autocapitalize: unref(autocapitalize),
 				"onUpdate:modelValue": keepFieldControlled,
 				onInput: unref(onInput),
 				onCompositionend: unref(onCompositionEnd),
@@ -2131,6 +2150,8 @@ var mask_field_default = /* @__PURE__ */ defineComponent({
 				"placeholder",
 				"hint",
 				"clearable",
+				"inputmode",
+				"autocapitalize",
 				"onInput",
 				"onCompositionend"
 			]);

package/package.json

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