@operato/input 8.0.0-alpha.2 → 8.0.0-alpha.21

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.2",
+  "version": "8.0.0-alpha.21",
   "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": "868f7fd1dfcf1758b0fd8f8c7f198489b3b3bbf8"
+  "gitHead": "2a7eabbdab4073648f5d8bd49c02f2e62b7d3a8a"
 }

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,27 +10,19 @@ 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;
       }
 
       .signature-preview {
         flex: 1;
+        align-self: stretch;
 
         border: 1px solid var(--md-sys-color-outline);
         background-size: contain;
@@ -46,18 +38,28 @@ export class OxInputSignature extends OxFormField {
 
       .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
-  private canvas!: HTMLCanvasElement
-  private dialog!: HTMLDialogElement
+  @query('.signature-preview')
   private previewDiv!: HTMLDivElement
-  private previewCtx!: CanvasRenderingContext2D
+  @query('dialog')
+  private dialog!: HTMLDialogElement
+  @query('canvas')
+  private canvas!: HTMLCanvasElement
+
+  private ctx!: CanvasRenderingContext2D
+  private isDrawing = false
 
   render() {
     return html`
@@ -77,6 +79,7 @@ export class OxInputSignature extends OxFormField {
         ></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>
@@ -85,9 +88,6 @@ export class OxInputSignature extends OxFormField {
   }
 
   firstUpdated() {
-    this.previewDiv = this.shadowRoot!.querySelector('.signature-preview')!
-    this.dialog = this.shadowRoot!.querySelector('dialog')!
-    this.canvas = this.dialog.querySelector('canvas')!
     this.ctx = this.canvas.getContext('2d')!
     this.ctx.strokeStyle = '#000'
     this.ctx.lineWidth = 2
@@ -101,6 +101,15 @@ export class OxInputSignature extends OxFormField {
   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() {

package/src/ox-select-floor.ts

@@ -0,0 +1,264 @@
+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 {
+        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
+
+  @state() private selectedIndex = -1
+  @state() private activeIndex: number | null = null
+  @query('.carousel-container') private carouselContainer!: HTMLDivElement
+
+  private isDragging = false
+  private lastTouchY = 0
+  private lastMouseY = 0
+  private startY = 0
+
+  render() {
+    const length = this.cards.length
+    const cards = this.cards
+
+    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}
+      >
+        ${cards.map(({ image, name }, index) => {
+          return html`
+            <div
+              class="card ${this.getClassForCard(index)} ${this.isActive(index) ? 'active' : ''}"
+              style="bottom: ${(this.bottomLimit * index) / length}%;"
+              @click=${() => this.selectCard(index)}
+              @tap=${() => this.toggleActiveCard(index)}
+            >
+              <img src="${image}" @load=${(e: Event) => this.adjustCardHeight(e, index)} />
+            </div>
+          `
+        })}
+        ${cards.map(({ image, name }, index) => {
+          return html`
+            <div
+              style="bottom: ${(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)
+  }
+
+  handleTouchStart(event: TouchEvent) {
+    this.lastTouchY = event.touches[0].clientY
+    this.startY = this.lastTouchY
+  }
+
+  handleTouchMove(event: TouchEvent) {
+    const touch = event.touches[0]
+    const deltaY = touch.clientY - this.lastMouseY
+
+    if (!this.lastMouseY) {
+      this.lastMouseY = touch.clientY
+    }
+
+    if (Math.abs(deltaY) > 30) {
+      this.lastMouseY = touch.clientY
+      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(-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`
+  }
+}