feat(Link): style with app config

src/runtime/components/Button.vue

@@ -60,7 +60,7 @@ const ui = computed(() => tv({ extend: button, slots: props.ui })({
 </script>
 
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: props.class })" v-bind="linkProps">
+  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: props.class })" v-bind="linkProps" raw>
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon()" aria-hidden="true" />
     </slot>

src/runtime/components/Link.vue

@@ -1,8 +1,16 @@
 <script lang="ts">
 import type { ButtonHTMLAttributes } from 'vue'
+import { tv } from 'tailwind-variants'
 import type { PrimitiveProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/link'
 import type { NuxtLinkProps } from '#app'
 
+const appConfig = _appConfig as AppConfig & { ui: { link: Partial<typeof theme> } }
+
+const link = tv({ extend: tv(theme), ...(appConfig.ui?.link || {}) })
+
 export interface LinkProps extends NuxtLinkProps, Omit<PrimitiveProps, 'asChild'> {
   type?: ButtonHTMLAttributes['type']
   disabled?: boolean
@@ -12,10 +20,13 @@ export interface LinkProps extends NuxtLinkProps, Omit<PrimitiveProps, 'asChild'
   exactHash?: boolean
   inactiveClass?: string
   custom?: boolean
+  raw?: boolean
+  class?: any
 }
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { isEqual } from 'ohash'
 import { useForwardProps } from 'radix-vue'
 import { reactiveOmit } from '@vueuse/core'
@@ -23,14 +34,26 @@ import { useRoute } from '#imports'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<LinkProps>(), { as: 'button', type: 'button', active: undefined })
+const props = withDefaults(defineProps<LinkProps>(), {
+  as: 'button',
+  type: 'button',
+  active: undefined,
+  activeClass: '',
+  inactiveClass: ''
+})
 
 const route = useRoute()
 const nuxtLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass'))
 
-function resolveLinkClass (slotProps: any) {
-  return isLinkActive(slotProps) ? props.activeClass : props.inactiveClass
-}
+const ui = computed(() => tv({
+  extend: link,
+  variants: {
+    active: {
+      true: props.activeClass,
+      false: props.inactiveClass
+    }
+  }
+}))
 
 function isLinkActive (slotProps: any) {
   if (props.active !== undefined) {
@@ -54,6 +77,16 @@ function isLinkActive (slotProps: any) {
 
   return false
 }
+
+function resolveLinkClass (slotProps: any) {
+  const active = isLinkActive(slotProps)
+
+  if (props.raw) {
+    return [props.class, active ? props.activeClass : props.inactiveClass]
+  }
+
+  return ui.value({ class: props.class, active, disabled: props.disabled })
+}
 </script>
 
 <template>

src/templates.ts

@@ -12,10 +12,6 @@ export default function createTemplates (options: ModuleOptions, nuxt: Nuxt) {
     getContents: () => `@import "tailwindcss";
 
       @layer base {
-        a:focus-visible {
-          outline-color: var(--color-primary-500);
-        }
-
         :root {
           color-scheme: light dark;
         }

src/theme/index.ts

@@ -11,6 +11,7 @@ export { default as formField } from './formField'
 export { default as icons } from './icons'
 export { default as input } from './input'
 export { default as kbd } from './kbd'
+export { default as link } from './link'
 export { default as modal } from './modal'
 export { default as navigationMenu } from './navigationMenu'
 export { default as popover } from './popover'

src/theme/link.ts

@@ -0,0 +1,12 @@
+export default {
+  base: 'focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400',
+  variants: {
+    active: {
+      true: 'text-primary-500 dark:text-primary-400',
+      false: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+    },
+    disabled: {
+      true: 'cursor-not-allowed opacity-75'
+    }
+  }
+}