@operato/input 2.0.0-alpha.8 → 2.0.0-alpha.80

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "2.0.0-alpha.8",
+  "version": "2.0.0-alpha.80",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -46,6 +46,7 @@
     "./ox-input-search.js": "./dist/src/ox-input-search.js",
     "./ox-input-value-map.js": "./dist/src/ox-input-value-map.js",
     "./ox-input-value-ranges.js": "./dist/src/ox-input-value-ranges.js",
+    "./ox-input-i18n-label.js": "./dist/src/ox-input-i18n-label.js",
     "./ox-input-partition-keys.js": "./dist/src/ox-input-partition-keys.js",
     "./ox-input-table.js": "./dist/src/ox-input-table.js",
     "./ox-input-scene-component-id.js": "./dist/src/ox-input-scene-component-id.js",
@@ -143,6 +144,9 @@
       "./ox-input-value-ranges.js": [
         "./dist/src/ox-input-value-ranges.d.ts"
       ],
+      "./ox-input-i18n-label.js": [
+        "./dist/src/ox-input-i18n-label.d.ts"
+      ],
       "./ox-input-partition-keys.js": [
         "./dist/src/ox-input-partition-keys.d.ts"
       ],
@@ -189,39 +193,39 @@
     "@codemirror/state": "^6.3.3",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.1",
-    "@lit/localize": "^0.11.2",
-    "@material/mwc-icon": "^0.27.0",
-    "@operato/color-picker": "^2.0.0-alpha.0",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/popup": "^2.0.0-alpha.8",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.8",
+    "@lit/localize": "^0.12.1",
+    "@material/web": "^1.4.0",
+    "@operato/color-picker": "^2.0.0-alpha.57",
+    "@operato/i18n": "^2.0.0-alpha.59",
+    "@operato/popup": "^2.0.0-alpha.80",
+    "@operato/styles": "^2.0.0-alpha.80",
+    "@operato/utils": "^2.0.0-alpha.68",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
     "@types/codemirror": "^5.60.5",
     "@undecaf/zbar-wasm": "^0.10.1",
     "codemirror": "^6.0.1",
-    "lit": "^2.5.0",
+    "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@lit/localize-tools": "^0.6.3",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@lit/localize-tools": "^0.7.2",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -239,5 +243,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "9b76564615d73b9da50d13d30d43cdaa0d4a6fa6"
+  "gitHead": "9405ad5252a157db9c9680256a6cb65f764a890b"
 }

package/src/ox-input-barcode.ts

@@ -85,31 +85,6 @@ export class OxInputBarcode extends OxFormField {
       #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;
-          height: 100dvh;
-          transform: translate(0%, 0%);
-        }
-      }
     `
   ]
 
@@ -146,8 +121,9 @@ export class OxInputBarcode extends OxFormField {
   @state() stream?: MediaStream
 
   @query('input') input!: HTMLInputElement
-  @query('ox-popup') popup!: OxPopup
-  @query('video') video!: HTMLVideoElement
+
+  private popup: OxPopup | null = null
+  private video: HTMLVideoElement | null = null
 
   connectedCallback() {
     super.connectedCallback()
@@ -192,14 +168,6 @@ export class OxInputBarcode extends OxFormField {
         }}
         ?disabled=${this.disabled}
       ></button>
-
-      <ox-popup
-        @focusout=${() => {
-          this.stopScan()
-        }}
-      >
-        <video></video>
-      </ox-popup>
     `
   }
 
