@operato/data-grist 10.13.0 → 10.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.13.0",
+  "version": "10.15.0",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "type": "module",
@@ -70,13 +70,14 @@
     "@material/web": "^2.0.0",
     "@operato/headroom": "^10.0.0",
     "@operato/i18n": "^10.11.0",
-    "@operato/input": "^10.12.0",
-    "@operato/p13n": "^10.13.0",
-    "@operato/popup": "^10.11.0",
+    "@operato/input": "^10.15.0",
+    "@operato/list-state": "^10.15.0",
+    "@operato/p13n": "^10.15.0",
+    "@operato/popup": "^10.15.0",
     "@operato/pull-to-refresh": "^10.0.0",
-    "@operato/styles": "^10.10.0",
+    "@operato/styles": "^10.15.0",
     "@operato/time-calculator": "^10.0.0",
-    "@operato/utils": "^10.11.0",
+    "@operato/utils": "^10.15.0",
     "i18next": "^24.2.1",
     "json5": "^2.2.0",
     "lit": "^3.1.2",
@@ -115,5 +116,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "74b991d2b27696070fe8d54b24bd4c30ea0a2ef7"
+  "gitHead": "62ac2a23866e7ea579786c4433ef356888dfded8"
 }

package/test/accumulator-labels.test.ts

@@ -0,0 +1,36 @@
+import { expect } from '@open-wc/testing'
+
+/**
+ * The summary row tags a column with its accumulator's name - `label.accumulator_${type}`.
+ *
+ * max and min were swapped in all five locales: a column summed with `max` (Math.max) was tagged
+ * "min" / 「최소」. The words are written out here per locale, so a swap in any one of them fails.
+ */
+
+const EXPECTED: Record<string, { max: string; min: string }> = {
+  en: { max: 'max', min: 'min' },
+  ko: { max: '최대', min: '최소' },
+  ja: { max: '最大', min: '最小' },
+  zh: { max: '最大', min: '最小' },
+  ms: { max: 'Maksimum', min: 'Minimum' }
+}
+
+async function translations(locale: string): Promise<Record<string, string>> {
+  const response = await fetch(new URL(`../../translations/${locale}.json`, import.meta.url))
+  expect(response.ok, `${locale}.json is served`).to.equal(true)
+  return response.json()
+}
+
+describe('accumulator labels', () => {
+  for (const [locale, words] of Object.entries(EXPECTED)) {
+    it(`${locale}: max is the largest, min the smallest`, async () => {
+      const t = await translations(locale)
+      expect(t['label.accumulator_max']).to.equal(words.max)
+      expect(t['label.accumulator_min']).to.equal(words.min)
+    })
+  }
+
+  it('ko: count is 개수', async () => {
+    expect((await translations('ko'))['label.accumulator_count']).to.equal('개수')
+  })
+})

package/test/control-heights.test.ts

@@ -0,0 +1,31 @@
+import { expect } from '@open-wc/testing'
+
+import { DataGridField } from '../src/data-grid/data-grid-field.js'
+import { FilterStyles } from '../src/filters/filter-styles.js'
+
+/**
+ * A button inside a grid cell is --cell-action-height (26px by default, ADR-0060 decision 6), for its
+ * width as well: a second token for the width could say a different number. It still takes no more
+ * than a line of text in the row, so one cell with a button does not make every row taller.
+ */
+
+const text = (styles: unknown) =>
+  (Array.isArray(styles) ? styles : [styles]).map(s => String((s as { cssText?: string }).cssText ?? s)).join('\n')
+
+describe('cell action height', () => {
+  it('the icon button in a cell reads the cell token for height and width', () => {
+    const css = text(DataGridField.styles)
+    const rule = css.slice(css.indexOf(':host > button.icon {'))
+
+    expect(rule).to.match(/^:host > button\.icon \{[^}]*width: var\(--cell-action-height, 26px\);/)
+    expect(rule).to.match(/^:host > button\.icon \{[^}]*height: var\(--cell-action-height, 26px\);/)
+    expect(rule).to.contain('margin-top: calc((20px - var(--cell-action-height, 26px)) / 2)')
+  })
+})
+
+describe('filter bar input height', () => {
+  it('a grid filter bar is a dense row, so its inputs take the small input height', () => {
+    const css = text(FilterStyles)
+    expect(css).to.match(/box-sizing: border-box;\s*height: var\(--form-element-height-small, 26px\);/)
+  })
+})

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

