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

package/dist/composables/dialogs/use-dialog.js

@@ -0,0 +1,73 @@
+import { ref } from "vue";
+//#region src/composables/dialogs/use-dialog.ts
+/**
+* Dialogs waiting to be displayed, shared by `useDialog` and `useConfirm`. The first one is the
+* dialog on display (or about to be).
+*/
+const requests = ref([]);
+/**
+* Mounted `Dialog` components, in mounting order. Only the first one displays dialogs, so pages
+* with more than one `UMain` don't display duplicates.
+*/
+const owners = ref([]);
+/**
+* Queues a dialog and resolves with what `onSelect` returns for the clicked action's value
+* (`undefined` when the dialog is dismissed).
+*/
+function openDialog(options, onSelect) {
+	const { actions, ...content } = options;
+	const lastIndex = actions.length - 1;
+	return new Promise((resolve) => {
+		requests.value.push({
+			...content,
+			actions: actions.map((action, index) => ({
+				...action,
+				variant: action.variant ?? (index === lastIndex ? "primary" : "ghost")
+			})),
+			async select(value) {
+				resolve(await onSelect(value));
+			}
+		});
+	});
+}
+/**
+* Composable which returns a function to display dialogs.
+*
+* @example
+* ```ts
+* const { dialog } = useDialog();
+*
+* const answer = await dialog({
+*   title: "Sessão expirando",
+*   message: "Deseja continuar conectado?",
+*   actions: [
+*     { text: "Sair", value: "leave" },
+*     { text: "Continuar", value: "stay" },
+*   ],
+* });
+* ```
+*/
+function useDialog() {
+	return { dialog };
+}
+/**
+* Displays a dialog. Dialogs are displayed one at a time, in the order they were requested.
+* @param {DialogOptions} options - Options for the dialog.
+* @returns the `value` of the clicked action, or `undefined` when the dialog is closed by the
+* default action, the `Esc` key, a click outside it or the browser's back button.
+*
+* @example
+* ```ts
+* await dialog({ title: "Aviso", message: "Seu cadastro foi enviado para análise." });
+* ```
+*/
+function dialog(options) {
+	return openDialog({
+		title: options.title,
+		message: options.message,
+		role: "dialog",
+		actions: options.actions ?? [{ text: "Fechar" }]
+	}, (value) => value);
+}
+//#endregion
+export { useDialog as default, openDialog, owners, requests };

package/dist/composables/dialogs/use-run-or-toast.d.ts

@@ -0,0 +1,27 @@
+//#region src/composables/dialogs/use-run-or-toast.d.ts
+/**
+ * Generate `run` method and a computed property `isRunning`.
+ * Calling `run` will  reactively update `isRunning`.
+ *
+ * @example
+ * ```ts
+ * const { run, isRunning } = useRunOrToast();
+ *
+ * // Logs: false
+ * console.log(isRunning.value);
+ *
+ * const promise = run(() => someFunction(param1, param2));
+ *
+ * // Logs: true
+ * console.log(isRunning.value);
+ *
+ * await promise;
+ * // Logs: false
+ * console.log(isRunning.value);
+ * ```
+ */
+export default function useRunOrToast(): {
+  run: <T extends (...args: Parameters<T>) => PromiseLike<Awaited<ReturnType<T>>>>(toRun: T, ...params: Parameters<T>) => Promise<Awaited<ReturnType<T>> | false>;
+  isRunning: import("vue").ComputedRef<boolean>;
+};
+//#endregion

package/dist/composables/dialogs/use-run-or-toast.js

