@operato/input 1.0.0-beta.7 → 1.0.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent property-editor following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh@hatiolab.com",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "publishConfig": {
@@ -30,8 +30,11 @@
     "./ox-input-color-gradient.js": "./dist/src/ox-input-color-gradient.js",
     "./ox-input-crontab.js": "./dist/src/ox-input-crontab.js",
     "./ox-input-data.js": "./dist/src/ox-input-data.js",
+    "./ox-input-duration.js": "./dist/src/ox-input-duration.js",
+    "./ox-input-quantifier.js": "./dist/src/ox-input-quantifier.js",
     "./ox-input-stack.js": "./dist/src/ox-input-stack.js",
     "./ox-input-range.js": "./dist/src/ox-input-range.js",
+    "./ox-input-key-values.js": "./dist/src/ox-input-key-values.js",
     "./ox-select.js": "./dist/src/ox-select.js",
     "./ox-input-file.js": "./dist/src/ox-input-file.js",
     "./ox-input-image.js": "./dist/src/ox-input-image.js",
@@ -58,36 +61,36 @@
   },
   "dependencies": {
     "@lit/localize": "^0.11.2",
-    "@material/mwc-icon": "^0.25.3",
-    "@operato/color-picker": "^1.0.0-beta.7",
-    "@operato/i18n": "^1.0.0-beta.7",
-    "@operato/popup": "^1.0.0-beta.7",
-    "@operato/styles": "^1.0.0-beta.7",
-    "@operato/utils": "^1.0.0-beta.7",
+    "@material/mwc-icon": "^0.26.1",
+    "@operato/color-picker": "^1.0.0",
+    "@operato/i18n": "^1.0.0",
+    "@operato/popup": "^1.0.0",
+    "@operato/styles": "^1.0.0",
+    "@operato/utils": "^1.0.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
-    "@zxing/library": "^0.18.6",
+    "@zxing/library": "^0.19.1",
     "codemirror": "^5.64.0",
-    "lit": "^2.2.1",
+    "lit": "^2.2.7",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@lit/localize-tools": "^0.6.0",
+    "@lit/localize-tools": "^0.6.3",
     "@open-wc/eslint-config": "^4.3.0",
     "@open-wc/testing": "^3.0.4",
     "@types/codemirror": "^5.60.5",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.29",
-    "@web/dev-server-storybook": "next",
+    "@web/dev-server-storybook": "^0.5.0",
     "@web/test-runner": "next",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^4.3.8",
+    "husky": "^7.0.2",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
@@ -106,5 +109,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "feabccbb32d6d8487d761e5c9f1d21a22ab1c34a"
+  "gitHead": "c383e4b11cb4195f32be9b0daa4342dda0bbb2ab"
 }

package/src/index.ts

@@ -17,5 +17,7 @@ export * from './ox-input-value-ranges.js'
 export * from './ox-input-value-map.js'
 export * from './ox-input-table.js'
 export * from './ox-input-scene-component-id.js'
-export * from './ox-input-crontab'
-export * from './ox-input-partition-keys'
+export * from './ox-input-crontab.js'
+export * from './ox-input-partition-keys.js'
+export * from './ox-input-duration.js'
+export * from './ox-input-quantifier.js'

package/src/locales/en.ts

@@ -16,5 +16,13 @@
 'sf95fdd7da4fc2295': `translate`,
 's6aacb9fbb71a1d91': `scale`,
 's075cb2f53173bd8a': `rotate`,
+'sc4bcadba8e631b86': `name`,
+'s63c6e58ec805a9eb': `from date`,
+'sfcc01216c601ec9e': `from time`,
+'s685db98545dc9448': `to date`,
+'s77c8560cf63a372d': `to time`,
+'s42670fc325584e15': `The day before`,
+'s29ec9210c8a8222e': `The day`,
+'scff69aa7239287b0': `The day after`,
     };
   

package/src/locales/ko.ts

@@ -10,11 +10,19 @@
 
     export const templates = {
       's075cb2f53173bd8a': `회전`,
+'s29ec9210c8a8222e': `당일`,
 's31be7a0b4a5853dd': `z 축`,
+'s42670fc325584e15': `전날`,
+'s63c6e58ec805a9eb': `시작일`,
+'s685db98545dc9448': `완료일`,
 's6aacb9fbb71a1d91': `스케일`,
+'s77c8560cf63a372d': `완료시간`,
 's9f41d726ecec72c2': `y 축`,
+'sc4bcadba8e631b86': `이름`,
+'scff69aa7239287b0': `다음날`,
 'sd793f87f18747a63': `체적`,
 'sf95fdd7da4fc2295': `변환`,
 'sf9b52aece5aed0f7': `x 축`,
+'sfcc01216c601ec9e': `시작시간`,
     };
   

package/src/locales/ms.ts

@@ -16,5 +16,13 @@
 'sf95fdd7da4fc2295': `translate`,
 's6aacb9fbb71a1d91': `scale`,
 's075cb2f53173bd8a': `rotate`,
+'sc4bcadba8e631b86': `name`,
+'s63c6e58ec805a9eb': `from date`,
+'sfcc01216c601ec9e': `from time`,
+'s685db98545dc9448': `to date`,
+'s77c8560cf63a372d': `to time`,
+'s42670fc325584e15': `The day before`,
+'s29ec9210c8a8222e': `The day`,
+'scff69aa7239287b0': `The day after`,
     };
   

package/src/locales/zh.ts

@@ -16,5 +16,13 @@
 'sf95fdd7da4fc2295': `translate`,
 's6aacb9fbb71a1d91': `scale`,
 's075cb2f53173bd8a': `rotate`,
+'sc4bcadba8e631b86': `name`,
+'s63c6e58ec805a9eb': `from date`,
+'sfcc01216c601ec9e': `from time`,
+'s685db98545dc9448': `to date`,
+'s77c8560cf63a372d': `to time`,
+'s42670fc325584e15': `The day before`,
+'s29ec9210c8a8222e': `The day`,
+'scff69aa7239287b0': `The day after`,
     };
   

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=`
 
@@ -17,10 +18,6 @@ export class OxInputBarcode extends OxFormField {
         display: flex;
         align-items: center;
         border: none;
-        overflow: hidden;
-        background-color: #fff;
-
-        padding: var(--custom-input-barcode-field-padding) !important;
       }
 
       * {
@@ -32,23 +29,27 @@ 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;
+        width: 10px; /* intentionally width set */
+        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-data.ts

@@ -4,11 +4,11 @@
 
 import './ox-input-code'
 
-import { PropertyValues, css, html } from 'lit'
+import { css, html, PropertyValues } from 'lit'
+import { customElement } from 'lit/decorators.js'
 
 import { OxFormField } from './ox-form-field.js'
 import { OxInputCode } from './ox-input-code.js'
-import { customElement } from 'lit/decorators.js'
 
 /**
 WEB Component for code-mirror based data editor.