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

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

package/src/ox-select-floor.ts

@@ -81,7 +81,7 @@ export class OxSelectFloor extends OxFormField {
   @property({ type: String }) value?: string
   @property({ type: Number }) bottomLimit = 70
 
-  @state() private selectedIndex = 0
+  @state() private selectedIndex = -1
   @state() private activeIndex: number | null = null
   @query('.carousel-container') private carouselContainer!: HTMLDivElement
 
@@ -91,6 +91,7 @@ export class OxSelectFloor extends OxFormField {
 
   render() {
     const length = this.cards.length
+    const cards = this.cards
 
     return html`
       <div
@@ -104,28 +105,26 @@ export class OxSelectFloor extends OxFormField {
         @touchmove=${this.handleTouchMove}
         @touchend=${this.handleTouchEnd}
       >
-        ${this.cards.map(({ image, name }, index) => {
-          const reverse = length - index - 1
+        ${cards.map(({ image, name }, index) => {
           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)}
+              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, reverse)} />
+              <img src="${image}" @load=${(e: Event) => this.adjustCardHeight(e, index)} />
             </div>
           `
         })}
-        ${this.cards.map(({ image, name }, index) => {
-          const reverse = length - index - 1
+        ${cards.map(({ image, name }, index) => {
           return html`
             <div
-              style="bottom: ${(this.bottomLimit * reverse) / length}%;"
-              @click=${() => this.selectCard(reverse)}
+              style="bottom: ${(this.bottomLimit * index) / length}%;"
+              @click=${() => this.selectCard(index)}
               template-container
             >
-              <slot name="template-${reverse}"></slot>
+              <slot name="template-${index}"></slot>
             </div>
           `
         })}
@@ -222,13 +221,14 @@ export class OxSelectFloor extends OxFormField {
   private updateSelectedIndex(newIndex: number) {
     this.activeIndex = null
 
-    this.selectedIndex = Math.max(0, Math.min(newIndex, this.cards.length - 1))
+    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' })
   }
 

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

@@ -161,9 +161,8 @@ const Template: Story<ArgTypes> = ({
 
 export const Regular = Template.bind({})
 Regular.args = {
-  value: '1층',
   bottomLimit: 70,
   perspective: 1200,
-  rotateX: 40,
-  rotateXForActive: 60
+  rotateX: 60,
+  rotateXForActive: 40
 }