@nexdom/uimed-vue 2.0.0-beta.21 → 2.0.0-beta.23

package/AGENTS.md

@@ -112,12 +112,12 @@ On Windows, prefer VSCode's "Dev Containers: Clone Repository in Container Volum
 - `vpr check` — lint, formatter, and type-check (builds the library first, since the type-check reads `dist`)
 - `vp test --coverage` — unit tests with coverage (Vitest, jsdom, 100% coverage threshold enforced)
 - `vpr test:mutations` — mutation tests (Stryker; thresholds: high 100, low 100, break 100). It starts one test runner per CPU core; on machines with limited memory, run `vpx stryker run --concurrency 4` instead
-- `vpr test:e2e` — E2E tests (Playwright, runs against the built docs preview site). Outside CI it reuses any server already on port 4173, which is also `vpr docs:dev`'s port: stop the dev server first, or the tests run against it instead of the built site
+- `vpr test:e2e` — E2E tests (Playwright, runs against the built docs preview site). Outside CI it reuses any server already on port 4173, which is also `vpr docs:dev`'s port: stop the dev server first, or the tests run against it instead of the built site. A running `vitepress preview` keeps serving the build it started with, so restart it after rebuilding the docs
 - `vpr depcruise` — architecture/dependency rules (dependency-cruiser)
 - `vp pack` / `vpr build` — build the library
 - `vpr docs` / `vpr docs:dev` — run docs site (imports the lib from `dist`, not `src` — run `vpr dev` in a second terminal to keep `dist` updated while iterating)
 
