@nxgt/material-vue 0.41.0 → 0.42.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nxgt/material-vue
 
+## 0.42.0
+
+### Minor Changes
+
+- [#624](https://github.com/softistx/nxgt-material/pull/624) [`94a77a7`](https://github.com/softistx/nxgt-material/commit/94a77a76b54834bda18d1e2acc494d5a089d245d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The app bar gets a leading title and a reusable account menu ([#585](https://github.com/softistx/nxgt-material/issues/585)). `ActivityLayout` takes `headerTitle` (the `#header-title` slot in Vue): the context the app is in, an organisation's name say, right after the phone's menu button and truncated with an ellipsis when long, so the avatar stays on screen. `AccountMenu` is new, for `ActivityLayout`'s `avatar` (`#avatar`): an avatar button named "Account menu, <name>" (the picture, else the initials on `bg-primary`) that opens a menu aligned to its end, headed by the avatar, the name and `secondary` (the e-mail), then the app's `items` (links) and a destructive Sign out with a busy state (`signingOut`; `onSignOut` in React, the `sign-out` event in Vue). New strings: `material.account-menu.trigger` and `material.account-menu.sign-out`, in English and French. `AppHeader`'s default slot no longer stops its content from shrinking (`min-w-0`), which is what lets a long title truncate. To adopt: replace a hand-rolled user menu in `avatar` with `<AccountMenu name={user.name} secondary={user.email} src={user.picture} items={…} onSignOut={signOut} />`, and move a title placed in `headerActions` to `headerTitle`.
+
+- [#624](https://github.com/softistx/nxgt-material/pull/624) [`d8addd6`](https://github.com/softistx/nxgt-material/commit/d8addd6e12a58aad08b321321bb6aac2fa50646b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The app shell shows the app's logo and name ([#581](https://github.com/softistx/nxgt-material/issues/581)). `ActivityLayout`, `AppSidebar` and `AppHeader` take `logo` (an image URL, `{ src, alt }`, or a node; in Vue a node goes in the `#logo` slot) and `name` (already translated). The collapsed rail shows the logo alone, named by `name`, which also shows as a tooltip; the expanded sidebar and the phone's menu sheet show the logo and the name side by side. The phone's menu sheet now honours `brand` (the `#brand` slot in Vue) too: it used to show the default atom badge whatever the app passed. `brand` is unchanged otherwise, still the full override, and wins over `logo` and `name`. To adopt: replace `brand={<img src="/logo.svg" alt="Acme" />}` (`<template #brand>` in Vue) with `logo="/logo.svg" name="Acme"`. Two things follow from `brand` reaching the sheet: a link inside `brand` (a home link around the logo) is now the sheet's first focusable element and takes the focus when it opens, and `brand` is rendered twice (the rail stays in the page, hidden, on a phone), so an `id` inside it appears twice while the sheet is open: drop ids from `brand`.
+
+### Patch Changes
+
+- Updated dependencies [[`94a77a7`](https://github.com/softistx/nxgt-material/commit/94a77a76b54834bda18d1e2acc494d5a089d245d)]:
+  - @nxgt/material-core@0.12.0
+
 ## 0.41.0
 
 ### Minor Changes

package/README.md

@@ -323,7 +323,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | --- | --- |
 | [Forms](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/forms.md) | wiring fields to vee-validate and Zod, composite values (contacts, opening hours), config-driven `Field`, server errors, what each field emits |
 | [i18n](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/i18n.md) | adding your strings next to the package's, switching language, translated Zod messages, SSR without a text mismatch |
-| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/app-shell.md) | laying out an app with `ActivityLayout`, its `items` (rendered as links; `link-component` to pass your own), the active entry and breadcrumbs (vue-router), the `<main>` landmark, the `h1` title and document scrolling |
+| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/app-shell.md) | laying out an app with `ActivityLayout`, its `items` (rendered as links; `link-component` to pass your own), the brand (`logo`, `name`), the header's title and `AccountMenu`, the active entry and breadcrumbs (vue-router), the `<main>` landmark, the `h1` title and document scrolling |
 | [Theming](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/theming.md) | changing colours, radius or fonts, dark mode, using the compiled CSS without Tailwind |
 | [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/printing.md) | printable documents built from the `Print*` components |
 | [PDF documents](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/pdf.md) | PDF files from data with `@nxgt/material-vue/pdf`: builders, `usePdf`, `PdfDownloadButton`, a Nitro route with `pdfResponse`, fonts on an inlined server |
@@ -509,6 +509,7 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | Preview | Component | What it does | @nxgt/material |
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` | App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page; entries are real links, and `link-component` swaps the link. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-accountmenu.webp" width="120" alt="AccountMenu"> | [`AccountMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#accountmenu) | The app bar's avatar menu: named after the account, the name and e-mail, the app's links, then a destructive Sign out with a busy state. | `AccountMenu` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-authcard.webp" width="120" alt="AuthCard"> | [`AuthCard`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#authcard) | The frame of a signed-out page: one `main`, a centred card whose title is the `h1` (focusable on an end state), a status or alert notice, a brand and toolbar row, safe-area padding. | `AuthCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-sidebar.webp" width="120" alt="Sidebar"> | [`Sidebar`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#sidebar), `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenuItem`, `SidebarMenuLabel` | Collapsible navigation sidebar with icons, tooltips and active items. | `Sidebar` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-topappbar.webp" width="120" alt="TopAppBar"> | [`TopAppBar`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#topappbar), `BottomAppBar` | Top bar surface, and a bottom bar of icon actions with an active state. | `TopAppBar`, `BottomAppBar` |

package/dist/{Button-BG3oDkrl.js → Button-CWmzvv9p.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-Du3Wvsk1.js";
+import { t } from "./use-material-translation-COoBTGpB.js";
 import { Comment as n, Fragment as r, Text as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, h as p, inject as ee, isVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, onBeforeUnmount as v, openBlock as y, provide as te, ref as b, renderSlot as x, shallowRef as S, unref as C, useAttrs as ne, useSlots as w, watch as T, withCtx as E } from "vue";
 import { Primitive as re, TooltipArrow as D, TooltipContent as O, TooltipPortal as k, TooltipProvider as A, TooltipRoot as j, TooltipTrigger as M, useForwardPropsEmits as N } from "reka-ui";
 import { cva as P } from "class-variance-authority";

package/dist/{HoverCardTrigger-Dh1ar_W4.js → HoverCardTrigger-C5AbAyHE.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-Du3Wvsk1.js";
-import { t as n } from "./Button-BG3oDkrl.js";
+import { t } from "./use-material-translation-COoBTGpB.js";
+import { t as n } from "./Button-CWmzvv9p.js";
 import { r, t as i } from "./in-dialog-Blhwwbyb.js";
 import { t as a } from "./field-name-attribute-Bl7LSVK0.js";
 import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, guardReactiveProps as h, isRef as g, mergeProps as _, normalizeClass as v, normalizeProps as y, onMounted as ee, onUpdated as b, openBlock as x, renderSlot as S, toDisplayString as C, unref as w, useAttrs as T, useId as E, useTemplateRef as D, vModelText as O, withCtx as k, withDirectives as A } from "vue";

package/dist/{camera-DV9jcl_3.js → camera-C-9slBUV.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { _r as t, hr as n, mr as r } from "./components-C1JYYoQ4.js";
-import { t as i } from "./use-material-translation-Du3Wvsk1.js";
-import { t as a } from "./Button-BG3oDkrl.js";
-import { t as o } from "./icon-button-DXrmfs6e.js";
+import { _r as t, hr as n, mr as r } from "./components-DX4EycMi.js";
+import { t as i } from "./use-material-translation-COoBTGpB.js";
+import { t as a } from "./Button-CWmzvv9p.js";
+import { t as o } from "./icon-button-DErh1aJS.js";
 import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 import { Pause as S, Play as C } from "@lucide/vue";
 //#region lib/components/ui/media/camera/camera-content.vue?vue&type=script&setup=true&lang.ts