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

package/dist/components/main/main.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,104 @@
+import app_bar_default from "../app-bar/app-bar.js";
+import { useMobileNavigation } from "../../composables/navigation/use-navigation-rail.js";
+import navigation_menu_default from "../navigation-menu/navigation-menu.js";
+import footer_default from "../footer/footer.js";
+import container_default from "../grid/container/container.js";
+import toast_default from "../dialogs/toast.js";
+import dialog_host_default from "../dialogs/dialog-host.js";
+import useVuetifyBackgroundColor from "../../composables/colors/use-vuetify-background-color.js";
+import { computed, createBlock, createCommentVNode, createSlots, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useModel, useSlots, withCtx } from "vue";
+import { VApp, VMain } from "vuetify/components";
+var main_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "main",
+	props: /*@__PURE__*/ mergeModels({
+		dataTestid: {
+			type: String,
+			required: false
+		},
+		logo: {
+			type: String,
+			required: false
+		},
+		appBar: {
+			type: Object,
+			required: false
+		},
+		navigationMenu: {
+			type: Object,
+			required: false
+		},
+		footer: {
+			type: Object,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		}
+	}, {
+		"notificationsOpen": {
+			type: Boolean,
+			default: false
+		},
+		"notificationsOpenModifiers": {}
+	}),
+	emits: ["update:notificationsOpen"],
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const mobile = useMobileNavigation();
+		const appBarProps = computed(() => props.appBar ? {
+			...props.appBar,
+			logo: props.logo,
+			navigation: props.navigationMenu !== void 0 && mobile.value,
+			loading: props.loading
+		} : void 0);
+		const backgroundClass = useVuetifyBackgroundColor(() => props.background);
+		const notificationsOpen = useModel(__props, "notificationsOpen");
+		const navigationMenuOpen = ref(false);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VApp), {
+				class: normalizeClass(unref(backgroundClass)),
+				"data-testid": props.dataTestid
+			}, {
+				default: withCtx(() => [
+					appBarProps.value ? (openBlock(), createBlock(app_bar_default, mergeProps({ key: 0 }, appBarProps.value, {
+						"notifications-open": notificationsOpen.value,
+						"onUpdate:notificationsOpen": _cache[0] || (_cache[0] = ($event) => notificationsOpen.value = $event),
+						"navigation-open": navigationMenuOpen.value,
+						"onUpdate:navigationOpen": _cache[1] || (_cache[1] = ($event) => navigationMenuOpen.value = $event)
+					}), createSlots({ _: 2 }, [slots["user-section-details"] ? {
+						name: "user-section-details",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "user-section-details")]),
+						key: "0"
+					} : void 0]), 1040, ["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),
+						loading: props.loading
+					}), null, 16, ["modelValue", "loading"])) : createCommentVNode("v-if", true),
+					createVNode(unref(VMain), null, {
+						default: withCtx(() => [createCommentVNode(" Full height, so the page's rows and containers with `fullHeight` have a height to fill "), createVNode(container_default, { "full-height": "" }, {
+							default: withCtx(() => [
+								renderSlot(_ctx.$slots, "default"),
+								createVNode(toast_default),
+								createVNode(dialog_host_default)
+							]),
+							_: 3
+						})]),
+						_: 3
+					}),
+					props.footer?.description ? (openBlock(), createBlock(footer_default, normalizeProps(mergeProps({ key: 2 }, props.footer)), null, 16)) : createCommentVNode("v-if", true)
+				]),
+				_: 3
+			}, 8, ["class", "data-testid"]);
+		};
+	}
+});
+//#endregion
+export { main_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,75 @@
+import { AppBarProps } from "../app-bar/types.js";
+import { NavigationMenuProps } from "../navigation-menu/types.js";
+import { FooterProps } from "../footer/types.js";
+import { ColorVariant } from "../../composables/colors/types.js";
+//#region src/components/main/types.d.ts
+/**
+ * Props exposed by the {@link Main} component.
+ */
+export type MainProps = {
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+  /**
+   * URL to logo image.
+   *
+   * The logo is decorative (`alt=""`): screen readers identify the app by
+   * the app bar title (`appBar.title`).
+   */
+  logo?: string;
+  /**
+   * App bar properties.
+   */
+  appBar?: AppBarProps;
+  /**
+   * Navigation menu properties.
+   */
+  navigationMenu?: NavigationMenuProps;
+  /**
+   * Footer properties. The footer is fixed at the bottom of the screen and
+   * is hidden when it's omitted or its `description` is empty.
+   *
+   * @example
+   * ```vue
+   * <u-main :footer="{ description: `Versão ${version}` }" />
+   * ```
+   */
+  footer?: FooterProps;
+  /**
+   * 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;
+  /**
+   * Applies a color to the background of the whole app, e.g. on landing pages. Text placed
+   * directly on the background takes the color the theme pairs with it (white or black), while
+   * the app bar, the footer, sections and dialogs keep their own backgrounds. When omitted, the
+   * app uses the theme's default background.
+   *
+   * @example
+   * ```vue
+   * <u-main background="primary" />
+   * ```
+   */
+  background?: ColorVariant;
+};
+/**
+ * Slots exposed by the {@link Main} component.
+ */
+export type MainSlots = {
+  /**
+   * Content of the page, below the app bar (and above the footer, when shown).
+   */
+  default?: () => unknown;
+  /**
+   * Details of the user shown in the user menu of the app bar, below the
+   * name and subtitle and above the options, with the text centered like
+   * them (e.g. the user's organization and profile, and an action to manage
+   * the profile). Only shown when `appBar.user` is given.
+   */
+  "user-section-details"?: () => unknown;
+};
+//#endregion

package/dist/components/navigation-menu/navigation-menu.js

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

package/dist/components/navigation-menu/navigation-menu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,207 @@
+import { icons } from "../../consts/icons.js";
+import { routeToListItemProps } from "../../composables/navigation/use-route-props.js";
+import { useNavigationSearchShortcut } from "../../composables/navigation/use-navigation-search-shortcut.js";
+import skeleton_loader_default from "../skeleton-loader/skeleton-loader.js";
+import text_field_default from "../inputs/text-field/text-field.js";
+import { isParentItem, useNavigationRail } from "../../composables/navigation/use-navigation-rail.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, openBlock, ref, renderList, unref, useModel, useTemplateRef, vShow, withCtx, withDirectives, withKeys } from "vue";
+import { VDivider, VList, VListGroup, VListItem, VNavigationDrawer } from "vuetify/components";
+//#region src/components/navigation-menu/navigation-menu.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "px-4 pt-2" };
+var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "navigation-menu",
+	props: /*@__PURE__*/ mergeModels({
+		dataTestid: {
+			type: String,
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const open = useModel(__props, "modelValue");
+		const search = ref("");
+		const field = useTemplateRef("searchField");
+		const { mobile, collapsed, drawerOpen, menuOpen, opened, isActiveGroup, dismiss, isRestoringFocus, onFocusin, onFocusout, onMouseenter, onMouseleave } = useNavigationRail({
+			open,
+			field,
+			searchItem: useTemplateRef("searchItem"),
+			items: () => props.items,
+			search
+		});
+		const { label: shortcutLabel, ariaKeyshortcuts, openSearch } = useNavigationSearchShortcut({
+			open: menuOpen,
+			field
+		});
+		const filteredItems = computed(() => filterItems());
+		function onSearchItemFocus(event) {
+			if (!isRestoringFocus()) openSearch(event.relatedTarget);
+		}
+		const searchDataTestid = computed(() => `${props.dataTestid}-search`);
+		const query = computed(() => search.value.toLowerCase());
+		function filterItems() {
+			return (props.items ?? []).reduce((filtered, item) => {
+				if (matches(item)) filtered.push(item);
+				else if (isParentItem(item)) {
+					const matchingChildren = item.items.filter((child) => matches(child));
+					if (matchingChildren.length) filtered.push({
+						...item,
+						items: matchingChildren
+					});
+				}
+				return filtered;
+			}, []);
+		}
+		function matches(item) {
+			return item.description.toLowerCase().includes(query.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VNavigationDrawer), {
+				modelValue: unref(drawerOpen),
+				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(drawerOpen) ? drawerOpen.value = $event : null),
+				color: "primary",
+				"data-testid": props.dataTestid,
+				"aria-busy": props.loading || void 0,
+				mobile: unref(mobile),
+				permanent: !unref(mobile),
+				rail: !unref(mobile),
+				"expand-on-hover": "",
+				absolute: "",
+				temporary: "",
+				onFocusin: unref(onFocusin),
+				onFocusout: unref(onFocusout),
+				onMouseenter: unref(onMouseenter),
+				onMouseleave: unref(onMouseleave),
+				onKeydown: withKeys(unref(dismiss), ["esc"])
+			}, {
+				prepend: withCtx(() => [
+					withDirectives(createElementVNode("div", _hoisted_1, [createVNode(text_field_default, {
+						ref: "searchField",
+						modelValue: search.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
+						type: "search",
+						placeholder: `Buscar (${unref(shortcutLabel)})`,
+						"data-testid": searchDataTestid.value,
+						disabled: props.loading
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"data-testid",
+						"disabled"
+					])], 512), [[vShow, !unref(collapsed)]]),
+					createCommentVNode(" Vuetify's list is focusable and passes the focus on to its first item: out of the tab\n      order, the item gets the focus straight from the page, which then gets it back on `Esc` "),
+					withDirectives(createVNode(unref(VList), {
+						nav: "",
+						role: "group",
+						tabindex: "-1"
+					}, {
+						default: withCtx(() => [createCommentVNode(" Rendered as a native button, as the groups' headers (see below). Vuetify only styles\n        a disabled item, and its button would still take the focus "), createVNode(unref(VListItem), {
+							ref: "searchItem",
+							title: "Buscar",
+							"prepend-icon": unref(icons).search,
+							disabled: props.loading,
+							tabindex: props.loading ? -1 : void 0,
+							"aria-disabled": props.loading || void 0,
+							"aria-keyshortcuts": unref(ariaKeyshortcuts),
+							role: void 0,
+							tag: "button",
+							type: "button",
+							class: "w-100 text-start",
+							onFocus: onSearchItemFocus
+						}, null, 8, [
+							"prepend-icon",
+							"disabled",
+							"tabindex",
+							"aria-disabled",
+							"aria-keyshortcuts"
+						])]),
+						_: 1
+					}, 512), [[vShow, unref(collapsed)]])
+				]),
+				default: withCtx(() => [createVNode(unref(VDivider)), createVNode(skeleton_loader_default, {
+					loading: props.loading,
+					type: "list-item@6",
+					color: "primary"
+				}, {
+					default: withCtx(() => [createCommentVNode(" Vuetify's `list` role only allows list items, but the items are links "), createVNode(unref(VList), {
+						opened: unref(opened),
+						"onUpdate:opened": _cache[1] || (_cache[1] = ($event) => isRef(opened) ? opened.value = $event : null),
+						nav: "",
+						role: "group"
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
+							return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isParentItem)(item) ? (openBlock(), createBlock(unref(VListGroup), {
+								key: 0,
+								value: item.description
+							}, {
+								activator: withCtx(({ props: activatorProps, isOpen }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, {
+									title: item.description,
+									"prepend-icon": unref(icons)[item.icon],
+									active: unref(isActiveGroup)(item),
+									"aria-expanded": isOpen,
+									"aria-selected": void 0,
+									role: void 0,
+									tag: "button",
+									type: "button",
+									class: "w-100 text-start"
+								}), null, 16, [
+									"title",
+									"prepend-icon",
+									"active",
+									"aria-expanded"
+								])]),
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (childItem, childIndex) => {
+									return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToListItemProps)(childItem.route), {
+										title: childItem.description,
+										onClick: childItem.action
+									}), null, 16, ["title", "onClick"]);
+								}), 128))]),
+								_: 2
+							}, 1032, ["value"])) : (openBlock(), createBlock(unref(VListItem), mergeProps({
+								key: 1,
+								title: item.description,
+								"prepend-icon": unref(icons)[item.icon]
+							}, { ref_for: true }, unref(routeToListItemProps)(item.route), { onClick: item.action }), null, 16, [
+								"title",
+								"prepend-icon",
+								"onClick"
+							]))], 64);
+						}), 128))]),
+						_: 1
+					}, 8, ["opened"])]),
+					_: 1
+				}, 8, ["loading"])]),
+				_: 1
+			}, 8, [
+				"modelValue",
+				"data-testid",
+				"aria-busy",
+				"mobile",
+				"permanent",
+				"rail",
+				"onFocusin",
+				"onFocusout",
+				"onMouseenter",
+				"onMouseleave",
+				"onKeydown"
+			]);
+		};
+	}
+});
+//#endregion
+export { navigation_menu_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/navigation-menu/types.d.ts

@@ -0,0 +1,62 @@
+import { Icon } from "../../consts/types.js";
+import { RouteLocationRaw } from "vue-router";
+//#region src/components/navigation-menu/types.d.ts
+/**
+ * Props exposed by the {@link NavigationMenu} component.
+ */
+export type NavigationMenuProps = {
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+  /**
+   * List of items to show in the {@link NavigationMenu}.
+   * Can be plain items, grouped or both.
+   */
+  items?: Array<NavigationMenuParentItemOrItem>;
+};
+export type NavigationMenuParentItemOrItem = NavigationMenuParentItem | NavigationMenuItem;
+export type NavigationMenuParentItem = {
+  /**
+   * Text to present for the group.
+   */
+  description: string;
+  /**
+   * Icon shown before the group's description, and alone while the menu is collapsed to a rail.
+   * One of the names listed on the "Ícones" guide page.
+   *
+   * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/icons | Icons Guide}
+   */
+  icon: Icon;
+  /**
+   * Child {@link NavigationMenuChildItem} list. Unlike the first level items, they show no icon.
+   */
+  items: Array<NavigationMenuChildItem>;
+};
+/**
+ * Item inside a {@link NavigationMenuParentItem}. Only the first level items and groups show an
+ * icon, so every menu follows the same visual pattern.
+ */
+export type NavigationMenuChildItem = Omit<NavigationMenuItem, "icon">;
+export interface NavigationMenuItem {
+  /**
+   * Text to present for the item.
+   */
+  description: string;
+  /**
+   * Icon shown before the item's description, and alone while the menu is collapsed to a rail.
+   * One of the names listed on the "Ícones" guide page.
+   *
+   * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/icons | Icons Guide}
+   */
+  icon: Icon;
+  /**
+   * Route to navigate when item is clicked.
+   */
+  route?: RouteLocationRaw;
+  /**
+   * Callback to be triggered when the item is clicked.
+   */
+  action?: () => void;
+}
+//#endregion

package/dist/components/page-transition/page-transition.js

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

package/dist/components/page-transition/page-transition.vue.d.ts

@@ -0,0 +1,40 @@
+import { PageTransitionProps } from "./types.js";
+//#region src/components/page-transition/page-transition.vue.d.ts
+/**
+ * Animates the change between the pages rendered by the app's router: the
+ * current page fades out before the next one fades in. When the operating
+ * system asks for reduced motion, the pages change without animation.
+ *
+ * The page is rendered inside a `div` that takes the whole height of its
+ * parent, so any page is animated, whatever it renders at its root. The
+ * change is animated whenever `transitionKey` changes, which defaults to the
+ * current route's `fullPath`: every navigation is animated, including the
+ * ones that only change the route's params, query or hash. Attributes
+ * (`class`, `style`...) aren't passed on.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-main>
+ *     <router-view v-slot="{ Component }">
+ *       <u-page-transition>
+ *         <component :is="Component" />
+ *       </u-page-transition>
+ *     </router-view>
+ *   </u-main>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/page-transition | Page Transition Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<PageTransitionProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<PageTransitionProps> & 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/page-transition/page-transition.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,27 @@
+import { Fragment, computed, createCommentVNode, createElementBlock, createVNode, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+import { VFadeTransition } from "vuetify/components";
+import { useRoute } from "vue-router";
+var page_transition_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "page-transition",
+	props: { transitionKey: {
+		type: String,
+		required: false
+	} },
+	setup(__props) {
+		const props = __props;
+		const route = useRoute();
+		const pageKey = computed(() => props.transitionKey ?? route.fullPath);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" The page is wrapped so any page can be animated, whatever it renders at its root. The\n  wrapper takes the parent's height, so pages with `fullHeight` still have a height to fill "), createVNode(unref(VFadeTransition), { mode: "out-in" }, {
+				default: withCtx(() => [(openBlock(), createElementBlock("div", {
+					key: pageKey.value,
+					class: "h-100"
+				}, [renderSlot(_ctx.$slots, "default")]))]),
+				_: 3
+			})], 2112);
+		};
+	}
+});
+//#endregion
+export { page_transition_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/page-transition/types.d.ts

@@ -0,0 +1,18 @@
+//#region src/components/page-transition/types.d.ts
+/**
+ * Props exposed by the {@link PageTransition} component.
+ */
+export type PageTransitionProps = {
+  /**
+   * Identifies the page on display: the change is animated whenever it
+   * changes. Defaults to the current route's `fullPath`, so every navigation
+   * is animated, including the ones that only change the route's params,
+   * query or hash. Pass another value to choose which navigations are
+   * animated, e.g. `route.path` to not animate when only the query or the
+   * hash changes.
+   *
+   * @default route.fullPath
+   */
+  transitionKey?: string;
+};
+//#endregion

package/dist/components/sections/section/section.js

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

package/dist/components/sections/section/section.vue.d.ts

@@ -0,0 +1,28 @@
+import { SectionProps } from "./types.js";
+//#region src/components/sections/section/section.vue.d.ts
+/**
+ * Section component to group related content and actions, to be used
+ * throughout the application.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-section title="Title" subtitle="Subtitle">
+ *     Content
+ *   </u-section>
+ * <template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<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;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as default };