@operato/input 1.0.0-alpha.8 → 1.0.0-alpha.9

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-ranges.ts.ing

@@ -4,19 +4,19 @@
 
 import { LitElement, html, css } from 'lit'
 
-import './things-editor-color'
+import './ox-input-color'
 
 /**
 range value editor element
 
 Example:
 
-  <things-editor-value-range range=${range}
+  <ox-input-value-range range=${range}
                             rangetype=${type}
                             valuetype=${valuetype}>
-  </things-editor-value-range>
+  </ox-input-value-range>
 */
-export default class ThingsEditorValueRange extends LitElement {
+export  class ThingsEditorValueRange extends LitElement {
   static get is() {
     return 'things-editor-value-range'
   }
@@ -65,15 +65,15 @@ export default class ThingsEditorValueRange 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: 2px;
           }
-          --things-editor-color-input-span: {
+          --ox-input-color-input-span: {
             width: 12px;
             height: 12px;
           }
@@ -121,7 +121,7 @@ export default class ThingsEditorValueRange extends LitElement {
             ${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}> </things-editor-color> `
+              ? html` <ox-input-color data-value .value=${item.value}> </ox-input-color> `
               : html`
                   <input
                     type="text"
@@ -142,7 +142,7 @@ export default class ThingsEditorValueRange extends LitElement {
         ${this.valuetype == 'boolean'
           ? html` <input type="checkbox" data-value data-value-type=${this.valuetype} /> `
           : this.valuetype == 'color'
-          ? html` <things-editor-color data-value value="" placeholder="value"> </things-editor-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>
@@ -162,8 +162,8 @@ export default class ThingsEditorValueRange extends LitElement {
             `
           : this.valuetype == 'color'
           ? html`
-              <things-editor-color data-value .value=${(this.value && this.value.default) || ''} placeholder="value">
-              </things-editor-color>
+              <ox-input-color data-value .value=${(this.value && this.value.default) || ''} placeholder="value">
+              </ox-input-color>
             `
           : html`
               <input

package/src/{ox-input-id.ts → ox-input-scene-component-id.ts}

@@ -3,7 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 
 import { OxFormField } from './ox-form-field'
 
-@customElement('ox-input-id')
+@customElement('ox-input-scene-component-id')
 export class OxInputId extends OxFormField {
   static styles = css`
     :host {

package/src/ox-input-stack.ts

@@ -8,7 +8,7 @@ import { customElement, property } from 'lit/decorators.js'
 import { OxFormField } from './ox-form-field'
 
 @customElement('ox-input-stack')
-export default class OxInputStack extends OxFormField {
+export class OxInputStack extends OxFormField {
   static styles = [
     css`
       :host {

package/translations/en.json

@@ -0,0 +1 @@
+{}

package/translations/ko.json

@@ -0,0 +1 @@
+{}

package/translations/ms.json

@@ -0,0 +1 @@
+{}

package/translations/zh.json

@@ -0,0 +1 @@
+{}