-CI (`.github/workflows/ci.yml`) runs, in order: commitlint on PR commits, `vp pack`, `vpr check`, `vpr depcruise`, `vp test --coverage`, `vpr test:mutations`, `vpr test:e2e`. Match this locally before opening a PR.
+CI (`.github/workflows/ci.yml`) runs, in order: commitlint on PR commits, `vp pack`, `vpr check`, `vpr depcruise`, `vp test --coverage`, `vpr test:mutations`, `vpr test:e2e`, and then the SonarQube analysis (`vpr sonar`), whose quality gate fails the PR on any issue or unreviewed security hotspot in `src/` (see [Static analysis](#static-analysis-sonarqube)). Match this locally before opening a PR.
 
 ### Focused runs while iterating
 
@@ -139,6 +139,12 @@ vpx stryker run --mutate "src/components/button/button.vue,src/composables/butto
 vpr test:e2e e2e/components/button.spec.ts
 ```
 
+### Static analysis (SonarQube)
+
+The company's SonarQube runs only in CI, after the E2E tests. Write code that avoids the rules that have already failed PRs here: use `globalThis` instead of `window`; move inner functions that don't use anything from the outer function out of it (S7721); don't use deprecated APIs (e.g. `event.returnValue`); don't write template comments that look like code; don't add non-null assertions or casts that don't change the type (S4325); no regular expressions with super-linear backtracking, such as two overlapping quantifiers (S5852); and prefer native elements to `role` attributes (S6819).
+
+Only if CI's SonarQube step fails and its dashboard doesn't show why, reproduce the analysis with a local SonarQube Community in the server's version (`sonarqube:26.3.0.120487-community`) and `vpx @sonar/scan` pointed at it. The goal is 0 issues and no new security hotspots in the files the PR changed.
+
 ## Adding a new component
 
 Use an existing component (e.g. `button`) as the reference, and deliver all of the following in the same PR:
@@ -205,6 +211,9 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 - Coverage threshold is 100%; mutation testing threshold is 100% (break at 100). Don't add code paths without covering tests. Mutants that don't compile are reported as compile errors and don't count toward the score.
 - E2E tests (Playwright, `e2e/`) run against the built docs preview (`http://localhost:4173/uimed-vue/`). Snapshots/screenshots live under `__snapshots__`/`__screenshot__` next to each spec.
 - Before keeping a new screenshot as a baseline, open it and check it against how plain Vuetify renders the same component: overflowing content shows its scrollbar, buttons and cards keep their native paddings, nothing touches the edges or gets clipped. A screenshot that only "looks fine" isn't enough: name what you checked in your report.
+- Generate and update screenshots only on Linux, as CI does: in the Dev Container, or in the Playwright Docker image of the version in `package.json` (`mcr.microsoft.com/playwright:v<version>-noble`). Screenshots taken on Windows or macOS render fonts differently and fail in CI.
+- Update baselines with `--update-snapshots=changed`, scoped to the spec you changed. `--update-snapshots=all` also rewrites accessible snapshots (`.aria.yml`) that didn't need to change.
+- Keep temporary files (scripts, specs, configs) outside the repo, e.g. in the system's temp folder. Vitest collects test files from every folder except the excluded ones in `vite.config.ts`, so a temporary spec in a gitignored folder such as `reports/` still runs, and fails, with the unit tests.
 - Never run Stryker at the same time as another test command: they share build output and Stryker fails with `ENOENT`.
 - Unit tests that mount several apps at once (e.g. nested dialogs) need a distinct `global.config.idPrefix` per mount, since `useId()` restarts in each app.
 - In E2E, a paused `page.clock` also freezes transitions, so overlays never finish leaving. Use `page.clock.pauseAt` to hold time-based work (e.g. a demo action with `setTimeout`), `page.clock.fastForward` to complete it, then `page.clock.resume()` before expecting the overlay to be hidden (see `e2e/composables/use-confirm.spec.ts`).

package/dist/components.d.ts

@@ -254,7 +254,9 @@ type TextFieldProps = {
    */
   disabled?: boolean;
   /**
-   * Displays a loading indicator on the input.
+   * Displays a loading indicator on the input. The field keeps its label as
+   * accessible name and is marked as busy, and assistive technologies ignore
+   * the indicator.
    * @default false
    */
   loading?: boolean;
@@ -317,7 +319,9 @@ type AutocompleteFieldProps<T = string, Multiple extends boolean = false> = {
    */
   disabled?: boolean;
   /**
-   * Displays a loading indicator on the input.
+   * Displays a loading indicator on the input. The field keeps its label as
+   * accessible name and is marked as busy, and assistive technologies ignore
+   * the indicator.
    * @default false
    */
   loading?: boolean;
@@ -541,7 +545,9 @@ type DateTimeFieldProps = {
    */
   disabled?: boolean;
   /**
-   * Displays a loading indicator on the input.
+   * Displays a loading indicator on the input. The field keeps its label as
+   * accessible name and is marked as busy, and assistive technologies ignore
+   * the indicator.
    * @default false
    */
   loading?: boolean;
@@ -651,6 +657,22 @@ type __VLS_WithSlots$8<T, S> = T & {
  * Props exposed by the {@link Row} component.
  */
 type RowProps = {
+  /**
+   * Horizontal alignment of the row's columns on each line.
+   * Available options are:
+   * - `"start"`: aligns the columns to the start of the line;
+   * - `"center"`: centers the columns horizontally;
+   * - `"end"`: aligns the columns to the end of the line.
+   *
+   * `"start"` and `"end"` follow the text direction. It only has a visible effect when the
+   * columns of a line don't fill it, e.g. with `cols="auto"` or sizes adding up to less than 12.
+   * When the columns wrap into several lines, each line is aligned on its own.
+   *
+   * 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"
+   */
+  alignX?: RowAlignX;
   /**
    * Vertical alignment of the row's columns, relative to the tallest column on the same line.
    * Available options are:
@@ -666,7 +688,7 @@ type RowProps = {
    * whole line, so the alignment has no visible effect.
    * @default "start"
    */
-  align?: RowAlign;
+  alignY?: RowAlignY;
   /**
    * Renders the row as a list (`<ul>`), without the list's default indentation
    * and bullets, so assistive technologies announce its columns as the items
@@ -680,7 +702,8 @@ type RowProps = {
    */
   dataTestid?: string;
 };
-type RowAlign = "start" | "center" | "end" | "stretch";
+type RowAlignX = "start" | "center" | "end";
+type RowAlignY = "start" | "center" | "end" | "stretch";
 //#endregion
 //#region src/components/grid/row/row.vue.d.ts
 /**
@@ -690,7 +713,7 @@ type RowAlign = "start" | "center" | "end" | "stretch";
  * ```vue
  * <template>
  *   <u-container>
- *     <u-row align="center">
+ *     <u-row align-x="center" align-y="center">
  *       <!-- uimed-column -->
  *     </u-row>
  *   </u-container>
@@ -701,7 +724,8 @@ type RowAlign = "start" | "center" | "end" | "stretch";
  */
 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<{}>, {
-  align: RowAlign;
+  alignX: RowAlignX;
+  alignY: RowAlignY;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
@@ -888,7 +912,7 @@ type SectionProps = {
   /**
    * 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
+   * Inside a `URow`, set its `alignY` to `"stretch"` so the section takes the height of the
    * tallest column on the same line.
    * @default false
    */

package/dist/components.js

@@ -1,7 +1,7 @@
 import { a as messages, n as owners, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, isRef, mergeModels, mergeProps, normalizeClass, onMounted, onScopeDispose, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 import { pt } from "vuetify/locale";
-import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
+import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
 import { formatDateTime, isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
 //#region src/composables/navigation/use-route-props.ts
 function useRouteProps(route) {
@@ -315,6 +315,34 @@ function associatedRuleType(type) {
 	return type in textFieldTypeToVuetifyRule;
 }
 //#endregion
+//#region src/components/inputs/field-loader.vue
+var field_loader_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "field-loader",
+	props: {
+		color: {
+			type: String,
+			required: false
+		},
+		isActive: {
+			type: Boolean,
+			required: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VProgressLinear), {
+				active: props.isActive,
+				color: props.color,
+				height: "2",
+				indeterminate: "",
+				"aria-hidden": "true"
+			}, null, 8, ["active", "color"]);
+		};
+	}
+});
+//#endregion
 //#region src/components/inputs/text-field/text-field.vue
 var text_field_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
@@ -398,13 +426,17 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 				"data-testid": props.dataTestid,
 				disabled: props.disabled,
 				loading: props.loading,
+				"aria-busy": props.loading || void 0,
 				readonly: props.readonly,
 				label: props.label,
 				placeholder: props.placeholder,
 				hint: props.hint,
 				clearable: computedClearable.value,
 				"onClick:clear": clear
-			}, null, 8, [
+			}, {
+				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
+				_: 1
+			}, 8, [
 				"modelValue",
 				"variant",
 				"type",
@@ -413,6 +445,7 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 				"data-testid",
 				"disabled",
 				"loading",
+				"aria-busy",
 				"readonly",
 				"label",
 				"placeholder",
@@ -1115,6 +1148,7 @@ var autocomplete_field_default = /* @__PURE__ */ defineComponent({
 				"data-testid": props.dataTestid,
 				disabled: props.disabled,
 				loading: props.loading,
+				"aria-busy": props.loading || void 0,
 				readonly: props.readonly,
 				label: props.label,
 				placeholder: props.placeholder,
@@ -1124,13 +1158,17 @@ var autocomplete_field_default = /* @__PURE__ */ defineComponent({
 				"item-title": "label",
 				rules: unref(rules),
 				chips: ""
-			}, null, 8, [
+			}, {
+				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
+				_: 1
+			}, 8, [
 				"modelValue",
 				"variant",
 				"items",
 				"data-testid",
 				"disabled",
 				"loading",
+				"aria-busy",
 				"readonly",
 				"label",
 				"placeholder",
@@ -1396,6 +1434,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				"data-testid": props.dataTestid,
 				disabled: props.disabled,
 				loading: props.loading,
+				"aria-busy": props.loading || void 0,
 				label: props.label,
 				placeholder: props.placeholder,
 				hint: props.hint,
@@ -1403,6 +1442,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				readonly: "",
 				"onClick:clear": clear
 			}, {
+				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),
@@ -1456,6 +1496,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				"data-testid",
 				"disabled",
 				"loading",
+				"aria-busy",
 				"label",
 				"placeholder",
 				"hint",
@@ -1470,7 +1511,12 @@ var row_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "row",
 	props: {
-		align: {
+		alignX: {
+			type: String,
+			required: false,
+			default: "start"
+		},
+		alignY: {
 			type: String,
 			required: false,
 			default: "start"
@@ -1486,19 +1532,29 @@ var row_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
-		const rowAlignToClass = {
+		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 alignClass = computed(() => rowAlignToClass[props.align]);
+		const alignXClass = computed(() => rowAlignXToClass[props.alignX]);
+		const alignYClass = computed(() => rowAlignYToClass[props.alignY]);
 		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([alignClass.value, listClasses.value]),
+				class: normalizeClass([
+					alignXClass.value,
+					alignYClass.value,
+					listClasses.value
+				]),
 				"data-testid": props.dataTestid
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
@@ -2077,7 +2133,7 @@ var data_set_default = /* @__PURE__ */ defineComponent({
 					}, null, 8, ["modelValue"])) : createCommentVNode("v-if", true)]),
 					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"
+						"align-y": "stretch"
 					}, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(pageItems, (pageItem, index) => {
 							return openBlock(), createBlock(column_default, {

package/package.json

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