@operato/input 0.2.52 → 0.3.1

package/src/ox-input-file.ts

@@ -0,0 +1,185 @@
+import '@material/mwc-icon'
+
+import { css, html } 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'
+
+@customElement('ox-input-file')
+export class OxInputFile extends OxFormField {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--border-radius);
+        align-items: center;
+        justify-content: center;
+        padding: var(--padding-default, 9px);
+        min-height: 100px;
+        text-transform: capitalize;
+
+        border: var(--file-uploader-border);
+        background-color: var(--main-section-background-color);
+        font: var(--file-uploader-font) !important;
+        color: var(--file-uploader-color);
+      }
+      :host > mwc-icon {
+        color: var(--file-uploader-icon-color);
+        --mdc-icon-size: var(--file-uploader-icon-size, 36px);
+      }
+
+      :host(.candrop) {
+        background-color: var(--file-uploader-candrop-background-color);
+      }
+
+      #input-file {
+        display: none;
+      }
+
+      label {
+        position: relative;
+        width: auto;
+        border: none;
+        text-transform: capitalize;
+
+        padding: var(--file-uploader-label-padding);
+        border-radius: var(--file-uploader-label-border-radius);
+        background-color: var(--file-uploader-label-background-color);
+        color: var(--file-uploader-label-color);
+        font: var(--file-uploader-label-font) !important;
+      }
+
+      ul {
+        max-width: 500px;
+        width: 100%;
+        list-style: none;
+        margin: 5px 0 0 0;
+        padding: 0;
+        max-height: 46px;
+        overflow: auto;
+        background-color: rgba(var(--primary-color-rgb), 0.1);
+      }
+      li {
+        text-align: left;
+
+        padding: 3px 5px 2px 5px;
+        border-bottom: var(--file-uploader-li-border-bottom);
+        font: normal 14px var(--theme-font);
+      }
+      li mwc-icon {
+        float: right;
+        cursor: pointer;
+        margin: var(--file-uploader-li-icon-margin);
+        font-size: 1em;
+      }
+      li mwc-icon:hover,
+      li mwc-icon:active {
+        color: var(--file-uploader-li-icon-focus-color);
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) multiple?: boolean
+  @property({ type: String }) accept?: string
+  @property({ type: String }) icon?: string
+  @property({ type: String }) label?: string
+  @property({ type: String }) description?: string
+  @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })
+  hideFileList: boolean = false
+  @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })
+  attachFileList: boolean = false
+
+  @query('#input-file') fileInput!: HTMLInputElement
+
+  render() {
+    var files: File[] = this.value || []
+
+    return html`
+      <mwc-icon>upload</mwc-icon>
+
+      <span>drop files here!</span>
+
+      <input
+        id="input-file"
+        type="file"
+        accept=${this.accept}
+        ?multiple=${this.multiple}
+        hidden
+        capture="environment"
+        @change=${(e: Event) => this._onChangeValue(e)}
+      />
+
+      <label for="input-file">${this.label || 'select files'}</label>
+
+      ${!this.hideFileList && files?.length
+        ? html` <ul>
+            ${files.map(
+              file => html`
+                <li>
+                  - ${file.name}
+                  <mwc-icon
+                    @click=${(e: Event) => {
+                      files.splice(files.indexOf(file), 1)
+                      this.value = [...files]
+                      this._notifyChange()
+                    }}
+                    >delete_outline</mwc-icon
+                  >
+                </li>
+              `
+            )}
+          </ul>`
+        : html``}
+    `
+  }
+
+  firstUpdated() {
+    FileDropHelper.set(this)
+
+    this.addEventListener('file-drop', (e: Event) => {
+      const detail = (e as CustomEvent).detail
+      this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []
+
+      this._notifyChange()
+    })
+  }
+
+  get files() {
+    return this.value
+  }
+
+  reset() {
+    this.fileInput.value = ''
+    this.value = []
+
+    this._notifyChange()
+  }
+
+  _onChangeValue(e: Event) {
+    const fileInput = e.currentTarget as HTMLInputElement
+    const files = this.value || []
+
+    this.value = this.attachFileList
+      ? [...files, ...Array.from(fileInput.files as FileList)]
+      : [...Array.from(fileInput.files as FileList)]
+
+    fileInput.files = null
+
+    this._notifyChange()
+  }
+
+  _notifyChange() {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: this.value
+      })
+    )
+  }
+}

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

@@ -0,0 +1,277 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './things-editor-color'
+
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+/**
+key-value map editor element
+
+Example:
+
+  <ox-input-value-map 
+    value=${map}
+    keytype=${keytype}
+    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;
+      }
+
+      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: 1px;
+        }
+        --things-editor-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'
+
+  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} /> ${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`
+                  <input
+                    type="text"
+                    data-value
+                    placeholder="value"
+                    .value=${item.value}
+                    data-value-type=${this.valuetype}
+                  />
+                `} <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">-</button>
+          </div>
+        `
+      )}
+
+      <div data-record-new>
+        <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` <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>
+      </div>
+
+      <div data-record>
+        <input type="text" data-key data-default="" value="default" disabled /> ${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"
+                tabindex="-1"
+              >
+              </things-editor-color>
+            `
+          : html`
+              <input
+                type="text"
+                data-value
+                placeholder="value"
+                .value=${(this.value && this.value.default) || ''}
+                data-value-type=${this.valuetype}
+              />
+            `} <button class="record-action" @click=${e => this._sort(e)} tabindex="-1">&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 (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()
+    }
+
+    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 newmap = {}
+
+    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
+
+      var input = inputs[inputs.length - 1]
+
+      var value
+
+      if (input.type == 'checkbox') value = Boolean(input.checked)
+      else value = input.value
+
+      if (key) newmap[key] = value || this._defaultValue()
+    }
+
+    this.value = newmap
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  /* default를 제외한 map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
+  _toArray(map) {
+    var array = []
+
+    for (var key in map) {
+      if (key == 'default') continue
+      array.push({
+        key: key,
+        value: map[key]
+      })
+    }
+
+    return array
+  }
+
+  _sort(e) {
+    var sorter =
+      this.keytype === 'number'
+        ? function (a, b) {
+            return parseFloat(b.key) < parseFloat(a.key)
+          }
+        : function (a, b) {
+            return b.key < a.key
+          }
+
+    var map = this._toArray(this.value)
+      .sort(sorter)
+      .reduce(function (sum, i) {
+        sum[i.key] = i.value
+        return sum
+      }, {})
+
+    map.default = this.value.default
+
+    this.value = map
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  _add(e: MouseEvent) {
+    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: MouseEvent) {
+    var record = (e.target as HTMLElement).parentElement
+
+    ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''
+
+    this._build()
+  }
+}