@operato/input 1.0.0-beta.4 → 1.0.0-beta.40

package/src/ox-input-3dish.ts

@@ -16,21 +16,37 @@ export class OxInput3Dish extends OxFormField {
     css`
       :host {
         display: grid;
-        grid-template-columns: repeat(4, minmax(50px, 1fr));
-        grid-gap: 5px;
-        grid-auto-rows: minmax(24px, auto);
-      }
-
-      :host > * {
-        grid-column: span 1;
+        grid-template-columns: repeat(7, minmax(50px, 1fr));
+        grid-gap: var(--margin-default);
       }
 
       label {
         text-align: right;
+        align-self: center;
+        font: var(--label-font);
+        color: var(--label-color);
+        text-transform: var(--label-text-transform);
+        grid-column: span 1;
       }
 
       span {
+        grid-column: span 2;
         text-align: center;
+        font: var(--label-font);
+        color: var(--legend-color);
+      }
+
+      input {
+        grid-column: span 2;
+        border: 0;
+        border-bottom: var(--border-dark-color);
+        padding: var(--input-padding);
+        font: var(--input-font);
+        color: var(--primary-text-color);
+      }
+      input:focus {
+        outline: none;
+        border-bottom: 1px solid var(--primary-color);
       }
     `
   ]
@@ -154,7 +170,7 @@ export class OxInput3Dish extends OxFormField {
 
   render() {
     return html`
-      <span></span> <span>${msg('x-axes')}</span>
+      <label></label> <span>${msg('x-axes')}</span>
       <span>${msg('y-axes')}</span>
       <span>${msg('z-axes')}</span>
 

package/src/ox-input-barcode.ts

@@ -3,9 +3,10 @@ import '@operato/popup/ox-popup.js'
 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-form-field.js'
-import { OxPopup } from '@operato/popup'
 
 const barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`
 
@@ -18,9 +19,6 @@ export class OxInputBarcode extends OxFormField {
         align-items: center;
         border: none;
         overflow: hidden;
-        background-color: #fff;
-
-        padding: var(--custom-input-barcode-field-padding) !important;
       }
 
       * {
@@ -32,23 +30,26 @@ export class OxInputBarcode extends OxFormField {
       }
 
       input {
-        flex: 1 !important;
-        border: none;
-        font: var(--custom-input-barcode-field-font);
-        width: 10px;
-        flex-grow: 1;
+        flex: 1;
+        border: 0;
+        border-bottom: var(--border-dark-color);
+        padding: var(--input-padding);
+        padding-right: 35px;
+        font: var(--input-font);
+        color: var(--primary-text-color);
+      }
+      input:focus {
+        outline: none;
+        border-bottom: 1px solid var(--primary-color);
       }
 
       #scan-button {
         display: block;
+        position: relative;
+        margin-left: -30px;
         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);
+        background: var(--barcodescan-input-button-icon) no-repeat center center;
       }
 
       #scan-button[hidden] {
@@ -84,6 +85,8 @@ export class OxInputBarcode extends OxFormField {
   @property({ type: Boolean }) scannable?: boolean
   @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean
   @property({ type: String }) declare value?: string
+  @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean
+  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean
 
   @state() stream?: MediaStream
   @state() reader?: BrowserMultiFormatReader
@@ -123,9 +126,8 @@ export class OxInputBarcode extends OxFormField {
       <input
         type="text"
         .value=${this.value || ''}
-        maxlength="50"
-        @change=${(e: Event) => this.onChange(e)}
-        @keypress=${(e: Event) => this.onChange(e)}
+        @change=${(e: Event) => this.onInputChange(e)}
+        @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(e)}
       />
       <button
         ?hidden=${!this.scannable}
@@ -145,11 +147,49 @@ export class OxInputBarcode extends OxFormField {
     `
   }
 
-  onChange(e: Event) {
+  onInputChange(e: Event) {
     e.stopPropagation()
-    this.value = (e.target as HTMLInputElement)?.value
-    //@ts-ignore
-    this.dispatchEvent(new e.constructor(e.type, e))
+
+    if (this.englishOnly) {
+      /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */
+      this.value = this.input.value = this.input.value?.replace(/[^\x00-\x7F]/g, '')
+    } else {
+      this.value = this.input.value
+    }
+
+    if (this.selectAfterChange) {
+      requestAnimationFrame(() => {
+        this.input.select()
+      })
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.value
+      })
+    )
+  }
+
+  onInputKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.isComposing) {
+      /* Even if the value has not changed, the enter key triggers a change event. */
+      e.preventDefault() /* Prevent change event from occurring twice. */
+
+      this.input.dispatchEvent(new CustomEvent('change'))
+    } else if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^Key/.test(e.code)) {
+      e.stopPropagation()
+      e.preventDefault()
+
+      /* englishOnly 인 경우에 문자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳의 자모음을 조합하므로, ... */
+      const key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase()
+      const value = this.input.value
+
+      const start = this.input.selectionStart || 0
+      const end = this.input.selectionEnd || start
+
+      this.input.value = [value.substring(0, start), key, value.substring(end)].join('')
+      this.input.setSelectionRange(start + 1, start + 1)
+    }
   }
 
   async scan(e: MouseEvent) {
@@ -170,14 +210,7 @@ export class OxInputBarcode extends OxFormField {
         this.value = input.value = String(result)
 
         if (!this.withoutEnter) {
-          input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d, key: 'Enter' }))
-          input.dispatchEvent(
-            new CustomEvent('change', {
-              bubbles: true,
-              composed: true,
-              detail: this.value
-            })
-          )
+          input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
         }
       } else {
         /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */
@@ -197,10 +230,10 @@ export class OxInputBarcode extends OxFormField {
   }
 
   stopScan() {
-    this.video.pause()
+    this.video?.pause()
 
-    this.stream && this.stream.getTracks().forEach(track => track.stop())
-    this.reader && this.reader.reset()
+    this.stream?.getTracks().forEach(track => track.stop())
+    this.reader?.reset()
 
     delete this.stream
     delete this.reader

package/src/ox-input-color.ts

@@ -7,9 +7,10 @@ import '@operato/color-picker/paper-color-picker.js'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { OxFormField } from './ox-form-field'
 import { tinycolor } from '@thebespokepixel/es-tinycolor'
 
+import { OxFormField } from './ox-form-field'
+
 /**
 색상을 입력하는데 사용되는 입력 컴포넌트이다.
 화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,
@@ -180,18 +181,24 @@ export class OxInputColor extends OxFormField {
     }
 
     input[type='text'] {
-      padding-right: 24px;
       width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      border: 1px solid rgba(0, 0, 0, 0.2);
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+      padding-right: 35px;
+    }
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
     }
 
     a {
       -webkit-appearance: none;
       display: flex;
       position: absolute;
-      width: 24px;
+      width: 35px;
       height: 100%;
       box-sizing: border-box;
       align-items: center;
@@ -199,11 +206,10 @@ export class OxInputColor extends OxFormField {
     }
 
     span {
-      width: 18px;
-      height: 100%;
-      max-height: 18px;
-      border-radius: 10%;
-      border: 1px solid #eee;
+      width: 80%;
+      height: 60%;
+      border: var(--border-dark-color);
+      border-radius: var(--border-radius);
     }
 
     span.transparent {

package/src/ox-input-crontab.ts

@@ -84,7 +84,6 @@ export class OxInputCrontab extends OxFormField {
       width: 100%;
       height: 100%;
       border: 0;
-      background-color: var(--main-section-background-color);
     }
 
     :host * {
@@ -118,32 +117,36 @@ export class OxInputCrontab extends OxFormField {
       grid-column: 4 / span 3;
       width: 100%;
       height: 100%;
-      font: normal 0.9em var(--theme-font);
+      padding: var(--input-padding);
+      border: 0;
+      border-bottom: var(--border-dark-color);
       text-transform: capitalize;
-      border-radius: var(--border-radius);
-      border: var(--border-dark-color);
+      font: var(--label-font);
+      color: var(--label-color);
     }
 
     input {
       width: 100%;
       margin-top: var(--margin-default);
       padding: 5px;
-      border-radius: var(--border-radius);
-      border: var(--border-dark-color);
-      font: normal 1em var(--theme-font);
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
     }
     input:focus {
-      border: 1px solid var(--primary-color);
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
     }
 
     input:invalid {
-      border: 1px solid var(--status-danger-color);
+      border-bottom: 1px solid var(--status-danger-color);
       color: var(--status-danger-color);
     }
 
     label {
       width: 100%;
-      height: 100%;
       font: normal 0.8em var(--theme-font);
       color: var(--primary-color);
     }
@@ -370,6 +373,23 @@ export class OxInputCrontab extends OxFormField {
             `
           )}
         </div>
+        <button
+          id="clear"
+          @click=${(e: Event) => {
+            e.preventDefault()
+            e.stopPropagation()
+            this.value = ''
+            this.dispatchEvent(
+              new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+              })
+            )
+          }}
+        >
+          Clear
+        </button>
       </form>
     `
   }

package/src/ox-input-duration.ts

@@ -0,0 +1,168 @@
+import '@material/mwc-button'
+
+import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+import { OxFormField } from './ox-form-field'
+
+@customElement('ox-input-duration')
+export class OxInputDuration extends OxFormField {
+  static styles = css`
+    :host {
+      text-align: center;
+      padding: 10px;
+    }
+
+    :host * {
+      box-sizing: border-box;
+    }
+
+    :host *:focus {
+      outline: none;
+    }
+
+    form {
+      width: 100%;
+      height: 100%;
+      justify-content: center;
+    }
+
+    input {
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      padding-right: 0;
+      max-width: 70px;
+      font: var(--input-font);
+      color: var(--primary-text-color);
+      text-align: right;
+    }
+
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+
+    input:invalid {
+      border-bottom: 1px solid var(--status-danger-color);
+      color: var(--status-danger-color);
+    }
+
+    label {
+      width: 100%;
+      margin-right: var(--margin-default);
+      font: normal 0.8em var(--theme-font);
+      color: var(--primary-color);
+    }
+
+    button {
+      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 {
+      border: var(--button-activ-border);
+      background-color: var(--button-background-focus-color);
+      color: var(--theme-white-color);
+    }
+  `
+
+  @property({ type: Number }) declare value?: number
+
+  render() {
+    var d = Number(this.value || 0)
+
+    const days = Math.floor(d / (3600 * 24))
+    d -= days * 24 * 3600
+    const hours = Math.floor(d / 3600)
+    d -= hours * 3600
+    const minutes = Math.floor(d / 60)
+    const seconds = d - minutes * 60
+
+    return html`
+      <form @change=${this.onChange.bind(this)}>
+        <input id="days" type="number" .value=${days} pattern="\\d*" />
+        <label for="days">${i18next.t('label.days')}</label>
+
+        <input id="hours" type="number" .value=${hours} pattern="[01]?\\d|2[0-3]" />
+        <label for="hour">${i18next.t('label.hours')}</label>
+
+        <input id="minutes" type="number" .value=${minutes} pattern="[0-5]?\\d" />
+        <label for="minute">${i18next.t('label.minutes')}</label>
+
+        <input id="seconds" type="number" .value=${seconds} pattern="[0-5]?\\d" />
+        <label for="second">${i18next.t('label.seconds')}</label>
+
+        <button
+          type="button"
+          @click=${(e: Event) => {
+            e.preventDefault()
+            e.stopPropagation()
+
+            this.value = 0
+
+            this.dispatchEvent(
+              new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+              })
+            )
+          }}
+        >
+          <mwc-icon>backspace</mwc-icon>
+        </button>
+      </form>
+    `
+  }
+
+  firstUpdated() {
+    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()
+  }
+
+  @query('#days') days!: HTMLInputElement
+  @query('#hours') hours!: HTMLInputElement
+  @query('#minutes') minutes!: HTMLInputElement
+  @query('#seconds') seconds!: HTMLInputElement
+
+  onChange(e: Event) {
+    e.stopPropagation()
+
+    var form = this.renderRoot.querySelector('form') as HTMLFormElement
+    var valid = form.checkValidity()
+    if (!valid) {
+      form.reportValidity()
+      return
+    }
+
+    const days = Number(this.days.value)
+    const hours = Number(this.hours.value)
+    const minutes = Number(this.minutes.value)
+    const seconds = Number(this.seconds.value)
+
+    this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: this.value
+      })
+    )
+  }
+}

package/src/ox-input-file.ts

@@ -1,11 +1,12 @@
 import '@material/mwc-icon'
 
-import { PropertyValues, css, html } from 'lit'
+import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
+import { ScrollbarStyles } from '@operato/styles'
 import { FileDropHelper } from '@operato/utils'
+
 import { OxFormField } from './ox-form-field.js'
-import { ScrollbarStyles } from '@operato/styles'
 
 @customElement('ox-input-file')
 export class OxInputFile extends OxFormField {
@@ -85,9 +86,9 @@ export class OxInputFile extends OxFormField {
 
   @property({ type: Boolean }) multiple?: boolean
   @property({ type: String }) accept?: string
-  @property({ type: String }) icon?: string
+  @property({ type: String }) icon?: string = 'upload'
   @property({ type: String }) label?: string
-  @property({ type: String }) description?: string
+  @property({ type: String }) description?: string = 'drop files here!'
   @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })
   hideFileList: boolean = false
   @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })
@@ -99,9 +100,9 @@ export class OxInputFile extends OxFormField {
     var files: File[] = this.value || []
 
     return html`
-      <mwc-icon>upload</mwc-icon>
+      <mwc-icon>${this.icon || 'upload'}</mwc-icon>
 
-      <span>drop files here!</span>
+      <span>${this.description || 'drop files here!'}</span>
 
       <input
         id="input-file"