@abgov/nx-adsp 13.29.0 → 13.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.29.0",
+  "version": "13.31.0",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/vue-admin-crud/files/src/views/__editViewFileName__.vue__tmpl__

@@ -2,7 +2,27 @@
 import { reactive, ref, computed, watch, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
-import { GoabInput, GoabCheckbox } from '<%= goaImportPath %>';
+import {
+<% if (fields.some((f) => !f.type || f.type === 'text' || f.type === 'number')) { -%>
+  GoabInput,
+<% } -%>
+<% if (fields.some((f) => f.type === 'textarea')) { -%>
+  GoabTextarea,
+<% } -%>
+<% if (fields.some((f) => f.type === 'date')) { -%>
+  GoabDatePicker,
+<% } -%>
+<% if (fields.some((f) => f.type === 'select')) { -%>
+  GoabDropdown,
+<% } -%>
+<% if (fields.some((f) => f.type === 'checkbox')) { -%>
+  GoabCheckbox,
+<% } -%>
+<% if (fields.some((f) => f.type === 'date')) { -%>
+  fromIsoDateString,
+  toIsoDateString,
+<% } -%>
+} from '<%= goaImportPath %>';
 import { useApi } from '../composables/useApi';
 
 const route = useRoute();
@@ -15,7 +35,7 @@ const isNew = computed(() => idParam.value === 'new' || idParam.value === '');
 
 const form = reactive({
 <% fields.forEach(function (field) { -%>
-  <%- field.key %>: <%- field.type === 'checkbox' ? 'false' : "''" %>,
+  <%- field.key %>: <%- field.type === 'checkbox' ? 'false' : field.type === 'date' ? 'undefined as Date | undefined' : "''" %>,
 <% }); -%>
 });
 
@@ -37,7 +57,15 @@ async function load() {
   try {
     const data = await get('<%= resource %>', idParam.value);
 <% fields.forEach(function (field) { -%>
+<% if (field.type === 'date') { -%>
+    if (data['<%= field.key %>'] !== undefined)
+      form.<%= field.key %> = fromIsoDateString(data['<%= field.key %>']);
+<% } else if (field.type === 'number') { -%>
+    if (data['<%= field.key %>'] !== undefined)
+      form.<%= field.key %> = String(data['<%= field.key %>']);
+<% } else { -%>
     if (data['<%= field.key %>'] !== undefined) form.<%= field.key %> = data['<%= field.key %>'];
+<% } -%>
 <% }); -%>
   } catch (e) {
     loadError.value = e instanceof Error ? e.message : 'Failed to load.';
@@ -77,6 +105,24 @@ function validate(): boolean {
   let valid = true;
 <% fields.forEach(function (field) { -%>
 <% if (field.type !== 'checkbox' && field.required !== false) { -%>
+<% if (field.type === 'date') { -%>
+  if (!form.<%= field.key %>) {
+    errors.<%= field.key %> = '<%= field.label %> is required.';
+    valid = false;
+  } else {
+    errors.<%= field.key %> = undefined;
+  }
+<% } else if (field.type === 'number') { -%>
+  if (form.<%= field.key %> === '') {
+    errors.<%= field.key %> = '<%= field.label %> is required.';
+    valid = false;
+  } else if (!Number.isFinite(Number(form.<%= field.key %>))) {
+    errors.<%= field.key %> = '<%= field.label %> must be a number.';
+    valid = false;
+  } else {
+    errors.<%= field.key %> = undefined;
+  }
+<% } else { -%>
   if (!form.<%= field.key %> || !form.<%= field.key %>.trim()) {
     errors.<%= field.key %> = '<%= field.label %> is required.';
     valid = false;
@@ -84,17 +130,41 @@ function validate(): boolean {
     errors.<%= field.key %> = undefined;
   }
 <% } -%>
+<% } else if (field.type === 'number') { -%>
+  if (form.<%= field.key %> !== '' && !Number.isFinite(Number(form.<%= field.key %>))) {
+    errors.<%= field.key %> = '<%= field.label %> must be a number.';
+    valid = false;
+  } else {
+    errors.<%= field.key %> = undefined;
+  }
+<% } -%>
 <% }); -%>
   return valid;
 }
 
+// The form model holds what each CONTROL needs (a Date for a picker, a string
+// for a number input); the API wants wire types. Converting here keeps that
+// difference in one place instead of at every call site.
+function payload() {
+  return {
+    ...form,
+<% fields.forEach(function (field) { -%>
+<% if (field.type === 'number') { -%>
+    <%- field.key %>: form.<%- field.key %> === '' ? null : Number(form.<%- field.key %>),
+<% } else if (field.type === 'date') { -%>
+    <%- field.key %>: toIsoDateString(form.<%- field.key %>) || null,
+<% } -%>
+<% }); -%>
+  };
+}
+
 async function onSubmit() {
   if (!validate()) return;
   saving.value = true;
   saveError.value = null;
   try {
     // Create vs. update — which verb and path that means is the adapter's call.
-    await save('<%= resource %>', isNew.value ? null : idParam.value, form);
+    await save('<%= resource %>', isNew.value ? null : idParam.value, payload());
     successMessage.value = isNew.value ? '<%= singularLabel %> created.' : '<%= singularLabel %> saved.';
     redirectTimer = setTimeout(() => router.push('<%= route %>'), 600);
   } catch (e) {
@@ -135,12 +205,28 @@ onUnmounted(() => {
     <form v-else @submit.prevent="onSubmit">
 <% fields.forEach(function (field) { -%>
 <% if (field.type === 'checkbox') { -%>
-      <goa-form-item label="<%= field.label %>">
+      <!-- The checkbox carries its own label via `text`; goa-form-item must not
+           repeat it, or it renders twice. -->
+      <goa-form-item>
         <GoabCheckbox v-model="form.<%= field.key %>" name="<%= field.key %>" text="<%= field.label %>" />
       </goa-form-item>
 <% } else { -%>
       <goa-form-item label="<%= field.label %>"<% if (field.required !== false) { %> requirement="required"<% } %> :error="errors.<%= field.key %>">
+<% if (field.type === 'textarea') { -%>
+        <GoabTextarea v-model="form.<%= field.key %>" name="<%= field.key %>" />
+<% } else if (field.type === 'number') { -%>
+        <GoabInput v-model="form.<%= field.key %>" name="<%= field.key %>" type="number" />
+<% } else if (field.type === 'date') { -%>
+        <GoabDatePicker v-model="form.<%= field.key %>" name="<%= field.key %>" />
+<% } else if (field.type === 'select') { -%>
+        <GoabDropdown v-model="form.<%= field.key %>" name="<%= field.key %>">
+<% (field.options || []).forEach(function (option) { -%>
+          <goa-dropdown-item value="<%- option.value %>" label="<%- option.label %>" />
+<% }); -%>
+        </GoabDropdown>
+<% } else { -%>
         <GoabInput v-model="form.<%= field.key %>" name="<%= field.key %>" type="text" />
+<% } -%>
       </goa-form-item>
 <% } -%>
 <% }); -%>

package/src/generators/vue-admin-crud/schema.d.ts

@@ -1,7 +1,9 @@
 export interface AdminCrudField {
   key: string;
   label: string;
-  type?: 'text' | 'checkbox';
+  type?: 'text' | 'textarea' | 'number' | 'date' | 'select' | 'checkbox';
+  /** `select` only. Rendered as goa-dropdown-item children. */
+  options?: { value: string; label: string }[];
   required?: boolean;
 }
 

package/src/generators/vue-admin-crud/schema.json

@@ -33,7 +33,7 @@
     },
     "fields": {
       "type": "string",
-      "description": "JSON array of fields, in display/form order -- e.g. '[{\"key\":\"name\",\"label\":\"Name\"},{\"key\":\"active\",\"label\":\"Active\",\"type\":\"checkbox\"}]'. Each item: { key, label, type?: \"text\"|\"checkbox\" (default \"text\"), required?: boolean (default true for \"text\", ignored for \"checkbox\") }. A plain array is also accepted when this generator is invoked programmatically."
+      "description": "JSON array of fields, in display/form order -- e.g. '[{\"key\":\"name\",\"label\":\"Name\"},{\"key\":\"quota\",\"label\":\"Quota\",\"type\":\"number\"},{\"key\":\"region\",\"label\":\"Region\",\"type\":\"select\",\"options\":[{\"value\":\"north\",\"label\":\"North\"}]}]'. Each item: { key, label, type?: \"text\"|\"textarea\"|\"number\"|\"date\"|\"select\"|\"checkbox\" (default \"text\"), options?: [{value,label}] (select only), required?: boolean }. A number field is submitted as a number and a date as YYYY-MM-DD built from local calendar parts. A plain array is also accepted when 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 survives Nx's own arg parsing."
     },
     "heading": {
       "type": "string",
@@ -49,6 +49,12 @@
       "default": true
     }
   },
-  "required": ["project", "name", "resource", "route", "fields"],
+  "required": [
+    "project",
+    "name",
+    "resource",
+    "route",
+    "fields"
+  ],
   "additionalProperties": false
 }

package/src/generators/vue-admin-crud/vue-admin-crud.js

@@ -21,6 +21,24 @@ function parseFields(fields) {
     }
     return parsed;
 }
+const FIELD_TYPES = [
+    'text',
+    'textarea',
+    'number',
+    'date',
+    'select',
+    'checkbox',
+];
+function assertFieldTypes(fields) {
+    for (const field of fields) {
+        if (field.type && !FIELD_TYPES.includes(field.type)) {
+            throw new Error(`--fields[].type must be one of ${FIELD_TYPES.join(', ')}; got "${field.type}" for "${field.key}".`);
+        }
+        if (field.type === 'select' && !Array.isArray(field.options)) {
+            throw new Error(`--fields[].options is required for the select field "${field.key}" -- the generator cannot know its choices.`);
+        }
+    }
+}
 function normalizeOptions(host, options) {
     var _a, _b, _c;
     const { root: projectRoot } = (0, devkit_1.readProjectConfiguration)(host, options.project);
@@ -28,7 +46,11 @@ function normalizeOptions(host, options) {
     // className is PascalCase (e.g. "Regions") -- space it out for a readable
     // default heading ("Regions").
     const heading = (_a = options.heading) !== null && _a !== void 0 ? _a : className.replace(/([A-Z])/g, ' $1').trim();
-    return Object.assign(Object.assign({}, options), { projectRoot, fields: parseFields(options.fields), listViewFileName: `${className}ListView`, editViewFileName: `${className}EditView`, heading, singularLabel: (_b = options.singularLabel) !== null && _b !== void 0 ? _b : heading, requiresAuth: (_c = options.requiresAuth) !== null && _c !== void 0 ? _c : true });
+    return Object.assign(Object.assign({}, options), { projectRoot, fields: (() => {
+            const fields = parseFields(options.fields);
+            assertFieldTypes(fields);
+            return fields;
+        })(), listViewFileName: `${className}ListView`, editViewFileName: `${className}EditView`, heading, singularLabel: (_b = options.singularLabel) !== null && _b !== void 0 ? _b : heading, requiresAuth: (_c = options.requiresAuth) !== null && _c !== void 0 ? _c : true });
 }
 function default_1(host, options) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {

package/src/generators/vue-admin-crud/vue-admin-crud.js.map

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

package/src/generators/vue-admin-crud/vue-admin-crud.spec.ts

@@ -94,7 +94,11 @@ describe('Vue Admin CRUD Generator', () => {
     expect(view).not.toContain('errors.active');
     // Create vs. update is expressed as a null id; which verb and path that
     // becomes is decided by useApi's adapter.
-    expect(view).toContain("await save('regions', isNew.value ? null : idParam.value, form)");
+    // payload(), not the raw form: the model holds what the controls need, the
+    // API wants wire types.
+    expect(view).toContain(
+      "await save('regions', isNew.value ? null : idParam.value, payload())",
+    );
     expect(view).toContain("await get('regions', idParam.value)");
     expect(view).not.toContain('apiFetch');
     expect(view).not.toContain("'PUT'");
@@ -117,6 +121,104 @@ describe('Vue Admin CRUD Generator', () => {
     expect(view).toContain('Edit Regions');
   }, 30000);
 
+  describe('field types', () => {
+    const allTypes = JSON.stringify([
+      { key: 'name', label: 'Name' },
+      { key: 'notes', label: 'Notes', type: 'textarea', required: false },
+      { key: 'quota', label: 'Quota', type: 'number' },
+      { key: 'effective', label: 'Effective', type: 'date' },
+      {
+        key: 'region',
+        label: 'Region',
+        type: 'select',
+        options: [
+          { value: 'north', label: 'North' },
+          { value: 'south', label: 'South' },
+        ],
+      },
+      { key: 'active', label: 'Active', type: 'checkbox' },
+    ]);
+
+    it('renders the right control for each type', async () => {
+      await generator(host, { ...baseOptions, fields: allTypes });
+      const view = host
+        .read('apps/test/src/views/RegionsEditView.vue')
+        .toString();
+      expect(view).toContain('<GoabInput v-model="form.name"');
+      expect(view).toContain('<GoabTextarea v-model="form.notes"');
+      expect(view).toContain('type="number"');
+      expect(view).toContain('<GoabDatePicker v-model="form.effective"');
+      expect(view).toContain('<GoabDropdown v-model="form.region"');
+      expect(view).toContain('<goa-dropdown-item value="north" label="North" />');
+      expect(view).toContain('<GoabCheckbox v-model="form.active"');
+    });
+
+    it('imports only the wrappers the field set actually uses', async () => {
+      await generator(host, {
+        ...baseOptions,
+        fields: JSON.stringify([{ key: 'name', label: 'Name' }]),
+      });
+      const view = host
+        .read('apps/test/src/views/RegionsEditView.vue')
+        .toString();
+      expect(view).toContain('GoabInput');
+      for (const unused of ['GoabTextarea', 'GoabDatePicker', 'GoabDropdown']) {
+        expect(view).not.toContain(unused);
+      }
+    });
+
+    it('submits a number as a number and a date as a local-calendar string', async () => {
+      await generator(host, { ...baseOptions, fields: allTypes });
+      const view = host
+        .read('apps/test/src/views/RegionsEditView.vue')
+        .toString();
+      expect(view).toContain("quota: form.quota === '' ? null : Number(form.quota)");
+      expect(view).toContain('effective: toIsoDateString(form.effective) || null');
+      // A stored YYYY-MM-DD comes back as a Date the picker can redisplay.
+      expect(view).toContain("fromIsoDateString(data['effective'])");
+    });
+
+    it('validates by type, not by assuming every value is a string', async () => {
+      await generator(host, { ...baseOptions, fields: allTypes });
+      const view = host
+        .read('apps/test/src/views/RegionsEditView.vue')
+        .toString();
+      // A number field's required check cannot be !value.trim().
+      expect(view).toContain("if (form.quota === '')");
+      expect(view).toContain('Quota must be a number.');
+      // A date field holds a Date, so truthiness is the check.
+      expect(view).toContain('if (!form.effective)');
+    });
+
+    it('does not label a checkbox twice', async () => {
+      await generator(host, { ...baseOptions, fields: allTypes });
+      const view = host
+        .read('apps/test/src/views/RegionsEditView.vue')
+        .toString();
+      // goa-form-item must not repeat the label the checkbox already carries.
+      expect(view).not.toContain('<goa-form-item label="Active"');
+      expect(view).toContain('text="Active"');
+    });
+
+    it('rejects a type it cannot render', async () => {
+      await expect(
+        generator(host, {
+          ...baseOptions,
+          fields: JSON.stringify([{ key: 'x', label: 'X', type: 'colour' }]),
+        }),
+      ).rejects.toThrow('got "colour" for "x"');
+    });
+
+    it('requires options for a select, since it cannot know the choices', async () => {
+      await expect(
+        generator(host, {
+          ...baseOptions,
+          fields: JSON.stringify([{ key: 'r', label: 'R', type: 'select' }]),
+        }),
+      ).rejects.toThrow(/options is required for the select field "r"/);
+    });
+  });
+
   it('uses --singularLabel over --heading for Create/Edit headings when both are set', async () => {
     await generator(host, {
       ...baseOptions,

package/src/generators/vue-app/files/src/App.vue__tmpl__

@@ -78,6 +78,13 @@ function onItemClick(item: { to?: string }) {
     </AppLayout>
   </AppSideMenu>
 <% } else { %>
+  <!-- goa-one-column-layout owns the page's flex column, the sticky footer and
+       the <main> landmark. That <main> lives in the element's shadow DOM, so the
+       skip link targets an id'd wrapper in the slotted (light DOM) content
+       instead -- the wrapper is a plain div, so there is still exactly one main
+       landmark on the page. -->
+  <goa-one-column-layout>
+  <section slot="header">
   <a class="skip-link" href="#main-content">Skip to main content</a>
   <AppHeader heading="<%= projectName %>">
     <template #utilities>
@@ -100,12 +107,18 @@ function onItemClick(item: { to?: string }) {
     @sign-in="signInAgain"
     @dismiss="session.dismiss"
   />
-  <main id="main-content">
+  </section>
+
+  <div id="main-content">
     <AppLayout :variant="contentWidth">
       <RouterView />
     </AppLayout>
-  </main>
-  <AppFooter />
+  </div>
+
+  <section slot="footer">
+    <AppFooter />
+  </section>
+  </goa-one-column-layout>
 <% } %>
 </template>
 

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

@@ -120,10 +120,17 @@ describe('Vue App Generator', () => {
     const layoutPath = 'libs/vue-components/src/lib/patterns/AppLayout.vue';
     expect(host.exists(layoutPath)).toBeTruthy();
     const layout = host.read(layoutPath).toString();
-    // Three named width variants, token-driven padding.
-    expect(layout).toContain('form-content');
-    expect(layout).toContain('wide-content');
+    // The gutter is goa-page-block's job now: it supplies the centering, the
+    // max-width and a responsive horizontal gutter. The named variants stay the
+    // public API, mapped to the widths the element takes.
+    expect(layout).toContain('<goa-page-block');
+    expect(layout).toContain("form: '640px'");
+    expect(layout).toContain("page: '1000px'");
+    expect(layout).toContain("wide: '1200px'");
+    // Vertical padding is not part of goa-page-block, so this component keeps it
+    // -- the same thing GoA's own public-form reference does.
     expect(layout).toContain('--goa-space');
+    expect(layout).toContain('padding-block');
     // AppLayout must NOT own the skip-to-main-content landmark itself: it nests
     // inside AppSideMenu for --layout=internal, which already provides one, and
     // a second <main id="main-content"> would duplicate the landmark/id.
@@ -137,8 +144,16 @@ describe('Vue App Generator', () => {
     const app = host.read('apps/test/src/App.vue').toString();
     expect(app).toContain('AppLayout');
     expect(app).not.toContain('main > section');
+    // The public shell is goa-one-column-layout, which owns the page's flex
+    // column, sticky footer and <main> landmark. That <main> is in its shadow
+    // DOM, so the skip link targets an id'd wrapper in the slotted content --
+    // a plain div, so the page still has exactly one main landmark.
+    expect(app).toContain('<goa-one-column-layout>');
+    expect(app).toContain('<section slot="header">');
+    expect(app).toContain('<section slot="footer">');
     expect(app).toContain('href="#main-content"');
-    expect(app).toContain('id="main-content"');
+    expect(app).toContain('<div id="main-content">');
+    expect(app).not.toContain('<main id="main-content">');
   });
 
   it('provisions the shared GoA wrapper library and points the app at it', async () => {

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

@@ -34,6 +34,8 @@ export { default as StepErrorSummary } from './lib/patterns/StepErrorSummary.vue
 export { default as FilterBar } from './lib/patterns/FilterBar.vue';
 
 export {
+  fromIsoDateString,
+  toIsoDateString,
   formatCurrency,
   formatDate,
   formatDateTime,

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

@@ -62,6 +62,29 @@ function toValidDate(value: unknown): Date | null {
   return Number.isNaN(date.getTime()) ? null : date;
 }
 
+/**
+ * A Date as local-calendar YYYY-MM-DD, for the wire -- a query parameter, a JSON
+ * body. NOT display: use formatDate for that.
+ *
+ * Built from local parts, never toISOString(): that routes through UTC, and the
+ * UTC day of a local-midnight Date is the previous day anywhere west of
+ * Greenwich. In Alberta (UTC-6/-7) it files every date one day early.
+ */
+export function toIsoDateString(value: unknown): string {
+  const date = toValidDate(value);
+  if (!date) return '';
+  const pad = (part: number) => String(part).padStart(2, '0');
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+/**
+ * The inverse: a stored YYYY-MM-DD back to a Date at local midnight, so the
+ * calendar date a user picked is the calendar date a picker redisplays.
+ */
+export function fromIsoDateString(value: unknown): Date | undefined {
+  return toValidDate(value) ?? undefined;
+}
+
 /** Date without a time component, e.g. `2026-08-28` → `2026-08-28`. */
 export function formatDate(value: unknown): string {
   const date = toValidDate(value);

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/FilterBar.vue__tmpl__

@@ -21,6 +21,7 @@ import { computed } from 'vue';
 import GoabDropdown from '../primitives/GoabDropdown.vue';
 import GoabDatePicker from '../primitives/GoabDatePicker.vue';
 import GoabButton from '../primitives/GoabButton.vue';
+import { fromIsoDateString, toIsoDateString } from '../formatters';
 
 export interface FilterOption {
   value: string;
@@ -71,29 +72,18 @@ const dateValues = computed(() =>
       .map((filter) => [
         filter.key,
         model.value[filter.key]
-          ? fromIsoDate(model.value[filter.key])
+          ? fromIsoDateString(model.value[filter.key])
           : undefined,
       ]),
   ),
 );
 
-// Local-calendar YYYY-MM-DD -- see the header note on why not toISOString().
-function toIsoDate(date: Date): string {
-  const pad = (part: number) => String(part).padStart(2, '0');
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-}
-
-function fromIsoDate(value: string): Date | undefined {
-  const [year, month, day] = value.split('-').map(Number);
-  return year && month && day ? new Date(year, month - 1, day) : undefined;
-}
-
 function set(key: string, value: string) {
   model.value = { ...model.value, [key]: value };
 }
 
 function setDate(key: string, date: Date | undefined) {
-  set(key, date ? toIsoDate(date) : '');
+  set(key, toIsoDateString(date));
 }
 
 function clearAll() {

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

@@ -31,3 +31,50 @@ describe('WorkspaceTable pagination wiring', () => {
     }
   });
 });
+
+const sortProps = {
+  columns: [
+    { key: 'name', label: 'Name', sortable: true },
+    { key: 'plain', label: 'Plain' },
+  ],
+  rows: [{ name: 'a', plain: 'b' }],
+  loading: false,
+  error: null,
+  sortBy: 'name',
+  sortDir: 'desc' as const,
+};
+
+describe('WorkspaceTable native sorting', () => {
+  it('renders goa-table-sort-header only for sortable columns', () => {
+    const w = mount(WorkspaceTable, { props: sortProps });
+    expect(w.findAll('goa-table-sort-header')).toHaveLength(1);
+    expect(w.find('goa-table-sort-header').attributes('name')).toBe('name');
+  });
+
+  it('tells the header the current direction, and none for other columns', () => {
+    const w = mount(WorkspaceTable, { props: sortProps });
+    expect(w.find('goa-table-sort-header').attributes('direction')).toBe('desc');
+    const other = mount(WorkspaceTable, { props: { ...sortProps, sortBy: 'plain' } });
+    expect(other.find('goa-table-sort-header').attributes('direction')).toBe('none');
+  });
+
+  it('enables single sort mode on the table', () => {
+    expect(mount(WorkspaceTable, { props: sortProps }).find('goa-table').attributes('sort-mode')).toBe('single');
+  });
+
+  it("translates goa-table's numeric sortDir to asc/desc", async () => {
+    const w = mount(WorkspaceTable, { props: sortProps });
+    const table = w.find('goa-table').element;
+    table.dispatchEvent(new CustomEvent('_sort', { detail: { sortBy: 'name', sortDir: -1 } }));
+    table.dispatchEvent(new CustomEvent('_sort', { detail: { sortBy: 'name', sortDir: 1 } }));
+    expect(w.emitted('sort')).toEqual([['name', 'desc'], ['name', 'asc']]);
+  });
+
+  it('ignores an unsorted (0) event with no column', async () => {
+    const w = mount(WorkspaceTable, { props: sortProps });
+    w.find('goa-table').element.dispatchEvent(
+      new CustomEvent('_sort', { detail: { sortBy: '', sortDir: 0 } }),
+    );
+    expect(w.emitted('sort')).toBeUndefined();
+  });
+});

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

@@ -5,9 +5,13 @@
 // consuming view can render badges, formatted values, or action buttons per
 // column without this component knowing anything about the domain.
 //
-// No native GoA sortable-header component exists (checked -- there isn't
-// one), so a sortable column header is hand-rolled here using the standard
-// WAI-ARIA "sortable table header" pattern (aria-sort + a real button), not
+// Sortable headers use the native goa-table-sort-header inside a goa-table with
+// sort-mode="single": the element owns the aria-sort, the direction cycling and
+// the visual affordance. An earlier version of this comment asserted no native
+// sortable-header component existed -- it had shipped since 2.0.0. Check the
+// installed package's registered elements rather than trusting a note like that.
+//
+// The superseded hand-rolled version used the standard
 // invented from scratch.
 import { useSlots } from 'vue';
 import GoabButton from '../primitives/GoabButton.vue';
@@ -44,19 +48,23 @@ withDefaults(
 const emit = defineEmits<{
   retry: [];
   pageChange: [page: number];
-  sort: [key: string];
+  /**
+   * goa-table owns the direction cycling, so both parts arrive together and the
+   * consuming view no longer toggles a direction itself.
+   */
+  sort: [sortBy: string, sortDir: 'asc' | 'desc'];
 }>();
 
 const slots = useSlots();
 
-function ariaSort(
-  column: WorkspaceTableColumn,
-  sortBy?: string,
-  sortDir?: 'asc' | 'desc',
-): 'ascending' | 'descending' | 'none' | undefined {
-  if (!column.sortable) return undefined;
-  if (sortBy !== column.key) return 'none';
-  return sortDir === 'desc' ? 'descending' : 'ascending';
+// goa-table reports direction numerically -- 1 ascending, -1 descending, 0
+// unsorted -- while useApi's ListQuery and every generated view speak
+// 'asc' | 'desc'. Translating here keeps that difference in one place.
+function onNativeSort(event: Event) {
+  const detail = (event as CustomEvent<{ sortBy: string; sortDir: number }>)
+    .detail;
+  if (!detail?.sortBy) return;
+  emit('sort', detail.sortBy, detail.sortDir < 0 ? 'desc' : 'asc');
 }
 </script>
 
@@ -77,25 +85,33 @@ function ariaSort(
     </goa-callout>
 
     <template v-else>
-      <goa-table width="100%">
+      <!-- sort-mode="single" makes goa-table aggregate its sort headers and
+           emit one _sort event; the headers own their own aria-sort and
+           direction cycling, which this component used to hand-roll. -->
+      <!-- The V2 flag is set on both the table and its sort headers: each
+           defaults to version 1, and this workspace is on the V2 design system
+           (the same reason goa-app-header and goa-pagination carry it). Without
+           it the table and its headers render V1 styling inside a V2 app.
+           sort-mode="single" is goa-table's default but stated explicitly: it
+           decides whether the table emits _sort or _multisort, so the listener
+           below only makes sense alongside it. -->
+      <goa-table
+        width="100%"
+        version="2"
+        sort-mode="single"
+        @_sort="onNativeSort"
+      >
         <thead>
           <tr>
-            <th
-              v-for="column in columns"
-              :key="column.key"
-              :aria-sort="ariaSort(column, sortBy, sortDir)"
-            >
-              <button
+            <th v-for="column in columns" :key="column.key">
+              <goa-table-sort-header
                 v-if="column.sortable"
-                type="button"
-                class="sort-button"
-                @click="emit('sort', column.key)"
+                version="2"
+                :name="column.key"
+                :direction="column.key === sortBy ? sortDir : 'none'"
               >
                 {{ column.label }}
-                <span aria-hidden="true">{{
-                  sortBy === column.key ? (sortDir === 'desc' ? '▼' : '▲') : ''
-                }}</span>
-              </button>
+              </goa-table-sort-header>
               <template v-else>{{ column.label }}</template>
             </th>
             <th v-if="slots.actions" />
@@ -133,17 +149,3 @@ function ariaSort(
   </div>
 </template>
 
-<style scoped>
-.sort-button {
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  font-weight: inherit;
-  color: inherit;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--goa-space-2xs, 0.25rem);
-}
-</style>

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

@@ -81,6 +81,32 @@ describe('Vue Components Generator', () => {
     const table = host
       .read('libs/vue-components/src/lib/patterns/WorkspaceTable.vue')
       .toString();
+    // Sorting is the native element's job: goa-table-sort-header inside a
+    // goa-table with sort-mode="single". The hand-rolled button + manual
+    // aria-sort is gone, and the comment that claimed no native component
+    // existed is corrected.
+    expect(table).toContain('<goa-table-sort-header');
+    expect(table).toContain('sort-mode="single"');
+    // goa-table and goa-table-sort-header both default to V1 styling; this
+    // workspace is on V2, the same reason goa-app-header and goa-pagination
+    // carry version="2".
+    // Asserted per element rather than by counting: a count is hostage to the
+    // literal appearing in a comment, which is how this assertion first broke.
+    const compactTable = table.replace(/\s+/g, ' ');
+    expect(compactTable).toContain(
+      '<goa-table width="100%" version="2" sort-mode="single"',
+    );
+    expect(compactTable).toContain(
+      '<goa-table-sort-header v-if="column.sortable" version="2"',
+    );
+    expect(table).toContain('@_sort="onNativeSort"');
+    // Binding forms, not bare words -- the component's own comment explains that
+    // the element owns aria-sort, so the word legitimately appears in it.
+    expect(table).not.toContain(':aria-sort=');
+    expect(table).not.toContain('class="sort-button"');
+    // goa-table reports 1/-1/0; the rest of the stack speaks asc/desc.
+    expect(table).toContain("detail.sortDir < 0 ? 'desc' : 'asc'");
+
     for (const prop of [':pagenumber=', ':itemcount=', ':perpagecount=']) {
       expect(table).toContain(prop);
     }
@@ -129,8 +155,13 @@ describe('Vue Components Generator', () => {
     }
     // Local calendar parts, not UTC: in Alberta new Date('2026-08-28') is
     // 27 Aug 18:00 local, so a stored date would render as the day before.
-    expect(filterBar).toContain('function toIsoDate');
-    expect(filterBar).toContain('function fromIsoDate');
+    // The local-parts date conversion lives in formatters now, used by
+    // FilterBar and by every generated date field, so the rule has one home.
+    expect(filterBar).toContain('toIsoDateString');
+    expect(filterBar).toContain('fromIsoDateString');
+    expect(filterBar).not.toContain('function toIsoDate');
+    expect(formattersSrc).toContain('export function toIsoDateString');
+    expect(formattersSrc).toContain('export function fromIsoDateString');
     // The call form, not the bare name: the component's own comments explain why
     // toISOString() is wrong, so the name legitimately appears in them.
     expect(filterBar).not.toContain('date.toISOString()');
@@ -140,6 +171,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();
     }

package/src/generators/vue-intake-view/files/shared/src/views/__reviewViewFileName__.vue__tmpl__

@@ -2,6 +2,9 @@
 import { ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { GoabCheckbox } from '<%= goaImportPath %>';
+<% if (steps.some((s) => s.fields.some((f) => f.type === 'date'))) { -%>
+import { formatDate } from '<%= goaImportPath %>';
+<% } -%>
 import { useApi } from '../composables/useApi';
 
 const route = useRoute();
@@ -79,7 +82,11 @@ async function onSubmit() {
         <dl>
 <% step.fields.forEach(function (field) { -%>
           <dt><%- field.label %></dt>
+<% if (field.type === 'date') { -%>
+          <dd>{{ formatDate(record['<%- field.key %>']) }}</dd>
+<% } else { -%>
           <dd>{{ record['<%- field.key %>'] ?? '—' }}</dd>
+<% } -%>
 <% }); -%>
         </dl>
       </goa-container>

package/src/generators/vue-intake-view/files/steps/src/views/__stepViewFileName__.vue__tmpl__

@@ -1,7 +1,24 @@
 <script setup lang="ts">
 import { reactive, ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { Stepper, StepErrorSummary, GoabInput } from '<%= goaImportPath %>';
+import {
+  Stepper,
+  StepErrorSummary,
+<% if (stepFields.some((f) => !f.type || f.type === 'text' || f.type === 'number')) { -%>
+  GoabInput,
+<% } -%>
+<% if (stepFields.some((f) => f.type === 'textarea')) { -%>
+  GoabTextarea,
+<% } -%>
+<% if (stepFields.some((f) => f.type === 'date')) { -%>
+  GoabDatePicker,
+  fromIsoDateString,
+  toIsoDateString,
+<% } -%>
+<% if (stepFields.some((f) => f.type === 'select')) { -%>
+  GoabDropdown,
+<% } -%>
+} from '<%= goaImportPath %>';
 import { useApi } from '../composables/useApi';
 
 const STEPS = [
@@ -19,7 +36,7 @@ const isNew = computed(() => idParam.value === 'new' || idParam.value === '');
 
 const form = reactive({
 <% stepFields.forEach(function (field) { -%>
-  <%- field.key %>: '',
+  <%- field.key %>: <%- field.type === 'date' ? 'undefined as Date | undefined' : "''" %>,
 <% }); -%>
 });
 
@@ -53,7 +70,15 @@ async function load() {
     const data = await get('<%= resource %>', idParam.value);
     completedSteps.value = Array.isArray(data.completedSteps) ? data.completedSteps : [];
 <% stepFields.forEach(function (field) { -%>
+<% if (field.type === 'date') { -%>
+    if (data['<%- field.key %>'] !== undefined)
+      form.<%- field.key %> = fromIsoDateString(data['<%- field.key %>']);
+<% } else if (field.type === 'number') { -%>
+    if (data['<%- field.key %>'] !== undefined)
+      form.<%- field.key %> = String(data['<%- field.key %>']);
+<% } else { -%>
     if (data['<%- field.key %>'] !== undefined) form.<%- field.key %> = data['<%- field.key %>'];
+<% } -%>
 <% }); -%>
   } catch (e) {
     loadError.value = e instanceof Error ? e.message : 'Failed to load.';
@@ -67,7 +92,7 @@ async function load() {
 // rather than reassigned.
 function resetForm() {
 <% stepFields.forEach(function (field) { -%>
-  form.<%- field.key %> = '';
+  form.<%- field.key %> = <%- field.type === 'date' ? 'undefined' : "''" %>;
 <% }); -%>
   errors.value = [];
   completedSteps.value = [];
@@ -94,10 +119,26 @@ function validate(): boolean {
   const found: { message: string; anchor?: string }[] = [];
 <% stepFields.forEach(function (field) { -%>
 <% if (field.required !== false) { -%>
+<% if (field.type === 'date') { -%>
+  if (!form.<%- field.key %>) {
+    found.push({ message: '<%- field.label %> is required.', anchor: '#field-<%- field.key %>' });
+  }
+<% } else if (field.type === 'number') { -%>
+  if (form.<%- field.key %> === '') {
+    found.push({ message: '<%- field.label %> is required.', anchor: '#field-<%- field.key %>' });
+  } else if (!Number.isFinite(Number(form.<%- field.key %>))) {
+    found.push({ message: '<%- field.label %> must be a number.', anchor: '#field-<%- field.key %>' });
+  }
+<% } else { -%>
   if (!form.<%- field.key %> || !form.<%- field.key %>.trim()) {
     found.push({ message: '<%- field.label %> is required.', anchor: '#field-<%- field.key %>' });
   }
 <% } -%>
+<% } else if (field.type === 'number') { -%>
+  if (form.<%- field.key %> !== '' && !Number.isFinite(Number(form.<%- field.key %>))) {
+    found.push({ message: '<%- field.label %> must be a number.', anchor: '#field-<%- field.key %>' });
+  }
+<% } -%>
 <% }); -%>
   errors.value = found;
   return found.length === 0;
@@ -118,8 +159,17 @@ async function onSaveAndContinue() {
   saving.value = true;
   saveError.value = null;
   try {
+    // The form model holds what each control needs (a Date for a picker, a
+    // string for a number input); the API wants wire types.
     const body = {
       ...form,
+<% stepFields.forEach(function (field) { -%>
+<% if (field.type === 'number') { -%>
+      <%- field.key %>: form.<%- field.key %> === '' ? null : Number(form.<%- field.key %>),
+<% } else if (field.type === 'date') { -%>
+      <%- field.key %>: toIsoDateString(form.<%- field.key %>) || null,
+<% } -%>
+<% }); -%>
       completedSteps: [...new Set([...completedSteps.value, '<%- stepKey %>'])],
     };
     // A create has to answer with the new record's id for the wizard to advance
@@ -164,7 +214,21 @@ function goBack() {
 
 <% stepFields.forEach(function (field) { -%>
       <goa-form-item id="field-<%- field.key %>" label="<%- field.label %>"<% if (field.required !== false) { %> requirement="required"<% } %>>
+<% if (field.type === 'textarea') { -%>
+        <GoabTextarea v-model="form.<%- field.key %>" name="<%- field.key %>" />
+<% } else if (field.type === 'number') { -%>
+        <GoabInput v-model="form.<%- field.key %>" name="<%- field.key %>" type="number" />
+<% } else if (field.type === 'date') { -%>
+        <GoabDatePicker v-model="form.<%- field.key %>" name="<%- field.key %>" />
+<% } else if (field.type === 'select') { -%>
+        <GoabDropdown v-model="form.<%- field.key %>" name="<%- field.key %>">
+<% (field.options || []).forEach(function (option) { -%>
+          <goa-dropdown-item value="<%- option.value %>" label="<%- option.label %>" />
+<% }); -%>
+        </GoabDropdown>
+<% } else { -%>
         <GoabInput v-model="form.<%- field.key %>" name="<%- field.key %>" type="text" />
+<% } -%>
       </goa-form-item>
 <% }); -%>
 

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

@@ -1,6 +1,9 @@
 export interface IntakeViewField {
   key: string;
   label: string;
+  type?: 'text' | 'textarea' | 'number' | 'date' | 'select';
+  /** `select` only. Rendered as goa-dropdown-item children. */
+  options?: { value: string; label: string }[];
   required?: boolean;
 }
 

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

@@ -33,7 +33,7 @@
     },
     "steps": {
       "type": "string",
-      "description": "JSON array of steps, in order -- e.g. '[{\"key\":\"personal-info\",\"label\":\"Personal information\",\"fields\":[{\"key\":\"fullName\",\"label\":\"Full name\"}]}]'. Each item: { key, label, fields: [{ key, label, required?: boolean (default true) }] }. A plain array is also accepted when this generator is invoked programmatically. Every field is currently a plain text input -- see the generated AGENTS.md note for other field types."
+      "description": "JSON array of steps, in order -- e.g. '[{\"key\":\"personal-info\",\"label\":\"Personal information\",\"fields\":[{\"key\":\"fullName\",\"label\":\"Full name\"},{\"key\":\"born\",\"label\":\"Date of birth\",\"type\":\"date\"}]}]'. Each item: { key, label, fields: [...] }. Each field: { key, label, type?: \"text\"|\"textarea\"|\"number\"|\"date\"|\"select\" (default \"text\"), options?: [{value,label}] (select only, required for it), required?: boolean (default true) }. A number field is submitted as a number and a date as YYYY-MM-DD built from local calendar parts, not UTC. 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 survives Nx's own arg parsing."
     },
     "requiresAuth": {
       "type": "boolean",
@@ -41,6 +41,12 @@
       "default": true
     }
   },
-  "required": ["project", "name", "resource", "route", "steps"],
+  "required": [
+    "project",
+    "name",
+    "resource",
+    "route",
+    "steps"
+  ],
   "additionalProperties": false
 }

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

@@ -138,6 +138,78 @@ describe('Vue Intake View Generator', () => {
     expect(review).toContain('/applications/${idParam.value}/confirmation');
   }, 30000);
 
+  describe('field types', () => {
+    const typedSteps = JSON.stringify([
+      {
+        key: 'details',
+        label: 'Details',
+        fields: [
+          { key: 'name', label: 'Name' },
+          { key: 'story', label: 'Story', type: 'textarea', required: false },
+          { key: 'count', label: 'Count', type: 'number' },
+          { key: 'occurred', label: 'Occurred', type: 'date' },
+          {
+            key: 'species',
+            label: 'Species',
+            type: 'select',
+            options: [{ value: 'wolf', label: 'Wolf' }],
+          },
+        ],
+      },
+      { key: 'review-it', label: 'Review it', fields: [] },
+    ]);
+
+    it('renders the right control for each type', async () => {
+      await generator(host, { ...baseOptions, steps: typedSteps });
+      const step = host
+        .read('apps/test/src/views/DetailsStepView.vue')
+        .toString();
+      expect(step).toContain('<GoabTextarea v-model="form.story"');
+      expect(step).toContain('type="number"');
+      expect(step).toContain('<GoabDatePicker v-model="form.occurred"');
+      expect(step).toContain('<goa-dropdown-item value="wolf" label="Wolf" />');
+    });
+
+    it('coerces number and date on save', async () => {
+      await generator(host, { ...baseOptions, steps: typedSteps });
+      const step = host
+        .read('apps/test/src/views/DetailsStepView.vue')
+        .toString();
+      expect(step).toContain("count: form.count === '' ? null : Number(form.count)");
+      expect(step).toContain('occurred: toIsoDateString(form.occurred) || null');
+      expect(step).toContain("fromIsoDateString(data['occurred'])");
+    });
+
+    it('validates a number and a date without assuming a string', async () => {
+      await generator(host, { ...baseOptions, steps: typedSteps });
+      const step = host
+        .read('apps/test/src/views/DetailsStepView.vue')
+        .toString();
+      expect(step).toContain("if (form.count === '')");
+      expect(step).toContain('Count must be a number.');
+      expect(step).toContain('if (!form.occurred)');
+    });
+
+    it('formats a date field on the review view rather than printing it raw', async () => {
+      await generator(host, { ...baseOptions, steps: typedSteps });
+      const review = host
+        .read('apps/test/src/views/ApplicationReviewView.vue')
+        .toString();
+      expect(review).toContain("formatDate(record['occurred'])");
+    });
+
+    it('every field is still a text input when no types are given', async () => {
+      await generator(host, baseOptions);
+      const step = host
+        .read('apps/test/src/views/PersonalInfoStepView.vue')
+        .toString();
+      expect(step).toContain('type="text"');
+      for (const unused of ['GoabTextarea', 'GoabDatePicker', 'GoabDropdown']) {
+        expect(step).not.toContain(unused);
+      }
+    });
+  });
+
   it('generates a confirmation view showing the reference number', async () => {
     await generator(host, baseOptions);
     const confirmation = host

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

@@ -111,13 +111,11 @@ function onPageChange(newPage: number) {
   void load();
 }
 
-function onSort(key: string) {
-  if (sortBy.value === key) {
-    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
-  } else {
-    sortBy.value = key;
-    sortDir.value = 'asc';
-  }
+// goa-table-sort-header owns the direction cycling and reports both parts, so
+// this no longer toggles anything -- it just records what the table decided.
+function onSort(key: string, dir: 'asc' | 'desc') {
+  sortBy.value = key;
+  sortDir.value = dir;
   page.value = 1;
   void load();
 }

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

@@ -112,6 +112,9 @@ describe('Vue Workspace View Generator', () => {
     expect(view).toContain("await list('applications', {");
     expect(view).toContain('pageSize: PAGE_SIZE');
     expect(view).toContain('rows.value = result.rows');
+    // The element decides the direction, so the view records rather than toggles.
+    expect(view).toContain("function onSort(key: string, dir: 'asc' | 'desc')");
+    expect(view).not.toContain("sortDir.value === 'asc' ? 'desc' : 'asc'");
     expect(view).toContain('itemCount.value = result.total');
     expect(view).not.toContain('apiFetch');
     expect(view).not.toContain('URLSearchParams');