@nexdom/uimed-vue 2.0.0-beta.27 → 2.0.0-beta.29

package/AGENTS.md

@@ -174,7 +174,14 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 - Never write CSS or `<style>` blocks, and expose styling to consumers only through props.
 - Adjustments that Vuetify exposes as Sass variables (e.g. a font family or a line height) go in `src/styles/settings.scss`, which `vitePluginUimed()` compiles into Vuetify's stylesheets in the apps. That file only configures variables: still no CSS rules.
 - Don't add spacing to Vuetify components: no padding or margin utility classes (`pa-*`, `pt-6`, `px-4`, `ma-2`, ...) and no spacing props overriding the defaults. Vuetify already applies Material Design 3 spacing, and overriding it breaks what it handles on its own, such as button paddings and the scrollbar of scrollable content. If the default spacing looks wrong, stop and ask instead of adjusting it. The one accepted layout margin is `mt-auto` on `v-card-actions` (as in `USection`), which pushes the actions to the bottom of a full-height card without setting any spacing value.
-- Prefer a Vuetify component's own props to building its parts by hand (e.g. `title`/`text` on `v-card` instead of `v-card-item` > `v-card-title` > `v-card-text`). A non-spacing utility class is acceptable only when no prop covers the need (e.g. `text-wrap` on a card title), with a comment saying why.
+- Prefer a Vuetify component's own props to building its parts by hand (e.g. `title`/`text` on `v-card` instead of `v-card-item` > `v-card-title` > `v-card-text`). A non-spacing utility class is acceptable only when no prop covers the need (e.g. `text-wrap` on a card title), with a comment saying why. Props covered by the shared composables below are the exception: they always go through them.
+- Reuse the shared internal composables for props that recur across components, so every component maps them to Vuetify the same way, instead of mapping them again:
+  - `fullWidth`/`fullHeight`: `useFullWidth`/`useFullHeight` (`src/composables/dimensions/dimensions.ts`), applying Vuetify's `w-100`/`h-100` classes even where the component has `width`/`height` props.
+  - `alignX`/`alignY`: `useAlignX`/`useAlignY` (`src/composables/alignment/alignment.ts`), with the `AlignX`/`AlignY` types from the group's `types.ts`.
+  - `color`: `useVuetifyColor` (`src/composables/colors/use-vuetify-color.ts`), with the `ColorVariant` type from the group's `types.ts`.
+
+  A new prop that does the same as one of these takes its name and type. When a second component needs a mapping that only one component has, move it into a shared composable first.
+
 - Keep components thin: a component wires props, slots and events to Vuetify. Logic beyond that (focus management, queues, DOM lookups, comparisons) goes into an internal composable with its own unit tests.
 - Path aliases: `@/*` → `src/*`, `@e2e/*` → `e2e/*`.
 - Every public component follows this pattern to block access to internals and give it an editor-hover description:

package/dist/components.d.ts

@@ -1,4 +1,4 @@
-import { t as ButtonProps } from "./types-Zex9kf7C.js";
+import { t as ButtonProps } from "./types-DNT_odv7.js";
 import { RouteLocationRaw } from "vue-router";
 //#region src/components/app-bar/types.d.ts
 /**
@@ -621,6 +621,12 @@ declare const __VLS_export$12: import("vue", { with: { "resolution-mode": "impor
  * Props exposed by the {@link Container} component.
  */
 type ContainerProps = {
+  /**
+   * Stretches the container to the whole height of its parent, which must have a height of its
+   * own, e.g. the content area of `UMain`.
+   * @default false
+   */
+  fullHeight?: boolean;
   /**
    * Component id to use on automated tests.
    */
@@ -652,6 +658,18 @@ type __VLS_WithSlots$8<T, S> = T & {
   };
 };
 //#endregion
+//#region src/composables/alignment/types.d.ts
+/**
+ * Horizontal alignment of a component's items: to the start, to the center or to the end,
+ * following the text direction.
+ */
+type AlignX = "start" | "center" | "end";
+/**
+ * Vertical alignment of a component's items: to the top, to the center, to the bottom, or
+ * stretched to the whole height available.
+ */
+type AlignY = "start" | "center" | "end" | "stretch";
+//#endregion
 //#region src/components/grid/row/types.d.ts
 /**
  * Props exposed by the {@link Row} component.
@@ -672,7 +690,7 @@ type RowProps = {
    * whole line, so the alignment has no visible effect.
    * @default "start"
    */
