@nxgt/material-vue 0.35.0 → 0.36.0

package/docs/roadmap.md

@@ -162,6 +162,21 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Signed-out pages and two-step verification** — `AuthCard`, the frame of a
+  sign-in page (one `main`, the card's title its `h1`, a status or alert
+  notice, safe-area padding); `EnrolmentSecret`, a TOTP enrolment's QR code,
+  app link and key grouped by four; `RecoveryCodes`, one-time codes to copy,
+  download or print alone, with an "I have saved these codes" confirmation
+  (`v-model:saved`) an app's router guard can follow. 0.36.0.
+- **Focus after a change, one submit at a time, errors worded by code** —
+  `useFocusOnMount` focuses the heading of what replaced the content the user
+  acted on; `useSubmitOnce` drops a double click or a second Enter until the
+  request ends; `useCodeResolver` words a zod schema's errors in the page's
+  language, a refinement's `params.code` in the app's own words. 0.36.0.
+- **Long forms in titled sections** — `FormSection`: a heading (an `h2`, or
+  the level `title-as` names), a description and actions, its fields in the form
+  grid's columns and one column on a phone, a rule between sections, and a
+  group a screen reader announces by its title. 0.36.0.
 - **A strict Content Security Policy** — a page that sends `script-src` with a
   nonce and no `'unsafe-eval'`, and `style-src-elem` with a nonce and no
   `'unsafe-inline'`, runs every component with no violation report:

package/docs/troubleshooting.md

@@ -102,6 +102,7 @@ words in your error.
 
 **Printing**
 
