@operato/input 0.2.35 → 0.2.42

package/src/ox-input-barcode.ts

@@ -0,0 +1,203 @@
+import '@operato/popup'
+
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { OxPopup } from '@operato/popup'
+import { BrowserMultiFormatReader } from '@zxing/library'
+
+import { OxFormField } from './ox-formfield'
+
+const barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`
+
+@customElement('ox-input-barcode')
+export class OxInputBarcode extends OxFormField {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        align-items: center;
+        border: none;
+        overflow: hidden;
+        background-color: #fff;
+
+        padding: var(--custom-input-barcode-field-padding) !important;
+      }
+
+      * {
+        align-self: stretch;
+      }
+
+      *:focus {
+        outline: none;
+      }
+
+      input {
+        flex: 1 !important;
+        border: none;
+        font: var(--custom-input-barcode-field-font);
+        width: 10px;
+        flex-grow: 1;
+      }
+
+      #scan-button {
+        display: block;
+        width: 30px;
+        height: 100%;
+        min-height: 24px;
+        border: none;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: var(--barcodescan-input-button-icon);
+      }
+
+      #scan-button[hidden] {
+        display: none;
+      }
+
+      ox-popup {
+        position: fixed;
+
+        width: 80vw;
+        height: 80vh;
+        transform: translate(10%, 10%);
+      }
+
+      video {
+        width: 100%;
+        height: 100%;
+      }
+
+      @media screen and (max-width: 460px) {
+        ox-popup {
+          position: fixed;
+          left: 0;
+          top: 0;
+          width: 100vw;
+          height: 100vh;
+          transform: translate(0%, 0%);
+        }
+      }
+    `
+  ]
+
+  @property({ type: String, attribute: true }) name?: string
+  @property({ type: Boolean }) scannable?: boolean
+  @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean
+  @property({ type: String }) value?: string
+
+  @state() stream?: MediaStream
+  @state() reader?: BrowserMultiFormatReader
+
+  @query('input') input!: HTMLInputElement
+  @query('ox-popup') popup!: OxPopup
+  @query('video') video!: HTMLVideoElement
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.scannable = false
+
+    if (navigator.mediaDevices) {
+      ;(async () => {
+        try {
+          var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
+          if (stream) {
+            stream.getTracks().forEach(track => track.stop())
+            this.scannable = true
+          }
+        } catch (e) {
+          console.warn('this device not support camera for barcode scan', e)
+        }
+      })()
+    }
+  }
+
+  disconnectedCallback() {
+    this.stopScan()
+  }
+
+  render() {
+    this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)
+
+    return html`
+      <input type="text" .value=${this.value || ''} maxlength="50" @change=${(e: Event) => this.onChange(e)} />
+      <button
+        ?hidden=${!this.scannable}
+        id="scan-button"
+        @click=${(e: MouseEvent) => {
+          this.scan(e)
+        }}
+      ></button>
+
+      <ox-popup
+        @focusout=${() => {
+          this.stopScan()
+        }}
+      >
+        <video></video>
+      </ox-popup>
+    `
+  }
+
+  onChange(e: Event) {
+    this.value = (e.target as HTMLInputElement)?.value
+    //@ts-ignore
+    this.dispatchEvent(new e.constructor(e.type, e))
+  }
+
+  async scan(e: MouseEvent) {
+    try {
+      this.popup.open({})
+
+      /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */
+      await this.updateComplete
+
+      var constraints = { video: { facingMode: 'environment' } } /* backside camera first */
+      this.stream = await navigator.mediaDevices.getUserMedia(constraints)
+
+      this.reader = new BrowserMultiFormatReader()
+      if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {
+        var result = await this.reader.decodeOnceFromStream(this.stream, this.video)
+        var input = this.input
+        input.focus()
+        input.value = String(result)
+
+        if (!this.withoutEnter) {
+          input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }))
+          input.dispatchEvent(
+            new CustomEvent('change', {
+              bubbles: true,
+              composed: true,
+              detail: String(result)
+            })
+          )
+        }
+      } else {
+        /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */
+        this.stopScan()
+      }
+    } catch (err) {
+      /*
+       * 1. stream device 문제로 예외 발생한 경우.
+       * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.
+       */
+      console.warn(err)
+    } finally {
+      this.popup.close()
+
+      this.stopScan()
+    }
+  }
+
+  stopScan() {
+    this.video.pause()
+
+    this.stream && this.stream.getTracks().forEach(track => track.stop())
+    this.reader && this.reader.reset()
+
+    delete this.stream
+    delete this.reader
+  }
+}

package/src/ox-input-stack.ts

