@nexdom/uimed-vue 2.0.0-beta.12 → 2.0.0-beta.14

package/dist/components.d.ts

@@ -155,6 +155,13 @@ type MainProps = {
    * Navigation menu properties.
    */
   navigationMenu?: NavigationMenuProps;
+  /**
+   * Shows skeleton loaders in place of the user-related parts of the app bar
+   * and of the navigation menu items while their data is being loaded.
+   * The main content (default slot) isn't affected.
+   * @default false
+   */
+  loading?: boolean;
 };
 //#endregion
 //#region src/components/main/main.vue.d.ts
@@ -172,8 +179,8 @@ type MainProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/main | Main Guide}
  */
-declare const _default$9: typeof __VLS_export$14;
-declare const __VLS_export$14: __VLS_WithSlots$9<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<MainProps & {
+declare const _default$10: typeof __VLS_export$15;
+declare const __VLS_export$15: __VLS_WithSlots$9<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;
@@ -205,8 +212,8 @@ type __VLS_WithSlots$9<T, S> = T & {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/button | Button Guide}
  */
-declare const _default$1: typeof __VLS_export$13;
-declare const __VLS_export$13: __VLS_WithSlots$8<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$14;
+declare const __VLS_export$14: __VLS_WithSlots$8<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;
@@ -377,8 +384,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$12;
-declare const __VLS_export$12: <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$13;
+declare const __VLS_export$13: <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;
   }) & {
@@ -408,8 +415,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$14: typeof __VLS_export$11;
-declare const __VLS_export$11: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
+declare const _default$15: typeof __VLS_export$12;
+declare const __VLS_export$12: 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;
@@ -471,8 +478,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$10;
-declare const __VLS_export$10: <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$11;
+declare const __VLS_export$11: <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;
   }) & {
@@ -489,6 +496,117 @@ declare const __VLS_export$10: <T = any>(__VLS_props: NonNullable<Awaited<typeof
 };
 type __VLS_PrettifyLocal$1<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
+//#region src/components/inputs/date-time-field/types.d.ts
+type DateTimeFieldVariant = TextFieldVariant;
+type DateTimeFieldType = "date" | "time" | "datetime";
+/**
+ * Props exposed by the {@link DateTimeField} component.
+ */
+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.
+   * @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
+//#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$7: typeof __VLS_export$10;
+declare const __VLS_export$10: 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
 //#region src/components/grid/container/types.d.ts
 /**
  * Props exposed by the {@link Container} component.
@@ -561,7 +679,7 @@ type RowProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
  */
-declare const _default$10: typeof __VLS_export$8;
+declare const _default$11: typeof __VLS_export$8;
 declare const __VLS_export$8: __VLS_WithSlots$6<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;
 }>;
@@ -660,7 +778,7 @@ type FormProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/form | Form Guide}
  */
-declare const _default$8: typeof __VLS_export$6;
+declare const _default$9: typeof __VLS_export$6;
 declare const __VLS_export$6: __VLS_WithSlots$4<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<FormProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
   submit: (event: SubmitEvent) => any;
 }, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<FormProps> & Readonly<{
@@ -690,7 +808,7 @@ type __VLS_WithSlots$4<T, S> = T & {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$12: typeof __VLS_export$5;
+declare const _default$13: typeof __VLS_export$5;
 declare const __VLS_export$5: __VLS_WithSlots$3<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;
 }>;
@@ -776,7 +894,7 @@ interface SectionAction extends ButtonProps {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$11: typeof __VLS_export$4;
+declare const _default$12: typeof __VLS_export$4;
 declare const __VLS_export$4: __VLS_WithSlots$2<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;
 }>;
@@ -851,7 +969,7 @@ type TableProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/table | Table Guide}
  */
-declare const _default$13: typeof __VLS_export$3;
+declare const _default$14: typeof __VLS_export$3;
 declare const __VLS_export$3: 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
@@ -899,7 +1017,7 @@ type DetailsProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/details | Details Guide}
  */
-declare const _default$7: typeof __VLS_export$2;
+declare const _default$8: typeof __VLS_export$2;
 declare const __VLS_export$2: __VLS_WithSlots$1<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DetailsProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<DetailsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
