@abgov/nx-adsp 13.30.0 → 13.31.1

package/src/generators/vue-components/files/AGENTS.md__tmpl__

@@ -8,24 +8,20 @@ invoked automatically by `vue-app` and by every `vue-*-view` generator.
 |---|---|---|
 | `src/lib/primitives/` | Thin `v-model`/idiomatic-event wrappers over individual `goa-*` elements (`GoabInput`, `GoabButton`, …) | **Interim** — see below |
 | `src/lib/patterns/` | Composite, app-shell components (`AppLayout`, `AppHeader`, `AppFooter`, `AppSideMenu`, `SessionExpiredBanner`, `RecordDetailShell`, `WorkspaceTable`, `Stepper`, `StepErrorSummary`, `FilterBar`) | **Permanent** |
-| `src/lib/formatters.ts` | Shared value formatting for views (`formatDate`, `formatDateTime`, `formatNumber`, `formatPercent`) | **Permanent** |
+| `src/lib/formatters.ts` | Shared value formatting for views (`formatDate`, `formatDateTime`, `formatNumber`, `formatPercent`, `optionLabel`, `badgeType`) | **Permanent** |
 
-**Not every pattern component is present in every app.** `AppLayout`, `AppHeader`,
-`AppFooter`, `AppSideMenu`, and `SessionExpiredBanner` are base app-shell — `vue-app`
-provisions and wires all five into `App.vue` for every generated app, unconditionally.
-The rest are on-demand: they only exist in a given app's `src/lib/patterns/` if that
-app has run the matching view generator at least once.
+**Every pattern component listed above is present in every app.** This lib is generated
+in one shot, so all of `primitives/` and all of `patterns/` exist as soon as any Vue app
+has been generated — there is no per-component provisioning step and nothing to check for
+before building on one.
 
-| Component | Provisioned by |
-|---|---|
-| `RecordDetailShell` | `vue-detail-view` |
-| `WorkspaceTable` | `vue-workspace-view`, `vue-admin-crud` |
-| `Stepper`, `StepErrorSummary` | `vue-intake-view` |
-
-Don't assume one of these on-demand components exists in a given app — check whether
-its generator has actually been run (e.g. `nx list @abgov/nx-adsp` won't tell you;
-look for the component file itself, or the view file that would import it) before
-building on it.
+Which components are *wired up* does vary: `vue-app` mounts the shell components
+(`AppLayout`, `AppHeader`, `AppFooter`, `AppSideMenu`, `SessionExpiredBanner`) in
+`App.vue`, while the rest are imported by whichever view generator uses them —
+`RecordDetailShell` by `vue-detail-view`, `WorkspaceTable` by `vue-workspace-view` and
+`vue-admin-crud`, `Stepper`/`StepErrorSummary` by `vue-intake-view`, `FilterBar` by a
+filterable workspace view. An unused component is idle, not missing: import it directly
+in a hand-authored view rather than running a generator to "provision" it.
 
 > **⚠️ `primitives/` is interim — do not invest in it as permanent.** It exists
 > only because GoA DS has not yet published an official Vue wrapper package. When
@@ -66,6 +62,7 @@ inline styles.
 | A loading `<div>` or spinner markup | `<goa-skeleton type="…">` or `<goa-spinner>` | Skeletons match the shape they replace (`card`, `text`, `table`) |
 | A `<label>` + error `<span>` around an input | `<goa-form-item label="…" error="…">` | Wrap the `Goab*` input in this, don't restyle it |
 | A row of buttons with flex styling | `<goa-button-group alignment="…">` | |
+| A hand-built multi-select (checkbox list, chips) | `<goa-dropdown-multiselect>` | Added in web-components 2.4.0 |
 | A hand-built filter row above a table | `<FilterBar>` (this library) | Controls, collapse, active-filter chips and clear-all. It emits a query-ready values object; the *view* owns resetting the page, debouncing, and URL sync |
 
 Also available bare and worth knowing before hand-rolling: `goa-accordion`, `goa-details`,
