@antelopejs/dms 0.7.17 → 0.7.18

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v0.7.18
+
+[compare changes](https://github.com/AntelopeJS/dms/compare/v0.7.17...v0.7.18)
+
+### 🚀 Enhancements
+
+- **layout:** Let a header button's label read the page's query ([#247](https://github.com/AntelopeJS/dms/pull/247))
+
+### ❤️ Contributors
+
+- Antony Rizzitelli <rizzitelli.antony@pm.me>
+
 ## v0.7.17
 
 [compare changes](https://github.com/AntelopeJS/dms/compare/v0.7.16...v0.7.17)

package/frontend-vue/layers/dms-layout/app/build/components/layout/PageHeaderActionBar.vue

@@ -117,13 +117,20 @@ const defaultVariant = (
 const orderOf = (action: LayoutHeaderAction): number =>
   action.order ?? DEFAULT_PAGE_HEADER_ACTIONS_ORDER;
 
+// A served label's translation reads the page query as its parameters:
+// `"Download {locale}.json"` names the language of `?locale=`.
+function labelParams(): Record<string, unknown> {
+  const { routeParams, routeQuery } = pageUrlValues.value;
+  return { ...routeParams, ...routeQuery };
+}
+
 function baseButton(action: LayoutHeaderAction): ButtonProps {
   const color = action.color ?? "neutral";
   return {
     color,
     variant: action.variant ?? defaultVariant(color),
     icon: action.icon,
-    label: action.label ? processI18n(action.label) : undefined,
+    label: action.label ? processI18n(action.label, labelParams()) : undefined,
     disabled: action.disabled,
   };
 }

package/frontend-vue/tests/header-action-page-query.test.ts

@@ -73,7 +73,10 @@ beforeEach(() => {
   vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
   vi.stubGlobal("computed", computed);
   vi.stubGlobal("useTranslation", () => ({
-    processI18n: (value: string) => value,
+    processI18n: (value: string, params?: Record<string, unknown>) =>
+      value.replace(/\{(\w+)\}/g, (_, name: string) =>
+        String(params?.[name] ?? `{${name}}`),
+      ),
   }));
   vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
   vi.stubGlobal("useDmsRoute", () => route);
@@ -270,6 +273,24 @@ describe("a header button's target URL", () => {
   });
 });
 
+describe("a header button's label", () => {
+  it("reads the page's query and params as its parameters, and follows them", async () => {
+    route.query = { workspace: "web", file: "fr" };
+    await mountBar([
+      {
+        id: "download",
+        label: "Download {file}.json for {locale}",
+        target: { type: "page", url: "/x" },
+      },
+    ]);
+    expect(labels()).toEqual(["Download fr.json for de"]);
+
+    route.query = { workspace: "web", file: "it" };
+    await nextTick();
+    expect(labels()).toEqual(["Download it.json for de"]);
+  });
+});
+
 describe("a header button's availability", () => {
   const download = (disabled: boolean) => ({
     id: "download",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.7.17",
+  "version": "0.7.18",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"

package/skills/dms-pages/REFERENCE.md

@@ -36,7 +36,8 @@ gets `navigation` (J / K, `index` / `total` in the order shown) —
 `docs/04.components/06.tables/8.row-drawers.md`.
 
 A page's `headerActions` follow its URL: a target URL takes `{{params.X}}` / `{{query.X}}`
-(`?workspace={{query.workspace}}`, a pair the page has no value for is dropped), and an
+(`?workspace={{query.workspace}}`, a pair the page has no value for is dropped), a label's
+translation takes the page's route and query parameters (`"Download {locale}.json"`), and an
 `availability` reads `context.query`, asked again when the query changes — no need to build
 the header in Vue with `usePageHeaderActions` to carry the scope —
 `docs/07.interfaces/3.base/6.layout.md#buttons-that-follow-the-page-url`. An `availability`