feat(Link): style with app config

playground/pages/link.vue

@@ -1,24 +1,51 @@
-<script setup lang="ts">
-const activeClass = 'text-primary-500 dark:text-primary-400'
-const inactiveClass = 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-</script>
-
 <template>
   <div class="flex flex-col items-start gap-2 text-sm">
-    <ULink v-slot="{ active }" active :active-class="activeClass" :inactive-class="inactiveClass">
-      Button active ({{ active }})
+    <ULink raw>
+      Button raw
     </ULink>
-    <ULink v-slot="{ active }" disabled :active-class="activeClass" :inactive-class="inactiveClass">
-      Button disabled ({{ active }})
+
+    <ULink active>
+      Button active
     </ULink>
-    <ULink v-slot="{ active }" to="/link" :active-class="activeClass" :inactive-class="inactiveClass">
-      Link ({{ active }})
+    <ULink active class="font-medium" active-class="text-gray-900 dark:text-white">
+      Button active with class
     </ULink>
-    <ULink v-slot="{ active }" to="/link" disabled :active-class="activeClass" :inactive-class="inactiveClass">
-      Link disabled ({{ active }})
+    <ULink active disabled>
+      Button active disabled
     </ULink>
-    <ULink v-slot="{ active }" to="/modal" :active-class="activeClass" :inactive-class="inactiveClass">
-      Modal ({{ active }})
+
+    <ULink>
+      Button inactive
+    </ULink>
+    <ULink class="font-medium" inactive-class="hover:text-primary-500 dark:hover:text-primary-400">
+      Button inactive with class
+    </ULink>
+    <ULink disabled>
+      Button inactive disabled
+    </ULink>
+
+    <ULink to="/link" raw>
+      Link raw
+    </ULink>
+
+    <ULink to="/link">
+      Link active
+    </ULink>
+    <ULink to="/link" class="font-medium" active-class="text-gray-900 dark:text-white">
+      Link active with class
+    </ULink>
+    <ULink to="/link" disabled>
+      Link active disabled
+    </ULink>
+
+    <ULink to="/button">
+      Link inactive
+    </ULink>
+    <ULink to="/button" class="font-medium" inactive-class="hover:text-primary-500 dark:hover:text-primary-400">
+      Link inactive with class
+    </ULink>
+    <ULink to="/button" disabled>
+      Link inactive disabled
     </ULink>
   </div>
 </template>

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'
+    }
+  }
+}

test/components/Link.spec.ts

@@ -8,8 +8,10 @@ describe('Link', () => {
     ['with to', { props: { to: '/' } }],
     ['with type', { props: { type: 'submit' as const } }],
     ['with disabled', { props: { disabled: true } }],
-    ['with activeClass', { props: { active: true, to: '/', activeClass: 'text-sm' } }],
-    ['with inactiveClass', { props: { active: false, to: '/', inactiveClass: 'text-gray-300' } }]
+    ['with raw', { props: { raw: true } }],
+    ['with class', { props: { class: 'font-medium' } }],
+    ['with activeClass', { props: { active: true, activeClass: 'text-gray-900 dark:text-white' } }],
+    ['with inactiveClass', { props: { active: false, inactiveClass: 'hover:text-primary-500 dark:hover:text-primary-400' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props: LinkProps }) => {
     const html = await ComponentRender(nameOrHtml, options, Link)
     expect(html).toMatchSnapshot()

test/components/__snapshots__/Link.spec.ts.snap

@@ -1,13 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Link > renders with activeClass correctly 1`] = `"<a href="/" class="text-sm"></a>"`;
+exports[`Link > renders with activeClass correctly 1`] = `"<button type="button" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-900 dark:text-white"></button>"`;
 
-exports[`Link > renders with as correctly 1`] = `"<div type="button" disabled="false"></div>"`;
+exports[`Link > renders with as correctly 1`] = `"<div type="button" disabled="false" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"></div>"`;
 
-exports[`Link > renders with disabled correctly 1`] = `"<button type="button" disabled=""></button>"`;
+exports[`Link > renders with class correctly 1`] = `"<button type="button" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 font-medium"></button>"`;
 
-exports[`Link > renders with inactiveClass correctly 1`] = `"<a href="/" class="text-gray-300"></a>"`;
+exports[`Link > renders with disabled correctly 1`] = `"<button type="button" disabled="" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-not-allowed opacity-75"></button>"`;
 
-exports[`Link > renders with to correctly 1`] = `"<a href="/"></a>"`;
+exports[`Link > renders with inactiveClass correctly 1`] = `"<button type="button" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400"></button>"`;
 
-exports[`Link > renders with type correctly 1`] = `"<button type="submit"></button>"`;
+exports[`Link > renders with raw correctly 1`] = `"<button type="button" class=""></button>"`;
+
+exports[`Link > renders with to correctly 1`] = `"<a href="/" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"></a>"`;
+
+exports[`Link > renders with type correctly 1`] = `"<button type="submit" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"></button>"`;