@operato/input 10.9.0 → 10.10.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "10.9.0",
+  "version": "10.10.0",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -69,7 +69,8 @@
     "./ox-input-video.js": "./dist/src/ox-input-video.js",
     "./ox-input-work-shift.js": "./dist/src/ox-input-work-shift.js",
     "./ox-select-floor.js": "./dist/src/ox-select-floor.js",
-    "./ox-select.js": "./dist/src/ox-select.js"
+    "./ox-select.js": "./dist/src/ox-select.js",
+    "./image-selector.js": "./dist/src/image-selector.js"
   },
   "typesVersions": {
     "*": {
@@ -216,6 +217,9 @@
       ],
       "./ox-input-table.js": [
         "./dist/src/ox-input-table.d.ts"
+      ],
+      "./image-selector.js": [
+        "./dist/src/image-selector.d.ts"
       ]
     }
   },
@@ -247,8 +251,8 @@
     "@material/web": "^2.0.0",
     "@operato/i18n": "^10.0.0",
     "@operato/pickr": "^10.0.0",
-    "@operato/popup": "^10.9.0",
-    "@operato/styles": "^10.9.0",
+    "@operato/popup": "^10.10.0",
+    "@operato/styles": "^10.10.0",
     "@operato/utils": "^10.7.0",
     "@types/codemirror": "^5.60.5",
     "@undecaf/zbar-wasm": "^0.11.0",
@@ -290,5 +294,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5282356a0fbf7601a1bd023cf65ba5dc60986337"
+  "gitHead": "15f722c8131e5a04b5b4186ac71ada9f94ef9a4f"
 }

package/test/image-selector.test.ts

@@ -0,0 +1,81 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/ox-input-background-pattern.js'
+import { registerImageSelector } from '../src/image-selector.js'
+
+/**
+ * 그림 고르는 칸의 자리.
+ *
+ * ## 왜 시험이 필요한가
+ *
+ * `@operato/input` 이 `@operato/attachment` 를 직접 부르고 있었다. 가장 아래의 부품이 위의 기능을
+ * 아는 모양이라 고리가 생겼고(input ▶ attachment ▶ data-grist ▶ input), 그 고리 때문에 이 package
+ * 는 **빌드되지 않았다**(TS5055 일곱 건, noEmitOnError).
+ *
+ * 화살표를 뒤집으면서 두 가지가 지켜져야 한다.
+ *
+ * ```
+ * 비지 않는다   등록이 없어도 칸이 있어야 한다. 등록 안 된 custom element 는 소리 없이 빈 상자다
+ * 값이 담긴다   어느 갈래가 그려지든 value-key 와 change 로 값이 같은 길을 지나야 한다
+ * ```
+ */
+describe('그림 고르는 칸은 위 layer 가 채운다', () => {
+  async function pattern(value: any = {}) {
+    const el: any = await fixture(html`<ox-input-background-pattern .value=${value}></ox-input-background-pattern>`)
+    await el.updateComplete
+    return el
+  }
+
+  it('등록이 없으면 글자 칸이다 — 빈 자리로 두지 않는다', async () => {
+    const el = await pattern({ image: 'https://example.com/a.png' })
+
+    const field = el.renderRoot.querySelector('[value-key="image"]') as HTMLInputElement
+
+    expect(field, '그림 칸이 아예 없다').to.exist
+    expect(field.tagName).to.equal('INPUT')
+    expect(field.value, '적혀 있던 주소가 칸에 실리지 않았다').to.equal('https://example.com/a.png')
+  })
+
+  it('글자 칸에 적은 주소가 값으로 담긴다', async () => {
+    const el = await pattern({})
+
+    const field = el.renderRoot.querySelector('[value-key="image"]') as HTMLInputElement
+    field.value = 'https://example.com/b.png'
+    field.dispatchEvent(new Event('change', { bubbles: true, composed: true }))
+
+    expect(el.value.image).to.equal('https://example.com/b.png')
+  })
+
+  it('그림을 가진 쪽이 자기 칸을 등록하면 그것으로 바뀐다', async () => {
+    class FakeSelector extends HTMLElement {
+      value: any
+      properties: any
+    }
+    customElements.define('test-image-selector', FakeSelector)
+
+    const el = await pattern({ image: 'https://example.com/c.png' })
+
+    /* 요소가 먼저 그려지고 등록이 나중에 와도 자리가 글자 칸으로 남아 있으면 안 된다. */
+    registerImageSelector('test-image-selector')
+    await el.updateComplete
+
+    const field = el.renderRoot.querySelector('[value-key="image"]') as any
+
+    expect(field.tagName).to.equal('TEST-IMAGE-SELECTOR')
+    expect(field.value).to.equal('https://example.com/c.png')
+    expect(field.properties).to.deep.equal({ category: 'image' })
+  })
+
+  it('등록된 칸이 올린 change 도 같은 길로 값이 담긴다', async () => {
+    registerImageSelector('test-image-selector')
+
+    const el = await pattern({})
+    const field = el.renderRoot.querySelector('[value-key="image"]') as any
+
+    field.value = 'https://example.com/d.png'
+    field.dispatchEvent(new Event('change', { bubbles: true, composed: true }))
+
+    expect(el.value.image).to.equal('https://example.com/d.png')
+  })
+})

package/translations/en.json

@@ -20,6 +20,7 @@
   "label.operators": "operators",
   "label.privilege": "privilege",
   "label.protected-request-ip": "safe request IP",
+  "label.search": "search",
   "label.second": "second",
   "label.second by second": "second by second",
   "label.seconds": "seconds",
