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

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.45",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -42,6 +42,7 @@
     "./ox-input-key-values.js": "./dist/src/ox-input-key-values.js",
     "./ox-select.js": "./dist/src/ox-select.js",
     "./ox-input-file.js": "./dist/src/ox-input-file.js",
+    "./ox-input-switch.js": "./dist/src/ox-input-switch.js",
     "./ox-input-image.js": "./dist/src/ox-input-image.js",
     "./ox-input-options.js": "./dist/src/ox-input-options.js",
     "./ox-input-select-buttons.js": "./dist/src/ox-input-select-buttons.js",
@@ -58,6 +59,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": {
@@ -131,6 +133,9 @@
       "./ox-input-file.js": [
         "./dist/src/ox-input-file.d.ts"
       ],
+      "./ox-input-switch.js": [
+        "./dist/src/ox-input-switch.d.ts"
+      ],
       "./ox-input-image.js": [
         "./dist/src/ox-input-image.d.ts"
       ],
@@ -179,6 +184,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 +218,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 +233,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 +266,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ac097b448ea96721b3418132e92988afdf764519"
+  "gitHead": "4099b112eea6e2c554d1d0a74e7b026f377bb039"
 }

package/src/index.ts

@@ -6,6 +6,7 @@ export * from './ox-form-field.js'
 export * from './ox-buttons-radio.js'
 export * from './ox-checkbox.js'
 export * from './ox-select.js'
+export * from './ox-input-switch.js'
 export * from './ox-input-angle.js'
 export * from './ox-input-3dish.js'
 export * from './ox-input-3axis.js'

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-input-switch.ts

@@ -0,0 +1,116 @@
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field'
+
+@customElement('ox-input-switch')
+export class OxInputSwitch extends OxFormField {
+  static styles = css`
+    :host {
+      --ox-simple-switch-fullwidth: 2em;
+      --ox-simple-switch-fullheight: 1em;
+      --ox-simple-switch-thumbnail-size: 1em;
+    }
+
+    label {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+    }
+
+    label input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    span {
+      position: absolute;
+      cursor: pointer;
+      width: var(--ox-simple-switch-fullwidth);
+      height: var(--ox-simple-switch-fullheight);
+      top: calc(0 - var(--ox-simple-switch-thumbnail-size));
+      left: 0;
+      background-color: var(--ox-simple-switch-off-color, #ccc);
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+    }
+
+    span:before {
+      position: absolute;
+      content: '';
+      height: calc(var(--ox-simple-switch-thumbnail-size) - 8px);
+      width: calc(var(--ox-simple-switch-thumbnail-size) - 8px);
+      left: 4px;
+      top: 4px;
+      background-color: var(--ox-simple-switch-thumbnail-color, white);
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+    }
+
+    input:checked + span {
+      background-color: var(--ox-simple-switch-on-color, #2196f3);
+    }
+
+    input + span:before {
+      -webkit-transform: translateY(
+        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)
+      );
+      -ms-transform: translateY(
+        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)
+      );
+      transform: translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
+    }
+
+    input:checked + span:before {
+      -webkit-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
+        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
+      -ms-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
+        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
+      transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
+        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
+    }
+
+    /* Rounded sliders */
+    span[round] {
+      border-radius: calc(var(--ox-simple-switch-thumbnail-size) / 2);
+    }
+
+    span[round]:before {
+      border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);
+    }
+  `
+
+  @property({ type: Boolean }) round: boolean = false
+  @property({ type: Boolean }) value: boolean = false
+
+  render() {
+    return html`
+      <label>
+        <input type="checkbox" .checked=${this.value} />
+        <span ?round=${this.round}></span>
+      </label>
+    `
+  }
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', (e: Event) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      this.value = (e.target as HTMLInputElement)?.checked
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          composed: true,
+          detail: this.value
+        })
+      )
+    })
+  }
+
+  protected appendFormData({ formData }: FormDataEvent): void {
+    this.name && formData.append(this.name, this.value ? 'true' : 'false')
+  }
+}

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