-  alignX?: RowAlignX;
+  alignX?: AlignX;
   /**
    * Vertical alignment of the row's columns, relative to the tallest column on the same line.
    * Available options are:
@@ -685,10 +703,21 @@ type RowProps = {
    * `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.
+   * whole line, so the alignment has no visible effect, unless the row has `fullHeight`: then
+   * the columns, as a group, are aligned within the row's height.
    * @default "start"
    */
-  alignY?: RowAlignY;
+  alignY?: AlignY;
+  /**
+   * Stretches the row to the whole height of its parent: the visible content area of `UMain`
+   * (below its app bar) or a `UContainer` with `fullHeight`.
+   *
+   * Combine it with `alignY` to place the columns within that height, e.g. `alignY="center"`
+   * and `alignX="center"` to center a login form on the screen. A row with `fullHeight` takes
+   * the whole height by itself, so other rows next to it are pushed below the visible area.
+   * @default false
+   */
+  fullHeight?: boolean;
   /**
    * Renders the row as a list (`<ul>`), without the list's default indentation
    * and bullets, so assistive technologies announce its columns as the items
@@ -702,8 +731,6 @@ type RowProps = {
    */
   dataTestid?: string;
 };
-type RowAlignX = "start" | "center" | "end";
-type RowAlignY = "start" | "center" | "end" | "stretch";
 //#endregion
 //#region src/components/grid/row/row.vue.d.ts
 /**
@@ -723,10 +750,7 @@ type RowAlignY = "start" | "center" | "end" | "stretch";
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
  */
 declare const _default$13: typeof __VLS_export$10;
-declare const __VLS_export$10: __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<{}>, {
-  alignX: RowAlignX;
-  alignY: RowAlignY;
-}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export$10: __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>, {
   default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots$7<T, S> = T & {

package/dist/components.js

@@ -676,24 +676,48 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/composables/dimensions/dimensions.ts
+/**
+* Vuetify's utility class that stretches a component to the whole width of its parent, for
+* components with a `fullWidth` prop.
+*/
+function useFullWidth(fullWidth) {
+	return computed(() => toValue(fullWidth) ? "w-100" : void 0);
+}
+/**
+* Vuetify's utility class that stretches a component to the whole height of its parent, for
+* components with a `fullHeight` prop. The parent must have a height of its own.
+*/
+function useFullHeight(fullHeight) {
+	return computed(() => toValue(fullHeight) ? "h-100" : void 0);
+}
+//#endregion
 //#region src/components/grid/container/container.vue
 var container_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "container",
-	props: { dataTestid: {
-		type: String,
-		required: false
-	} },
+	props: {
+		fullHeight: {
+			type: Boolean,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
 	setup(__props) {
 		const props = __props;
+		const heightClass = useFullHeight(() => props.fullHeight);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VContainer), {
+				class: normalizeClass(unref(heightClass)),
 				"data-testid": props.dataTestid,
 				fluid: ""
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["data-testid"]);
+			}, 8, ["class", "data-testid"]);
 		};
 	}
 });
@@ -772,6 +796,10 @@ var button_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			required: false
 		},
