@operato/input 10.29.36 → 10.29.37

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "10.29.36",
+  "version": "10.29.37",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -251,9 +251,9 @@
     "@material/web": "^2.0.0",
     "@operato/i18n": "^10.29.27",
     "@operato/pickr": "^10.29.1",
-    "@operato/popup": "^10.29.36",
+    "@operato/popup": "^10.29.37",
     "@operato/styles": "^10.29.30",
-    "@operato/utils": "^10.29.36",
+    "@operato/utils": "^10.29.37",
     "@types/codemirror": "^5.60.5",
     "@undecaf/zbar-wasm": "^0.11.0",
     "codemirror": "^6.0.1",
@@ -294,5 +294,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "90c8bc8593e5d68745aeddd45752fab83c50cc16"
+  "gitHead": "38361a65226ee9f23814747b4f0520edf42c3184"
 }

package/test/ox-input-file.test.ts

@@ -123,6 +123,137 @@ describe('ox-input-file', () => {
     expect(el.value ?? [], 'a drop landed mid-upload').to.deep.equal([])
   })
 
+  it('keeps its button at the end where its place says so, with the refusal under it', async () => {
+    const wrap: any = await fixture(html`<div style="--ox-actions-align: end; display: flex; justify-content: flex-end; width: 400px">
+      <ox-input-file quiet accept="image/*"></ox-input-file>
+    </div>`)
+    const el: any = wrap.querySelector('ox-input-file')
+
+    drop(el, file('a-rather-long-file-name-that-was-refused.txt', 'text/plain'))
+    await settle(el)
+
+    const host = el.getBoundingClientRect()
+    const button = buttons(el)[0].getBoundingClientRect()
+    const refusal = el.renderRoot.querySelector('[role="alert"]')
+
+    expect(Math.abs(host.right - button.right), 'the button left the end').to.be.below(1)
+    expect(getComputedStyle(refusal).textAlign).to.equal('end')
+  })
+
+  it('writes the picked name at the size of its surroundings', async () => {
+    const wrap: any = await fixture(html`<div style="font-size: 11px"><ox-input-file quiet></ox-input-file></div>`)
+    const el: any = wrap.querySelector('ox-input-file')
+
+    drop(el, file('a.pdf', 'application/pdf'))
+    await settle(el)
+
+    expect(getComputedStyle(el.renderRoot.querySelector('.picked .name')).fontSize).to.equal('11px')
+  })
+
+  it('starts at the start when nothing says otherwise', async () => {
+    const el: any = await fixture(html`<ox-input-file quiet accept="image/*"></ox-input-file>`)
+
+    drop(el, file('a-rather-long-file-name-that-was-refused.txt', 'text/plain'))
+    await settle(el)
+
+    expect(Math.abs(el.getBoundingClientRect().left - buttons(el)[0].getBoundingClientRect().left)).to.be.below(1)
+  })
+
+  it('shows an icon only when given one, and takes its button height from its place', async () => {
+    const plain: any = await fixture(html`<ox-input-file quiet></ox-input-file>`)
+    expect(!!buttons(plain)[0].querySelector('md-icon'), 'an icon nobody asked for').to.equal(false)
+
+    const wrap: any = await fixture(html`<div style="--ox-input-file-action-height: 40px">
+      <ox-input-file quiet icon="photo_camera" label="take"></ox-input-file>
+    </div>`)
+    const camera: any = wrap.querySelector('ox-input-file')
+    const button = buttons(camera)[0]
+
+    expect(button.querySelector('md-icon')?.textContent).to.equal('photo_camera')
+    expect(button.getBoundingClientRect().height).to.equal(40)
+  })
+
+  it('draws no button of its own when a page action starts the pick, and still refuses in place', async () => {
+    const el: any = await fixture(html`<ox-input-file quiet outside-trigger accept="application/pdf"></ox-input-file>`)
+
+    expect(buttons(el).length, 'a second trigger beside the page action').to.equal(0)
+
+    let opened = 0
+    el.fileInput.click = () => opened++
+    el.pick()
+    expect(opened, 'pick() did not open the dialog').to.equal(1)
+
+    drop(el, file('register.xlsx', 'application/vnd.ms-excel'))
+    await settle(el)
+    expect(!!el.renderRoot.querySelector('[role="alert"]'), 'the refusal is not shown').to.equal(true)
+  })
+
+  it('leaves the server limits out for a file read in the browser, and still checks the type', async () => {
+    registerFileUploadLimits(async () => ({ maxFileSize: 20 }))
+    const el: any = await fixture(html`<ox-input-file quiet local accept=".json"></ox-input-file>`)
+
+    drop(el, file('samples.json', 'application/json', 50))
+    await settle(el)
+    expect(el.value.map((one: File) => one.name), 'a local file was held to the upload limit').to.deep.equal(['samples.json'])
+
+    drop(el, file('notes.txt', 'text/plain'))
+    await settle(el)
+    expect(el.value.map((one: File) => one.name)).to.deep.equal(['samples.json'])
+    expect(!!el.renderRoot.querySelector('[role="alert"]')).to.equal(true)
+  })
+
+  it('takes a screen limit tighter than the server, and never a looser one', async () => {
+    registerFileUploadLimits(async () => ({ maxFileSize: 100 }))
+    const el: any = await fixture(html`<ox-input-file quiet multiple .limits=${{ maxFileSize: 20 }}></ox-input-file>`)
+
+    drop(el, file('small.png', 'image/png', 10), file('middle.png', 'image/png', 50))
+    await settle(el)
+    expect(el.value.map((one: File) => one.name), 'the screen limit was not applied').to.deep.equal(['small.png'])
+
+    el.limits = { maxFileSize: 1000 }
+    drop(el, file('large.png', 'image/png', 500))
+    await settle(el)
+    expect(el.value.map((one: File) => one.name), 'a screen loosened the server limit').to.deep.equal(['small.png'])
+  })
+
+  it('shows a file name as written, in the box and in a refusal', async () => {
+    const el: any = await fixture(html`<ox-input-file accept="image/*"></ox-input-file>`)
+
+    drop(el, file('notes.txt', 'text/plain'))
+    await settle(el)
+    expect(getComputedStyle(el.renderRoot.querySelector('[role="alert"]')).textTransform, 'the refusal recased the name').to.equal('none')
+
+    el.accept = ''
+    drop(el, file('model.figpkg', ''))
+    await settle(el)
+    expect(getComputedStyle(el.renderRoot.querySelector('li')).textTransform, 'the list recased the name').to.equal('none')
+  })
+
+  it('lets a panel style its quiet buttons by part and give the attach button its own icon', async () => {
+    const el: any = await fixture(html`<ox-input-file quiet><span slot="icon" id="tile">▣</span></ox-input-file>`)
+
+    const attach = el.renderRoot.querySelector('[part="attach"]')
+    expect(!!attach, 'no attach part').to.equal(true)
+    const slot = attach.querySelector('slot[name="icon"]') as HTMLSlotElement
+    expect(slot.assignedElements().map(one => one.id)).to.deep.equal(['tile'])
+
+    drop(el, file('a.pdf', 'application/pdf'))
+    await settle(el)
+    expect([...el.renderRoot.querySelectorAll('[part]')].map((one: Element) => one.getAttribute('part'))).to.deep.equal(['replace', 'remove'])
+  })
+
+  it('hands its files to the form data as files', async () => {
+    const form: any = await fixture(html`<form><ox-input-file name="papers" multiple></ox-input-file></form>`)
+    const el: any = form.querySelector('ox-input-file')
+
+    drop(el, file('a.pdf', 'application/pdf'), file('b.png', 'image/png'))
+    await settle(el)
+
+    const sent = new FormData(form).getAll('papers') as File[]
+    expect(sent.every(one => one instanceof File), 'a file went as text').to.equal(true)
+    expect(sent.map(one => one.name)).to.deep.equal(['a.pdf', 'b.png'])
+  })
+
   it('keeps the drop box when not quiet', async () => {
     const el: any = await fixture(html`<ox-input-file></ox-input-file>`)