@@ -84,6 +81,28 @@ For values rather than layout, use `formatters.ts` (`formatDate`, `formatDateTim
 the same way, and each formatter already returns an em dash for a null/unparseable value so a
 partially-populated record needs no per-field guard.
 
+### Never render a stored code to a person
+
+Two more formatters exist because rendering a *coded* value is where generated views have most often
+been wrong, and the failure is invisible to a unit test — it only shows up when someone reads the
+screen.
+
+| Don't | Do |
+| --- | --- |
+| `{{ record['species'] }}` → shows `cattle-mature` | `{{ optionLabel(fieldOptions['species'], record['species']) }}` → `Cattle (mature)` |
+| `<goa-badge type="information" :content="row['status']" />` — every status the same neutral blue | `<goa-badge :type="badgeType(columnBadgeTypes['status'], row['status'])" :content="optionLabel(...)" />` |
+
+`optionLabel` falls back to the raw value for an unmapped code (a data or config problem you want to
+see, not hide); `badgeType` falls back to `information`, which is the honest colour for a value whose
+severity nobody declared.
+
+The view generators build these maps for you — but only from what you pass them. Supply `options` on
+any `--fields`/`--columns` entry whose stored value is a code, and `badgeMap` on a `badge` entry, e.g.
+`badgeMap: { approved: 'success', declined: 'emergency' }`. Omit them and the view renders the code.
+A badge's colour is the fastest thing a reader takes in, so a declined claim in neutral blue reads as
+routine — this matters most on a check-your-answers page, whose entire purpose is that the person can
+read back what they entered.
+
 ## What these wrappers do (and why they're needed)
 
 `goa-*` are framework-agnostic custom elements (built with Svelte). Three quirks

package/src/generators/vue-components/files/src/index.ts__tmpl__

@@ -37,8 +37,11 @@ export {
   fromIsoDateString,
   toIsoDateString,
   formatCurrency,
+  optionLabel,
+  badgeType,
   formatDate,
   formatDateTime,
   formatNumber,
   formatPercent,
 } from './lib/formatters';
+export type { DisplayOption, BadgeType } from './lib/formatters';

package/src/generators/vue-components/files/src/lib/formatters.ts__tmpl__

@@ -141,3 +141,61 @@ export function formatPercent(
   }).format(value);
   return `${rounded}%`;
 }
+
+/** One choice in a coded set -- the shape a generator's `options` list uses. */
+export interface DisplayOption {
+  value: string;
+  label: string;
+}
+
+/**
+ * The human label for a coded value, e.g. 'cattle-mature' -> 'Cattle (mature)'.
+ *
+ * Every view that renders a value from a `select`/dropdown field must go through
+ * this. The generators are handed the label for each value at generation time,
+ * and rendering the bare value instead puts raw domain codes ('northwest',
+ * 'wolf') in front of the person filling the form -- most damagingly on a
+ * check-your-answers page, where the whole point is that they can read back what
+ * they entered.
+ *
+ * Falls back to the value itself, not to a dash: an unmapped code is a data or
+ * configuration problem, and showing it is far more debuggable than hiding it.
+ */
+export function optionLabel(
+  options: readonly DisplayOption[] | undefined,
+  value: unknown,
+): string {
+  if (value === null || value === undefined || value === '') return '—';
+  const match = options?.find((option) => option.value === String(value));
+  return match ? match.label : String(value);
+}
+
+/** goa-badge's `type`, which carries the semantic colour. */
+export type BadgeType =
+  | 'information'
+  | 'success'
+  | 'important'
+  | 'emergency'
+  | 'dark'
+  | 'midtone'
+  | 'light';
+
+/**
+ * The badge type for a status value, from a value -> type map.
+ *
+ * A badge's colour is the fastest thing a reader takes in, so a status rendered
+ * with the wrong one actively misinforms: a declined claim in neutral blue reads
+ * as routine. Views pass a map (supplied per column/field at generation time)
+ * rather than a hardcoded type.
+ *
+ * Falls back to 'information' -- neutral, which is the honest choice for a value
+ * whose severity we were not told.
+ */
+export function badgeType(
+  map: Readonly<Record<string, BadgeType>> | undefined,
+  value: unknown,
+  fallback: BadgeType = 'information',
+): BadgeType {
+  if (value === null || value === undefined || value === '') return fallback;
+  return map?.[String(value)] ?? fallback;
+}

package/src/generators/vue-components/files/src/lib/patterns/AppLayout.spec.ts__tmpl__

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AppLayout from './AppLayout.vue';
+
+// Note on how width is asserted: in this test environment goa-page-block is not
+// a defined custom element, so Vue falls back to setting the width as an
+// ATTRIBUTE. In a real browser the element defines the property, so Vue sets it
+// as a property and getAttribute('width') returns null -- verified against a
+// running app, where the element then applies --max-width correctly. These tests
+// therefore guard the variant -> width mapping, which is the part that can
+// regress; they are not evidence about attribute-vs-property binding.
+describe('AppLayout', () => {
+  const widthFor = (variant?: 'page' | 'wide' | 'form') =>
+    mount(AppLayout, { props: variant ? { variant } : {} })
+      .find('goa-page-block')
+      .attributes('width');
+
+  it('delegates the content gutter to goa-page-block', () => {
+    expect(mount(AppLayout).find('goa-page-block').exists()).toBe(true);
+  });
+
+  it('maps each variant to the width the element expects', () => {
+    expect(widthFor('form')).toBe('640px');
+    expect(widthFor()).toBe('1000px');
+    expect(widthFor('wide')).toBe('1200px');
+  });
+
+  it('renders slotted content inside the block', () => {
+    const w = mount(AppLayout, { slots: { default: '<p>hello</p>' } });
+    expect(w.find('goa-page-block').html()).toContain('<p>hello</p>');
+  });
+});

package/src/generators/vue-components/files/src/lib/patterns/AppLayout.vue__tmpl__

@@ -14,36 +14,43 @@
 // copy would duplicate the anchor screen readers/keyboard nav jump to. The
 // top-level shell (App.vue for --layout=header, AppSideMenu for --layout=internal)
 // owns that landmark instead.
-withDefaults(defineProps<{ variant?: 'page' | 'wide' | 'form' }>(), {
-  variant: 'page',
-});
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{ variant?: 'page' | 'wide' | 'form' }>(),
+  { variant: 'page' },
+);
+
+// goa-page-block takes a CSS dimension (or "full"); the variant names stay the
+// public API so a view says what kind of page it is, not how wide it should be.
+const WIDTHS = {
+  form: '640px',
+  page: '1000px',
+  wide: '1200px',
+} as const;
+
+const maxWidth = computed(() => WIDTHS[props.variant]);
 </script>
 
 <template>
-  <div :class="`${variant}-content`">
-    <slot />
-  </div>
+  <goa-page-block :width="maxWidth">
+    <!-- goa-page-block supplies the centering, the max-width and a responsive
+         HORIZONTAL gutter, but no vertical padding -- GoA's own public-form
+         reference does the same thing, wrapping the block's children to add it. -->
+    <div class="app-layout-inset">
+      <slot />
+    </div>
+  </goa-page-block>
 </template>
 
 <style scoped>
-.page-content,
-.wide-content,
-.form-content {
-  margin-inline: auto;
-  box-sizing: border-box;
-  /* Design-token gutter; fallbacks apply only if tokens aren't loaded. */
-  padding: var(--goa-space-xl, 2.5rem) var(--goa-space-l, 1.5rem);
+.app-layout-inset {
+  padding-block: var(--goa-space-xl, 2.5rem);
 }
 
-.form-content { max-width: 640px; }
-.page-content { max-width: 1000px; }
-.wide-content { max-width: 1200px; }
-
 @media (max-width: 623.98px) {
-  .page-content,
-  .wide-content,
-  .form-content {
-    padding: var(--goa-space-m, 1rem);
+  .app-layout-inset {
+    padding-block: var(--goa-space-m, 1rem);
   }
 }
 </style>

package/src/generators/vue-components/files/src/lib/patterns/AppSideMenu.vue__tmpl__

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 
 // The alternate top-level shell for staff-facing/internal apps (goa-work-side-menu),
 // used instead of AppHeader/AppFooter -- not together with them. Presentational only:
@@ -23,7 +23,7 @@ interface AppSideMenuItem {
   current?: boolean;
 }
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     heading?: string;
     userName?: string;
@@ -38,13 +38,24 @@ withDefaults(
   },
 );
 
+// goa-work-side-menu renders its profile button whenever the `account` slot has
+// content, and that button's ONLY accessible name is `user-name` — the element
+// exposes no aria-label prop, and the name also feeds the icon's own label. Left
+// empty it is an unnamed button (axe `button-name`, critical) plus an unlabelled
+// icon (`role-img-alt`), on every route of the app.
+//
+// Resolved here rather than defaulted via withDefaults: a default only applies to
+// `undefined`, and the realistic case is a caller passing a signed-out user's
+// empty-string name. Trimmed so whitespace doesn't read as a name either.
+const profileName = computed(() => props.userName?.trim() || 'Account');
+
 const emit = defineEmits<{ itemClick: [item: AppSideMenuItem] }>();
 </script>
 
 <template>
   <div class="app-side-menu">
     <a class="skip-link" href="#main-content">Skip to main content</a>
-    <goa-work-side-menu :heading="heading" :user-name="userName">
+    <goa-work-side-menu :heading="heading" :user-name="profileName">
       <goa-work-side-menu-item
         v-for="item in primaryItems"
         :key="item.label"

package/src/generators/vue-components/files/src/lib/patterns/FilterBar.vue__tmpl__

@@ -78,6 +78,10 @@ const dateValues = computed(() =>
   ),
 );
 
+// Takes a plain string, never undefined: an unset filter is '', which is what
+// clearAll() resets to and what the dropdown renders as its "Any" option. The
+// dropdown wrapper's defineModel<string>() emits string | undefined, so its
+// handler normalises before calling this rather than widening the shape here.
 function set(key: string, value: string) {
   model.value = { ...model.value, [key]: value };
 }
@@ -109,7 +113,9 @@ function clearAll() {
             v-if="filter.type === 'dropdown'"
             :model-value="model[filter.key] ?? ''"
             :name="filter.key"
-            @update:model-value="(value: string) => set(filter.key, value)"
+            @update:model-value="
+              (value: string | undefined) => set(filter.key, value ?? '')
+            "
           >
             <goa-dropdown-item value="" :label="filter.anyLabel ?? 'Any'" />
             <goa-dropdown-item

package/src/generators/vue-components/files/src/lib/patterns/WorkspaceTable.vue__tmpl__

@@ -143,7 +143,13 @@ function onNativeSort(event: Event) {
         :pagenumber="page"
         :itemcount="itemCount"
         :perpagecount="perPageCount"
-        @_change="(e) => emit('pageChange', (e as CustomEvent<{ page: number }>).detail?.page ?? 1)"
+        @_change="
+          (e: Event) =>
+            emit(
+              'pageChange',
+              (e as CustomEvent<{ page: number }>).detail?.page ?? 1,
+            )
+        "
       />
     </template>
   </div>

package/src/generators/vue-components/vue-components.d.ts

@@ -1,5 +1,6 @@
 import { Tree } from '@nx/devkit';
 export declare function ensurePackageExports(host: Tree, libRoot: string): void;
 export declare const LIB_NAME = "vue-components";
+export declare function vueComponentsLibRoot(host: Tree): string;
 export declare function vueComponentsImportPath(host: Tree): string;
 export default function (host: Tree): Promise<void>;

package/src/generators/vue-components/vue-components.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_NAME = void 0;
 exports.ensurePackageExports = ensurePackageExports;
+exports.vueComponentsLibRoot = vueComponentsLibRoot;
 exports.vueComponentsImportPath = vueComponentsImportPath;
 exports.default = default_1;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
-const internal_1 = require("@nx/eslint/internal");
 const path = require("path");
+const vue_eslint_1 = require("../../utils/vue-eslint");
+const vue_tsconfig_1 = require("../../utils/vue-tsconfig");
 // Backfills package.json module-resolution fields for the library. In a TS-solution
 // workspace @nx/vue's library resolves via package.json `exports`, but its
 // programmatic default (useProjectJson skips writing them here) leaves them off, so
@@ -32,48 +34,24 @@ function ensurePackageExports(host, libRoot) {
         return pkg;
     });
 }
-// Turns off vue/no-deprecated-slot-attribute for the lib. GoabModal projects into
-// goa-modal's native web-component slot via `slot="actions"` — legitimate custom-
-// element usage, not the deprecated Vue 2 component-slot syntax the rule targets.
-// The whole lib wraps web components, so it's scoped to the lib (consuming apps,
-// which use `<template #actions>`, are unaffected).
-//
-// Uses @nx/eslint's own override helpers rather than hand-editing a specific
-// file format: create-nx-workspace's current default is flat config
-// (eslint.config.mjs), which is a JS module exporting an array, not JSON — an
-// earlier version of this function only handled legacy .eslintrc.json, so it
-// silently no-op'd (just a console warning) on flat-config workspaces, and
-// `nx lint vue-components` failed for real on unmodified generator output.
-// addOverrideToLintConfig/lintConfigHasOverride detect flat vs legacy
-// internally (via @nx/eslint's own useFlatConfig check) and edit whichever is
-// actually in effect — AST-aware for flat config, not string splicing.
-function disableSlotAttributeRule(host, libRoot) {
-    if (!(0, internal_1.isEslintConfigSupported)(host, libRoot)) {
-        console.warn(`\n⚠  No ESLint config found for ${libRoot} — could not disable vue/no-deprecated-slot-attribute.\n` +
-            `   GoabModal uses goa-modal's native \`slot\` attribute; if lint flags it, turn\n` +
-            `   that rule off for this library.\n`);
-        return;
-    }
-    // `files` is `string | string[]` per the Linter type — normalize before checking.
-    const isVueOverride = (o) => (Array.isArray(o.files) ? o.files : o.files ? [o.files] : []).some((f) => f.includes('vue'));
-    const alreadyDisabled = (0, internal_1.lintConfigHasOverride)(host, libRoot, (o) => {
-        var _a;
-        return isVueOverride(o) &&
-            ((_a = o.rules) === null || _a === void 0 ? void 0 : _a['vue/no-deprecated-slot-attribute']) === 'off';
-    });
-    if (alreadyDisabled) {
-        return;
-    }
-    (0, internal_1.addOverrideToLintConfig)(host, libRoot, {
-        files: ['*.vue'],
-        rules: { 'vue/no-deprecated-slot-attribute': 'off' },
-    });
-}
 exports.LIB_NAME = 'vue-components';
 // Import specifier for the shared wrapper lib, derived from the workspace npm
 // scope so it mirrors the eventual official `@abgov/vue-components` (same tail —
 // swapping to it is a scope change). Falls back to a scope built from the root
 // package name when the workspace isn't scoped.
+// Workspace-relative root of the shared wrapper lib, for docs that need to name a
+// path rather than an import specifier. Reads the project graph first so it is
+// correct in a TS-solution/flat workspace (where the lib sits at the root, not under
+// libs/) and only falls back to the layout when the lib hasn't been generated yet.
+function vueComponentsLibRoot(host) {
+    try {
+        return (0, devkit_1.readProjectConfiguration)(host, exports.LIB_NAME).root;
+    }
+    catch (_a) {
+        const { libsDir } = (0, devkit_1.getWorkspaceLayout)(host);
+        return libsDir && libsDir !== '.' ? `${libsDir}/${exports.LIB_NAME}` : exports.LIB_NAME;
+    }
+}
 function vueComponentsImportPath(host) {
     var _a, _b;
     let name = 'workspace';
@@ -118,8 +96,9 @@ function default_1(host) {
                 importPath: vueComponentsImportPath(host),
                 skipFormat: true,
             });
-            disableSlotAttributeRule(host, libRoot);
+            (0, vue_eslint_1.disableSlotAttributeRule)(host, libRoot, "GoabModal uses goa-modal's native `slot` attribute");
             ensurePackageExports(host, libRoot);
+            (0, vue_tsconfig_1.ensureBundlerModuleOption)(host, `${libRoot}/tsconfig.json`);
         }
         (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files'), libRoot, { tmpl: '' });
     });