@@ -0,0 +1,135 @@
+/* Elements are compared by presence, not by value: a failing element comparison makes chai render the DOM and hang the runner. */
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/data-grist.js'
+
+/**
+ * A failed fetch is not an empty list.
+ *
+ * The provider wrapped the fetch in try/finally with no catch, so a thrown fetch hid the spinner and
+ * nothing else: with no rows the grid said "nothing to show", with rows from before it kept them as if
+ * they were the answer. Both are a confident wrong statement about data the grid never saw.
+ */
+
+type Rec = { id: string; name: string }
+
+const config = {
+  columns: [
+    { type: 'string', name: 'id', hidden: true },
+    { type: 'string', name: 'name', header: 'name' }
+  ],
+  pagination: { pages: [20] }
+}
+
+const settle = (ms = 150) => new Promise(resolve => setTimeout(resolve, ms))
+
+async function grist(mode: 'GRID' | 'LIST' | 'CARD', handler: () => Promise<unknown>) {
+  const el = (await fixture(html`
+    <ox-grist style="height: 300px" mode=${mode} .config=${config} .fetchHandler=${handler}></ox-grist>
+  `)) as HTMLElement & { fetch(): Promise<void>; updateComplete: Promise<unknown>; renderRoot: ShadowRoot }
+  await el.fetch().catch(() => {})
+  await settle()
+  await el.updateComplete
+  return el
+}
+
+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
+}
+
+describe('ox-grist when the fetch fails', () => {
+  /*
+   * Resizing the grid body inside a fixture trips Chrome's benign "ResizeObserver loop completed"
+   * error, which mocha reports as a failure. It says nothing about fetch failures; keep it out.
+   */
+  const ignoreResizeLoop = (e: ErrorEvent) => {
+    if (String(e.message).includes('ResizeObserver loop')) {
+      e.stopImmediatePropagation()
+      e.preventDefault()
+    }
+  }
+  let previousOnError: OnErrorEventHandler = null
+  before(() => {
+    window.addEventListener('error', ignoreResizeLoop, true)
+    previousOnError = window.onerror
+    window.onerror = (message, ...rest) =>
+      String(message).includes('ResizeObserver loop') ? true : previousOnError?.call(window, message, ...rest)
+  })
+  after(() => {
+    window.removeEventListener('error', ignoreResizeLoop, true)
+    window.onerror = previousOnError
+  })
+
+  for (const mode of ['GRID', 'LIST', 'CARD'] as const) {
+    it(`${mode}: says it could not load, not that there is nothing, and retries`, async () => {
+      let calls = 0
+      const el = await grist(mode, async () => {
+        calls++
+        throw new Error('server down')
+      })
+
+      const note = emptyNote(el)
+      expect(note, 'a note is drawn').to.exist
+      expect(note!.getAttribute('role')).to.equal('alert')
+      expect(note!.getAttribute('title')).to.equal('could not load the list')
+
+      const retry = note!.querySelector('md-text-button') as HTMLElement
+      expect(retry, 'retry').to.exist
+      const before = calls
+      retry.click()
+      await settle()
+      expect(calls).to.equal(before + 1)
+    })
+  }
+
+  it('an empty answer still says empty, without an alert', async () => {
+    const el = await grist('GRID', async () => ({ total: 0, records: [] as Rec[] }))
+
+    const note = emptyNote(el)
+    expect(note, 'a note is drawn').to.exist
+    expect(note!.hasAttribute('role')).to.equal(false)
+    expect(note!.getAttribute('title')).to.equal('nothing here yet.')
+  })
+
+  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 () => {
+      if (fail) throw new Error('server down')
+      return { total: 1, records: [{ id: '1', name: 'first' }] }
+    })
+
+    expect(el.renderRoot.querySelector('ox-list-state') === null, 'absent').to.equal(true)
+
+    fail = true
+    await el.fetch().catch(() => {})
+    await settle()
+    await el.updateComplete
+
+    const state = el.renderRoot.querySelector('ox-list-state')!
+    expect(state, 'failure band').to.exist
+    await state.updateComplete
+    expect(state.renderRoot.querySelector('[role="alert"]')?.textContent).to.contain('could not refresh')
+
+    fail = false
+    await el.fetch()
+    await settle()
+    await el.updateComplete
+    expect(el.renderRoot.querySelector('ox-list-state') === null, 'absent').to.equal(true)
+  })
+
+  it('the error still reaches whoever awaited the fetch', async () => {
+    const el = (await fixture(html`
+      <ox-grist mode="GRID" .config=${config} .fetchHandler=${async () => { throw new Error('server down') }}></ox-grist>
+    `)) as HTMLElement & { fetch(): Promise<void> }
+
+    let caught: unknown
+    await el.fetch().catch(e => (caught = e))
+    expect((caught as Error)?.message).to.equal('server down')
+  })
+})

package/translations/en.json

@@ -3,19 +3,16 @@
   "button.save": "save",
   "label.accumulator_avg": "avg",
   "label.accumulator_count": "cnt",
-  "label.accumulator_max": "min",
-  "label.accumulator_min": "max",
+  "label.accumulator_max": "max",
+  "label.accumulator_min": "min",
   "label.accumulator_sum": "sum",
   "label.filter": "filter",
   "text.grid-cell-input": "{name} input",
   "text.grid-cell-input-plain": "cell input",
-  "text.grid-clear-search": "clear the search or filters to see everything",
   "text.grid-filter-from": "{name} filter, from",
   "text.grid-filter-of": "{name} filter",
   "text.grid-filter-to": "{name} filter, to",
-  "text.grid-no-records": "nothing to show",
-  "text.grid-nothing-found": "nothing found",
-  "text.grid-open-editor": "press to edit",
+  "text.grid-open-editor": "select to edit",
   "text.grid-select-all-records": "select all rows",
   "text.grid-select-record": "select row {row}",
   "text.grid-total-records": "{total} in total",

