@operato/input 8.0.0-alpha.51 → 8.0.0-beta.1

package/src/ox-input-data.ts

@@ -1,219 +0,0 @@
-import './ox-input-code'
-
-import { css, html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import { live } from 'lit/directives/live.js'
-
-import { OxFormField } from './ox-form-field.js'
-import { OxInputCode } from './ox-input-code.js'
-import { isEqual } from 'lodash-es'
-import 'ses'
-
-/**
-WEB Component for code-mirror based data editor.
-
-Example:
-
-  <ox-input-data value=${text}>
-  </ox-input-data>
-*/
-@customElement('ox-input-data')
-export class OxInputData extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-      }
-
-      div.datatype {
-        display: flex;
-        align-items: center;
-        margin-bottom: var(--spacing-small);
-        padding: var(--spacing-small);
-        background-color: var(--md-sys-color-primary-container);
-        border: 1px solid var(--md-sys-color-primary-fixed-dim);
-        border-radius: var(--md-sys-shape-corner-small);
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        color: var(--md-sys-color-on-primary-container);
-      }
-
-      div.datatype md-icon {
-        margin-left: auto;
-        color: var(--md-sys-color-primary);
-        cursor: pointer;
-      }
-      div.datatype label {
-        margin-right: var(--spacing-small);
-      }
-
-      ox-input-code {
-        flex: 1;
-        max-width: 260px;
-        overflow: auto;
-      }
-    `
-  ]
-
-  render() {
-    const valueType = typeof this.value
-
-    return html`
-      <div class="datatype">
-        <input
-          id="string"
-          type="radio"
-          name="data-type"
-          data-value="string"
-          .checked=${live(valueType == 'string')}
-          @click=${() => this._setDataType('string')}
-          ?disabled=${this.disabled}
-        />
-        <label for="string">string</label>
-
-        <input
-          id="number"
-          type="radio"
-          name="data-type"
-          data-value="number"
-          .checked=${live(valueType == 'number')}
-          @click=${() => this._setDataType('number')}
-          ?disabled=${this.disabled}
-        />
-        <label for="number">number</label>
-
-        <input
-          id="object"
-          type="radio"
-          name="data-type"
-          data-value="object"
-          .checked=${live(valueType == 'object')}
-          @click=${() => this._setDataType('object')}
-          ?disabled=${this.disabled}
-        />
-        <label for="object">object</label>
-
-        <md-icon @click=${() => this._clearData()} title="delete">delete_forever</md-icon>
-      </div>
-
-      <ox-input-code
-        .value=${this._getStringData(this.value)}
-        language="text"
-        editor
-        ?disabled=${this.disabled}
-        @change=${(e: CustomEvent) => {
-          e.stopPropagation()
-          this._setDataTypeAndValue(valueType, (e.target as any).value)
-        }}
-      >
-      </ox-input-code>
-    `
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', e => {
-      e.stopPropagation()
-
-      const target = e.target as OxInputCode
-      if (target.hasAttribute('editor')) {
-        if (this.value === undefined && target.value == '') {
-          return
-        }
-        this.value = target.value
-      }
-    })
-  }
-
-  _setDataTypeAndValue(type: string | undefined | null, value: any) {
-    /* value must be a string */
-    try {
-      switch (type) {
-        case 'number':
-          if (!isNaN(Number(value))) {
-            value = Number(value)
-          }
-          break
-        case 'object':
-          const compartment = new Compartment()
-          value = compartment.evaluate(`(${value})`)
-          break
-      }
-    } catch (e) {
-      console.error('Error parsing value:', e)
-    }
-
-    if (isEqual(this.value, value)) {
-      return
-    }
-
-    this.value = value
-
-    this.requestUpdate()
-    this._onAfterValueChange()
-  }
-
-  _setDataType(type: string | undefined | null) {
-    if (typeof this.value == type) {
-      return
-    }
-
-    var value = this.value
-
-    try {
-      switch (type) {
-        case 'string':
-          value = this._getStringData(value)
-          break
-        case 'number':
-          if (!isNaN(value)) {
-            value = Number(value)
-          }
-          break
-        case 'object':
-          const compartment = new Compartment()
-          value = compartment.evaluate(`(${value})`)
-          break
-      }
-    } catch (e) {
-      console.error('Error setting data type:', e)
-    }
-
-    if (isEqual(this.value, value)) {
-      this.requestUpdate()
-      return
-    }
-
-    this.value = value
-
-    this.requestUpdate()
-    this._onAfterValueChange()
-  }
-
-  _clearData() {
-    this.value = undefined
-    this._onAfterValueChange()
-  }
-
-  _getStringData(data: any) {
-    const type = typeof data
-
-    switch (type) {
-      case 'object':
-        return JSON.stringify(data, null, 1)
-      case 'undefined':
-        return ''
-      default:
-        return String(data) || ''
-    }
-  }
-
-  async _onAfterValueChange() {
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-}

package/src/ox-input-direction.ts

@@ -1,92 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field'
-
-@customElement('ox-input-direction')
-export class OxInputDirection extends OxFormField {
-  static styles = css`
-    :host {
-      --md-icon-size: 1.4em;
-    }
-
-    div {
-      display: flex;
-      justify-content: space-between;
-      max-width: 140px;
-    }
-
-    md-icon {
-      color: var(--md-sys-color-on-background);
-      background-color: var(--md-sys-color-background);
-    }
-
-    md-icon[selected] {
-      color: var(--md-sys-color-on-primary);
-      background-color: var(--md-sys-color-primary);
-    }
-
-    /* 아이콘 회전 */
-    md-icon[data-value='W'] {
-      transform: rotate(-90deg);
-    }
-
-    md-icon[data-value='N'] {
-      transform: rotate(0deg);
-    }
-
-    md-icon[data-value='S'] {
-      transform: rotate(180deg);
-    }
-
-    md-icon[data-value='E'] {
-      transform: rotate(90deg);
-    }
-  `
-
-  @property({ type: String }) value?: string
-  @property({ type: Boolean }) inbound?: boolean = false
-
-  render() {
-    const value = this.value
-
-    return html`
-      <div @click=${this.onClick.bind(this)}>
-        ${this.inbound
-          ? html`
-              <md-icon ?selected=${value == 'W'} data-value="W">step_into</md-icon>
-              <md-icon ?selected=${value == 'N'} data-value="N">step_into</md-icon>
-              <md-icon ?selected=${value == 'S'} data-value="S">step_into</md-icon>
-              <md-icon ?selected=${value == 'E'} data-value="E">step_into</md-icon>
-            `
-          : html`
-              <md-icon ?selected=${value == 'W'} data-value="W">step_out</md-icon>
-              <md-icon ?selected=${value == 'N'} data-value="N">step_out</md-icon>
-              <md-icon ?selected=${value == 'S'} data-value="S">step_out</md-icon>
-              <md-icon ?selected=${value == 'E'} data-value="E">step_out</md-icon>
-            `}
-      </div>
-    `
-  }
-
-  onClick(e: MouseEvent) {
-    e.stopPropagation()
-
-    if (this.disabled) {
-      return
-    }
-
-    const target = e.target as Element
-    const value = target.getAttribute('data-value') as string
-
-    this.value = this.value === value ? undefined : value
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-  }
-}

package/src/ox-input-duration.ts

@@ -1,175 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-import { OxFormField } from './ox-form-field'
-
-@customElement('ox-input-duration')
-export class OxInputDuration extends OxFormField {
-  static styles = css`
-    :host {
-      text-align: center;
-      padding: 10px;
-      --md-filled-icon-button-container-height: var(--form-element-height-medium);
-      --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-small);
-    }
-
-    :host * {
-      box-sizing: border-box;
-    }
-
-    :host *:focus {
-      outline: none;
-    }
-
-    form {
-      display: flex;
-      flex-direction: row;
-
-      align-items: center;
-    }
-
-    [padding] {
-      min-width: 100px;
-    }
-
-    input {
-      box-sizing: border-box;
-      padding: 0 var(--spacing-small);
-      height: var(--form-element-height-medium);
-      border: 1px solid var(--md-sys-color-outline);
-      border-radius: var(--md-sys-shape-corner-small);
-      max-width: 70px;
-      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-      color: var(--md-sys-color-on-primary-container);
-      text-align: right;
-    }
-
-    input:focus {
-      outline: none;
-      border-color: var(--md-sys-color-secondary-fixed-dim);
-    }
-
-    input:invalid {
-      border-bottom: 1px solid var(--md-sys-color-error);
-      color: var(--md-sys-color-error);
-    }
-
-    label {
-      width: 100%;
-      margin-right: var(--spacing-medium);
-      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  `
-
-  @property({ type: Number }) value?: number
-
-  render() {
-    var d = Number(this.value || 0)
-
-    const days = Math.floor(d / (3600 * 24))
-    d -= days * 24 * 3600
-    const hours = Math.floor(d / 3600)
-    d -= hours * 3600
-    const minutes = Math.floor(d / 60)
-    const seconds = d - minutes * 60
-
-    return html`
-      <form @change=${this.onChange.bind(this)}>
-        <div padding></div>
-        <input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" ?disabled=${this.disabled} />
-        <label for="days">${i18next.t('label.days')}</label>
-
-        <input
-          id="hours"
-          type="number"
-          .value=${String(hours || 0)}
-          pattern="[01]?\\d|2[0-3]"
-          ?disabled=${this.disabled}
-        />
-        <label for="hour">${i18next.t('label.hours')}</label>
-
-        <input
-          id="minutes"
-          type="number"
-          .value=${String(minutes || 0)}
-          pattern="[0-5]?\\d"
-          ?disabled=${this.disabled}
-        />
-        <label for="minute">${i18next.t('label.minutes')}</label>
-
-        <input
-          id="seconds"
-          type="number"
-          .value=${String(seconds || 0)}
-          pattern="[0-5]?\\d"
-          ?disabled=${this.disabled}
-        />
-        <label for="second">${i18next.t('label.seconds')}</label>
-
-        <md-filled-icon-button
-          type="button"
-          @click=${(e: Event) => {
-            e.preventDefault()
-            e.stopPropagation()
-
-            this.value = 0
-
-            this.dispatchEvent(
-              new CustomEvent('change', {
-                bubbles: true,
-                composed: true,
-                detail: this.value
-              })
-            )
-          }}
-          ?disabled=${this.disabled}
-        >
-          <md-icon>backspace</md-icon>
-        </md-filled-icon-button>
-        <div padding></div>
-      </form>
-    `
-  }
-
-  firstUpdated() {
-    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()
-  }
-
-  @query('#days') days!: HTMLInputElement
-  @query('#hours') hours!: HTMLInputElement
-  @query('#minutes') minutes!: HTMLInputElement
-  @query('#seconds') seconds!: HTMLInputElement
-
-  onChange(e: Event) {
-    e.stopPropagation()
-
-    var form = this.renderRoot.querySelector('form') as HTMLFormElement
-    var valid = form.checkValidity()
-    if (!valid) {
-      form.reportValidity()
-      return
-    }
-
-    const days = Number(this.days.value)
-    const hours = Number(this.hours.value)
-    const minutes = Number(this.minutes.value)
-    const seconds = Number(this.seconds.value)
-
-    this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: this.value
-      })
-    )
-  }
-}

package/src/ox-input-file.ts

@@ -1,209 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-
-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'
-
-@customElement('ox-input-file')
-export class OxInputFile extends OxFormField {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        border-radius: var(--md-sys-shape-corner-small);
-        align-items: center;
-        justify-content: center;
-        padding: var(--padding-default, 9px);
-        min-height: 100px;
-        text-transform: capitalize;
-
-        border: 1px dashed var(--md-sys-color-outline-variant);
-        background-color: var(--md-sys-color-surface);
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-      }
-      :host > span {
-        color: var(--md-sys-color-primary);
-        font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));
-      }
-
-      :host > md-icon {
-        color: var(--md-sys-color-primary);
-        --md-icon-size: var(--file-uploader-icon-size, 36px);
-      }
-
-      :host(.candrop) {
-        background-color: var(--md-sys-color-primary-fixed);
-        border: 1px dashed var(--md-sys-color-primary-fixed-dim);
-      }
-
-      #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);
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        color: var(--md-sys-color-on-surface-variant);
-      }
-
-      ul {
-        max-width: 500px;
-        width: 100%;
-        list-style: none;
-        margin: 5px 0 0 0;
-        padding: 0;
-        max-height: 46px;
-        overflow: auto;
-        background-color: var(--md-sys-color-on-primary);
-      }
-      li {
-        text-align: left;
-
-        padding: 3px 5px 2px 5px;
-        border-bottom: var(--file-uploader-li-border-bottom);
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        color: var(--md-sys-color-on-primary-container);
-        display: flex;
-        align-items: center;
-      }
-      li md-icon {
-        cursor: pointer;
-        font-size: var(--icon-size-small);
-        margin-left: auto;
-      }
-      li md-icon:hover,
-      li md-icon:active {
-        color: var(--md-sys-color-error);
-      }
-    `
-  ]
-
-  @property({ type: Boolean }) multiple?: boolean
-  @property({ type: String }) accept?: string
-  @property({ type: String }) icon?: string = 'upload'
-  @property({ type: String }) label?: 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' })
-  attachFileList: boolean = false
-
-  @query('#input-file') fileInput!: HTMLInputElement
-
-  render() {
-    var files: File[] = this.value || []
-
-    return html`
-      <md-icon>${this.icon || 'upload'}</md-icon>
-
-      <span>${this.description || '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)}
-        ?disabled=${this.disabled}
-      />
-
-      <label for="input-file">${this.label || 'select files'}</label>
-
-      ${!this.hideFileList && files?.length
-        ? html` <ul>
-            ${files.map(
-              file => html`
-                <li>
-                  - ${file.name}
-                  <md-icon
-                    @click=${(e: Event) => {
-                      if (this.disabled) {
-                        return
-                      }
-                      files.splice(files.indexOf(file), 1)
-                      this.value = [...files]
-                      this._notifyChange()
-                    }}
-                    >delete_outline</md-icon
-                  >
-                </li>
-              `
-            )}
-          </ul>`
-        : html``}
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('value') && !(this.value instanceof Array)) {
-      this.value = !this.value ? [] : [this.value]
-    }
-  }
-
-  firstUpdated() {
-    FileDropHelper.set(this)
-
-    this.addEventListener('file-drop', (e: Event) => {
-      if (this.disabled) {
-        return
-      }
-
-      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
-      })
-    )
-  }
-}