@operato/input 1.0.0-beta.2 → 1.0.0-beta.22

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-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-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"

package/src/ox-input-key-values.ts

@@ -0,0 +1,270 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+
+import { css, html } from 'lit'
+import { customElement, property, queryAll } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field'
+
+type KeyValues = { [key: string]: any }
+type ArrayedKeyValues = { key: string; value: any }
+
+/**
+ input component for key-value map
+ 
+ Example:
+ 
+   <ox-input-key-values 
+     value=${map}
+   </ox-input-key-values>
+ */
+@customElement('ox-input-key-values')
+export class OxInputKeyValues extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      margin-bottom: var(--margin-wide);
+    }
+
+    div {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: var(--margin-default);
+      margin-bottom: var(--margin-narrow);
+    }
+
+    button {
+      border: var(--button-border);
+      border-radius: var(--border-radius);
+      background-color: var(--button-background-color);
+      padding: var(--padding-narrow) var(--padding-default);
+      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);
+    }
+
+    input {
+      flex: 1;
+      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);
+    }
+    button.hidden {
+      opacity: 0;
+      cursor: default;
+    }
+  `
+
+  @property({ type: Object }) value: KeyValues = {}
+  @property({ type: Object }) options: { display: string; value: string }[] = []
+
+  private _changingNow: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+  }
+
+  render() {
+    const value = !this.value || typeof this.value !== 'object' ? {} : this.value
+    const options = this.options || []
+
+    return html`
+      ${this._toArray(value).map(
+        item => html`
+          <div data-record>
+            <input type="text" data-key placeholder="key" .value=${item.key} />
+            <input type="text" data-value placeholder="value" .value=${item.value} list="value-template" />
+            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
+              <mwc-icon>remove</mwc-icon>
+            </button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">
+              <mwc-icon>arrow_upward</mwc-icon>
+            </button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">
+              <mwc-icon>arrow_downward</mwc-icon>
+            </button>
+          </div>
+        `
+      )}
+
+      <div data-record-new>
+        <input type="text" data-key placeholder="key" value="" />
+        <input type="text" data-value placeholder="value" value="" list="value-template" />
+        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+          <mwc-icon>add</mwc-icon>
+        </button>
+        <button class="hidden"><mwc-icon>add</mwc-icon></button>
+        <button class="hidden"><mwc-icon>add</mwc-icon></button>
+      </div>
+
+      <datalist id="value-template">
+        ${options.map(({ display, value }) => html` <option value="${value}">${display}</option> `)}
+      </datalist>
+    `
+  }
+
+  _onChange(e: Event) {
+    if (this._changingNow) {
+      return
+    }
+
+    this._changingNow = true
+
+    const input = e.target as HTMLInputElement
+
+    const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement
+
+    if (record.hasAttribute('data-record')) {
+      this._build()
+    } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {
+      this._add()
+    }
+
+    this._changingNow = false
+  }
+
+  _build(includeNewRecord?: boolean) {
+    if (includeNewRecord) {
+      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>
+    } else {
+      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>
+    }
+
+    var newmap: KeyValues = {}
+
+    for (var i = 0; i < records.length; i++) {
+      var record = records[i]
+
+      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+      const inputs = record.querySelectorAll(
+        '[data-value]:not([style*="display: none"])'
+      ) as NodeListOf<HTMLInputElement>
+
+      if (!inputs || inputs.length == 0) {
+        continue
+      }
+
+      var input = inputs[inputs.length - 1]
+
+      var value = input.value
+
+      if (key) {
+        newmap[key] = value || ''
+      }
+    }
+
+    this.value = newmap
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
+  _toArray(map: KeyValues) {
+    var array: ArrayedKeyValues[] = []
+
+    for (var key in map) {
+      array.push({
+        key: key,
+        value: map[key]
+      })
+    }
+
+    return array
+  }
+
+  _add() {
+    this._build(true)
+
+    const inputs = this.renderRoot.querySelectorAll(
+      '[data-record-new] input:not([style*="display: none"])'
+    ) as NodeListOf<HTMLInputElement & { value: any }>
+
+    for (var i = 0; i < inputs.length; i++) {
+      let input = inputs[i]
+
+      if (input.type == 'checkbox') input.checked = false
+      else input.value = ''
+    }
+
+    inputs[0].focus()
+  }
+
+  _delete(e: MouseEvent) {
+    const record = (e.target as Element).closest('[data-record]') as HTMLElement
+
+    ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''
+
+    this._build()
+  }
+
+  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
+
+  _up(e: MouseEvent) {
+    const record = (e.target as Element).closest('[data-record]') as HTMLElement
+    const array = Array.from(this.records)
+    const index = array.indexOf(record) - 1
+
+    if (index < 0) {
+      return
+    }
+
+    const deleted = array.splice(index, 1)
+    array.splice(index + 1, 0, ...deleted)
+
+    this.value = array.reduce((sum, record) => {
+      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+      const value = (record.querySelector('[data-value]') as HTMLInputElement).value
+
+      sum[key] = value
+      return sum
+    }, {} as { [key: string]: string })
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  _down(e: MouseEvent) {
+    const record = (e.target as Element).closest('[data-record]') as HTMLElement
+    const array = Array.from(this.records)
+    const index = array.indexOf(record)
+
+    if (index > array.length) {
+      return
+    }
+
+    array.splice(index, 1)
+    array.splice(index + 1, 0, record)
+
+    this.value = array.reduce((sum, record) => {
+      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+      const value = (record.querySelector('[data-value]') as HTMLInputElement).value
+
+      sum[key] = value
+      return sum
+    }, {} as { [key: string]: string })
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+}

package/src/ox-input-multiple-colors.ts

@@ -3,6 +3,7 @@
  */
 
 import './ox-input-color.js'
+import '@material/mwc-icon'
 
 import { css, html } from 'lit'
 import { customElement, property, query, queryAll } from 'lit/decorators.js'
@@ -28,29 +29,38 @@ export class OxInputMultipleColors extends OxFormField {
     :host {
       display: inline-block;
     }
-
     #colors-container > div {
       display: grid;
-      grid-template-columns: 22px 1fr 22px;
-      grid-gap: 5px;
+      grid-template-columns: 34px 1fr 34px;
+      grid-gap: var(--margin-default);
       align-items: center;
       justify-content: left;
+      margin-bottom: var(--margin-narrow);
     }
 
     ox-input-color {
-      height: 25px;
       width: 100%;
     }
 
-    input[type='button'] {
-      width: 22px;
-      height: 25px;
-      border: 1px solid rgba(0, 0, 0, 0.15);
-      padding-top: 0px;
-      padding-bottom: 2px;
-      background-color: #f1f2f4;
-      color: #8f9192;
-      font-size: 16px;
+    button {
+      height: 100%;
+      border: var(--button-border);
+      border-radius: var(--border-radius);
+      background-color: var(--button-background-color);
+      padding: var(--padding-narrow) var(--padding-default);
+      line-height: 0.8;
+      color: var(--button-color);
+      cursor: pointer;
+    }
+    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);
     }
   `
 
