@operato/input 0.2.33 → 0.2.38

package/src/ox-checkbox.ts

@@ -1,16 +1,14 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
 /*
   This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.
 */
 
-import { css, html, LitElement } from 'lit'
+import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
+import { OxFormField } from './ox-formfield'
+
 @customElement('ox-checkbox')
-export class OxCheckbox extends LitElement {
+export class OxCheckbox extends OxFormField {
   static styles = [
     css`
       :host {
@@ -44,7 +42,7 @@ export class OxCheckbox extends LitElement {
         border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));
       }
 
-      a[checked] {
+      :host([checked]) a {
         background-color: var(--ox-checkbox-checked-background-color, #fff);
         border: var(--ox-checkbox-checked-border, 1px solid #38a25b);
       }
@@ -53,7 +51,7 @@ export class OxCheckbox extends LitElement {
         fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));
       }
 
-      [checked] path {
+      :host([checked]) path {
         fill: var(--ox-checkbox-checked-color, #38a25b);
       }
 
@@ -67,28 +65,22 @@ export class OxCheckbox extends LitElement {
         color: var(--ox-checkbox-label-color, #3a5877);
       }
 
-      [checked] + [label] {
+      :host([checked]) [label] {
         font-weight: var(--ox-checkbox-checked-font-weight, bold);
       }
     `
   ]
 
-  @property({ type: Boolean }) checked: boolean = false
+  @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean = false
   @property({ type: Boolean }) disabled: boolean = false
-  @property({ type: String }) name: string = ''
+  @property({ type: String }) name?: string
 
   @state() _hasInner: boolean = !!this.innerHTML.trim().length
 
   render() {
     return html`
       <div @click=${this.onClick} ?disabled=${this.disabled}>
-        <a
-          href="#"
-          @click=${(e: Event) => e.preventDefault()}
-          @keydown=${this.onKeyDown}
-          ?checked=${this.checked}
-          checkbox
-        >
+        <a href="#" @click=${(e: Event) => e.preventDefault()} checkbox>
           ${this.checked ? this.checkedIcon : this.uncheckedIcon}
         </a>
         ${this._hasInner
@@ -100,6 +92,13 @@ export class OxCheckbox extends LitElement {
     `
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.setAttribute('tabindex', '0')
+    this.addEventListener('keydown', this.onKeyDown.bind(this))
+  }
+
   onClick() {
     if (this.disabled) {
       return
@@ -120,22 +119,30 @@ export class OxCheckbox extends LitElement {
   }
 
   get checkedIcon() {
-    return html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-    </svg>`
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+      </svg>
+    `
   }
 
   get uncheckedIcon() {
-    return html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-    </svg>`
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+      </svg>
+    `
   }
 
   onKeyDown(e: KeyboardEvent) {
     e.preventDefault()
 
-    if (e.keyCode == 32 || e.code == 'Space') {
+    if (e.key === ' ' || e.key == 'Spacebar') {
       this.onClick()
     }
   }
+
+  protected appendFormData({ formData }: FormDataEvent): void {
+    this.name && formData.append(this.name, this.checked ? 'true' : 'false')
+  }
 }

package/src/ox-formfield.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit-element'
+import { property } from 'lit/decorators.js'
+
+export abstract class OxFormField extends LitElement {
+  @property({ type: String }) name?: string
+  @property() value?: any
+
+  private _form: HTMLFormElement | null = null
+  private _formdataEventHandler: EventListener | null = null
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+
+    if (this.name) {
+      this._form = this.closest('form')
+      if (this._form) {
+        this._formdataEventHandler = this.appendFormData.bind(this) as EventListener
+        this._form.addEventListener('formdata', this._formdataEventHandler)
+      }
+    }
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
+
+    if (this._form) {
+      this._form.removeEventListener('formdata', this._formdataEventHandler!)
+      this._form = null
+      this._formdataEventHandler = null
+    }
+  }
+
+  protected appendFormData({ formData }: FormDataEvent): void {
+    this.name && formData.append(this.name, this.value)
+  }
+}

package/src/ox-input-3dish.ts

@@ -2,13 +2,14 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { css, html, LitElement } from 'lit'
+import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { OxFormField } from './ox-formfield'
 import { OxInputAngle } from './ox-input-angle'
 
 @customElement('ox-input-3dish')
-export class OxInput3Dish extends LitElement {
+export class OxInput3Dish extends OxFormField {
   static styles = [
     css`
       :host {
@@ -32,19 +33,20 @@ export class OxInput3Dish extends LitElement {
     `
   ]
 
-  @property({ type: Object }) dimension?: { width: number; height: number; depth: number }
-  /*
-   * translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.
-   */
-  @property({ type: Object }) translatex?: { x: number; y: number; z: number }
-  @property({ type: Object }) rotate?: { x: number; y: number; z: number }
-  @property({ type: Object }) scale?: { x: number; y: number; z: number }
+  @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }
+  // translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.
+  @property({ type: Object }) translatex?: { x?: number; y?: number; z?: number }
+  @property({ type: Object }) rotate?: { x?: number; y?: number; z?: number }
+  @property({ type: Object }) scale?: { x?: number; y?: number; z?: number }
 
   firstUpdated() {
     this.renderRoot.addEventListener('change', this._onChange.bind(this))
   }
 
   _onChange(e: Event) {
+    e.stopPropagation()
+    e.preventDefault()
+
     var element = e.target as HTMLElement
     var id = element.id
     var prop = id.substr(1)
@@ -52,7 +54,7 @@ export class OxInput3Dish extends LitElement {
 
     switch (element.tagName) {
       case 'PROPERTY-ANGLE':
-        value = Number((element as OxInputAngle).radian || 0)
+        value = Number((element as OxInputAngle).value || 0)
         break
     }
 
@@ -60,15 +62,17 @@ export class OxInput3Dish extends LitElement {
       case 'tx':
       case 'ty':
       case 'tz':
+        this.translatex = {
+          ...this.translatex,
+          [prop]: value
+        }
+
         this.dispatchEvent(
           new CustomEvent('translate-changed', {
             bubbles: true,
             composed: true,
             detail: {
-              value: {
-                ...this.translatex,
-                [prop]: value
-              }
+              value: this.translatex
             }
           })
         )
@@ -77,15 +81,17 @@ export class OxInput3Dish extends LitElement {
       case 'rx':
       case 'ry':
       case 'rz':
+        this.rotate = {
+          ...this.rotate,
+          [prop]: value
+        }
+
         this.dispatchEvent(
           new CustomEvent('rotate-changed', {
             bubbles: true,
             composed: true,
             detail: {
-              value: {
-                ...this.rotate,
-                [prop]: value
-              }
+              value: this.rotate
             }
           })
         )
@@ -94,15 +100,17 @@ export class OxInput3Dish extends LitElement {
       case 'sx':
       case 'sy':
       case 'sz':
+        this.scale = {
+          ...this.scale,
+          [prop]: value
+        }
+
         this.dispatchEvent(
           new CustomEvent('scale-changed', {
             bubbles: true,
             composed: true,
             detail: {
-              value: {
-                ...this.scale,
-                [prop]: value
-              }
+              value: this.scale
             }
           })
         )
@@ -110,19 +118,38 @@ export class OxInput3Dish extends LitElement {
 
       default:
         // dimension
+        this.dimension = {
+          ...this.dimension,
+          [prop]: value
+        }
+
         this.dispatchEvent(
           new CustomEvent('dimension-changed', {
             bubbles: true,
             composed: true,
             detail: {
-              value: {
-                ...this.dimension,
-                [prop]: value
-              }
+              value: this.dimension
             }
           })
         )
     }
+
+    this.value = {
+      translate: this.translatex,
+      rotate: this.rotate,
+      scale: this.scale,
+      dimension: this.dimension
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          value: this.value
+        }
+      })
+    )
   }
 
   render() {
@@ -141,10 +168,19 @@ export class OxInput3Dish extends LitElement {
       <input type="number" id="ty" .value=${this.translatex?.y} />
       <input type="number" id="tz" .value=${this.translatex?.z} />
 
+      <label><i18n-msg msgid="label.scale">scale</i18n-msg></label>
+      <input type="number" id="sx" .value=${this.scale?.x} />
+      <input type="number" id="sy" .value=${this.scale?.y} />
+      <input type="number" id="sz" .value=${this.scale?.z} />
+
       <label><i18n-msg msgid="label.rotate">rotate</i18n-msg></label>
-      <ox-input-angle id="rx" .radian=${this.rotate?.x}></ox-input-angle>
-      <ox-input-angle id="ry" .radian=${this.rotate?.y}></ox-input-angle>
-      <ox-input-angle id="rz" .radian=${this.rotate?.z}></ox-input-angle>
+      <ox-input-angle id="rx" .value=${this.rotate?.x}></ox-input-angle>
+      <ox-input-angle id="ry" .value=${this.rotate?.y}></ox-input-angle>
+      <ox-input-angle id="rz" .value=${this.rotate?.z}></ox-input-angle>
     `
   }
+
+  protected appendFormData({ formData }: FormDataEvent): void {
+    this.name && formData.append(this.name, JSON.stringify(this.value))
+  }
 }

package/src/ox-input-angle.ts

@@ -2,11 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { css, html, LitElement } from 'lit'
+import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
+import { OxFormField } from './ox-formfield'
+
 @customElement('ox-input-angle')
-export class OxInputAngle extends LitElement {
+export class OxInputAngle extends OxFormField {
   static styles = [
     css`
       :host {
@@ -22,32 +24,29 @@ export class OxInputAngle extends LitElement {
     `
   ]
 
-  @property({ type: Number }) radian?: string | number
+  @property({ type: String }) placeholder?: string
+
   @query('input') input!: HTMLInputElement
 
   render() {
     return html`
       <input
         type="number"
-        .value=${this._toDegree(this.radian)}
+        .value=${this._toDegree(this.value)}
+        .placeholder=${this.placeholder || '0°'}
         @change=${(e: Event) => this._onChangeValue(e)}
-        .placeholder=${this.placeholder}
       />
     `
   }
 
-  get placeholder() {
-    return this.getAttribute('placeholder') || '0°'
-  }
-
   _onChangeValue(e: Event) {
-    this.radian = this._toRadian(this.input.value)
+    this.value = this._toRadian(this.input.value)
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
   }
 
-  _toDegree(radian: string | number | undefined) {
-    return Math.round(((Number(radian) || 0) * 180) / Math.PI)
+  _toDegree(value: string | number | undefined) {
+    return Math.round(((Number(value) || 0) * 180) / Math.PI)
   }
 
   _toRadian(degree: string | number | undefined) {

package/src/ox-input-stack.ts

@@ -2,11 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { css, html, LitElement } from 'lit'
+import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-@customElement('ox-stack')
-export default class OxStack extends LitElement {
+import { OxFormField } from './ox-formfield'
+
+@customElement('ox-input-stack')
+export default class OxInputStack extends OxFormField {
   static styles = [
     css`
       :host {
@@ -43,12 +45,12 @@ export default class OxStack extends LitElement {
   /**
    * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
    */
-  @property({ type: Array }) stack: { name: string }[] = []
+  @property({ type: Array }) stack: { name: string; active?: boolean }[] = []
 
   /**
    * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
    */
-  @property({ type: Number }) activeIndex: number = 0
+  // @property({ type: Number }) activeIndex: number = 0
 
   render() {
     const stack = [...this.stack].reverse()
@@ -59,11 +61,7 @@ export default class OxStack extends LitElement {
 
       ${stack.map(
         (item, index) => html`
-          <div
-            ?active=${length - index - 1 == this.activeIndex}
-            @click=${(e: Event) => this._onClickToActive(e)}
-            idx=${length - index - 1}
-          >
+          <div floor ?active=${item.active} @click=${(e: Event) => this._onClickToActive(e)} idx=${length - index - 1}>
             ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>
           </div>
         `
@@ -71,39 +69,60 @@ export default class OxStack extends LitElement {
     `
   }
 
+  _notifyChange() {
+    this.value = this.stack
+
+    this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true, composed: true }))
+  }
+
   _onClickAddFloor(e: Event) {
     this.stack.push({ name: String(this.stack.length + 1) })
     this.requestUpdate()
+
+    this._notifyChange()
   }
 
   _onClickToActive(e: Event) {
-    const div = e.target as HTMLElement
-    if (div.tagName != 'DIV') {
+    const floor = (e.target as HTMLElement).closest('[floor]')
+
+    if (!floor) {
       return
     }
 
-    this.activeIndex = Number(div.getAttribute('idx'))
+    e.stopPropagation()
+
+    const activeIndex = Number(floor.getAttribute('idx'))
+    this.stack = this.stack.map((floor, index) => {
+      return activeIndex === index
+        ? {
+            name: floor.name,
+            active: true
+          }
+        : { name: floor.name }
+    })
+
+    this._notifyChange()
   }
 
   _onClickRemoveFloor(e: Event) {
-    const div = (e.target as HTMLElement).parentElement
+    const floor = (e.target as HTMLElement).closest('[floor]')
 
-    if (div?.tagName != 'DIV') {
+    if (!floor) {
       return
     }
 
-    const idx = Number(div.getAttribute('idx'))
+    e.stopPropagation()
 
-    this.stack.splice(idx, 1)
+    const idx = Number(floor.getAttribute('idx'))
 
-    if (this.activeIndex == idx) {
-      this.activeIndex = 0
-    } else if (this.activeIndex >= idx) {
-      this.activeIndex--
-    } else if (this.activeIndex >= this.stack.length) {
-      this.activeIndex = 0
-    }
+    this.stack.splice(idx, 1)
 
     this.requestUpdate()
+
+    this._notifyChange()
+  }
+
+  protected appendFormData({ formData }: FormDataEvent): void {
+    this.name && formData.append(this.name, JSON.stringify(this.value))
   }
 }

package/src/ox-select.ts

@@ -5,18 +5,19 @@
 import '@material/mwc-icon'
 import '@operato/popup'
 
-import { LitElement, css, html } from 'lit'
+import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import { PopupList } from '@operato/popup'
-import { render } from 'lit-html'
+import { OxFormField } from './ox-formfield'
+import { OxPopupList } from '@operato/popup'
 
 @customElement('ox-select')
-export class Select extends LitElement {
+export class Select extends OxFormField {
   static styles = [
     css`
       :host {
         display: block;
+        position: relative;
       }
 
       div {
@@ -29,6 +30,9 @@ export class Select extends LitElement {
 
       span {
         flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       mwc-icon {
@@ -47,36 +51,61 @@ export class Select extends LitElement {
   ]
 
   @property({ type: String }) name: string = ''
-  @property({ type: String }) label: string = ''
+  @property({ type: String }) placeholder: string = ''
 
   render() {
+    const label = (this.value instanceof Array ? this.value.join(', ') : this.value) || this.placeholder || ''
+
     return html`
       <div @click=${this.expand}>
-        <span>${this.label}</span>
+        <span>${label}</span>
         <mwc-icon>expand_more</mwc-icon>
       </div>
+
       <slot></slot>
     `
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.setAttribute('tabindex', '0')
+
+    this.addEventListener('select', (e: Event) => {
+      this.value = (e as CustomEvent).detail
+
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          composed: true,
+          detail: this.value
+        })
+      )
+    })
+
+    this.addEventListener('keydown', (e: KeyboardEvent) => {
+      e.preventDefault()
+
+      if (e.key === ' ' || e.key == 'Spacebar' || e.key == 'ArrowDown') {
+        this.expand()
+      }
+    })
+  }
+
   expand() {
-    const popupList = this.querySelector('ox-popup-list') as PopupList
+    const popupList = this.querySelector('ox-popup-list') as OxPopupList
 
     if (popupList) {
       popupList.style.width = `${this.offsetWidth}px`
 
       popupList.open({
-        top: this.offsetTop + this.offsetHeight,
-        left: this.offsetLeft
+        top: this.offsetHeight,
+        left: 0
       })
     }
   }
 
-  onKeyDown(e: KeyboardEvent) {
-    e.preventDefault()
-
-    if (e.keyCode == 32 || e.code == 'Space') {
-      this.expand()
-    }
+  protected appendFormData({ formData }: FormDataEvent): void {
+    this.name && formData.append(this.name, JSON.stringify(this.value))
   }
 }

package/test/property-angle.test.ts

@@ -1,22 +1,21 @@
-import { html } from 'lit'
-
 import { expect, fixture } from '@open-wc/testing'
 
 import { OxInputAngle } from '../src/ox-input-angle'
+import { html } from 'lit'
 
 describe('OxInputAngle', () => {
   it('has a default title "Hey there" and angle 5', async () => {
     const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)
 
     expect(el.title).to.equal('Hey there')
-    expect(el.radian).to.equal(5)
+    expect(el.value).to.equal(5)
   })
 
   it('increases the angle on button click', async () => {
     const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)
     el.shadowRoot!.querySelector('button')!.click()
 
-    expect(el.radian).to.equal(6)
+    expect(el.value).to.equal(6)
   })
 
   it('can override the title via attribute', async () => {