@@ -2,11 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { css, html, LitElement } from 'lit'
+import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-@customElement('ox-stack')
-export default class OxStack extends LitElement {
+import { OxFormField } from './ox-formfield'
+
+@customElement('ox-input-stack')
+export default class OxInputStack extends OxFormField {
   static styles = [
     css`
       :host {
@@ -43,12 +45,12 @@ export default class OxStack extends LitElement {
   /**
    * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
    */
-  @property({ type: Array }) stack: { name: string }[] = []
+  @property({ type: Array }) stack: { name: string; active?: boolean }[] = []
 
   /**
    * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
    */
-  @property({ type: Number }) activeIndex: number = 0
+  // @property({ type: Number }) activeIndex: number = 0
 
   render() {
     const stack = [...this.stack].reverse()
@@ -59,11 +61,7 @@ export default class OxStack extends LitElement {
 
       ${stack.map(
         (item, index) => html`
-          <div
-            ?active=${length - index - 1 == this.activeIndex}
-            @click=${(e: Event) => this._onClickToActive(e)}
-            idx=${length - index - 1}
-          >
+          <div floor ?active=${item.active} @click=${(e: Event) => this._onClickToActive(e)} idx=${length - index - 1}>
             ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>
           </div>
         `
@@ -71,39 +69,66 @@ export default class OxStack extends LitElement {
     `
   }
 
+  _notifyChange() {
+    this.value = this.stack
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.value,
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
   _onClickAddFloor(e: Event) {
     this.stack.push({ name: String(this.stack.length + 1) })
     this.requestUpdate()
+
+    this._notifyChange()
   }
 
   _onClickToActive(e: Event) {
-    const div = e.target as HTMLElement
-    if (div.tagName != 'DIV') {
+    const floor = (e.target as HTMLElement).closest('[floor]')
+
+    if (!floor) {
       return
     }
 
-    this.activeIndex = Number(div.getAttribute('idx'))
+    e.stopPropagation()
+
+    const activeIndex = Number(floor.getAttribute('idx'))
+    this.stack = this.stack.map((floor, index) => {
+      return activeIndex === index
+        ? {
+            name: floor.name,
+            active: true
+          }
+        : { name: floor.name }
+    })
+
+    this._notifyChange()
   }
 
   _onClickRemoveFloor(e: Event) {
-    const div = (e.target as HTMLElement).parentElement
+    const floor = (e.target as HTMLElement).closest('[floor]')
 
-    if (div?.tagName != 'DIV') {
+    if (!floor) {
       return
     }
 
-    const idx = Number(div.getAttribute('idx'))
+    e.stopPropagation()
 
-    this.stack.splice(idx, 1)
+    const idx = Number(floor.getAttribute('idx'))
 
-    if (this.activeIndex == idx) {
-      this.activeIndex = 0
-    } else if (this.activeIndex >= idx) {
-      this.activeIndex--
-    } else if (this.activeIndex >= this.stack.length) {
-      this.activeIndex = 0
-    }
+    this.stack.splice(idx, 1)
 
     this.requestUpdate()
+
+    this._notifyChange()
+  }
+
+  protected appendFormData({ formData }: FormDataEvent): void {
+    this.name && formData.append(this.name, JSON.stringify(this.value))
   }
 }

package/src/ox-select.ts

@@ -5,18 +5,20 @@
 import '@material/mwc-icon'
 import '@operato/popup'
 
-import { LitElement, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 
-import { PopupList } from '@operato/popup'
-import { render } from 'lit-html'
+import { OxPopupList } from '@operato/popup'
+
+import { OxFormField } from './ox-formfield'
 
 @customElement('ox-select')
-export class Select extends LitElement {
+export class Select extends OxFormField {
   static styles = [
     css`
       :host {
         display: block;
+        position: relative;
       }
 
       div {
@@ -29,6 +31,9 @@ export class Select extends LitElement {
 
       span {
         flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       mwc-icon {
@@ -47,36 +52,61 @@ export class Select extends LitElement {
   ]
 
   @property({ type: String }) name: string = ''
-  @property({ type: String }) label: string = ''
+  @property({ type: String }) placeholder: string = ''
 
   render() {
+    const label = (this.value instanceof Array ? this.value.join(', ') : this.value) || this.placeholder || ''
+
     return html`
       <div @click=${this.expand}>
-        <span>${this.label}</span>
+        <span>${label}</span>
         <mwc-icon>expand_more</mwc-icon>
       </div>
+
       <slot></slot>
     `
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.setAttribute('tabindex', '0')
+
+    this.addEventListener('select', (e: Event) => {
+      this.value = (e as CustomEvent).detail
+
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          composed: true,
+          detail: this.value
+        })
+      )
+    })
+
+    this.addEventListener('keydown', (e: KeyboardEvent) => {
+      e.preventDefault()
+
+      if (e.key === ' ' || e.key == 'Spacebar' || e.key == 'ArrowDown') {
+        this.expand()
+      }
+    })
+  }
+
   expand() {
-    const popupList = this.querySelector('ox-popup-list') as PopupList
+    const popupList = this.querySelector('ox-popup-list') as OxPopupList
 
     if (popupList) {
       popupList.style.width = `${this.offsetWidth}px`
 
       popupList.open({
-        top: this.offsetTop + this.offsetHeight,
-        left: this.offsetLeft
+        top: this.offsetHeight,
+        left: 0
       })
     }
   }
 
-  onKeyDown(e: KeyboardEvent) {
-    e.preventDefault()
-
-    if (e.keyCode == 32 || e.code == 'Space') {
-      this.expand()
-    }
+  protected appendFormData({ formData }: FormDataEvent): void {
+    this.name && formData.append(this.name, JSON.stringify(this.value))
   }
 }

package/test/property-angle.test.ts

@@ -1,22 +1,21 @@
-import { html } from 'lit'
-
 import { expect, fixture } from '@open-wc/testing'
 
 import { OxInputAngle } from '../src/ox-input-angle'
+import { html } from 'lit'
 
 describe('OxInputAngle', () => {
   it('has a default title "Hey there" and angle 5', async () => {
     const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)
 
     expect(el.title).to.equal('Hey there')
-    expect(el.radian).to.equal(5)
+    expect(el.value).to.equal(5)
   })
 
   it('increases the angle on button click', async () => {
     const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)
     el.shadowRoot!.querySelector('button')!.click()
 
-    expect(el.radian).to.equal(6)
+    expect(el.value).to.equal(6)
   })
 
   it('can override the title via attribute', async () => {