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

package/src/ox-input-stack.ts

@@ -1,136 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field'
-
-@customElement('ox-input-stack')
-export class OxInputStack extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-
-      #add-floor {
-        width: 100%;
-        height: 20px;
-        background-color: blue;
-        color: white;
-      }
-
-      div {
-        background-color: blue;
-        width: calc(100% - 40px);
-        width: -webkit-calc(100% - 40px);
-        min-height: 20px;
-      }
-
-      div[active] {
-        background-color: red;
-      }
-
-      div button {
-        position: absolute;
-        right: 10px;
-        width: 30px;
-        min-height: 20px;
-      }
-    `
-  ]
-
-  /**
-   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
-   */
-  @property({ type: Array }) stack: { name: string; active?: boolean }[] = []
-
-  /**
-   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
-   */
-  // @property({ type: Number }) activeIndex: number = 0
-
-  render() {
-    const stack = [...this.stack].reverse()
-    const length = stack.length
-
-    return html`
-      <button id="add-floor" @click=${(e: Event) => this._onClickAddFloor(e)} ?disabled=${this.disabled}>+</button>
-
-      ${stack.map(
-        (item, index) => html`
-          <div
-            floor
-            ?active=${item.active}
-            @click=${(e: Event) => !this.disabled && this._onClickToActive(e)}
-            idx=${length - index - 1}
-          >
-            ${item.name}
-            <button @click=${(e: Event) => this._onClickRemoveFloor(e)} ?disabled=${this.disabled}>-</button>
-          </div>
-        `
-      )}
-    `
-  }
-
-  _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 floor = (e.target as HTMLElement).closest('[floor]')
-
-    if (!floor) {
-      return
-    }
-
-    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 floor = (e.target as HTMLElement).closest('[floor]')
-
-    if (!floor) {
-      return
-    }
-
-    e.stopPropagation()
-
-    const idx = Number(floor.getAttribute('idx'))
-
-    this.stack.splice(idx, 1)
-
-    this.requestUpdate()
-
-    this._notifyChange()
-  }
-}

package/src/ox-input-switch.ts

@@ -1,117 +0,0 @@
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field'
-
-@customElement('ox-input-switch')
-export class OxInputSwitch extends OxFormField {
-  static styles = css`
-    :host {
-      --ox-simple-switch-fullwidth: 2em;
-      --ox-simple-switch-fullheight: 1em;
-      --ox-simple-switch-thumbnail-size: 1em;
-    }
-
-    label {
-      position: relative;
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-    }
-
-    label input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-
-    span {
-      position: absolute;
-      cursor: pointer;
-      width: var(--ox-simple-switch-fullwidth);
-      height: var(--ox-simple-switch-fullheight);
-      top: calc(0 - var(--ox-simple-switch-thumbnail-size));
-      left: 0;
-      background-color: var(--ox-simple-switch-off-color, #ccc);
-      -webkit-transition: 0.4s;
-      transition: 0.4s;
-    }
-
-    span:before {
-      position: absolute;
-      content: '';
-      height: calc(var(--ox-simple-switch-thumbnail-size) - 8px);
-      width: calc(var(--ox-simple-switch-thumbnail-size) - 8px);
-      left: 4px;
-      top: 4px;
-      background-color: var(--ox-simple-switch-thumbnail-color, white);
-      -webkit-transition: 0.4s;
-      transition: 0.4s;
-    }
-
-    input:checked + span {
-      background-color: var(--ox-simple-switch-on-color, #2196f3);
-    }
-
-    input + span:before {
-      -webkit-transform: translateY(
-        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)
-      );
-      -ms-transform: translateY(
-        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)
-      );
-      transform: translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
-    }
-
-    input:checked + span:before {
-      -webkit-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
-        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
-      -ms-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
-        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
-      transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
-        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
-    }
-
-    /* Rounded sliders */
-    span[round] {
-      border-radius: calc(var(--ox-simple-switch-thumbnail-size) / 2);
-    }
-
-    span[round]:before {
-      border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);
-    }
-  `
-
-  @property({ type: Boolean }) round: boolean = false
-  @property({ type: Boolean }) value: boolean = false
-  @property({ type: Boolean }) disabled: boolean = false
-
-  render() {
-    return html`
-      <label>
-        <input type="checkbox" .checked=${this.value} ?disabled=${this.disabled} />
-        <span ?round=${this.round}></span>
-      </label>
-    `
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', (e: Event) => {
-      e.preventDefault()
-      e.stopPropagation()
-
-      this.value = (e.target as HTMLInputElement)?.checked
-      this.dispatchEvent(
-        new CustomEvent('change', {
-          bubbles: true,
-          composed: true,
-          detail: this.value
-        })
-      )
-    })
-  }
-
-  protected appendFormData({ formData }: FormDataEvent): void {
-    this.name && formData.append(this.name, this.value ? 'true' : 'false')
-  }
-}

package/src/ox-input-table-column-config.ts

@@ -1,211 +0,0 @@
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { OxFormField } from './ox-form-field'
-import '@material/web/icon/icon.js'
-
-export interface ColumnConfig {
-  name: string
-  label: string
-  visible: boolean
-  width: number
-  order: number
-}
-
-@customElement('ox-input-table-column-config')
-export class OxInputTableColumnConfig extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        padding: 4px;
-        border: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));
-        background-color: var(--ox-input-table-column-config-background-color, var(--md-sys-color-surface));
-        color: var(--ox-input-table-column-config-color, var(--md-sys-color-on-surface));
-      }
-
-      table {
-        width: auto;
-        border-collapse: collapse;
-        font-size: 12px;
-        border: 0;
-      }
-
-      tr {
-        border-bottom: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));
-      }
-
-      th,
-      td {
-        padding: 0 var(--spacing-small, 2px);
-        text-align: left;
-      }
-
-      th {
-        text-transform: capitalize;
-        text-align: center;
-        background-color: var(
-          --ox-input-table-column-config-header-background-color,
-          var(--md-sys-color-secondary-container)
-        );
-        color: var(--ox-input-table-column-config-header-background-color, var(--md-sys-color-on-secondary-container));
-        white-space: nowrap;
-      }
-
-      th *,
-      td * {
-        vertical-align: middle;
-      }
-
-      td[width] {
-        width: 60px;
-        text-align: right;
-      }
-
-      input {
-        font-size: 12px;
-        padding: 0;
-        margin: 0;
-        border: none;
-        width: 100%;
-        box-sizing: border-box;
-        outline: none;
-        background-color: var(--ox-input-table-column-config-input-background-color, var(--md-sys-color-surface));
-        color: var(--ox-input-table-column-config-input-color, var(--md-sys-color-on-surface));
-      }
-
-      input[type='number'] {
-        text-align: right;
-      }
-
-      md-icon {
-        cursor: pointer;
-        padding: 0;
-        margin: 0;
-        border: none;
-        background: none;
-
-        --md-icon-size: 16px;
-      }
-
-      md-icon[disabled] {
-        cursor: not-allowed;
-        color: var(--ox-input-table-column-config-disabled-color, var(--md-sys-color-surface-variant, #ccc));
-      }
-    `
-  ]
-
-  @property({ type: Array }) value: ColumnConfig[] = []
-
-  render() {
-    console.log('this.value', this.value)
-    return html`
-      <table>
-        <thead>
-          <tr>
-            <th></th>
-            <th>name</th>
-            <th>label</th>
-            <th>width</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          ${(this.value || []).map(
-            (col, index) => html`
-              <tr name=${col.name}>
-                <td>
-                  <input
-                    type="checkbox"
-                    .checked=${col.visible}
-                    @change=${(e: Event) => this._updateVisibility(e, index)}
-                  />
-                </td>
-                <td name>${col.name}</td>
-                <td>
-                  <input type="text" .value=${col.label} @input=${(e: Event) => this._updateLabel(e, index)} />
-                </td>
-                <td width>
-                  <input
-                    type="number"
-                    .value=${String(col.width)}
-                    @input=${(e: Event) => this._updateWidth(e, index)}
-                  />
-                </td>
-                <td buttons>
-                  <md-icon class="icon-button" @click=${() => this._moveUp(index)} ?disabled=${index === 0}>
-                    arrow_upward
-                  </md-icon>
-                  <md-icon
-                    class="icon-button"
-                    @click=${() => this._moveDown(index)}
-                    ?disabled=${index === this.value.length - 1}
-                  >
-                    arrow_downward
-                  </md-icon>
-                </td>
-              </tr>
-            `
-          )}
-        </tbody>
-      </table>
-    `
-  }
-
-  private _updateVisibility(event: Event, index: number) {
-    const target = event.target as HTMLInputElement
-    this.value[index].visible = target.checked
-    this.requestUpdate()
-    this._notifyChange()
-  }
-
-  private _updateLabel(event: Event, index: number) {
-    const target = event.target as HTMLInputElement
-    this.value[index].label = target.value
-    this.requestUpdate()
-    this._notifyChange()
-  }
-
-  private _updateWidth(event: Event, index: number) {
-    const target = event.target as HTMLInputElement
-    this.value[index].width = target.valueAsNumber
-    this.requestUpdate()
-    this._notifyChange()
-  }
-
-  private _moveUp(index: number) {
-    if (index === 0) return
-    const temp = this.value[index]
-    this.value[index] = this.value[index - 1]
-    this.value[index - 1] = temp
-    this._updateOrder()
-    this.requestUpdate()
-    this._notifyChange()
-  }
-
-  private _moveDown(index: number) {
-    if (index === this.value.length - 1) return
-    const temp = this.value[index]
-    this.value[index] = this.value[index + 1]
-    this.value[index + 1] = temp
-    this._updateOrder()
-    this.requestUpdate()
-    this._notifyChange()
-  }
-
-  private _updateOrder() {
-    this.value = this.value.map((col, index) => ({
-      ...col,
-      order: index + 1
-    }))
-  }
-
-  private _notifyChange() {
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        detail: this.value,
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-}