@abgov/nx-adsp 13.26.0 → 13.27.1

package/package.json

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

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

@@ -56,7 +56,7 @@ inline styles.
 |---|---|---|
 | `<div style="background:white;border:1px solid …;border-radius:…;padding:…">` | `<goa-container>` | The bordered, padded card box. `type`/`accent` variants |
 | `<div style="display:flex;gap:…;align-items:…">` | `<goa-block>` | Flex row or stack, `gap` and `direction` props |
-| `<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(…))">` | `<goa-grid>` | Responsive auto-fit grid, `min-child-width` prop |
+| `<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(…))">` | `<goa-grid>` | Responsive auto-fit grid, `minchildwidth` prop (all lowercase — `min-child-width` silently does nothing) |
 | `<h2 style="font-size:…;font-weight:…;color:…">`, styled `span`/`p` | `<goa-text>` | Typography scale: `size`, `weight`, `color`, `mt`/`mb` |
 | `<table>` with `<th style>`/`<td style>` | `<goa-table>` (+ `<goa-table-sort-header>`) | For any table that isn't a paginated list view — `WorkspaceTable` already wraps this for that case |
 | Tab `<button>`s toggling `v-if` blocks | `<goa-tabs>` + `<goa-tab heading="…">` | Slot-based and self-managing: `initialtab` sets the first open tab, no `v-model` and no `@_change` |

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

@@ -13,6 +13,32 @@ describe('formatters', () => {
     expect(formatDateTime('2026-08-28T14:05:00.000Z')).toMatch(/\d{1,2}:\d{2}/);
   });
 
