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

package/dist/components.d.ts

@@ -429,8 +429,8 @@ declare const __VLS_export$13: import("vue", { with: { "resolution-mode": "impor
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   variant: TextFieldVariant;
-  type: TextFieldType;
   clearable: boolean;
+  type: TextFieldType;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/inputs/checkbox/types.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

@@ -1458,6 +1458,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 +1474,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 +2037,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.18",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",