@@ -45,13 +46,13 @@
   "text.every second": "every second",
   "text.every sunday": "every sunday",
   "text.every weekday": "every weekday",
+  "text.input-secret-hide": "hide",
+  "text.input-secret-placeholder": "enter secret information",
+  "text.input-secret-show": "show",
+  "text.input-secret-toggle": "show/hide",
   "text.range of values": "range of values",
   "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.value list separator": "value list separator",
-  "text.input-secret-placeholder": "enter secret information",
-  "text.input-secret-show": "show",
-  "text.input-secret-hide": "hide",
-  "text.input-secret-toggle": "show/hide"
+  "text.value list separator": "value list separator"
 }

package/translations/ja.json

@@ -19,6 +19,7 @@
   "label.operators": "演算子",
   "label.privilege": "権限",
   "label.protected-request-ip": "安全なリクエスト IP",
+  "label.search": "検索キーワード",
   "label.second": "秒",
   "label.seconds": "秒",
   "label.superuser": "スーパーユーザー",
@@ -43,13 +44,13 @@
   "text.every second": "毎秒",
   "text.every sunday": "毎週日曜日",
   "text.every weekday": "平日毎日",
+  "text.input-secret-hide": "非表示",
+  "text.input-secret-placeholder": "機密情報を入力",
+  "text.input-secret-show": "表示",
+  "text.input-secret-toggle": "表示/非表示",
   "text.range of values": "値の範囲",
   "text.step values": "ステップ値",
   "text.the first day of every month": "毎月1日",
   "text.the first day of every year": "毎年1月1日",
-  "text.value list separator": "値リスト区切り",
-  "text.input-secret-placeholder": "機密情報を入力",
-  "text.input-secret-show": "表示",
-  "text.input-secret-hide": "非表示",
-  "text.input-secret-toggle": "表示/非表示"
+  "text.value list separator": "値リスト区切り"
 }

package/translations/ko.json

@@ -19,6 +19,7 @@
   "label.operators": "연산자",
   "label.privilege": "권한",
   "label.protected-request-ip": "안전한 요청 IP",
+  "label.search": "검색어",
   "label.second": "초",
   "label.seconds": "초",
   "label.superuser": "수퍼유저",
@@ -43,13 +44,13 @@
   "text.every second": "매초",
   "text.every sunday": "매주 일요일마다",
   "text.every weekday": "평일마다",
+  "text.input-secret-hide": "숨기기",
+  "text.input-secret-placeholder": "보안 정보 입력",
+  "text.input-secret-show": "보기",
+  "text.input-secret-toggle": "보기/숨기기",
   "text.range of values": "값의 범위",
   "text.step values": "단계 값",
   "text.the first day of every month": "매월 1일마다",
   "text.the first day of every year": "매년 1월 1일마다",
-  "text.value list separator": "값 구분자",
-  "text.input-secret-placeholder": "보안 정보 입력",
-  "text.input-secret-show": "보기",
-  "text.input-secret-hide": "숨기기",
-  "text.input-secret-toggle": "보기/숨기기"
+  "text.value list separator": "값 구분자"
 }

package/translations/ms.json

@@ -19,6 +19,7 @@
   "label.operators": "operator",
   "label.privilege": "keistimewaan",
   "label.protected-request-ip": "IP permintaan yang selamat",
+  "label.search": "carian",
   "label.second": "saat",
   "label.seconds": "saat",
   "label.superuser": "pengguna super",
@@ -43,13 +44,13 @@
   "text.every second": "setiap saat",
   "text.every sunday": "setiap hari Ahad",
   "text.every weekday": "setiap hari minggu",
+  "text.input-secret-hide": "Sembunyi",
+  "text.input-secret-placeholder": "Masukkan maklumat rahsia",
+  "text.input-secret-show": "Tunjuk",
+  "text.input-secret-toggle": "Tunjuk/Sembunyi",
   "text.range of values": "julat nilai",
   "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.value list separator": "pemisah senarai nilai",
-  "text.input-secret-placeholder": "Masukkan maklumat rahsia",
-  "text.input-secret-show": "Tunjuk",
-  "text.input-secret-hide": "Sembunyi",
-  "text.input-secret-toggle": "Tunjuk/Sembunyi"
+  "text.value list separator": "pemisah senarai nilai"
 }

package/translations/zh.json

@@ -19,6 +19,7 @@
   "label.operators": "运算符",
   "label.privilege": "权限",
   "label.protected-request-ip": "安全请求 IP",
+  "label.search": "搜索关键词",
   "label.second": "秒",
   "label.seconds": "秒",
   "label.superuser": "超级用户",
@@ -43,13 +44,13 @@
   "text.every second": "每秒",
   "text.every sunday": "每个星期天",
   "text.every weekday": "每个工作日",
+  "text.input-secret-hide": "隐藏",
+  "text.input-secret-placeholder": "输入机密信息",
+  "text.input-secret-show": "显示",
+  "text.input-secret-toggle": "显示/隐藏",
   "text.range of values": "值的范围",
   "text.step values": "步进值",
   "text.the first day of every month": "每月第一天",
   "text.the first day of every year": "每年1月1日",
-  "text.value list separator": "值列表分隔符",
-  "text.input-secret-placeholder": "输入机密信息",
-  "text.input-secret-show": "显示",
-  "text.input-secret-hide": "隐藏",
-  "text.input-secret-toggle": "显示/隐藏"
+  "text.value list separator": "值列表分隔符"
 }