@operato/input 1.0.0-alpha.6 → 1.0.0-beta.0

package/src/{ox-input-keyvalues.ts.ing → ox-input-value-map.ts}

@@ -2,11 +2,16 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import './things-editor-color'
+import './ox-input-color'
 
-import { LitElement, css, html } from 'lit'
+import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { OxFormField } from './ox-form-field'
+
+type ValueMap = { default?: any; [key: string]: any }
+type ArrayedValueMap = { key: string; value: any }
+
 /**
 key-value map editor element
 
@@ -18,67 +23,67 @@ Example:
     valuetype=${valuetype}>
   </ox-input-value-map>
 */
-@customElement('ox-input-keyvalues')
-export default class OxInputValueMap extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        align-content: center;
-
-        width: 100%;
-        overflow: hidden;
-        border: 1px solid #ccc;
-      }
+@customElement('ox-input-value-map')
+export class OxInputValueMap extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+
+      width: 100%;
+      overflow: hidden;
+      border: 1px solid #ccc;
+    }
 
-      div {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
+    div {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
 
-        border-bottom: 1px solid #c0c0c0;
-      }
+      border-bottom: 1px solid #c0c0c0;
+    }
 
-      div:last-child {
-        border-bottom: none;
-      }
+    div:last-child {
+      border-bottom: none;
+    }
 
-      div > * {
-        min-width: 0px;
-        margin: 2px;
-        padding: 0;
-      }
+    div > * {
+      min-width: 0px;
+      margin: 2px;
+      padding: 0;
+    }
 
-      button {
-        width: 20px;
-        text-align: center;
-      }
+    button {
+      width: 20px;
+      text-align: center;
+    }
 
-      input,
-      things-editor-color {
-        flex: 1;
-      }
+    input,
+    ox-input-color {
+      flex: 1;
+    }
 
