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

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;
-  type: TextFieldType;
   clearable: boolean;
+  type: TextFieldType;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/inputs/checkbox/types.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.
+   *
+   * 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, and `cnpj` only
-   * accepts digits (not the alphanumeric CNPJ).
+   * 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

@@ -1917,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;
@@ -2019,6 +2036,8 @@ function useMaskField(props, model) {
 	return {
 		displayValue,
 		placeholder,
+		inputMode,
+		autocapitalize,
 		rules,
 		onInput,
 		onCompositionEnd
@@ -2087,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 = "";
@@ -2108,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),
@@ -2130,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.42",
+  "version": "2.0.0-beta.43",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",