@@ -0,0 +1,65 @@
+import useToast from "./use-toast.js";
+import { computed, ref } from "vue";
+//#region src/composables/dialogs/use-run-or-toast.ts
+const { toast } = useToast();
+/**
+* Generate `run` method and a computed property `isRunning`.
+* Calling `run` will  reactively update `isRunning`.
+*
+* @example
+* ```ts
+* const { run, isRunning } = useRunOrToast();
+*
+* // Logs: false
+* console.log(isRunning.value);
+*
+* const promise = run(() => someFunction(param1, param2));
+*
+* // Logs: true
+* console.log(isRunning.value);
+*
+* await promise;
+* // Logs: false
+* console.log(isRunning.value);
+* ```
+*/
+function useRunOrToast() {
+	const running = ref(false);
+	const isRunning = computed(() => running.value);
+	/**
+	* Receives a function and its parameters, runs it, and if it throws an error, shows a toast with the error message.
+	* @returns the function returned value or `false` on error
+	*
+	* @example
+	* ```ts
+	* const { run, isRunning } = useRunOrToast();
+	*
+	* // Call like this:
+	* const someFunctionResult1 = await run(() => someFunction(param1, param2));
+	*
+	* // Or this:
+	* const someFunctionResult2 = await run(someFunction, param1, param2);
+	* ```
+	*/
+	async function run(toRun, ...params) {
+		try {
+			running.value = true;
+			return await toRun(...params);
+		} catch (error) {
+			if (error instanceof Error) toast({
+				message: error.message,
+				color: "danger"
+			});
+			else console.error(error);
+			return false;
+		} finally {
+			running.value = false;
+		}
+	}
+	return {
+		run,
+		isRunning
+	};
+}
+//#endregion
+export { useRunOrToast as default };

package/dist/composables/dialogs/use-toast.d.ts

@@ -0,0 +1,25 @@
+import { ToastOptions } from "./types.js";
+//#region src/composables/dialogs/use-toast.d.ts
+/**
+ * Composable which returns a function to display toast messages.
+ *
+ * @example
+ * ```ts
+ * const { toast } = useToast();
+ * toast({ message: "Hello, World!" });
+ * ```
+ */
+export default function useToast(): {
+  toast: typeof toast;
+};
+/**
+ * Displays a toast message.
+ * @param {ToastOptions} options - Options for the toast message.
+ *
+ * @example
+ * ```ts
+ * toast({ message: "Hello, World!" });
+ * ```
+ */
+declare function toast(options: ToastOptions): void;
+//#endregion

package/dist/composables/dialogs/use-toast.js

@@ -0,0 +1,39 @@
+import { icons } from "../../consts/icons.js";
+import { feedbackColorToVuetifyColor } from "../colors/constants.js";
+import { ref } from "vue";
+//#region src/composables/dialogs/use-toast.ts
+const messages = ref([]);
+/**
+* Composable which returns a function to display toast messages.
+*
+* @example
+* ```ts
+* const { toast } = useToast();
+* toast({ message: "Hello, World!" });
+* ```
+*/
+function useToast() {
+	return { toast };
+}
+/**
+* Displays a toast message.
+* @param {ToastOptions} options - Options for the toast message.
+*
+* @example
+* ```ts
+* toast({ message: "Hello, World!" });
+* ```
+*/
+function toast(options) {
+	const text = options.message;
+	const color = feedbackColorToVuetifyColor[options.color ?? "informative"];
+	const toastMessage = {
+		text,
+		color,
+		prependIcon: icons[color],
+		timerColor: `rgb(var(--v-theme-on-${color}))`
+	};
+	messages.value.push(toastMessage);
+}
+//#endregion
+export { useToast as default, messages };

package/dist/composables/dimensions/dimensions.js

@@ -0,0 +1,18 @@
+import { computed, toValue } from "vue";
+//#region src/composables/dimensions/dimensions.ts
+/**
+* Vuetify's utility class that stretches a component to the whole width of its parent, for
+* components with a `fullWidth` prop.
+*/
+function useFullWidth(fullWidth) {
+	return computed(() => toValue(fullWidth) ? "w-100" : void 0);
+}
+/**
+* Vuetify's utility class that stretches a component to the whole height of its parent, for
+* components with a `fullHeight` prop. The parent must have a height of its own.
+*/
+function useFullHeight(fullHeight) {
+	return computed(() => toValue(fullHeight) ? "h-100" : void 0);
+}
+//#endregion
+export { useFullHeight, useFullWidth };