+- [`RecoveryCodes`' Print button prints the whole page](#recoverycodes-print-button-prints-the-whole-page)
 - [The table header and the total row print blank](#the-table-header-and-the-total-row-print-blank)
 - [A `tw()` class has no effect](#a-tw-class-has-no-effect)
 - [An amount in yen shows no decimals, or one in dinars shows three](#an-amount-in-yen-shows-no-decimals-or-one-in-dinars-shows-three)
@@ -140,6 +141,8 @@ words in your error.
 - [A test asserting the old Zod string length text fails](#a-test-asserting-the-old-zod-string-length-text-fails)
 - [A calendar's weekday row is in English on a French page](#a-calendars-weekday-row-is-in-english-on-a-french-page)
 - [An accessibility audit reports low contrast on a calendar's weekday row or its days](#an-accessibility-audit-reports-low-contrast-on-a-calendars-weekday-row-or-its-days)
+- [Errors keep their old words after a language switch](#errors-keep-their-old-words-after-a-language-switch)
+- [`useCodeResolver` re-validates or resets the form on every render](#usecoderesolver-re-validates-or-resets-the-form-on-every-render)
 
 **Runtime**
 
@@ -1960,6 +1963,30 @@ const field = useTemplateRef<ComponentExposed<typeof Autocomplete>>('field');
 
 ## Printing
 
+### `RecoveryCodes`' Print button prints the whole page
+
+**When:** "Print" on `RecoveryCodes` prints the rest of the page with the
+codes, or the codes away from the top of the sheet.
+**Why:** the button only marks the page (`<html data-nxgt-print>`) and the
+card (`data-nxgt-print-target`); hiding the rest is a `@media print` rule in
+the package's stylesheet (`print-only.css`). A page that does not load
+`@nxgt/material-vue/styles.css` (or
+`dist/material-vue.css`) has no such rule, and an app's own
+print rule that is `!important` (or a `position` on an ancestor set with
+`!important`) wins over it.
+**Fix:** load the stylesheet the setup guide names, and keep your print
+rules off the marked page:
+
+```css
+/* your app's print rules, everywhere but while one element is printed */
+@media print {
+  html:not([data-nxgt-print]) .page-header { position: static !important; }
+}
+```
+
+To print an element of your own the same way, call `printOnly(element)`
+from `@nxgt/material-vue/lib`; the same rules apply to it.
+
 ### The table header and the total row print blank
 
 **When:** on paper or in a PDF, the table header and the grand-total row are
@@ -2532,6 +2559,45 @@ reka hides the weekday row from assistive tech (`<thead aria-hidden>`); in a
 test, find a day by its full date instead
 (`getByRole('gridcell', { name: 'jeudi 1 octobre 2026' })`).
 
+### Errors keep their old words after a language switch
+
+**When:** a form validated with `useCodeResolver` shows an error, the user
+switches the language, and the error stays in the old one (a code's words
+or a zod message alike).
+**Why:** the typed schema is a computed that follows the language, and
+vee-validate re-validates when its `validationSchema` ref changes — but only
+when it receives the ref. Passing `validationSchema.value` hands it a plain
+object, which keeps the language of the first validation.
+**Fix:** pass the computed itself:
+
+```ts
+const validationSchema = useCodeResolver(schema, { translate });
+const { handleSubmit } = useForm({ validationSchema }); // not validationSchema.value
+```
+
+Storybook: `Guides/Forms/useCodeResolver`. See
+[forms](guides/forms.md#wording-errors-by-code).
+
+### `useCodeResolver` re-validates or resets the form on every render
+
+**When:** the schema, `translate` or `codeOf` is created inside a computed
+or a render function, so `useCodeResolver` is called again with a new one.
+**Why:** each call makes a new typed schema; vee-validate re-validates every
+time `validationSchema` changes.
+**Fix:** call `useCodeResolver` once in `setup`, with a schema, a translator
+and a `codeOf` defined at module scope (a `language` ref or getter is what
+should change):
+
+```ts
+import { type CodeIssue, defaultCodeOf, isEmptyRequired, useCodeResolver } from '@nxgt/material-vue/components';
+
+const schema = z.object({ username: z.string().min(3) });
+const codeOf = (issue: CodeIssue) =>
+  isEmptyRequired(issue) ? 'errors.required' : defaultCodeOf(issue);
+
+const validationSchema = useCodeResolver(schema, { translate, codeOf });
+```
+
 ## Runtime
 
 ### A test asserting the old Zod string length text fails

package/lib/components/components.css

@@ -21,6 +21,7 @@
 @import "./ui/actions/button-group/button-group.css";
 @import "./ui/primitives/label/label.css";
 @import "./ui/feedback/toast/toast.css";
+@import "./print-only.css";
 @import "./ui/fields/contacts/contact-item.css";
 @import "./ui/fields/opening-hours/opening-hours-item.css";
 @import "./ui/fields/attributes/partials/attribute-form.css";

package/lib/components/print-only.css

@@ -0,0 +1,44 @@
+/* Printing one element of the page (`printOnly`, from `/lib` or
+ * @nxgt/material-core/print-only; RecoveryCodes' Print button): while
+ * <html data-nxgt-print> is set, print media shows the element marked
+ * data-nxgt-print-target and nothing else. No inline style: only these rules,
+ * the same in @nxgt/material and @nxgt/material-vue.
+ *
+ * Everything that neither is, holds nor sits inside the target is taken out
+ * of the flow, so the page prints no blank sheets after it; where :has() is
+ * not supported, that rule is dropped and `visibility` alone hides the rest.
+ * The target's ancestors stop positioning it, so it starts at the top left of
+ * the first page. Unlayered, these rules beat the components' Tailwind
+ * utilities (layered) with no `!important`. */
+@media print {
+	html[data-nxgt-print]
+		body
+		*:not(
+			[data-nxgt-print-target],
+			[data-nxgt-print-target] *,
+			:has([data-nxgt-print-target])
+		) {
+		display: none;
+	}
+
+	html[data-nxgt-print] body * {
+		visibility: hidden;
+	}
+
+	html[data-nxgt-print] :has([data-nxgt-print-target]) {
+		position: static;
+		transform: none;
+	}
+
+	html[data-nxgt-print] [data-nxgt-print-target],
+	html[data-nxgt-print] [data-nxgt-print-target] * {
+		visibility: visible;
+	}
+
+	html[data-nxgt-print] [data-nxgt-print-target] {
+		position: absolute;
+		inset: 0 0 auto 0;
+		margin: 0;
+		box-shadow: none;
+	}
+}

package/lib/nuxt/auto-imports.ts

@@ -11,6 +11,8 @@ export const COMPOSABLE_IMPORTS = [
 	'useOptions',
 	'useSearchParam',
 	'useAllowedTransitions',
+	'useFocusOnMount',
+	'useSubmitOnce',
 	'useCspNonce',
 	'resolveTheme',
 	'applyResolvedTheme',

package/lib/nuxt/component-names.ts

@@ -34,6 +34,7 @@ export const COMPONENT_NAMES = [
 	'AttributesField',
 	'AttributesFormField',
 	'AttributesList',
+	'AuthCard',
 	'Autocomplete',
 	'AutocompleteFormField',
 	'Avatar',
@@ -234,6 +235,7 @@ export const COMPONENT_NAMES = [
 	'EmojiList',
 	'EmojiPicker',
 	'EmptyState',
+	'EnrolmentSecret',
 	'EntityHeader',
 	'EventCalendar',
 	'EventCard',
@@ -266,6 +268,7 @@ export const COMPONENT_NAMES = [
 	'FilterProvider',
 	'FilterSheet',
 	'FilterTrigger',
+	'FormSection',
 	'FunnelCard',
 	'FunnelChart',
 	'Gallery',
@@ -431,6 +434,7 @@ export const COMPONENT_NAMES = [
 	'RatingFormField',
 	'RatioCard',
 	'ReceiptCard',
+	'RecoveryCodes',
 	'RelativeTime',
 	'ResizableHandle',
 	'ResizablePanel',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.35.0",
+	"version": "0.36.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -124,7 +124,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.9.1",
+		"@nxgt/material-core": "^0.10.0",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",

package/dist/print-format.utils-DpBtUJvL.js

@@ -1,138 +0,0 @@
-import { t as e } from "./_baseIsEqual-BUD8VQJE.js";
-import { n as t } from "./number.utils-Bpo9tUaJ.js";
-import { defineComponent as n, getCurrentInstance as r, h as i, inject as a, provide as o, useId as s } from "vue";
-import { defineStore as c } from "pinia";
-import { createFormatters as l, formatAmount as u, formatDate as d } from "@nxgt/material-core/print-format";
-//#region ../../node_modules/lodash-es/isEqual.js
-function f(t, n) {
-	return e(t, n);
-}
-//#endregion
-//#region ../../node_modules/lodash-es/isNil.js
-function p(e) {
-	return e == null;
-}
-//#endregion
-//#region lib/lib/string.utils.ts
-function m(e) {
-	return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-}
-function h(e) {
-	return e ? e.toLowerCase().replace(/_/g, "-") : "";
-}
-function g(e, t = ", ") {
-	return e.filter((e) => !!e).join(t);
-}
-function _(e, t) {
-	let n = t.trim();
-	if (!n) return [{
-		text: e,
-		match: !1
-	}];
-	let r = n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), i = new RegExp(r, "ig"), a = [], o = 0;
-	for (let t of e.matchAll(i)) {
-		let n = t.index ?? 0;
-		n > o && a.push({
-			text: e.slice(o, n),
-			match: !1
-		}), a.push({
-			text: t[0],
-			match: !0
-		}), o = n + t[0].length;
-	}
-	return o < e.length && a.push({
-		text: e.slice(o),
-		match: !1
-	}), a.length > 0 ? a : [{
-		text: e,
-		match: !1
-	}];
-}
-var v = {
-	enumToKebabCase: h,
-	joinTruthyParts: g,
-	slugify: m,
-	splitMatch: _
-}, y = 0;
-function b(e) {
-	return r() ? `${e}:${s()}` : (y += 1, `${e}:${y}`);
-}
-function x(e, t) {
-	return (n) => c(b(e), {
-		state: () => ({
-			...t.state(),
-			...n
-		}),
-		actions: { ...t.actions ?? {} },
-		getters: { ...t.getters ?? {} }
-	})();
-}
-function S(e, t) {
-	return t ? {
-		...e,
-		...t
-	} : e;
-}
-//#endregion
-//#region lib/lib/storage.utils.ts
-function C(e, t) {
-	try {
-		let n = localStorage.getItem(e);
-		if (n) return typeof t == "string" ? n : JSON.parse(n);
-	} catch (t) {
-		console.warn(`Failed to restore state for key "${e}":`, t);
-	}
-	return t;
-}
-function w(e, t) {
-	try {
-		localStorage.setItem(e, typeof t == "string" ? t : JSON.stringify(t));
-	} catch (t) {
-		console.warn(`Failed to store state for key "${e}":`, t);
-	}
-}
-function T(e) {
-	try {
-		localStorage.removeItem(e);
-	} catch (t) {
-		console.warn(`Failed to remove state for key "${e}":`, t);
-	}
-}
-var E = {
-	safeGetItem: C,
-	safeSetItem: w,
-	safeRemoveItem: T
-}, D = {
-	colorFromVariable(e, t = 1) {
-		return `rgb(from var(--${e}) r g b / ${t})`;
-	},
-	cssSize(e) {
-		if (!(e == null || e === "")) return typeof e == "number" ? `${e}px` : e;
-	}
-};
-//#endregion
-//#region lib/lib/url.utils.ts
-function O(e) {
-	return new URL(e.url).searchParams;
-}
-function k(e, t) {
-	return O(e).get(t);
-}
-function A(e) {
-	return /^(https?:)?\/\//.test(e) || e.startsWith("mailto:");
-}
-//#endregion
-//#region lib/lib/client-only.utils.ts
-var j = Symbol("inside-client-only");
-function M(e) {
-	return n({
-		name: "ClientOnly",
-		inheritAttrs: !1,
-		setup(n, { attrs: r, slots: s }) {
-			let c = a(j, !1), l = t();
-			return o(j, !0), () => !c && !l.value ? null : i(e, { ...r }, s);
-		}
-	});
-}
-//#endregion
-export { f as S, h as _, A as a, _ as b, D as c, T as d, w as f, v as g, S as h, M as i, E as l, b as m, u as n, k as o, x as p, d as r, O as s, l as t, C as u, g as v, p as x, m as y };