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

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

@@ -0,0 +1,120 @@
+import { useTextFieldVariant } from "../../../composables/inputs/fields.js";
+import field_loader_default from "../field-loader.js";
+import { useMaskField } from "../../../composables/inputs/mask-field.js";
+import { createBlock, createVNode, defineComponent, guardReactiveProps, mergeModels, normalizeProps, openBlock, unref, useModel, withCtx } from "vue";
+import { VTextField } from "vuetify/components";
+var mask_field_vue_vue_type_script_setup_true_lang_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, inputMode, autocapitalize, 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: unref(inputMode),
+				autocapitalize: unref(autocapitalize),
+				"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",
+				"inputmode",
+				"autocapitalize",
+				"onInput",
+				"onCompositionend"
+			]);
+		};
+	}
+});
+//#endregion
+export { mask_field_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,118 @@
+import { TextFieldVariant } from "../text-field/types.js";
+//#region src/components/inputs/mask-field/types.d.ts
+export type MaskFieldVariant = TextFieldVariant;
+/**
+ * Masks the library provides:
+ *
+ * - `cpf`: `###.###.###-##` (e.g. `123.456.789-09`);
+ * - `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.
+ */
+export 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º ####";
+ * ```
+ */
+export type MaskFieldMask = MaskFieldPreset | `${string}#${string}`;
+/**
+ * Props exposed by the {@link MaskField} component.
+ */
+export 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, 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.
+   *
+   * 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`, `00.000.000/0000-00` for `cnpj` 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

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

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

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

@@ -0,0 +1,30 @@
+import { TextFieldProps, TextFieldType, TextFieldVariant } from "./types.js";
+//#region src/components/inputs/text-field/text-field.vue.d.ts
+/**
+ * Text field component to be used throughout the application.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *  <u-text-field label="E-mail" type="email" />
+ * <template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/text-field | TextField Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: 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;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<TextFieldProps & {
+  modelValue?: string;
+}> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+  variant: TextFieldVariant;
+  type: TextFieldType;
+  clearable: boolean;
+}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+//#endregion
+export { _default as default };

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

@@ -0,0 +1,119 @@
+import { useTextFieldVariant } from "../../../composables/inputs/fields.js";
+import { useTextFieldAppendIcon, useTextFieldRules, useTextFieldType } from "../../../composables/inputs/text-field.js";
+import field_loader_default from "../field-loader.js";
+import { computed, createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, openBlock, unref, useModel, withCtx } from "vue";
+import { VIcon, VTextField } from "vuetify/components";
+var text_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "text-field",
+	props: /*@__PURE__*/ mergeModels({
+		variant: {
+			type: String,
+			required: false,
+			default: "primary"
+		},
+		type: {
+			type: String,
+			required: false,
+			default: "text"
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		clearable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		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 { isPasswordVisible, iconProps: appendIconProps } = useTextFieldAppendIcon(() => props.type, () => props.disabled);
+		const vuetifyType = useTextFieldType(() => props.type, isPasswordVisible);
+		const rules = useTextFieldRules(props);
+		const computedClearable = computed(() => props.clearable ?? props.type === "search");
+		function clear() {
+			modelValue.value = "";
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VTextField), {
+				modelValue: modelValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				variant: unref(vuetifyVariant),
+				type: unref(vuetifyType),
+				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: props.placeholder,
+				hint: props.hint,
+				clearable: computedClearable.value,
+				"onClick:clear": clear
+			}, createSlots({
+				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
+				_: 2
+			}, [unref(appendIconProps) ? {
+				name: "append-inner",
+				fn: withCtx(() => [createVNode(unref(VIcon), mergeProps(unref(appendIconProps), { disabled: props.disabled }), null, 16, ["disabled"])]),
+				key: "0"
+			} : void 0]), 1032, [
+				"modelValue",
+				"variant",
+				"type",
+				"rules",
+				"data-testid",
+				"disabled",
+				"loading",
+				"aria-busy",
+				"readonly",
+				"label",
+				"placeholder",
+				"hint",
+				"clearable"
+			]);
+		};
+	}
+});
+//#endregion
+export { text_field_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,70 @@
+//#region src/components/inputs/text-field/types.d.ts
+export type TextFieldVariant = "primary" | "secondary";
+export type TextFieldType = "text" | "phone" | "email" | "url" | "password" | "search";
+/**
+ * Props exposed by the {@link TextField} component.
+ */
+export type TextFieldProps = {
+  /**
+   * Applies a distinct style variation to the field.
+   * One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: TextFieldVariant;
+  /**
+   * Applies a distinct behavior to the field.
+   * One of `text`, `phone`, `email`, `url`, `password` or `search`.
+   *
+   * With `password`, the field hides its value and shows a "Mostrar senha"
+   * button that toggles between showing and hiding it. The value hides again
+   * when the button is pressed again or the type changes.
+   * @default "text"
+   */
+  type?: TextFieldType;
+  /**
+   * 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;
+};
+//#endregion

package/dist/components/link/link.js

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

package/dist/components/link/link.vue.d.ts

@@ -0,0 +1,27 @@
+import { LinkProps } from "./types.js";
+//#region src/components/link/link.vue.d.ts
+/**
+ * Standalone text link, such as "Forgot your password?" below a login form.
+ * Routes inside the app navigate through the app's router, and URLs starting
+ * with `http` navigate through the browser, in the same tab.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-link route="/forgot-password">Forgot your password?</u-link>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/link | Link Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<LinkProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<LinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as default };

package/dist/components/link/link.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import useRouteProps, { isExternalRoute } from "../../composables/navigation/use-route-props.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+import { RouterLink } from "vue-router";
+var link_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "link",
+	props: {
+		route: {
+			type: null,
+			required: true
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const routeProps = useRouteProps(() => props.route);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" No Vuetify component renders an inline text link, so the classes remove the browser's underline\n  and set the theme's link color, instead of the browser's blue and purple "), (openBlock(), createBlock(resolveDynamicComponent(unref(isExternalRoute)(props.route) ? "a" : unref(RouterLink)), mergeProps(unref(routeProps), {
+				class: "text-decoration-none text-link",
+				"data-testid": props.dataTestid
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["data-testid"]))], 2112);
+		};
+	}
+});
+//#endregion
+export { link_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/link/types.d.ts

@@ -0,0 +1,18 @@
+import { RouteLocationRaw } from "vue-router";
+//#region src/components/link/types.d.ts
+/**
+ * Props exposed by the {@link Link} component.
+ */
+export type LinkProps = {
+  /**
+   * Where the link goes. A route inside the app (`"/login"`,
+   * `{ name: "forgot-password" }`) navigates through the app's router; a URL
+   * starting with `http` navigates through the browser, in the same tab.
+   */
+  route: RouteLocationRaw;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion

package/dist/components/main/main.js

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

package/dist/components/main/main.vue.d.ts

@@ -0,0 +1,33 @@
+import { MainProps, MainSlots } from "./types.js";
+//#region src/components/main/main.vue.d.ts
+/**
+ * Main component to be placed at the top of the component tree.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *  <u-main>
+ *    <!-- uimed-components -->
+ *  </u-main>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/main | Main Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<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;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<MainProps & {
+  notificationsOpen?: boolean;
+}> & Readonly<{
+  "onUpdate:notificationsOpen"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, MainSlots>;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as default };