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

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.21",
+  "version": "8.0.0-alpha.27",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -216,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.4",
-    "@operato/styles": "^8.0.0-alpha.4",
+    "@operato/popup": "^8.0.0-alpha.27",
+    "@operato/styles": "^8.0.0-alpha.27",
     "@operato/utils": "^8.0.0-alpha.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
@@ -262,5 +262,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "2a7eabbdab4073648f5d8bd49c02f2e62b7d3a8a"
+  "gitHead": "7f16dfa02491950f7a8782cb305605925a9e0be4"
 }

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/themes/calendar-theme.css

@@ -9,7 +9,8 @@ body {
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
   --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-monty-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
   --calendar-monthly-label-color: var(--md-sys-color-secondary);
@@ -35,6 +36,7 @@ body {
   --calendar-weekly-ol-margin: var(--margin-default) 0;
   --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
   --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-week-color: var(--md-sys-color-on-surface);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
   --calendar-weekly-label-color: var(--md-sys-color-secondary);