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

package/dist/components.d.ts

@@ -1,4 +1,4 @@
-import { t as ButtonProps } from "./types-CjaJ2WAC.js";
+import { t as ButtonProps } from "./types-BbWo6RIy.js";
 import { RouteLocationRaw } from "vue-router";
 //#region src/components/app-bar/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.
    *
-   * 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

@@ -924,13 +924,31 @@ function useButtonVariant(variant) {
 		return variantValue ? buttonVariantToVuetifyVariant[variantValue] : buttonVariantToVuetifyVariant.primary;
 	});
 }
-function useButtonType(type) {
+/**
+* The route the button navigates to, or `undefined` while it's blocked, so a `disabled` or
+* `loading` button is rendered as a disabled `<button>` instead of a link that the keyboard,
+* assistive technologies or `element.click()` could still follow.
+*/
+function useButtonRoute(route, blocked) {
+	return computed(() => toValue(blocked) ? void 0 : toValue(route));
+}
+/**
+* The button's `type`. It doesn't apply to a button with a `route`, which is `undefined` while
+* rendered as a link, and `"button"` while blocked, so the disabled `<button>` it's rendered as
+* isn't a submit button.
+*/
+function useButtonType(type, route, blocked) {
 	return computed(() => {
-		return toValue(type) ?? "button";
+		if (!toValue(route)) return toValue(type) ?? "button";
+		return toValue(blocked) ? "button" : void 0;
 	});
 }
-function useButtonForm(form) {
-	return computed(() => toValue(form));
+/**
+* The button's `form`, or `undefined` when it has a `route`, even while blocked, since `form`
+* doesn't apply to it.
+*/
+function useButtonForm(form, route) {
+	return computed(() => toValue(route) ? void 0 : toValue(form));
 }
 //#endregion
 //#region src/components/button/button.vue
@@ -966,6 +984,10 @@ var button_default = /* @__PURE__ */ defineComponent({
 			type: String,
 			required: false
 		},
+		route: {
+			type: null,
+			required: false
+		},
 		dataTestid: {
 			type: String,
 			required: false
@@ -977,15 +999,16 @@ var button_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const variant = useButtonVariant(() => props.variant);
 		const color = useVuetifyColor(() => props.color);
-		const type = useButtonType(() => props.type);
-		const form = useButtonForm(() => props.form);
 		const widthClass = useFullWidth(() => props.fullWidth);
 		const isDisabled = computed(() => props.disabled || props.loading);
+		const routeProps = useRouteProps(useButtonRoute(() => props.route, isDisabled));
+		const type = useButtonType(() => props.type, () => props.route, isDisabled);
+		const form = useButtonForm(() => props.form, () => props.route);
 		function onClick(event) {
 			emit("click", event);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VBtn), {
+			return openBlock(), createBlock(unref(VBtn), mergeProps({
 				disabled: isDisabled.value,
 				loading: props.loading,
 				"data-testid": props.dataTestid,
@@ -993,9 +1016,11 @@ var button_default = /* @__PURE__ */ defineComponent({
 				color: unref(color),
 				type: unref(type),
 				form: unref(form),
-				class: normalizeClass(unref(widthClass)),
+				class: unref(widthClass)
+			}, unref(routeProps), {
+				active: false,
 				onClick
-			}, {
+			}), {
 				loader: withCtx(() => [createVNode(unref(VProgressCircular), {
 					indeterminate: "",
 					width: "2",
@@ -1003,7 +1028,7 @@ var button_default = /* @__PURE__ */ defineComponent({
 				})]),
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, [
+			}, 16, [
 				"disabled",
 				"loading",
 				"data-testid",
@@ -1917,79 +1942,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 +2061,8 @@ function useMaskField(props, model) {
 	return {
 		displayValue,
 		placeholder,
+		inputMode,
+		autocapitalize,
 		rules,
 		onInput,
 		onCompositionEnd
@@ -2087,7 +2131,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 +2152,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 +2175,8 @@ var mask_field_default = /* @__PURE__ */ defineComponent({
 				"placeholder",
 				"hint",
 				"clearable",
+				"inputmode",
+				"autocapitalize",
 				"onInput",
 				"onCompositionend"
 			]);

package/dist/composables.d.ts

@@ -1,4 +1,4 @@
-import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-CjaJ2WAC.js";
+import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-BbWo6RIy.js";
 import { ComputedRef, MaybeRefOrGetter } from "vue";
 //#region src/composables/dialogs/types.d.ts
 interface ToastOptions {

package/dist/{types-CjaJ2WAC.d.ts → types-BbWo6RIy.d.ts}

@@ -1,3 +1,4 @@
+import { RouteLocationRaw } from "vue-router";
 //#region src/composables/colors/types.d.ts
 type ColorVariant = "primary" | "secondary" | FeedbackColorVariant;
 type FeedbackColorVariant = "positive" | "informative" | "caution" | "danger";
@@ -16,7 +17,7 @@ type ButtonProps = {
   variant?: ButtonVariant;
   /**
    * Applies a distinct behavior to the button.
-   * One of `button` or `submit`.
+   * One of `button` or `submit`. Ignored when `route` is set.
    * @default "button"
    */
   type?: "submit" | "button";
@@ -49,8 +50,16 @@ type ButtonProps = {
   fullWidth?: boolean;
   /**
    * Associated [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/form) id.
+   * Ignored when `route` is set.
    */
   form?: string;
+  /**
+   * Where the button goes when clicked, rendering it as a link with the button's look. A route
+   * inside the app (`"/patients"`, `{ name: "patient", params: { id } }`) navigates through the
+   * app's router; a URL starting with `http` navigates through the browser, in the same tab. While
+   * `disabled` or `loading`, the button doesn't navigate and is rendered as a disabled button.
+   */
+  route?: RouteLocationRaw;
   /**
    * Component id to use on automated tests.
    */

package/package.json

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