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

package/dist/components.d.ts

@@ -842,6 +842,7 @@ type __VLS_WithSlots$4<T, S> = T & {
 //#endregion
 //#region src/components/sections/section/types.d.ts
 type SectionVariant = "primary" | "secondary";
+type SectionTextAlign = "start" | "center" | "end";
 /**
  * Props exposed by the {@link Section} component.
  */
@@ -860,6 +861,20 @@ type SectionProps = {
    * Subtitle displayed below the title.
    */
   subtitle?: string;
+  /**
+   * Horizontal alignment of the section's title, subtitle, content and actions.
+   * Available options are:
+   * - `"start"`: aligns the text to the start (left in left-to-right languages)
+   *   and keeps the actions at the end;
+   * - `"center"`: centers the text and the actions;
+   * - `"end"`: aligns the text and the actions to the end.
+   *
+   * Uses `start`/`end` instead of `left`/`right`, so it follows the text
+   * direction in right-to-left languages. Nested components inherit the
+   * alignment, unless they define their own.
+   * @default "start"
+   */
+  textAlign?: SectionTextAlign;
   /**
    * List of actions displayed at the bottom of the section, inside
    * `v-card-actions`. When undefined or empty, no actions area is rendered.

package/dist/components.js

@@ -1615,6 +1615,26 @@ function useSectionVariant(variant) {
 		return variantValue ? sectionVariantToVuetifyVariant[variantValue] : sectionVariantToVuetifyVariant.primary;
 	});
 }
+const sectionTextAlignToClasses = {
+	start: {
+		content: "text-start",
+		actions: "justify-end"
+	},
+	center: {
+		content: "text-center",
+		actions: "justify-center"
+	},
+	end: {
+		content: "text-end",
+		actions: "justify-end"
+	}
+};
+function useSectionTextAlign(textAlign) {
+	return computed(() => {
+		const textAlignValue = toValue(textAlign);
+		return textAlignValue ? sectionTextAlignToClasses[textAlignValue] : sectionTextAlignToClasses.start;
+	});
+}
 //#endregion
 //#region src/components/sections/section/section.vue
 var section_default = /* @__PURE__ */ defineComponent({
@@ -1633,6 +1653,10 @@ var section_default = /* @__PURE__ */ defineComponent({
 			type: String,
 			required: false
 		},
+		textAlign: {
+			type: String,
+			required: false
+		},
 		actions: {
 			type: Array,
 			required: false
@@ -1657,6 +1681,7 @@ var section_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const variant = useSectionVariant(() => props.variant);
+		const textAlignClasses = useSectionTextAlign(() => props.textAlign);
 		const title = computed(() => props.title || void 0);
 		const subtitle = computed(() => props.subtitle || void 0);
 		const width = computed(() => props.fullWidth ? "100%" : void 0);
@@ -1670,18 +1695,18 @@ var section_default = /* @__PURE__ */ defineComponent({
 				width: width.value,
 				height: height.value
 			}, {
-				default: withCtx(() => [createVNode(unref(VCard), {
+				default: withCtx(() => [createCommentVNode(" The card and its actions have no alignment props, so `textAlign` uses utility classes "), createVNode(unref(VCard), {
 					title: title.value,
 					subtitle: subtitle.value,
 					variant: unref(variant),
 					width: width.value,
 					height: height.value,
 					"data-testid": props.dataTestid,
-					class: "d-flex flex-column"
+					class: normalizeClass(["d-flex flex-column", unref(textAlignClasses).content])
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default"), showActions.value ? (openBlock(), createBlock(unref(VCardActions), {
 						key: 0,
-						class: "mt-auto justify-end"
+						class: normalizeClass(["mt-auto", unref(textAlignClasses).actions])
 					}, {
 						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 }), {
@@ -1690,7 +1715,7 @@ var section_default = /* @__PURE__ */ defineComponent({
 							}, 1040, ["onClick"]);
 						}), 128))]),
 						_: 1
-					})) : createCommentVNode("v-if", true)]),
+					}, 8, ["class"])) : createCommentVNode("v-if", true)]),
 					_: 3
 				}, 8, [
 					"title",
@@ -1698,7 +1723,8 @@ var section_default = /* @__PURE__ */ defineComponent({
 					"variant",
 					"width",
 					"height",
-					"data-testid"
+					"data-testid",
+					"class"
 				])]),
 				_: 3
 			}, 8, [

package/package.json

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