package/dist/composables/inputs/autocomplete-field.js

@@ -0,0 +1,39 @@
+import { createRequiredRule } from "./fields.js";
+import { computed, toValue } from "vue";
+import { isEmpty } from "@nexdom/shared/utils";
+//#region src/composables/inputs/autocomplete-field.ts
+function createAutocompleteRequiredRule(options) {
+	return createRequiredRule(options.required, (value) => {
+		if (options.multiple) return (Array.isArray(value) ? value : []).length > 0;
+		return !isEmpty(String(value ?? ""));
+	});
+}
+function useAutocompleteRules(options) {
+	return computed(() => {
+		const opts = toValue(options);
+		const rules = [];
+		if (opts.required) rules.push(createAutocompleteRequiredRule(opts));
+		return rules;
+	});
+}
+/**
+* Menu props that keep the combobox semantics only on the field's `<input>`.
+*
+* The field's container gets `role="combobox"` from the field, which passes its
+* role to both the container and the input, and the menu's ARIA attributes,
+* since it's the menu's activator. Without these props, the container is
+* exposed as an unnamed combobox wrapping the input. The menu removes from its
+* activator the attributes set to `undefined`, role included, and the field
+* never sets that role again, since its value doesn't change. The input keeps
+* its role, label, `aria-expanded` and `aria-controls`. This only happens in
+* the browser: server-rendered HTML still has the role on the container.
+*/
+const autocompleteFieldMenuProps = { activatorProps: {
+	role: void 0,
+	"aria-haspopup": void 0,
+	"aria-expanded": void 0,
+	"aria-controls": void 0,
+	"aria-owns": void 0
+} };
+//#endregion
+export { autocompleteFieldMenuProps, createAutocompleteRequiredRule, useAutocompleteRules };

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

