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

package/src/ox-select-floor.ts

@@ -1,246 +0,0 @@
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { OxFormField } from './ox-form-field'
-
-type Card = {
-  name: string
-  image: string
-}
-
-@customElement('ox-select-floor')
-export class OxSelectFloor extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        position: relative;
-        overflow: hidden;
-        height: 100%;
-
-        --ox-select-floor-rotate-x: 60deg;
-        --ox-select-floor-rotate-x-active: 40deg;
-        --ox-select-floor-perspective: 1200px;
-      }
-
-      .carousel-container {
-        position: relative;
-        width: 100%;
-        overflow: hidden;
-        user-select: none;
-      }
-
-      .card {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        background-color: white;
-        transition:
-          transform 0.3s ease,
-          opacity 0.3s ease,
-          box-shadow 0.3s ease,
-          border 0.3s ease;
-        transform-origin: bottom;
-        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x));
-        opacity: 0.5;
-        border: 2px solid transparent;
-        border-radius: 12px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      }
-
-      .card img {
-        width: 100%;
-        height: auto;
-        display: block;
-        pointer-events: none;
-        border-radius: 12px;
-      }
-
-      .selected {
-        opacity: 0.8;
-        z-index: 1;
-        border: 4px solid #3b82f6;
-        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
-      }
-
-      .selected.active {
-        opacity: 1;
-        z-index: 2;
-        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));
-        box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);
-      }
-
-      [template-container] {
-        position: absolute;
-        right: 10px;
-        z-index: 1;
-      }
-    `
-  ]
-
-  @property({ type: Array }) cards: Card[] = []
-  @property({ type: String }) value?: string
-  @property({ type: Number }) bottomLimit = 70
-  @property({ type: Number }) interval = 0
-
-  @state() private selectedIndex = -1
-  @state() private activeIndex: number | null = null
-  @query('.carousel-container') private carouselContainer!: HTMLDivElement
-
-  private isDragging = false
-  private lastMouseY = 0
-
-  render() {
-    const length = this.cards.length
-    const cards = this.cards
-    const interval = this.interval
-
-    return html`
-      <div
-        class="carousel-container"
-        @wheel=${interval ? () => {} : this.handleWheel}
-        @pointerdown=${this.handlePointerDown}
-        @pointermove=${this.handlePointerMove}
-        @pointerup=${this.handlePointerUp}
-        @pointerleave=${this.handlePointerLeave}
-        style=${interval ? `height: ${interval * length + 200}px;` : 'height: 100%;'}
-      >
-        ${cards.map(({ image, name }, index) => {
-          return html`
-            <div
-              class="card ${this.getClassForCard(index)} ${this.isActive(index) ? 'active' : ''}"
-              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}
-              @click=${() => {
-                this.selectCard(index)
-                this.toggleActiveCard(index)
-              }}
-            >
-              <img src="${image}" @load=${(e: Event) => this.adjustCardHeight(e, index)} />
-            </div>
-          `
-        })}
-        ${cards.map(({ image, name }, index) => {
-          return html`
-            <div
-              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}
-              @click=${() => this.selectCard(index)}
-              template-container
-            >
-              <slot name="template-${index}"></slot>
-            </div>
-          `
-        })}
-      </div>
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('value')) {
-      if (this.value) {
-        this.selectedIndex = this.cards.findIndex(card => card.name == this.value)
-      } else {
-        this.selectedIndex = -1
-      }
-    }
-  }
-
-  firstUpdated() {
-    this.scrollToSelectedCard()
-  }
-
-  getClassForCard(index: number) {
-    return index === this.selectedIndex ? 'selected' : 'compressed'
-  }
-
-  isActive(index: number): boolean {
-    return this.activeIndex === index
-  }
-
-  handleWheel(event: WheelEvent) {
-    event.preventDefault()
-    const delta = Math.sign(event.deltaY)
-    this.updateSelectedIndex(this.selectedIndex + delta)
-  }
-
-  handlePointerDown(event: PointerEvent) {
-    event.preventDefault()
-
-    this.isDragging = true
-    this.lastMouseY = event.clientY
-  }
-
-  handlePointerMove(event: PointerEvent) {
-    if (!this.isDragging) {
-      return
-    }
-
-    event.preventDefault()
-
-    const deltaY = event.clientY - this.lastMouseY
-
-    if (!this.lastMouseY) {
-      this.lastMouseY = event.clientY
-    }
-
-    if (Math.abs(deltaY) > 30) {
-      this.lastMouseY = event.clientY
-      const direction = deltaY > 0 ? -1 : 1
-      this.updateSelectedIndex(this.selectedIndex + direction)
-    }
-  }
-
-  handlePointerUp(event: PointerEvent) {
-    event.preventDefault()
-    this.isDragging = false
-  }
-
-  handlePointerLeave(event: PointerEvent) {
-    event.preventDefault()
-
-    this.isDragging = false
-  }
-
-  private toggleActiveCard(index: number) {
-    if (this.activeIndex === index) {
-      this.activeIndex = null
-    } else {
-      this.activeIndex = index
-    }
-  }
-
-  private updateSelectedIndex(newIndex: number) {
-    this.activeIndex = null
-
-    this.selectedIndex = Math.max(-1, Math.min(newIndex, this.cards.length - 1))
-    this.scrollToSelectedCard()
-  }
-
-  private scrollToSelectedCard() {
-    const cardHeight = 320
-    const targetScrollTop = this.selectedIndex * cardHeight - (window.innerHeight / 2 - cardHeight / 2)
-
-    this.carouselContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' })
-  }
-
-  private selectCard(index: number) {
-    this.selectedIndex = index
-    this.notifySelection()
-    this.scrollToSelectedCard()
-  }
-
-  private notifySelection() {
-    this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        detail: this.value
-      })
-    )
-  }
-
-  private adjustCardHeight(e: Event, index: number) {
-    const imgElement = e.target as HTMLImageElement
-    const aspectRatio = imgElement.naturalWidth / imgElement.naturalHeight
-    const newHeight = imgElement.offsetWidth / aspectRatio
-    imgElement.style.height = `${newHeight}px`
-  }
-}

