fix: bug on tabber mobile border

fix devhatt#28

src/components/Tabber/index.js

@@ -1,23 +1,20 @@
 import { Component } from 'pet-dex-utilities';
 import './index.scss';
 
-const events = ['tabChange', 'click'];
+const events = ['change', 'click'];
 
 const html = `
 <div class="tabber-container" data-select="tabber-container">
   <div class="tabber-tab" data-select="tabber-tabs"></div>
   <div class="tabber-content" data-select="tabber-content"></div>
 </div>
 `;
-
+// todo, emitir eventos ao desativar >> talvez manter registro da aba q estava ativa antes
 export default function Tabber({ tabs }) {
   Component.call(this, { html, events });
 
-  const container = this.selected.get('tabber-container');
-  const tabsContainer = container.querySelector('[data-select="tabber-tabs"]');
-  const contentContainer = container.querySelector(
-    '[data-select="tabber-content"]',
-  );
+  const tabsContainer = this.selected.get('tabber-tabs');
+  const contentContainer = this.selected.get('tabber-content');
 
   tabs.forEach((tab, index) => {
     const tabButton = document.createElement('button');
@@ -44,15 +41,15 @@ export default function Tabber({ tabs }) {
   };
 
   const deactivateTabs = () => {
-    tabButtons.forEach((tab) => tab.classList.remove('active'));
+    tabButtons.forEach((tab) => tab.classList.remove('tabber-button--active'));
   };
 
   const activateContent = (index) => {
     tabContents[index].classList.remove('hide');
   };
 
   const activateTab = (tab) => {
-    tab.classList.add('active');
+    tab.classList.add('tabber-button--active');
   };
 
   tabButtons.forEach((tabButton) => tabButton.addEventListener('click', () => {
@@ -63,7 +60,7 @@ export default function Tabber({ tabs }) {
     activateTab(tabButton);
     activateContent(index);
 
-    this.emit('tabChange', tabs[index].value);
+    this.emit('change', tabs[index].value);
   }));
 
   this.listen('mount', () => {
@@ -73,3 +70,6 @@ export default function Tabber({ tabs }) {
 }
 
 Tabber.prototype = Object.assign(Tabber.prototype, Component.prototype);
+// get current tab
+// set tab >> passando index
+// add- remove tab

src/components/Tabber/index.scss

@@ -2,7 +2,7 @@
 @use '~styles/colors.scss' as colors;
 @use '~styles/breakpoints.scss' as breakpoints;
 
-$borderHeight: 3px;
+$borderHeight: 0.3rem;
 
 .tabber-container {
   width: 100%;
@@ -26,7 +26,7 @@ $borderHeight: 3px;
     height: $borderHeight;
 
     position: absolute;
-    bottom: -$borderHeight;
+    bottom: 0;
 
     background: colors.$gray200;
 
@@ -50,7 +50,7 @@ $borderHeight: 3px;
 }
 
 .tabber-button {
-  min-height: 4rem;
+  min-height: 4.5rem;
 
   flex-grow: 1;
 
@@ -66,38 +66,38 @@ $borderHeight: 3px;
   position: relative;
 
   background-color: colors.$appContentColor;
-}
 
-.active {
-  color: colors.$blue500;
-  font-weight: 700;
+  &--active {
+    color: colors.$blue500;
+    font-weight: 700;
 
-  &::after,
-  &::before {
-    height: $borderHeight;
+    &::after,
+    &::before {
+      height: $borderHeight;
 
-    position: absolute;
-    bottom: -$borderHeight;
-    z-index: 2;
+      position: absolute;
+      bottom: 0;
+      z-index: 2;
 
-    background: colors.$blue500;
+      background: colors.$blue500;
 
-    content: '';
-  }
+      content: '';
+    }
 
-  &::after {
-    right: 0;
+    &::after {
+      right: 0;
 
-    left: $borderHeight;
+      left: $borderHeight;
 
-    border-radius: 0 $borderHeight $borderHeight 0;
-  }
+      border-radius: 0 $borderHeight $borderHeight 0;
+    }
 
-  &::before {
-    right: $borderHeight;
-    left: 0;
+    &::before {
+      right: $borderHeight;
+      left: 0;
 
-    border-radius: $borderHeight 0 0 $borderHeight;
+      border-radius: $borderHeight 0 0 $borderHeight;
+    }
   }
 }
 
@@ -121,16 +121,16 @@ $borderHeight: 3px;
     border: 0;
 
     border-radius: 1.6rem;
-  }
 
-  .active {
-    color: colors.$appContentColor;
+    &--active {
+      color: colors.$appContentColor;
 
-    background-color: colors.$blue500;
+      background-color: colors.$blue500;
 
-    &::after,
-    &::before {
-      content: none;
+      &::after,
+      &::before {
+        content: none;
+      }
     }
   }