@@ -1088,4 +1206,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 UDetails, _default$8 as UForm, _default$9 as UMain, _default$10 as URow, _default$11 as USection, _default$12 as USectionContent, _default$13 as UTable, _default$14 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 UForm, _default$10 as UMain, _default$11 as URow, _default$12 as USection, _default$13 as USectionContent, _default$14 as UTable, _default$15 as UTextField };

package/dist/components.js

@@ -1,7 +1,8 @@
 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, onScopeDispose, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withModifiers } from "vue";
-import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardItem, VCardText, VCardTitle, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VMain, VMenu, VNavigationDrawer, VPagination, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField } from "vuetify/components";
-import { isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
+import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardItem, VCardText, VCardTitle, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
+import { formatDateTime, isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
+import { pt } from "vuetify/locale";
 //#region src/composables/navigation/use-route-props.ts
 function useRouteProps(route) {
 	return computed(() => routeToProps(route));
@@ -49,6 +50,10 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 		logo: {
 			type: String,
 			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
 		}
 	}, {
 		"notificationsOpen": {
@@ -75,119 +80,131 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 		const showNotifications = computed(() => !!props.notifications);
 		const unreadCount = computed(() => props.notifications.filter((notification) => !notification.read).length);
 		const hasUnreadNotifications = computed(() => unreadCount.value > 0);
+		watch(() => props.loading, (loading) => {
+			if (loading) notificationsOpen.value = false;
+		});
 		const showUser = computed(() => !!props.user);
 		const userAvatarProps = computed(() => props.user.img ? { image: props.user.img } : { icon: "mdi-account-outline" });
 		function isParentOption(option) {
 			return "items" in option;
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VAppBar), { "data-testid": props.dataTestid }, {
-				append: withCtx(() => [
-					showHelp.value ? (openBlock(), createBlock(unref(VBtn), mergeProps({ key: 0 }, unref(routeProps), {
-						"data-testid": helpBtnDataTestid.value,
-						icon: "mdi-help-circle-outline"
-					}), null, 16, ["data-testid"])) : createCommentVNode("v-if", true),
-					showNotifications.value ? (openBlock(), createBlock(unref(VMenu), {
-						key: 1,
-						modelValue: notificationsOpen.value,
-						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => notificationsOpen.value = $event),
-						"close-on-content-click": false
-					}, {
-						activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
-							"data-testid": notificationsBtnDataTestid.value,
-							icon: ""
-						}), {
-							default: withCtx(() => [createVNode(unref(VBadge), {
-								"model-value": hasUnreadNotifications.value,
-								content: unreadCount.value,
-								color: "error"
-							}, {
-								default: withCtx(() => [createVNode(unref(VIcon), { icon: "mdi-bell-outline" })]),
-								_: 1
-							}, 8, ["model-value", "content"])]),
-							_: 1
-						}, 16, ["data-testid"])]),
-						default: withCtx(() => [createVNode(unref(VCard), { "data-testid": notificationsMenuDataTestid.value }, {
-							default: withCtx(() => [props.notifications?.length ? (openBlock(), createBlock(unref(VList), { key: 0 }, {
-								default: withCtx(() => [createVNode(unref(VListSubheader), null, {
-									default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Notificações", -1)])]),
+			return openBlock(), createBlock(unref(VAppBar), {
+				"data-testid": props.dataTestid,
+				"aria-busy": props.loading || void 0
+			}, {
+				append: withCtx(() => [createVNode(unref(VSkeletonLoader), {
+					loading: props.loading,
+					type: "avatar"
+				}, {
+					default: withCtx(() => [
+						showHelp.value ? (openBlock(), createBlock(unref(VBtn), mergeProps({ key: 0 }, unref(routeProps), {
+							"data-testid": helpBtnDataTestid.value,
+							icon: "mdi-help-circle-outline"
+						}), null, 16, ["data-testid"])) : createCommentVNode("v-if", true),
+						showNotifications.value ? (openBlock(), createBlock(unref(VMenu), {
+							key: 1,
+							modelValue: notificationsOpen.value,
+							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => notificationsOpen.value = $event),
+							"close-on-content-click": false
+						}, {
+							activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
+								"data-testid": notificationsBtnDataTestid.value,
+								icon: ""
+							}), {
+								default: withCtx(() => [createVNode(unref(VBadge), {
+									"model-value": hasUnreadNotifications.value,
+									content: unreadCount.value,
+									color: "error"
+								}, {
+									default: withCtx(() => [createVNode(unref(VIcon), { icon: "mdi-bell-outline" })]),
 									_: 1
-								}), (openBlock(true), createElementBlock(Fragment, null, renderList(props.notifications, (notification, index) => {
-									return openBlock(), createBlock(unref(VListItem), {
-										key: index,
-										active: !notification.read,
-										title: notification.title,
-										subtitle: notification.subtitle,
-										"active-class": "text-primary"
-									}, createSlots({ _: 2 }, [notification.when ? {
-										name: "append",
-										fn: withCtx(() => [createVNode(unref(VListItemAction), { end: "" }, {
-											default: withCtx(() => [createElementVNode("small", _hoisted_1$2, toDisplayString(notification.when), 1)]),
-											_: 2
-										}, 1024)]),
-										key: "0"
-									} : void 0]), 1032, [
-										"active",
-										"title",
-										"subtitle"
-									]);
-								}), 128))]),
+								}, 8, ["model-value", "content"])]),
 								_: 1
-							})) : (openBlock(), createBlock(unref(VCardText), { key: 1 }, {
-								default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Nenhuma notificação", -1)])]),
+							}, 16, ["data-testid"])]),
+							default: withCtx(() => [createVNode(unref(VCard), { "data-testid": notificationsMenuDataTestid.value }, {
+								default: withCtx(() => [props.notifications?.length ? (openBlock(), createBlock(unref(VList), { key: 0 }, {
+									default: withCtx(() => [createVNode(unref(VListSubheader), null, {
+										default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Notificações", -1)])]),
+										_: 1
+									}), (openBlock(true), createElementBlock(Fragment, null, renderList(props.notifications, (notification, index) => {
+										return openBlock(), createBlock(unref(VListItem), {
+											key: index,
+											active: !notification.read,
+											title: notification.title,
+											subtitle: notification.subtitle,
+											"active-class": "text-primary"
+										}, createSlots({ _: 2 }, [notification.when ? {
+											name: "append",
+											fn: withCtx(() => [createVNode(unref(VListItemAction), { end: "" }, {
+												default: withCtx(() => [createElementVNode("small", _hoisted_1$2, toDisplayString(notification.when), 1)]),
+												_: 2
+											}, 1024)]),
+											key: "0"
+										} : void 0]), 1032, [
+											"active",
+											"title",
+											"subtitle"
+										]);
+									}), 128))]),
+									_: 1
+								})) : (openBlock(), createBlock(unref(VCardText), { key: 1 }, {
+									default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Nenhuma notificação", -1)])]),
+									_: 1
+								}))]),
 								_: 1
-							}))]),
-							_: 1
-						}, 8, ["data-testid"])]),
-						_: 1
-					}, 8, ["modelValue"])) : createCommentVNode("v-if", true),
-					showUser.value ? (openBlock(), createBlock(unref(VMenu), {
-						key: 2,
-						"close-on-content-click": false
-					}, {
-						activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
-							"data-testid": userBtnDataTestid.value,
-							icon: ""
-						}), {
-							default: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
+							}, 8, ["data-testid"])]),
 							_: 1
-						}, 16, ["data-testid"])]),
-						default: withCtx(() => [createVNode(unref(VCard), {
-							title: __props.user?.title,
-							subtitle: __props.user?.subtitle,
-							"data-testid": userMenuDataTestid.value
+						}, 8, ["modelValue"])) : createCommentVNode("v-if", true),
+						showUser.value ? (openBlock(), createBlock(unref(VMenu), {
+							key: 2,
+							"close-on-content-click": false
 						}, {
-							prepend: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
-							default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), { nav: "" }, {
-								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.user?.options, (option, index) => {
-									return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createBlock(unref(VDivider), {
-										key: 0,
-										class: "mt-1"
-									})) : createCommentVNode("v-if", true), isParentOption(option) ? (openBlock(), createBlock(unref(VListGroup), { key: 1 }, {
-										activator: withCtx(({ props }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, props, { title: option.description }), null, 16, ["title"])]),
-										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(option.items, (childOption, index) => {
-											return openBlock(), createBlock(unref(VListItem), mergeProps({ key: index }, { ref_for: true }, unref(routeToProps)(childOption.route), {
-												title: childOption.description,
-												onClick: childOption.action
-											}), null, 16, ["title", "onClick"]);
-										}), 128))]),
-										_: 2
-									}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
-										key: 2,
-										title: option.description
-									}, { ref_for: true }, unref(routeToProps)(option.route), { onClick: option.action }), null, 16, ["title", "onClick"]))], 64);
-								}), 128))]),
+							activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
+								"data-testid": userBtnDataTestid.value,
+								icon: ""
+							}), {
+								default: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
+								_: 1
+							}, 16, ["data-testid"])]),
+							default: withCtx(() => [createVNode(unref(VCard), {
+								title: __props.user?.title,
+								subtitle: __props.user?.subtitle,
+								"data-testid": userMenuDataTestid.value
+							}, {
+								prepend: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
+								default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), { nav: "" }, {
+									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.user?.options, (option, index) => {
+										return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createBlock(unref(VDivider), {
+											key: 0,
+											class: "mt-1"
+										})) : createCommentVNode("v-if", true), isParentOption(option) ? (openBlock(), createBlock(unref(VListGroup), { key: 1 }, {
+											activator: withCtx(({ props }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, props, { title: option.description }), null, 16, ["title"])]),
+											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(option.items, (childOption, index) => {
+												return openBlock(), createBlock(unref(VListItem), mergeProps({ key: index }, { ref_for: true }, unref(routeToProps)(childOption.route), {
+													title: childOption.description,
+													onClick: childOption.action
+												}), null, 16, ["title", "onClick"]);
+											}), 128))]),
+											_: 2
+										}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
+											key: 2,
+											title: option.description
+										}, { ref_for: true }, unref(routeToProps)(option.route), { onClick: option.action }), null, 16, ["title", "onClick"]))], 64);
+									}), 128))]),
+									_: 1
+								})]),
 								_: 1