@@ -250,20 +218,37 @@ export class OxInputBarcode extends OxFormField {
 
   async scan(e: MouseEvent) {
     try {
-      this.popup.open({})
+      if (this.popup) {
+        this.stopScan()
+      }
 
-      /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */
-      await this.updateComplete
+      this.popup = OxPopup.open({
+        template: html`
+          <video></video>
+          <md-icon
+            style="position: fixed; right: 0; top: 0; color: red; tabindex: 0"
+            @click=${() => {
+              this.stopScan()
+            }}
+            >close</md-icon
+          >
+        `,
+        width: '100vw',
+        height: '100dvh'
+      })
+
+      this.video! = this.popup.querySelector('video') as HTMLVideoElement
 
       var constraints = { audio: false, video: { facingMode: 'environment' } } /* backside camera first */
       this.stream = await navigator.mediaDevices.getUserMedia(constraints)
+
       this.video.srcObject = this.stream
       this.video.play()
 
       this.video.onloadedmetadata = async e => {
         var canvas = new OffscreenCanvas(
-          this.video.videoWidth || this.video.width,
-          this.video.videoHeight || this.video.height
+          this.video!.videoWidth || this.video!.width,
+          this.video!.videoHeight || this.video!.height
         )
 
         var context = canvas.getContext('2d', {
@@ -276,7 +261,7 @@ export class OxInputBarcode extends OxFormField {
               return
             }
 
-            context!.drawImage(this.video, 0, 0, canvas.width, canvas.height)
+            context!.drawImage(this.video!, 0, 0, canvas.width, canvas.height)
             const imageData = context!.getImageData(0, 0, canvas.width, canvas.height)
             const symbols = await scanImageData(imageData)
             const result = symbols[0]?.decode()
@@ -317,6 +302,11 @@ export class OxInputBarcode extends OxFormField {
       this.video.srcObject = null
     }
 
+    if (this.popup) {
+      this.popup.close()
+      this.popup = null
+    }
+
     this.stream?.getTracks().forEach(track => track.stop())
   }
 }

package/src/ox-input-code.ts

@@ -5,8 +5,9 @@
 import { css, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { minimalSetup } from 'codemirror'
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
-import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
+import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
 import { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'
 import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
@@ -25,7 +26,7 @@ WEB Component for code-mirror code editor.
 
 Example:
 
-  <ox-input-code .value=${text} tab-size="4" tab-as-space="true" language="javascript">
+  <ox-input-code .value=${text} language="javascript" show-line-numbers>
   </ox-input-code>
 */
 @customElement('ox-input-code')
@@ -51,8 +52,7 @@ export class OxInputCode extends OxFormField {
    * `value`는 에디터에서 작성중인 contents이다.
    */
   @property({ type: String }) value: string = ''
-  @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2
-  @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true
+  @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false
   @property({ type: String }) language?: string = 'javascript'
 
   private _self_changing: boolean = false
@@ -88,7 +88,9 @@ export class OxInputCode extends OxFormField {
       this._editor = new EditorView({
         doc: this.value,
         extensions: [
+          minimalSetup,
           ...language,
+          ...(this.showLineNumbers ? [lineNumbers()] : []),
           bracketMatching(),
           closeBrackets(),
           history(),
@@ -129,15 +131,6 @@ export class OxInputCode extends OxFormField {
       this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
     })
 
-    // this._editor.contentDOM.addEventListener('change', async e => {
-    //   this._self_changing = true
-    //   this._changed = true
-
-    //   await this.updateComplete
-
-    //   this._self_changing = false
-    // })
-
     return this._editor
   }
 }

package/src/ox-input-container.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
 
 import { css, html, LitElement } from 'lit'
@@ -17,7 +17,7 @@ export class OxInputContainer extends LitElement {
   render() {
     return html`
       <slot> </slot>
-      <mwc-icon @click=${this.openPopupList.bind(this)}>menu</mwc-icon>
+      <md-icon @click=${this.openPopupList.bind(this)}>menu</md-icon>
 
       <ox-popup-list></ox-popup-list>
     `

package/src/ox-input-crontab.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-button'
-
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
@@ -211,14 +209,12 @@ export class OxInputCrontab extends OxFormField {
       margin: -0.25rem;
     }
 
-    mwc-button {
-      background-color: var(--secondary-color);
+    button {
       border-radius: var(--button-border-radius);
-      --mdc-theme-primary: #fff;
       margin: 0.25rem;
     }
-    mwc-button:hover,
-    mwc-button:active {
+    button:hover,
+    button:active {
       background-color: var(--primary-color);
     }
   `
@@ -399,7 +395,7 @@ export class OxInputCrontab extends OxFormField {
   }
 
   get focusableElements(): HTMLElement[] {
-    return Array.from(this.renderRoot.querySelectorAll('select, input, mwc-button'))
+    return Array.from(this.renderRoot.querySelectorAll('select, input, button'))
   }
 
   firstUpdated() {

package/src/ox-input-data.ts

@@ -4,11 +4,13 @@
 
 import './ox-input-code'
 
-import { css, html, PropertyValues } from 'lit'
+import { css, html } from 'lit'
 import { customElement } from 'lit/decorators.js'
+import { live } from 'lit/directives/live.js'
 
 import { OxFormField } from './ox-form-field.js'
 import { OxInputCode } from './ox-input-code.js'
+import { isEqual } from 'lodash-es'
 
 /**
 WEB Component for code-mirror based data editor.
@@ -36,7 +38,7 @@ export class OxInputData extends OxFormField {
         font-size: small;
       }
 
-      div[datatype] mwc-icon {
+      div[datatype] md-icon {
         margin-left: auto;
       }
 
@@ -49,38 +51,56 @@ export class OxInputData extends OxFormField {
   ]
 
   render() {
+    const valueType = typeof this.value
+
     return html`
       <div datatype>
         <input
+          id="string"
           type="radio"
           name="data-type"
           data-value="string"
-          .checked=${typeof this.value == 'string'}
+          .checked=${live(valueType == 'string')}
           @click=${() => this._setDataType('string')}
           ?disabled=${this.disabled}
-        />string
+        />
+        <label for="string">string</label>
 
         <input
+          id="number"
           type="radio"
           name="data-type"
           data-value="number"
-          .checked=${typeof this.value == 'number'}
+          .checked=${live(valueType == 'number')}
           @click=${() => this._setDataType('number')}
           ?disabled=${this.disabled}
-        />number
+        />
+        <label for="number">number</label>
 
         <input
+          id="object"
           type="radio"
           name="data-type"
           data-value="object"
-          .checked=${typeof this.value == 'object'}
+          .checked=${live(valueType == 'object')}
           @click=${() => this._setDataType('object')}
           ?disabled=${this.disabled}
-        />object
-        <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
+        />
+        <label for="object">object</label>
+
+        <md-icon @click=${() => this._clearData()} title="delete">delete_forever</md-icon>
       </div>
 
-      <ox-input-code .value=${this._getData(this.value)} language="javascript" editor ?disabled=${this.disabled}>
+      <ox-input-code
+        .value=${this._getStringData(this.value)}
+        language="text"
+        editor
+        ?disabled=${this.disabled}
+        @change=${(e: CustomEvent) => {
+          e.stopPropagation()
+          this._setDataTypeAndValue(valueType, (e.target as any).value)
+        }}
+      >
       </ox-input-code>
     `
   }
@@ -88,45 +108,75 @@ export class OxInputData extends OxFormField {
   firstUpdated() {
     this.renderRoot.addEventListener('change', e => {
       e.stopPropagation()
+
       const target = e.target as OxInputCode
       if (target.hasAttribute('editor')) {
+        if (this.value === undefined && target.value == '') {
+          return
+        }
         this.value = target.value
       }
-
-      const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')
-      this._setDataType(type)
     })
   }
 
-  udpated(changes: PropertyValues<this>) {
-    if (changes.has('value')) {
-      this.value = this._getData(this.value)
+  _setDataTypeAndValue(type: string | undefined | null, value: any) {
+    /* value must be a string */
+    try {
+      switch (type) {
+        case 'number':
+          if (!isNaN(Number(value))) {
+            value = Number(value)
+          }
+          break
+        case 'object':
+          value = eval('(' + value + ')')
+          break
+      }
+    } catch (e) {}
+
+    if (isEqual(this.value, value)) {
+      return
     }
+
+    this.value = value
+
+    this.requestUpdate()
+    this._onAfterValueChange()
   }
 
   _setDataType(type: string | undefined | null) {
-    if (typeof this.value !== type) {
-      var value = this.value
-
-      try {
-        switch (type) {
-          case 'string':
-            this.value = String(value || '')
-            break
-          case 'number':
-            if (!isNaN(value)) {
-              this.value = Number(value)
-            }
-            break
-          case 'object':
-            this.value = eval('(' + value + ')')
-            break
-        }
-      } catch (e) {
-        console.log(e)
+    if (typeof this.value == type) {
+      return
+    }
+
+    var value = this.value
+
+    try {
+      switch (type) {
+        case 'string':
+          value = this._getStringData(value)
+          break
+        case 'number':
+          if (!isNaN(value)) {
+            value = Number(value)
+          }
+          break
+        case 'object':
+          value = eval('(' + value + ')')
+          break
       }
+    } catch (e) {
+      console.log(e)
     }
 
+    if (isEqual(this.value, value)) {
+      this.requestUpdate()
+      return
+    }
+
+    this.value = value
+
+    this.requestUpdate()
     this._onAfterValueChange()
   }
 
@@ -135,11 +185,20 @@ export class OxInputData extends OxFormField {
     this._onAfterValueChange()
   }
 
-  _getData(data: any) {
-    return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)
+  _getStringData(data: any) {
+    const type = typeof data
+
+    switch (type) {
+      case 'object':
+        return JSON.stringify(data, null, 1)
+      case 'undefined':
+        return ''
+      default:
+        return String(data) || ''
+    }
   }
 
-  _onAfterValueChange() {
+  async _onAfterValueChange() {
     this.dispatchEvent(
       new CustomEvent('change', {
         bubbles: true,

package/src/ox-input-duration.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-button'
-
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
@@ -28,9 +26,14 @@ export class OxInputDuration extends OxFormField {
     }
 
     form {
-      width: 100%;
-      height: 100%;
-      justify-content: center;
+      display: flex;
+      flex-direction: row;
+
+      align-items: center;
+    }
+
+    [padding] {
+      min-width: 100px;
     }
 
     input {
@@ -65,18 +68,16 @@ export class OxInputDuration extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
       min-height: 35px;
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;
     }
+
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -100,6 +101,7 @@ export class OxInputDuration extends OxFormField {
 
     return html`
       <form @change=${this.onChange.bind(this)}>
+        <div padding></div>
         <input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" ?disabled=${this.disabled} />
         <label for="days">${i18next.t('label.days')}</label>
 
@@ -148,8 +150,9 @@ export class OxInputDuration extends OxFormField {
           }}
           ?disabled=${this.disabled}
         >
-          <mwc-icon>backspace</mwc-icon>
+          <md-icon>backspace</md-icon>
         </button>
+        <div padding></div>
       </form>
     `
   }

package/src/ox-input-file.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -32,9 +32,10 @@ export class OxInputFile extends OxFormField {
         font: var(--file-uploader-font) !important;
         color: var(--file-uploader-color);
       }
-      :host > mwc-icon {
+
+      :host > md-icon {
         color: var(--file-uploader-icon-color);
-        --mdc-icon-size: var(--file-uploader-icon-size, 36px);
+        --md-icon-size: var(--file-uploader-icon-size, 36px);
       }
 
       :host(.candrop) {
@@ -75,14 +76,14 @@ export class OxInputFile extends OxFormField {
         border-bottom: var(--file-uploader-li-border-bottom);
         font: normal 14px var(--theme-font);
       }
-      li mwc-icon {
+      li md-icon {
         float: right;
         cursor: pointer;
         margin: var(--file-uploader-li-icon-margin);
         font-size: 1em;
       }
-      li mwc-icon:hover,
-      li mwc-icon:active {
+      li md-icon:hover,
+      li md-icon:active {
         color: var(--file-uploader-li-icon-focus-color);
       }
     `
@@ -104,7 +105,7 @@ export class OxInputFile extends OxFormField {
     var files: File[] = this.value || []
 
     return html`
-      <mwc-icon>${this.icon || 'upload'}</mwc-icon>
+      <md-icon>${this.icon || 'upload'}</md-icon>
 
       <span>${this.description || 'drop files here!'}</span>
 
@@ -127,7 +128,7 @@ export class OxInputFile extends OxFormField {
               file => html`
                 <li>
                   - ${file.name}
-                  <mwc-icon
+                  <md-icon
                     @click=${(e: Event) => {
                       if (this.disabled) {
                         return
@@ -136,7 +137,7 @@ export class OxInputFile extends OxFormField {
                       this.value = [...files]
                       this._notifyChange()
                     }}
-                    >delete_outline</mwc-icon
+                    >delete_outline</md-icon
                   >
                 </li>
               `