@operato/input 0.2.50 → 0.3.2

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

@@ -0,0 +1,292 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { LitElement, html, css } from 'lit-element'
+
+import './things-editor-color'
+
+/**
+range value editor element
+
+Example:
+
+  <things-editor-value-range range=${range}
+                            rangetype=${type}
+                            valuetype=${valuetype}>
+  </things-editor-value-range>
+*/
+export default class ThingsEditorValueRange extends LitElement {
+  static get is() {
+    return 'things-editor-value-range'
+  }
+
+  static get properties() {
+    return {
+      value: Object,
+      valuetype: String
+    }
+  }
+
+  static get styles() {
+    return [
+      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,
+        things-editor-color {
+          flex: 1;
+        }
+
+        things-editor-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;
+        }
+      `
+    ]
+  }
+
+  constructor() {
+    super()
+
+    this.value = {}
+    this.valuetype = 'string'
+    this.rangetype = 'number'
+  }
+
+  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` <things-editor-color data-value .value=${item.value}> </things-editor-color> `
+              : html`
+                  <input
+                    type="text"
+                    data-value
+                    placeholder="value"
+                    .value=${item.value}
+                    data-value-type=${this.valuetype}
+                  />
+                `} <button class="record-action" @click=${e => 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` <things-editor-color data-value value="" placeholder="value"> </things-editor-color> `
+          : html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
+        <button class="record-action" @click=${e => this._add(e)} 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`
+              <things-editor-color data-value .value=${(this.value && this.value.default) || ''} placeholder="value">
+              </things-editor-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 => this._sort(e)}">&gt;</button>
+      </div>
+    `
+  }
+
+  _defaultValue(type) {
+    switch (type || this.valuetype) {
+      case 'color':
+        return '#000000'
+      case 'boolean':
+      case 'checkbox':
+        return false
+      default:
+        return ''
+    }
+  }
+
+  _onChange(e) {
+    if (this._changingNow) return
+
+    this._changingNow = true
+
+    var input = e.target
+    var value
+    if (input.type == 'checkbox') value = Boolean(input.checked)
+    else value = input.value
+    var div = input.parentElement
+    if (input.hasAttribute('data-value')) {
+      var dataList = div.querySelectorAll('[data-value]:not([hidden])')
+      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) {
+    if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')
+    else var records = this.renderRoot.querySelectorAll('[data-record]')
+    var newrange = {}
+    for (var i = 0; i < records.length; i++) {
+      var record = records[i]
+      var from = record.querySelector('[data-from]').value
+      var to = record.querySelector('[data-to]').value
+      var inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])')
+      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 }))
+  }
+
+  /* default를 제외한 range아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
+  _toArray(range) {
+    var array = []
+    for (var key in range) {
+      if (key == 'default') continue
+      var fromto = key.split('~')
+      array.push({
+        from: fromto[0],
+        to: fromto[1],
+        value: range[key]
+      })
+    }
+    return array
+  }
+
+  _sort(e) {
+    var sorter =
+      this.rangetype === 'number'
+        ? function (a, b) {
+            return parseFloat(b.from) < parseFloat(a.from)
+          }
+        : function (a, b) {
+            return b.from < a.from
+          }
+    var range = this._toArray(this.value)
+      .sort(sorter)
+      .reduce(function (sum, i) {
+        sum[`${i.from}~${i.to}`] = i.value
+        return sum
+      }, {})
+    range.default = this.value.default
+
+    this.value = range
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  _add(e) {
+    this._build(true)
+    var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])')
+    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) {
+    var record = e.target.parentElement
+    record.querySelector('[data-from]').value = ''
+    this._build()
+  }
+}
+
+customElements.define(ThingsEditorValueRange.is, ThingsEditorValueRange)

package/src/ox-input-stack.ts

@@ -5,7 +5,7 @@
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { OxFormField } from './ox-formfield'
+import { OxFormField } from './ox-form-field'
 
 @customElement('ox-input-stack')
 export default class OxInputStack extends OxFormField {

package/src/ox-select.ts

@@ -3,14 +3,14 @@
  */
 
 import '@material/mwc-icon'
-import '@operato/popup'
+import '@operato/popup/ox-popup-list.js'
 
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { OxPopupList } from '@operato/popup'
 
-import { OxFormField } from './ox-formfield'
+import { OxFormField } from './ox-form-field.js'
 
 @customElement('ox-select')
 export class Select extends OxFormField {

package/tsconfig.json

@@ -1,14 +1,16 @@
 {
   "compilerOptions": {
-    "target": "es2018",
+    "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "noEmitOnError": true,
     "lib": ["es2017", "dom"],
     "strict": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "importHelpers": true,
     "outDir": "dist",
     "sourceMap": true,

package/dist/src/ox-formfield.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-formfield.js","sourceRoot":"","sources":["../../src/ox-formfield.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAIU,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IA2B5D,CAAC;IAzBU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;gBAC5E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;aACpE;SACF;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAsB,CAAC,CAAA;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAA;SAClC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;IACrD,CAAC;CACF;AA/B6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAc;AAC7B;IAAX,QAAQ,EAAE;0CAAY","sourcesContent":["import { LitElement } from 'lit-element'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField extends LitElement {\n  @property({ type: String }) name?: string\n  @property() value?: any\n\n  private _form: HTMLFormElement | null = null\n  private _formdataEventHandler: EventListener | null = null\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n\n    if (this.name) {\n      this._form = this.closest('form')\n      if (this._form) {\n        this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n        this._form.addEventListener('formdata', this._formdataEventHandler)\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    if (this._form) {\n      this._form.removeEventListener('formdata', this._formdataEventHandler!)\n      this._form = null\n      this._formdataEventHandler = null\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && formData.append(this.name, this.value)\n  }\n}\n"]}