@operato/input 8.0.0-beta.0 → 8.0.0-beta.1

package/src/ox-input-quantifier.ts

@@ -1,62 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html } from 'lit'
-import { customElement, property, queryAll } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field.js'
-
-@customElement('ox-input-quantifier')
-export class OxInputQuantifier extends OxFormField {
-  static styles = css`
-    :host {
-      display: flex;
-      gap: var(--spacing-medium);
-      align-items: center;
-
-      width: 100%;
-      user-select: text;
-    }
-
-    input[type='number'] {
-      width: 48px;
-      border: 0;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--spacing-tiny);
-      font: var(--input-font);
-      color: var(--md-sys-color-on-primary-container);
-    }
-    input[type='number']:focus {
-      outline: none;
-      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
-    }
-
-    input:focus {
-      outline: none;
-      opacity: 1;
-    }
-  `
-
-  @property({ type: Array }) value: number[] = [1, 1]
-
-  render() {
-    const [min = 1, max = 1] = this.value || []
-
-    return html`
-      <span>
-        <input type="number" .value=${min} @change=${(e: Event) => this.onChange(e)} ?disabled=${this.disabled} />
-        -
-        <input type="number" .value=${max} @change=${(e: Event) => this.onChange(e)} ?disabled=${this.disabled} />
-      </span>
-    `
-  }
-
-  @queryAll('input') inputs?: HTMLInputElement[]
-
-  onChange(e: Event) {
-    e.stopPropagation()
-    this.value = Array.from(this.inputs || []).map(input => input.valueAsNumber) || [1, 1]
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}

package/src/ox-input-range.ts

@@ -1,146 +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.js'
-
-@customElement('ox-input-range')
-class OxInputRange extends OxFormField {
-  static styles = css`
-    :host {
-      display: flex;
-      gap: var(--spacing-medium);
-      align-items: center;
-
-      width: 100%;
-      user-select: text;
-    }
-
-    input[type='number'] {
-      width: 48px;
-      border: 0;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--spacing-tiny);
-      font: var(--input-font);
-      color: var(--md-sys-color-on-primary-container);
-    }
-    input[type='number']:focus {
-      outline: none;
-      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
-    }
-
-    input[type='range'] {
-      -webkit-appearance: none;
-      border: none;
-      outline: none;
-      width: 100%;
-      flex: 1;
-      height: 16px;
-      background-color: transparent;
-    }
-    input[type='range']::-webkit-slider-runnable-track {
-      width: 100%;
-      height: 7px;
-      background-color: rgba(0, 0, 0, 0.02);
-      border: 1px solid rgba(0, 0, 0, 0.05);
-      border-radius: 5px;
-    }
-    input[type='range']::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      border: none;
-      height: 16px;
-      width: 16px;
-      border-radius: 50%;
-      background: var(--md-sys-color-on-primary-container);
-      margin-top: -6px;
-      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
-    }
-    input[type='range']:focus {
-      outline: none;
-    }
-
-    input[type='range']::-moz-range-track {
-      width: 100%;
-      height: 7px;
-      background-color: rgba(0, 0, 0, 0.02);
-      border: 1px solid rgba(0, 0, 0, 0.05);
-      border-radius: 5px;
-    }
-    input[type='range']::-moz-range-thumb {
-      border: none;
-      height: 16px;
-      width: 16px;
-      border-radius: 50%;
-      background: var(--md-sys-color-on-primary-container);
-      margin-top: -6px;
-      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
-    }
-
-    input[type='range']:-moz-focusring {
-      outline: 1px solid black;
-      outline-offset: -1px;
-    }
-
-    input[type='range']::-ms-track {
-      width: 100%;
-      height: 7px;
-      background-color: rgba(0, 0, 0, 0.02);
-      border: 1px solid rgba(0, 0, 0, 0.05);
-      border-radius: 5px;
-    }
-    input[type='range']::-ms-thumb {
-      border: none;
-      height: 16px;
-      width: 16px;
-      border-radius: 50%;
-      background: var(--md-sys-color-on-primary-container);
-      margin-top: -6px;
-      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
-    }
-
-    input:focus {
-      outline: none;
-      opacity: 1;
-    }
-  `
-
-  @property({ type: Number }) value: number = 0
-  @property({ type: Number }) step: number = 1
-  @property({ type: Number }) min: number = -100
-  @property({ type: Number }) max: number = 100
-
-  render() {
-    return html`
-      <input
-        type="range"
-        .value=${this.value}
-        .step=${this.step}
-        .min=${this.min}
-        .max=${this.max}
-        @input=${(e: InputEvent) => {
-          e.stopPropagation()
-          this.value = Number((e.target as HTMLInputElement).value)
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-        }}
-        ?disabled=${this.disabled}
-      />
-
-      <input
-        type="number"
-        .value=${this.value}
-        .step=${this.step}
-        .min=${this.min}
-        .max=${this.max}
-        @change=${(e: Event) => {
-          e.stopPropagation()
-          this.value = Number((e.target as HTMLInputElement).value)
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-        }}
-        ?disabled=${this.disabled}
-      />
-    `
-  }
-}

package/src/ox-input-scene-component-id.ts

@@ -1,73 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field'
-
-@customElement('ox-input-scene-component-id')
-export class OxInputId extends OxFormField {
-  static styles = css`
-    :host {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      justify-content: flex-end;
-    }
-
-    input {
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-  `
-
-  @property({ type: Object }) property: { component?: any } | null | undefined
-
-  @state() _ids: Array<string> = []
-
-  render() {
-    const ids = this._ids || []
-
-    return html`
-      <input
-        id="text"
-        type="text"
-        .value=${this.value || ''}
-        @focusin=${(e: FocusEvent) => this._onInputFocused(e)}
-        @change=${(e: InputEvent) => this._onInputChanged(e)}
-        .placeholder=${this.getAttribute('placeholder') || ''}
-        list="ids"
-        ?disabled=${this.disabled}
-      />
-
-      <datalist id="ids">${ids.map(id => html` <option value=${id}></option> `)}</datalist>
-    `
-  }
-
-  _onInputFocused(e: FocusEvent) {
-    var { component } = this.property || {}
-
-    document.dispatchEvent(
-      new CustomEvent('get-all-scene-component-ids', {
-        detail: {
-          component,
-          callback: (ids: string[]) => {
-            this._ids = ids
-          }
-        }
-      })
-    )
-  }
-
-  _onInputChanged(e: InputEvent) {
-    e.stopPropagation()
-
-    this.value = (e.target as HTMLInputElement).value
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}

package/src/ox-input-search.ts

@@ -1,126 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-
-// import debounce from 'lodash-es/debounce'
-import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field'
-
-@customElement('ox-input-search')
-export class OxInputSearch extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        position: relative;
-        align-items: center;
-
-        color: var(--ox-input-search-color, var(--md-sys-color-on-surface-variant));
-        background-color: var(--ox-input-search-background-color, var(--md-sys-color-surface-variant));
-
-        --md-icon-size: 20px;
-      }
-
-      [type='text'] {
-        flex: 1;
-        color: inherit;
-        background-color: transparent;
-        border: 0;
-        padding: var(--input-search-padding, var(--spacing-tiny));
-        padding-left: 25px;
-        overflow: hidden;
-      }
-
-      [type='text']:focus {
-        outline: none;
-      }
-
-      md-icon {
-        position: absolute;
-      }
-
-      input {
-        width: 100%;
-      }
-    `
-  ]
-
-  @property({ type: String }) placeholder?: string
-  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean
-
-  @query('input') input!: HTMLInputElement
-
-  // private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)
-
-  render() {
-    return html`
-      <md-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</md-icon>
-      <input
-        type="text"
-        .value=${this.value || ''}
-        .placeholder=${this.placeholder || ''}
-        @change=${(e: Event) => {
-          e.stopPropagation()
-          this.dispatchChangeEvent((e.target as HTMLInputElement).value)
-          // this.dispatchChangeEventDebouncer((e.target as HTMLInputElement).value)
-        }}
-        @keydown=${(e: KeyboardEvent) => {
-          if (e.key === 'Enter') {
-            if ((e.target as HTMLInputElement).value == this.value) {
-              /* Even if the value has not changed, the enter key triggers a change event. */
-              e.preventDefault() /* Prevent change event from occurring twice. */
-
-              this.input.dispatchEvent(
-                new CustomEvent('change', {
-                  detail: (e.target as HTMLInputElement).value
-                })
-              )
-            }
-          }
-        }}
-        ?disabled=${this.disabled}
-      />
-    `
-  }
-
-  firstUpdated() {
-    if (this.autofocus) {
-      this.input.focus()
-    }
-  }
-
-  dispatchChangeEvent(value: string) {
-    this.value = value
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: value
-      })
-    )
-
-    if (this.selectAfterChange) {
-      requestAnimationFrame(() => {
-        this.input.select()
-      })
-    }
-  }
-
-  _onClickSearch(e: Event) {
-    if (this._form) {
-      e.stopPropagation()
-      this._form.requestSubmit()
-    } else {
-      this.input.dispatchEvent(
-        new CustomEvent('change', {
-          detail: this.input.value
-        })
-      )
-    }
-  }
-}

package/src/ox-input-select-buttons.ts

@@ -1,75 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/chips/filter-chip.js'
-import '@material/web/chips/chip-set.js'
-
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field'
-import { MdFilterChip } from '@material/web/chips/filter-chip.js'
-
-type Option = { display: string; value: string }
-
-@customElement('ox-input-select-buttons')
-export class OxInputSelectButtons extends OxFormField {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-flow: row;
-      flex-wrap: wrap;
-      gap: var(--spacing-medium);
-
-      text-transform: capitalize;
-    }
-  `
-
-  @property({ type: Array }) value: string[] | string | undefined = []
-  @property({ type: Array }) options: Option[] = []
-  @property({ type: Boolean }) multiple: boolean = false
-
-  render() {
-    const options = this.options.filter(option => !!option.value)
-    const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []
-
-    return html`
-      <md-chip-set>
-        ${(options || []).map(
-          ({ display, value }) => html`
-            <md-filter-chip
-              data-value=${value}
-              label=${display}
-              ?selected=${values.includes(value)}
-              @tap=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onTap(e)}
-            ></md-filter-chip>
-          `
-        )}
-      </md-chip-set>
-    `
-  }
-
-  onTap(e: MouseEvent | TouchEvent) {
-    e.stopPropagation()
-
-    const target = e.target as MdFilterChip
-    const value = target.getAttribute('data-value') as string
-
-    if (this.multiple) {
-      const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []
-
-      const idx = (this.value || []).indexOf(value)
-      if (idx != -1) {
-        values.splice(idx, 1)
-      } else {
-        values.push(value)
-      }
-      this.value = [...values]
-    } else {
-      this.value = this.value === value ? undefined : value
-    }
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-  }
-}