-							})]),
+							}, 8, [
+								"title",
+								"subtitle",
+								"data-testid"
+							])]),
 							_: 1
-						}, 8, [
-							"title",
-							"subtitle",
-							"data-testid"
-						])]),
-						_: 1
-					})) : createCommentVNode("v-if", true)
-				]),
+						})) : createCommentVNode("v-if", true)
+					]),
+					_: 1
+				}, 8, ["loading"])]),
 				default: withCtx(() => [
 					__props.navigation ? (openBlock(), createBlock(unref(VAppBarNavIcon), {
 						key: 0,
@@ -208,7 +225,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 					})) : createCommentVNode("v-if", true)
 				]),
 				_: 1
-			}, 8, ["data-testid"]);
+			}, 8, ["data-testid", "aria-busy"]);
 		};
 	}
 });
@@ -408,6 +425,10 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 		items: {
 			type: Array,
 			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
 		}
 	}, {
 		"modelValue": {
@@ -449,6 +470,7 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => open.value = $event),
 				color: "primary",
 				"data-testid": props.dataTestid,
+				"aria-busy": props.loading || void 0,
 				absolute: "",
 				temporary: ""
 			}, {
@@ -457,28 +479,44 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
 					type: "search",
 					label: "Buscar",
-					"data-testid": searchDataTestid.value
-				}, null, 8, ["modelValue", "data-testid"])])]),
-				default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), { nav: "" }, {
-					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
-						return openBlock(), createElementBlock(Fragment, { key: index }, [isParentItem(item) ? (openBlock(), createBlock(unref(VListGroup), { key: 0 }, {
-							activator: withCtx(({ props: activatorProps }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, { title: item.description }), null, 16, ["title"])]),
-							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (childItem, childIndex) => {
-								return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToProps)(childItem.route), {
-									title: childItem.description,
-									onClick: childItem.action
-								}), null, 16, ["title", "onClick"]);
-							}), 128))]),
-							_: 2
-						}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
-							key: 1,
-							title: item.description
-						}, { ref_for: true }, unref(routeToProps)(item.route), { onClick: item.action }), null, 16, ["title", "onClick"]))], 64);
-					}), 128))]),
+					"data-testid": searchDataTestid.value,
+					disabled: props.loading
+				}, null, 8, [
+					"modelValue",
+					"data-testid",
+					"disabled"
+				])])]),
+				default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VSkeletonLoader), {
+					loading: props.loading,
+					type: "list-item@6",
+					color: "primary"
+				}, {
+					default: withCtx(() => [createVNode(unref(VList), { nav: "" }, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
+							return openBlock(), createElementBlock(Fragment, { key: index }, [isParentItem(item) ? (openBlock(), createBlock(unref(VListGroup), { key: 0 }, {
+								activator: withCtx(({ props: activatorProps }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, { title: item.description }), null, 16, ["title"])]),
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (childItem, childIndex) => {
+									return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToProps)(childItem.route), {
+										title: childItem.description,
+										onClick: childItem.action
+									}), null, 16, ["title", "onClick"]);
+								}), 128))]),
+								_: 2
+							}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
+								key: 1,
+								title: item.description
+							}, { ref_for: true }, unref(routeToProps)(item.route), { onClick: item.action }), null, 16, ["title", "onClick"]))], 64);
+						}), 128))]),
+						_: 1
+					})]),
 					_: 1
