@nixweb/nixloc-ui 1.19.0 → 1.21.0

package/src/component/layout/Tab.vue

@@ -1,259 +1,259 @@
-<template>
-  <div>
-    <b-tabs v-model="tabIndex" id="custom-tab">
-      <template #tabs-start v-if="tabs.length > 8">
-        <div class="arrow-left">
-          <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 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>
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  props: {
-    initialTabs: Array,
-    value: Number,
-  },
-  data() {
-    return {
-      tabIndex: 0,
-      hiddenLeft: 0,
-      hiddenRight: 0,
-      _resizeObs: null,
-    };
-  },
-  created() {
-    this.tabIndex = this.value;
-  },
-  computed: {
-    tabs() {
-      const tabs = [];
-      this.initialTabs.forEach((item) => tabs.push(item.index));
-      return tabs;
-    },
-  },
-  mounted() {
-    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") {
-        this.addEvent({ name: "auditLogGetAll" });
-      }
-    },
-
-    title(index) {
-      return this.initialTabs.find((x) => x.index == index);
-    },
-
-    // 👉 Scroll para a direita (próximas tabs)
-    prev() {
-      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() {
-      const container = document.getElementById("custom-tab__BV_tab_controls_");
-      if (!container) return;
-      const chunk = this._calcScrollChunk(container);
-      this._smoothScrollBy(container, -chunk);
-    },
-
-    // ===== 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;
-  margin-top: 40px;
-  left: 50%;
-}
-
-.arrow-right {
-  position: absolute;
-  margin-top: 40px;
-  left: 53%;
-}
-
-.nav-default {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-}
-
-.nav-custom {
-  display: flex;
-  flex-wrap: nowrap !important;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-  overflow: auto;
-  overflow-y: hidden;
-}
-
-.nav-custom::-webkit-scrollbar {
-  width: 10px;
-  height: 0px;
-}
-
-.icon {
-  color: #c1c1c7;
-  font-size: 24px;
-  padding-left: 10px;
-  cursor: pointer;
-}
-
-.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>
+<template>
+  <div>
+    <b-tabs v-model="tabIndex" id="custom-tab">
+      <template #tabs-start v-if="tabs.length > 8">
+        <div class="arrow-left">
+          <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 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>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  props: {
+    initialTabs: Array,
+    value: Number,
+  },
+  data() {
+    return {
+      tabIndex: 0,
+      hiddenLeft: 0,
+      hiddenRight: 0,
+      _resizeObs: null,
+    };
+  },
+  created() {
+    this.tabIndex = this.value;
+  },
+  computed: {
+    tabs() {
+      const tabs = [];
+      this.initialTabs.forEach((item) => tabs.push(item.index));
+      return tabs;
+    },
+  },
+  mounted() {
+    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") {
+        this.addEvent({ name: "auditLogGetAll" });
+      }
+    },
+
+    title(index) {
+      return this.initialTabs.find((x) => x.index == index);
+    },
+
+    // 👉 Scroll para a direita (próximas tabs)
+    prev() {
+      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() {
+      const container = document.getElementById("custom-tab__BV_tab_controls_");
+      if (!container) return;
+      const chunk = this._calcScrollChunk(container);
+      this._smoothScrollBy(container, -chunk);
+    },
+
+    // ===== 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;
+  margin-top: 40px;
+  left: 50%;
+}
+
+.arrow-right {
+  position: absolute;
+  margin-top: 40px;
+  left: 53%;
+}
+
+.nav-default {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-custom {
+  display: flex;
+  flex-wrap: nowrap !important;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  overflow: auto;
+  overflow-y: hidden;
+}
+
+.nav-custom::-webkit-scrollbar {
+  width: 10px;
+  height: 0px;
+}
+
+.icon {
+  color: #c1c1c7;
+  font-size: 24px;
+  padding-left: 10px;
+  cursor: pointer;
+}
+
+.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>