package/src/generators/vue-components/vue-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue-components.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-components/vue-components.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"vue-components.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-components/vue-components.ts"],"names":[],"mappings":"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"}

package/src/generators/vue-components/vue-components.spec.ts

@@ -1,4 +1,10 @@
-import { readProjectConfiguration, Tree } from '@nx/devkit';
+import {
+  readJson,
+  readProjectConfiguration,
+  Tree,
+  updateJson,
+  writeJson,
+} from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import generator, {
   ensurePackageExports,
@@ -171,6 +177,7 @@ describe('Vue Components Generator', () => {
       'libs/vue-components/src/lib/primitives/GoabDatePicker.spec.ts',
       'libs/vue-components/src/lib/patterns/WorkspaceTable.spec.ts',
       'libs/vue-components/src/lib/patterns/Stepper.spec.ts',
+      'libs/vue-components/src/lib/patterns/AppLayout.spec.ts',
     ]) {
       expect(host.exists(spec)).toBeTruthy();
     }
@@ -178,7 +185,9 @@ describe('Vue Components Generator', () => {
     // Shared value formatters: every view renders a date/count the same way
     // instead of inlining its own toLocaleString (which is what a real app did
     // in three separate views before this existed).
-    expect(host.exists('libs/vue-components/src/lib/formatters.ts')).toBeTruthy();
+    expect(
+      host.exists('libs/vue-components/src/lib/formatters.ts'),
+    ).toBeTruthy();
     expect(
       host.exists('libs/vue-components/src/lib/formatters.spec.ts'),
     ).toBeTruthy();
@@ -190,6 +199,12 @@ describe('Vue Components Generator', () => {
       'formatDateTime',
       'formatNumber',
       'formatPercent',
+      // Display of a *coded* value, the other half of formatting. Views that
+      // skipped these put raw domain codes and neutral-blue badges in front of
+      // citizens, so they live beside the date/number formatters rather than
+      // being re-derived per view.
+      'optionLabel',
+      'badgeType',
     ]) {
       expect(formatters).toContain(`export function ${fn}`);
     }
@@ -321,4 +336,82 @@ describe('Vue Components Generator', () => {
       expect(host.exists('libs/vue-components/package.json')).toBeFalsy();
     });
   });
+
+  it('exports the display helpers from the lib barrel, not just the module', async () => {
+    await generator(host);
+    const index = host.read('libs/vue-components/src/index.ts').toString();
+    expect(index).toContain('optionLabel');
+    expect(index).toContain('badgeType');
+    expect(index).toContain('DisplayOption');
+    expect(index).toContain('BadgeType');
+  }, 30000);
+
+  it('falls back to the raw value for an unmapped code rather than hiding it', async () => {
+    await generator(host);
+    const formatters = host
+      .read('libs/vue-components/src/lib/formatters.ts')
+      .toString();
+    // An unmapped code is a data/config problem; showing it is debuggable,
+    // blanking it is not.
+    expect(formatters).toContain('return match ? match.label : String(value)');
+    // And an unmapped badge value stays neutral rather than being asserted good
+    // or bad.
+    expect(formatters).toContain("fallback: BadgeType = 'information'");
+  }, 30000);
+
+  // Regression: @nx/vue writes `moduleResolution: "bundler"` into the lib's
+  // tsconfig but leaves `module` inherited. Against a create-nx-workspace base
+  // (`module: "nodenext"`) that pair is invalid -- TS5095 and TS5109 -- so
+  // `nx build` failed on completely unmodified generator output.
+  it('gives the lib a module setting compatible with its bundler moduleResolution', async () => {
+    writeJson(host, 'tsconfig.base.json', {
+      compilerOptions: {
+        module: 'nodenext',
+        moduleResolution: 'nodenext',
+        target: 'es2022',
+      },
+    });
+    await generator(host);
+    const compilerOptions = readJson(
+      host,
+      'libs/vue-components/tsconfig.json',
+    ).compilerOptions;
+    expect(compilerOptions.moduleResolution).toBe('bundler');
+    expect(compilerOptions.module).toBe('esnext');
+  }, 30000);
+
+  it('leaves a tsconfig that already declares module alone', async () => {
+    await generator(host);
+    // Pin something deliberate, then re-run: the backfill must not overwrite it.
+    updateJson(host, 'libs/vue-components/tsconfig.json', (tsconfig) => {
+      tsconfig.compilerOptions.module = 'preserve';
+      return tsconfig;
+    });
+    await generator(host);
+    expect(
+      readJson(host, 'libs/vue-components/tsconfig.json').compilerOptions
+        .module,
+    ).toBe('preserve');
+  }, 30000);
+
+  // Regression: goa-work-side-menu's profile button takes its accessible name
+  // only from `user-name` (no aria-label prop exists on the element), and the
+  // shell rendered the account slot -- which is what creates that button --
+  // without ever supplying one. Measured on pristine generator output, that was
+  // an unnamed critical `button-name` violation plus an unlabelled `role-img-alt`
+  // icon on every route of an internal-layout app.
+  it('never leaves the side menu profile button without an accessible name', async () => {
+    await generator(host);
+    const sideMenu = host
+      .read('libs/vue-components/src/lib/patterns/AppSideMenu.vue')
+      .toString();
+
+    // Resolved, not passed straight through: an empty string is the realistic
+    // input (a signed-out user), and withDefaults only covers `undefined`.
+    expect(sideMenu).toContain(
+      "const profileName = computed(() => props.userName?.trim() || 'Account')",
+    );
+    expect(sideMenu).toContain(':user-name="profileName"');
+    expect(sideMenu).not.toContain(':user-name="userName"');
+  }, 30000);
 });

