@abgov/nx-adsp 13.18.0-beta.6 → 13.18.0-beta.8

package/generators.json

@@ -75,6 +75,11 @@
       "schema": "./src/generators/vue-admin-crud/schema.json",
       "description": "Generator that adds a simple admin CRUD screen pair (WorkspaceTable list + create/update Edit view) to an existing vue-app project."
     },
+    "vue-intake-view": {
+      "factory": "./src/generators/vue-intake-view/vue-intake-view",
+      "schema": "./src/generators/vue-intake-view/schema.json",
+      "description": "Generator that adds a route-per-step intake wizard (Stepper + a required review/confirmation flow, from a --steps spec) to an existing vue-app project."
+    },
     "mean": {
       "factory": "./src/generators/mean/mean",
       "schema": "./src/generators/mean/schema.json",

package/package.json

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

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

@@ -172,8 +172,8 @@ from **`<%= goaImportPath %>`**, not hand-rolled markup:
 
 | Component | Purpose |
 |---|---|
-| `AppSideMenu` | `goa-work-side-menu`. Takes `heading`/`primaryItems`/`secondaryItems`/`accountItems` props (each item: `{ label, to?, icon?, badge?, current? }`) and emits `itemClick` — it doesn't know about routing or auth, so `App.vue` computes `current`/handles the click itself. `App.vue` currently only populates `accountItems` (a single Sign in/out item); add real nav items to `primaryItems`/`secondaryItems` as routes are added |
-| `AppLayout` | The content gutter every view renders inside (see the key files table). Also renders the skip-to-main-content link |
+| `AppSideMenu` | `goa-work-side-menu`. Takes `heading`/`primaryItems`/`secondaryItems`/`accountItems` props (each item: `{ label, to?, icon?, badge?, current? }`) and emits `itemClick` — it doesn't know about routing or auth, so `App.vue` computes `current`/handles the click itself. `App.vue` currently only populates `accountItems` (a single Sign in/out item); add real nav items to `primaryItems`/`secondaryItems` as routes are added. Also owns the skip-to-main-content landmark for this layout — `AppLayout` deliberately doesn't duplicate it |
+| `AppLayout` | The content gutter every view renders inside (see the key files table) |
 | `SessionExpiredBanner` | A `v-model:show` banner with `signIn`/`dismiss` emits. Bound to the `useSessionStore()` Pinia store (`src/stores/session.ts`), which `main.ts`'s `onAuthRefreshError` hook flips when the refresh token itself has expired |
 
 There's no `AppHeader`/`AppFooter`/hero banner in this layout — `AppSideMenu` is the
@@ -186,7 +186,7 @@ marketing chrome around a staff tool).
 | Component | Purpose |
 |---|---|
 | `AppHeader` | `goa-microsite-header` + `goa-app-header`. Takes a `heading` prop; put account/sign-in actions in its `utilities` slot (a bare child with no slot is silently dropped by `goa-app-header`) |
-| `AppLayout` | The content gutter every view renders inside (see the key files table). Also renders the skip-to-main-content link |
+| `AppLayout` | The content gutter every view renders inside (see the key files table). `App.vue` itself owns the skip-to-main-content landmark for this layout — `AppLayout` deliberately doesn't duplicate it |
 | `AppFooter` | `goa-app-footer` with the standard GoA nav/meta links (Services/Contact/Terms of Use, Privacy/Disclaimer/Accessibility) |
 | `SessionExpiredBanner` | A `v-model:show` banner with `signIn`/`dismiss` emits. Bound to the `useSessionStore()` Pinia store (`src/stores/session.ts`), which `main.ts`'s `onAuthRefreshError` hook flips when the refresh token itself has expired |
 <% } %>
@@ -201,6 +201,23 @@ composite generator.
 
 ## Adding a view
 
