@eturnity/eturnity_reusable_components 8.7.5-EPDM-12618.3 → 8.7.5-EPIC-8593

package/src/components/tabsHeader/index.vue

@@ -4,80 +4,94 @@
       <TabItem
         v-for="item in tabsData"
         :key="item.id"
+        :full-size="fullSize"
         :is-active="activeTab === item.id"
         @click="onTabClick({ id: item.id })"
       >
-        {{ item.text }}
+        <div>{{ item.text }}</div>
+        <RCIcon v-if="item.hasError" name="warning" size="14px" />
       </TabItem>
     </TabsContainer>
   </PageContainer>
 </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,
+  //   hasError: true // optional
+  // },
+  // {
+  //   text: 'Tab 1',
+  //   id: 1,
+  //   hasError: false // optional
+  // }
+  //  ]"
+  // />
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
 
-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) =>
-      props.isActive
-        ? props.theme.colors.brightBlue
-        : props.theme.colors.grey4};
-  flex-grow: 1;
-`
+    border-bottom: 1px solid ${(props) => props.theme.colors.purple7};
+  `
 
-export default {
-  name: 'RCTabsHeader',
-  components: {
-    PageContainer,
-    TabsContainer,
-    TabItem
-  },
-  props: {
-    tabsData: {
-      required: true,
-      type: Array
+  const TabAttrs = { isActive: Boolean, fullSize: Boolean }
+  const TabItem = styled('div', TabAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 25px;
+    font-size: 14px;
+    font-weight: 400;
+    color: ${(props) =>
+      props.isActive ? props.theme.colors.purple6 : props.theme.colors.black};
+    border-bottom: ${(props) =>
+      props.isActive ? '1px solid' + props.theme.colors.purple6 : 'unset'};
+    flex-grow: ${(props) => (props.fullSize ? 1 : 0)};
+  `
+
+  export default {
+    name: 'RCTabsHeader',
+    components: {
+      PageContainer,
+      TabsContainer,
+      TabItem,
+      RCIcon,
+    },
+    props: {
+      tabsData: {
+        required: true,
+        type: Array,
+      },
+      activeTab: {
+        required: true,
+        type: Number,
+      },
+      fullSize: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    emits: ['on-tab-change'],
+    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>