@things-factory/barcode-ui 3.6.55 → 3.7.6

package/client/components/barcode-input.js

@@ -1,6 +1,7 @@
-import { LitElement, html, css } from 'lit-element'
 import './barcode-tag'
 
+import { css, html, LitElement } from 'lit-element'
+
 export class BarcodeInput extends LitElement {
   static get properties() {
     return {
@@ -41,7 +42,7 @@ export class BarcodeInput extends LitElement {
 
   render() {
     return html`
-      <input type="text" @change=${this.onchange.bind(this)} />
+      <input type="text" @change=${this.onchange.bind(this)} .value=${this.value} />
       <barcode-tag
         .bcid=${this.bcid}
         .value=${this.value}
@@ -54,6 +55,7 @@ export class BarcodeInput extends LitElement {
 
   onchange(e) {
     this.value = e.target.value
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
   }
 }
 

package/client/components/barcode-scanable-input.js

@@ -108,7 +108,7 @@ export class BarcodeScanableInput extends LitElement {
     this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)
 
     return html`
-      <input type="text" .value=${this.value || ''} maxlength="50" />
+      <input type="text" .value=${this.value || ''} maxlength="50" @change=${this.onchange.bind(this)} />
       <button
         ?hidden=${!this.scannable}
         id="scan-button"
@@ -119,6 +119,17 @@ export class BarcodeScanableInput extends LitElement {
     `
   }
 
+  onchange(e) {
+    this.value = e.target.value
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: this
+      })
+    )
+  }
+
   get input() {
     return this.shadowRoot.querySelector('input')
   }
@@ -147,10 +158,20 @@ export class BarcodeScanableInput extends LitElement {
       if (!popup.closed && this.stream) {
         var result = await this.reader.decodeOnceFromStream(this.stream, template.video)
 
-        this.input.value = result
+        // this.input.value = result
+        this.value = result.text || ''
+
         if (!this.withoutEnter) {
           this.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }))
         }
+
+        this.dispatchEvent(
+          new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this
+          })
+        )
       } else {
         /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */
         this.stopScan()

package/client/components/barcode-tag.js

@@ -1,12 +1,12 @@
-import { LitElement, html, css } from 'lit-element'
 import bwipjs from '!bwip-js'
+import { css, html, LitElement } from 'lit-element'
 
 export class BarcodeTag extends LitElement {
   static get properties() {
     return {
       bcid: String,
       bcWidth: Number,
-      bcheight: Number,
+      bcHeight: Number,
       bcScale: Number,
       value: String,
       validity: Boolean,

package/client/index.js

@@ -1,4 +1,3 @@
 export * from './components/barcode-tag'
 export * from './components/barcode-input'
-export * from './components/barcodescan-input'
 export * from './components/barcode-scanable-input'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/barcode-ui",
-  "version": "3.6.55",
+  "version": "3.7.6",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,8 +24,8 @@
     "migration:create": "node ../../node_modules/typeorm/cli.js migration:create -d ./server/migrations"
   },
   "dependencies": {
-    "@things-factory/layout-base": "^3.6.55",
+    "@things-factory/layout-base": "^3.7.5",
     "bwip-js": "^2.0.11"
   },
-  "gitHead": "a835d6fbfc58a2bef6b1ecb96338cd572a77bdc0"
+  "gitHead": "d9d72c07fc3b01af2ede46808ec0aced3241ed51"
 }

package/things-factory.config.js

@@ -1,12 +1,5 @@
 import bootstrap from './client/bootstrap'
-import route from './client/route'
+
 export default {
-  bootstrap,
-  route,
-  routes: [
-    {
-      tagname: 'barcode-ui-test-page',
-      page: 'barcode-ui-test'
-    }
-  ]
+  bootstrap
 }

package/client/components/barcodescan-input.js

@@ -1,124 +0,0 @@
-import { LitElement, html, css } from 'lit-element'
-import barcodeIcon from '../../assets/images/barcode.png'
-
-export class BarcodescanInput extends LitElement {
-  static get properties() {
-    return {
-      name: {
-        attribute: true
-      },
-      value: String
-    }
-  }
-
-  static get styles() {
-    return [
-      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 {
-          width: 30px;
-          height: 24px;
-          border: none;
-          background-repeat: no-repeat;
-          background-position: center;
-          background-image: var(--barcodescan-input-button-icon);
-        }
-      `
-    ]
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this._onBarcodeRespond = e => {
-      var { value, responder } = e.detail
-
-      if (responder != this.name) return
-      this.value = value
-      this.requestUpdate()
-    }
-
-    this._onFocusIn = e => {
-      window.addEventListener('barcode-respond', this._onBarcodeRespond)
-    }
-
-    this._onFocusOut = e => {
-      window.removeEventListener('barcode-respond', this._onBarcodeRespond)
-    }
-
-    this.renderRoot.addEventListener('focusin', this._onFocusIn)
-    this.renderRoot.addEventListener('focusout', this._onFocusOut)
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    if (this._onBarcodeRespond) {
-      window.removeEventListener('barcode-respond', this._onBarcodeRespond)
-      this._onBarcodeRespond = null
-    }
-    if (this._onFocusIn) {
-      this.renderRoot.removeEventListener('focusin', this._onFocusIn)
-      this._onFocusIn = null
-    }
-    if (this._onFocusOut) {
-      this.renderRoot.removeEventListener('focusout', this._onFocusOut)
-      this._onFocusOut = null
-    }
-  }
-
-  render() {
-    this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)
-
-    return html`
-      <input type="text" .value=${this.value || ''} />
-      <button
-        id="scan-button"
-        @click=${e => {
-          this.requestBarcodeScan(e)
-        }}
-      ></button>
-    `
-  }
-
-  requestBarcodeScan(e) {
-    if (!cordova_iab) throw 'no-app'
-
-    cordova_iab.postMessage(
-      JSON.stringify({
-        type: 'scan-barcode',
-        detail: {
-          requester: this.name,
-          barcodeTypes: []
-        }
-      })
-    )
-  }
-}
-
-customElements.define('barcodescan-input', BarcodescanInput)

package/client/pages/barcode-ui-test-page.js

@@ -1,65 +0,0 @@
-import { html, css } from 'lit-element'
-import gql from 'graphql-tag'
-
-import { connect } from 'pwa-helpers/connect-mixin.js'
-import { store, PageView, client } from '@things-factory/shell'
-import '../components/barcodescan-input'
-
-class BarcodeUiTestPage extends connect(store)(PageView) {
-  static get properties() {
-    return {}
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-
-          width: 100%; /* 전체화면보기를 위해서 필요함. */
-          height: 100%;
-
-          overflow: hidden;
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <barcodescan-input name="barcodescan-1"></barcodescan-input>
-      <barcodescan-input name="barcodescan-2"></barcodescan-input>
-      <barcodescan-input name="barcodescan-3"></barcodescan-input>
-    `
-  }
-
-  async refresh() {
-    if (!this._boardId) {
-      return
-    }
-    var response = await client.query({
-      query: gql`
-        query FetchBoardById($id: String!) {
-          board(id: $id) {
-            id
-            name
-            model
-          }
-        }
-      `,
-      variables: { id: this._boardId }
-    })
-
-    var board = response.data.board
-
-    this._board = {
-      ...board,
-      model: JSON.parse(board.model)
-    }
-
-    this.updateContext()
-  }
-}
-
-customElements.define('barcode-ui-test-page', BarcodeUiTestPage)