+		fullWidth: {
+			type: Boolean,
+			required: false
+		},
 		form: {
 			type: String,
 			required: false
@@ -789,6 +817,7 @@ var button_default = /* @__PURE__ */ defineComponent({
 		const color = useVuetifyColor(() => props.color);
 		const type = useButtonType(() => props.type);
 		const form = useButtonForm(() => props.form);
+		const widthClass = useFullWidth(() => props.fullWidth);
 		function onClick(event) {
 			emit("click", event);
 		}
@@ -801,6 +830,7 @@ var button_default = /* @__PURE__ */ defineComponent({
 				color: unref(color),
 				type: unref(type),
 				form: unref(form),
+				class: normalizeClass(unref(widthClass)),
 				onClick
 			}, {
 				loader: withCtx(() => [createVNode(unref(VProgressCircular), {
@@ -817,7 +847,8 @@ var button_default = /* @__PURE__ */ defineComponent({
 				"variant",
 				"color",
 				"type",
-				"form"
+				"form",
+				"class"
 			]);
 		};
 	}
@@ -1137,7 +1168,7 @@ var main_default = /* @__PURE__ */ defineComponent({
 						loading: props.loading
 					}), null, 16, ["modelValue", "loading"])) : createCommentVNode("v-if", true),
 					createVNode(unref(VMain), null, {
-						default: withCtx(() => [createVNode(container_default, 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),
@@ -1366,6 +1397,15 @@ var checkbox_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/composables/inputs/date-time-field.ts
 /**
+* The menu's content is a dialog with the pickers. `aria-owns` is removed since the input can't
+* own the content, and the menu still adds `aria-expanded` and `aria-controls`.
+*/
+const activatorProps = {
+	role: "combobox",
+	"aria-haspopup": "dialog",
+	"aria-owns": void 0
+};
+/**
 * Extracts the date part (`YYYY-MM-DD`) of a value, or an empty string when
 * the type has no date.
 */
@@ -1423,6 +1463,31 @@ function useDateTimeFieldPickerBounds(props, selectedDate) {
 		};
 	});
 }
+/**
+* Makes the field's input the activator of the pickers' menu, so the menu's attributes are on an
+* element whose role accepts them.
+* @param isOpen - Whether the menu is open.
+* @param isDisabled - Whether the menu can't open, as when the field is disabled or readonly.
+* @param hasLabel - Whether the field has a label, which names the menu's dialog.
+*/
+function useDateTimeFieldMenu(isOpen, isDisabled, hasLabel) {
+	const inputId = useId();
+	const activator = computed(() => toValue(isDisabled) ? void 0 : `#${inputId}`);
+	const contentProps = computed(() => ({
+		role: "dialog",
+		"aria-labelledby": toValue(hasLabel) ? `${inputId}-label` : void 0
+	}));
+	function open() {
+		if (!toValue(isDisabled)) isOpen.value = true;
+	}
+	return {
+		inputId,
+		activator,
+		activatorProps,
+		contentProps,
+		open
+	};
+}
 function getTimeBound(bound, type, selectedDate) {
 	if (type === "datetime" && getDatePart(bound, type) !== selectedDate) return "";
 	return getTimePart(bound, type);
@@ -1518,6 +1583,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 		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);
+		const { inputId, activator, activatorProps, contentProps, open: openMenu } = useDateTimeFieldMenu(isMenuOpen, isMenuDisabled, () => !!props.label);
 		watch(isMenuOpen, () => {
 			draft.value = {};
 		});
@@ -1541,6 +1607,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VTextField), {
+				id: unref(inputId),
 				"model-value": displayValue.value,
 				"validation-value": modelValue.value,
 				variant: unref(vuetifyVariant),
@@ -1554,13 +1621,17 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				hint: props.hint,
 				clearable: isClearable.value,
 				readonly: "",
-				"onClick:clear": clear
+				"onClick:clear": clear,
+				"onClick:control": unref(openMenu)
 			}, {
 				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
 				default: withCtx(() => [createVNode(unref(VMenu), {
 					modelValue: isMenuOpen.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event),
-					activator: "parent",
+					activator: unref(activator),
+					target: "parent",
+					"activator-props": unref(activatorProps),
+					"content-props": unref(contentProps),
 					location: "bottom start",
 					"min-width": "0",
 					disabled: isMenuDisabled.value,
@@ -1600,9 +1671,16 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 						_: 1
 					})]),
 					_: 1
-				}, 8, ["modelValue", "disabled"])]),
+				}, 8, [
+					"modelValue",
+					"activator",
+					"activator-props",
+					"content-props",
+					"disabled"
+				])]),
 				_: 1
 			}, 8, [
+				"id",
 				"model-value",
 				"validation-value",
 				"variant",
@@ -1614,12 +1692,52 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				"label",
 				"placeholder",
 				"hint",
-				"clearable"
+				"clearable",
+				"onClick:control"
 			]);
 		};
 	}
 });
 //#endregion
