@operato/data-grist 10.29.29 → 10.29.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.29.29",
+  "version": "10.29.31",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "type": "module",
@@ -27,7 +27,8 @@
     "./ox-sorters-control.js": "./dist/src/sorters/sorters-control.js",
     "./ox-record-creator.js": "./dist/src/record-view/ox-record-creator.js",
     "./ox-grist-personalizer.js": "./dist/src/personalizer/ox-grist-personalizer.js",
-    "./ox-popup-code-input.js": "./dist/src/editors/ox-popup-code-input.js"
+    "./ox-popup-code-input.js": "./dist/src/editors/ox-popup-code-input.js",
+    "./ox-card-thumb.js": "./dist/src/data-card/ox-card-thumb.js"
   },
   "typesVersions": {
     "*": {
@@ -51,6 +52,9 @@
       ],
       "ox-popup-code-input.js": [
         "dist/src/personalizer/ox-grist-personalizer.d.ts"
+      ],
+      "ox-card-thumb.js": [
+        "dist/src/data-card/ox-card-thumb.d.ts"
       ]
     }
   },
@@ -70,12 +74,12 @@
     "@material/web": "^2.0.0",
     "@operato/headroom": "^10.29.1",
     "@operato/i18n": "^10.29.27",
-    "@operato/input": "^10.29.29",
+    "@operato/input": "^10.29.30",
     "@operato/list-state": "^10.29.27",
-    "@operato/p13n": "^10.29.29",
-    "@operato/popup": "^10.29.29",
+    "@operato/p13n": "^10.29.30",
+    "@operato/popup": "^10.29.30",
     "@operato/pull-to-refresh": "^10.29.23",
-    "@operato/styles": "^10.29.29",
+    "@operato/styles": "^10.29.30",
     "@operato/time-calculator": "^10.29.1",
     "@operato/utils": "^10.29.23",
     "i18next": "^24.2.1",
@@ -116,5 +120,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "807f487e5ba47dac781b343133dc2603e405c845"
+  "gitHead": "0b1246851e25dae823d204c352757c93585f6612"
 }

package/test/card-thumb.test.ts

@@ -0,0 +1,51 @@
+import { expect, fixture, html } from '@open-wc/testing'
+
+import '../src/data-card/ox-card-thumb.js'
+import type { OxCardThumb } from '../src/data-card/ox-card-thumb.js'
+
+/*
+ * The one picture cell of a catalog card (ADR-0117 amendment 2026-10-13): the picture whole, an icon when there is
+ * none, at most one marker in the top-left corner, and a seam under it.
+ */
+describe('ox-card-thumb', () => {
+  it('★ shows the picture whole, never cropped, with a seam under it', async () => {
+    const thumb = await fixture<OxCardThumb>(html`<ox-card-thumb
+        style="--md-sys-color-outline-variant: rgb(200, 200, 200)"
+        src="data:image/gif;base64,R0lGODlhAQABAAAAACw="
+        alt="a board"
+      ></ox-card-thumb>`)
+    const img = thumb.shadowRoot!.querySelector('img')!
+    expect(img.getAttribute('alt')).to.equal('a board')
+    expect(getComputedStyle(img).objectFit).to.equal('contain')
+    expect(getComputedStyle(thumb).borderBottomStyle).to.equal('solid')
+    expect(thumb.shadowRoot!.querySelector('[empty]')).to.equal(null)
+  })
+
+  it('★ draws its icon when there is no picture, or the empty slot when one is given', async () => {
+    const bare = await fixture<OxCardThumb>(html`<ox-card-thumb icon="dashboard"></ox-card-thumb>`)
+    expect(bare.shadowRoot!.querySelector('[empty] md-icon')!.textContent).to.equal('dashboard')
+
+    const marked = await fixture<OxCardThumb>(html`<ox-card-thumb><span slot="empty" id="mark">no picture</span></ox-card-thumb>`)
+    const slot = marked.shadowRoot!.querySelector('slot[name="empty"]') as HTMLSlotElement
+    expect(slot.assignedElements().map(e => e.id)).to.deep.equal(['mark'])
+  })
+
+  it('★ says one thing in the corner, in its tone, and nothing when there is nothing to say', async () => {
+    const quiet = await fixture<OxCardThumb>(html`<ox-card-thumb></ox-card-thumb>`)
+    expect(quiet.shadowRoot!.querySelector('[badge]')).to.equal(null)
+
+    const warned = await fixture<OxCardThumb>(html`<ox-card-thumb badge="not latest" tone="warn"></ox-card-thumb>`)
+    const badge = warned.shadowRoot!.querySelector('[badge]') as HTMLElement
+    expect(badge.textContent).to.equal('not latest')
+    expect(badge.getAttribute('tone')).to.equal('warn')
+    expect(getComputedStyle(badge).position).to.equal('absolute')
+    expect(getComputedStyle(badge).top).to.equal('6px')
+    expect(getComputedStyle(badge).left).to.equal('6px')
+  })
+
+  it('lays the default slot over the picture for an action that belongs to it', async () => {
+    const thumb = await fixture<OxCardThumb>(html`<ox-card-thumb><button id="del">x</button></ox-card-thumb>`)
+    const slot = thumb.shadowRoot!.querySelector('slot:not([name])') as HTMLSlotElement
+    expect(slot.assignedElements().map(e => e.id)).to.deep.equal(['del'])
+  })
+})

package/test/filter-labels.test.ts

@@ -65,4 +65,35 @@ describe('필터 라벨', () => {
       expect(label!.querySelector('span')?.textContent?.trim()).to.equal(name)
     }
   })
+
+  /*
+   * A header may draw more than its words - a help `?` beside them. The filter is not the header: it names the column
+   * by its words, or a press on that `?` would also tick the checkbox around it.
+   */
+  it('names a filter by the header words when the header draws more', async () => {
+    const drawn = [
+      { type: 'checkbox', name: 'flag', header: { text: 'flag', renderer: () => html`flag <button class="extra">?</button>` }, filter: true },
+      { type: 'select', name: 'kind', header: { text: 'kind', renderer: () => html`kind <button class="extra">?</button>` }, record: { options: ['', 'A'] }, filter: true }
+    ]
+    const el = (await fixture(html`
+      <ox-grist
+        style="height: 300px"
+        mode="GRID"
+        .config=${{ columns: drawn, 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 deep = (node: ParentNode): boolean =>
+      Array.from(node.querySelectorAll('*')).some(one => one.matches('button.extra') || (!!one.shadowRoot && deep(one.shadowRoot)))
+    expect(deep(root), 'the header drawing is not in the filter form').to.equal(false)
+    expect(root.textContent).to.contain('flag')
+    expect(root.textContent).to.contain('kind')
+  })
 })