@regcheq/ui-vue-2 1.17.1 → 1.19.0

package/dist/index.css

@@ -1320,14 +1320,76 @@
   color: #52525b;
 }
 .rq-tabs {
+  position: relative;
   display: inline-flex;
   align-items: center;
   width: fit-content;
+  max-width: 100%;
   background: rgba(0, 0, 0, 0.05);
 }
-.rq-tabs--loading {
+.rq-tabs__viewport {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 3px;
+  margin: -3px;
+  min-width: 0;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.rq-tabs__viewport::-webkit-scrollbar {
+  display: none;
+}
+.rq-tabs--loading .rq-tabs__viewport {
   gap: 4px;
 }
+.rq-tabs--scroll-prev .rq-tabs__viewport {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px);
+  mask-image: linear-gradient(to right, transparent 0, #000 32px);
+}
+.rq-tabs--scroll-next .rq-tabs__viewport {
+  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px);
+  mask-image: linear-gradient(to left, transparent 0, #000 32px);
+}
+.rq-tabs--scroll-prev.rq-tabs--scroll-next .rq-tabs__viewport {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
+}
+.rq-tabs__scroll-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  background: #ffffff;
+  border: 1px solid #e4e4e7;
+  border-radius: 999px;
+  box-shadow: 0px 1px 1px 0px rgba(15, 15, 21, 0.1);
+  cursor: pointer;
+  color: #18181b;
+  outline: none;
+  transition: background 100ms ease, box-shadow 100ms ease;
+}
+.rq-tabs__scroll-btn:hover {
+  background: #fafafa;
+}
+.rq-tabs__scroll-btn:active {
+  background: #f4f4f5;
+}
+.rq-tabs__scroll-btn:focus-visible {
+  box-shadow: 0 0 0 2px #d4d4d8;
+}
+.rq-tabs__scroll-btn--prev {
+  left: 2px;
+}
+.rq-tabs__scroll-btn--next {
+  right: 2px;
+}
 .rq-tabs--regular {
   padding: 3px;
   border-radius: 12px;
@@ -1336,6 +1398,10 @@
   min-height: 29px;
   border-radius: 12px;
 }
+.rq-tabs--regular .rq-tabs__scroll-btn {
+  width: 26px;
+  height: 26px;
+}
 .rq-tabs--large {
   padding: 2px;
   border-radius: 12px;
@@ -1344,6 +1410,10 @@
   min-height: 32px;
   border-radius: 12px;
 }
+.rq-tabs--large .rq-tabs__scroll-btn {
+  width: 28px;
+  height: 28px;
+}
 .rq-tabs--small {
   padding: 2px;
   border-radius: 8px;
@@ -1352,11 +1422,16 @@
   min-height: 20px;
   border-radius: 8px;
 }
+.rq-tabs--small .rq-tabs__scroll-btn {
+  width: 18px;
+  height: 18px;
+}
 .rq-tabs__tab {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
+  flex-shrink: 0;
   padding: 2px 6px;
   background: transparent;
   border: none;

package/dist/index.esm.js

@@ -33986,10 +33986,42 @@ const tabsVariants = cva('rq-tabs', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 // Anchos fijos para que los pills fantasma no se vean todos iguales.
 const SKELETON_WIDTH_PATTERN = [70, 90, 60];
+
+// Proporción del ancho visible que avanza cada click en las flechas.
+const SCROLL_PAGE_RATIO = 0.8;
+
+// Aire que queda entre el tab acercado y el borde del viewport.
+const SCROLL_EDGE_MARGIN = 8;
+
+// Los anchos de scroll son subpixel: sin tolerancia la flecha queda visible
+// al final del recorrido por diferencias de decimales.
+const SCROLL_EPSILON = 1;
 var script$g = {
   name: 'Tabs',
   components: {
@@ -34019,17 +34051,34 @@ var script$g = {
       default: 3
     }
   },
+  data() {
+    return {
+      canScrollPrev: false,
+      canScrollNext: false
+    };
+  },
   computed: {
     classes() {
       return [tabsVariants({
         size: this.size
       }), {
-        'rq-tabs--loading': this.loading
+        'rq-tabs--loading': this.loading,
+        'rq-tabs--scroll-prev': this.canScrollPrev,
+        'rq-tabs--scroll-next': this.canScrollNext
       }];
     },
     iconSize() {
       return this.size === 'small' ? 16 : 20;
     },
+    scrollIconSize() {
+      return this.size === 'small' ? 12 : 16;
+    },
+    chevronLeftIcon() {
+      return ChevronLeft;
+    },
+    chevronRightIcon() {
+      return ChevronRight;
+    },
     processedTabs() {
       return this.tabs.map(tab => ({
         ...tab,
@@ -34045,6 +34094,27 @@ var script$g = {
       return this.size === 'small' ? '12px' : '16px';
     }
   },
+  watch: {
+    tabs() {
+      this.$nextTick(this.updateScrollState);
+    },
+    loading() {
+      this.$nextTick(this.updateScrollState);
+    },
+    value() {
+      this.$nextTick(this.scrollActiveIntoView);
+    }
+  },
+  mounted() {
+    this.updateScrollState();
+    this.observeViewportResize();
+  },
+  beforeDestroy() {
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+  },
   methods: {
     tabClasses(tab) {
       return ['rq-tabs__tab', {
@@ -34055,6 +34125,67 @@ var script$g = {
     },
     selectTab(tab) {
       if (!tab.disabled) this.$emit('input', tab.id);
+    },
+    // El ancho del viewport depende del contenedor padre, no de props: sin
+    // observarlo las flechas quedan desfasadas al redimensionar.
+    observeViewportResize() {
+      const viewport = this.$refs.viewport;
+      if (!viewport || typeof ResizeObserver === 'undefined') return;
+      this._resizeObserver = new ResizeObserver(() => this.updateScrollState());
+      this._resizeObserver.observe(viewport);
+    },
+    updateScrollState() {
+      const viewport = this.$refs.viewport;
+      if (!viewport || this.loading) {
+        this.canScrollPrev = false;
+        this.canScrollNext = false;
+        return;
+      }
+      const maxScroll = viewport.scrollWidth - viewport.clientWidth;
+      this.canScrollPrev = viewport.scrollLeft > SCROLL_EPSILON;
+      this.canScrollNext = viewport.scrollLeft < maxScroll - SCROLL_EPSILON;
+    },
+    scrollByPage(direction) {
+      const viewport = this.$refs.viewport;
+      if (!viewport) return;
+      const delta = direction * Math.round(viewport.clientWidth * SCROLL_PAGE_RATIO);
+      if (typeof viewport.scrollBy === 'function') {
+        viewport.scrollBy({
+          left: delta,
+          behavior: 'smooth'
+        });
+      } else {
+        viewport.scrollLeft += delta;
+      }
+    },
+    // Al cambiar de tab por fuera del click (teclado, v-model del consumidor)
+    // el activo puede quedar fuera de vista.
+    scrollActiveIntoView() {
+      const viewport = this.$refs.viewport;
+      if (!viewport) return;
+      const active = viewport.querySelector('.rq-tabs__tab--active');
+      if (!active) return;
+      const start = active.offsetLeft;
+      const end = start + active.offsetWidth;
+      const viewStart = viewport.scrollLeft;
+      const viewEnd = viewStart + viewport.clientWidth;
+      if (start < viewStart) {
+        this.scrollToLeft(start - SCROLL_EDGE_MARGIN);
+      } else if (end > viewEnd) {
+        this.scrollToLeft(end - viewport.clientWidth + SCROLL_EDGE_MARGIN);
+      }
+    },
+    scrollToLeft(left) {
+      const viewport = this.$refs.viewport;
+      const target = Math.max(0, left);
+      if (typeof viewport.scrollTo === 'function') {
+        viewport.scrollTo({
+          left: target,
+          behavior: 'smooth'
+        });
+      } else {
+        viewport.scrollLeft = target;
+      }
     }
   }
 };
@@ -34069,7 +34200,29 @@ var __vue_render__$g = function () {
   var _c = _vm._self._c || _h;
   return _c("div", _vm._g({
     class: _vm.classes
-  }, _vm.$listeners), [_vm.loading ? _vm._l(_vm.skeletonWidths, function (w, i) {
+  }, _vm.$listeners), [_vm.canScrollPrev ? _c("button", {
+    staticClass: "rq-tabs__scroll-btn rq-tabs__scroll-btn--prev",
+    attrs: {
+      type: "button",
+      "aria-label": "Desplazar tabs a la izquierda"
+    },
+    on: {
+      click: function ($event) {
+        return _vm.scrollByPage(-1);
+      }
+    }
+  }, [_c(_vm.chevronLeftIcon, {
+    tag: "component",
+    attrs: {
+      size: _vm.scrollIconSize
+    }
+  })], 1) : _vm._e(), _vm._v(" "), _c("div", {
+    ref: "viewport",
+    staticClass: "rq-tabs__viewport",
+    on: {
+      scroll: _vm.updateScrollState
+    }
+  }, [_vm.loading ? _vm._l(_vm.skeletonWidths, function (w, i) {
     return _c("div", {
       key: "skeleton-" + i,
       staticClass: "rq-tabs__tab rq-tabs__tab--skeleton"
@@ -34103,7 +34256,23 @@ var __vue_render__$g = function () {
     }, [_vm._v(_vm._s(tab.label))]) : _vm._e(), _vm._v(" "), tab.counter !== undefined ? _c("span", {
       staticClass: "rq-tabs__tab-counter"
     }, [_vm._v(_vm._s(tab.counter))]) : _vm._e()], 1);
-  })], 2);
+  })], 2), _vm._v(" "), _vm.canScrollNext ? _c("button", {
+    staticClass: "rq-tabs__scroll-btn rq-tabs__scroll-btn--next",
+    attrs: {
+      type: "button",
+      "aria-label": "Desplazar tabs a la derecha"
+    },
+    on: {
+      click: function ($event) {
+        return _vm.scrollByPage(1);
+      }
+    }
+  }, [_c(_vm.chevronRightIcon, {
+    tag: "component",
+    attrs: {
+      size: _vm.scrollIconSize
+    }
+  })], 1) : _vm._e()]);
 };
 var __vue_staticRenderFns__$g = [];
 __vue_render__$g._withStripped = true;

package/dist/index.js

@@ -33988,10 +33988,42 @@ const tabsVariants = cva('rq-tabs', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 // Anchos fijos para que los pills fantasma no se vean todos iguales.
 const SKELETON_WIDTH_PATTERN = [70, 90, 60];
+
+// Proporción del ancho visible que avanza cada click en las flechas.
+const SCROLL_PAGE_RATIO = 0.8;
+
+// Aire que queda entre el tab acercado y el borde del viewport.
+const SCROLL_EDGE_MARGIN = 8;
+
+// Los anchos de scroll son subpixel: sin tolerancia la flecha queda visible
+// al final del recorrido por diferencias de decimales.
+const SCROLL_EPSILON = 1;
 var script$g = {
   name: 'Tabs',
   components: {
@@ -34021,17 +34053,34 @@ var script$g = {
       default: 3
     }
   },
+  data() {
+    return {
+      canScrollPrev: false,
+      canScrollNext: false
+    };
+  },
   computed: {
     classes() {
       return [tabsVariants({
         size: this.size
       }), {
-        'rq-tabs--loading': this.loading
+        'rq-tabs--loading': this.loading,
+        'rq-tabs--scroll-prev': this.canScrollPrev,
+        'rq-tabs--scroll-next': this.canScrollNext
       }];
     },
     iconSize() {
       return this.size === 'small' ? 16 : 20;
     },
+    scrollIconSize() {
+      return this.size === 'small' ? 12 : 16;
+    },
+    chevronLeftIcon() {
+      return ChevronLeft;
+    },
+    chevronRightIcon() {
+      return ChevronRight;
+    },
     processedTabs() {
       return this.tabs.map(tab => ({
         ...tab,
@@ -34047,6 +34096,27 @@ var script$g = {
       return this.size === 'small' ? '12px' : '16px';
     }
   },
+  watch: {
+    tabs() {
+      this.$nextTick(this.updateScrollState);
+    },
+    loading() {
+      this.$nextTick(this.updateScrollState);
+    },
+    value() {
+      this.$nextTick(this.scrollActiveIntoView);
+    }
+  },
+  mounted() {
+    this.updateScrollState();
+    this.observeViewportResize();
+  },
+  beforeDestroy() {
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+  },
   methods: {
     tabClasses(tab) {
       return ['rq-tabs__tab', {
@@ -34057,6 +34127,67 @@ var script$g = {
     },
     selectTab(tab) {
       if (!tab.disabled) this.$emit('input', tab.id);
+    },
+    // El ancho del viewport depende del contenedor padre, no de props: sin
+    // observarlo las flechas quedan desfasadas al redimensionar.
+    observeViewportResize() {
+      const viewport = this.$refs.viewport;
+      if (!viewport || typeof ResizeObserver === 'undefined') return;
+      this._resizeObserver = new ResizeObserver(() => this.updateScrollState());
+      this._resizeObserver.observe(viewport);
+    },
+    updateScrollState() {
+      const viewport = this.$refs.viewport;
+      if (!viewport || this.loading) {
+        this.canScrollPrev = false;
+        this.canScrollNext = false;
+        return;
+      }
+      const maxScroll = viewport.scrollWidth - viewport.clientWidth;
+      this.canScrollPrev = viewport.scrollLeft > SCROLL_EPSILON;
+      this.canScrollNext = viewport.scrollLeft < maxScroll - SCROLL_EPSILON;
+    },
+    scrollByPage(direction) {
+      const viewport = this.$refs.viewport;
+      if (!viewport) return;
+      const delta = direction * Math.round(viewport.clientWidth * SCROLL_PAGE_RATIO);
+      if (typeof viewport.scrollBy === 'function') {
+        viewport.scrollBy({
+          left: delta,
+          behavior: 'smooth'
+        });
+      } else {
+        viewport.scrollLeft += delta;
+      }
+    },
+    // Al cambiar de tab por fuera del click (teclado, v-model del consumidor)
+    // el activo puede quedar fuera de vista.
+    scrollActiveIntoView() {
+      const viewport = this.$refs.viewport;
+      if (!viewport) return;
+      const active = viewport.querySelector('.rq-tabs__tab--active');
+      if (!active) return;
+      const start = active.offsetLeft;
+      const end = start + active.offsetWidth;
+      const viewStart = viewport.scrollLeft;
+      const viewEnd = viewStart + viewport.clientWidth;
+      if (start < viewStart) {
+        this.scrollToLeft(start - SCROLL_EDGE_MARGIN);
+      } else if (end > viewEnd) {
+        this.scrollToLeft(end - viewport.clientWidth + SCROLL_EDGE_MARGIN);
+      }
+    },
+    scrollToLeft(left) {
+      const viewport = this.$refs.viewport;
+      const target = Math.max(0, left);
+      if (typeof viewport.scrollTo === 'function') {
+        viewport.scrollTo({
+          left: target,
+          behavior: 'smooth'
+        });
+      } else {
+        viewport.scrollLeft = target;
+      }
     }
   }
 };
@@ -34071,7 +34202,29 @@ var __vue_render__$g = function () {
   var _c = _vm._self._c || _h;
   return _c("div", _vm._g({
     class: _vm.classes
-  }, _vm.$listeners), [_vm.loading ? _vm._l(_vm.skeletonWidths, function (w, i) {
+  }, _vm.$listeners), [_vm.canScrollPrev ? _c("button", {
+    staticClass: "rq-tabs__scroll-btn rq-tabs__scroll-btn--prev",
+    attrs: {
+      type: "button",
+      "aria-label": "Desplazar tabs a la izquierda"
+    },
+    on: {
+      click: function ($event) {
+        return _vm.scrollByPage(-1);
+      }
+    }
+  }, [_c(_vm.chevronLeftIcon, {
+    tag: "component",
+    attrs: {
+      size: _vm.scrollIconSize
+    }
+  })], 1) : _vm._e(), _vm._v(" "), _c("div", {
+    ref: "viewport",
+    staticClass: "rq-tabs__viewport",
+    on: {
+      scroll: _vm.updateScrollState
+    }
+  }, [_vm.loading ? _vm._l(_vm.skeletonWidths, function (w, i) {
     return _c("div", {
       key: "skeleton-" + i,
       staticClass: "rq-tabs__tab rq-tabs__tab--skeleton"
@@ -34105,7 +34258,23 @@ var __vue_render__$g = function () {
     }, [_vm._v(_vm._s(tab.label))]) : _vm._e(), _vm._v(" "), tab.counter !== undefined ? _c("span", {
       staticClass: "rq-tabs__tab-counter"
     }, [_vm._v(_vm._s(tab.counter))]) : _vm._e()], 1);
-  })], 2);
+  })], 2), _vm._v(" "), _vm.canScrollNext ? _c("button", {
+    staticClass: "rq-tabs__scroll-btn rq-tabs__scroll-btn--next",
+    attrs: {
+      type: "button",
+      "aria-label": "Desplazar tabs a la derecha"
+    },
+    on: {
+      click: function ($event) {
+        return _vm.scrollByPage(1);
+      }
+    }
+  }, [_c(_vm.chevronRightIcon, {
+    tag: "component",
+    attrs: {
+      size: _vm.scrollIconSize
+    }
+  })], 1) : _vm._e()]);
 };
 var __vue_staticRenderFns__$g = [];
 __vue_render__$g._withStripped = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@regcheq/ui-vue-2",
-  "version": "1.17.1",
+  "version": "1.19.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "files": [