@nexdom/uimed-vue 2.0.0-beta.8 → 2.0.0

package/dist/components/inputs/autocomplete-field/types.d.ts

@@ -0,0 +1,84 @@
+import { TextFieldVariant } from "../text-field/types.js";
+//#region src/components/inputs/autocomplete-field/types.d.ts
+/**
+ * Autocomplete/Combobox item type that can be either a string or an object with label and value.
+ */
+export type AutocompleteItem<T = string> = string | {
+  label: string;
+  value: T;
+};
+/**
+ * Props exposed by the {@link AutocompleteField} component.
+ */
+export type AutocompleteFieldProps<T = string, Multiple extends boolean = false> = {
+  /**
+   * Applies a distinct style variation to the field.
+   * One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: TextFieldVariant;
+  /**
+   * 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.
+   */
+  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;
+  /**
+   * Used to prevent user from adding new values to the list.
+   * @default false
+   */
+  strict?: boolean;
+  /**
+   * Allow selecting/typing more than one value.
+   *
+   * Passing the literal `true` narrows `modelValue` and `update:modelValue`
+   * to `T[]` instead of `T`.
+   * @default false
+   */
+  multiple?: Multiple;
+  /**
+   * List of autocomplete items. Can be strings or objects with label and value.
+   * @default []
+   */
+  items?: AutocompleteItem<T>[];
+};
+//#endregion

package/dist/components/inputs/checkbox/checkbox.js

@@ -0,0 +1,5 @@
+import checkbox_vue_vue_type_script_setup_true_lang_default from "./checkbox.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/inputs/checkbox/checkbox.vue
+var checkbox_default = checkbox_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { checkbox_default as default };

package/dist/components/inputs/checkbox/checkbox.vue.d.ts