+  // The input every generated `type: 'date'` column and field actually carries.
+  // Its absence is why a UTC-parsing bug shipped: the suite covered ISO
+  // timestamps, Dates and epoch numbers, but never a bare calendar date.
+  it.each([
+    ['2026-07-14'],
+    ['2026-01-01'],
+    ['2026-12-31'],
+  ])('renders the bare calendar date %s unchanged, in any timezone', (value) => {
+    expect(formatDate(value)).toBe(value);
+  });
+
+  it('does not invent a midnight for a date-only value', () => {
+    expect(formatDateTime('2026-07-14')).toBe('2026-07-14');
+  });
+
+  it('still renders a time for a real instant', () => {
+    expect(formatDateTime('2026-07-14T14:05:00.000Z')).toMatch(/\d{1,2}:\d{2}/);
+  });
+
+  it.each(['2026-13-45', '2026-02-30', '2026-00-10'])(
+    'rejects the out-of-range date %s rather than rolling it over',
+    (value) => {
+      expect(formatDate(value)).toBe('—');
+    },
+  );
+
   it('accepts a Date, an epoch number, and an ISO string alike', () => {
     const iso = '2026-08-28T00:00:00.000Z';
     const expected = formatDate(iso);

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

@@ -21,6 +21,13 @@ const currency = new Intl.NumberFormat(LOCALE, {
   currency: 'CAD',
 });
 
+// A bare YYYY-MM-DD names a calendar date, not an instant, and must be built
+// from local parts. `new Date('2026-07-14')` parses as UTC midnight, which in
+// Alberta (UTC-6/-7) is 13 July 18:00 local — so the naive path renders the day
+// before, and on 1 January the year before. Every `type: 'date'` field the view
+// generators emit arrives in exactly this form.
+const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+
 // `unknown` rather than a date union: views read fields off a record whose shape
 // the generator doesn't know, so every call site would otherwise need a cast.
 // Anything that isn't a usable date becomes the em dash, same as null.
@@ -34,6 +41,23 @@ function toValidDate(value: unknown): Date | null {
     return Number.isNaN(value.getTime()) ? null : value;
   }
   if (typeof value !== 'string' && typeof value !== 'number') return null;
+
+  if (typeof value === 'string') {
+    const parts = DATE_ONLY.exec(value);
+    if (parts) {
+      const [, year, month, day] = parts.map(Number);
+      const local = new Date(year, month - 1, day);
+      // Date's constructor rolls over out-of-range parts (month 13 becomes
+      // January of the next year) instead of failing, so round-trip the parts
+      // to reject '2026-13-45' and '2026-02-30' rather than render a wrong day.
+      return local.getFullYear() === year &&
+        local.getMonth() === month - 1 &&
+        local.getDate() === day
+        ? local
+        : null;
+    }
+  }
+
   const date = new Date(value);
   return Number.isNaN(date.getTime()) ? null : date;
 }
@@ -44,10 +68,18 @@ export function formatDate(value: unknown): string {
   return date ? dateOnly.format(date) : EMPTY;
 }
 
-/** Date with a short time, for audit/activity timestamps. */
+/**
+ * Date with a short time, for audit/activity timestamps. A date-only value has
+ * no time to show, so it falls back to the date alone rather than inventing a
+ * midnight that was never in the data.
+ */
 export function formatDateTime(value: unknown): string {
   const date = toValidDate(value);
-  return date ? dateAndTime.format(date) : EMPTY;
+  if (!date) return EMPTY;
+  if (typeof value === 'string' && DATE_ONLY.test(value)) {
+    return dateOnly.format(date);
+  }
+  return dateAndTime.format(date);
 }
 
 /**

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

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import WorkspaceTable from './WorkspaceTable.vue';
+
+// goa-pagination registers pagenumber/itemcount/perpagecount with no
+// attribute: alias, so kebab-case bindings never arrive and the control
+// renders "Page — of NaN".
+describe('WorkspaceTable pagination wiring', () => {
+  const props = {
+    columns: [{ key: 'a', label: 'A' }],
+    rows: [{ a: 1 }],
+    loading: false,
+    error: null,
+    page: 2,
+    itemCount: 34,
+    perPageCount: 10,
+  };
+
+  it('passes the lowercase attribute names the element registers', () => {
+    const el = mount(WorkspaceTable, { props }).find('goa-pagination');
+    expect(el.exists()).toBe(true);
+    expect(el.attributes('pagenumber')).toBe('2');
+    expect(el.attributes('itemcount')).toBe('34');
+    expect(el.attributes('perpagecount')).toBe('10');
+  });
+
+  it('does not emit the kebab-case names that silently do nothing', () => {
+    const el = mount(WorkspaceTable, { props }).find('goa-pagination');
+    for (const wrong of ['page-number', 'item-count', 'per-page-count']) {
+      expect(el.attributes(wrong)).toBeUndefined();
+    }
+  });
+});

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

@@ -115,12 +115,18 @@ function ariaSort(
 
       <goa-spacer vspacing="l" />
 
+      <!-- All-lowercase, not kebab-case: goa-pagination registers `pagenumber`,
+           `itemcount`, `perpagecount` with no `attribute:` alias, so kebab-case
+           bindings never reach it and the control renders "Page — of NaN".
+           (goa-work-side-menu's `userName` DOES declare attribute: "user-name",
+           which is why the design system looks inconsistent here -- check the
+           registered name per element rather than assuming a convention.) -->
       <goa-pagination
         v-if="page && itemCount && perPageCount && itemCount > perPageCount"
         version="2"
-        :page-number="page"
-        :item-count="itemCount"
-        :per-page-count="perPageCount"
+        :pagenumber="page"
+        :itemcount="itemCount"
+        :perpagecount="perPageCount"
         @_change="(e) => emit('pageChange', (e as CustomEvent<{ page: number }>).detail?.page ?? 1)"
       />
     </template>

package/src/generators/vue-components/files/src/lib/primitives/GoabDatePicker.vue__tmpl__

@@ -9,8 +9,14 @@
 // wrappers read, so it does not use skeleton A verbatim.
 //
 // Consumers that need a wire format (a query parameter, a JSON body) convert at
-// that boundary — `date?.toISOString().slice(0, 10)` for YYYY-MM-DD — rather
-// than this wrapper guessing which format is wanted.
+// that boundary, and must build YYYY-MM-DD from LOCAL calendar parts:
+//
+//   `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+//
+// NOT `toISOString().slice(0, 10)`. toISOString goes through UTC, and the UTC
+// day of a local-midnight Date is the previous day anywhere west of Greenwich —
+// in Alberta (UTC-6/-7) that files every date one day early. FilterBar's
+// `toIsoDate` is the reference implementation.
 //
 // Usage: <GoabDatePicker v-model="startDate" name="startDate" :max="new Date()" />
 const model = defineModel<Date | undefined>();

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

@@ -75,6 +75,27 @@ describe('Vue Components Generator', () => {
     const filterBar = host
       .read('libs/vue-components/src/lib/patterns/FilterBar.vue')
       .toString();
+    // goa-pagination registers all-lowercase prop names with no attribute:
+    // alias, so kebab-case bindings silently never arrive and the control
+    // renders "Page — of NaN".
+    const table = host
+      .read('libs/vue-components/src/lib/patterns/WorkspaceTable.vue')
+      .toString();
+    for (const prop of [':pagenumber=', ':itemcount=', ':perpagecount=']) {
+      expect(table).toContain(prop);
+    }
+    for (const wrong of [':page-number=', ':item-count=', ':per-page-count=']) {
+      expect(table).not.toContain(wrong);
+    }
+
+    // A bare YYYY-MM-DD is a calendar date, not an instant: parsing it through
+    // `new Date(string)` yields UTC midnight, which in Alberta is the day before.
+    const formattersSrc = host
+      .read('libs/vue-components/src/lib/formatters.ts')
+      .toString();
+    expect(formattersSrc).toContain('DATE_ONLY');
+    expect(formattersSrc).toContain('local.getFullYear() === year');
+
     expect(filterBar).toContain('goa-filter-chip');
     expect(filterBar).toContain('goa-details');
     // Precise API forms, not bare words -- 'page' appears in the component's own
@@ -99,6 +120,7 @@ describe('Vue Components Generator', () => {
     for (const spec of [
       'libs/vue-components/src/lib/patterns/FilterBar.spec.ts',
       'libs/vue-components/src/lib/primitives/GoabDatePicker.spec.ts',
+      'libs/vue-components/src/lib/patterns/WorkspaceTable.spec.ts',
     ]) {
       expect(host.exists(spec)).toBeTruthy();
     }

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { RecordDetailShell, formatCurrency, formatDateTime } from '<%= goaImportPath %>';
+import { RecordDetailShell, formatCurrency, formatDate } from '<%= goaImportPath %>';
 import { useApi } from '../composables/useApi';
 
 // The fetched record's shape isn't known to this generator -- read fields
@@ -54,7 +54,7 @@ function goBack() {
 <% if (field.type === 'badge') { -%>
         <goa-badge type="information" :content="String(record['<%= field.key %>'] ?? '—')" />
 <% } else if (field.type === 'date') { -%>
-        {{ formatDateTime(record['<%= field.key %>']) }}
+        {{ formatDate(record['<%= field.key %>']) }}
 <% } else if (field.type === 'currency') { -%>
         {{ formatCurrency(record['<%= field.key %>']) }}
 <% } else { -%>

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

@@ -111,12 +111,14 @@ describe('Vue Detail View Generator', () => {
     expect(view).not.toContain('onMounted(');
     expect(view).not.toContain('function formatCurrency');
 
-    expect(view).toContain('formatDateTime');
+    expect(view).toContain('formatDate');
     expect(view).not.toContain('function formatDate');
     expect(view).toContain(
       "<goa-badge type=\"information\" :content=\"String(record['status'] ?? '—')\" />",
     );
-    expect(view).toContain("formatDateTime(record['lastSaved'])");
+    // A type: 'date' column is a calendar date -- formatDate, not
+    // formatDateTime, which would show an invented midnight.
+    expect(view).toContain("formatDate(record['lastSaved'])");
     expect(view).toContain("formatCurrency(record['requestTotal'])");
     expect(view).toContain("record['serviceModel'] ?? '—'");
     expect(view).toContain('<dt>Status</dt>');
@@ -128,7 +130,7 @@ describe('Vue Detail View Generator', () => {
       view
         .replace(/\s+/g, ' ')
         .match(/import \{[^}]*\} from '@proj\/vue-components';/)?.[0] ?? '';
-    for (const name of ['RecordDetailShell', 'formatCurrency', 'formatDateTime']) {
+    for (const name of ['RecordDetailShell', 'formatCurrency', 'formatDate']) {
       expect(goaImport).toContain(name);
     }
     expect(view).toContain('<RecordDetailShell');

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted<% if (filterable) { %>, onUnmounted<% } %> } from 'vue';
-import { WorkspaceTable, formatCurrency, formatDateTime } from '<%= goaImportPath %>';
+import { WorkspaceTable, formatCurrency, formatDate } from '<%= goaImportPath %>';
 import { useApi } from '../composables/useApi';
 
 const { list } = useApi();
@@ -140,7 +140,7 @@ onUnmounted(() => {
       </template>
 <% } else if (column.type === 'date') { -%>
       <template #cell-<%= column.key %>="{ row }">
-        {{ formatDateTime(row['<%= column.key %>']) }}
+        {{ formatDate(row['<%= column.key %>']) }}
       </template>
 <% } else if (column.type === 'currency') { -%>
       <template #cell-<%= column.key %>="{ row }">

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

@@ -121,7 +121,7 @@ describe('Vue Workspace View Generator', () => {
     expect(view).toContain('clearTimeout(searchDebounce)');
 
     // Dates come from the shared formatter, not a per-view copy.
-    expect(view).toContain('formatDateTime');
+    expect(view).toContain('formatDate');
     expect(view).not.toContain('function formatDate');
     expect(view).not.toContain('toLocaleString');
     expect(view).not.toContain('Intl.');
@@ -129,7 +129,9 @@ describe('Vue Workspace View Generator', () => {
     expect(view).toContain(
       "<goa-badge type=\"information\" :content=\"String(row['status'] ?? '—')\" />",
     );
-    expect(view).toContain("formatDateTime(row['lastSaved'])");
+    // A type: 'date' column is a calendar date -- formatDate, not
+    // formatDateTime, which would show an invented midnight.
+    expect(view).toContain("formatDate(row['lastSaved'])");
     expect(view).toContain("formatCurrency(row['requestTotal'])");
     // Uses the shared table shell, not hand-rolled loading/pagination markup.
     // Read the import's contents rather than an exact line: formatFiles wraps a
@@ -138,7 +140,7 @@ describe('Vue Workspace View Generator', () => {
       view
         .replace(/\s+/g, ' ')
         .match(/import \{[^}]*\} from '@proj\/vue-components';/)?.[0] ?? '';
-    for (const name of ['WorkspaceTable', 'formatCurrency', 'formatDateTime']) {
+    for (const name of ['WorkspaceTable', 'formatCurrency', 'formatDate']) {
       expect(goaImport).toContain(name);
     }
     expect(view).toContain('<WorkspaceTable');