@nexdom/uimed-vue 2.0.0-beta.38 → 2.0.0-beta.39

package/dist/components.d.ts

@@ -208,8 +208,8 @@ type MainProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/main | Main Guide}
  */
-declare const _default$13: typeof __VLS_export$18;
-declare const __VLS_export$18: __VLS_WithSlots$11<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<MainProps & {
+declare const _default$13: typeof __VLS_export$19;
+declare const __VLS_export$19: __VLS_WithSlots$11<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<MainProps & {
   notificationsOpen?: boolean;
 }, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
   "update:notificationsOpen": (value: boolean) => any;
@@ -241,8 +241,8 @@ type __VLS_WithSlots$11<T, S> = T & {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/button | Button Guide}
  */
-declare const _default$1: typeof __VLS_export$17;
-declare const __VLS_export$17: __VLS_WithSlots$10<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
+declare const _default$1: typeof __VLS_export$18;
+declare const __VLS_export$18: __VLS_WithSlots$10<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
   click: (event: MouseEvent) => any;
 }, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ButtonProps> & Readonly<{
   onClick?: ((event: MouseEvent) => any) | undefined;
@@ -421,8 +421,8 @@ type AutocompleteFieldProps<T = string, Multiple extends boolean = false> = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/autocomplete-field | AutocompleteField Guide}
  */
-declare const _default: typeof __VLS_export$16;
-declare const __VLS_export$16: <T = string, Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$2<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: typeof __VLS_export$17;
+declare const __VLS_export$17: <T = string, Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$2<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: import("vue").PublicProps & __VLS_PrettifyLocal$2<(AutocompleteFieldProps<T, Multiple> & {
     modelValue?: Multiple extends true ? T[] : T;
   }) & {
@@ -452,8 +452,8 @@ type __VLS_PrettifyLocal$2<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/text-field | TextField Guide}
  */
-declare const _default$18: typeof __VLS_export$15;
-declare const __VLS_export$15: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
+declare const _default$19: typeof __VLS_export$16;
+declare const __VLS_export$16: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
   modelValue?: string;
 }, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
   "update:modelValue": (value: string) => any;
@@ -463,8 +463,8 @@ declare const __VLS_export$15: 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
@@ -515,8 +515,8 @@ type CheckboxProps<T = boolean> = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/checkbox | Checkbox Guide}
  */
-declare const _default$2: typeof __VLS_export$14;
-declare const __VLS_export$14: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$1<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default$2: typeof __VLS_export$15;
+declare const __VLS_export$15: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$1<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: import("vue").PublicProps & __VLS_PrettifyLocal$1<(CheckboxProps<boolean | T> & {
     modelValue?: T;
   }) & {
@@ -632,8 +632,8 @@ type DateTimeFieldProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/date-time-field | DateTimeField Guide}
  */
