@nexdom/uimed-vue 2.0.0-beta.7 → 2.0.0-beta.9

package/dist/components.js

@@ -1,6 +1,6 @@
-import { r as useVuetifyColor, t as messages } from "./use-toast-CACuYhK_.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, useModel, withCtx, withModifiers } from "vue";
-import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VContainer, VDivider, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VMain, VMenu, VNavigationDrawer, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField } from "vuetify/components";
+import { a as messages, n as owners, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardItem, VCardText, VCardTitle, VCheckboxBtn, VCol, VCombobox, VContainer, VDialog, VDivider, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VMain, VMenu, VNavigationDrawer, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField } from "vuetify/components";
 import { formatDateTime, isEmail, isEmpty, isPhone, isUrl, toPeriodInterval } from "@nexdom/shared/utils";
 //#region src/composables/navigation/use-route-props.ts
 function useRouteProps(route) {
@@ -244,7 +244,23 @@ function url(value) {
 	return isEmpty(value) || isUrl(value) || "URL inválida";
 }
 //#endregion
-//#region src/composables/inputs/use-rules.ts
+//#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 = [];
@@ -254,10 +270,6 @@ function useRules(options) {
 }
 //#endregion
 //#region src/composables/inputs/text-field.ts
-const textFieldVariantToVuetifyVariant = {
-	primary: "underlined",
-	secondary: "outlined"
-};
 const textFieldTypeToVuetifyType = {
 	text: "text",
 	phone: "tel",
@@ -271,12 +283,6 @@ const textFieldTypeToVuetifyRule = {
 	email,
 	url
 };
-function useTextFieldVariant(variant) {
-	return computed(() => {
-		const variantValue = toValue(variant);
-		return textFieldVariantToVuetifyVariant[variantValue];
-	});
-}
 function useTextFieldType(type) {
 	return computed(() => {
 		const typeValue = toValue(type);
@@ -543,6 +549,221 @@ var toast_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/composables/button/button.ts
+const buttonVariantToVuetifyVariant = {
+	primary: "elevated",
+	secondary: "flat",
+	ghost: "outlined"
+};
+function useButtonVariant(variant) {
+	return computed(() => {
+		const variantValue = toValue(variant);
+		return variantValue ? buttonVariantToVuetifyVariant[variantValue] : buttonVariantToVuetifyVariant.primary;
+	});
+}
+function useButtonType(type) {
+	return computed(() => {
+		return toValue(type) ?? "button";
+	});
+}
+function useButtonForm(form) {
+	return computed(() => toValue(form));
+}
+//#endregion
+//#region src/components/button/button.vue
+var button_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "button",
+	props: {
+		variant: {
+			type: String,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const variant = useButtonVariant(() => props.variant);
+		const color = useVuetifyColor(() => props.color);
+		const type = useButtonType(() => props.type);
+		const form = useButtonForm(() => props.form);
+		function onClick(event) {
+			emit("click", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VBtn), {
+				disabled: props.disabled,
+				loading: props.loading,
+				"data-testid": props.dataTestid,
+				variant: unref(variant),
+				color: unref(color),
+				type: unref(type),
+				form: unref(form),
+				onClick
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"disabled",
+				"loading",
+				"data-testid",
+				"variant",
+				"color",
+				"type",
+				"form"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/dialogs/dialog.vue
+var dialog_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "dialog",
+	setup(__props) {
+		const owner = Symbol("dialog");
+		const titleId = useId();
+		const messageId = useId();
+		const actions = useTemplateRef("actions");
+		const isOwner = computed(() => owners.value[0] === owner);
+		const next = computed(() => isOwner.value ? requests.value[0] : void 0);
+		/** Dialog on display, kept until its leave transition ends. */
+		const request = shallowRef();
+		const isOpen = ref(false);
+		const selected = shallowRef();
+		const isRunning = computed(() => selected.value !== void 0);
+		/** Element focused before the dialog opened, which gets the focus back when it closes. */
+		let origin = null;
+		onMounted(() => owners.value.push(owner));
+		onUnmounted(() => owners.value = owners.value.filter((item) => item !== owner));
+		watch(next, show);
+		function show() {
+			if (request.value) return;
+			origin = document.activeElement;
+			request.value = next.value;
+			isOpen.value = next.value !== void 0;
+		}
+		function showNext() {
+			request.value = void 0;
+			show();
+		}
+		async function select(current, action) {
+			if (isRunning.value) return;
+			requests.value.shift();
+			selected.value = action;
+			await current.select(action?.value);
+			selected.value = void 0;
+			isOpen.value = false;
+			if (origin instanceof HTMLElement || origin instanceof SVGElement) origin.focus();
+		}
+		function dismiss() {
+			if (request.value) select(request.value);
+		}
+		function focusFirstAction() {
+			actions.value?.$el.querySelector("button").focus();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VDialog), {
+				"model-value": isOpen.value,
+				persistent: isRunning.value,
+				role: request.value?.role,
+				"aria-labelledby": request.value?.title ? unref(titleId) : unref(messageId),
+				"aria-describedby": unref(messageId),
+				"max-width": "560",
+				"onUpdate:modelValue": dismiss,
+				onAfterEnter: focusFirstAction,
+				onAfterLeave: showNext
+			}, {
+				default: withCtx(() => [createCommentVNode("\n      MD3 dialogs have a 24px padding, 16px between title and message, 24px between message and\n      actions, and 8px between the end-aligned actions. Inside a dialog, the card parts already\n      have 24px sides, 16px below the title, 24px below the message, and end-aligned actions 8px\n      apart, but no prop sets the remaining paddings, hence the spacing classes.\n    "), request.value ? (openBlock(), createBlock(unref(VCard), { key: 0 }, {
+					default: withCtx(() => [
+						request.value.title ? (openBlock(), createBlock(unref(VCardItem), {
+							key: 0,
+							class: "pt-6"
+						}, {
+							default: withCtx(() => [createCommentVNode(" Titles wrap instead of being truncated, since they're part of the message "), createVNode(unref(VCardTitle), {
+								id: unref(titleId),
+								class: "text-wrap"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(request.value.title), 1)]),
+								_: 1
+							}, 8, ["id"])]),
+							_: 1
+						})) : createCommentVNode("v-if", true),
+						createCommentVNode(" Below a title, the card already removes the message's top padding "),
+						createVNode(unref(VCardText), {
+							id: unref(messageId),
+							class: normalizeClass({ "pt-6": !request.value.title })
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(request.value.message), 1)]),
+							_: 1
+						}, 8, ["id", "class"]),
+						request.value.actions.length > 0 ? (openBlock(), createBlock(unref(VCardActions), {
+							key: 1,
+							ref_key: "actions",
+							ref: actions,
+							class: "px-6 pt-0 pb-6"
+						}, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(request.value.actions, (action, index) => {
+								return openBlock(), createBlock(button_default, {
+									key: index,
+									variant: action.variant,
+									color: action.color,
+									loading: selected.value === action,
+									disabled: isRunning.value && selected.value !== action,
+									onClick: ($event) => select(request.value, action)
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(action.text), 1)]),
+									_: 2
+								}, 1032, [
+									"variant",
+									"color",
+									"loading",
+									"disabled",
+									"onClick"
+								]);
+							}), 128))]),
+							_: 1
+						}, 512)) : createCommentVNode("v-if", true)
+					]),
+					_: 1
+				})) : createCommentVNode("v-if", true)]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"persistent",
+				"role",
+				"aria-labelledby",
+				"aria-describedby"
+			]);
+		};
+	}
+});
+//#endregion
 //#region src/components/main/main.vue
 var main_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
