feat: tabs component

.eslintrc-auto-import.json

@@ -317,6 +317,12 @@
     "DEFAULT_POPPER_OPTIONS": true,
     "formatCurrency": true,
     "formatNumber": true,
-    "formatInteger": true
+    "formatInteger": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "useLink": true,
+    "useRoute": true,
+    "useRouter": true,
+    "WritableComputedRef": true
   }
 }

example/cypress/e2e/tabs.cy.ts

@@ -0,0 +1,37 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('Tabs', () => {
+  beforeEach(() => {
+    cy.visit('/tabs');
+  });
+
+  it('check for rendered tabs', () => {
+    cy.contains('h2[data-cy=tabs]', 'Tabs');
+
+    cy.get('[data-cy=wrapper-0]').as('wrapper');
+
+    cy.get('@wrapper')
+      .find('[data-cy=tabs]')
+      .find('[role=tablist]')
+      .as('tablist');
+
+    cy.get('@tablist').children().should('have.length', 6);
+    cy.get('@tablist')
+      .find('button:first-child')
+      .should('have.class', 'active-tab');
+    cy.get('@tablist').find('button:nth-child(2)').should('be.disabled');
+
+    cy.get('@wrapper').find('[data-cy=tab-items]').as('tabcontent');
+
+    cy.get('@tabcontent').should('have.text', 'Tab 1 Content');
+
+    // Click third tab
+    cy.get('@tablist').find('button:nth-child(3)').click();
+    cy.get('@tabcontent').should('have.text', 'Tab 3 Content');
+
+    // Click last tab should redirect to stepper page
+    cy.get('@tablist').find('a:last-child').click();
+
+    cy.url().should('contain', '/steppers');
+  });
+});

example/src/App.vue

@@ -22,6 +22,7 @@ const navigation = ref([
       { to: { name: 'tooltips' }, title: 'Tooltips' },
       { to: { name: 'data-tables' }, title: 'Data Tables' },
       { to: { name: 'cards' }, title: 'Cards' },
+      { to: { name: 'tabs' }, title: 'Tabs' },
     ],
   },
 ]);

example/src/main.ts

@@ -6,8 +6,12 @@ import { PiniaVuePlugin, createPinia, setActivePinia } from 'pinia';
 import {
   RiAddFill,
   RiAlertLine,
+  RiArrowDownSLine,
   RiArrowLeftLine,
+  RiArrowLeftSLine,
   RiArrowRightLine,
+  RiArrowRightSLine,
+  RiArrowUpSLine,
   RiCheckboxCircleLine,
   RiCloseFill,
   RiErrorWarningLine,
@@ -35,6 +39,10 @@ Vue.use(RuiPlugin, {
     RiCloseFill,
     RiInformationLine,
     RiErrorWarningLine,
+    RiArrowLeftSLine,
+    RiArrowRightSLine,
+    RiArrowUpSLine,
+    RiArrowDownSLine,
   ],
 });
 

example/src/router/index.ts

@@ -90,6 +90,11 @@ const router = new VueRouter({
       name: 'cards',
       component: () => import('@/views/CardView.vue'),
     },
+    {
+      path: '/tabs',
+      name: 'tabs',
+      component: () => import('@/views/TabView.vue'),
+    },
   ],
 });
 

example/src/views/TabView.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import {
+  RuiCard,
+  RuiIcon,
+  RuiTab,
+  RuiTabItem,
+  RuiTabItems,
+  RuiTabs,
+} from '@rotki/ui-library-compat';
+import { ref } from 'vue';
+import { type DataType } from '@/types';
+
+type TabsData = DataType<typeof RuiTabs, string>;
+
+const tabs = ref<TabsData[]>([
+  {
+    color: 'primary',
+  },
+  {
+    color: 'secondary',
+  },
+  {
+    color: 'error',
+  },
+  {
+    color: 'warning',
+  },
+  {
+    color: 'info',
+  },
+  {
+    color: 'success',
+  },
+  {
+    color: 'primary',
+    vertical: true,
+  },
+  {
+    color: 'secondary',
+    vertical: true,
+  },
+  {
+    color: 'error',
+    vertical: true,
+  },
+  {
+    color: 'warning',
+    vertical: true,
+  },
+  {
+    color: 'info',
+    vertical: true,
+  },
+  {
+    color: 'success',
+    vertical: true,
+  },
+]);
+</script>
+
+<template>
+  <div>
+    <h2 class="text-h4 mb-6" data-cy="tabs">Tabs</h2>
+    <div
+      v-for="(data, i) in tabs"
+      :key="i"
+      class="flex mb-6 gap-x-6"
+      :class="data.vertical ? 'flex-row' : 'flex-col'"
+      :data-cy="`wrapper-${i}`"
+    >
+      <RuiTabs v-bind="data" v-model="data.modelValue" data-cy="tabs">
+        <RuiTab>
+          <template #prepend>
+            <RuiIcon name="add-fill" />
+          </template>
+          Tab 1
+        </RuiTab>
+        <RuiTab disabled>Tab 2</RuiTab>
+        <RuiTab>Tab 3</RuiTab>
+        <RuiTab>Tab 4</RuiTab>
+        <RuiTab>Tab 5</RuiTab>
+        <RuiTab link to="/steppers">Stepper View</RuiTab>
+      </RuiTabs>
+      <RuiTabItems v-model="data.modelValue" data-cy="tab-items">
+        <RuiTabItem>
+          <RuiCard>Tab 1 Content</RuiCard>
+        </RuiTabItem>
+        <RuiTabItem>
+          <RuiCard>Tab 2 Content</RuiCard>
+        </RuiTabItem>
+        <RuiTabItem>
+          <RuiCard>Tab 3 Content</RuiCard>
+        </RuiTabItem>
+        <RuiTabItem>
+          <RuiCard>Tab 4 Content</RuiCard>
+        </RuiTabItem>
+        <RuiTabItem>
+          <RuiCard>
+            Tab 5 Long Long Long Long Long Long Long Long Long Long Long Long
+            Long Long Long Long Long Long Long Long Long Long Long Long Long
+            Long Long Long Long Long Long Long Long Content
+          </RuiCard>
+        </RuiTabItem>
+      </RuiTabItems>
+    </div>
+  </div>
+</template>

package.json

@@ -92,6 +92,9 @@
     "@vueuse/shared": ">10.0.0",
     "vue": ">=2.7.14 <3"
   },
+  "optionalDependencies": {
+    "vue-router": ">=3.6.5"
+  },
   "devDependencies": {
     "@babel/core": "7.22.9",
     "@babel/types": "7.22.5",
@@ -145,6 +148,7 @@
     "vitest": "0.34.1",
     "vue": "2.7.14",
     "vue-loader": "17.2.2",
+    "vue-router": "3.6.5",
     "vue-template-compiler": "2.7.14",
     "vue-tsc": "1.8.8"
   },