package/src/ox-input-signature.ts

@@ -1,208 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field.js'
-
-@customElement('ox-input-signature')
-export class OxInputSignature extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        min-height: var(--signature-min-height, 80px);
-        min-width: var(--signature-min-width, 120px);
-
-        background-color: var(--signature-background-color, white);
-
-        overflow: hidden;
-      }
-
-      .signature-preview {
-        flex: 1;
-        align-self: stretch;
-
-        border: 1px solid var(--md-sys-color-outline);
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center;
-      }
-
-      dialog canvas {
-        border: 1px solid var(--md-sys-color-outline);
-      }
-
-      .controls {
-        margin-top: 10px;
-        display: flex;
-        flex-direction: row;
-        gap: var(--spacing-medium);
-      }
-
-      .filler {
-        flex: 1;
-      }
-
-      /* 버튼 스타일 */
-      button {
-        background-color: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-        padding: 10px 20px;
-        border: none;
-        border-radius: var(--spacing-small);
-        font-family: 'Roboto', sans-serif;
-        font-size: 14px;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-      }
-    `
-  ]
-
-  @property({ type: String }) value: string | null = null
-
-  @query('.signature-preview')
-  private previewDiv!: HTMLDivElement
-  @query('dialog')
-  private dialog!: HTMLDialogElement
-  @query('canvas')
-  private canvas!: HTMLCanvasElement
-
-  private ctx!: CanvasRenderingContext2D
-  private isDrawing = false
-
-  render() {
-    return html`
-      <div class="signature-preview" @click=${this.openDialog}></div>
-
-      <dialog>
-        <canvas
-          width="800"
-          height="400"
-          @pointerdown=${this.startDrawing}
-          @pointerup=${this.stopDrawing}
-          @pointermove=${this.draw}
-          @pointerleave=${this.stopDrawing}
-        ></canvas>
-        <div class="controls">
-          <button @click="${this.clearCanvas}">Clear</button>
-          <div class="filler"></div>
-          <button @click="${this.saveSignature}">Save</button>
-          <button @click="${this.closeDialog}">Close</button>
-        </div>
-      </dialog>
-    `
-  }
-
-  firstUpdated() {
-    this.ctx = this.canvas.getContext('2d')!
-    this.ctx.strokeStyle = '#000'
-    this.ctx.lineWidth = 2
-
-    // 처음 로딩 시 서명 데이터를 미리보기 div에 표시
-    if (this.value) {
-      this.loadSignature(this.value)
-    }
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('value')) {
-      this.loadSignature(this.value)
-    }
-  }
-
-  openDialog() {
-    if (this.disabled) {
-      return
-    }
-
-    this.dialog.showModal()
-
-    if (this.value) {
-      const img = new Image()
-      img.onload = () => {
-        this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
-      }
-      img.src = this.value
-    }
-  }
-
-  closeDialog() {
-    this.dialog.close()
-  }
-
-  startDrawing(event: MouseEvent | TouchEvent) {
-    if (this.disabled) {
-      return
-    }
-
-    event.preventDefault()
-    event.stopPropagation()
-
-    this.isDrawing = true
-    this.ctx.beginPath()
-    const position = this.getEventPosition(event)
-    this.ctx.moveTo(position.x, position.y)
-  }
-
-  stopDrawing(event: MouseEvent | TouchEvent) {
-    event.preventDefault()
-    event.stopPropagation()
-
-    this.isDrawing = false
-  }
-
-  draw(event: MouseEvent | TouchEvent) {
-    if (!this.isDrawing) {
-      return
-    }
-
-    event.preventDefault()
-    event.stopPropagation()
-
-    const position = this.getEventPosition(event)
-    this.ctx.lineTo(position.x, position.y)
-    this.ctx.stroke()
-  }
-
-  clearCanvas() {
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
-  }
-
-  saveSignature() {
-    this.value = this.canvas.toDataURL()
-    this._notifyChange()
-    this.previewDiv.style.backgroundImage = `url(${this.value})`
-    this.closeDialog()
-  }
-
-  loadSignature(dataUrl: string | null) {
-    this.previewDiv.style.backgroundImage = dataUrl ? `url(${dataUrl})` : 'none'
-  }
-
-  getEventPosition(event: MouseEvent | TouchEvent) {
-    const rect = this.canvas.getBoundingClientRect()
-
-    // 캔버스의 실제 크기와 CSS 크기 간의 비율을 계산
-    const scaleX = this.canvas.width / rect.width
-    const scaleY = this.canvas.height / rect.height
-
-    // 실제 좌표 계산
-    const isTouchEvent = event instanceof TouchEvent
-    const x = (isTouchEvent ? event.touches[0].clientX - rect.left : (event as MouseEvent).clientX - rect.left) * scaleX
-    const y = (isTouchEvent ? event.touches[0].clientY - rect.top : (event as MouseEvent).clientY - rect.top) * scaleY
-
-    return { x, y }
-  }
-
-  _notifyChange() {
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: this.value
-      })
-    )
-  }
-}