@operato/data-grist 10.29.14 → 10.29.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.29.14",
+  "version": "10.29.18",
   "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.1",
-    "@operato/input": "^10.29.14",
+    "@operato/input": "^10.29.17",
     "@operato/list-state": "^10.29.1",
-    "@operato/p13n": "^10.29.14",
-    "@operato/popup": "^10.29.14",
+    "@operato/p13n": "^10.29.17",
+    "@operato/popup": "^10.29.17",
     "@operato/pull-to-refresh": "^10.29.1",
-    "@operato/styles": "^10.29.12",
+    "@operato/styles": "^10.29.17",
     "@operato/time-calculator": "^10.29.1",
     "@operato/utils": "^10.29.1",
     "i18next": "^24.2.1",
@@ -116,5 +116,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "44bef05a4a98b16055bbe20e2493e8cdca28de96"
+  "gitHead": "f3adef5197cdb03b1efbdb123dc935a80b6ddc00"
 }

package/test/filter-labels.test.ts

@@ -0,0 +1,68 @@
+/* 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'
+import '../src/filters/filters-form.js'
+
+/*
+ * Every filter in the form says what it filters, beside its chooser. A select once carried its name only as a
+ * placeholder, which a chosen value replaces - the bar then showed 「진행 중」 with nothing saying it was the status.
+ */
+
+const columns = [
+  { type: 'string', name: 'name', header: 'name', filter: 'i_like' },
+  { type: 'select', name: 'status', header: 'status', record: { options: ['', 'OPEN', 'CLOSED'] }, filter: 'in' },
+  { type: 'select', name: 'kind', header: 'kind', record: { options: ['', 'A', 'B'] }, filter: true },
+  { type: 'date', name: 'day', header: 'day', filter: 'between' }
+]
+
+const settle = (ms = 150) => new Promise(resolve => setTimeout(resolve, ms))
+
+describe('필터 라벨', () => {
+  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
+  })
+
+  it('every filter, a select too, sits in a label that names it', async () => {
+    const el = (await fixture(html`
+      <ox-grist
+        style="height: 300px"
+        mode="GRID"
+        .config=${{ columns, pagination: { pages: [20] } }}
+        .fetchHandler=${async () => ({ page: 1, limit: 20, total: 0, records: [] })}
+      >
+        <div slot="headroom"><ox-filters-form without-search></ox-filters-form></div>
+      </ox-grist>
+    `)) as any
+    await settle()
+
+    const form = el.querySelector('ox-filters-form') as any
+    await form.updateComplete
+    const root = form.renderRoot as ShadowRoot
+    const named = (name: string) => root.querySelector(`[name="${name}"]`)
+    for (const name of ['name', 'status', 'kind', 'day']) {
+      const chooser = named(name)
+      expect(!!chooser, `${name} is rendered`).to.equal(true)
+      const label = chooser!.closest('label[filter-title]')
+      expect(!!label, `${name} sits in a label`).to.equal(true)
+      expect(label!.querySelector('span')?.textContent?.trim()).to.equal(name)
+    }
+  })
+})

package/test/record-view-popup-editor.test.ts

@@ -0,0 +1,68 @@
+/* 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/record-view/record-view.js'
+import { buildColumn } from '../src/configure/column-builder.js'
+import { OxGristEditor } from '../src/editors/ox-grist-editor.js'
+import { registerEditor } from '../src/editors/registry.js'
+
+/*
+ * In a form (ox-record-view - the 「만들기」 dialog of a grid) a field is pressed to be edited. A field whose editor
+ * opens a popup used to become 「editing」 on the first press but open nothing until its editor was pressed again,
+ * so what was typed after the first press went nowhere (pdf template 「만들기」, body HTML, 2026-10-10).
+ */
+
+let opened = 0
+
+class ProbePopupEditor extends OxGristEditor {
+  static opensPopup = true
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    opened++
+  }
+}
+customElements.define('probe-popup-editor', ProbePopupEditor)
+registerEditor('probe-popup', ProbePopupEditor)
+
+const settle = (ms = 100) => new Promise(resolve => setTimeout(resolve, ms))
+
+describe('a popup field in a form', () => {
+  it('opens its popup on the first press', async () => {
+    opened = 0
+    const columns = [
+      buildColumn({ type: 'string', name: 'name', header: 'name', record: { editable: true } } as any),
+      buildColumn({ type: 'probe-popup', name: 'body', header: 'body', record: { editable: true } } as any)
+    ]
+    const view = (await fixture(html`<ox-record-view .columns=${columns} .record=${{}}></ox-record-view>`)) as any
+    await view.updateComplete
+    await settle()
+
+    const body = view.renderRoot.querySelector('ox-record-view-body') as any
+    await body.updateComplete
+    const field = Array.from(body.renderRoot.querySelectorAll('ox-grid-field') as NodeListOf<any>).find(one => one.column?.name === 'body')
+    expect(!!field, 'the body field is drawn').to.equal(true)
+
+    field.click()
+    await settle(200)
+
+    expect(field.getAttribute('editing'), 'the field is being edited').to.equal('true')
+    expect(opened, 'the popup editor was opened once').to.equal(1)
+  })
+
+  it('leaves a field edited in place as it was - nothing extra is pressed', async () => {
+    opened = 0
+    const columns = [buildColumn({ type: 'string', name: 'name', header: 'name', record: { editable: true } } as any)]
+    const view = (await fixture(html`<ox-record-view .columns=${columns} .record=${{}}></ox-record-view>`)) as any
+    await view.updateComplete
+    await settle()
+    const body = view.renderRoot.querySelector('ox-record-view-body') as any
+    await body.updateComplete
+    const field = body.renderRoot.querySelector('ox-grid-field') as any
+    field.click()
+    await settle(200)
+    expect(field.getAttribute('editing')).to.equal('true')
+    expect(opened).to.equal(0)
+  })
+})