@vaadin/vaadin-tabs - npm Package Compare versions

Comparing version 3.0.5 to 3.1.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-tabs",
-  "version": "3.0.5",
+  "version": "3.1.0-alpha1",
   "main": "vaadin-tabs.js",
@@ -35,8 +35,8 @@ "author": "Vaadin Ltd",
     "@polymer/iron-resizable-behavior": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^1.2.1",
-    "@vaadin/vaadin-list-mixin": "^2.1.0",
-    "@vaadin/vaadin-item": "^2.1.0",
+    "@vaadin/vaadin-themable-mixin": "^1.5.2",
+    "@vaadin/vaadin-list-mixin": "^2.4.0-alpha2",
+    "@vaadin/vaadin-item": "^2.2.0-alpha1",
     "@vaadin/vaadin-lumo-styles": "^1.1.0",
     "@vaadin/vaadin-material-styles": "^1.1.0",
-    "@vaadin/vaadin-element-mixin": "^2.0.0"
+    "@vaadin/vaadin-element-mixin": "^2.3.2"
   },
@@ -50,3 +50,3 @@ "devDependencies": {
     "@polymer/iron-test-helpers": "^3.0.0",
-    "@vaadin/vaadin-demo-helpers": "^3.0.0",
+    "@vaadin/vaadin-demo-helpers": "^3.1.0-alpha1",
     "@webcomponents/webcomponentsjs": "^2.0.0",
@@ -53,0 +53,0 @@ "wct-browser-legacy": "^1.0.1"

src/vaadin-tab.js

@@ -51,3 +51,3 @@ /**
   static get version() {
-    return '3.0.5';
+    return '3.1.0-alpha1';
   }
@@ -54,0 +54,0 @@

src/vaadin-tabs.js

@@ -129,2 +129,12 @@ /**
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="back-button"]::after {
+        content: '▶';
+      }
+
+      :host([dir="rtl"]) [part="forward-button"]::after {
+        content: '◀';
+      }
     </style>
@@ -146,3 +156,3 @@ <div on-click="_scrollBack" part="back-button"></div>
   static get version() {
-    return '3.0.5';
+    return '3.1.0-alpha1';
   }
@@ -187,7 +197,7 @@
   _scrollForward() {
-    this._scroll(this._scrollOffset);
+    this._scroll(-this.__direction * this._scrollOffset);
   }
 
   _scrollBack() {
-    this._scroll(-1 * this._scrollOffset);
+    this._scroll(this.__direction * this._scrollOffset);
   }
@@ -203,4 +213,8 @@
 
+  get __direction() {
+    return !this._vertical && this.getAttribute('dir') === 'rtl' ? 1 : -1;
+  }
+
   _updateOverflow() {
-    const scrollPosition = this._vertical ? this._scrollerElement.scrollTop : this._scrollerElement.scrollLeft;
+    const scrollPosition = this._vertical ? this._scrollerElement.scrollTop : this.__getNormalizedScrollLeft(this._scrollerElement);
     let scrollSize = this._vertical ? this._scrollerElement.scrollHeight : this._scrollerElement.scrollWidth;
@@ -212,2 +226,9 @@ // In Edge we need to adjust the size in 1 pixel
     overflow += scrollPosition + this._scrollOffset < scrollSize ? ' end' : '';
+
+    if (this.__direction == 1) {
+      overflow = overflow.replace(/start|end/gi, matched => {
+        return matched === 'start' ? 'end' : 'start';
+      });
+    }
+
     overflow ? this.setAttribute('overflow', overflow.trim()) : this.removeAttribute('overflow');
@@ -214,0 +235,0 @@

theme/lumo/vaadin-tab-styles.js

@@ -150,7 +150,7 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
-      :host ::slotted(iron-icon:first-child) {
+      :host(:not([dir="rtl"])) ::slotted(iron-icon:first-child) {
         margin-left: 0;
       }
 
-      :host ::slotted(iron-icon:last-child) {
+      :host(:not([dir="rtl"])) ::slotted(iron-icon:last-child) {
         margin-right: 0;
@@ -194,2 +194,36 @@ }
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"])::before,
+      :host([dir="rtl"])::after {
+        left: auto;
+        right: 50%;
+        transform: translateX(50%) scale(0);
+      }
+
+      :host([dir="rtl"][selected]:not([orientation="vertical"]))::before,
+      :host([dir="rtl"][selected]:not([orientation="vertical"]))::after {
+        transform: translateX(50%) scale(1);
+      }
+
+      :host([dir="rtl"]) ::slotted(iron-icon:first-child) {
+        margin-right: 0;
+      }
+
+      :host([dir="rtl"]) ::slotted(iron-icon:last-child) {
+        margin-left: 0;
+      }
+
+      :host([orientation="vertical"][dir="rtl"]) {
+        transform-origin: 100% 50%;
+      }
+
+      :host([dir="rtl"][orientation="vertical"])::before,
+      :host([dir="rtl"][orientation="vertical"])::after {
+        left: auto;
+        right: 0;
+        border-radius: var(--lumo-border-radius) 0 0 var(--lumo-border-radius);
+        transform-origin: 0% 50%;
+      }
     </style>
@@ -196,0 +230,0 @@ </template>

theme/lumo/vaadin-tabs-styles.js

@@ -60,3 +60,3 @@ import '@vaadin/vaadin-lumo-styles/font-icons.js';
 
-      [part="forward-button"] {
+      :host(:not([dir="rtl"])) [part="forward-button"] {
         right: 0;
@@ -188,2 +188,52 @@ }
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="forward-button"]::after {
+        content: var(--lumo-icons-angle-left);
+      }
+
+      :host([dir="rtl"]) [part="back-button"]::after {
+        content: var(--lumo-icons-angle-right);
+      }
+
+      :host([orientation="vertical"][dir="rtl"]) {
+        box-shadow: 1px 0 0 0 var(--lumo-contrast-10pct);
+      }
+
+      :host([dir="rtl"]) [part="forward-button"] {
+        left: 0;
+      }
+
+      :host([dir="rtl"]) [part="tabs"] ::slotted(:not(vaadin-tab)) {
+        margin-left: 0;
+        margin-right: var(--lumo-space-m);
+      }
+
+      /* Both ends overflowing */
+      :host([dir="rtl"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em, #000 calc(100% - 4em), transparent calc(100% - 2em));
+      }
+
+      /* End overflowing */
+      :host([dir="rtl"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
+      }
+
+      /* Start overflowing */
+      :host([dir="rtl"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em);
+      }
+
+      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em, #000 calc(100% - 2em), transparent 100%);
+      }
+
+      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 2em), transparent 100%);
+      }
+
+      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em);
+      }
     </style>
