@abgov/nx-adsp 13.6.1 → 13.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.6.1",
+  "version": "13.7.0",
   "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__

@@ -31,7 +31,8 @@ executors read options from `project.json` and do not prompt.
 | File | Purpose |
 |------|---------|
 | `src/main.ts` | Entry — registers Pinia, Router, and Keycloak plugin |
-| `src/App.vue` | Shell — nav header with sign-in/out, hero banner, `<RouterView>` |
+| `src/App.vue` | Shell — nav header with sign-in/out, hero banner, `<RouterView>` wrapped in `AppLayout` |
+| `src/components/AppLayout.vue` | Shared content gutter (centered, max-width, token padding). Every view lands inside it — no per-view spacing to add. Width via route meta `layout` |
 | `src/router/index.ts` | Routes — `/protected` guarded with `requiresAuth` meta |
 | `src/views/HomeView.vue` | Public page — calls public and private APIs |
 | `src/views/ProtectedView.vue` | Authenticated page — shows user info from token |
@@ -157,12 +158,17 @@ across every Vue app in this workspace — fix or extend a wrapper once in
 
 ## Adding a view
 
-1. Create `src/views/MyFeatureView.vue` as a `<script setup>` SFC
+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.
 2. Add the route to `src/router/index.ts`:
    ```typescript
    { path: '/my-feature', component: () => import('../views/MyFeatureView.vue') }
    // For an authenticated route:
    { path: '/my-feature', component: () => import('../views/MyFeatureView.vue'), meta: { requiresAuth: true } }
+   // For a wider (data table) or narrower (form) view, set the layout width:
+   { path: '/queue', component: () => import('../views/QueueView.vue'), meta: { layout: 'wide' } }
+   { path: '/apply', component: () => import('../views/ApplyView.vue'), meta: { layout: 'form' } }
    ```
 3. Add a nav link to `src/App.vue` if needed
 

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
-import { RouterView } from 'vue-router';
+import { RouterView, useRoute } from 'vue-router';
+import AppLayout from './components/AppLayout.vue';
 
 // Keep the reactive instance — do NOT destructure. useKeycloak() returns a
 // readonly(reactive()); destructuring snapshots each field at setup time, so
@@ -8,6 +10,13 @@ import { RouterView } from 'vue-router';
 // `authenticated` would never flip. Access fields on `kc` to stay reactive.
 const kc = useKeycloak();
 
+// Content width per view, from route meta (default 'page'). Views opt into a
+// different width with `meta: { layout: 'wide' | 'form' }` in the router.
+const route = useRoute();
+const layout = computed(
+  () => (route.meta.layout as 'page' | 'wide' | 'form' | undefined) ?? 'page'
+);
+
 function login() { kc.keycloak?.login(); }
 function logout() { kc.keycloak?.logout({ redirectUri: window.location.origin }); }
 </script>
@@ -29,20 +38,11 @@ function logout() { kc.keycloak?.logout({ redirectUri: window.location.origin })
     </goa-button-group>
   </goa-app-header>
   <goa-hero-banner heading="<%= projectName %>" backgroundurl="/assets/banner.jpg" />
-  <main>
+  <AppLayout :variant="layout">
     <RouterView />
-  </main>
+  </AppLayout>
 </template>
 
 <style>
 body { margin: 0; }
-main {
-  display: grid;
-  grid-template-columns: repeat(6, auto);
-}
-main > section {
-  grid-column: 2 / span 2;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
 </style>

package/src/generators/vue-app/files/src/components/AppLayout.vue__tmpl__

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Shared page layout. App.vue wraps <RouterView> in this, so EVERY routed view
+// gets the standard content gutter (centered, max-width, token-driven padding)
+// regardless of its own top-level tag — there's no "wrap your view in <section>"
+// convention to remember, and a plain <div> works fine.
+//
+// Width variant is chosen per-view via route meta `layout` (App.vue reads it):
+//   meta: { layout: 'form' }   // single-column forms      → 640px
+//   (default)                  // general content          → 1000px
+//   meta: { layout: 'wide' }   // data-heavy pages / tables → 1200px
+withDefaults(defineProps<{ variant?: 'page' | 'wide' | 'form' }>(), {
+  variant: 'page',
+});
+</script>
+
+<template>
+  <main id="main-content">
+    <div :class="`${variant}-content`">
+      <slot />
+    </div>
+  </main>
+</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);
+}
+
+.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);
+  }
+}
+</style>

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

@@ -72,6 +72,24 @@ describe('Vue App Generator', () => {
     expect(agents).not.toContain('ui-components.alberta.ca');
   }, 30000);
 
+  it('wraps views in a shared AppLayout gutter (not a bare tag selector)', async () => {
+    await generator(host, options);
+
+    // Shared layout component provides the content gutter for every view.
+    expect(host.exists('apps/test/src/components/AppLayout.vue')).toBeTruthy();
+    const layout = host.read('apps/test/src/components/AppLayout.vue').toString();
+    // Three named width variants, token-driven padding.
+    expect(layout).toContain('form-content');
+    expect(layout).toContain('wide-content');
+    expect(layout).toContain('--goa-space');
+
+    // 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>).
+    const app = host.read('apps/test/src/App.vue').toString();
+    expect(app).toContain('AppLayout');
+    expect(app).not.toContain('main > section');
+  });
+
   it('provisions the shared GoA wrapper library and points the app at it', async () => {
     await generator(host, options);