@operato/input - npm Package Compare versions

Comparing version 8.0.0-alpha.20 to 8.0.0-alpha.21

dist/src/ox-select-floor.d.ts

@@ -18,2 +18,3 @@ import { PropertyValues } from 'lit';
     private lastMouseY;
+    private startY;
     render(): import("lit-html").TemplateResult<1>;
@@ -36,5 +37,5 @@ updated(changes: PropertyValues<this>): void;
     private selectCard;
-    private _notifySelection;
+    private notifySelection;
     private adjustCardHeight;
 }
 export {};

dist/src/ox-select-floor.js

@@ -15,2 +15,3 @@ import { __decorate } from "tslib";
         this.lastMouseY = 0;
+        this.startY = 0;
     }
@@ -65,4 +66,4 @@ static { this.styles = [
       .selected {
-        z-index: 10;
         opacity: 0.8;
+        z-index: 1;
         border: 4px solid #3b82f6;
@@ -74,2 +75,3 @@ box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
         opacity: 1;
+        z-index: 2;
         transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));
@@ -82,3 +84,3 @@ box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);
         right: 10px;
-        z-index: 20;
+        z-index: 1;
       }
@@ -154,9 +156,13 @@ `
         this.lastTouchY = event.touches[0].clientY;
+        this.startY = this.lastTouchY;
     }
     handleTouchMove(event) {
         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);
@@ -212,6 +218,6 @@ }
         this.selectedIndex = index;
-        this._notifySelection();
+        this.notifySelection();
         this.scrollToSelectedCard();
     }
-    _notifySelection() {
+    notifySelection() {
         this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined;
@@ -218,0 +224,0 @@ this.dispatchEvent(new CustomEvent('change', {

dist/stories/ox-select-floor.stories.js

@@ -48,2 +48,19 @@ import '../src/ox-select-floor.js';
   <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 {
@@ -64,46 +81,53 @@ height: 1000px;
       align-items: center;
-      z-index: 2;
       right: 3%;
+    }
 
-      div[content] {
-        display: flex;
-        background-color: #4e5055;
-        color: #fff;
-        padding: 5px 7px;
-        border-radius: 7px;
-        gap: 10px;
-        font-size: 14px;
+    div[status] > 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;
+    div[status] 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;
-      }
+    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;
+    }
+
+    span[name][active] {
+      color: var(--md-sys-color-on-error);
+      background-color: var(--md-sys-color-error);
+      border-radius: 999px;
+    }
+
     ox-select-floor {
@@ -110,0 +134,0 @@ --ox-select-floor-rotate-x: ${rotateX}deg;

package.json

@@ -5,3 +5,3 @@ {
   "author": "[e-mail]",
-  "version": "8.0.0-alpha.20",
+  "version": "8.0.0-alpha.21",
   "main": "dist/src/index.js",
@@ -266,3 +266,3 @@ "module": "dist/src/index.js",
   },
-  "gitHead": "c8a1305148d5f9190d79f7107001455e46906b8e"
+  "gitHead": "2a7eabbdab4073648f5d8bd49c02f2e62b7d3a8a"
 }

src/ox-select-floor.ts

@@ -60,4 +60,4 @@ import { css, html, PropertyValues } from 'lit'
       .selected {
-        z-index: 10;
         opacity: 0.8;
+        z-index: 1;
         border: 4px solid #3b82f6;
@@ -69,2 +69,3 @@ box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
         opacity: 1;
+        z-index: 2;
         transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));
@@ -77,3 +78,3 @@ box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);
         right: 10px;
-        z-index: 20;
+        z-index: 1;
       }
@@ -94,2 +95,3 @@ `
   private lastMouseY = 0
+  private startY = 0
 
@@ -169,2 +171,3 @@ render() {
     this.lastTouchY = event.touches[0].clientY
+    this.startY = this.lastTouchY
   }
@@ -174,7 +177,11 @@
     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)
@@ -243,7 +250,7 @@ }
     this.selectedIndex = index
-    this._notifySelection()
+    this.notifySelection()
     this.scrollToSelectedCard()
   }
 
-  private _notifySelection() {
+  private notifySelection() {
     this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined
@@ -250,0 +257,0 @@

stories/ox-select-floor.stories.ts

@@ -74,2 +74,19 @@ import '../src/ox-select-floor.js'
   <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 {
@@ -90,46 +107,53 @@ height: 1000px;
       align-items: center;
-      z-index: 2;
       right: 3%;
+    }
 
-      div[content] {
-        display: flex;
-        background-color: #4e5055;
-        color: #fff;
-        padding: 5px 7px;
-        border-radius: 7px;
-        gap: 10px;
-        font-size: 14px;
+    div[status] > 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;
+    div[status] 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;
-      }
+    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;
+    }
+
+    span[name][active] {
+      color: var(--md-sys-color-on-error);
+      background-color: var(--md-sys-color-error);
+      border-radius: 999px;
+    }
+
     ox-select-floor {
@@ -136,0 +160,0 @@ --ox-select-floor-rotate-x: ${rotateX}deg;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4149463

increased by0.07%

Lines of code

32814

increased by0.15%

No dependency changes