chore(Tabs): use preset system

docs/pages/components/[component].vue

@@ -274,6 +274,22 @@ const defaultProps = {
         html: 'Popover content'
       }
     }
+  },
+  Tabs: {
+    links: [{
+      label: 'Usage',
+      to: '/',
+      exact: true
+    }, {
+      label: 'Examples',
+      to: '/examples'
+    }, {
+      label: 'Migration',
+      to: '/migration'
+    }, {
+      label: 'Tabs',
+      to: '/components/Tabs'
+    }]
   }
 }
 

docs/pages/migration.vue

@@ -192,7 +192,10 @@ const components = [
   },
   {
     label: 'Tabs',
-    to: '/components/Tabs'
+    to: '/components/Tabs',
+    nuxt3: true,
+    capi: true,
+    preset: true
   },
   {
     label: 'VerticalNavigation',

src/runtime/components/navigation/Tabs.vue

@@ -1,11 +1,11 @@
 <template>
-  <nav class="flex items-center gap-6">
+  <nav :class="wrapperClass">
     <Link
       v-for="(link, index) of links"
       :key="index"
       :to="link.to"
       :exact="link.exact"
-      class="pt-2 pb-3 text-sm font-medium border-b-2 whitespace-nowrap"
+      :class="baseClass"
       :active-class="activeClass"
       :inactive-class="inactiveClass"
     >
@@ -14,26 +14,30 @@
   </nav>
 </template>
 
-<script>
+<script setup>
 import Link from '../elements/Link'
+import $ui from '#build/ui'
 
-export default {
+defineProps({
-  components: {
+  links: {
-    Link
+    type: Array,
+    required: true
   },
-  props: {
+  wrapperClass: {
-    links: {
+    type: String,
-      type: Array,
+    default: () => $ui.tabs.wrapper
-      required: true
+  },
-    },
+  baseClass: {
-    activeClass: {
+    type: String,
-      type: String,
+    default: () => $ui.tabs.base
-      default: 'u-border-black u-text-black hover:text-black dark:hover:text-white hover:border-black dark:hover:border-white'
+  },
-    },
+  activeClass: {
-    inactiveClass: {
+    type: String,
-      type: String,
+    default: () => $ui.tabs.active
-      default: 'border-transparent u-text-gray-500 hover:u-text-gray-700 hover:u-border-gray-300'
+  },
-    }
+  inactiveClass: {
+    type: String,
+    default: () => $ui.tabs.inactive
   }
-}
+})
 </script>

src/runtime/presets/default.ts

@@ -293,6 +293,13 @@ const dropdown = {
   }
 }
 
+const tabs = {
+  wrapper: 'flex items-center gap-6',
+  base: 'pt-2 pb-3 text-sm font-medium border-b-2 whitespace-nowrap',
+  active: 'u-border-black u-text-black hover:text-black dark:hover:text-white hover:border-black dark:hover:border-white',
+  inactive: 'border-transparent u-text-gray-500 hover:u-text-gray-700 hover:u-border-gray-300'
+}
+
 export default {
   card,
   button,
@@ -308,5 +315,6 @@ export default {
   toggle,
   verticalNavigation,
   alertDialog,
-  dropdown
+  dropdown,
+  tabs
 }