@@ -0,0 +1,109 @@
+import { useRules } from "./fields.js";
+import { computed, toValue, useId } from "vue";
+//#region src/composables/inputs/date-time-field.ts
+/**
+* The menu's content is a dialog with the pickers. `aria-owns` is removed since the input can't
+* own the content, and the menu still adds `aria-expanded` and `aria-controls`.
+*/
+const activatorProps = {
+	role: "combobox",
+	"aria-haspopup": "dialog",
+	"aria-owns": void 0
+};
+/**
+* Extracts the date part (`YYYY-MM-DD`) of a value, or an empty string when
+* the type has no date.
+*/
+function getDatePart(value, type) {
+	return type === "time" ? "" : value.split("T")[0];
+}
+/**
+* Extracts the time part (`HH:mm`) of a value, or an empty string when the
+* value has no time.
+*/
+function getTimePart(value, type) {
+	if (type === "time") return value;
+	const [, time = ""] = value.split("T");
+	return time;
+}
+/**
+* Builds a value for the given type, or an empty string while any required
+* part is missing.
+*/
+function joinDateTime(type, date, time) {
+	if (type === "date") return date;
+	if (type === "time") return time;
+	return date && time ? `${date}T${time}` : "";
+}
+/**
+* Formats a value to be displayed in pt-BR, like `24/09/2026`, `14:30` or
+* `24/09/2026 14:30`.
+*/
+function formatDateTime(value, type) {
+	return [getDatePart(value, type).split("-").reverse().join("/"), getTimePart(value, type)].filter(Boolean).join(" ");
+}
+function useDateTimeFieldRules(props) {
+	const defaultRules = useRules(props);
+	return computed(() => {
+		const rules = [...defaultRules.value];
+		if (props.min) rules.push(minRule(props.min, props.type));
+		if (props.max) rules.push(maxRule(props.max, props.type));
+		return rules;
+	});
+}
+/**
+* Computes the limits of each picker. For `datetime`, time limits only apply
+* when the selected date is the limit's own date.
+*/
+function useDateTimeFieldPickerBounds(props, selectedDate) {
+	return computed(() => {
+		const min = props.min ?? "";
+		const max = props.max ?? "";
+		const date = toValue(selectedDate);
+		return {
+			dateMin: getDatePart(min, props.type),
+			dateMax: getDatePart(max, props.type),
+			timeMin: getTimeBound(min, props.type, date),
+			timeMax: getTimeBound(max, props.type, date)
+		};
+	});
+}
+/**
+* Makes the field's input the activator of the pickers' menu, so the menu's attributes are on an
+* element whose role accepts them.
+* @param isOpen - Whether the menu is open.
+* @param isDisabled - Whether the menu can't open, as when the field is disabled or readonly.
+* @param hasLabel - Whether the field has a label, which names the menu's dialog.
+*/
+function useDateTimeFieldMenu(isOpen, isDisabled, hasLabel) {
+	const inputId = useId();
+	const activator = computed(() => toValue(isDisabled) ? void 0 : `#${inputId}`);
+	const contentProps = computed(() => ({
+		role: "dialog",
+		"aria-labelledby": toValue(hasLabel) ? `${inputId}-label` : void 0
+	}));
+	function open() {
+		if (!toValue(isDisabled)) isOpen.value = true;
+	}
+	return {
+		inputId,
+		activator,
+		activatorProps,
+		contentProps,
+		open
+	};
+}
+function getTimeBound(bound, type, selectedDate) {
+	if (type === "datetime" && getDatePart(bound, type) !== selectedDate) return "";
+	return getTimePart(bound, type);
+}
+function minRule(min, type) {
+	const message = `Valor anterior ao mínimo permitido (${formatDateTime(min, type)})`;
+	return (value) => !value || value >= min || message;
+}
+function maxRule(max, type) {
+	const message = `Valor posterior ao máximo permitido (${formatDateTime(max, type)})`;
+	return (value) => !value || value <= max || message;
+}
+//#endregion
+export { formatDateTime, getDatePart, getTimePart, joinDateTime, useDateTimeFieldMenu, useDateTimeFieldPickerBounds, useDateTimeFieldRules };

package/dist/composables/inputs/fields.js

@@ -0,0 +1,28 @@
+import { required } from "./rules.js";
+import { computed, toValue } from "vue";
+//#region src/composables/inputs/fields.ts
+const textFieldVariantToVuetifyVariant = {
+	primary: "underlined",
+	secondary: "outlined"
+};
+function useTextFieldVariant(variant) {
+	return computed(() => {
+		const variantValue = toValue(variant);
+		return textFieldVariantToVuetifyVariant[variantValue];
+	});
+}
+function createRequiredRule(required, isPresent) {
+	return (value) => {
+		if (!required) return true;
+		return isPresent(value) || "Campo obrigatório";
+	};
+}
+function useRules(options) {
+	return computed(() => {
+		const rules = [];
+		if (options.required) rules.push(required);
+		return rules;
+	});
+}
+//#endregion
+export { createRequiredRule, useRules, useTextFieldVariant };

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

