@operato/data-grist 10.29.28 → 10.29.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.29.28",
+  "version": "10.29.30",
   "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.28",
+    "@operato/input": "^10.29.30",
     "@operato/list-state": "^10.29.27",
-    "@operato/p13n": "^10.29.27",
-    "@operato/popup": "^10.29.27",
+    "@operato/p13n": "^10.29.30",
+    "@operato/popup": "^10.29.30",
     "@operato/pull-to-refresh": "^10.29.23",
-    "@operato/styles": "^10.29.23",
+    "@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": "cf6d84547fbf6a32a315c08f85c4dfc35a30d4a5"
+  "gitHead": "44682a97746b11fb380a3a5ce7718f3428e4943c"
 }

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'])
+  })
+})