package/translations/ja.json

@@ -3,19 +3,16 @@
   "button.save": "保存",
   "label.accumulator_avg": "平均",
   "label.accumulator_count": "カウント",
-  "label.accumulator_max": "最小",
-  "label.accumulator_min": "最大",
+  "label.accumulator_max": "最大",
+  "label.accumulator_min": "最小",
   "label.accumulator_sum": "合計",
   "label.filter": "フィルター",
   "text.grid-cell-input": "{name} 入力",
   "text.grid-cell-input-plain": "セル入力",
-  "text.grid-clear-search": "検索語やフィルターを消すと全体が表示されます",
   "text.grid-filter-from": "{name} フィルター 開始値",
   "text.grid-filter-of": "{name} フィルター",
   "text.grid-filter-to": "{name} フィルター 終了値",
-  "text.grid-no-records": "まだ何もありません",
-  "text.grid-nothing-found": "見つかりませんでした",
-  "text.grid-open-editor": "押して編集します",
+  "text.grid-open-editor": "選択して編集",
   "text.grid-select-all-records": "すべての行を選択",
   "text.grid-select-record": "{row} 行目を選択",
   "text.grid-total-records": "全 {total} 件",

package/translations/ko.json

@@ -2,20 +2,17 @@
   "button.delete": "삭제",
   "button.save": "저장",
   "label.accumulator_avg": "평균",
-  "label.accumulator_count": "계수",
-  "label.accumulator_max": "최소",
-  "label.accumulator_min": "최대",
+  "label.accumulator_count": "개수",
+  "label.accumulator_max": "최대",
+  "label.accumulator_min": "최소",
   "label.accumulator_sum": "합계",
   "label.filter": "필터",
   "text.grid-cell-input": "{name} 입력",
   "text.grid-cell-input-plain": "칸 입력",
-  "text.grid-clear-search": "검색어나 필터를 지우면 전체가 보입니다",
   "text.grid-filter-from": "{name} 필터 시작값",
   "text.grid-filter-of": "{name} 필터",
   "text.grid-filter-to": "{name} 필터 끝값",
-  "text.grid-no-records": "아직 아무것도 없습니다",
-  "text.grid-nothing-found": "찾는 것이 없습니다",
-  "text.grid-open-editor": "눌러서 고칩니다",
+  "text.grid-open-editor": "선택해 편집",
   "text.grid-select-all-records": "모든 행 선택",
   "text.grid-select-record": "{row}번째 행 선택",
   "text.grid-total-records": "모두 {total}건",

package/translations/ms.json

@@ -3,19 +3,16 @@
   "button.save": "simpan",
   "label.accumulator_avg": "Purata",
   "label.accumulator_count": "Kiraan",
-  "label.accumulator_max": "Minimum",
-  "label.accumulator_min": "Maksimum",
+  "label.accumulator_max": "Maksimum",
+  "label.accumulator_min": "Minimum",
   "label.accumulator_sum": "Jumlah",
   "label.filter": "penapis",
   "text.grid-cell-input": "input {name}",
   "text.grid-cell-input-plain": "input sel",
-  "text.grid-clear-search": "kosongkan carian atau penapis untuk melihat semua",
   "text.grid-filter-from": "penapis {name}, dari",
   "text.grid-filter-of": "penapis {name}",
   "text.grid-filter-to": "penapis {name}, hingga",
-  "text.grid-no-records": "tiada apa-apa untuk dipaparkan",
-  "text.grid-nothing-found": "tiada apa-apa dijumpai",
-  "text.grid-open-editor": "tekan untuk mengedit",
+  "text.grid-open-editor": "pilih untuk menyunting",
   "text.grid-select-all-records": "pilih semua baris",
   "text.grid-select-record": "pilih baris {row}",
   "text.grid-total-records": "{total} kesemuanya",

package/translations/zh.json

@@ -3,19 +3,16 @@
   "button.save": "保存",
   "label.accumulator_avg": "平均",
   "label.accumulator_count": "计数",
-  "label.accumulator_max": "最小",
-  "label.accumulator_min": "最大",
+  "label.accumulator_max": "最大",
+  "label.accumulator_min": "最小",
   "label.accumulator_sum": "总和",
   "label.filter": "筛选",
   "text.grid-cell-input": "{name} 输入",
   "text.grid-cell-input-plain": "单元格输入",
-  "text.grid-clear-search": "清除搜索或筛选即可查看全部",
   "text.grid-filter-from": "{name} 筛选起始值",
   "text.grid-filter-of": "{name} 筛选",
   "text.grid-filter-to": "{name} 筛选结束值",
-  "text.grid-no-records": "还没有任何记录",
-  "text.grid-nothing-found": "没有找到",
-  "text.grid-open-editor": "点击进行编辑",
+  "text.grid-open-editor": "选择以编辑",
   "text.grid-select-all-records": "选择所有行",
   "text.grid-select-record": "选择第 {row} 行",
   "text.grid-total-records": "共 {total} 条",