chore(Pills): refactor component

docs/pages/components/[component].vue

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

docs/pages/migration.vue

@@ -186,10 +186,6 @@ const components = [
     preset: true,
     capi: true
   },
-  {
-    label: 'Pills',
-    to: '/components/Pills'
-  },
   {
     label: 'Tabs',
     to: '/components/Tabs',
@@ -197,6 +193,13 @@ const components = [
     capi: true,
     preset: true
   },
+  {
+    label: 'Pills',
+    to: '/components/Pills',
+    nuxt3: true,
+    capi: true,
+    preset: true
+  },
   {
     label: 'VerticalNavigation',
     to: '/components/VerticalNavigation',

src/runtime/components/navigation/Pills.vue

@@ -1,64 +1,43 @@
 <template>
-  <nav class="flex items-center space-x-1.5">
-    <div v-for="(link, index) of links" :key="index">
-      <Button
-        :size="size"
-        :to="link.to"
-        :label="link.label"
-        :icon="link.icon"
-        :variant="isActive(link) ? activeVariant : variant"
-        :custom-class="isActive(link) ? activeClass : ''"
-        @click="click(link)"
-      />
-    </div>
+  <nav :class="wrapperClass">
+    <Link
+      v-for="(link, index) of links"
+      :key="index"
+      :to="link.to"
+      :exact="link.exact"
+      :class="baseClass"
+      :active-class="activeClass"
+      :inactive-class="inactiveClass"
+    >
+      {{ link.label }}
+    </Link>
   </nav>
 </template>
 
-<script>
-import Button from '../elements/Button'
+<script setup>
+import Link from '../elements/Link'
+import $ui from '#build/ui'
 
-export default {
-  components: {
-    Button
+defineProps({
+  links: {
+    type: Array,
+    required: true
   },
-  props: {
-    links: {
-      type: Array,
-      required: true
-    },
-    size: {
-      type: String,
-      default: 'md'
-    },
-    variant: {
-      type: String,
-      default: 'gray-hover'
-    },
-    activeVariant: {
-      type: String,
-      default: 'gray'
-    },
-    activeClass: {
-      type: String,
-      default: 'u-text-gray-700 hover:u-text-gray-700 focus:u-text-gray-700'
-    }
+  wrapperClass: {
+    type: String,
+    default: () => $ui.pills.wrapper
   },
-  computed: {
-    options () {
-      return this.links.map(link => ({ value: link.to, text: link.label }))
-    }
+  baseClass: {
+    type: String,
+    default: () => $ui.pills.base
   },
-  methods: {
-    click (link) {
-      this.$emit('input', link)
-    },
-    isActive (link) {
-      if (link.exact === false) {
-        return !!this.$route.path.startsWith(link.to)
-      } else {
-        return this.$route.path === link.to
-      }
-    }
+  activeClass: {
+    type: String,
+    default: () => $ui.pills.active
+  },
+  inactiveClass: {
+    type: String,
+    default: () => $ui.pills.inactive
   }
-}
+})
 </script>

src/runtime/presets/default.ts

@@ -294,12 +294,19 @@ 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',
+  wrapper: 'flex items-center gap-8',
+  base: 'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm',
+  active: 'border-primary-500 text-primary-600',
   inactive: 'border-transparent u-text-gray-500 hover:u-text-gray-700 hover:u-border-gray-300'
 }
 
+const pills = {
+  wrapper: 'flex items-center gap-4',
+  base: 'px-3 py-2 font-medium text-sm rounded-md',
+  active: 'u-bg-gray-100 u-text-gray-700',
+  inactive: 'u-text-gray-500 hover:u-text-gray-700'
+}
+
 export default {
   card,
   button,
@@ -316,5 +323,6 @@ export default {
   verticalNavigation,
   alertDialog,
   dropdown,
-  tabs
+  tabs,
+  pills
 }