package/src/generators/vue-detail-view/files/src/views/__viewFileName__.vue__tmpl__

@@ -1,8 +1,52 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { RecordDetailShell, formatCurrency, formatDate } from '<%= goaImportPath %>';
+import {
+  RecordDetailShell,
+  formatCurrency,
+  formatDate,
+<% if (hasCodedFields || hasBadgeFields) { -%>
+  optionLabel,
+<% } -%>
+<% if (hasBadgeFields) { -%>
+  badgeType,
+<% } -%>
+} from '<%= goaImportPath %>';
+<% if (hasCodedFields || hasBadgeFields) { -%>
+import type {
+<% if (hasCodedFields || hasBadgeFields) { -%>
+  DisplayOption,
+<% } -%>
+<% if (hasBadgeFields) { -%>
+  BadgeType,
+<% } -%>
+} from '<%= goaImportPath %>';
+<% } -%>
 import { useApi } from '../composables/useApi';
+<% if (hasCodedFields || hasBadgeFields) { -%>
+
+// Value -> label for coded fields, so the record reads back in prose rather than
+// in stored codes.
+const fieldOptions: Record<string, DisplayOption[]> = {
+<% fields.forEach(function (field) { -%>
+<% if (field.options && field.options.length) { -%>
+  '<%= field.key %>': <%- JSON.stringify(field.options) %>,
+<% } -%>
+<% }); -%>
+};
+<% } -%>
+<% if (hasBadgeFields) { -%>
+
+// Value -> badge type; unmapped values render neutral rather than being asserted
+// as good or bad.
+const fieldBadgeTypes: Record<string, Record<string, BadgeType>> = {
+<% fields.forEach(function (field) { -%>
+<% if (field.type === 'badge') { -%>
+  '<%= field.key %>': <%- JSON.stringify(field.badgeMap || {}) %>,
+<% } -%>
+<% }); -%>
+};
+<% } -%>
 
 // The fetched record's shape isn't known to this generator -- read fields
 // defensively rather than declaring (and likely getting wrong) a fake interface.
@@ -52,7 +96,12 @@ function goBack() {
       <dt><%= field.label %></dt>
       <dd>
 <% if (field.type === 'badge') { -%>
-        <goa-badge type="information" :content="String(record['<%= field.key %>'] ?? '—')" />
+        <goa-badge
+          :type="badgeType(fieldBadgeTypes['<%= field.key %>'], record['<%= field.key %>'])"
+          :content="optionLabel(fieldOptions['<%= field.key %>'], record['<%= field.key %>'])"
+        />
+<% } else if (field.options && field.options.length) { -%>
+        {{ optionLabel(fieldOptions['<%= field.key %>'], record['<%= field.key %>']) }}
 <% } else if (field.type === 'date') { -%>
         {{ formatDate(record['<%= field.key %>']) }}
 <% } else if (field.type === 'currency') { -%>