From c1ddedf67a908bc3c5e54d6fec13610b5bb8705d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 10 Jul 2024 19:07:06 +0200
Subject: [PATCH] docs(link): update

---
 docs/content/3.components/link.md | 76 +++++++++++++++++++++++++------
 docs/nuxt.config.ts               |  3 +-
 src/runtime/components/Link.vue   |  6 +++
 3 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/docs/content/3.components/link.md b/docs/content/3.components/link.md
index 3b02dada..8121dce4 100644
--- a/docs/content/3.components/link.md
+++ b/docs/content/3.components/link.md
@@ -17,32 +17,73 @@ The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/
 
 The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
 
-::component-card
+::note
+It is used by the [Breadcrumb](/components/breadcrumb), [Button](/components/button), [ContextMenu](/components/context-menu), [DropdownMenu](/components/dropdown-menu) and [NavigationMenu](/components/navigation-menu) components.
+::
+
+### Tag
+
+The `Link` components renders an `<a>` tag when a `to` prop is provided, otherwise it renders a `<button>` tag. You can use the `as` prop to change fallback tag.
+
+::component-code
+---
+props:
+  to: ''
+  as: 'button'
+slots:
+  default: Link
+---
+::
+
+::tip
+You can inspect the rendered HTML by changing the `to` prop.
+::
+
+### Style
+
+By default, the link has default active and inactive styles, check out the [#theme](#theme) section.
+
+::component-code
 ---
 props:
   to: /components/link
-  activeClass: 'text-primary'
-  inactiveClass: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
-code: ' Link '
+slots:
+  default: Link
+---
+::
+
+::tip
+Try changing the `to` prop to see the active and inactive states.
+::
+
+You can override this behavior by using the `raw` prop and provide your own styles using `class`, `active-class` and `inactive-class`.
+
+::component-code
+---
+ignore:
+  - raw
+props:
+  raw: true
+  to: /components/link
+  active-class: 'font-bold'
+  inactive-class: 'text-gray-500 dark:text-gray-500'
+slots:
+  default: Link
 ---
 
 Link
 ::
 
-It also renders an `<a>` tag when a `to` prop is provided, otherwise it defaults to rendering a `<button>` tag. The default behavior can be customized using the `as` prop.
-
-It is used underneath by the [Button](/components/button), [Dropdown](/components/dropdown) and [VerticalNavigation](/components/vertical-navigation) components.
-
 ## IntelliSense
 
 If you're using VSCode and wish to get autocompletion for the classes `active-class` and `inactive-class`, you can add the following settings to your `.vscode/settings.json`:
 
 ```json [.vscode/settings.json]
 {
-    "tailwindCSS.classAttributes": [
-      "active-class",
-      "inactive-class"
-  ],
+  "tailwindCSS.classAttributes": [
+    "active-class",
+    "inactive-class"
+  ]
 }
 ```
 
@@ -50,8 +91,17 @@ If you're using VSCode and wish to get autocompletion for the classes `active-cl
 
 ### Props
 
-:component-props
+::component-props
+---
+ignore:
+  - custom
+---
+::
 
 ### Slots
 
 :component-slots
+
+## Theme
+
+:component-theme
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 168b3e3b..dbed5d0f 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -120,7 +120,8 @@ export default defineNuxtConfig({
       const globals = components.filter(c => [
         'UBadge',
         'UButton',
-        'UKbd'
+        'UKbd',
+        'ULink'
       ].includes(c.pascalName))
 
       globals.forEach(c => c.global = 'sync')
diff --git a/src/runtime/components/Link.vue b/src/runtime/components/Link.vue
index 6fe5246e..808f89ad 100644
--- a/src/runtime/components/Link.vue
+++ b/src/runtime/components/Link.vue
@@ -22,12 +22,18 @@ export interface LinkProps extends NuxtLinkProps {
    */
   type?: ButtonHTMLAttributes['type']
   disabled?: boolean
+  /** Force the link to be active independent of the current route. */
   active?: boolean
+  /** Will only be active if the current route is an exact match. */
   exact?: boolean
+  /** Will only be active if the current route query is an exact match. */
   exactQuery?: boolean
+  /** Will only be active if the current route hash is an exact match. */
   exactHash?: boolean
+  /** The class to apply when the link is inactive. */
   inactiveClass?: string
   custom?: boolean
+  /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
   raw?: boolean
   class?: any
 }