@operato/input 1.0.0-alpha.3 → 1.0.0-alpha.30

package/src/ox-input-layout/ox-input-grid-layout.ts

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+@customElement('ox-input-grid-layout')
+class OxInputGridLayout extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+  `
+
+  @property({ type: Object }) value: any
+  @property({ type: String }) direction: 'row' | 'column' = 'row'
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('value')) {
+      let { direction = 'row' } = this.value || {}
+
+      this.direction = direction
+    }
+
+    if (changes.has('value')) {
+    }
+  }
+
+  render() {
+    return html`
+      <label>direction</label>
+      <select value-key="direction" .value=${this.direction}>
+        <option value="row" selected>row</option>
+        <option value="column">column</option>
+      </select>
+    `
+  }
+
+  _onValueChange(e: Event) {
+    var element = e.target as HTMLSelectElement
+    var key = element.getAttribute('value-key')
+
+    if (!key) {
+      return
+    }
+
+    switch (key) {
+      case 'direction':
+        this.direction = element.value as 'row' | 'column'
+      default:
+    }
+
+    this.value = {
+      direction: this.direction
+    }
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+}

package/src/ox-input-layout/ox-input-layout.ts

@@ -0,0 +1,77 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './things-grid-layout'
+import './things-card-layout'
+
+import { LitElement, PropertyValues, html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+// import './things-linear-horizontal-layout'
+// import './things-linear-vertical-layout'
+
+const layouts = ['absolute', 'card', 'grid', 'linear-horizontal', 'linear-vertical', 'table']
+
+@customElement('ox-input-layout')
+class OxInputLayout extends LitElement {
+  @property({ type: Object }) value: any = {}
+  @property({ type: String }) layout:
+    | ''
+    | 'absolute'
+    | 'card'
+    | 'grid'
+    | 'linear-horizontal'
+    | 'linear-vertical'
+    | 'table' = ''
+  @property({ type: Object }) options: any = {}
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('value')) {
+      this.layout = this.value.layout
+      this.options = this.value.options
+    }
+  }
+
+  render() {
+    return html`
+      <div>
+        <select value-key="layout" .value=${this.layout}>
+          <option value="" selected></option>
+          ${layouts.map(layout => {
+            return html` <option value=${layout}>${layout}</option> `
+          })}
+        </select>
+
+        ${this.layout == 'grid'
+          ? html` <things-grid-layout value-key="options" .value=${this.options}></things-grid-layout> `
+          : this.layout == 'card'
+          ? html` <things-card-layout value-key="options" .value=${this.options}></things-card-layout> `
+          : html``}
+      </div>
+    `
+  }
+
+  _onValueChange(e: Event) {
+    var element = e.target as HTMLElement
+    var key = element.getAttribute('value-key')
+
+    if (!key) {
+      return
+    }
+
+    //@ts-ignore
+    this[key] = element.value
+
+    this.value = {
+      layout: this.layout,
+      options: this.options
+    }
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+}

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

@@ -0,0 +1,113 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-input-color.js'
+
+import { css, html } from 'lit'
+import { customElement, property, query, queryAll } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field.js'
+import { OxInputColor } from './ox-input-color.js'
+
+/**
+색상 배열을 편집하는 컴포넌트이다.
+
+새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />
+색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />
+
+Example:
+
+    <ox-input-multiple-colors values=${values}>
+    </ox-input-multiple-colors>
+*/
+
+@customElement('ox-input-multiple-colors')
+export class OxInputMultipleColors extends OxFormField {
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    #colors-container > div {
+      display: grid;
+      grid-template-columns: 22px 1fr 22px;
+      grid-gap: 5px;
+      align-items: center;
+      justify-content: left;
+    }
+
+    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;
+    }
+  `
+
+  @property({ type: Array }) value: string[] = []
+
+  @query('#colors-container') colorsContainer!: HTMLDivElement
+  @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))
+  }
+
+  render() {
+    return html`
+      <div id="colors-container">
+        ${(this.value || []).map(
+          (item, index) => html`
+            <div>
+              <input type="button" value="+" @click=${() => this._appendEditorColor()} data-index=${index} />
+
+              <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}
+                    />
+                  `
+                : html``}
+            </div>
+          `
+        )}
+      </div>
+    `
+  }
+
+  _onValueChanged() {
+    this.value = Array.from(this.colors).map(color => color.value!)
+  }
+
+  _appendEditorColor() {
+    this.value = [...this.value, 'black']
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  _removeEditorColor(e: Event) {
+    var values = []
+    for (var i = 0; i < this.value.length; i++) {
+      if (i == Number((e.target as HTMLElement).dataset.index)) continue
+      else values.push(this.value[i])
+    }
+
+    this.value = values
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+}

package/src/ox-input-options.ts

@@ -0,0 +1,165 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field'
+
+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);
+    }
+
+    input[data-text] {
+      grid-column: span 5;
+    }
+
+    input[data-value] {
+      grid-column: span 4;
+    }
+
+    button {
+      grid-column: span 1;
+    }
+  `
+
+  @property({ type: Array }) value: Option[] = []
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+  }
+
+  render() {
+    const options = this.value instanceof Array ? this.value : []
+
+    return html`
+      ${(options || []).map(
+        item => html`
+          <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>
+          </div>
+        `
+      )}
+
+      <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>
+      </div>
+    `
+  }
+
+  private _changingNow: boolean = false
+
+  _onChange(e: Event) {
+    if (this._changingNow) return
+
+    this._changingNow = true
+
+    var input = e.target as HTMLInputElement
+    var value = input.value
+
+    var div = input.parentElement
+
+    if (div && div.hasAttribute('data-record')) {
+      var dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLInputElement>
+
+      for (var i = 0; i < dataList.length; i++) {
+        if (dataList[i] !== input) {
+          dataList[i].value = value || ''
+        }
+      }
+    }
+
+    if (div && div.hasAttribute('data-record')) this._build(true)
+    else if (div && div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) this._add()
+
+    e.stopPropagation()
+
+    this._changingNow = false
+  }
+
+  _build(includeNewRecord?: any) {
+    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 newoptions: Option[] = []
+
+    for (var i = 0; i < records.length; i++) {
+      var record = records[i]
+
+      var text = (record.querySelector('[data-text]') as HTMLInputElement).value
+      var 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 (text) newoptions.push({ text: text, value: value || text })
+    }
+
+    this.value = newoptions
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  sort() {
+    var sorter = function (a: Option, b: Option) {
+      return b.text < a.text ? 1 : -1
+    }
+
+    this.value = [...this.value.sort(sorter)]
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  _add() {
+    this._build(true)
+
+    var inputs = this.renderRoot.querySelectorAll(
+      '[data-record-new] input:not([style*="display: none"])'
+    ) as NodeListOf<HTMLInputElement>
+
+    for (var i = 0; i < inputs.length; i++) {
+      let input = inputs[i]
+      input.value = ''
+    }
+
+    inputs[0].focus()
+  }
+
+  _delete(e: Event) {
+    const record = (e.target as HTMLElement).parentElement
+    const input = record && (record.querySelector('[data-text]') as HTMLInputElement)
+
+    if (input) {
+      input.value = ''
+    }
+
+    this._build()
+  }
+
+  protected appendFormData({ formData }: FormDataEvent): void {
+    if (!this.name) return
+
+    const value = this.value
+
+    formData.append(
+      this.name!,
+      typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)
+    )
+  }
+}