package/src/ox-select.ts

@@ -1,219 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-import '@operato/popup/ox-popup-list.js'
-import './ox-checkbox.js'
-
-import { css, html, render, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-import { OxPopupList } from '@operato/popup'
-
-import { OxFormField } from './ox-form-field.js'
-
-@customElement('ox-select')
-export class OxSelect extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        position: relative;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-
-        --ox-select-padding: var(--spacing-tiny);
-        --ox-select-font: var(--input-font);
-        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));
-        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));
-        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);
-      }
-
-      div {
-        width: 100%;
-        box-sizing: border-box;
-
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        padding: var(--ox-select-padding);
-        font: var(--ox-select-font);
-        color: var(--ox-select-color);
-      }
-
-      span {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        gap: 4px;
-      }
-
-      md-icon {
-        --md-icon-size: 16px;
-        display: block;
-        text-align: right;
-        color: var(--ox-select-icon-color);
-        opacity: 0.7;
-      }
-
-      div:hover md-icon {
-        color: var(--md-sys-color-on-primary-container);
-      }
-    `
-  ]
-
-  @property({ type: String }) name: string = ''
-  @property({ type: String }) placeholder: string = ''
-
-  @state() label: string | string[] = ''
-  @state() popupContainer: HTMLElement | null = null
-  @state() observer: MutationObserver | null = null
-
-  render() {
-    const label =
-      (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) ||
-      (this.value instanceof Array ? this.value.join(', ') : this.value?.trim()) ||
-      this.placeholder ||
-      ''
-
-    return html`
-      <div @click=${this.expand}>
-        <span data-reactive-tooltip>${label}</span>
-        <md-icon>expand_more</md-icon>
-      </div>
-
-      <slot></slot>
-    `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.setAttribute('tabindex', '0')
-
-    this.addEventListener('keydown', (e: KeyboardEvent) => {
-      e.preventDefault()
-
-      if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown') {
-        this.expand()
-      }
-    })
-
-    this.addEventListener('click', () => this.expand())
-  }
-
-  async updated(changes: PropertyValues<this>) {
-    if (changes.has('value')) {
-      const popupList = (this.popupContainer?.querySelector('ox-popup-list') ||
-        this.querySelector('ox-popup-list')) as OxPopupList
-
-      if (popupList) {
-        popupList.value = this.value
-        await this.requestUpdate()
-
-        this.label = popupList.getSelectedLabels()
-      }
-    }
-  }
-
-  setOptions(
-    options: string[] | { display: string; value: string }[],
-    opt: { multiple?: boolean; withSearch?: boolean } = {}
-  ) {
-    const objOptions = options.map(option => {
-      return typeof option == 'string' ? { display: option, value: option } : option
-    })
-
-    const { multiple, withSearch } = opt || {}
-
-    const template = html`
-      <ox-popup-list
-        align-left
-        nowrap
-        ?multiple=${multiple}
-        attr-selected=${multiple ? 'checked' : ''}
-        ?with-search=${withSearch}
-      >
-        ${multiple
-          ? html`<ox-checkbox
-                @change=${(e: Event) => {
-                  const target = e.target as HTMLInputElement
-                  const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(
-                    option => !option.hasAttribute('hidden')
-                  )
-                  options.forEach(option => ((option as HTMLInputElement).checked = target.checked))
-
-                  this.value = options
-                    .map(option =>
-                      (option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined
-                    )
-                    .filter(Boolean)
-                }}
-                >set all</ox-checkbox
-              >
-              ${objOptions.map(
-                option => html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
-              )}`
-          : html`${objOptions.map(option => html` <div option value=${option.value}>${option.display}</div> `)}`}
-      </ox-popup-list>
-    `
-
-    render(template, this)
-  }
-
-  expand() {
-    if (this.disabled) {
-      return
-    }
-
-    const slotContent = this.renderRoot.querySelector('slot')?.assignedNodes() || []
-
-    if (slotContent.length > 0) {
-      const popupList = slotContent.find(content => content instanceof OxPopupList) as OxPopupList
-
-      if (popupList) {
-        const { left, bottom } = this.getBoundingClientRect()
-
-        popupList.value = this.value
-        popupList.style.width = `${this.offsetWidth}px`
-        popupList.style.textWrap = 'nowrap'
-
-        const selectHandler = async (e: Event) => {
-          this.value = (e as CustomEvent).detail
-
-          if (popupList) {
-            await this.requestUpdate()
-            this.label = popupList.getSelectedLabels()
-          }
-        }
-        popupList.addEventListener('select', selectHandler)
-
-        const closeHandler = (e: Event) => {
-          /* popup이 close될 때 change 이벤트를 발생시킨다. */
-          this.dispatchEvent(
-            new CustomEvent('change', {
-              bubbles: true,
-              composed: true,
-              detail: this.value
-            })
-          )
-          popupList.removeEventListener('select', selectHandler)
-          popupList.removeEventListener('close', closeHandler)
-
-          this.appendChild(popupList)
-        }
-        popupList.addEventListener('close', closeHandler, { once: true })
-
-        document.body.appendChild(popupList)
-
-        popupList.open({
-          left,
-          top: bottom
-        })
-      }
-    }
-  }
-}