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

package/AGENTS.md

@@ -22,11 +22,11 @@ pnpm add @nexdom/uimed-vue
 yarn add @nexdom/uimed-vue
 ```
 
-Peer dependencies (`@fontsource/roboto`, `@mdi/font`, `@nexdom/shared`, `resize-observer-polyfill`, `vite-plugin-vuetify`, `vite-plus`, `vue`, `vue-router`, `vuetify`) must be installed alongside it — most package managers install these automatically, but confirm versions match what's declared in `package.json`'s `peerDependencies`.
+Peer dependencies (`@mdi/font`, `@nexdom/shared`, `resize-observer-polyfill`, `sass-embedded`, `vite-plus`, `vue`, `vue-component-type-helpers`, `vue-router`, `vuetify`) must be installed alongside it — most package managers install these automatically, but confirm versions match what's declared in `package.json`'s `peerDependencies`.
 
 ### Setup
 
-Add the Vite plugin:
+Add the Vite plugin, which compiles the components' styles with the library's font and Sass settings (without it, components lose the Unimed Slab font):
 
 ```ts
 // vite.config.ts
@@ -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:
@@ -166,6 +172,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
   - `docs` must not mention Vuetify
   - A new component/composable must be listed in its guide page (`docs/guide/…`), its API page (`docs/api/…`), both sidebars in `docs/.vitepress/config.ts`, the guide index table (`docs/guide/index.md`) and the API index list (`docs/api/index.md`).
 - 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.
 - 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.
 - 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.
@@ -204,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

@@ -651,6 +651,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 +682,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 +696,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 +707,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 +718,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 +906,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

@@ -1470,7 +1470,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 +1491,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 +2092,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/dist/index.js

@@ -26,10 +26,7 @@ function createUimed() {
 					error: "#D92D20",
 					info: "#9ACBE5"
 				},
-				variables: {
-					"border-color": "#D0D5DD",
-					"font-body": "\"Unimed Slab\", sans-serif"
-				}
+				variables: { "border-color": "#D0D5DD" }
 			} }
 		}
 	});

package/dist/plugins.d.ts

@@ -1,10 +1,21 @@
-import vitePluginVuetify from "vite-plugin-vuetify";
-import { UserConfig } from "vite-plus";
+import { Plugin, UserConfig } from "vite-plus";
 //#region src/plugins.d.ts
 /**
- * Vite plugin for UIMed.
+ * Vite plugin that compiles the components' styles with the library's font and Sass settings.
+ * Required: without it, the components lose the Unimed Slab font. Needs `sass-embedded`, a peer
+ * dependency.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { vitePluginUimed } from "@nexdom/uimed-vue/plugins";
+ *
+ * export default defineConfig({
+ *   plugins: [vue(), vitePluginUimed()],
+ * });
+ * ```
  */
-export declare function vitePluginUimed(): ReturnType<typeof vitePluginVuetify>;
+export declare function vitePluginUimed(): Plugin[];
 /**
  * Vitest Server plugin for UIMed.
  */

package/dist/plugins.js

@@ -1,10 +1,61 @@
-import vitePluginVuetify from "vite-plugin-vuetify";
+import { existsSync } from "node:fs";
+import { pathToFileURL } from "node:url";
 //#region src/plugins.ts
+/** Matches the ids of CSS files, with or without a query */
+const stylesheet = /\.css(?:\?|$)/;
+/** Path of Vuetify's stylesheets folder, inside the `node_modules` folder where it's installed */
+const vuetifyStylesheets = "/node_modules/vuetify/lib/";
 /**
-* Vite plugin for UIMed.
+* Matches the queries that import a stylesheet's file as is (`?raw`) or its URL (`?url`), which
+* Vite doesn't compile. The URL still serves the compiled stylesheet, which Vite loads separately
+*/
+const uncompiledStylesheetQuery = /[?&](?:raw|url)\b/;
+/**
+* Vite plugin that compiles the components' styles with the library's font and Sass settings.
+* Required: without it, the components lose the Unimed Slab font. Needs `sass-embedded`, a peer
+* dependency.
+*
+* @example
+* ```ts
+* // vite.config.ts
+* import { vitePluginUimed } from "@nexdom/uimed-vue/plugins";
+*
+* export default defineConfig({
+*   plugins: [vue(), vitePluginUimed()],
+* });
+* ```
 */
 function vitePluginUimed() {
-	return vitePluginVuetify({ autoImport: false });
+	const settings = new URL("./styles/settings.scss", import.meta.url);
+	let compiler;
+	return [{
+		name: "uimed:vuetify-styles",
+		enforce: "pre",
+		load: {
+			filter: { id: {
+				include: stylesheet,
+				exclude: uncompiledStylesheetQuery
+			} },
+			async handler(id) {
+				const file = id.split("?")[0].replaceAll("\\", "/");
+				const folder = file.lastIndexOf(vuetifyStylesheets);
+				if (folder === -1) return null;
+				const nodeModules = `${file.slice(0, folder)}/node_modules`;
+				const source = [".sass", ".scss"].map((extension) => `${file.slice(0, -4)}${extension}`).find((path) => existsSync(path));
+				if (!source) return null;
+				compiler ??= import("sass-embedded").then((sass) => sass.initAsyncCompiler());
+				const sass = await compiler;
+				const entry = `@use "${settings.href}";\n@use "${pathToFileURL(source).href}";`;
+				const { css } = await sass.compileStringAsync(entry, { loadPaths: [nodeModules] });
+				return css;
+			}
+		},
+		async closeBundle() {
+			const current = compiler;
+			compiler = void 0;
+			await (await current)?.dispose();
+		}
+	}];
 }
 /**
 * Vitest Server plugin for UIMed.

package/dist/styles/settings.scss

@@ -0,0 +1,6 @@
+@use "vuetify/settings" with (
+  $body-font-family: var(--v-font-body, "Unimed Slab", sans-serif),
+  // Unimed Slab's ascent and descent take 1.26em, more than the subtitles' default 1rem line
+  // height, which clipped its descenders and accented capitals
+  $list-item-subtitle-line-height: normal
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.22",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -75,7 +75,6 @@
     "sass-embedded": "^1.103.1",
     "stryker-vue-ignorer": "github:davidlandais/stryker-vue-ignorer",
     "typescript": "^6.0.3",
-    "vite-plugin-vuetify": "^2.1.3",
     "vite-plus": "^1.0.0",
     "vitepress": "2.0.0-alpha.19",
     "vitepress-plugin-group-icons": "^1.7.6",
@@ -90,7 +89,7 @@
     "@mdi/font": "^7.4.47",
     "@nexdom/shared": "^2.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "vite-plugin-vuetify": "^2.1.3",
+    "sass-embedded": "^1.103.1",
     "vite-plus": "^1.0.0",
     "vue": "^3.5.40",
     "vue-component-type-helpers": "^3.3.11",