@operato/input 8.0.0-alpha.10 → 8.0.0-alpha.19

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "8.0.0-alpha.10",
+  "version": "8.0.0-alpha.19",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -58,6 +58,7 @@
     "./ox-input-textarea.js": "./dist/src/ox-input-textarea.js",
     "./ox-input-direction.js": "./dist/src/ox-input-direction.js",
     "./ox-input-signature.js": "./dist/src/ox-input-signature.js",
+    "./ox-select-floor.js": "./dist/src/ox-select-floor.js",
     "./ox-input-table-column-config.js": "./dist/src/ox-input-table-column-config.js"
   },
   "typesVersions": {
@@ -179,6 +180,9 @@
       "./ox-input-signature.js": [
         "./dist/src/ox-input-signature.d.ts"
       ],
+      "./ox-select-floor.js": [
+        "./dist/src/ox-select-floor.d.ts"
+      ],
       "./ox-input-table-column-config.js": [
         "./dist/src/ox-input-table-column-config.d.ts"
       ]
@@ -258,5 +262,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f937b76c9831c46e26acde8e94cc71514068a961"
+  "gitHead": "9656b17ec8476c2eeace042a4e561161539e81e7"
 }

package/src/ox-select-floor.ts

@@ -0,0 +1,257 @@
+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;
+        height: 100%;
+        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 {
+        z-index: 10;
+        opacity: 0.8;
+        border: 4px solid #3b82f6;
+        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
+      }
+
+      .selected.active {
+        opacity: 1;
+        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: 20;
+      }
+    `
+  ]
+
+  @property({ type: Array }) cards: Card[] = []
+  @property({ type: String }) value?: string
+  @property({ type: Number }) bottomLimit = 70
+
+  @state() private selectedIndex = 0
+  @state() private activeIndex: number | null = null
+  @query('.carousel-container') private carouselContainer!: HTMLDivElement
+
+  private isDragging = false
+  private lastTouchY = 0
+  private lastMouseY = 0
+
+  render() {
+    const length = this.cards.length
+
+    return html`
+      <div
+        class="carousel-container"
+        @wheel=${this.handleWheel}
+        @mousedown=${this.handleMouseDown}
+        @mousemove=${this.handleMouseMove}
+        @mouseup=${this.handleMouseUp}
+        @mouseleave=${this.handleMouseLeave}
+        @touchstart=${this.handleTouchStart}
+        @touchmove=${this.handleTouchMove}
+        @touchend=${this.handleTouchEnd}
+      >
+        ${this.cards.map(({ image, name }, index) => {
+          const reverse = length - index - 1
+          return html`
+            <div
+              class="card ${this.getClassForCard(reverse)} ${this.isActive(reverse) ? 'active' : ''}"
+              style="bottom: ${(this.bottomLimit * reverse) / length}%;"
+              @click=${() => this.selectCard(reverse)}
+              @tap=${() => this.toggleActiveCard(reverse)}
+            >
+              <img src="${image}" @load=${(e: Event) => this.adjustCardHeight(e, reverse)} />
+            </div>
+          `
+        })}
+        ${this.cards.map(({ image, name }, index) => {
+          const reverse = length - index - 1
+          return html`
+            <div
+              style="bottom: ${(this.bottomLimit * reverse) / length}%;"
+              @click=${() => this.selectCard(reverse)}
+              template-container
+            >
+              <slot name="template-${reverse}"></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)
+  }
+
+  handleTouchStart(event: TouchEvent) {
+    this.lastTouchY = event.touches[0].clientY
+  }
+
+  handleTouchMove(event: TouchEvent) {
+    const touch = event.touches[0]
+    const deltaY = touch.clientY - this.lastTouchY
+    this.lastTouchY = touch.clientY
+
+    if (Math.abs(deltaY) > 30) {
+      const direction = deltaY < 0 ? -1 : 1
+      this.updateSelectedIndex(this.selectedIndex + direction)
+    }
+  }
+
+  handleTouchEnd() {
+    this.isDragging = false
+  }
+
+  handleMouseDown(event: MouseEvent) {
+    this.isDragging = true
+    this.lastMouseY = event.clientY
+  }
+
+  handleMouseMove(event: MouseEvent) {
+    if (!this.isDragging) {
+      return
+    }
+
+    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)
+    }
+  }
+
+  handleMouseUp() {
+    this.isDragging = false
+  }
+
+  handleMouseLeave() {
+    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(0, 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`
+  }
+}