@@ -0,0 +1,33 @@
+import { CheckboxProps } from "./types.js";
+//#region src/components/inputs/checkbox/checkbox.vue.d.ts
+/**
+ * Checkbox component to be used throughout the application.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *  <u-checkbox label="Aceito os termos" />
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/checkbox | Checkbox Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<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<(CheckboxProps<boolean | T> & {
+    modelValue?: T;
+  }) & {
+    "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: {};
+  emit: (event: "update:modelValue", value: T) => void;
+}>) => import("vue").VNode & {
+  __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
+//#endregion
+export { _default as default };

package/dist/components/inputs/checkbox/checkbox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,71 @@
+import { createBlock, defineComponent, mergeModels, openBlock, unref, useModel } from "vue";
+import { VCheckboxBtn } from "vuetify/components";
+var checkbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "checkbox",
+	props: /*@__PURE__*/ mergeModels({
+		label: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		trueValue: {
+			type: Boolean,
+			required: false,
+			skipCheck: true,
+			default: true
+		},
+		falseValue: {
+			type: Boolean,
+			required: false,
+			skipCheck: true,
+			default: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	}, {
+		"modelValue": {
+			type: null,
+			default: (props) => props.falseValue
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const modelValue = useModel(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VCheckboxBtn), {
+				modelValue: modelValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				"true-value": props.trueValue,
+				"false-value": props.falseValue,
+				"data-testid": props.dataTestid,
+				disabled: props.disabled,
+				readonly: props.readonly,
+				label: props.label,
+				class: "flex-0-1",
+				"hide-details": ""
+			}, null, 8, [
+				"modelValue",
+				"true-value",
+				"false-value",
+				"data-testid",
+				"disabled",
+				"readonly",
+				"label"
+			]);
+		};
+	}
+});
+//#endregion
+export { checkbox_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/inputs/checkbox/types.d.ts

@@ -0,0 +1,35 @@
+//#region src/components/inputs/checkbox/types.d.ts
+/**
+ * Props exposed by the {@link Checkbox} component.
+ */
+export type CheckboxProps<T = boolean> = {
+  /**
+   * Field label.
+   */
+  label?: string;
+  /**
+   * Removes the ability to click or target the checkbox.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Prevent value changes.
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * Value applied to the model when the checkbox is checked.
+   * @default true
+   */
+  trueValue?: T;
+  /**
+   * Value applied to the model when the checkbox is unchecked.
+   * @default false
+   */
+  falseValue?: T;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion

package/dist/components/inputs/date-time-field/date-time-field.js

@@ -0,0 +1,5 @@
+import date_time_field_vue_vue_type_script_setup_true_lang_default from "./date-time-field.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/inputs/date-time-field/date-time-field.vue
+var date_time_field_default = date_time_field_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { date_time_field_default as default };

package/dist/components/inputs/date-time-field/date-time-field.vue.d.ts

@@ -0,0 +1,32 @@
+import { DateTimeFieldProps, DateTimeFieldType, DateTimeFieldVariant } from "./types.js";
+//#region src/components/inputs/date-time-field/date-time-field.vue.d.ts
+/**
+ * Date and/or time field component to be used throughout the application.
+ *
+ * Its value uses the native input formats: `YYYY-MM-DD` for `date`, `HH:mm`
+ * for `time` and `YYYY-MM-DDTHH:mm` for `datetime`.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *  <u-date-time-field v-model="birthDate" label="Data de nascimento" type="date" />
+ * <template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/date-time-field | DateTimeField Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: 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;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<DateTimeFieldProps & {
+  modelValue?: string;
+}> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+  variant: DateTimeFieldVariant;
+  type: DateTimeFieldType;
+}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+//#endregion
+export { _default as default };

package/dist/components/inputs/date-time-field/date-time-field.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,205 @@
+import { useTextFieldVariant } from "../../../composables/inputs/fields.js";
+import field_loader_default from "../field-loader.js";
+import { formatDateTime as formatDateTime$1, getDatePart, getTimePart, joinDateTime, useDateTimeFieldMenu, useDateTimeFieldPickerBounds, useDateTimeFieldRules } from "../../../composables/inputs/date-time-field.js";
+import { computed, createBlock, createCommentVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, normalizeProps, openBlock, ref, unref, useModel, watch, withCtx } from "vue";
+import { pt } from "vuetify/locale";
+import { VCard, VDatePicker, VLocaleProvider, VMenu, VTextField, VTimePicker } from "vuetify/components";
+import { formatDateTime } from "@nexdom/shared/utils";
+var date_time_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "date-time-field",
+	props: /*@__PURE__*/ mergeModels({
+		variant: {
+			type: String,
+			required: false,
+			default: "primary"
+		},
+		type: {
+			type: String,
+			required: false,
+			default: "datetime"
+		},
+		min: {
+			type: String,
+			required: false
+		},
+		max: {
+			type: String,
+			required: false
+		},
+		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 messages = { "pt-BR": pt };
+		const vuetifyVariant = useTextFieldVariant(() => props.variant);
+		const rules = useDateTimeFieldRules(props);
+		const displayValue = computed(() => formatDateTime$1(modelValue.value, props.type));
+		const isClearable = computed(() => props.clearable && !props.readonly);
+		const isMenuDisabled = computed(() => props.disabled || props.readonly);
+		const isMenuOpen = ref(false);
+		const draft = ref({});
+		const draftDate = computed(() => draft.value.date ?? getDatePart(modelValue.value, props.type));
+		const draftTime = computed(() => draft.value.time ?? getTimePart(modelValue.value, props.type));
+		const draftValue = computed(() => joinDateTime(props.type, draftDate.value, draftTime.value));
+		const bounds = useDateTimeFieldPickerBounds(props, draftDate);
+		const { inputId, activator, activatorProps, contentProps, open: openMenu } = useDateTimeFieldMenu(isMenuOpen, isMenuDisabled, () => !!props.label);
+		watch(isMenuOpen, () => {
+			draft.value = {};
+		});
+		function onDateUpdate(date) {
+			draft.value.date = formatDateTime(date, "YYYY-MM-DD");
+			commitDraft();
+			closeIfComplete();
+		}
+		function onTimeUpdate(time) {
+			draft.value.time = time ?? "";
+			commitDraft();
+		}
+		function commitDraft() {
+			if (draftValue.value) modelValue.value = draftValue.value;
+		}
+		function closeIfComplete() {
+			if (draftValue.value) isMenuOpen.value = false;
+		}
+		function clear() {
+			modelValue.value = "";
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VTextField), {
+				id: unref(inputId),
+				"model-value": displayValue.value,
+				"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,
+				label: props.label,
+				placeholder: props.placeholder,
+				hint: props.hint,
+				clearable: isClearable.value,
+				readonly: "",
+				"onClick:clear": clear,
+				"onClick:control": unref(openMenu)
+			}, {
+				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
+				default: withCtx(() => [createVNode(unref(VMenu), {
+					modelValue: isMenuOpen.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event),
+					activator: unref(activator),
+					target: "parent",
+					"activator-props": unref(activatorProps),
+					"content-props": unref(contentProps),
+					location: "bottom start",
+					"min-width": "0",
+					disabled: isMenuDisabled.value,
+					"close-on-content-click": false
+				}, {
+					default: withCtx(() => [createVNode(unref(VCard), null, {
+						default: withCtx(() => [createVNode(unref(VLocaleProvider), {
+							locale: "pt-BR",
+							messages,
+							class: "d-flex flex-wrap"
+						}, {
+							default: withCtx(() => [props.type !== "time" ? (openBlock(), createBlock(unref(VDatePicker), {
+								key: 0,
+								"model-value": draftDate.value || null,
+								min: unref(bounds).dateMin,
+								max: unref(bounds).dateMax,
+								"onUpdate:modelValue": onDateUpdate
+							}, null, 8, [
+								"model-value",
+								"min",
+								"max"
+							])) : createCommentVNode("v-if", true), props.type !== "date" ? (openBlock(), createBlock(unref(VTimePicker), {
+								key: 1,
+								"model-value": draftTime.value,
+								min: unref(bounds).timeMin,
+								max: unref(bounds).timeMax,
+								format: "24hr",
+								"onUpdate:modelValue": onTimeUpdate,
+								"onUpdate:minute": closeIfComplete
+							}, null, 8, [
+								"model-value",
+								"min",
+								"max"
+							])) : createCommentVNode("v-if", true)]),
+							_: 1
+						})]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, [
+					"modelValue",
+					"activator",
+					"activator-props",
+					"content-props",
+					"disabled"
+				])]),
+				_: 1
+			}, 8, [
+				"id",
+				"model-value",
+				"validation-value",
+				"variant",
+				"rules",
+				"data-testid",
+				"disabled",
+				"loading",
+				"aria-busy",
+				"label",
+				"placeholder",
+				"hint",
+				"clearable",
+				"onClick:control"
+			]);
+		};
+	}
+});
+//#endregion
+export { date_time_field_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/inputs/date-time-field/types.d.ts

@@ -0,0 +1,84 @@
+import { TextFieldVariant } from "../text-field/types.js";
+//#region src/components/inputs/date-time-field/types.d.ts
+export type DateTimeFieldVariant = TextFieldVariant;
+export type DateTimeFieldType = "date" | "time" | "datetime";
+/**
+ * Props exposed by the {@link DateTimeField} component.
+ */
+export type DateTimeFieldProps = {
+  /**
+   * Applies a distinct style variation to the field.
+   * One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: DateTimeFieldVariant;
+  /**
+   * Defines which pickers are available and the format of the value.
+   *
+   * - `date`: value formatted as `YYYY-MM-DD` (e.g. `2026-09-24`);
+   * - `time`: value formatted as `HH:mm`, 24h (e.g. `14:30`);
+   * - `datetime`: value formatted as `YYYY-MM-DDTHH:mm` (e.g. `2026-09-24T14:30`).
+   * @default "datetime"
+   */
+  type?: DateTimeFieldType;
+  /**
+   * Minimum allowed value, in the same format as the value for the current `type`.
+   *
+   * Earlier options can't be picked, and an earlier value shows an error message.
+   * For `datetime`, the time limit only applies to the minimum's own date.
+   */
+  min?: string;
+  /**
+   * Maximum allowed value, in the same format as the value for the current `type`.
+   *
+   * Later options can't be picked, and a later value shows an error message.
+   * For `datetime`, the time limit only applies to the maximum's own date.
+   */
+  max?: string;
+  /**
+   * 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, which is hidden while the field is `readonly`.
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * Prevent value changes. The pickers won't open.
+   * @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.
+   */
+  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

package/dist/components/inputs/field-loader.js

@@ -0,0 +1,5 @@
+import field_loader_vue_vue_type_script_setup_true_lang_default from "./field-loader.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/inputs/field-loader.vue
+var field_loader_default = field_loader_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { field_loader_default as default };

package/dist/components/inputs/field-loader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+import { createBlock, defineComponent, openBlock, unref } from "vue";
+import { VProgressLinear } from "vuetify/components";
+var field_loader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "field-loader",
+	props: {
+		color: {
+			type: String,
+			required: false
+		},
+		isActive: {
+			type: Boolean,
+			required: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VProgressLinear), {
+				active: props.isActive,
+				color: props.color,
+				height: "2",
+				indeterminate: "",
+				"aria-hidden": "true"
+			}, null, 8, ["active", "color"]);
+		};
+	}
+});
+//#endregion
+export { field_loader_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/inputs/mask-field/mask-field.js

@@ -0,0 +1,5 @@
+import mask_field_vue_vue_type_script_setup_true_lang_default from "./mask-field.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/inputs/mask-field/mask-field.vue
+var mask_field_default = mask_field_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { mask_field_default as default };

package/dist/components/inputs/mask-field/mask-field.vue.d.ts

@@ -0,0 +1,32 @@
+import { MaskFieldProps, MaskFieldVariant } from "./types.js";
+//#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
+ * (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
+ * <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: typeof __VLS_export;
+declare const __VLS_export: 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
+export { _default as default };