@eturnity/eturnity_reusable_components 8.7.4--EPDM-12729.0 → 8.7.4--EPDM-12729.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.4--EPDM-12729.0",
+  "version": "8.7.4--EPDM-12729.1",
   "files": [
     "dist",
     "src"

package/src/components/tabsHeader/index.vue

@@ -14,70 +14,73 @@
 </template>
 
 <script>
-// import RCTabsHeader from "@eturnity/eturnity_reusable_components/src/components/tabsHeader"
-// To use:
-// <RCTabsHeader
-//   :activeTab="activeTabIndex" // should match the 'id'
-// :tabsData="[
-// {
-//   text: 'Tab 1',
-//   id: 0
-// },
-// {
-//   text: 'Tab 1',
-//   id: 1
-// }
-//  ]"
-// />
-import styled from 'vue3-styled-components'
+  // import RCTabsHeader from "@eturnity/eturnity_reusable_components/src/components/tabsHeader"
+  // To use:
+  // <RCTabsHeader
+  //   :activeTab="activeTabIndex" // should match the 'id'
+  // :tabsData="[
+  // {
+  //   text: 'Tab 1',
+  //   id: 0
+  // },
+  // {
+  //   text: 'Tab 1',
+  //   id: 1
+  // }
+  //  ]"
+  // />
+  import styled from 'vue3-styled-components'
 
-const PageContainer = styled.div``
+  const PageContainer = styled.div``
 
-const TabsContainer = styled.div`
-  display: flex;
-  cursor: pointer;
-  width: 100%;
-`
+  const TabsContainer = styled.div`
+    display: flex;
+    cursor: pointer;
+    width: 100%;
+  `
 
-const TabAttrs = { isActive: Boolean }
-const TabItem = styled('div', TabAttrs)`
-  padding: 10px 20px;
-  font-size: 14px;
-  font-weight: 700;
-  background-color: ${(props) =>
-    props.isActive ? props.theme.colors.grey5 : props.theme.colors.white};
-  border-top: 3px solid
-    ${(props) =>
+  const TabAttrs = { isActive: Boolean }
+  const TabItem = styled('div', TabAttrs)`
+    padding: 10px 20px;
+    font-size: 14px;
+    font-weight: 600;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.secondary : props.theme.colors.white};
+    color: ${(props) =>
       props.isActive
         ? props.theme.colors.brightBlue
-        : props.theme.colors.grey4};
-  flex-grow: 1;
-`
+        : props.theme.colors.black};
+    border-bottom: ${(props) =>
+      props.isActive
+        ? '4px solid' + props.theme.colors.brightBlue
+        : '1px solid' + props.theme.colors.grey4};
+    flex-grow: 1;
+  `
 
-export default {
-  name: 'RCTabsHeader',
-  components: {
-    PageContainer,
-    TabsContainer,
-    TabItem
-  },
-  props: {
-    tabsData: {
-      required: true,
-      type: Array
+  export default {
+    name: 'RCTabsHeader',
+    components: {
+      PageContainer,
+      TabsContainer,
+      TabItem,
+    },
+    props: {
+      tabsData: {
+        required: true,
+        type: Array,
+      },
+      activeTab: {
+        required: true,
+        type: Number,
+      },
+    },
+    methods: {
+      onTabClick({ id }) {
+        if (id === this.activeTab) {
+          return
+        }
+        this.$emit('on-tab-change', id)
+      },
     },
-    activeTab: {
-      required: true,
-      type: Number
-    }
-  },
-  methods: {
-    onTabClick({ id }) {
-      if (id === this.activeTab) {
-        return
-      }
-      this.$emit('on-tab-change', id)
-    }
   }
-}
 </script>