@abgov/nx-adsp 13.31.1 → 13.31.2

package/package.json

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

@@ -205,11 +205,11 @@ onUnmounted(() => {
 <% if (field.type === 'checkbox') { -%>
       <!-- The checkbox carries its own label via `text`; goa-form-item must not
            repeat it, or it renders twice. -->
-      <goa-form-item>
+      <goa-form-item mb="l">
         <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 %>">
+      <goa-form-item mb="l" 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') { -%>

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

@@ -365,4 +365,26 @@ describe('Vue Admin CRUD Generator', () => {
     );
     expect(list).toContain('Cattle (mature)');
   }, 30000);
+
+  // Regression: goa-form-item's `mb` defaults to none, so stacked items rendered
+  // flush against each other -- a field's label sat directly on the previous
+  // field's input. `l` is the design system's own convention for vertical forms
+  // (110 uses against 11 of `xl` in GoA's reference app).
+  it('spaces stacked form items so fields do not sit flush', async () => {
+    await generator(host, baseOptions);
+    const edit = host
+      .read('apps/test/src/views/RegionsEditView.vue')
+      .toString();
+    // Counted per tag rather than as a contiguous string: formatFiles reflows a
+    // multi-attribute tag across lines, so `<goa-form-item mb="l"` is not a
+    // reliable substring.
+    const tags = edit
+      .split('<goa-form-item')
+      .slice(1)
+      .map((fragment) => fragment.slice(0, fragment.indexOf('>')));
+    expect(tags.length).toBeGreaterThan(0);
+    for (const tag of tags) {
+      expect(tag).toContain('mb="l"');
+    }
+  }, 30000);
 });

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

@@ -60,7 +60,7 @@ inline styles.
 | A styled status pill | `<goa-badge type="…">` | |
 | A hand-built alert/notice box | `<goa-callout type="…" heading="…">` | |
 | A loading `<div>` or spinner markup | `<goa-skeleton type="…">` or `<goa-spinner>` | Skeletons match the shape they replace (`card`, `text`, `table`) |
-| A `<label>` + error `<span>` around an input | `<goa-form-item label="…" error="…">` | Wrap the `Goab*` input in this, don't restyle it |
+| A `<label>` + error `<span>` around an input | `<goa-form-item label="…" error="…" mb="l">` | Wrap the `Goab*` input in this, don't restyle it. `mb` defaults to none, so stacked items sit flush against each other — pass `mb="l"` (the design system's own convention for vertical forms). Omit it when the items are inside a `goa-block`, which supplies its own gap |
 | A row of buttons with flex styling | `<goa-button-group alignment="…">` | |
 | A hand-built multi-select (checkbox list, chips) | `<goa-dropdown-multiselect>` | Added in web-components 2.4.0 |
 | A hand-built filter row above a table | `<FilterBar>` (this library) | Controls, collapse, active-filter chips and clear-all. It emits a query-ready values object; the *view* owns resetting the page, debouncing, and URL sync |

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

@@ -98,7 +98,7 @@ async function onSubmit() {
             Edit
           </goa-button>
         </div>
-        <dl>
+        <dl class="review-fields">
 <% step.fields.forEach(function (field) { -%>
           <dt><%- field.label %></dt>
 <% if (field.type === 'date') { -%>
@@ -146,4 +146,19 @@ async function onSubmit() {
   align-items: center;
   gap: var(--goa-space-m);
 }
+
+/* A bare <dl> stacks its terms and values flush, so every answer ran into the
+   next one on the page whose whole job is being read back. Two columns, label
+   distinguished by weight -- matching vue-detail-view's .detail-fields, since
+   both render a record as label/value pairs and should not look different. */
+.review-fields {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--goa-space-xs) var(--goa-space-l);
+  margin: 0;
+}
+
+.review-fields dt {
+  font-weight: 600;
+}
 </style>

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

@@ -213,7 +213,7 @@ function goBack() {
       <StepErrorSummary :errors="errors" />
 
 <% stepFields.forEach(function (field) { -%>
-      <goa-form-item id="field-<%- field.key %>" label="<%- field.label %>"<% if (field.required !== false) { %> requirement="required"<% } %>>
+      <goa-form-item mb="l" 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') { -%>

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

@@ -343,4 +343,36 @@ describe('Vue Intake View Generator', () => {
     );
     expect(review).toContain('Cattle (mature)');
   }, 30000);
+
+  it('spaces stacked form items in each step', async () => {
+    await generator(host, baseOptions);
+    const step = host
+      .read('apps/test/src/views/PersonalInfoStepView.vue')
+      .toString();
+    // Counted per tag rather than as a contiguous string: formatFiles reflows a
+    // multi-attribute tag across lines, so `<goa-form-item mb="l"` is not a
+    // reliable substring.
+    const tags = step
+      .split('<goa-form-item')
+      .slice(1)
+      .map((fragment) => fragment.slice(0, fragment.indexOf('>')));
+    expect(tags.length).toBeGreaterThan(0);
+    for (const tag of tags) {
+      expect(tag).toContain('mb="l"');
+    }
+  }, 30000);
+
+  // Regression: the review page's <dl> was unstyled, so terms and values stacked
+  // flush -- every answer ran into the next on the page whose entire purpose is
+  // being read back before submitting. vue-detail-view already styled its
+  // equivalent list; this is the same fix, not a new idea.
+  it('gives the review page label/value list real spacing', async () => {
+    await generator(host, baseOptions);
+    const review = host
+      .read('apps/test/src/views/ApplicationReviewView.vue')
+      .toString();
+    expect(review).toContain('<dl class="review-fields">');
+    expect(review).toContain('grid-template-columns: auto 1fr');
+    expect(review).toContain('gap: var(--goa-space-xs) var(--goa-space-l)');
+  }, 30000);
 });