@operato/input 10.29.30 → 10.29.36

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.30",
+  "version": "10.29.36",
   "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.30",
+    "@operato/popup": "^10.29.36",
     "@operato/styles": "^10.29.30",
-    "@operato/utils": "^10.29.23",
+    "@operato/utils": "^10.29.36",
     "@types/codemirror": "^5.60.5",
     "@undecaf/zbar-wasm": "^0.11.0",
     "codemirror": "^6.0.1",
@@ -294,5 +294,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "44682a97746b11fb380a3a5ce7718f3428e4943c"
+  "gitHead": "90c8bc8593e5d68745aeddd45752fab83c50cc16"
 }

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

@@ -0,0 +1,136 @@
+import { aTimeout, expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import { registerFileUploadLimits } from '@operato/utils'
+
+import '../src/ox-input-file.js'
+
+/**
+ * The one file picker.
+ *
+ * ## Why this is tested
+ *
+ * Every screen that takes a file goes through this element, and a 360 uses its quiet look. What
+ * must hold:
+ *
+ * ```
+ * quiet         no box: an attach button; once picked, the name with replace and remove
+ * refusal       a type outside accept or a file over the server's limit never becomes the value,
+ *               and says so in place — a drop skips the native accept filter
+ * drop target   a drop lands on the element the owner gives (a 360 section), and only there
+ * progress      while the owner uploads, the buttons wait and the percent shows
+ * ```
+ */
+describe('ox-input-file', () => {
+  const file = (name: string, type: string, size = 10) => new File([new Uint8Array(size)], name, { type })
+
+  const drop = (area: HTMLElement, ...files: File[]) => {
+    const dataTransfer = new DataTransfer()
+    files.forEach(one => dataTransfer.items.add(one))
+    area.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true, cancelable: true }))
+  }
+
+  const settle = async (el: any) => {
+    await aTimeout(0)
+    await el.updateComplete
+  }
+
+  const buttons = (el: any) => [...el.renderRoot.querySelectorAll('button')] as HTMLButtonElement[]
+
+  /* The theme token the box border is drawn with; without it the border falls away and every look reads 'none'. */
+  before(() => document.documentElement.style.setProperty('--md-sys-color-outline-variant', 'gray'))
+  after(() => document.documentElement.style.removeProperty('--md-sys-color-outline-variant'))
+
+  afterEach(() => registerFileUploadLimits(async () => ({})))
+
+  it('draws no box when quiet, and shows the picked name with replace and remove', async () => {
+    const el: any = await fixture(html`<ox-input-file quiet accept="image/*,application/pdf"></ox-input-file>`)
+
+    expect(getComputedStyle(el).borderTopStyle, 'quiet still draws a box').to.equal('none')
+    expect(buttons(el).length, 'one attach button before a pick').to.equal(1)
+
+    let changes = 0
+    el.addEventListener('change', () => changes++)
+
+    drop(el, file('paper.pdf', 'application/pdf'))
+    await settle(el)
+
+    expect(el.value.map((one: File) => one.name)).to.deep.equal(['paper.pdf'])
+    expect(el.renderRoot.querySelector('.picked .name').textContent).to.equal('paper.pdf')
+    expect(buttons(el).length, 'replace and remove').to.equal(2)
+
+    const remove = buttons(el).find(one => one.hasAttribute('danger'))!
+    remove.click()
+    await el.updateComplete
+
+    expect(el.value).to.deep.equal([])
+    expect(changes).to.equal(2)
+  })
+
+  it('refuses a type outside accept and a file over the server limit, in place', async () => {
+    registerFileUploadLimits(async () => ({ maxFileSize: 20 }))
+
+    const el: any = await fixture(html`<ox-input-file quiet multiple accept="image/*"></ox-input-file>`)
+
+    drop(el, file('note.txt', 'text/plain'), file('big.png', 'image/png', 50), file('ok.png', 'image/png', 5))
+    await settle(el)
+
+    expect(el.value.map((one: File) => one.name)).to.deep.equal(['ok.png'])
+
+    const refusal = el.renderRoot.querySelector('[role="alert"]')
+    expect(refusal, 'no refusal shown').to.exist
+    expect(refusal.textContent).to.contain('note.txt')
+    expect(refusal.textContent).to.contain('big.png')
+  })
+
+  it('takes a drop on the given target and lets go of the old one', async () => {
+    const section = document.createElement('section')
+    const other = document.createElement('section')
+    document.body.append(section, other)
+
+    const el: any = await fixture(html`<ox-input-file quiet .dropTarget=${section}></ox-input-file>`)
+
+    drop(section, file('a.pdf', 'application/pdf'))
+    await settle(el)
+    expect(el.value.map((one: File) => one.name)).to.deep.equal(['a.pdf'])
+
+    el.dropTarget = other
+    await el.updateComplete
+
+    drop(section, file('b.pdf', 'application/pdf'))
+    await settle(el)
+    expect(el.value.map((one: File) => one.name), 'the old target still takes drops').to.deep.equal(['a.pdf'])
+
+    section.dispatchEvent(new DragEvent('dragenter', { bubbles: true }))
+    expect(section.classList.contains('candrop'), 'the old target still lights up').to.equal(false)
+
+    drop(other, file('c.pdf', 'application/pdf'))
+    await settle(el)
+    expect(el.value.map((one: File) => one.name)).to.deep.equal(['c.pdf'])
+
+    section.remove()
+    other.remove()
+  })
+
+  it('waits while the owner uploads and shows the percent', async () => {
+    const el: any = await fixture(html`<ox-input-file quiet .progress=${0.4}></ox-input-file>`)
+
+    expect(buttons(el).every(one => one.disabled), 'a button works mid-upload').to.equal(true)
+    expect(el.renderRoot.querySelector('[role="status"]').textContent).to.contain('40')
+
+    drop(el, file('a.pdf', 'application/pdf'))
+    await settle(el)
+    expect(el.value ?? [], 'a drop landed mid-upload').to.deep.equal([])
+  })
+
+  it('keeps the drop box when not quiet', async () => {
+    const el: any = await fixture(html`<ox-input-file></ox-input-file>`)
+
+    expect(getComputedStyle(el).borderTopStyle).to.equal('dashed')
+    expect(el.renderRoot.querySelector('label[for="input-file"]')).to.exist
+
+    drop(el, file('a.bin', ''))
+    await settle(el)
+    expect(el.renderRoot.querySelectorAll('li').length).to.equal(1)
+  })
+})

