@nixweb/nixloc-ui 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/layout/Tab.vue

@@ -3,19 +3,35 @@
     <b-tabs v-model="tabIndex" id="custom-tab">
       <template #tabs-start v-if="tabs.length > 8">
         <div class="arrow-left">
-          <span class="icon">
+          <span v-if="hiddenLeft > 0" class="icon">
             <i class="fa-solid fa-circle-chevron-left" @click="back()"></i>
           </span>
+          <span v-else>
+            <span class="icon-disabled">
+              <i class="fa-solid fa-circle-chevron-left"></i>
+            </span>
+          </span>
+          <span v-if="hiddenLeft > 0" class="badge-tabs badge-left">
+            <i class="fa-solid fa-layer-plus"></i>
+          </span>
         </div>
       </template>
+
       <b-tab @click="execute(title(i).title)" v-for="i in tabs" :key="'dyn-tab-' + i" :title="title(i).title">
         <slot :name="i"></slot>
       </b-tab>
+
       <template #tabs-end v-if="tabs.length > 8">
         <div class="arrow-right">
-          <span class="icon">
+          <span v-if="hiddenRight > 0" class="icon">
             <i class="fa-solid fa-circle-chevron-right" @click="prev()"></i>
           </span>
+          <span v-else class="icon-disabled">
+            <i class="fa-solid fa-circle-chevron-right"></i>
+          </span>
+          <span v-if="hiddenRight > 0" class="badge-tabs badge-right">
+            <i class="fa-solid fa-layer-plus"></i>
+          </span>
         </div>
       </template>
     </b-tabs>
@@ -23,8 +39,7 @@
 </template>
 
 <script>
