@operato/data-grist 10.29.27 → 10.29.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.29.27",
+  "version": "10.29.29",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "type": "module",
@@ -70,12 +70,12 @@
     "@material/web": "^2.0.0",
     "@operato/headroom": "^10.29.1",
     "@operato/i18n": "^10.29.27",
-    "@operato/input": "^10.29.27",
+    "@operato/input": "^10.29.29",
     "@operato/list-state": "^10.29.27",
-    "@operato/p13n": "^10.29.27",
-    "@operato/popup": "^10.29.27",
+    "@operato/p13n": "^10.29.29",
+    "@operato/popup": "^10.29.29",
     "@operato/pull-to-refresh": "^10.29.23",
-    "@operato/styles": "^10.29.23",
+    "@operato/styles": "^10.29.29",
     "@operato/time-calculator": "^10.29.1",
     "@operato/utils": "^10.29.23",
     "i18next": "^24.2.1",
@@ -116,5 +116,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "aa70087b5929f12cec0506c19f1aec0a83610a79"
+  "gitHead": "807f487e5ba47dac781b343133dc2603e405c845"
 }

package/test/fetch-failure-state.test.ts

@@ -36,11 +36,8 @@ async function grist(mode: 'GRID' | 'LIST' | 'CARD', handler: () => Promise<unkn
 
 function emptyNote(el: HTMLElement & { renderRoot: ShadowRoot }): HTMLElement | null {
   const body = el.renderRoot.querySelector('#grist') as (HTMLElement & { renderRoot: ShadowRoot }) | null
-  const inBody = body?.renderRoot.querySelector('ox-empty-note') as HTMLElement | null
-  if (inBody) return inBody
-  /* GRID draws the note inside its body element. */
-  const gridBody = body?.renderRoot.querySelector('ox-grid-body') as HTMLElement | null
-  return (gridBody?.querySelector('ox-empty-note') as HTMLElement | null) ?? null
+  /* Every mode draws the note in its own shadow root - GRID on the grid host, not in its body. */
+  return (body?.renderRoot.querySelector('ox-empty-note') as HTMLElement | null) ?? null
 }
 
 describe('ox-grist when the fetch fails', () => {
@@ -97,6 +94,30 @@ describe('ox-grist when the fetch fails', () => {
     expect(note!.getAttribute('title')).to.equal('nothing here yet.')
   })
 
+  it('GRID: the note stays in the visible grid when the columns are wider than it', async () => {
+    const wide = {
+      columns: [
+        { type: 'string', name: 'id', hidden: true },
+        { type: 'string', name: 'a', header: 'a', width: 600 },
+        { type: 'string', name: 'b', header: 'b', width: 600 }
+      ],
+      pagination: { pages: [20] }
+    }
+    const el = (await fixture(html`
+      <ox-grist style="height: 300px; width: 500px" mode="GRID" .config=${wide} .fetchHandler=${async () => ({ total: 0, records: [] as Rec[] })}></ox-grist>
+    `)) as HTMLElement & { fetch(): Promise<void>; updateComplete: Promise<unknown>; renderRoot: ShadowRoot }
+    await el.fetch()
+    await settle()
+    await el.updateComplete
+
+    const note = emptyNote(el)
+    expect(note, 'a note is drawn').to.exist
+    const box = el.getBoundingClientRect()
+    const at = note!.getBoundingClientRect()
+    /* Inside the 500px the person sees, not centred in the 1200px of columns. */
+    expect(at.left >= box.left && at.right <= box.right, `note ${at.left}-${at.right} within grid ${box.left}-${box.right}`).to.equal(true)
+  })
+
   it('rows from before stay, with a band saying they are not a fresh result; a good fetch clears it', async () => {
     let fail = false
     const el = await grist('GRID', async () => {

package/test/record-card-height.test.ts

@@ -0,0 +1,19 @@
+import { expect } from '@open-wc/testing'
+
+import { RecordCard } from '../src/data-card/record-card.js'
+
+/**
+ * A card is as tall as its content by default. A list whose cards carry different numbers of lines (a fact row that
+ * only some records have) stretches the cards of a row to one height through --data-card-record-card-height.
+ */
+
+const text = (styles: unknown) =>
+  (Array.isArray(styles) ? styles : [styles]).map(s => String((s as { cssText?: string }).cssText ?? s)).join('\n')
+
+describe('record card height', () => {
+  it('reads --data-card-record-card-height, min-content when not set', () => {
+    const css = text(RecordCard.styles)
+    const host = css.slice(css.indexOf(':host {'), css.indexOf('}', css.indexOf(':host {')))
+    expect(host).to.contain('height: var(--data-card-record-card-height, min-content);')
+  })
+})