@nxgt/material-vue 0.35.0 → 0.37.0

package/docs/guides/i18n.md

@@ -366,6 +366,19 @@ fichier.") when it cannot show it, `material.file-preview.download`
 "Seuls les premiers {size} de ce fichier sont affichés.") under a text cut
 by the size cap; the text or Markdown it shows scrolls in a region named by
 `material.file-preview.content` ("Contents of {name}", "Contenu de {name}").
+`EnrolmentSecret` reads `material.enrolment-secret.qr-label` ("QR code to
+scan with your authenticator app"), `open-app` ("Open in your authenticator
+app", "Ouvrir dans votre application d'authentification"), `manual` ("Or
+type this key in the app:"), `secret-label` ("Setup key", "Clé de
+configuration"), `copy` ("Copy the key") and `copied` ("Key copied", "Clé
+copiée"); each has a prop that overrides it. `RecoveryCodes` reads
+`material.recovery-codes.title` and `list` ("Recovery codes", "Codes de
+récupération"), `warning` ("Each code works once. Keep them somewhere safe:
+they are shown only now."), `copy`, `copied` and `copy-failed` ("Copy codes",
+"Codes copied", "Copy failed"), `download`, `print`, `saved` ("I have saved
+these codes", "J'ai enregistré ces codes"), `saved-required` ("Tick the box
+once your codes are safe") and `done`; `title`, `warning` and `labels`
+override them. `AuthCard` has no copy of its own.
 `material.slider.value` / `minimum` / `maximum`
 ("Value", "Minimum", "Maximum") are there for `@nxgt/material`'s editable
 `Slider` readout inputs (this package's readout is text), so the bundles hold
@@ -480,6 +493,10 @@ z.config({
 
 Examples and per-field messages are in [forms](forms.md#validation-messages).
 
+Your own rules' messages — a refinement carrying an error code in
+`params.code` — are worded by your translator, in the provider's language,
+with `useCodeResolver`: see [forms](forms.md#wording-errors-by-code).
+
 ## Server rendering
 
 On the server there is no `localStorage`, so without help the server renders

package/docs/guides/printing.md

@@ -389,3 +389,30 @@ kebab-case (`is-header`, `text-align`, `qr-data-url`), and replace `Document`
 and `Page` with a `div` styled `tw(commonPrintStyles.page)`. `PrintDocument`,
 `PrintDataTable`, `PrintKeyValue` and `PrintMetric` have none: use `/pdf`'s
 `page`, `dataTable`, `keyValueOf` and `metric`.
+
+## Printing one element of the page
+
+`RecoveryCodes`' "Print" button prints its card and nothing else, with
+`window.print()`, no inline style and no new window. The same helper prints
+any element of yours: `printOnly(element, name?)` from
+`@nxgt/material-vue/lib` marks `<html data-nxgt-print="<name>">` and
+the element (`data-nxgt-print-target`), opens the print dialog, and removes
+both once printing is over (on `afterprint`, or as soon as `print()` returns
+where it blocks). The rules that hide the rest of the page are in the
+package's `styles.css` (`print-only.css`), under `@media print`: everything but the element,
+what holds it and what it holds is taken out of the flow, and the element
+starts at the top left of the first sheet.
+
+```ts
+import { printOnly } from '@nxgt/material-vue/lib';
+
+const stop = printOnly(document.getElementById('ticket') as HTMLElement, 'ticket');
+// When the element unmounts before the dialog closed (a browser whose
+// print() returns at once and never fires afterprint):
+stop();
+```
+
+Hide the controls inside the element with Tailwind's `print:hidden`. If the
+rest of the page still prints, an `!important` print rule of the app's wins
+over the package's: see
+[troubleshooting](../troubleshooting.md#recoverycodes-print-button-prints-the-whole-page).

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

@@ -26,6 +26,7 @@ words in your error.
 - [Dialogs, toasts or buttons no longer animate](#dialogs-toasts-or-buttons-no-longer-animate)
 - [A Content-Security-Policy reports a `data:` image on every form with a required field](#a-content-security-policy-reports-a-data-image-on-every-form-with-a-required-field)
 - [A Button's label overflows a card on a phone](#a-buttons-label-overflows-a-card-on-a-phone)
+- [A dialog or sheet scrolls, or clips a child, after upgrading](#a-dialog-or-sheet-scrolls-or-clips-a-child-after-upgrading)
 - [`JsBarcode is not a function`](#jsbarcode-is-not-a-function)
 - [A `LinkButton` selected as a `button` stops matching](#a-linkbutton-selected-as-a-button-stops-matching)
 - [A `Toc`, `Pager`, `SeeAlso` or `ScrollProgress` inside `Doc` selected by `data-slot` stops matching](#a-toc-pager-seealso-or-scrollprogress-inside-doc-selected-by-data-slot-stops-matching)
@@ -40,6 +41,8 @@ words in your error.
 - [An `Autocomplete` lists more options than before, or "ecole" finds "École"](#an-autocomplete-lists-more-options-than-before-or-ecole-finds-école)
 - [`@query-change` runs more often after upgrading](#query-change-runs-more-often-after-upgrading)
 - [An older search's results replace the newer ones in an `Autocomplete`](#an-older-searchs-results-replace-the-newer-ones-in-an-autocomplete)
+- [An `Autocomplete` option does nothing on click or Enter](#an-autocomplete-option-does-nothing-on-click-or-enter)
+- ["The search failed. Try again." no longer shows in an `Autocomplete`](#the-search-failed-try-again-no-longer-shows-in-an-autocomplete)
 - [A test no longer finds `aria-invalid` on an `OtpField` slot](#a-test-no-longer-finds-aria-invalid-on-an-otpfield-slot)
 - [A test no longer finds the breadcrumb's home button](#a-test-no-longer-finds-the-breadcrumbs-home-button)
 - [A test no longer finds a sidebar entry by the `button` role](#a-test-no-longer-finds-a-sidebar-entry-by-the-button-role)
@@ -102,6 +105,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 +144,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**
 
@@ -658,6 +664,47 @@ an older query, even from an API that ignores the signal:
 />
 ```
 
+### An `Autocomplete` option does nothing on click or Enter
+
+**When:** one option of an `Autocomplete` is greyed out and clicking it, or
+pressing Enter on it, changes nothing, with no error.
+**Why:** that option has `disabled: true` (in the local `options` or in what
+`on-search` returns). It is listed and announced with `aria-disabled`, and never
+picked, in `single` and `multiple` mode; Enter picks the first enabled option, and Tab skips a disabled one.
+**Fix:** drop `disabled` from the option, or build it only for the options that
+may be chosen:
+
+```vue
+<Autocomplete
+  v-model="value"
+  :options="[
+    { value: 'a', label: 'Alpha', disabled: true }, // listed, never picked
+    { value: 'b', label: 'Beta' },
+  ]"
+/>
+```
+
+### "The search failed. Try again." no longer shows in an `Autocomplete`
+
+**When:** after upgrading, an `Autocomplete` whose `on-search` rejects shows
+your own text, or nothing generic, where it used to say "The search failed. Try
+again."
+**Why:** `search-error` now takes precedence over the generic text with `on-search`
+too, in the list and in the live announcement. The generic text only shows
+while `search-error` is unset.
+**Fix:** nothing, if the reason is what you want. To get the generic text back,
+leave `search-error` unset or empty; to show a reason, keep it from `@search-error` and pass it
+back:
+
+```vue
+<Autocomplete
+  v-model="value"
+  :on-search="search"
+  :search-error="reason"
+  @search-error="reason = 'Directory unreachable'"
+/>
+```
+
 ### A test no longer finds `aria-invalid` on an `OtpField` slot
 
 **When:** `[data-slot="input-otp-slot"][aria-invalid]` (or
@@ -1179,6 +1226,27 @@ your own through `class`. With `as-child`, put the label in a `<span>`:
 </template>
 ```
 
+### A dialog or sheet scrolls, or clips a child, after upgrading
+
+**When:** after upgrading, a tall `DialogContent`, `AlertDialogContent` or
+`SheetContent` shows a scrollbar, or a child that stuck out of it (a popover, a
+focus ring, a wide table) is clipped.
+**Why:** these contents are now capped to the viewport (`max-h-[calc(100dvh-2rem)]`,
+`100vh` where `dvh` is unsupported; a top or bottom sheet is capped at `100dvh`)
+and carry `overflow-y-auto`, so a long body scrolls inside them instead of
+leaving the title off-screen. Setting `overflow-y` makes `overflow-x` clip or
+scroll too.
+**Fix:** to keep the old behaviour on one dialog, remove the cap and the scroll
+with `class="max-h-none overflow-visible"`; to change the cap, pass your own
+`max-h-*` (it wins on browsers with `dvh` support):
+
+```vue
+<DialogContent class="max-h-none overflow-visible">
+```
+
+For a dialog that should grow taller than the screen and scroll inside the
+overlay instead of capping, use `DialogScrollContent`.
+
 ## Feedback
 
 ### A toast with an action never goes away
@@ -1960,6 +2028,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 +2624,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.37.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 };