-
-import {  mapMutations } from "vuex";
+import { mapMutations } from "vuex";
 
 export default {
   props: {
@@ -34,6 +49,9 @@ export default {
   data() {
     return {
       tabIndex: 0,
+      hiddenLeft: 0,
+      hiddenRight: 0,
+      _resizeObs: null,
     };
   },
   created() {
@@ -41,60 +59,124 @@ export default {
   },
   computed: {
     tabs() {
-      let tabs = [];
-      this.initialTabs.forEach((item) => {
-        tabs.push(item.index);
-      });
+      const tabs = [];
+      this.initialTabs.forEach((item) => tabs.push(item.index));
       return tabs;
     },
   },
   mounted() {
-    var container = document.getElementById("custom-tab__BV_tab_controls_");
+    const container = document.getElementById("custom-tab__BV_tab_controls_");
+    if (!container) return;
+
     container.classList.remove("nav");
     if (this.tabs.length > 8) container.classList.add("nav-custom");
     if (this.tabs.length <= 8) container.classList.add("nav-default");
+
+    // Atualiza contadores ao rolar e ao redimensionar
+    container.addEventListener("scroll", this.updateHiddenTabs, { passive: true });
+    window.addEventListener("resize", this.updateHiddenTabs);
+
+    // Observa mudanças de tamanho do container para recalcular
+    this._resizeObs = new ResizeObserver(() => this.updateHiddenTabs());
+    this._resizeObs.observe(container);
+
+    // Inicial
+    this.$nextTick(this.updateHiddenTabs);
+  },
+  beforeDestroy() {
+    const container = document.getElementById("custom-tab__BV_tab_controls_");
+    if (container) container.removeEventListener("scroll", this.updateHiddenTabs);
+    window.removeEventListener("resize", this.updateHiddenTabs);
+    if (this._resizeObs) this._resizeObs.disconnect();
   },
   methods: {
     ...mapMutations("generic", ["addEvent"]),
+
     execute(title) {
-      if (title == "Auditoria") {
+      if (title === "Auditoria") {
         this.addEvent({ name: "auditLogGetAll" });
       }
     },
+
     title(index) {
-      var ret = this.initialTabs.find((x) => x.index == index);
-      return ret;
+      return this.initialTabs.find((x) => x.index == index);
     },
+
+    // 👉 Scroll para a direita (próximas tabs)
     prev() {
-      var container = document.getElementById("custom-tab__BV_tab_controls_");
-      this.sideScroll(container, "right", 25, 100, 10);
+      const container = document.getElementById("custom-tab__BV_tab_controls_");
+      if (!container) return;
+      const chunk = this._calcScrollChunk(container); // ~90% da largura visível
+      this._smoothScrollBy(container, chunk);
+      // updateHiddenTabs será disparado pelo evento 'scroll'
     },
+
+    // 👉 Scroll para a esquerda (tabs anteriores)
     back() {
-      var container = document.getElementById("custom-tab__BV_tab_controls_");
-      this.sideScroll(container, "left", 25, 100, 10);
+      const container = document.getElementById("custom-tab__BV_tab_controls_");
+      if (!container) return;
+      const chunk = this._calcScrollChunk(container);
+      this._smoothScrollBy(container, -chunk);
     },
-    sideScroll(element, direction, speed, distance, step) {
-      let scrollAmount = 0;
-      var slideTimer = setInterval(function () {
-        if (direction == "left") {
-          element.scrollLeft -= step;
-        } else {
-          element.scrollLeft += step;
-        }
-        scrollAmount += step;
-        if (scrollAmount >= distance) {
-          window.clearInterval(slideTimer);
-        }
-      }, speed);
+
+    // ===== CÁLCULO DO "SALTO" IDEAL =====
+    _calcScrollChunk(container) {
+      // Rola ~90% da área visível; no mínimo 240px
+      return Math.max(Math.floor(container.clientWidth * 0.9), 240);
+    },
+
+    // ===== SMOOTH SCROLL COM FALLBACK =====
+    _smoothScrollBy(el, dx) {
+      // preferir nativo (quando disponível)
+      try {
+        el.scrollBy({ left: dx, behavior: "smooth" });
+        return;
+      } catch (_) {
+        // fallback
+      }
+
+      // fallback com requestAnimationFrame
+      const duration = 250; // ms
+      const start = el.scrollLeft;
+      const target = start + dx;
+      const startTime = performance.now();
+
+      const step = (now) => {
+        const t = Math.min(1, (now - startTime) / duration);
+        // ease-out cúbico
+        const eased = 1 - Math.pow(1 - t, 3);
+        el.scrollLeft = start + (target - start) * eased;
+        if (t < 1) requestAnimationFrame(step);
+      };
+      requestAnimationFrame(step);
+    },
+
+    // ===== Indicação de tabs ocultas =====
+    updateHiddenTabs() {
+      const container = document.getElementById("custom-tab__BV_tab_controls_");
+      if (!container) return;
+
+      const totalTabs = this.tabs.length || 1; // evita divisão por zero
+      const avgWidth = container.scrollWidth / totalTabs;
+
+      // Ocultas à esquerda (pixels já rolados / largura média)
+      this.hiddenLeft = Math.max(0, Math.floor(container.scrollLeft / avgWidth));
+
+      // Ocultas à direita
+      const hiddenPx = container.scrollWidth - (container.scrollLeft + container.clientWidth);
+      this.hiddenRight = Math.max(0, Math.floor(hiddenPx / avgWidth));
     },
   },
   watch: {
     tabIndex(tabIndex) {
       this.$emit("input", tabIndex);
+      // após troca, recalcula (caso mude largura ativa, etc.)
+      this.$nextTick(this.updateHiddenTabs);
     },
   },
 };
 </script>
+
 <style>
 .arrow-left {
   position: absolute;
@@ -141,4 +223,37 @@ export default {
 .icon:hover {
   color: #577696;
 }
+
+.icon-disabled {
+  color: #c1c1c7;
+  font-size: 24px;
+  padding-left: 10px;
+  opacity: 0.5;
+}
+
+.badge-tabs {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-left: 8px;
+  padding: 2px 5px;
+  font-size: 15px;
+  line-height: 1;
+  color: #D98621;
+  background: transparent;
+  border-radius: 10px;
+  vertical-align: middle;
+}
+
+.badge-left {
+  position: absolute;
+  margin-left: -60px;
+  margin-top: 13px;
+}
+
+.badge-right {
+  position: absolute;
+  margin-left: 4px;
+  margin-top: 13px;
+}
 </style>