package/translations/en.json

@@ -1,4 +1,5 @@
 {
+  "label.attach file": "attach",
   "label.available-variables": "available variables",
   "label.daily": "daily",
   "label.day-of-month": "day of month",
@@ -20,16 +21,20 @@
   "label.operators": "operators",
   "label.privilege": "privilege",
   "label.protected-request-ip": "safe request IP",
+  "label.remove file": "remove",
+  "label.replace file": "replace",
   "label.search": "search",
   "label.second": "second",
   "label.second by second": "second by second",
   "label.seconds": "seconds",
+  "label.select files": "select files",
   "label.superuser": "superuser",
   "label.weekly": "weekly",
   "label.yearly": "yearly",
   "text.10 am on every payday": "10 am on every payday",
   "text.allowed values": "allowed values",
   "text.any value": "any value",
+  "text.drop files here": "drop files here",
   "text.every 12 hours": "every 12 hours",
   "text.every 15 minutes": "every 15 minutes",
   "text.every 15 seconds": "every 15 seconds",
@@ -46,6 +51,9 @@
   "text.every second": "every second",
   "text.every sunday": "every sunday",
   "text.every weekday": "every weekday",
+  "text.file refused for count": "{name}: {limit} files at most",
+  "text.file refused for size": "{name}: over {limit}",
+  "text.file refused for type": "{name}: not a type taken here",
   "text.input-secret-hide": "hide",
   "text.input-secret-placeholder": "enter secret information",
   "text.input-secret-show": "show",
@@ -54,5 +62,6 @@
   "text.step values": "step values",
   "text.the first day of every month": "the first day of every month",
   "text.the first day of every year": "the first day of every year",
+  "text.uploading file": "uploading {percent}%",
   "text.value list separator": "value list separator"
 }

package/translations/es.json