+**Check whether a generator already covers this view before hand-authoring one.** Each
+retrofits into this project directly — file(s), route(s), and the shared component it's
+built on, all in one step:
+
+| If the view is... | Use | Built on |
+|---|---|---|
+| A single record's detail page (loading/error, optional status badge, back button) | `nx g @abgov/nx-adsp:vue-detail-view` | `RecordDetailShell` |
+| A staff-facing, paginated/sortable/filterable list | `nx g @abgov/nx-adsp:vue-workspace-view` | `WorkspaceTable` |
+| A simple admin list + create/update edit screen (no pagination) | `nx g @abgov/nx-adsp:vue-admin-crud` | `WorkspaceTable` |
+| A multi-step submission flow (route-per-step, review, confirmation) | `nx g @abgov/nx-adsp:vue-intake-view` | `Stepper`, `StepErrorSummary` |
+
+Run `nx g @abgov/nx-adsp:<generator> --help` for its full option list (each takes a
+`--fields`/`--columns`/`--steps` JSON-string spec, not a CLI array flag — see the
+generator's own schema description for why). Only hand-author a view when none of these
+match, or once a generator's output needs customization it doesn't cover — its own comments
+mark what's meant to be edited.
+
 1. Create `src/views/MyFeatureView.vue` as a `<script setup>` SFC. **Don't add your
    own page margins/centering** — every view renders inside `AppLayout`'s gutter, so
    any top-level tag (`<div>`, `<section>`, …) is already centered and padded.

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

@@ -64,6 +64,7 @@ function onAccountItemClick() {
     </AppLayout>
   </AppSideMenu>
 <% } else { %>
+  <a class="skip-link" href="#main-content">Skip to main content</a>
   <AppHeader heading="<%= projectName %>">
     <template #utilities>
       <goa-button-group alignment="end">
@@ -86,13 +87,34 @@ function onAccountItemClick() {
     @dismiss="session.dismiss"
   />
   <goa-hero-banner heading="<%= projectName %>" backgroundurl="/assets/banner.jpg" />
-  <AppLayout :variant="contentWidth">
-    <RouterView />
-  </AppLayout>
+  <main id="main-content">
+    <AppLayout :variant="contentWidth">
+      <RouterView />
+    </AppLayout>
+  </main>
   <AppFooter />
 <% } %>
 </template>
 
 <style>
 body { margin: 0; }
+<% if (layout !== 'internal') { %>
+/* Visually hidden until focused (e.g. via Tab from the top of the page) — lets
+   keyboard/screen-reader users jump past the header straight to the content.
+   The internal/side-menu shell has its own scoped copy of this; this layout
+   has no equivalent shell component, so App.vue owns it directly here. */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 100;
+  padding: var(--goa-space-s, 0.5rem) var(--goa-space-m, 1rem);
+  background: var(--goa-color-interactive-default, #0070c4);
+  color: #fff;
+}
+
+.skip-link:focus {
+  left: var(--goa-space-m, 1rem);
+}
+<% } %>
 </style>

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

@@ -124,14 +124,21 @@ describe('Vue App Generator', () => {
     expect(layout).toContain('form-content');
     expect(layout).toContain('wide-content');
     expect(layout).toContain('--goa-space');
-    // Skip-to-main-content link for keyboard/screen-reader users.
-    expect(layout).toContain('href="#main-content"');
+    // 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.
+    expect(layout).not.toContain('id="main-content"');
+    expect(layout).not.toContain('skip-link');
 
     // App.vue uses AppLayout and no longer relies on the `main > section` gutter
     // (which silently failed when a view's top-level tag wasn't <section>).
+    // For --layout=header (the default), App.vue itself owns the skip-link
+    // landmark instead, since there's no shell component to hold it.
     const app = host.read('apps/test/src/App.vue').toString();
     expect(app).toContain('AppLayout');
     expect(app).not.toContain('main > section');
+    expect(app).toContain('href="#main-content"');
+    expect(app).toContain('id="main-content"');
   });
 
   it('provisions the shared GoA wrapper library and points the app at it', async () => {
@@ -202,6 +209,11 @@ describe('Vue App Generator', () => {
     expect(app).toContain('@item-click="onAccountItemClick"');
     // The content gutter is shared regardless of shell choice.
     expect(app).toContain('<AppLayout');
+    // App.vue itself must not add a second skip-to-main-content landmark —
+    // AppSideMenu (imported, not inlined) already owns the one and only
+    // #main-content for this layout.
+    expect(app).not.toContain('id="main-content"');
+    expect(app).not.toContain('skip-link');
 
     const agents = host.read('apps/test/AGENTS.md').toString();
     expect(agents).toContain('--layout=internal');

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

@@ -1,13 +1,30 @@
 # AGENTS.md — vue-components (GoA Design System Vue wrappers + app shell)
 
-A shared, workspace-local library with two distinct kinds of content — every Vue
-app in this workspace imports both instead of carrying its own copy. Generated by
-`@abgov/nx-adsp:vue-components`.
+A shared, workspace-local library — every Vue app in this workspace imports from
+it instead of carrying its own copy. Generated by `@abgov/nx-adsp:vue-components`,
+invoked automatically by `vue-app` and by every `vue-*-view` generator.
 
 | Folder | Contains | Lifespan |
 |---|---|---|
 | `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`) | **Permanent** |
+| `src/lib/patterns/` | Composite, app-shell components (`AppLayout`, `AppHeader`, `AppFooter`, `AppSideMenu`, `SessionExpiredBanner`, `RecordDetailShell`, `WorkspaceTable`, `Stepper`, `StepErrorSummary`) | **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.
+
+| 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.
 
 > **⚠️ `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
@@ -142,7 +159,8 @@ detail); just leave it to fall through from the caller.
 
 A pattern component is app-shell composition — layout, header/footer chrome,
 banners — not a single-element wrapper. Existing examples: `AppLayout`,
-`AppHeader`, `AppFooter`, `AppSideMenu`, `SessionExpiredBanner`, `RecordDetailShell`, `WorkspaceTable`.
+`AppHeader`, `AppFooter`, `AppSideMenu`, `SessionExpiredBanner`, `RecordDetailShell`, `WorkspaceTable`,
+`Stepper`, `StepErrorSummary`.
 
 - It's fine to compose `primitives/` wrappers inside a pattern component (e.g.
   `SessionExpiredBanner` uses `GoabButton`) — import them with a relative path

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

@@ -24,3 +24,5 @@ export { default as AppSideMenu } from './lib/patterns/AppSideMenu.vue';
 export { default as SessionExpiredBanner } from './lib/patterns/SessionExpiredBanner.vue';
 export { default as RecordDetailShell } from './lib/patterns/RecordDetailShell.vue';
 export { default as WorkspaceTable } from './lib/patterns/WorkspaceTable.vue';
+export { default as Stepper } from './lib/patterns/Stepper.vue';
+export { default as StepErrorSummary } from './lib/patterns/StepErrorSummary.vue';

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

@@ -8,37 +8,24 @@
 //   meta: { layout: 'form' }   // single-column forms      → 640px
 //   (default)                  // general content          → 1000px
 //   meta: { layout: 'wide' }   // data-heavy pages / tables → 1200px
+//
+// Deliberately not a landmark/skip-target itself: this component nests inside
+// AppSideMenu for --layout=internal, which already provides one, and a second
+// 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',
 });
 </script>
 
 <template>
-  <a class="skip-link" href="#main-content">Skip to main content</a>
-  <main id="main-content">
-    <div :class="`${variant}-content`">
-      <slot />
-    </div>
-  </main>
+  <div :class="`${variant}-content`">
+    <slot />
+  </div>
 </template>
 
 <style scoped>
-/* Visually hidden until focused (e.g. via Tab from the top of the page) — lets
-   keyboard/screen-reader users jump past the header straight to the content. */
-.skip-link {
-  position: absolute;
-  left: -9999px;
-  top: 0;
-  z-index: 100;
-  padding: var(--goa-space-s, 0.5rem) var(--goa-space-m, 1rem);
-  background: var(--goa-color-interactive-default, #0070c4);
-  color: #fff;
-}
-
-.skip-link:focus {
-  left: var(--goa-space-m, 1rem);
-}
-
 .page-content,
 .wide-content,
 .form-content {

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// Hand-rolled, not a wrapper -- checked the real, currently-installed
+// @abgov/web-components (grepped the compiled index.js for "error-summary"):
+// no such element exists, only CSS tokens for error *styling* on other
+// components (input, checkbox, radio, ...). Built from goa-callout instead,
+// matching the standard error-summary a11y pattern (a list of links jumping to
+// each invalid field) rather than inventing something with no real precedent.
+export interface StepError {
+  message: string;
+  /** e.g. '#field-email' -- an id on the invalid field's goa-form-item. */
+  anchor?: string;
+}
+
+defineProps<{ errors: StepError[] }>();
+</script>
+
+<template>
+  <goa-callout v-if="errors.length" type="emergency" heading="There is a problem">
+    <ul>
+      <li v-for="(error, index) in errors" :key="index">
+        <a v-if="error.anchor" :href="error.anchor">{{ error.message }}</a>
+        <span v-else>{{ error.message }}</span>
+      </li>
+    </ul>
+  </goa-callout>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Wraps the real, native goa-form-stepper/goa-form-step pair (confirmed via
+// design.alberta.ca/components/form-stepper -- there wasn't one when the spec
+// this is based on was written, hence "nobody used a native GoA stepper"; that
+// gap has since closed, so this wraps the real thing rather than hand-rolling
+// custom step icons/connectors like older reference implementations did).
+//
+// goa-form-step's own status enum is only complete/incomplete/not-started --
+// there's no "current" value, so the caller decides what "current" looks like
+// (typically: incomplete). Its docs also say "Don't use FormStepper for
+// non-sequential navigation" -- this component just re-emits every step's
+// click as `select`; which clicks are actually honoured (e.g. only completed
+// steps, plus a review step) is the consuming view's job, not this one's.
+export interface StepperStep {
+  key: string;
+  label: string;
+  status: 'complete' | 'incomplete' | 'not-started';
+}
+
+const props = defineProps<{ steps: StepperStep[] }>();
+const emit = defineEmits<{ select: [key: string] }>();
+</script>
+
+<template>
+  <goa-form-stepper>
+    <goa-form-step
+      v-for="(step, index) in props.steps"
+      :key="step.key"
+      :text="step.label"
+      :status="step.status"
+      :last="index === props.steps.length - 1"
+      @_click="emit('select', step.key)"
+    />
+  </goa-form-stepper>
+</template>

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

@@ -28,6 +28,8 @@ describe('vue-components', () => {
       'SessionExpiredBanner',
       'RecordDetailShell',
       'WorkspaceTable',
+      'Stepper',
+      'StepErrorSummary',
     ]) {
       expect(lib[name as keyof typeof lib]).toBeTruthy();
     }

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

@@ -45,6 +45,8 @@ describe('Vue Components Generator', () => {
       'SessionExpiredBanner',
       'RecordDetailShell',
       'WorkspaceTable',
+      'Stepper',
+      'StepErrorSummary',
     ]) {
       expect(host.exists(`${patterns}/${name}.vue`)).toBeTruthy();
     }

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+</script>
+
+<template>
+  <div>
+    <goa-callout type="success" heading="Submitted">
+      <p>
+        Your reference number is <strong>{{ route.params.id }}</strong>. Keep this for your
+        records.
+      </p>
+    </goa-callout>
+
+    <goa-spacer vspacing="m" />
+
+    <p>You'll be notified of any updates. No further action is needed right now.</p>
+  </div>
+</template>

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { GoabCheckbox } from '<%= goaImportPath %>';
+
+const route = useRoute();
+const router = useRouter();
+
+const idParam = computed(() => String(route.params.id ?? ''));
+
+// The fetched record's shape isn't known to this generator -- read fields
+// defensively rather than declaring (and likely getting wrong) a fake interface.
+const record = ref<Record<string, unknown> | null>(null);
+const loading = ref(true);
+const loadError = ref<string | null>(null);
+const declared = ref(false);
+const submitting = ref(false);
+const submitError = ref<string | null>(null);
+
+async function load() {
+  loading.value = true;
+  loadError.value = null;
+  try {
+    const res = await fetch(`/api/<%= resource %>/${idParam.value}`);
+    if (!res.ok) throw new Error(`Failed to load (${res.status})`);
+    record.value = await res.json();
+  } catch (e) {
+    loadError.value = e instanceof Error ? e.message : 'Failed to load.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+
+function editStep(key: string) {
+  router.push(`<%= route %>/${idParam.value}/${key}`);
+}
+
+async function onSubmit() {
+  if (!declared.value) return;
+  submitting.value = true;
+  submitError.value = null;
+  try {
+    const res = await fetch(`/api/<%= resource %>/${idParam.value}/submit`, {
+      method: 'POST',
+    });
+    if (!res.ok) throw new Error(`Failed to submit (${res.status})`);
+    router.push(`<%= route %>/${idParam.value}/confirmation`);
+  } catch (e) {
+    submitError.value = e instanceof Error ? e.message : 'Failed to submit.';
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h1>Review your <%= baseName %></h1>
+
+    <div v-if="loading" aria-label="Loading">
+      <goa-skeleton type="text" size="3" />
+    </div>
+
+    <goa-callout v-else-if="loadError" type="emergency" heading="Unable to load">
+      <p>{{ loadError }}</p>
+    </goa-callout>
+
+    <template v-else-if="record">
+<% steps.forEach(function (step) { -%>
+      <goa-container accent="thin">
+        <div class="review-section-header">
+          <h2><%- step.label %></h2>
+          <goa-button type="tertiary" size="compact" @_click="editStep('<%- step.key %>')">
+            Edit
+          </goa-button>
+        </div>
+        <dl>
+<% step.fields.forEach(function (field) { -%>
+          <dt><%- field.label %></dt>
+          <dd>{{ record['<%- field.key %>'] ?? '—' }}</dd>
+<% }); -%>
+        </dl>
+      </goa-container>
+      <goa-spacer vspacing="m" />
+<% }); -%>
+
+      <GoabCheckbox
+        v-model="declared"
+        name="declaration"
+        text="I confirm the information above is accurate and complete."
+      />
+
+      <goa-callout v-if="submitError" type="emergency" heading="Submit failed">
+        <p>{{ submitError }}</p>
+      </goa-callout>
+
+      <goa-spacer vspacing="l" />
+
+      <goa-button-group gap="relaxed">
+        <goa-button
+          type="primary"
+          :disabled="!declared || submitting || undefined"
+          @_click="onSubmit"
+        >
+          Submit
+        </goa-button>
+      </goa-button-group>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.review-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--goa-space-m);
+}
+</style>

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

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { Stepper, StepErrorSummary, GoabInput } from '<%= goaImportPath %>';
+
+const STEPS = [
+<% stepperSteps.forEach(function (step) { -%>
+  { key: '<%- step.key %>', label: '<%- step.label %>' },
+<% }); -%>
+];
+
+const route = useRoute();
+const router = useRouter();
+
+const idParam = computed(() => String(route.params.id ?? ''));
+const isNew = computed(() => idParam.value === 'new' || idParam.value === '');
+
+const form = reactive({
+<% stepFields.forEach(function (field) { -%>
+  <%- field.key %>: '',
+<% }); -%>
+});
+
+const errors = ref<{ message: string; anchor?: string }[]>([]);
+const completedSteps = ref<string[]>([]);
+const loading = ref(!isNew.value);
+const saving = ref(false);
+const loadError = ref<string | null>(null);
+const saveError = ref<string | null>(null);
+
+// completedSteps drives the stepper's status per step. This assumes the API
+// persists and returns a `completedSteps: string[]` field on the resource --
+// document that contract if your backend doesn't have it yet.
+const stepperSteps = computed(() =>
+  STEPS.map((step) => ({
+    key: step.key,
+    label: step.label,
+    status: completedSteps.value.includes(step.key)
+      ? ('complete' as const)
+      : step.key === '<%- stepKey %>'
+        ? ('incomplete' as const)
+        : ('not-started' as const),
+  })),
+);
+
+async function load() {
+  if (isNew.value) return;
+  loading.value = true;
+  loadError.value = null;
+  try {
+    const res = await fetch(`/api/<%= resource %>/${idParam.value}`);
+    if (!res.ok) throw new Error(`Failed to load (${res.status})`);
+    const data = await res.json();
+    completedSteps.value = Array.isArray(data.completedSteps) ? data.completedSteps : [];
+<% stepFields.forEach(function (field) { -%>
+    if (data['<%- field.key %>'] !== undefined) form.<%- field.key %> = data['<%- field.key %>'];
+<% }); -%>
+  } catch (e) {
+    loadError.value = e instanceof Error ? e.message : 'Failed to load.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+
+function validate(): boolean {
+  const found: { message: string; anchor?: string }[] = [];
+<% stepFields.forEach(function (field) { -%>
+<% if (field.required !== false) { -%>
+  if (!form.<%- field.key %> || !form.<%- field.key %>.trim()) {
+    found.push({ message: '<%- field.label %> is required.', anchor: '#field-<%- field.key %>' });
+  }
+<% } -%>
+<% }); -%>
+  errors.value = found;
+  return found.length === 0;
+}
+
+// goa-form-stepper's own docs say not to use it for non-sequential navigation
+// -- only already-complete steps and the review step are honoured here, not
+// an arbitrary future step.
+function onStepperSelect(key: string) {
+  if (key === '<%- stepKey %>') return;
+  if (completedSteps.value.includes(key) || key === 'review') {
+    router.push(`<%= route %>/${idParam.value}/${key}`);
+  }
+}
+
+async function onSaveAndContinue() {
+  if (!validate()) return;
+  saving.value = true;
+  saveError.value = null;
+  try {
+    const body = {
+      ...form,
+      completedSteps: [...new Set([...completedSteps.value, '<%- stepKey %>'])],
+    };
+    const res = await fetch(
+      isNew.value ? '/api/<%= resource %>' : `/api/<%= resource %>/${idParam.value}`,
+      {
+        method: isNew.value ? 'POST' : 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      },
+    );
+    if (!res.ok) throw new Error(`Failed to save (${res.status})`);
+    const saved = await res.json();
+    const nextId = isNew.value ? saved.id : idParam.value;
+    router.push(`<%= route %>/${nextId}/<%- nextStepKey %>`);
+  } catch (e) {
+    saveError.value = e instanceof Error ? e.message : 'Failed to save.';
+  } finally {
+    saving.value = false;
+  }
+}
+
+function goBack() {
+  router.back();
+}
+</script>
+
+<template>
+  <div>
+    <Stepper :steps="stepperSteps" @select="onStepperSelect" />
+
+    <goa-spacer vspacing="l" />
+
+    <h1><%- stepLabel %></h1>
+
+    <div v-if="loading" aria-label="Loading">
+      <goa-skeleton type="text" size="3" />
+    </div>
+
+    <goa-callout v-else-if="loadError" type="emergency" heading="Unable to load">
+      <p>{{ loadError }}</p>
+    </goa-callout>
+
+    <template v-else>
+      <StepErrorSummary :errors="errors" />
+
+<% stepFields.forEach(function (field) { -%>
+      <goa-form-item id="field-<%- field.key %>" label="<%- field.label %>"<% if (field.required !== false) { %> requirement="required"<% } %>>
+        <GoabInput v-model="form.<%- field.key %>" name="<%- field.key %>" type="text" />
+      </goa-form-item>
+<% }); -%>
+
+      <goa-callout v-if="saveError" type="emergency" heading="Save failed">
+        <p>{{ saveError }}</p>
+      </goa-callout>
+
+      <goa-spacer vspacing="l" />
+
+      <goa-button-group gap="relaxed">
+        <goa-button type="primary" :disabled="saving || undefined" @_click="onSaveAndContinue">
+          Save and continue
+        </goa-button>
+        <goa-button type="secondary" @_click="goBack">Back</goa-button>
+      </goa-button-group>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,33 @@
+export interface IntakeViewField {
+  key: string;
+  label: string;
+  required?: boolean;
+}
+
+export interface IntakeViewStep {
+  key: string;
+  label: string;
+  fields: IntakeViewField[];
+}
+
+export interface Schema {
+  project: string;
+  name: string;
+  resource: string;
+  route: string;
+  /**
+   * JSON string on the real CLI (Nx's array-typed CLI coercion only supports
+   * comma-separated primitives, not JSON). A real array is also accepted for
+   * programmatic callers (e.g. tests).
+   */
+  steps: string | IntakeViewStep[];
+  requiresAuth?: boolean;
+}
+
+export interface NormalizedSchema extends Omit<Schema, 'steps'> {
+  projectRoot: string;
+  steps: IntakeViewStep[];
+  requiresAuth: boolean;
+  /** PascalCase base name, e.g. "Application" for --name application. */
+  baseName: string;
+}

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

@@ -0,0 +1,46 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "NxAdspVueIntakeView",
+  "title": "Vue Multi-Step Intake View",
+  "description": "Generates a route-per-step intake wizard (Stepper + StepErrorSummary, a required read-only review step, and a confirmation page) into an existing vue-app project. Cross-step state is server-persisted -- each step PUTs/POSTs to /api/<resource>/:id and refetches on mount; there's no client-side draft caching.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The vue-app project to add the views to.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "Which project should the intake view be added to?"
+    },
+    "name": {
+      "type": "string",
+      "description": "Base name for the generated views, e.g. 'application' generates <Step>StepView.vue per step plus ApplicationReviewView.vue and ApplicationConfirmationView.vue.",
+      "$default": {
+        "$source": "argv",
+        "index": 1
+      },
+      "x-prompt": "What should the intake flow be called?"
+    },
+    "resource": {
+      "type": "string",
+      "description": "API resource path segment. Each step fetches/saves /api/<resource>/:id; the review step's Submit posts /api/<resource>/:id/submit."
+    },
+    "route": {
+      "type": "string",
+      "description": "Base route, e.g. /applications. Steps become /applications/:id/<step-key>, plus /applications/:id/review and /applications/:id/confirmation. Start a new intake at /applications/new/<first-step-key>."
+    },
+    "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."
+    },
+    "requiresAuth": {
+      "type": "boolean",
+      "description": "Whether the generated routes require authentication.",
+      "default": true
+    }
+  },
+  "required": ["project", "name", "resource", "route", "steps"],
+  "additionalProperties": false
+}

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

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { Schema } from './schema';
+export default function (host: Tree, options: Schema): Promise<void>;

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const path = require("path");
+const vue_router_1 = require("../../utils/vue-router");
+const vue_components_1 = require("../vue-components/vue-components");
+// Nx's own CLI option coercion (coerceTypesInOptions in nx/src/utils/params)
+// only knows how to split an array-typed option on commas -- it has no JSON
+// support, so a real `"type": "array"` schema for --steps silently mangles a
+// JSON array into garbage fragments when invoked from the actual CLI (only
+// programmatic callers, like this generator's own unit tests, ever pass a
+// real array). --steps is `"type": "string"` in schema.json specifically so
+// Nx leaves it alone, and this generator parses the JSON itself.
+function parseSteps(steps) {
+    const parsed = typeof steps === 'string' ? JSON.parse(steps) : steps;
+    if (!Array.isArray(parsed) || parsed.length === 0) {
+        throw new Error('--steps must be a non-empty JSON array of { key, label, fields } objects.');
+    }
+    const keys = new Set();
+    for (const step of parsed) {
+        if (keys.has(step.key)) {
+            throw new Error(`--steps has a duplicate step key: "${step.key}".`);
+        }
+        keys.add(step.key);
+    }
+    return parsed;
+}
+function normalizeOptions(host, options) {
+    var _a;
+    const { root: projectRoot } = (0, devkit_1.readProjectConfiguration)(host, options.project);
+    return Object.assign(Object.assign({}, options), { projectRoot, steps: parseSteps(options.steps), requiresAuth: (_a = options.requiresAuth) !== null && _a !== void 0 ? _a : true, baseName: (0, devkit_1.names)(options.name).className });
+}
+// PascalCase view name for a step, e.g. "personal-info" -> "PersonalInfoStepView".
+function stepViewFileName(stepKey) {
+    return `${(0, devkit_1.names)(stepKey).className}StepView`;
+}
+function default_1(host, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const normalizedOptions = normalizeOptions(host, options);
+        const { projectRoot, steps, baseName } = normalizedOptions;
+        // Idempotent -- ensures Stepper/StepErrorSummary exist even in a project
+        // scaffolded before vue-components carried them.
+        yield (0, vue_components_1.default)(host);
+        const goaImportPath = (0, vue_components_1.vueComponentsImportPath)(host);
+        const reviewViewFileName = `${baseName}ReviewView`;
+        const confirmationViewFileName = `${baseName}ConfirmationView`;
+        const stepperSteps = steps.map((step) => ({
+            key: step.key,
+            label: step.label,
+        }));
+        steps.forEach((step, index) => {
+            const nextStepKey = index === steps.length - 1 ? 'review' : steps[index + 1].key;
+            (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files/steps'), projectRoot, Object.assign(Object.assign({}, normalizedOptions), { goaImportPath, stepViewFileName: stepViewFileName(step.key), stepKey: step.key, stepLabel: step.label, stepFields: step.fields, stepperSteps,
+                nextStepKey, tmpl: '' }));
+        });
+        (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files/shared'), projectRoot, Object.assign(Object.assign({}, normalizedOptions), { goaImportPath,
+            reviewViewFileName,
+            confirmationViewFileName, tmpl: '' }));
+        // Registered in reverse so the final router file lists steps in forward
+        // order (each insertVueRoute call adds right after `routes: [`, pushing
+        // earlier insertions down).
+        (0, vue_router_1.insertVueRoute)(host, projectRoot, options.project, {
+            path: `${normalizedOptions.route}/:id/confirmation`,
+            componentImportPath: `../views/${confirmationViewFileName}.vue`,
+            requiresAuth: normalizedOptions.requiresAuth,
+        });
+        (0, vue_router_1.insertVueRoute)(host, projectRoot, options.project, {
+            path: `${normalizedOptions.route}/:id/review`,
+            componentImportPath: `../views/${reviewViewFileName}.vue`,
+            requiresAuth: normalizedOptions.requiresAuth,
+        });
+        for (let i = steps.length - 1; i >= 0; i--) {
+            const step = steps[i];
+            (0, vue_router_1.insertVueRoute)(host, projectRoot, options.project, {
+                path: `${normalizedOptions.route}/:id/${step.key}`,
+                componentImportPath: `../views/${stepViewFileName(step.key)}.vue`,
+                requiresAuth: normalizedOptions.requiresAuth,
+            });
+        }
+        yield (0, devkit_1.formatFiles)(host);
+    });
+}
+//# sourceMappingURL=vue-intake-view.js.map

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

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

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

@@ -0,0 +1,194 @@
+import {
+  addProjectConfiguration,
+  readProjectConfiguration,
+  Tree,
+} from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import generator from './vue-intake-view';
+import { Schema } from './schema';
+
+// Mirrors the shape vue-app's own template generates -- vue-intake-view retrofits
+// into this file, so the fixture must match what it actually looks for.
+const ROUTER_FIXTURE = `import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    { path: '/', component: HomeView },
+  ],
+});
+
+export default router;
+`;
+
+describe('Vue Intake View Generator', () => {
+  let host: Tree;
+  const baseOptions: Schema = {
+    project: 'test',
+    name: 'application',
+    resource: 'applications',
+    route: '/applications',
+    steps: [
+      {
+        key: 'personal-info',
+        label: 'Personal information',
+        fields: [{ key: 'fullName', label: 'Full name' }],
+      },
+      {
+        key: 'contact-info',
+        label: 'Contact information',
+        fields: [
+          { key: 'email', label: 'Email' },
+          { key: 'phone', label: 'Phone', required: false },
+        ],
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    addProjectConfiguration(host, 'test', { root: 'apps/test' });
+    host.write('apps/test/src/router/index.ts', ROUTER_FIXTURE);
+  });
+
+  it('throws when --project does not exist', async () => {
+    await expect(
+      generator(host, { ...baseOptions, project: 'no-such-app' }),
+    ).rejects.toThrow();
+  });
+
+  it("throws a clear error when the project isn't a vue-app (no router/index.ts)", async () => {
+    addProjectConfiguration(host, 'not-vue', { root: 'apps/not-vue' });
+    await expect(
+      generator(host, { ...baseOptions, project: 'not-vue' }),
+    ).rejects.toThrow(/router\/index\.ts/);
+  });
+
+  it('throws a clear error on a duplicate step key', async () => {
+    await expect(
+      generator(host, {
+        ...baseOptions,
+        steps: [
+          { key: 'a', label: 'A', fields: [] },
+          { key: 'a', label: 'A again', fields: [] },
+        ],
+      }),
+    ).rejects.toThrow(/duplicate step key/);
+  });
+
+  it('throws a clear error when --steps parses to an empty array', async () => {
+    await expect(
+      generator(host, { ...baseOptions, steps: '[]' }),
+    ).rejects.toThrow(/non-empty/);
+  });
+
+  it('generates one view per step, using the shared Stepper/StepErrorSummary and the real goa-form-stepper status enum', async () => {
+    await generator(host, baseOptions);
+
+    const step1 = host
+      .read('apps/test/src/views/PersonalInfoStepView.vue')
+      .toString();
+    expect(step1).toContain(
+      "import { Stepper, StepErrorSummary, GoabInput } from '@proj/vue-components';",
+    );
+    expect(step1).toContain("{ key: 'personal-info', label: 'Personal information' }");
+    expect(step1).toContain("{ key: 'contact-info', label: 'Contact information' }");
+    // Own step is 'incomplete' when active and not yet completed, per the real
+    // goa-form-step status enum (complete/incomplete/not-started -- no "current").
+    expect(step1).toContain("step.key === 'personal-info'");
+    expect(step1).toContain("('incomplete' as const)");
+    expect(step1).toContain("('not-started' as const)");
+    // Moves to the next step's key on save.
+    expect(step1).toContain('/applications/${nextId}/contact-info');
+
+    const step2 = host
+      .read('apps/test/src/views/ContactInfoStepView.vue')
+      .toString();
+    // Last step in the list moves to review, not another step.
+    expect(step2).toContain('/applications/${nextId}/review');
+    // A required field gets a validation block + requirement="required"; an
+    // explicitly non-required one gets neither.
+    expect(step2).toContain("found.push({ message: 'Email is required.'");
+    expect(step2).toContain('requirement="required"');
+    expect(step2).not.toContain('Phone is required');
+  }, 30000);
+
+  it('generates a review view listing every step with an Edit link, and a declaration gate on Submit', async () => {
+    await generator(host, baseOptions);
+
+    const review = host.read('apps/test/src/views/ApplicationReviewView.vue').toString();
+    expect(review).toContain("editStep('personal-info')");
+    expect(review).toContain("editStep('contact-info')");
+    expect(review).toContain("record['fullName'] ?? '—'");
+    expect(review).toContain("record['email'] ?? '—'");
+    expect(review).toContain(':disabled="!declared || submitting || undefined"');
+    expect(review).toContain("fetch(`/api/applications/${idParam.value}/submit`");
+    expect(review).toContain('/applications/${idParam.value}/confirmation');
+  }, 30000);
+
+  it('generates a confirmation view showing the reference number', async () => {
+    await generator(host, baseOptions);
+    const confirmation = host
+      .read('apps/test/src/views/ApplicationConfirmationView.vue')
+      .toString();
+    expect(confirmation).toContain('{{ route.params.id }}');
+  }, 30000);
+
+  it('inserts a route for every step plus review and confirmation, requiring auth by default', async () => {
+    await generator(host, baseOptions);
+
+    const routerTs = host.read('apps/test/src/router/index.ts').toString();
+    expect(routerTs).toContain("path: '/applications/:id/personal-info'");
+    expect(routerTs).toContain("path: '/applications/:id/contact-info'");
+    expect(routerTs).toContain("path: '/applications/:id/review'");
+    expect(routerTs).toContain("path: '/applications/:id/confirmation'");
+    expect(routerTs).toContain(
+      "component: () => import('../views/PersonalInfoStepView.vue')",
+    );
+    expect(routerTs).toContain(
+      "component: () => import('../views/ApplicationReviewView.vue')",
+    );
+    expect(routerTs).toContain(
+      "component: () => import('../views/ApplicationConfirmationView.vue')",
+    );
+    expect(
+      routerTs.split('meta: { requiresAuth: true }').length - 1,
+    ).toBe(4);
+    // The existing route is untouched, not replaced.
+    expect(routerTs).toContain("{ path: '/', component: HomeView }");
+  }, 30000);
+
+  it('omits the requiresAuth meta on every generated route when --requiresAuth=false', async () => {
+    await generator(host, { ...baseOptions, requiresAuth: false });
+    const routerTs = host.read('apps/test/src/router/index.ts').toString();
+    expect(routerTs).not.toContain('requiresAuth');
+  }, 30000);
+
+  it('accepts --steps as a JSON string, the form the real CLI produces', async () => {
+    await generator(host, {
+      ...baseOptions,
+      steps: JSON.stringify(baseOptions.steps),
+    });
+    expect(
+      host.exists('apps/test/src/views/PersonalInfoStepView.vue'),
+    ).toBeTruthy();
+  }, 30000);
+
+  it('ensures the shared Stepper and StepErrorSummary pattern components exist', async () => {
+    await generator(host, baseOptions);
+    expect(
+      host.exists('libs/vue-components/src/lib/patterns/Stepper.vue'),
+    ).toBeTruthy();
+    expect(
+      host.exists('libs/vue-components/src/lib/patterns/StepErrorSummary.vue'),
+    ).toBeTruthy();
+  }, 30000);
+
+  it('does not touch the target project configuration', async () => {
+    const before = readProjectConfiguration(host, 'test');
+    await generator(host, baseOptions);
+    const after = readProjectConfiguration(host, 'test');
+    expect(after).toEqual(before);
+  }, 30000);
+});