@operato/input 8.0.0-alpha.1 → 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.1",
+  "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"
       ]
@@ -212,8 +216,8 @@
     "@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.0",
-    "@operato/styles": "^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",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
@@ -258,5 +262,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "7e2725314b1cb79c18f27b5a8db9dccd2461a1a3"
+  "gitHead": "9656b17ec8476c2eeace042a4e561161539e81e7"
 }

package/src/ox-input-file.ts

@@ -79,12 +79,13 @@ export class OxInputFile extends OxFormField {
         border-bottom: var(--file-uploader-li-border-bottom);
         font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
         color: var(--md-sys-color-on-primary-container);
+        display: flex;
+        align-items: center;
       }
       li md-icon {
-        float: right;
         cursor: pointer;
-        margin: var(--file-uploader-li-icon-margin);
         font-size: var(--icon-size-small);
+        margin-left: auto;
       }
       li md-icon:hover,
       li md-icon:active {

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 } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { OxFormField } from './ox-form-field.js'
 
@@ -10,83 +10,112 @@ export class OxInputSignature extends OxFormField {
   static styles = [
     css`
       :host {
-        position: relative;
-        box-sizing: border-box;
-
         display: flex;
         flex-direction: column;
-        place-content: center;
-        border-radius: var(--border-radius);
-        padding: var(--padding-default, 9px);
-        min-height: 100px;
-        text-transform: capitalize;
+        min-height: var(--signature-min-height, 80px);
+        min-width: var(--signature-min-width, 120px);
 
-        border: var(--file-uploader-border);
-        background-color: var(--md-sys-color-background);
-        font: var(--file-uploader-font) !important;
-        color: var(--file-uploader-color);
+        background-color: var(--signature-background-color, white);
 
         overflow: hidden;
       }
 
-      canvas {
+      .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 {
         width: 100%;
-        border: 1px solid #000;
+        height: 100%;
+        border: 1px solid var(--md-sys-color-outline);
       }
 
       .controls {
         margin-top: 10px;
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-medium);
+      }
+
+      .filler {
+        flex: 1;
       }
     `
   ]
 
-  @property({ type: Boolean }) isDrawing = false
   @property({ type: String }) value: string | null = null
 
-  private ctx!: CanvasRenderingContext2D
+  @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`
-      <canvas
-        width="400"
-        height="200"
-        @mousedown=${this.startDrawing}
-        @mouseup=${this.stopDrawing}
-        @mousemove=${this.draw}
-        @mouseleave=${this.stopDrawing}
-        @touchstart=${this.startDrawing}
-        @touchend=${this.stopDrawing}
-        @touchmove=${this.draw}
-      ></canvas>
-
-      ${!this.disabled
-        ? html` <div class="controls">
-            <button @click="${this.clearCanvas}">Clear</button>
-            <button @click="${this.saveSignature}">Save</button>
-          </div>`
-        : nothing}
+      <div class="signature-preview" @click=${this.openDialog}></div>
+
+      <dialog>
+        <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}
+        ></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.canvas = this.shadowRoot!.querySelector('canvas')!
     this.ctx = this.canvas.getContext('2d')!
     this.ctx.strokeStyle = '#000'
     this.ctx.lineWidth = 2
 
-    // 처음 로딩 시 서명 데이터를 캔버스에 표시
+    // 처음 로딩 시 서명 데이터를 미리보기 div에 표시
     if (this.value) {
       this.loadSignature(this.value)
     }
   }
 
-  updated(changedProperties: Map<string | number | symbol, unknown>) {
-    if (changedProperties.has('value') && this.value) {
-      this.loadSignature(this.value)
+  openDialog() {
+    if (this.disabled) return
+    this.dialog.showModal()
+
+    // 다이아로그가 열릴 때 현재 value를 캔버스에 그리기
+    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
@@ -116,15 +145,12 @@ export class OxInputSignature extends OxFormField {
   saveSignature() {
     this.value = this.canvas.toDataURL()
     this._notifyChange()
+    this.previewDiv.style.backgroundImage = `url(${this.value})`
+    this.closeDialog()
   }
 
   loadSignature(dataUrl: string) {
-    const image = new Image()
-    image.onload = () => {
-      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) // 이전 내용을 지움
-      this.ctx.drawImage(image, 0, 0) // 이미지를 캔버스에 그림
-    }
-    image.src = dataUrl
+    this.previewDiv.style.backgroundImage = `url(${dataUrl})`
   }
 
   getEventPosition(event: MouseEvent | TouchEvent) {

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`
+  }
+}