@@ -1,4 +1,5 @@
 {
+  "label.attach file": "adjuntar",
   "label.available-variables": "variables disponibles",
   "label.daily": "diario",
   "label.day-of-month": "día del mes",
@@ -20,16 +21,20 @@
   "label.operators": "operadores",
   "label.privilege": "privilegio",
   "label.protected-request-ip": "IP de solicitud segura",
+  "label.remove file": "quitar",
+  "label.replace file": "reemplazar",
   "label.search": "buscar",
   "label.second": "segundo",
   "label.second by second": "segundo a segundo",
   "label.seconds": "segundos",
+  "label.select files": "seleccionar archivos",
   "label.superuser": "superusuario",
   "label.weekly": "semanal",
   "label.yearly": "anual",
   "text.10 am on every payday": "a las 10:00 cada día de pago",
   "text.allowed values": "valores permitidos",
   "text.any value": "cualquier valor",
+  "text.drop files here": "suelte los archivos aquí",
   "text.every 12 hours": "cada 12 horas",
   "text.every 15 minutes": "cada 15 minutos",
   "text.every 15 seconds": "cada 15 segundos",
@@ -46,6 +51,9 @@
   "text.every second": "cada segundo",
   "text.every sunday": "cada domingo",
   "text.every weekday": "cada día laborable",
+  "text.file refused for count": "{name}: {limit} archivos como máximo",
+  "text.file refused for size": "{name}: supera {limit}",
+  "text.file refused for type": "{name}: tipo no admitido",
   "text.input-secret-hide": "ocultar",
   "text.input-secret-placeholder": "introduzca la información secreta",
   "text.input-secret-show": "mostrar",
@@ -54,5 +62,6 @@
   "text.step values": "valores de incremento",
   "text.the first day of every month": "el primer día de cada mes",
   "text.the first day of every year": "el primer día de cada año",
+  "text.uploading file": "subiendo {percent}%",
   "text.value list separator": "separador de lista de valores"
 }

package/translations/ja.json

@@ -1,4 +1,5 @@
 {
+  "label.attach file": "添付",
   "label.available-variables": "利用可能な変数",
   "label.daily": "毎日",
   "label.day-of-month": "日付",
@@ -19,15 +20,19 @@
   "label.operators": "演算子",
   "label.privilege": "権限",
   "label.protected-request-ip": "安全なリクエスト IP",
+  "label.remove file": "外す",
+  "label.replace file": "差し替え",
   "label.search": "検索キーワード",
   "label.second": "秒",
   "label.seconds": "秒",
+  "label.select files": "ファイル選択",
   "label.superuser": "スーパーユーザー",
   "label.weekly": "週間",
   "label.yearly": "年間",
   "text.10 am on every payday": "給料日の毎朝10時",
   "text.allowed values": "許可された値",
   "text.any value": "任意の値",
+  "text.drop files here": "ここにファイルをドロップ",
   "text.every 12 hours": "12時間毎",
   "text.every 15 minutes": "15分毎",
   "text.every 15 seconds": "15秒毎",
@@ -44,6 +49,9 @@
   "text.every second": "毎秒",
   "text.every sunday": "毎週日曜日",
   "text.every weekday": "平日毎日",
+  "text.file refused for count": "{name}: {limit}件まで",
+  "text.file refused for size": "{name}: {limit} 超過",
+  "text.file refused for type": "{name}: 受け付けない形式",
   "text.input-secret-hide": "非表示",
   "text.input-secret-placeholder": "機密情報を入力",
   "text.input-secret-show": "表示",
@@ -52,5 +60,6 @@
   "text.step values": "ステップ値",
   "text.the first day of every month": "毎月1日",
   "text.the first day of every year": "毎年1月1日",
+  "text.uploading file": "アップロード中 {percent}%",
   "text.value list separator": "値リスト区切り"
 }

package/translations/ko.json

@@ -1,4 +1,5 @@
 {
+  "label.attach file": "첨부",
   "label.available-variables": "사용 가능한 변수",
   "label.daily": "일간",
   "label.day-of-month": "날짜",
@@ -19,15 +20,19 @@
   "label.operators": "연산자",
   "label.privilege": "권한",
   "label.protected-request-ip": "안전한 요청 IP",
+  "label.remove file": "빼기",
+  "label.replace file": "바꾸기",
   "label.search": "검색어",
   "label.second": "초",
   "label.seconds": "초",
+  "label.select files": "파일 선택",
   "label.superuser": "수퍼유저",
   "label.weekly": "주간",
   "label.yearly": "연간",
   "text.10 am on every payday": "월급날 오전 10시마다",
   "text.allowed values": "허용된 값",
   "text.any value": "아무값",
+  "text.drop files here": "파일을 여기에 끌어 놓기",
   "text.every 12 hours": "매 12시간마다",
   "text.every 15 minutes": "매 15분마다",
   "text.every 15 seconds": "매 15초마다",
@@ -44,6 +49,9 @@
   "text.every second": "매초",
   "text.every sunday": "매주 일요일마다",
   "text.every weekday": "평일마다",
+  "text.file refused for count": "{name}: {limit}개까지",
+  "text.file refused for size": "{name}: {limit} 초과",
+  "text.file refused for type": "{name}: 받지 않는 형식",
   "text.input-secret-hide": "숨기기",
   "text.input-secret-placeholder": "보안 정보 입력",
   "text.input-secret-show": "보기",
@@ -52,5 +60,6 @@
   "text.step values": "단계 값",
   "text.the first day of every month": "매월 1일마다",
   "text.the first day of every year": "매년 1월 1일마다",
+  "text.uploading file": "올리는 중 {percent}%",
   "text.value list separator": "값 구분자"
 }