@@ -190,0 +240,0 @@ </template>

theme/material/vaadin-tab-styles.js

@@ -134,2 +134,8 @@ import '@vaadin/vaadin-material-styles/color.js';
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"][orientation="vertical"][selected]) {
+        box-shadow: inset -2px 0 0 0 var(--material-primary-color);
+      }
     </style>
@@ -136,0 +142,0 @@ </template>

theme/material/vaadin-tabs-styles.js

@@ -53,3 +53,3 @@ import '@vaadin/vaadin-material-styles/font-icons.js';
 
-      [part="forward-button"] {
+      :host(:not([dir="rtl"])) [part="forward-button"] {
         right: 0;
@@ -77,2 +77,16 @@ }
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="forward-button"] {
+        left: 0;
+      }
+
+      :host([dir="rtl"]) [part="forward-button"]::after {
+        content: var(--material-icons-chevron-left);
+      }
+
+      :host([dir="rtl"]) [part="back-button"]::after {
+        content: var(--material-icons-chevron-right);
+      }
     </style>
@@ -79,0 +93,0 @@ </template>

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47807

increased by9.72%

Lines of code

878

increased by11.99%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@vaadin/vaadin-element-mixin@^2.3.2

• Updated@vaadin/vaadin-item@^2.2.0-alpha1

• Updated@vaadin/vaadin-list-mixin@^2.4.0-alpha2

• Updated@vaadin/vaadin-themable-mixin@^1.5.2