@operato/input 8.0.0-alpha.20 → 8.0.0-alpha.26

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.20",
+  "version": "8.0.0-alpha.26",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -262,5 +262,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c8a1305148d5f9190d79f7107001455e46906b8e"
+  "gitHead": "14f757972a99c6c6807d3a7e8a555afbd4f891ce"
 }

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;
+      }
     `
   ]
 
@@ -98,11 +109,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 +140,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 +180,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

@@ -57,14 +57,15 @@ export class OxSelectFloor extends OxFormField {
       }
 
       .selected {
-        z-index: 10;
         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);
       }
@@ -72,7 +73,7 @@ export class OxSelectFloor extends OxFormField {
       [template-container] {
         position: absolute;
         right: 10px;
-        z-index: 20;
+        z-index: 1;
       }
     `
   ]
@@ -88,6 +89,7 @@ export class OxSelectFloor extends OxFormField {
   private isDragging = false
   private lastTouchY = 0
   private lastMouseY = 0
+  private startY = 0
 
   render() {
     const length = this.cards.length
@@ -162,15 +164,20 @@ export class OxSelectFloor extends OxFormField {
 
   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.lastTouchY
-    this.lastTouchY = touch.clientY
+    const deltaY = touch.clientY - this.lastMouseY
+
+    if (!this.lastMouseY) {
+      this.lastMouseY = touch.clientY
+    }
 
     if (Math.abs(deltaY) > 30) {
-      const direction = deltaY < 0 ? -1 : 1
+      this.lastMouseY = touch.clientY
+      const direction = deltaY > 0 ? -1 : 1
       this.updateSelectedIndex(this.selectedIndex + direction)
     }
   }
@@ -234,11 +241,11 @@ export class OxSelectFloor extends OxFormField {
 
   private selectCard(index: number) {
     this.selectedIndex = index
-    this._notifySelection()
+    this.notifySelection()
     this.scrollToSelectedCard()
   }
 
-  private _notifySelection() {
+  private notifySelection() {
     this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined
 
     this.dispatchEvent(

package/stories/ox-select-floor.stories.ts

@@ -71,6 +71,23 @@ const Template: Story<ArgTypes> = ({
   </style>
 
   <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+
+      overscroll-behavior-y: none;
+
+      /* This is a font-stack that tries to use the system-default sans-serifs first */
+      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+
+      accent-color: var(--md-sys-color-primary);
+      background-color: var(--md-sys-color-background);
+    }
+
     .container {
       height: 1000px;
       text-align: center;
@@ -86,48 +103,55 @@ const Template: Story<ArgTypes> = ({
       right: 0px;
       bottom: 0px;
       align-items: center;
-      z-index: 2;
       right: 3%;
+    }
+
+    div[status] > div[content] {
+      display: flex;
+      background-color: #4e5055;
+      color: #fff;
+      padding: 5px 7px;
+      border-radius: 7px;
+      gap: 10px;
+      font-size: 14px;
+    }
+
+    div[status] span {
+      display: flex;
+      align-items: center;
+      width: 48px;
+    }
+
+    div[status] md-icon {
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
+      border-radius: 5px;
+      font-size: 21px;
+      font-weight: 700;
+    }
+    div[status] md-icon[request] {
+      background-color: #f7f7f7;
+      color: #4e5055;
+    }
+    div[status] md-icon[pass] {
+      background-color: #4bbb4a;
+    }
+    div[status] md-icon[fail] {
+      background-color: #ff4444;
+    }
+
+    span[name] {
+      width: 40px;
+      color: #4e5055;
+      margin-left: 6px;
+      text-align: center;
+    }
 
-      div[content] {
-        display: flex;
-        background-color: #4e5055;
-        color: #fff;
-        padding: 5px 7px;
-        border-radius: 7px;
-        gap: 10px;
-        font-size: 14px;
-
-        span {
-          display: flex;
-          align-items: center;
-          width: 48px;
-
-          md-icon {
-            width: 20px;
-            height: 20px;
-            margin-right: 4px;
-            border-radius: 5px;
-            font-size: 21px;
-            font-weight: 700;
-          }
-          md-icon[request] {
-            background-color: #f7f7f7;
-            color: #4e5055;
-          }
-          md-icon[pass] {
-            background-color: #4bbb4a;
-          }
-          md-icon[fail] {
-            background-color: #ff4444;
-          }
-        }
-      }
-      span[name] {
-        color: #4e5055;
-        margin-left: 6px;
-        width: 40px;
-      }
+    span[name][active] {
+      color: var(--md-sys-color-on-error);
+      background-color: var(--md-sys-color-error);
+      border-radius: 999px;
     }
 
     ox-select-floor {