@@ -69,18 +79,16 @@ export class OxInputMultipleColors extends OxFormField {
         ${(this.value || []).map(
           (item, index) => html`
             <div>
-              <input type="button" value="+" @click=${() => this._appendEditorColor()} data-index=${index} />
-
+              <button @click=${() => this._appendEditorColor()} data-index=${index}>
+                <mwc-icon>add</mwc-icon>
+              </button>
               <ox-input-color .value=${item}> </ox-input-color>
 
               ${(this.value || []).length > 1
                 ? html`
-                    <input
-                      type="button"
-                      value="-"
-                      @click=${(e: Event) => this._removeEditorColor(e)}
-                      data-index=${index}
-                    />
+                    <button @click=${(e: Event) => this._removeEditorColor(e)} data-index=${index}>
+                      <mwc-icon>remove</mwc-icon>
+                    </button>
                   `
                 : html``}
             </div>

package/src/ox-input-options.ts

@@ -1,6 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
+import '@material/mwc-icon'
 
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -12,23 +13,58 @@ type Option = { text: string; value: string }
 @customElement('ox-input-options')
 export class OxInputOptions extends OxFormField {
   static styles = css`
-    div {
-      display: grid;
-      grid-template-columns: repeat(10, 1fr);
-      grid-gap: 5px;
-      grid-auto-rows: minmax(24px, auto);
+    :host {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      margin-bottom: var(--margin-wide);
     }
 
-    input[data-text] {
-      grid-column: span 5;
+    div {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: var(--margin-default);
+      margin-bottom: var(--margin-narrow);
     }
 
-    input[data-value] {
-      grid-column: span 4;
+    button {
+      border: var(--button-border);
+      border-radius: var(--border-radius);
+      background-color: var(--button-background-color);
+      padding: var(--padding-narrow) var(--padding-default);
+      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);
     }
 
-    button {
-      grid-column: span 1;
+    input {
+      flex: 1;
+      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);
+    }
+    button.hidden {
+      opacity: 0;
+      cursor: default;
     }
   `
 
@@ -47,7 +83,9 @@ export class OxInputOptions extends OxFormField {
           <div data-record="">
             <input type="text" data-text="" placeholder="text" .value=${item.text} />
             <input type="text" data-value="" placeholder="value" .value=${item.value} />
-            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">-</button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
+              <mwc-icon>remove</mwc-icon>
+            </button>
           </div>
         `
       )}
@@ -55,7 +93,9 @@ export class OxInputOptions extends OxFormField {
       <div data-record-new="">
         <input type="text" data-text="" placeholder="text" value="" />
         <input type="text" data-value="" placeholder="value" value="" @change=${(e: Event) => this._add()} />
-        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">+</button>
+        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+          <mwc-icon>add</mwc-icon>
+        </button>
       </div>
     `
   }