@@ -0,0 +1,133 @@
+import { useRules } from "./fields.js";
+import { useMask } from "vuetify";
+import { computed } from "vue";
+//#region src/composables/inputs/mask-field.ts
+/**
+* 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: "NN.NNN.NNN/NNNN-##",
+	cep: "#####-###",
+	phone: "(##) #####-####",
+	date: "##/##/####"
+};
+/**
+* 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] : toVuetifyMask(mask);
+}
+/**
+* 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 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(/\\(.)|[#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
+* characters of the tokens (Vuetify's `unmask`), with letters in uppercase.
+*
+* 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 tokens = computed(() => getMaskTokens(mask.value));
+	const acceptsLetters = computed(() => tokens.value.includes("N"));
+	const vuetifyMask = useMask({ get mask() {
+		return {
+			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 || !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 === tokens.value.length;
+	}
+	/**
+	* Returns the position in a masked text right after the given number of
+	* 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;
+		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,
+		inputMode,
+		autocapitalize,
+		rules,
+		onInput,
+		onCompositionEnd
+	};
+}
+//#endregion
+export { getMaskPlaceholder, getMaskTokens, maskFieldPresets, resolveMask, toVuetifyMask, useMaskField };

package/dist/composables/inputs/rules.js

@@ -0,0 +1,16 @@
+import { isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
+//#region src/composables/inputs/rules.ts
+function required(value) {
+	return !isEmpty(value) || "Campo obrigatório";
+}
+function phone(value) {
+	return isEmpty(value) || isPhone(value) || "Número inválido";
+}
+function email(value) {
+	return isEmpty(value) || isEmail(value) || "E-mail inválido";
+}
+function url(value) {
+	return isEmpty(value) || isUrl(value) || "URL inválida";
+}
+//#endregion
+export { email, phone, required, url };

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

@@ -0,0 +1,81 @@
+import { icons } from "../../consts/icons.js";
+import { email, phone, url } from "./rules.js";
+import { useRules } from "./fields.js";
+import { computed, readonly, ref, toValue, watch } from "vue";
+//#region src/composables/inputs/text-field.ts
+const textFieldTypeToVuetifyType = {
+	text: "text",
+	phone: "tel",
+	email: "email",
+	url: "url",
+	password: "password",
+	search: "text"
+};
+const textFieldTypeToVuetifyRule = {
+	phone,
+	email,
+	url
+};
+/**
+* Maps the field type to the input type, showing as plain text a password
+* the user chose to make visible.
+*/
+function useTextFieldType(type, isPasswordVisible) {
+	return computed(() => {
+		const typeValue = toValue(type);
+		if (typeValue === "password" && toValue(isPasswordVisible)) return "text";
+		return textFieldTypeToVuetifyType[typeValue];
+	});
+}
+/**
+* Controls the icon at the end of the field: a decorative magnifier on
+* `search`, and the toggle that shows or hides the value on `password`. The
+* toggle works with click, `Enter` and `Space`, does nothing while disabled,
+* and the password hides again whenever the type stops being `password`.
+*/
+function useTextFieldAppendIcon(type, disabled) {
+	const isPasswordField = computed(() => toValue(type) === "password");
+	const isPasswordVisible = ref(false);
+	watch(isPasswordField, () => {
+		isPasswordVisible.value = false;
+	});
+	function toggle() {
+		if (toValue(disabled)) return;
+		isPasswordVisible.value = !isPasswordVisible.value;
+	}
+	function onKeydown(event) {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		event.stopPropagation();
+		toggle();
+	}
+	const iconProps = computed(() => {
+		if (toValue(type) === "search") return { icon: icons.search };
+		if (!isPasswordField.value) return void 0;
+		return {
+			icon: isPasswordVisible.value ? icons.hidePassword : icons.showPassword,
+			"aria-label": "Mostrar senha",
+			"aria-pressed": isPasswordVisible.value,
+			onClick: toggle,
+			onKeydown
+		};
+	});
+	return {
+		isPasswordVisible: readonly(isPasswordVisible),
+		iconProps
+	};
+}
+function useTextFieldRules(props) {
+	const defaultRules = useRules(props);
+	return computed(() => {
+		const rules = [...defaultRules.value];
+		const typeRule = associatedRuleType(props.type) ? textFieldTypeToVuetifyRule[props.type] : void 0;
+		if (typeRule) rules.push(typeRule);
+		return rules;
+	});
+}
+function associatedRuleType(type) {
+	return type in textFieldTypeToVuetifyRule;
+}
+//#endregion
+export { useTextFieldAppendIcon, useTextFieldRules, useTextFieldType };