@operato/input 8.0.0-alpha.4 → 8.0.0-alpha.41

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.4",
+  "version": "8.0.0-alpha.41",
   "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"
       ]
@@ -210,11 +214,11 @@
     "@ctrl/tinycolor": "^4.1.0",
     "@lit/localize": "^0.12.1",
     "@material/web": "^2.0.0",
-    "@operato/color-picker": "^8.0.0-alpha.0",
-    "@operato/i18n": "^8.0.0-alpha.0",
-    "@operato/popup": "^8.0.0-alpha.4",
-    "@operato/styles": "^8.0.0-alpha.4",
-    "@operato/utils": "^8.0.0-alpha.0",
+    "@operato/color-picker": "^8.0.0-alpha.33",
+    "@operato/i18n": "^8.0.0-alpha.37",
+    "@operato/popup": "^8.0.0-alpha.41",
+    "@operato/styles": "^8.0.0-alpha.37",
+    "@operato/utils": "^8.0.0-alpha.37",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -225,18 +229,18 @@
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.9.2",
+    "@custom-elements-manifest/analyzer": "^0.10.0",
     "@hatiolab/prettier-config": "^1.0.0",
     "@lit/localize-tools": "^0.7.2",
     "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@web/dev-server": "^0.3.0",
+    "@open-wc/testing": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@web/dev-server": "^0.4.0",
     "@web/dev-server-storybook": "^2.0.1",
-    "@web/test-runner": "^0.18.0",
-    "concurrently": "^8.0.1",
-    "eslint": "^8.39.0",
+    "@web/test-runner": "^0.19.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -258,5 +262,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ac097b448ea96721b3418132e92988afdf764519"
+  "gitHead": "0c2adcc994cd105055c9355810fa9c7c8196ca41"
 }

package/src/ox-input-color-stops.ts