-				})]),
+				}, 8, ["loading"])]),
 				_: 1
-			}, 8, ["modelValue", "data-testid"]);
+			}, 8, [
+				"modelValue",
+				"data-testid",
+				"aria-busy"
+			]);
 		};
 	}
 });
@@ -768,6 +806,10 @@ var main_default = /* @__PURE__ */ defineComponent({
 		navigationMenu: {
 			type: Object,
 			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
 		}
 	}, {
 		"notificationsOpen": {
@@ -782,7 +824,8 @@ var main_default = /* @__PURE__ */ defineComponent({
 		const appBarProps = computed(() => props.appBar ? {
 			...props.appBar,
 			logo: props.logo,
-			navigation: props.navigationMenu !== void 0
+			navigation: props.navigationMenu !== void 0,
+			loading: props.loading
 		} : void 0);
 		const notificationsOpen = useModel(__props, "notificationsOpen");
 		const navigationMenuOpen = ref(false);
@@ -797,8 +840,9 @@ var main_default = /* @__PURE__ */ defineComponent({
 					}), null, 16, ["notifications-open", "navigation-open"])) : createCommentVNode("v-if", true),
 					props.navigationMenu ? (openBlock(), createBlock(navigation_menu_default, mergeProps({ key: 1 }, props.navigationMenu, {
 						modelValue: navigationMenuOpen.value,
-						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => navigationMenuOpen.value = $event)
-					}), null, 16, ["modelValue"])) : createCommentVNode("v-if", true),
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => navigationMenuOpen.value = $event),
+						loading: props.loading
+					}), null, 16, ["modelValue", "loading"])) : createCommentVNode("v-if", true),
 					createVNode(unref(VMain), null, {
 						default: withCtx(() => [createVNode(container_default, null, {
 							default: withCtx(() => [
@@ -1022,6 +1066,259 @@ var checkbox_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/composables/inputs/date-time-field.ts
+/**
+* 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$1(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)
+		};
+	});
+}
+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$1(min, type)})`;
+	return (value) => !value || value >= min || message;
+}
+function maxRule(max, type) {
+	const message = `Valor posterior ao máximo permitido (${formatDateTime$1(max, type)})`;
+	return (value) => !value || value <= max || message;
+}
+//#endregion
+//#region src/components/inputs/date-time-field/date-time-field.vue
+var date_time_field_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);
+		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), {
+				"model-value": displayValue.value,
+				"validation-value": modelValue.value,
+				variant: unref(vuetifyVariant),
+				rules: unref(rules),
+				"data-testid": props.dataTestid,
+				disabled: props.disabled,
+				loading: props.loading,
+				label: props.label,
+				placeholder: props.placeholder,
+				hint: props.hint,
+				clearable: isClearable.value,
+				readonly: "",
+				"onClick:clear": clear
+			}, {
+				default: withCtx(() => [createVNode(unref(VMenu), {
+					modelValue: isMenuOpen.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event),
+					activator: "parent",
+					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", "disabled"])]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"validation-value",
+				"variant",
+				"rules",
+				"data-testid",
+				"disabled",
+				"loading",
+				"label",
+				"placeholder",
+				"hint",
+				"clearable"
+			]);
+		};
+	}
+});
+//#endregion
 //#region src/components/grid/row/row.vue
 var row_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
@@ -1685,4 +1982,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, 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, data_set_default as UDataSet, data_set_item_default as UDataSetItem, date_time_field_default as UDateTimeField, 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/package.json

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