+//#region src/composables/alignment/alignment.ts
+const alignXToClass = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end"
+};
+const alignYToClasses = {
+	start: {
+		items: "align-start",
+		content: "align-content-start"
+	},
+	center: {
+		items: "align-center",
+		content: "align-content-center"
+	},
+	end: {
+		items: "align-end",
+		content: "align-content-end"
+	},
+	stretch: {
+		items: "align-stretch",
+		content: "align-content-stretch"
+	}
+};
+/**
+* Vuetify's `justify-*` utility class for components with an `alignX` prop, laid out with flexbox.
+* Falls back to `"start"`.
+*/
+function useAlignX(alignX) {
+	return computed(() => alignXToClass[toValue(alignX) ?? "start"]);
+}
+/**
+* Vuetify's `align-*` and `align-content-*` utility classes for components with an `alignY` prop,
+* laid out with flexbox. Falls back to `"start"`.
+*/
+function useAlignY(alignY) {
+	return computed(() => alignYToClasses[toValue(alignY) ?? "start"]);
+}
+//#endregion
 //#region src/components/grid/row/row.vue
 var row_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
@@ -1627,13 +1745,15 @@ var row_default = /* @__PURE__ */ defineComponent({
 	props: {
 		alignX: {
 			type: String,
-			required: false,
-			default: "start"
+			required: false
 		},
 		alignY: {
 			type: String,
-			required: false,
-			default: "start"
+			required: false
+		},
+		fullHeight: {
+			type: Boolean,
+			required: false
 		},
 		list: {
 			type: Boolean,
@@ -1646,27 +1766,20 @@ var row_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
-		const rowAlignXToClass = {
-			start: "justify-start",
-			center: "justify-center",
-			end: "justify-end"
-		};
-		const rowAlignYToClass = {
-			start: "align-start",
-			center: "align-center",
-			end: "align-end",
-			stretch: "align-stretch"
-		};
-		const alignXClass = computed(() => rowAlignXToClass[props.alignX]);
-		const alignYClass = computed(() => rowAlignYToClass[props.alignY]);
+		const alignXClass = useAlignX(() => props.alignX);
+		const alignYClasses = useAlignY(() => props.alignY);
+		const heightClass = useFullHeight(() => props.fullHeight);
+		const alignContentClass = computed(() => props.fullHeight ? alignYClasses.value.content : void 0);
 		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([
-					alignXClass.value,
-					alignYClass.value,
+					unref(alignXClass),
+					unref(alignYClasses).items,
+					unref(heightClass),
+					alignContentClass.value,
 					listClasses.value
 				]),
 				"data-testid": props.dataTestid
@@ -1854,25 +1967,27 @@ var section_default = /* @__PURE__ */ defineComponent({
 		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);
-		const height = computed(() => props.fullHeight ? "100%" : void 0);
+		const widthClass = useFullWidth(() => props.fullWidth);
+		const heightClass = useFullHeight(() => props.fullHeight);
 		const showActions = computed(() => !!props.actions?.length);
 		const skeletonType = computed(() => showActions.value ? "image, actions" : "image");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VSkeletonLoader), {
 				loading: props.loading,
 				type: skeletonType.value,
-				width: width.value,
-				height: height.value
+				class: normalizeClass([unref(widthClass), unref(heightClass)])
 			}, {
 				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: normalizeClass(["d-flex flex-column", unref(textAlignClasses).content])
+					class: normalizeClass([
+						"d-flex flex-column",
+						unref(widthClass),
+						unref(heightClass),
+						unref(textAlignClasses).content
+					])
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default"), showActions.value ? (openBlock(), createBlock(unref(VCardActions), {
 						key: 0,
@@ -1891,8 +2006,6 @@ var section_default = /* @__PURE__ */ defineComponent({
 					"title",
 					"subtitle",
 					"variant",
-					"width",
-					"height",
 					"data-testid",
 					"class"
 				])]),
@@ -1900,8 +2013,7 @@ var section_default = /* @__PURE__ */ defineComponent({
 			}, 8, [
 				"loading",
 				"type",
-				"width",
-				"height"
+				"class"
 			]);
 		};
 	}

package/dist/composables.d.ts

@@ -1,4 +1,4 @@
-import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-Zex9kf7C.js";
+import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-DNT_odv7.js";
 //#region src/composables/dialogs/types.d.ts
 interface ToastOptions {
   /**

package/dist/{types-Zex9kf7C.d.ts → types-DNT_odv7.d.ts}

@@ -38,6 +38,12 @@ type ButtonProps = {
    * @default false
    */
   loading?: boolean;
+  /**
+   * Stretches the button to the whole width of its parent, e.g. the only action of a form on a
+   * small screen.
+   * @default false
+   */
+  fullWidth?: boolean;
   /**
    * Associated [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/form) id.
    */

package/package.json

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