package/src/ox-input-partition-keys.ts

@@ -0,0 +1,240 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html } from 'lit'
+import { customElement, property, queryAll } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field'
+
+type PartitionKeys = { [key: string]: any }
+type ArrayedPartitionKeys = { key: string; value: any }
+
+/**
+ key-value map for partitions editor element
+ 
+ Example:
+ 
+   <ox-input-partition-keys 
+     value=${map}
+   </ox-input-partition-keys>
+ */
+@customElement('ox-input-partition-keys')
+export class OxInputPartitionKeys 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 {
+      flex: 1;
+    }
+  `
+
+  @property({ type: Object }) value: PartitionKeys = {}
+
+  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-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">-</button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">↑</button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">↓</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">+</button>
+      </div>
+
+      <datalist id="value-template">
+        <option value="%%YY">year</option>
+        <option value="%%MM">month</option>
+        <option value="%%DD">day</option>
+      </datalist>
+    `
+  }
+
+  _onChange(e: Event) {
+    if (this._changingNow) {
+      return
+    }
+
+    this._changingNow = true
+
+    const input = e.target as HTMLInputElement
+    var value = input.value
+
+    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: PartitionKeys = {}
+
+    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: PartitionKeys) {
+    var array: ArrayedPartitionKeys[] = []
+
+    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 }))
+  }
+}