package/translations/ms.json

@@ -1,4 +1,5 @@
 {
+  "label.attach file": "lampirkan",
   "label.available-variables": "variabel yang tersedia",
   "label.daily": "harian",
   "label.day-of-month": "tarikh",
@@ -19,15 +20,19 @@
   "label.operators": "operator",
   "label.privilege": "keistimewaan",
   "label.protected-request-ip": "IP permintaan yang selamat",
+  "label.remove file": "buang",
+  "label.replace file": "ganti",
   "label.search": "carian",
   "label.second": "saat",
   "label.seconds": "saat",
+  "label.select files": "pilih fail",
   "label.superuser": "pengguna super",
   "label.weekly": "mingguan",
   "label.yearly": "tahunan",
   "text.10 am on every payday": "pukul 10 pagi setiap hari gaji",
   "text.allowed values": "nilai yang dibenarkan",
   "text.any value": "apa-apa nilai",
+  "text.drop files here": "lepaskan fail di sini",
   "text.every 12 hours": "setiap 12 jam",
   "text.every 15 minutes": "setiap 15 minit",
   "text.every 15 seconds": "setiap 15 saat",
@@ -44,6 +49,9 @@
   "text.every second": "setiap saat",
   "text.every sunday": "setiap hari Ahad",
   "text.every weekday": "setiap hari minggu",
+  "text.file refused for count": "{name}: maksimum {limit} fail",
+  "text.file refused for size": "{name}: melebihi {limit}",
+  "text.file refused for type": "{name}: jenis tidak diterima",
   "text.input-secret-hide": "Sembunyi",
   "text.input-secret-placeholder": "Masukkan maklumat rahsia",
   "text.input-secret-show": "Tunjuk",
@@ -52,5 +60,6 @@
   "text.step values": "nilai langkah",
   "text.the first day of every month": "hari pertama setiap bulan",
   "text.the first day of every year": "hari pertama setiap tahun",
+  "text.uploading file": "memuat naik {percent}%",
   "text.value list separator": "pemisah senarai nilai"
 }

package/translations/zh.json

@@ -1,4 +1,5 @@
 {
+  "label.attach file": "附件",
   "label.available-variables": "可用变量",
   "label.daily": "每日",
   "label.day-of-month": "日期",
@@ -19,15 +20,19 @@
   "label.operators": "运算符",
   "label.privilege": "权限",
   "label.protected-request-ip": "安全请求 IP",
+  "label.remove file": "移除",
+  "label.replace file": "替换",
   "label.search": "搜索关键词",
   "label.second": "秒",
   "label.seconds": "秒",
+  "label.select files": "选择文件",
   "label.superuser": "超级用户",
   "label.weekly": "每周",
   "label.yearly": "每年",
   "text.10 am on every payday": "发薪日每天上午10点",
   "text.allowed values": "允许的值",
   "text.any value": "任何值",
+  "text.drop files here": "将文件拖放到此处",
   "text.every 12 hours": "每12小时",
   "text.every 15 minutes": "每15分钟",
   "text.every 15 seconds": "每15秒",
@@ -44,6 +49,9 @@
   "text.every second": "每秒",
   "text.every sunday": "每个星期天",
   "text.every weekday": "每个工作日",
+  "text.file refused for count": "{name}: 最多 {limit} 个",
+  "text.file refused for size": "{name}: 超过 {limit}",
+  "text.file refused for type": "{name}: 不接受的格式",
   "text.input-secret-hide": "隐藏",
   "text.input-secret-placeholder": "输入机密信息",
   "text.input-secret-show": "显示",
@@ -52,5 +60,6 @@
   "text.step values": "步进值",
   "text.the first day of every month": "每月第一天",
   "text.the first day of every year": "每年1月1日",
+  "text.uploading file": "上传中 {percent}%",
   "text.value list separator": "值列表分隔符"
 }