chore: update components

docs/app.vue

@@ -65,6 +65,7 @@ const sections = [
   { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'Select', to: '/components/Select' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
   { label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },
   // { label: 'Navigation', links: [{ label: 'Pills', to: '/components/Pills' }, { label: 'Tabs', to: '/components/Tabs' }, { label: 'VerticalNavigation', to: '/components/VerticalNavigation' }] },
+  { label: 'Navigation', links: [{ label: 'VerticalNavigation', to: '/components/VerticalNavigation' }] },
   { label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
 ]
 </script>

docs/pages/components/[component].vue

@@ -141,6 +141,31 @@ const defaultProps = {
       }]
     ]
   },
+  VerticalNavigation: {
+    links: [
+      {
+        label: 'Home',
+        icon: 'heroicons-outline:home',
+        to: '/'
+      },
+      {
+        label: 'Examples',
+        icon: 'heroicons-outline:book-open',
+        to: '/examples'
+      },
+      {
+        label: 'Migration',
+        icon: 'heroicons-outline:refresh',
+        to: '/migration'
+      },
+      {
+        label: 'External link',
+        icon: 'heroicons-outline:external-link',
+        to: 'https://google.fr',
+        target: '_blank'
+      }
+    ]
+  },
   Icon: {
     name: 'heroicons-outline:bell'
   },

docs/pages/migration.vue

@@ -101,7 +101,9 @@ const components = [
   },
   {
     label: 'Link',
-    to: '/components/Link'
+    to: '/components/Link',
+    nuxt3: true,
+    capi: true
   },
   {
     label: 'Toggle',

src/components/elements/Button.vue

@@ -14,13 +14,15 @@
 
 <script>
 import { ref, computed } from 'vue'
+import Link from '../elements/Link'
 import Icon from '../elements/Icon'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
 export default {
   components: {
-    Icon
+    Icon,
+    Link
   },
   props: {
     type: {
@@ -73,10 +75,6 @@ export default {
       type: Boolean,
       default: false
     },
-    href: {
-      type: String,
-      default: null
-    },
     to: {
       type: [String, Object],
       default: null
@@ -118,10 +116,8 @@ export default {
     const button = ref(null)
 
     const buttonIs = computed(() => {
-      if (props.href) {
-        return 'a'
-      } else if (props.to) {
-        return 'NuxtLink'
+      if (props.to) {
+        return 'Link'
       }
 
       return 'button'
@@ -129,8 +125,7 @@ export default {
 
     const buttonProps = computed(() => {
       switch (buttonIs.value) {
-        case 'a': return { href: props.href, target: props.target }
-        case 'NuxtLink': return { to: props.to }
+        case 'Link': return { to: props.to, target: props.target }
         default: return { disabled: props.disabled || props.loading, type: props.type }
       }
     })

src/components/elements/Dropdown.vue

@@ -19,7 +19,7 @@
         <MenuItems :class="itemsClass" static>
           <div v-for="(subItems, index) of items" :key="index" class="py-1">
             <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled }">
-              <Component v-bind="item" :is="(item.to && 'NuxtLink') || (item.href && 'a') || 'button'" :class="resolveItemClass({ active, disabled })" @click="onItemClick(item)">
+              <Component v-bind="item" :is="(item.to && 'Link') || 'button'" :class="resolveItemClass({ active, disabled })" @click="onItemClick(item)">
                 <slot :name="item.slot" :item="item">
                   <Icon v-if="item.icon" :name="item.icon" :class="itemIconClass" />
 
@@ -43,6 +43,7 @@ import {
 } from '@headlessui/vue'
 
 import Icon from '../elements/Icon'
+import Link from '../elements/Link'
 import { classNames, usePopper } from '../../utils'
 
 export default {
@@ -51,7 +52,8 @@ export default {
     MenuButton,
     MenuItems,
     MenuItem,
-    Icon
+    Icon,
+    Link
   },
   props: {
     items: {

src/components/elements/Link.vue

@@ -1,5 +1,13 @@
 <template>
-  <NuxtLink v-slot="{ href, navigate }" v-bind="$props" custom>
+  <a v-if="isExternalLink" v-bind="$attrs" :class="isActive ? activeClass : inactiveClass" :href="to" :target="target">
+    <slot v-bind="{ isActive }" />
+  </a>
+  <router-link
+    v-else
+    v-slot="{ href, navigate }"
+    v-bind="$props"
+    custom
+  >
     <a
       v-bind="$attrs"
       :href="href"
@@ -8,7 +16,7 @@
     >
       <slot v-bind="{ isActive }" />
     </a>
-  </NuxtLink>
+  </router-link>
 </template>
 
 <script>
@@ -28,6 +36,10 @@ export default {
     exact: {
       type: Boolean,
       default: false
+    },
+    target: {
+      type: String,
+      default: null
     }
   },
   setup (props) {
@@ -39,9 +51,13 @@ export default {
         return !!route.path.startsWith(props.to)
       }
     })
+    const isExternalLink = computed(() => {
+      return typeof props.to === 'string' && props.to.startsWith('http')
+    })
 
     return {
-      isActive
+      isActive,
+      isExternalLink
     }
   }
 }

src/components/navigation/VerticalNavigation.vue

@@ -1,11 +1,10 @@
 <template>
   <nav class="space-y-1">
     <Link
-      v-for="link of links"
+      v-for="(link, index) of links"
       v-slot="{ isActive }"
-      :key="link.to || link.label"
-      :to="link.to"
-      :exact="link.exact"
+      :key="index"
+      v-bind="link"
       :class="baseClass"
       :active-class="activeClass"
       :inactive-class="inactiveClass"