-declare const _default$7: typeof __VLS_export$13;
-declare const __VLS_export$13: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DateTimeFieldProps & {
+declare const _default$7: typeof __VLS_export$14;
+declare const __VLS_export$14: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DateTimeFieldProps & {
   modelValue?: string;
 }, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
   "update:modelValue": (value: string) => any;
@@ -646,6 +646,142 @@ declare const __VLS_export$13: import("vue", { with: { "resolution-mode": "impor
   type: DateTimeFieldType;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
+//#region src/components/inputs/mask-field/types.d.ts
+type MaskFieldVariant = TextFieldVariant;
+/**
+ * Masks the library provides:
+ *
+ * - `cpf`: `###.###.###-##` (e.g. `123.456.789-09`);
+ * - `cnpj`: `##.###.###/####-##` (e.g. `12.345.678/0001-95`);
+ * - `cep`: `#####-###` (e.g. `01310-100`);
+ * - `phone`: `(##) #####-####` (e.g. `(11) 91234-5678`);
+ * - `date`: `##/##/####` (e.g. `31/12/2026`), formatting only.
+ */
+type MaskFieldPreset = "cpf" | "cnpj" | "cep" | "phone" | "date";
+/**
+ * A preset name, or the mask itself, where `#` is a digit (0–9) and any other
+ * character, letters included, is a literal inserted automatically (e.g.
+ * `####-##/####` or `Nº ####`).
+ *
+ * A custom mask must contain at least one `#`, so a misspelled preset (e.g.
+ * `"cpff"`) is a type error.
+ *
+ * @example
+ * ```ts
+ * const preset: MaskFieldMask = "cpf";
+ * const custom: MaskFieldMask = "####-##/####";
+ * const withLetters: MaskFieldMask = "Nº ####";
+ * ```
+ */
+type MaskFieldMask = MaskFieldPreset | `${string}#${string}`;
+/**
+ * Props exposed by the {@link MaskField} component.
+ */
+type MaskFieldProps = {
+  /**
+   * Applies a distinct style variation to the field.
+   * One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: MaskFieldVariant;
+  /**
+   * Mask applied to the value while the user types. One of the presets
+   * (`cpf`, `cnpj`, `cep`, `phone` or `date`), or the mask itself, where `#`
+   * is a digit (0–9) and any other character, letters included, is a literal
+   * 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.
+   *
+   * The `cpf` and `cnpj` masks don't validate check digits, and `cnpj` only
+   * accepts digits (not the alphanumeric CNPJ).
+   *
+   * 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
+   * inválido".
+   */
+  mask: MaskFieldMask;
+  /**
+   * Removes the ability to click or target the field.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Displays a loading indicator on the input. The field keeps its label as
+   * accessible name and is marked as busy, and assistive technologies ignore
+   * the indicator.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Displays clear action.
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * Prevent value changes.
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * Add `rules` to require field to be filled before form submission.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Field label.
+   */
+  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º ####`.
+   */
+  placeholder?: string;
+  /**
+   * Field message to show and direct user to fill field correctly.
+   *
+   * This message will be replaced when there's an error message to be shown.
+   */
+  hint?: string;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#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.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *  <u-mask-field v-model="cpf" label="CPF" mask="cpf" />
+ *  <u-mask-field v-model="protocol" label="Protocolo" mask="####-##/####" />
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/mask-field | MaskField Guide}
+ */
+declare const _default$14: typeof __VLS_export$13;
+declare const __VLS_export$13: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<MaskFieldProps & {
+  modelValue?: string;
+}, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
+  "update:modelValue": (value: string) => any;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<MaskFieldProps & {
+  modelValue?: string;
+}> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+  variant: MaskFieldVariant;
+}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+//#endregion
 //#region src/components/grid/container/types.d.ts
 /**
  * Props exposed by the {@link Container} component.
@@ -779,7 +915,7 @@ type RowProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
  */
-declare const _default$14: typeof __VLS_export$11;
+declare const _default$15: typeof __VLS_export$11;
 declare const __VLS_export$11: __VLS_WithSlots$8<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RowProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<RowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
@@ -908,7 +1044,7 @@ type __VLS_WithSlots$6<T, S> = T & {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$16: typeof __VLS_export$8;
+declare const _default$17: typeof __VLS_export$8;
 declare const __VLS_export$8: __VLS_WithSlots$5<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{}, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, true, {}, any>, {
   default?: (props: {}) => any;
 }>;
@@ -1013,7 +1149,7 @@ interface SectionAction extends ButtonProps {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$15: typeof __VLS_export$7;
+declare const _default$16: typeof __VLS_export$7;
 declare const __VLS_export$7: __VLS_WithSlots$4<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<SectionProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<SectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
@@ -1088,7 +1224,7 @@ type TableProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/table | Table Guide}
  */
-declare const _default$17: typeof __VLS_export$6;
+declare const _default$18: typeof __VLS_export$6;
 declare const __VLS_export$6: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TableProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<TableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/details/types.d.ts
@@ -1519,4 +1655,4 @@ type __VLS_WithSlots<T, S> = T & {
   };
 };
 //#endregion
-export { _default as UAutocompleteField, _default$1 as UButton, _default$2 as UCheckbox, _default$3 as UColumn, _default$4 as UContainer, _default$5 as UDataSet, _default$6 as UDataSetItem, _default$7 as UDateTimeField, _default$8 as UDetails, _default$9 as UDialog, _default$10 as UForm, _default$11 as UImg, _default$12 as ULink, _default$13 as UMain, _default$14 as URow, _default$15 as USection, _default$16 as USectionContent, _default$17 as UTable, _default$18 as UTextField };
+export { _default as UAutocompleteField, _default$1 as UButton, _default$2 as UCheckbox, _default$3 as UColumn, _default$4 as UContainer, _default$5 as UDataSet, _default$6 as UDataSetItem, _default$7 as UDateTimeField, _default$8 as UDetails, _default$9 as UDialog, _default$10 as UForm, _default$11 as UImg, _default$12 as ULink, _default$13 as UMain, _default$14 as UMaskField, _default$15 as URow, _default$16 as USection, _default$17 as USectionContent, _default$18 as UTable, _default$19 as UTextField };

package/dist/components.js

@@ -1,4 +1,5 @@
 import { a as messages, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
+import { useMask } from "vuetify";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 import { pt } from "vuetify/locale";
 import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VFooter, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressCircular, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
@@ -1833,6 +1834,228 @@ 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`).
+*/
+const maskFieldPresets = {
+	cpf: "###.###.###-##",
+	cnpj: "##.###.###/####-##",
+	cep: "#####-###",
+	phone: "(##) #####-####",
+	date: "##/##/####"
+};
+/**
+* Returns the mask of a preset, or the given mask itself 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;
+}
+/**
+* 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.
+*/
+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`).
+*/
+function getMaskPlaceholder(mask) {
+	return mask.replaceAll("#", "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`).
+*
+* 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.
+*/
+function useMaskField(props, model) {
+	const mask = computed(() => resolveMask(props.mask));
+	const digitCount = computed(() => mask.value.split("#").length - 1);
+	const vuetifyMask = useMask({ get mask() {
+		return {
+			mask: toVuetifyMask(mask.value),
+			tokens: {}
+		};
+	} });
+	const displayValue = computed(() => vuetifyMask.mask(unmask(model.value)));
+	const placeholder = computed(() => props.placeholder ?? getMaskPlaceholder(mask.value));
+	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"
+	]);
+	function unmask(text) {
+		return vuetifyMask.unmask(text) ?? "";
+	}
+	function isComplete(value) {
+		return unmask(vuetifyMask.mask(value)).length === digitCount.value;
+	}
+	/**
+	* 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).
+	*/
+	function findCaret(masked, valueLength, deletedBackwards) {
+		let caret = 0;
+		let found = 0;
+		while (found < valueLength) {
+			if (!vuetifyMask.isDelimiter(masked, caret)) found++;
+			caret++;
+		}
+		if (!deletedBackwards) while (vuetifyMask.isDelimiter(masked, caret)) caret++;
+		return caret;
+	}
+	function update(input, deletedBackwards) {
+		const caret = input.selectionStart ?? input.value.length;
+		const masked = vuetifyMask.mask(unmask(input.value));
+		const newCaret = findCaret(masked, unmask(vuetifyMask.mask(unmask(input.value.slice(0, caret)))).length, deletedBackwards);
+		const value = unmask(masked);
+		input.value = masked;
+		input.setSelectionRange(newCaret, newCaret);
+		if (value !== unmask(displayValue.value)) model.value = value;
+	}
+	function onInput(event) {
+		if (!event.isComposing) update(event.target, event.inputType.endsWith("Backward"));
+	}
+	function onCompositionEnd(event) {
+		update(event.target, false);
+	}
+	return {
+		displayValue,
+		placeholder,
+		rules,
+		onInput,
+		onCompositionEnd
+	};
+}
+//#endregion
+//#region src/components/inputs/mask-field/mask-field.vue
+var mask_field_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "mask-field",
+	props: /*@__PURE__*/ mergeModels({
+		variant: {
+			type: String,
+			required: false,
+			default: "primary"
+		},
+		mask: {
+			type: null,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		clearable: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		hint: {
+			type: String,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	}, {
+		"modelValue": {
+			type: String,
+			default: ""
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const props = __props;
+		const vuetifyVariant = useTextFieldVariant(() => props.variant);
+		const { displayValue, placeholder, rules, onInput, onCompositionEnd } = useMaskField(props, modelValue);
+		function keepFieldControlled() {}
+		function clear() {
+			modelValue.value = "";
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VTextField), {
+				"model-value": unref(displayValue),
+				"validation-value": modelValue.value,
+				variant: unref(vuetifyVariant),
+				rules: unref(rules),
+				"data-testid": props.dataTestid,
+				disabled: props.disabled,
+				loading: props.loading,
+				"aria-busy": props.loading || void 0,
+				readonly: props.readonly,
+				label: props.label,
+				placeholder: unref(placeholder),
+				hint: props.hint,
+				clearable: props.clearable,
+				type: "text",
+				inputmode: "numeric",
+				"onUpdate:modelValue": keepFieldControlled,
+				onInput: unref(onInput),
+				onCompositionend: unref(onCompositionEnd),
+				"onClick:clear": clear
+			}, {
+				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"validation-value",
+				"variant",
+				"rules",
+				"data-testid",
+				"disabled",
+				"loading",
+				"aria-busy",
+				"readonly",
+				"label",
+				"placeholder",
+				"hint",
+				"clearable",
+				"onInput",
+				"onCompositionend"
+			]);
+		};
+	}
+});
+//#endregion
 //#region src/composables/alignment/alignment.ts
 const alignXToClass = {
 	start: "justify-start",
@@ -2679,4 +2902,4 @@ var data_set_item_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { autocomplete_field_default as UAutocompleteField, button_default as UButton, checkbox_default as UCheckbox, column_default as UColumn, container_default as UContainer, data_set_default as UDataSet, data_set_item_default as UDataSetItem, date_time_field_default as UDateTimeField, details_default as UDetails, dialog_default as UDialog, form_default as UForm, img_default as UImg, link_default as ULink, main_default as UMain, row_default as URow, section_default as USection, section_content_default as USectionContent, table_default as UTable, text_field_default as UTextField };
+export { autocomplete_field_default as UAutocompleteField, button_default as UButton, checkbox_default as UCheckbox, column_default as UColumn, container_default as UContainer, data_set_default as UDataSet, data_set_item_default as UDataSetItem, date_time_field_default as UDateTimeField, details_default as UDetails, dialog_default as UDialog, form_default as UForm, img_default as UImg, link_default as ULink, main_default as UMain, mask_field_default as UMaskField, row_default as URow, section_default as USection, section_content_default as USectionContent, table_default as UTable, text_field_default as UTextField };

package/package.json

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