-      things-editor-color {
-        --things-editor-color-input-color: {
-          margin: 1px;
-        }
-        --things-editor-color-input-span: {
-          width: 10px;
-          height: 10px;
-        }
+    ox-input-color {
+      --ox-input-color-input-color: {
+        margin: 1px;
       }
-
-      input[type='checkbox'] {
-        width: initial;
+      --ox-input-color-input-span: {
+        width: 10px;
+        height: 10px;
       }
-    `
-  ]
+    }
+
+    input[type='checkbox'] {
+      width: initial;
+    }
+  `
 
-  @property({ type: Object }) value: any = {}
-  @property({ type: Object }) valuetype: string = 'string'
-  @property({ type: Object }) keytype: string = 'string'
+  @property({ type: Object }) value: ValueMap = {}
+  @property({ type: String }) valuetype: 'string' | 'boolean' | 'color' | string = 'string'
+  @property({ type: String }) keytype: 'string' | 'boolean' | 'color' | string = 'string'
+
+  private _changingNow: boolean = false
 
   firstUpdated() {
     this.renderRoot.addEventListener('change', this._onChange.bind(this))
@@ -89,10 +94,11 @@ export default class OxInputValueMap extends LitElement {
       ${this._toArray(this.value).map(
         item => html`
           <div data-record>
-            <input type="text" data-key placeholder="key" .value=${item.key} /> ${this.valuetype == 'boolean'
+            <input type="text" data-key placeholder="key" .value=${item.key} />
+            ${this.valuetype == 'boolean'
               ? html` <input type="checkbox" data-value .checked=${item.value} data-value-type=${this.valuetype} /> `
               : this.valuetype == 'color'
-              ? html` <things-editor-color data-value .value=${item.value} tabindex="-1"> </things-editor-color> `
+              ? html` <ox-input-color data-value .value=${item.value} tabindex="-1"> </ox-input-color> `
               : html`
                   <input
                     type="text"
@@ -110,9 +116,9 @@ export default class OxInputValueMap extends LitElement {
         <input type="text" data-key placeholder="key" value="" /> ${this.valuetype == 'boolean'
           ? html` <input type="checkbox" data-value data-value-type=${this.valuetype} /> `
           : this.valuetype == 'color'
-          ? html` <things-editor-color data-value value="" tabindex="-1" placeholder="value"> </things-editor-color> `
+          ? html` <ox-input-color data-value value="" tabindex="-1" placeholder="value"> </ox-input-color> `
           : html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
-        <button class="record-action" @click=${(e: MouseEvent) => this._add(e)} tabindex="-1">+</button>
+        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">+</button>
       </div>
 
       <div data-record>
@@ -127,13 +133,13 @@ export default class OxInputValueMap extends LitElement {
             `
           : this.valuetype == 'color'
           ? html`
-              <things-editor-color
+              <ox-input-color
                 data-value
                 .value=${(this.value && this.value.default) || ''}
                 placeholder="value"
                 tabindex="-1"
               >
-              </things-editor-color>
+              </ox-input-color>
             `
           : html`
               <input
@@ -143,12 +149,12 @@ export default class OxInputValueMap extends LitElement {
                 .value=${(this.value && this.value.default) || ''}
                 data-value-type=${this.valuetype}
               />
-            `} <button class="record-action" @click=${e => this._sort(e)} tabindex="-1">&gt;</button>
+            `} <button class="record-action" @click=${() => this._sort()} tabindex="-1">&gt;</button>
       </div>
     `
   }
 
-  _defaultValue(type) {
+  _defaultValue(type?: 'string' | 'boolean' | 'color' | string) {
     switch (type || this.valuetype) {
       case 'color':
         return '#000000'
@@ -160,63 +166,86 @@ export default class OxInputValueMap extends LitElement {
     }
   }
 
-  _onChange(e) {
+  _onChange(e: Event) {
     if (this._changingNow) {
       return
     }
 
     this._changingNow = true
 
-    var input = e.target
+    const input = e.target as HTMLInputElement
     var value
 
-    if (input.type == 'checkbox') value = Boolean(input.checked)
-    else value = input.value
+    if (input.type == 'checkbox') {
+      value = Boolean(input.checked)
+    } else {
+      value = input.value
+    }
 
-    var div = input.parentElement
+    const div = input.parentElement as HTMLDivElement
 
     if (div.hasAttribute('data-record')) {
-      var dataList = div.querySelectorAll('[data-value]:not([hidden])')
-      for (var i = 0; i < dataList.length; i++)
-        if (dataList[i] !== input) dataList[i].value = value || this._defaultValue()
+      var dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLElement & { value: any }>
+
+      for (var i = 0; i < dataList.length; i++) {
+        if (dataList[i] !== input) {
+          dataList[i].value = value || this._defaultValue()
+        }
+      }
     }
 
-    if (div.hasAttribute('data-record')) this._build()
-    else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) this._add()
+    if (div.hasAttribute('data-record')) {
+      this._build()
+    } else if (div.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]')
-    else var records = this.renderRoot.querySelectorAll('[data-record]')
+    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 = {}
+    var newmap: ValueMap = {}
 
     for (var i = 0; i < records.length; i++) {
       var record = records[i]
 
-      var key = record.querySelector('[data-key]').value
-      var inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])')
-      if (!inputs || inputs.length == 0) continue
+      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+      const inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])') as NodeListOf<
+        HTMLInputElement & { value: any }
+      >
+
+      if (!inputs || inputs.length == 0) {
+        continue
+      }
 
       var input = inputs[inputs.length - 1]
 
       var value
 
-      if (input.type == 'checkbox') value = Boolean(input.checked)
-      else value = input.value
+      if (input.type == 'checkbox') {
+        value = Boolean(input.checked)
+      } else {
+        value = input.value
+      }
 
-      if (key) newmap[key] = value || this._defaultValue()
+      if (key) {
+        newmap[key] = value || this._defaultValue()
+      }
     }
 
     this.value = newmap
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
   }
 
   /* default를 제외한 map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
-  _toArray(map) {
-    var array = []
+  _toArray(map: ValueMap) {
+    var array: ArrayedValueMap[] = []
 
     for (var key in map) {
       if (key == 'default') continue
@@ -229,14 +258,14 @@ export default class OxInputValueMap extends LitElement {
     return array
   }
 
-  _sort(e) {
-    var sorter =
+  _sort() {
+    const sorter =
       this.keytype === 'number'
-        ? function (a, b) {
-            return parseFloat(b.key) < parseFloat(a.key)
+        ? function (a: ArrayedValueMap, b: ArrayedValueMap) {
+            return parseFloat(b.key) < parseFloat(a.key) ? 1 : -1
           }
-        : function (a, b) {
-            return b.key < a.key
+        : function (a: ArrayedValueMap, b: ArrayedValueMap) {
+            return b.key < a.key ? 1 : -1
           }
 
     var map = this._toArray(this.value)
@@ -244,18 +273,20 @@ export default class OxInputValueMap extends LitElement {
       .reduce(function (sum, i) {
         sum[i.key] = i.value
         return sum
-      }, {})
+      }, {} as ValueMap)
 
     map.default = this.value.default
 
     this.value = map
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
   }
 
-  _add(e: MouseEvent) {
+  _add() {
     this._build(true)
 
-    var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])')
+    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]
@@ -268,7 +299,7 @@ export default class OxInputValueMap extends LitElement {
   }
 
   _delete(e: MouseEvent) {
-    var record = (e.target as HTMLElement).parentElement
+    const record = (e.target as HTMLElement).parentElement
 
     ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''
 

package/src/ox-input-value-ranges.ts

@@ -0,0 +1,325 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-input-color'
+
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field.js'
+
+type ValueRange = { default?: any; [fromto: string]: any }
+type ArrayedRange = { from: any; to: any; value: any }
+
+/**
+range value editor element
+
+Example:
+
+  <ox-input-value-ranges
+    .value=${range}
+    valuetype=${type}
+  </ox-input-value-ranges>
+*/
+
+@customElement('ox-input-value-ranges')
+export class OxInputValueRange extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+
+      width: 100%;
+      overflow: hidden;
+      border: 1px solid #ccc;
+    }
+
+    div {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+
+      border-bottom: 1px solid #c0c0c0;
+    }
+
+    div:last-child {
+      border-bottom: none;
+    }
+
+    div > * {
+      min-width: 0px;
+      margin: 2px;
+      padding: 0;
+    }
+
+    button {
+      width: 20px;
+      text-align: center;
+    }
+
+    input,
+    ox-input-color {
+      flex: 1;
+    }
+
+    ox-input-color {
+      --things-editor-color-input-color: {
+        margin: 2px;
+      }
+      --things-editor-color-input-span: {
+        width: 12px;
+        height: 12px;
+      }
+    }
+
+    [placeholder='value'] {
+      flex: 2;
+    }
+
+    div {
+      border-bottom: 1px solid #c0c0c0;
+    }
+
+    div:last-child {
+      border-bottom: none;
+    }
+
+    input[type='checkbox'] {
+      width: initial;
+    }
+  `
+
+  @property({ type: Object }) value: ValueRange = {}
+  @property({ type: String }) valuetype: 'string' | 'boolean' | 'color' | string = 'string'
+  @property({ type: String }) rangetype: 'string' | 'boolean' | 'color' | string = 'number'
+
+  private _changingNow: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+  }
+
+  render() {
+    return html`
+      ${this._toArray(this.value).map(
+        item => html`
+          <div data-record>
+            <input type="text" data-from placeholder="<=" .value=${item.from} />
+            <input type="text" data-to placeholder="&gt;" .value=${item.to} />
+
+            ${this.valuetype == 'boolean'
+              ? html` <input type="checkbox" data-value .checked=${item.value} data-value-type=${this.valuetype} /> `
+              : this.valuetype == 'color'
+              ? html` <ox-input-color data-value .value=${item.value}> </ox-input-color> `
+              : html`
+                  <input
+                    type="text"
+                    data-value
+                    placeholder="value"
+                    .value=${item.value}
+                    data-value-type=${this.valuetype}
+                  />
+                `} <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">-</button>
+          </div>
+        `
+      )}
+
+      <div data-record-new>
+        <input type="text" data-from placeholder="<=" value="" />
+        <input type="text" data-to placeholder="&gt;" value="" />
+
+        ${this.valuetype == 'boolean'
+          ? html` <input type="checkbox" data-value data-value-type=${this.valuetype} /> `
+          : this.valuetype == 'color'
+          ? html` <ox-input-color data-value value="" placeholder="value"> </ox-input-color> `
+          : html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
+        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">+</button>
+      </div>
+
+      <div data-record>
+        <input type="text" data-from data-default="" disabled value="default" />
+        <input type="text" data-to placeholder="&gt;" value="" hidden />
+
+        ${this.valuetype == 'boolean'
+          ? html`
+              <input
+                type="checkbox"
+                data-value
+                .checked=${this.value && this.value.default}
+                data-value-type=${this.valuetype}
+              />
+            `
+          : this.valuetype == 'color'
+          ? html`
+              <ox-input-color data-value .value=${(this.value && this.value.default) || ''} placeholder="value">
+              </ox-input-color>
+            `
+          : html`
+              <input
+                type="text"
+                data-value
+                .value=${(this.value && this.value.default) || ''}
+                placeholder="value"
+                class="default-value"
+                data-value-type=${this.valuetype}
+              />
+            `} <button class="record-action" @click=${(e: Event) => this._sort()}>&gt;</button>
+      </div>
+    `
+  }
+
+  _defaultValue(type: 'color' | 'boolean' | 'checkbox' | string) {
+    switch (type || this.valuetype) {
+      case 'color':
+        return '#000000'
+      case 'boolean':
+      case 'checkbox':
+        return false
+      default:
+        return ''
+    }
+  }
+
+  _onChange(e: Event) {
+    if (this._changingNow) {
+      return
+    }
+
+    this._changingNow = true
+
+    const input = e.target as HTMLInputElement
+    var value = input.type === 'checkbox' ? Boolean(input.checked) : input.value
+
+    const div = input.parentElement as HTMLDivElement
+    if (input.hasAttribute('data-value')) {
+      const dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLElement & { value: any }>
+
+      for (var i = 0; i < dataList.length; i++) {
+        if (dataList[i] !== input) {
+          dataList[i].value = value
+        }
+      }
+    }
+
+    if (div.hasAttribute('data-record')) {
+      this._build()
+    } else if (div.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]')
+    } else {
+      var records = this.renderRoot.querySelectorAll('[data-record]')
+    }
+
+    var newrange: ValueRange = {}
+    for (var i = 0; i < records.length; i++) {
+      const record = records[i]
+      const from = (record.querySelector('[data-from]') as HTMLInputElement).value
+      const to = (record.querySelector('[data-to]') 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
+
+      if (input.type == 'checkbox') {
+        value = Boolean(input.checked)
+      } else {
+        value = input.value
+      }
+
+      if (from) {
+        if (from === 'default') newrange['default'] = value || (this.valuetype == 'color' ? '#000000' : '')
+        else newrange[`${from}~${to}`] = value
+      }
+    }
+
+    this.value = newrange
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  /* default를 제외한 range아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
+  _toArray(range: ValueRange) {
+    var array: ArrayedRange[] = []
+
+    for (var key in range) {
+      if (key == 'default') {
+        continue
+      }
+
+      const fromto = key.split('~')
+
+      array.push({
+        from: fromto[0],
+        to: fromto[1],
+        value: range[key]
+      })
+    }
+    return array
+  }
+
+  _sort() {
+    const sorter =
+      this.rangetype === 'number'
+        ? function (a: ArrayedRange, b: ArrayedRange) {
+            return parseFloat(b.from) < parseFloat(a.from) ? 1 : -1
+          }
+        : function (a: ArrayedRange, b: ArrayedRange) {
+            return b.from < a.from ? 1 : -1
+          }
+
+    var range: ValueRange = this._toArray(this.value)
+      .sort(sorter)
+      .reduce(function (sum, i) {
+        sum[`${i.from}~${i.to}`] = i.value
+        return sum
+      }, {} as ValueRange)
+    range.default = this.value.default
+
+    this.value = range
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  _add() {
+    this._build(true)
+
+    const inputs = this.renderRoot.querySelectorAll(
+      '[data-record-new] input:not([style*="display: none"])'
+    ) as NodeListOf<HTMLInputElement & { value: any; type: string }>
+
+    for (var i = 0; i < inputs.length; i++) {
+      let input = inputs[i]
+      if (input.type == 'checkbox') {
+        input.checked = false
+      } else {
+        input.value = this._defaultValue(input.type)
+      }
+    }
+
+    inputs[0].focus()
+  }
+
+  _delete(e: Event) {
+    const record = (e.target as Element).parentElement
+
+    const dataFrom = record!.querySelector('[data-from]') as HTMLInputElement
+    dataFrom.value = ''
+
+    this._build()
+  }
+}