@nexdom/uimed-vue 2.0.0-beta.17 → 2.0.0-beta.19

package/dist/components.d.ts

@@ -651,6 +651,22 @@ type __VLS_WithSlots$8<T, S> = T & {
  * Props exposed by the {@link Row} component.
  */
 type RowProps = {
+  /**
+   * Vertical alignment of the row's columns, relative to the tallest column on the same line.
+   * Available options are:
+   * - `"start"`: aligns the columns to the top;
+   * - `"center"`: centers the columns vertically;
+   * - `"end"`: aligns the columns to the bottom;
+   * - `"stretch"`: stretches every column to the height of the tallest one.
+   *
+   * Use `"stretch"` to keep side by side columns at the same height, e.g. cards made of
+   * `USection`s with `fullHeight`.
+   *
+   * Columns sit side by side only from the `sm` breakpoint up. Below it, each column takes a
+   * whole line, so the alignment has no visible effect.
+   * @default "start"
+   */
+  align?: RowAlign;
   /**
    * Renders the row as a list (`<ul>`), without the list's default indentation
    * and bullets, so assistive technologies announce its columns as the items
@@ -664,6 +680,7 @@ type RowProps = {
    */
   dataTestid?: string;
 };
+type RowAlign = "start" | "center" | "end" | "stretch";
 //#endregion
 //#region src/components/grid/row/row.vue.d.ts
 /**
@@ -673,7 +690,7 @@ type RowProps = {
  * ```vue
  * <template>
  *   <u-container>
- *    <u-row>
+ *     <u-row align="center">
  *       <!-- uimed-column -->
  *     </u-row>
  *   </u-container>
@@ -683,7 +700,9 @@ type RowProps = {
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
  */
 declare const _default$12: typeof __VLS_export$9;
-declare const __VLS_export$9: __VLS_WithSlots$7<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>, {
+declare const __VLS_export$9: __VLS_WithSlots$7<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<{}>, {
+  align: RowAlign;
+}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots$7<T, S> = T & {
@@ -853,6 +872,9 @@ type SectionProps = {
   fullWidth?: boolean;
   /**
    * Makes the section occupy 100% of its parent's height.
+   *
+   * Inside a `URow`, set its `align` to `"stretch"` so the section takes the height of the
+   * tallest column on the same line.
    * @default false
    */
   fullHeight?: boolean;

package/dist/components.js

@@ -80,6 +80,8 @@ 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);
+		const unreadLabel = computed(() => unreadCount.value === 1 ? "1 não lida" : `${unreadCount.value} não lidas`);
+		const notificationsLabel = computed(() => hasUnreadNotifications.value ? `Notificações (${unreadLabel.value})` : "Notificações");
 		watch(() => props.loading, (loading) => {
 			if (loading) notificationsOpen.value = false;
 		});
@@ -100,6 +102,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [
 						showHelp.value ? (openBlock(), createBlock(unref(VBtn), mergeProps({ key: 0 }, unref(routeProps), {
 							"data-testid": helpBtnDataTestid.value,
+							"aria-label": "Ajuda",
 							icon: "mdi-help-circle-outline"
 						}), null, 16, ["data-testid"])) : createCommentVNode("v-if", true),
 						showNotifications.value ? (openBlock(), createBlock(unref(VMenu), {
@@ -110,18 +113,24 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 						}, {
 							activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
 								"data-testid": notificationsBtnDataTestid.value,
+								"aria-label": notificationsLabel.value,
 								icon: ""
 							}), {
 								default: withCtx(() => [createVNode(unref(VBadge), {
 									"model-value": hasUnreadNotifications.value,
 									content: unreadCount.value,
+									label: unreadLabel.value,
 									color: "error"
 								}, {
 									default: withCtx(() => [createVNode(unref(VIcon), { icon: "mdi-bell-outline" })]),
 									_: 1
-								}, 8, ["model-value", "content"])]),
+								}, 8, [
+									"model-value",
+									"content",
+									"label"
+								])]),
 								_: 1
-							}, 16, ["data-testid"])]),
+							}, 16, ["data-testid", "aria-label"])]),
 							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, {
@@ -162,6 +171,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 						}, {
 							activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
 								"data-testid": userBtnDataTestid.value,
+								"aria-label": "Menu do usuário",
 								icon: ""
 							}), {
 								default: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
@@ -209,8 +219,10 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 					__props.navigation ? (openBlock(), createBlock(unref(VAppBarNavIcon), {
 						key: 0,
 						"data-testid": navigationBtnDataTestid.value,
+						"aria-expanded": navigationOpen.value,
+						"aria-label": "Menu de navegação",
 						onClick: _cache[0] || (_cache[0] = ($event) => navigationOpen.value = !navigationOpen.value)
-					}, null, 8, ["data-testid"])) : createCommentVNode("v-if", true),
+					}, null, 8, ["data-testid", "aria-expanded"])) : createCommentVNode("v-if", true),
 					__props.logo ? (openBlock(), createBlock(unref(VImg), {
 						key: 1,
 						src: props.logo,
@@ -1458,6 +1470,11 @@ var row_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "row",
 	props: {
+		align: {
+			type: String,
+			required: false,
+			default: "start"
+		},
 		list: {
 			type: Boolean,
 			required: false
@@ -1469,12 +1486,19 @@ var row_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
+		const rowAlignToClass = {
+			start: "align-start",
+			center: "align-center",
+			end: "align-end",
+			stretch: "align-stretch"
+		};
+		const alignClass = computed(() => rowAlignToClass[props.align]);
 		const tag = computed(() => props.list ? "ul" : void 0);
 		const listClasses = computed(() => props.list ? "pa-0 ma-0" : void 0);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VRow), {
 				tag: tag.value,
-				class: normalizeClass(listClasses.value),
+				class: normalizeClass([alignClass.value, listClasses.value]),
 				"data-testid": props.dataTestid
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
@@ -2025,7 +2049,10 @@ var data_set_default = /* @__PURE__ */ defineComponent({
 						type: "search",
 						label: "Pesquisar"
 					}, null, 8, ["modelValue"])) : createCommentVNode("v-if", true)]),
-					default: withCtx(({ items: pageItems }) => [createVNode(row_default, { list: "" }, {
+					default: withCtx(({ items: pageItems }) => [createCommentVNode(" Stretched, so the items of the same line (e.g. full-height cards) share its height "), createVNode(row_default, {
+						list: "",
+						align: "stretch"
+					}, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(pageItems, (pageItem, index) => {
 							return openBlock(), createBlock(column_default, {
 								key: index,

package/package.json

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