@operato/input 10.29.62 → 10.29.67

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.62",
+  "version": "10.29.67",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -257,9 +257,9 @@
     "@types/codemirror": "^5.60.5",
     "@undecaf/zbar-wasm": "^0.11.0",
     "codemirror": "^6.0.1",
+    "json5": "^2.2.3",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "ses": "^1.5.0",
     "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
@@ -295,5 +295,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "d60b1d27a42a15e5ab1828c5e63803e4db81e911"
+  "gitHead": "cd6c3fd780bbfd658cdf48086fa4bfcf7f745883"
 }

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

@@ -0,0 +1,58 @@
+import { html } from 'lit'
+import { fixture, expect } from '@open-wc/testing'
+
+import '../src/ox-input-data.js'
+import { OxInputData } from '../src/ox-input-data.js'
+
+/**
+ * ox-input-data 의 object 해석 계약.
+ *
+ * object 로 고른 글은 JSON5 데이터로 읽는다 — 코드로 실행하지 않는다.
+ * 따옴표 없는 키·작은따옴표·끝 쉼표·주석은 받고, 식은 계산하지 않아 글 그대로 남는다.
+ */
+
+async function makeInput() {
+  return (await fixture(html`<ox-input-data></ox-input-data>`)) as OxInputData
+}
+
+describe('ox-input-data — object 는 데이터로 읽는다', () => {
+  it('JSON5 표기를 객체로 읽는다', async () => {
+    const el = await makeInput()
+
+    el._setDataTypeAndValue('object', `{ a: 1, 'b': [1, 2,], /* note */ c: { d: "x" }, }`)
+
+    expect(el.value).to.deep.equal({ a: 1, b: [1, 2], c: { d: 'x' } })
+  })
+
+  it('JSON 으로 저장된 값은 그대로 읽는다', async () => {
+    const el = await makeInput()
+    const saved = JSON.stringify({ a: 1, b: [true, null], c: 'x' }, null, 1)
+
+    el._setDataTypeAndValue('object', saved)
+
+    expect(el.value).to.deep.equal({ a: 1, b: [true, null], c: 'x' })
+  })
+
+  it('식은 실행하지 않는다 — 글이 그대로 남는다', async () => {
+    const el = await makeInput()
+    const text = `{ a: (globalThis.__oxInputDataRan = 1) }`
+
+    el._setDataTypeAndValue('object', text)
+
+    expect((globalThis as any).__oxInputDataRan).to.equal(undefined)
+    expect(el.value).to.equal(text)
+  })
+
+  it('string 값을 object 로 바꾸면 그 글을 읽는다', async () => {
+    const el = await makeInput()
+    el.value = `{ n: 2 }`
+
+    el._setDataType('object')
+
+    expect(el.value).to.deep.equal({ n: 2 })
+  })
+
+  it('불러도 전역에 Compartment 를 심지 않는다', () => {
+    expect((globalThis as any).Compartment).to.equal(undefined)
+  })
+})

package/test/ox-input-select-buttons.test.ts

@@ -48,4 +48,69 @@ describe('ox-input-select-buttons', () => {
 
     chips(el).forEach(chip => expect(getComputedStyle(chip).textTransform).to.equal('none'))
   })
+
+  /*
+   * A chip may carry how many rows it stands for — the stages of a list with the number in each. The number shows
+   * after the name whether the chip is pressed or not, and a chip without one shows its name alone as before.
+   */
+  it('shows each chip\'s count after its name, pressed or not', async () => {
+    const el = await fixture(html`
+      <ox-input-select-buttons
+        multiple
+        .value=${['lead']}
+        .options=${[
+          { display: 'Lead', value: 'lead', count: 3 },
+          { display: 'Won', value: 'won', count: 0 },
+          { display: 'Plain', value: 'plain' }
+        ]}
+      ></ox-input-select-buttons>
+    `)
+    const [lead, won, plain] = chips(el) as any[]
+
+    expect(lead.selected).to.equal(true)
+    expect(won.selected).to.equal(false)
+    expect(lead.querySelector('.count')?.textContent).to.equal('3')
+    expect(won.querySelector('.count')?.textContent).to.equal('0')
+    expect(lead.textContent.trim()).to.equal('Lead3')
+    expect(plain.querySelector('.count')).to.equal(null)
+    expect(plain.label).to.equal('Plain')
+  })
+
+  it('toggles a counted chip like any other, keeping the rest pressed', async () => {
+    const el = (await fixture(html`
+      <ox-input-select-buttons
+        multiple
+        .value=${['lead', 'won']}
+        .options=${[
+          { display: 'Lead', value: 'lead', count: 3 },
+          { display: 'Won', value: 'won', count: 1 }
+        ]}
+      ></ox-input-select-buttons>
+    `)) as any
+    chips(el)[1].click()
+    expect(el.value).to.deep.equal(['lead'])
+    chips(el)[1].click()
+    expect(el.value).to.deep.equal(['lead', 'won'])
+  })
+
+  /* A pressed chip is told by its fill, not a checkmark: it keeps its width, so the row does not shift as chips toggle. */
+  it('marks a pressed chip without a checkmark, at the same width as when not pressed', async () => {
+    const el = await fixture(html`
+      <ox-input-select-buttons
+        multiple
+        .value=${['a']}
+        .options=${[
+          { display: 'Same', value: 'a', count: 12 },
+          { display: 'Same', value: 'b', count: 12 }
+        ]}
+      ></ox-input-select-buttons>
+    `)
+    const [pressed, released] = chips(el) as any[]
+    await pressed.updateComplete
+
+    expect(pressed.selected).to.equal(true)
+    const check = pressed.shadowRoot.querySelector('svg.checkmark')
+    expect(!check || check.getBoundingClientRect().width === 0).to.equal(true)
+    expect(pressed.getBoundingClientRect().width).to.equal(released.getBoundingClientRect().width)
+  })
 })