@@ -210,7 +210,7 @@ export class OxInputColorStops extends OxFormField {
           <div
             id="markers"
             @dblclick=${(e: MouseEvent) => this._onDblClickMarkers(e)}
-            @mousedown=${(e: MouseEvent) => this._onMouseDown(e)}
+            @pointerdown=${(e: PointerEvent) => this._onPointerDown(e)}
             @dragstart=${(e: DragEvent) => this._onDragStart(e)}
             @drag=${this._throttled(100, this._onDrag.bind(this))}
             @dragend=${(e: DragEvent) => this._onDragEnd(e)}
@@ -422,7 +422,7 @@ export class OxInputColorStops extends OxFormField {
     this.colorEditor.showPicker()
   }
 
-  _onMouseDown(e: MouseEvent) {
+  _onPointerDown(e: PointerEvent) {
     if (this.disabled) {
       return
     }

package/src/ox-input-direction.ts

@@ -31,19 +31,46 @@ export class OxInputDirection extends OxFormField {
       color: var(--md-sys-color-on-primary);
       background-color: var(--md-sys-color-primary);
     }
+
+    /* 아이콘 회전 */
+    md-icon[data-value='W'] {
+      transform: rotate(-90deg);
+    }
+
+    md-icon[data-value='N'] {
+      transform: rotate(0deg);
+    }
+
+    md-icon[data-value='S'] {
+      transform: rotate(180deg);
+    }
+
+    md-icon[data-value='E'] {
+      transform: rotate(90deg);
+    }
   `
 
   @property({ type: String }) value?: string
+  @property({ type: Boolean }) inbound?: boolean = false
 
   render() {
     const value = this.value
 
     return html`
       <div @click=${this.onClick.bind(this)}>
-        <md-icon ?selected=${value == 'W'} data-value="W">arrow_back</md-icon>
-        <md-icon ?selected=${value == 'N'} data-value="N">arrow_upward</md-icon>
-        <md-icon ?selected=${value == 'S'} data-value="S">arrow_downward</md-icon>
-        <md-icon ?selected=${value == 'E'} data-value="E">arrow_forward</md-icon>
+        ${this.inbound
+          ? html`
+              <md-icon ?selected=${value == 'W'} data-value="W">step_into</md-icon>
+              <md-icon ?selected=${value == 'N'} data-value="N">step_into</md-icon>
+              <md-icon ?selected=${value == 'S'} data-value="S">step_into</md-icon>
+              <md-icon ?selected=${value == 'E'} data-value="E">step_into</md-icon>
+            `
+          : html`
+              <md-icon ?selected=${value == 'W'} data-value="W">step_out</md-icon>
+              <md-icon ?selected=${value == 'N'} data-value="N">step_out</md-icon>
+              <md-icon ?selected=${value == 'S'} data-value="S">step_out</md-icon>
+              <md-icon ?selected=${value == 'E'} data-value="E">step_out</md-icon>
+            `}
       </div>
     `
   }

package/src/ox-input-signature.ts

@@ -1,7 +1,7 @@
 import '@material/web/icon/icon.js'
 
-import { css, html, nothing } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { css, html, PropertyValues } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { OxFormField } from './ox-form-field.js'
 
@@ -31,8 +31,6 @@ export class OxInputSignature extends OxFormField {
       }
 
       dialog canvas {
-        width: 100%;
-        height: 100%;
         border: 1px solid var(--md-sys-color-outline);
       }
 
@@ -46,6 +44,19 @@ export class OxInputSignature extends OxFormField {
       .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;
+      }
     `
   ]
 
@@ -69,13 +80,10 @@ export class OxInputSignature extends OxFormField {
         <canvas
           width="800"
           height="400"
-          @mousedown=${this.startDrawing}
-          @mouseup=${this.stopDrawing}
-          @mousemove=${this.draw}
-          @mouseleave=${this.stopDrawing}
-          @touchstart=${this.startDrawing}
-          @touchend=${this.stopDrawing}
-          @touchmove=${this.draw}
+          @pointerdown=${this.startDrawing}
+          @pointerup=${this.stopDrawing}
+          @pointermove=${this.draw}
+          @pointerleave=${this.stopDrawing}
         ></canvas>
         <div class="controls">
           <button @click="${this.clearCanvas}">Clear</button>
@@ -98,11 +106,19 @@ export class OxInputSignature extends OxFormField {
     }
   }
 
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('value')) {
+      this.loadSignature(this.value)
+    }
+  }
+
   openDialog() {
-    if (this.disabled) return
+    if (this.disabled) {
+      return
+    }
+
     this.dialog.showModal()
 
-    // 다이아로그가 열릴 때 현재 value를 캔버스에 그리기
     if (this.value) {
       const img = new Image()
       img.onload = () => {
@@ -121,18 +137,30 @@ export class OxInputSignature extends OxFormField {
       return
     }
 
+    event.preventDefault()
+    event.stopPropagation()
+
     this.isDrawing = true
     this.ctx.beginPath()
     const position = this.getEventPosition(event)
     this.ctx.moveTo(position.x, position.y)
   }
 
-  stopDrawing() {
+  stopDrawing(event: MouseEvent | TouchEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+
     this.isDrawing = false
   }
 
   draw(event: MouseEvent | TouchEvent) {
-    if (!this.isDrawing) return
+    if (!this.isDrawing) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+
     const position = this.getEventPosition(event)
     this.ctx.lineTo(position.x, position.y)
     this.ctx.stroke()
@@ -149,8 +177,8 @@ export class OxInputSignature extends OxFormField {
     this.closeDialog()
   }
 
-  loadSignature(dataUrl: string) {
-    this.previewDiv.style.backgroundImage = `url(${dataUrl})`
+  loadSignature(dataUrl: string | null) {
+    this.previewDiv.style.backgroundImage = dataUrl ? `url(${dataUrl})` : 'none'
   }
 
   getEventPosition(event: MouseEvent | TouchEvent) {

package/src/ox-select-floor.ts

@@ -0,0 +1,246 @@
+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`
+  }
+}