@operato/input 0.4.2 → 1.0.0-alpha.10

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

@@ -0,0 +1,361 @@
+/**
+ * @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-keyvalues.ts.ing

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import './things-editor-color'
+import './ox-input-color'
 
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -19,7 +19,7 @@ Example:
   </ox-input-value-map>
 */
 @customElement('ox-input-keyvalues')
-export default class OxInputValueMap extends LitElement {
+export  class OxInputValueMap extends LitElement {
   static styles = [
     css`
       :host {
@@ -56,15 +56,15 @@ export default class OxInputValueMap extends LitElement {
       }
 
       input,
-      things-editor-color {
+      ox-input-color {
         flex: 1;
       }
 
-      things-editor-color {
-        --things-editor-color-input-color: {
+      ox-input-color {
+        --ox-input-color-input-color: {
           margin: 1px;
         }
-        --things-editor-color-input-span: {
+        --ox-input-color-input-span: {
           width: 10px;
           height: 10px;
         }
@@ -92,7 +92,7 @@ export default class OxInputValueMap extends LitElement {
             <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` <ox-input-color data-value .value=${item.value} tabindex="-1"> </ox-input-color> `
               : html`
                   <input
                     type="text"
@@ -110,7 +110,7 @@ export default class OxInputValueMap extends LitElement {
         <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` <ox-input-color data-value value="" tabindex="-1" 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: MouseEvent) => this._add(e)} tabindex="-1">+</button>
       </div>
@@ -127,13 +127,13 @@ export default class OxInputValueMap extends LitElement {
             `
           : this.valuetype == 'color'
           ? html`
-              <things-editor-color
+              <ox-input-color
                 data-value
                 .value=${(this.value && this.value.default) || ''}
                 placeholder="value"
                 tabindex="-1"
               >
-              </things-editor-color>
+              </ox-input-color>
             `
           : html`
               <input

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-color values=${values}>
+    </ox-input-multiple-color>
+*/
+
+@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 { LitElement, 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)
+    )
+  }
+}