@abgov/nx-adsp 13.31.0 → 13.31.1

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/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,
@@ -179,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();
@@ -191,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}`);
     }
@@ -322,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') { -%>

package/src/generators/vue-detail-view/schema.d.ts

@@ -2,6 +2,24 @@ export interface DetailViewField {
   key: string;
   label: string;
   type?: 'text' | 'date' | 'currency' | 'badge';
+  /**
+   * Value -> label for a coded field. Supply this whenever the stored value is a
+   * code rather than prose, or the view renders the raw code.
+   */
+  options?: { value: string; label: string }[];
+  /**
+   * `badge` only. Value -> goa-badge type. Unmapped values render neutral.
+   */
+  badgeMap?: Record<
+    string,
+    | 'information'
+    | 'success'
+    | 'important'
+    | 'emergency'
+    | 'dark'
+    | 'midtone'
+    | 'light'
+  >;
 }
 
 export interface Schema {

package/src/generators/vue-detail-view/schema.json

@@ -25,7 +25,7 @@
     },
     "resource": {
       "type": "string",
-      "description": "API resource path segment -- the view fetches /api/<resource>/:id."
+      "description": "API resource path segment -- the view fetches /api/v1/<resource>/:id."
     },
     "route": {
       "type": "string",
@@ -33,7 +33,7 @@
     },
     "fields": {
       "type": "string",
-      "description": "JSON array of fields rendered in the record's info list, in display order -- e.g. '[{\"key\":\"status\",\"label\":\"Status\",\"type\":\"badge\"}]'. Each item: { key, label, type?: \"text\"|\"date\"|\"currency\"|\"badge\" (default \"text\") }. A plain array is also accepted when this generator is invoked programmatically. Nx's CLI option coercion only supports comma-separated primitive lists for array-typed schema properties, not JSON -- a JSON string is the only CLI syntax that actually survives Nx's own arg parsing for a structured list like this."
+      "description": "JSON array of fields rendered in the record's info list, in display order -- e.g. '[{\"key\":\"status\",\"label\":\"Status\",\"type\":\"badge\"}]'. Each item: { key, label, type?: \"text\"|\"date\"|\"currency\"|\"badge\" (default \"text\"), options?: [{value,label}], badgeMap?: {value: badgeType} }. Supply `options` for any field whose stored value is a code, or the view renders the raw code. Supply `badgeMap` on a `badge` field to give each status its colour; unmapped values render neutral. A plain array is also accepted when this generator is invoked programmatically. Nx's CLI option coercion only supports comma-separated primitive lists for array-typed schema properties, not JSON -- a JSON string is the only CLI syntax that actually survives Nx's own arg parsing for a structured list like this."
     },
     "heading": {
       "type": "string",

package/src/generators/vue-detail-view/vue-detail-view.js

@@ -38,7 +38,10 @@ function default_1(host, options) {
         // Idempotent -- ensures RecordDetailShell exists even in a project scaffolded
         // before vue-components carried it.
         yield (0, vue_components_1.default)(host);
-        (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files'), normalizedOptions.projectRoot, Object.assign(Object.assign({}, normalizedOptions), { goaImportPath: (0, vue_components_1.vueComponentsImportPath)(host), tmpl: '' }));
+        (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files'), normalizedOptions.projectRoot, Object.assign(Object.assign({}, normalizedOptions), { goaImportPath: (0, vue_components_1.vueComponentsImportPath)(host), 
+            // Derived here, not tested inline: EJS throws a ReferenceError on a bare
+            // undefined variable, so a flag the template reads must always be defined.
+            hasCodedFields: normalizedOptions.fields.some((field) => { var _a; return (_a = field.options) === null || _a === void 0 ? void 0 : _a.length; }), hasBadgeFields: normalizedOptions.fields.some((field) => field.type === 'badge'), tmpl: '' }));
         (0, vue_router_1.insertVueRoute)(host, normalizedOptions.projectRoot, normalizedOptions.project, {
             path: normalizedOptions.route,
             componentImportPath: `../views/${normalizedOptions.viewFileName}.vue`,

package/src/generators/vue-detail-view/vue-detail-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue-detail-view.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-detail-view/vue-detail-view.ts"],"names":[],"mappings":";;AAqDA,4BAyBC;;AA9ED,uCAMoB;AACpB,6BAA6B;AAC7B,uDAAwD;AACxD,qEAE0C;AAG1C,6EAA6E;AAC7E,4EAA4E;AAC5E,4EAA4E;AAC5E,6EAA6E;AAC7E,0EAA0E;AAC1E,6EAA6E;AAC7E,iEAAiE;AACjE,SAAS,WAAW,CAAC,MAAwB;IAC3C,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACxE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClD,MAAM,IAAI,KAAK,CACb,2EAA2E,CAC5E,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAU,EAAE,OAAe;;IACnD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAE9E,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACb,YAAY,OAAO,CAAC,KAAK,qFAAqF,CAC/G,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAA,cAAK,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;IAChD,uCACK,OAAO,KACV,WAAW,EACX,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,EACnC,YAAY,EAAE,GAAG,SAAS,MAAM;QAChC,2EAA2E;QAC3E,mDAAmD;QACnD,OAAO,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,EACvE,YAAY,EAAE,MAAA,OAAO,CAAC,YAAY,mCAAI,IAAI,IAC1C;AACJ,CAAC;AAED,mBAA+B,IAAU,EAAE,OAAe;;QACxD,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAE1D,8EAA8E;QAC9E,oCAAoC;QACpC,MAAM,IAAA,wBAAsB,EAAC,IAAI,CAAC,CAAC;QAEnC,IAAA,sBAAa,EACX,IAAI,EACJ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAC7B,iBAAiB,CAAC,WAAW,kCAExB,iBAAiB,KACpB,aAAa,EAAE,IAAA,wCAAuB,EAAC,IAAI,CAAC,EAC5C,IAAI,EAAE,EAAE,IAEX,CAAC;QAEF,IAAA,2BAAc,EAAC,IAAI,EAAE,iBAAiB,CAAC,WAAW,EAAE,iBAAiB,CAAC,OAAO,EAAE;YAC7E,IAAI,EAAE,iBAAiB,CAAC,KAAK;YAC7B,mBAAmB,EAAE,YAAY,iBAAiB,CAAC,YAAY,MAAM;YACrE,YAAY,EAAE,iBAAiB,CAAC,YAAY;SAC7C,CAAC,CAAC;QAEH,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA"}
+{"version":3,"file":"vue-detail-view.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-detail-view/vue-detail-view.ts"],"names":[],"mappings":";;AAqDA,4BAsCC;;AA3FD,uCAMoB;AACpB,6BAA6B;AAC7B,uDAAwD;AACxD,qEAE0C;AAG1C,6EAA6E;AAC7E,4EAA4E;AAC5E,4EAA4E;AAC5E,6EAA6E;AAC7E,0EAA0E;AAC1E,6EAA6E;AAC7E,iEAAiE;AACjE,SAAS,WAAW,CAAC,MAAwB;IAC3C,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACxE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClD,MAAM,IAAI,KAAK,CACb,2EAA2E,CAC5E,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAU,EAAE,OAAe;;IACnD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAE9E,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACb,YAAY,OAAO,CAAC,KAAK,qFAAqF,CAC/G,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAA,cAAK,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;IAChD,uCACK,OAAO,KACV,WAAW,EACX,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,EACnC,YAAY,EAAE,GAAG,SAAS,MAAM;QAChC,2EAA2E;QAC3E,mDAAmD;QACnD,OAAO,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,EACvE,YAAY,EAAE,MAAA,OAAO,CAAC,YAAY,mCAAI,IAAI,IAC1C;AACJ,CAAC;AAED,mBAA+B,IAAU,EAAE,OAAe;;QACxD,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAE1D,8EAA8E;QAC9E,oCAAoC;QACpC,MAAM,IAAA,wBAAsB,EAAC,IAAI,CAAC,CAAC;QAEnC,IAAA,sBAAa,EACX,IAAI,EACJ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAC7B,iBAAiB,CAAC,WAAW,kCAExB,iBAAiB,KACpB,aAAa,EAAE,IAAA,wCAAuB,EAAC,IAAI,CAAC;YAC5C,yEAAyE;YACzE,2EAA2E;YAC3E,cAAc,EAAE,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAC3C,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,MAAM,CAAA,EAAA,CACjC,EACD,cAAc,EAAE,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAClC,EACD,IAAI,EAAE,EAAE,IAEX,CAAC;QAEF,IAAA,2BAAc,EACZ,IAAI,EACJ,iBAAiB,CAAC,WAAW,EAC7B,iBAAiB,CAAC,OAAO,EACzB;YACE,IAAI,EAAE,iBAAiB,CAAC,KAAK;YAC7B,mBAAmB,EAAE,YAAY,iBAAiB,CAAC,YAAY,MAAM;YACrE,YAAY,EAAE,iBAAiB,CAAC,YAAY;SAC7C,CACF,CAAC;QAEF,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA"}

package/src/generators/vue-detail-view/vue-detail-view.spec.ts

@@ -102,19 +102,23 @@ describe('Vue Detail View Generator', () => {
       .read('apps/test/src/views/ApplicationDetailView.vue')
       .toString();
     expect(view).toContain('heading="Application Detail"');
-    expect(view).toContain("await get('applications', String(route.params.id))");
+    expect(view).toContain(
+      "await get('applications', String(route.params.id))",
+    );
     expect(view).not.toContain('apiFetch');
 
     // Vue Router reuses this component across an id-only change, so the fetch
     // is driven by a watch rather than onMounted.
-    expect(view).toContain("watch(() => route.params.id, load, { immediate: true })");
+    expect(view).toContain(
+      'watch(() => route.params.id, load, { immediate: true })',
+    );
     expect(view).not.toContain('onMounted(');
     expect(view).not.toContain('function formatCurrency');
 
     expect(view).toContain('formatDate');
     expect(view).not.toContain('function formatDate');
     expect(view).toContain(
-      "<goa-badge type=\"information\" :content=\"String(record['status'] ?? '—')\" />",
+      "badgeType(fieldBadgeTypes['status'], record['status'])",
     );
     // A type: 'date' column is a calendar date -- formatDate, not
     // formatDateTime, which would show an invented midnight.
@@ -168,9 +172,7 @@ describe('Vue Detail View Generator', () => {
   it('ensures the shared RecordDetailShell pattern component exists', async () => {
     await generator(host, baseOptions);
     expect(
-      host.exists(
-        'libs/vue-components/src/lib/patterns/RecordDetailShell.vue',
-      ),
+      host.exists('libs/vue-components/src/lib/patterns/RecordDetailShell.vue'),
     ).toBeTruthy();
   }, 30000);
 
@@ -180,4 +182,32 @@ describe('Vue Detail View Generator', () => {
     const after = readProjectConfiguration(host, 'test');
     expect(after).toEqual(before);
   }, 30000);
+
+  it('maps badge values to semantic types and renders coded fields as labels', async () => {
+    await generator(host, {
+      ...baseOptions,
+      fields: [
+        {
+          key: 'status',
+          label: 'Status',
+          type: 'badge',
+          badgeMap: { declined: 'emergency' },
+        },
+        {
+          key: 'region',
+          label: 'Region',
+          options: [{ value: 'northwest', label: 'North west' }],
+        },
+      ],
+    });
+    const view = host
+      .read('apps/test/src/views/ApplicationDetailView.vue')
+      .toString();
+    // Quote style depends on whether formatFiles ran, so match the pair.
+    expect(view).toMatch(/["']?declined["']?\s*:\s*["']emergency["']/);
+    expect(view).toContain("badgeType(fieldBadgeTypes['status']");
+    expect(view).toContain(
+      "optionLabel(fieldOptions['region'], record['region'])",
+    );
+  }, 30000);
 });