@@ -596,7 +817,11 @@ var main_default = /* @__PURE__ */ defineComponent({
 					}), null, 16, ["modelValue"])) : createCommentVNode("v-if", true),
 					createVNode(unref(VMain), null, {
 						default: withCtx(() => [createVNode(container_default, null, {
-							default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createVNode(toast_default)]),
+							default: withCtx(() => [
+								renderSlot(_ctx.$slots, "default"),
+								createVNode(toast_default),
+								createVNode(dialog_default)
+							]),
 							_: 3
 						})]),
 						_: 3
@@ -608,93 +833,137 @@ var main_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/composables/button/button.ts
-const buttonVariantToVuetifyVariant = {
-	primary: "elevated",
-	secondary: "flat",
-	ghost: "outlined"
-};
-function useButtonVariant(variant) {
-	return computed(() => {
-		const variantValue = toValue(variant);
-		return variantValue ? buttonVariantToVuetifyVariant[variantValue] : buttonVariantToVuetifyVariant.primary;
+//#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 useButtonType(type) {
+function useAutocompleteRules(options) {
 	return computed(() => {
-		return toValue(type) ?? "button";
+		const opts = toValue(options);
+		const rules = [];
+		if (opts.required) rules.push(createAutocompleteRequiredRule(opts));
+		return rules;
 	});
 }
-function useButtonForm(form) {
-	return computed(() => toValue(form));
-}
 //#endregion
-//#region src/components/button/button.vue
-var button_default = /* @__PURE__ */ defineComponent({
+//#region src/components/inputs/autocomplete-field/autocomplete-field.vue
+var autocomplete_field_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
-	__name: "button",
-	props: {
+	__name: "autocomplete-field",
+	props: /*@__PURE__*/ mergeModels({
 		variant: {
 			type: String,
+			required: false,
+			default: "primary"
+		},
+		disabled: {
+			type: Boolean,
 			required: false
 		},
-		type: {
-			type: String,
+		loading: {
+			type: Boolean,
 			required: false
 		},
-		color: {
-			type: String,
+		clearable: {
+			type: Boolean,
 			required: false
 		},
-		disabled: {
+		readonly: {
 			type: Boolean,
 			required: false
 		},
-		loading: {
+		required: {
 			type: Boolean,
 			required: false
 		},
-		form: {
+		label: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		hint: {
 			type: String,
 			required: false
 		},
 		dataTestid: {
 			type: String,
 			required: false
+		},
+		strict: {
+			type: Boolean,
+			required: false
+		},
+		multiple: {
+			type: null,
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false,
+			default: () => []
 		}
-	},
-	emits: ["click"],
-	setup(__props, { emit: __emit }) {
+	}, {
+		"modelValue": { type: null },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
 		const props = __props;
-		const emit = __emit;
-		const variant = useButtonVariant(() => props.variant);
-		const color = useVuetifyColor(() => props.color);
-		const type = useButtonType(() => props.type);
-		const form = useButtonForm(() => props.form);
-		function onClick(event) {
-			emit("click", event);
-		}
+		const vuetifyVariant = useTextFieldVariant(() => props.variant);
+		const isMultiple = computed(() => props.multiple ?? false);
+		const rules = useAutocompleteRules(() => ({
+			required: props.required,
+			multiple: isMultiple.value
+		}));
+		const vuetifyComponent = computed(() => props.strict ? VAutocomplete : VCombobox);
+		const normalizedItems = computed(() => {
+			return props.items.map((item) => {
+				if (typeof item === "string") return {
+					label: item,
+					value: item
+				};
+				return item;
+			});
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VBtn), {
+			return openBlock(), createBlock(resolveDynamicComponent(vuetifyComponent.value), {
+				modelValue: modelValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				variant: unref(vuetifyVariant),
+				items: normalizedItems.value,
+				"data-testid": props.dataTestid,
 				disabled: props.disabled,
 				loading: props.loading,
-				"data-testid": props.dataTestid,
-				variant: unref(variant),
-				color: unref(color),
-				type: unref(type),
-				form: unref(form),
-				onClick
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, [
+				readonly: props.readonly,
+				label: props.label,
+				placeholder: props.placeholder,
+				hint: props.hint,
+				clearable: props.clearable,
+				multiple: isMultiple.value,
+				"item-title": "label",
+				rules: unref(rules),
+				chips: ""
+			}, null, 8, [
+				"modelValue",
+				"variant",
+				"items",
+				"data-testid",
 				"disabled",
 				"loading",
-				"data-testid",
-				"variant",
-				"color",
-				"type",
-				"form"
+				"readonly",
+				"label",
+				"placeholder",
+				"hint",
+				"clearable",
+				"multiple",
+				"rules"
 			]);
 		};
 	}
@@ -944,7 +1213,7 @@ var section_default = /* @__PURE__ */ defineComponent({
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default"), showActions.value ? (openBlock(), createBlock(unref(VCardActions), {
 						key: 0,
-						class: "mt-auto"
+						class: "mt-auto justify-end"
 					}, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.actions, ({ label, onClick, ...action }, index) => {
 							return openBlock(), createBlock(button_default, mergeProps({ key: index }, { ref_for: true }, action, { onClick }), {
@@ -1109,4 +1378,4 @@ var details_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { button_default as UButton, checkbox_default as UCheckbox, column_default as UColumn, container_default as UContainer, details_default as UDetails, form_default as UForm, 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, details_default as UDetails, form_default as UForm, 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 };

package/dist/composables.d.ts

@@ -1,4 +1,4 @@
-import { n as FeedbackColorVariant } from "./types-BPXXtbmW.js";
+import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-HPMP8IrV.js";
 //#region src/composables/dialogs/types.d.ts
 interface ToastOptions {
   /**
@@ -6,12 +6,84 @@ interface ToastOptions {
    */
   message: string;
   /**
-   * Applies a color to the button.
+   * Applies a color to the toast.
    * One of `positive`, `informative`, `caution`, or `danger`.
    * @default "informative"
    */
   color?: FeedbackColorVariant;
 }
+/**
+ * A button displayed at the bottom of a dialog opened by `useDialog`'s `dialog`.
+ */
+interface DialogAction<T extends string = string> {
+  /**
+   * Text displayed on the button.
+   */
+  text: string;
+  /**
+   * Value the dialog resolves with when the button is clicked.
+   */
+  value: T;
+  /**
+   * Applies a distinct style variation to the button.
+   * One of `primary`, `secondary`, or `ghost`.
+   * @default "ghost", or "primary" for the last action
+   */
+  variant?: ButtonVariant;
+  /**
+   * Applies a color to the button.
+   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
+   * @default "primary"
+   */
+  color?: ColorVariant;
+}
+/**
+ * Options of a dialog opened by `useDialog`'s `dialog`.
+ */
+interface DialogOptions<T extends string = string> {
+  /**
+   * Plain text displayed as the dialog's title. HTML isn't interpreted.
+   */
+  title?: string;
+  /**
+   * Plain text displayed as the dialog's message. HTML isn't interpreted.
+   */
+  message: string;
+  /**
+   * Buttons displayed at the bottom of the dialog, right-aligned, in the given order.
+   * @default [{ text: "Fechar" }], which resolves `undefined`
+   */
+  actions?: DialogAction<T>[];
+}
+/**
+ * Options of a dialog opened by `useConfirm`'s `confirm`.
+ */
+interface ConfirmOptions {
+  /**
+   * Plain text displayed as the dialog's title. HTML isn't interpreted.
+   */
+  title?: string;
+  /**
+   * Plain text displayed as the dialog's message. HTML isn't interpreted.
+   */
+  message: string;
+  /**
+   * Text displayed on the confirm button.
+   * @default "Confirmar"
+   */
+  confirmText?: string;
+  /**
+   * Text displayed on the cancel button.
+   * @default "Cancelar"
+   */
+  cancelText?: string;
+  /**
+   * Applies a color to the confirm button.
+   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
+   * @default "primary"
+   */
+  color?: ColorVariant;
+}
 //#endregion
 //#region src/composables/dialogs/use-toast.d.ts
 /**
@@ -37,7 +109,7 @@ declare function useToast(): {
  */
 declare function toast(options: ToastOptions): void;
 //#endregion
-//#region src/composables/dialogs/use-run-or-toast..d.ts
+//#region src/composables/dialogs/use-run-or-toast.d.ts
 /**
  * Generate `run` method and a computed property `isRunning`.
  * Calling `run` will  reactively update `isRunning`.
@@ -64,4 +136,58 @@ declare function useRunOrToast(): {
   isRunning: import("vue").ComputedRef<boolean>;
 };
 //#endregion
-export { useRunOrToast, useToast };
+//#region src/composables/dialogs/use-dialog.d.ts
+/**
+ * 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" },
+ *   ],
+ * });
+ * ```
+ */
+declare function useDialog(): {
+  dialog: typeof 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." });
+ * ```
+ */
+declare function dialog<T extends string = never>(options: DialogOptions<T>): Promise<T | undefined>;
+//#endregion
+//#region src/composables/dialogs/use-confirm.d.ts
+/**
+ * Composable which returns a function to run actions only after the user confirms them in a
+ * dialog, and a computed property `isRunning`.
+ *
+ * @example
+ * ```ts
+ * const { confirm, isRunning } = useConfirm();
+ *
+ * const removed = await confirm(
+ *   { title: "Excluir paciente", message: "Esta ação não pode ser desfeita.", confirmText: "Excluir", color: "danger" },
+ *   () => api.deletePatient(id),
+ * );
+ * ```
+ */
+declare function useConfirm(): {
+  confirm: <F extends (...args: Parameters<F>) => PromiseLike<Awaited<ReturnType<F>>>>(options: ConfirmOptions, action: F, ...params: Parameters<F>) => Promise<Awaited<ReturnType<F>> | false>;
+  isRunning: import("vue").ComputedRef<boolean>;
+};
+//#endregion
+export { useConfirm, useDialog, useRunOrToast, useToast };