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>