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

package/src/ox-input-fill-style.ts.xxx

@@ -1,361 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/i18n/ox-i18n.js'
-import './ox-input-color'
-import './ox-input-color-gradient'
-import './ox-input-background-pattern'
-
-import { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern'
-import { GradientOption, OxInputColorGradient } from './ox-input-color-gradient'
-import { PropertyValues, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { ColorStop } from './ox-input-color-stops'
-import { OxFormField } from './ox-form-field'
-
-export type FillStyle =
-  | {
-      type?: 'no' | 'solid' | 'gradient' | 'pattern'
-      gradientType?: 'linear' | 'radial'
-      colorStops?: ColorStop[]
-      rotation?: number
-      center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'
-      image?: HTMLImageElement | string
-      offsetX?: number
-      offsetY?: number
-      width?: number
-      height?: number
-      align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'
-      fitPattern?: boolean
-    }
-  | 'no'
-  | string
-
-@customElement('ox-input-color-style')
-export class OxInputColorStyle extends OxFormField {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-    }
-
-    [fill-type] {
-      display: flex;
-      margin: 0 0 14px 0;
-    }
-
-    [fill-type] * {
-      flex: auto;
-      margin: 0;
-      text-align: left;
-      align-self: center;
-    }
-
-    .grid-10 {
-      display: grid;
-
-      grid-template-columns: repeat(10, 1fr);
-      grid-gap: 5px;
-      grid-auto-rows: minmax(24px, auto);
-    }
-
-    .grid-10 > ox-input-color {
-      grid-column: span 4;
-    }
-
-    .grid-10 > .icon-only-label {
-      grid-column: span 1;
-
-      background: url(/assets/images/icon-properties-label.png) no-repeat;
-      float: left;
-      margin: 0;
-    }
-
-    .icon-only-label.color {
-      background-position: 70% -498px;
-    }
-
-    [editors] > :not([active]) {
-      display: none;
-    }
-  `
-
-  @property({ type: Object }) value?: FillStyle
-  @property({ type: String }) fillType?: string
-  @property({ type: String }) solid?: string
-  @property({ type: Object }) gradient?: GradientOption
-  @property({ type: Object }) pattern?: BackgroundPatternOption
-
-  private _block_reset: boolean = false
-
-  updated(changes: PropertyValues<this>) {
-    changes.has('value') && this._onChangedValue(this.value || {})
-  }
-
-  render() {
-    return html`
-      <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>
-        <input
-          type="radio"
-          id="fill-type-no"
-          name="fill-type"
-          value="no"
-          .checked=${!this.fillType || this.fillType == 'no'}
-        />
-        <label for="fill-type-no"><ox-i18n msgid="label.no-fill">no fill</ox-i18n></label>
-        <input type="radio" id="fill-type-solid" name="fill-type" value="solid" .checked=${this.fillType == 'solid'} />
-        <label for="fill-type-solid"><ox-i18n msgid="label.solid">solid</ox-i18n></label>
-        <input
-          type="radio"
-          id="fill-type-gradient"
-          name="fill-type"
-          value="gradient"
-          .checked=${this.fillType == 'gradient'}
-        />
-        <label for="fill-type-gradient"><ox-i18n msgid="label.gradient">gradient</ox-i18n></label>
-        <input
-          type="radio"
-          id="fill-type-pattern"
-          name="fill-type"
-          value="pattern"
-          .checked=${this.fillType == 'pattern'}
-        />
-        <label for="fill-type-pattern"><ox-i18n msgid="label.pattern">pattern</ox-i18n></label>
-      </div>
-
-      <div editors>
-        <div ?active=${this.fillType == 'no'}></div>
-
-        <div class="grid-10" ?active=${this.fillType == 'solid'}>
-          <label class="icon-only-label color"></label>
-          <ox-input-color @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}> </ox-input-color>
-        </div>
-
-        <div ?active=${this.fillType == 'gradient'}>
-          <ox-input-color-gradient @change=${(e: Event) => this._onChandedGradient(e)} .value=${this.gradient}>
-          </ox-input-color-gradient>
-        </div>
-
-        <div ?active=${this.fillType == 'pattern'}>
-          <ox-input-background-pattern @change=${(e: Event) => this._onChangedPattern(e)} .value=${this.pattern}>
-          </ox-input-background-pattern>
-        </div>
-      </div>
-    `
-  }
-
-  async _onChangedValue(value: FillStyle) {
-    /*
-     * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.
-     */
-    await this.requestUpdate()
-
-    /* 설정 값에 따라서, 멤버 속성을 설정한다. */
-    if (!value) {
-      this.fillType = 'no'
-
-      if (!this._block_reset) {
-        this.solid = undefined
-        this.gradient = undefined
-        this.pattern = undefined
-      }
-
-      this._block_reset = false
-      return
-    }
-
-    switch (typeof value) {
-      case 'string':
-        this.fillType = 'solid'
-        this.solid = value
-
-        if (!this._block_reset) {
-          this.gradient = undefined
-          this.pattern = undefined
-        }
-        break
-      case 'object':
-        this.fillType = value.type
-
-        if (value.type === 'gradient') {
-          this.gradient = {
-            type: value.gradientType || 'linear',
-            colorStops: value.colorStops || [
-              {
-                position: 0,
-                color: this.solid || '#000000'
-              },
-              {
-                position: 1,
-                color: this.solid || '#FFFFFF'
-              }
-            ],
-            rotation: Number(value.rotation) || 0,
-            center: value.center
-          }
-
-          if (!this._block_reset) {
-            this.pattern = undefined
-            this.solid = undefined
-          }
-        } else if (value.type === 'pattern') {
-          this.pattern = {
-            image: value.image,
-            offsetX: Number(value.offsetX) || 0,
-            offsetY: Number(value.offsetY) || 0,
-            width: Number(value.width),
-            height: Number(value.height),
-            align: value.align,
-            fitPattern: value.fitPattern
-          }
-
-          if (!this._block_reset) {
-            this.gradient = undefined
-            this.solid = undefined
-          }
-        }
-
-        break
-      default:
-    }
-
-    this._block_reset = false
-  }
-
-  _onChangedFillType(e: Event) {
-    const element = e.target as HTMLInputElement
-    this.fillType = element.value
-
-    switch (this.fillType) {
-      case 'gradient':
-        if (!this.gradient) {
-          this.gradient = {
-            type: 'linear',
-            colorStops: [
-              {
-                position: 0,
-                color: this.solid || '#000000'
-              },
-              {
-                position: 1,
-                color: this.solid || '#FFFFFF'
-              }
-            ],
-            rotation: 0,
-            center: 'center'
-          }
-        }
-
-        this.value = {
-          type: 'gradient',
-          gradientType: this.gradient.type || 'linear',
-          colorStops: this.gradient.colorStops || [
-            {
-              position: 0,
-              color: this.solid || '#000000'
-            },
-            {
-              position: 1,
-              color: this.solid || '#FFFFFF'
-            }
-          ],
-          rotation: Number(this.gradient.rotation) || 0,
-          center: this.gradient.center
-        }
-        break
-
-      case 'pattern':
-        if (!this.pattern) this.pattern = {}
-
-        this.value = {
-          type: 'pattern',
-          image: this.pattern.image,
-          offsetX: Number(this.pattern.offsetX) || 0,
-          offsetY: Number(this.pattern.offsetY) || 0,
-          width: Number(this.pattern.width),
-          height: Number(this.pattern.height),
-          align: this.pattern.align,
-          fitPattern: this.pattern.fitPattern
-        }
-        break
-
-      case 'solid':
-        if (!this.solid) this.solid = '#fff'
-        this.value = this.solid
-        break
-
-      case 'no':
-        this.value = ''
-        break
-    }
-
-    this._block_reset = true
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _onChangedSolid(e: Event) {
-    if (this.fillType !== 'solid') return
-
-    this.solid = (e.target as HTMLInputElement).value
-
-    this.value = this.solid
-
-    this._block_reset = true
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _onChandedGradient(e: Event) {
-    /*
-     * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.
-     * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.
-     */
-
-    if (this.fillType !== 'gradient') {
-      return
-    }
-
-    this.gradient = (e.target as OxInputColorGradient).value
-
-    this.value = {
-      type: 'gradient',
-      gradientType: this.gradient.type || 'linear',
-      colorStops: this.gradient.colorStops || [
-        {
-          position: 0,
-          color: this.solid || '#000000'
-        },
-        {
-          position: 1,
-          color: this.solid || '#FFFFFF'
-        }
-      ],
-      rotation: Number(this.gradient.rotation) || 0,
-      center: this.gradient.center
-    }
-
-    this._block_reset = true
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _onChangedPattern(e: Event) {
-    if (this.fillType !== 'pattern') return
-
-    this.pattern = (e.target as OxInputBackgroundPattern).value
-
-    this.value = {
-      type: 'pattern',
-      image: this.pattern?.image,
-      offsetX: Number(this.pattern?.offsetX) || 0,
-      offsetY: Number(this.pattern?.offsetY) || 0,
-      width: Number(this.pattern?.width),
-      height: Number(this.pattern?.height),
-      align: this.pattern?.align,
-      fitPattern: this.pattern?.fitPattern
-    }
-
-    this._block_reset = true
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}

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

@@ -1,292 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit'
-
-import './ox-input-color'
-
-/**
-range value editor element
-
-Example:
-
-  <ox-input-value-range range=${range}
-                            rangetype=${type}
-                            valuetype=${valuetype}>
-  </ox-input-value-range>
-*/
-export  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,
-        ox-input-color {
-          flex: 1;
-        }
-
-        ox-input-color {
-          --ox-input-color-input-color: {
-            margin: 2px;
-          }
-          --ox-input-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` <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 => 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 => 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`
-              <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 => 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)