chore(components): use Primitive where possible

src/runtime/components/Badge.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { tv, type VariantProps } 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/badge'
@@ -10,8 +11,7 @@ const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
 
 type BadgeVariants = VariantProps<typeof badge>
 
-export interface BadgeProps {
-  as?: string
+export interface BadgeProps extends Omit<PrimitiveProps, 'asChild'> {
   label?: string
   color?: BadgeVariants['color']
   variant?: BadgeVariants['variant']
@@ -25,14 +25,16 @@ export interface BadgeSlots {
 </script>
 
 <script setup lang="ts">
+import { Primitive } from 'radix-vue'
+
 const props = withDefaults(defineProps<BadgeProps>(), { as: 'span' })
 defineSlots<BadgeSlots>()
 </script>
 
 <template>
-  <component :is="as" :class="badge({ color, variant, size, class: props.class })">
+  <Primitive :as="as" :class="badge({ color, variant, size, class: props.class })">
     <slot>
       {{ label }}
     </slot>
-  </component>
+  </Primitive>
 </template>

src/runtime/components/Card.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 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/card'
@@ -8,8 +9,7 @@ const appConfig = _appConfig as AppConfig & { ui: { card: Partial<typeof theme>
 
 const card = tv({ extend: tv(theme), ...(appConfig.ui?.card || {}) })
 
-export interface CardProps {
-  as?: string
+export interface CardProps extends Omit<PrimitiveProps, 'asChild'> {
   class?: any
   ui?: Partial<typeof card.slots>
 }
@@ -17,6 +17,7 @@ export interface CardProps {
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Primitive } from 'radix-vue'
 
 const props = withDefaults(defineProps<CardProps>(), { as: 'div' })
 
@@ -24,7 +25,7 @@ const ui = computed(() => tv({ extend: card, slots: props.ui })())
 </script>
 
 <template>
-  <component :is="as" :class="ui.root({ class: props.class })">
+  <Primitive :as="as" :class="ui.root({ class: props.class })">
     <div v-if="$slots.header" :class="ui.header()">
       <slot name="header" />
     </div>
@@ -36,5 +37,5 @@ const ui = computed(() => tv({ extend: card, slots: props.ui })())
     <div v-if="$slots.footer" :class="ui.footer()">
       <slot name="footer" />
     </div>
-  </component>
+  </Primitive>
 </template>

src/runtime/components/Container.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 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/container'
@@ -8,18 +9,19 @@ const appConfig = _appConfig as AppConfig & { ui: { container: Partial<typeof th
 
 const container = tv({ extend: tv(theme), ...(appConfig.ui?.container || {}) })
 
-export interface ContainerProps {
-  as?: string
+export interface ContainerProps extends Omit<PrimitiveProps, 'asChild'> {
   class?: any
 }
 </script>
 
 <script setup lang="ts">
+import { Primitive } from 'radix-vue'
+
 const props = withDefaults(defineProps<ContainerProps>(), { as: 'div' })
 </script>
 
 <template>
-  <component :is="as" :class="container({ class: props.class })">
+  <Primitive :as="as" :class="container({ class: props.class })">
     <slot />
-  </component>
+  </Primitive>
 </template>

src/runtime/components/Kbd.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { tv, type VariantProps } 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/kbd'
@@ -10,8 +11,7 @@ const kbd = tv({ extend: tv(theme), ...(appConfig.ui?.kbd || {}) })
 
 type KbdVariants = VariantProps<typeof kbd>
 
-export interface KbdProps {
-  as?: string
+export interface KbdProps extends Omit<PrimitiveProps, 'asChild'> {
   value?: string
   size?: KbdVariants['size']
   class?: any
@@ -23,14 +23,16 @@ export interface KbdSlots {
 </script>
 
 <script setup lang="ts">
+import { Primitive } from 'radix-vue'
+
 const props = withDefaults(defineProps<KbdProps>(), { as: 'kbd' })
 defineSlots<KbdSlots>()
 </script>
 
 <template>
-  <component :is="as" :class="kbd({ size, class: props.class })">
+  <Primitive :as="as" :class="kbd({ size, class: props.class })">
     <slot>
       {{ value }}
     </slot>
-  </component>
+  </Primitive>
 </template>

src/runtime/components/Link.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
 import type { NuxtLinkProps } from '#app'
 
-export interface LinkProps extends NuxtLinkProps {
-  as?: string
+export interface LinkProps extends NuxtLinkProps, Omit<PrimitiveProps, 'asChild'> {
   type?: string
   disabled?: boolean
   active?: boolean
@@ -15,7 +15,7 @@ export interface LinkProps extends NuxtLinkProps {
 
 <script setup lang="ts">
 import { isEqual } from 'ohash'
-import { useForwardProps } from 'radix-vue'
+import { Primitive, useForwardProps } from 'radix-vue'
 import { reactiveOmit } from '@vueuse/core'
 import type { RouteLocation } from '#vue-router'
 
@@ -45,18 +45,17 @@ function resolveLinkClass (route: RouteLocation, currentRoute: RouteLocation, {
 }
 </script>
 
-<!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <component
-    :is="as"
+  <Primitive
     v-if="!to"
+    :as="as"
     :type="type"
     :disabled="disabled"
     v-bind="$attrs"
     :class="active ? activeClass : inactiveClass"
   >
     <slot v-bind="{ isActive: active }" />
-  </component>
+  </Primitive>
   <NuxtLink v-else v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }" v-bind="forward" custom>
     <a
       v-bind="$attrs"

src/runtime/components/Skeleton.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 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/skeleton'
@@ -8,18 +9,19 @@ const appConfig = _appConfig as AppConfig & { ui: { skeleton: Partial<typeof the
 
 const skeleton = tv({ extend: tv(theme), ...(appConfig.ui?.skeleton || {}) })
 
-export interface SkeletonProps {
-  as?: string
+export interface SkeletonProps extends Omit<PrimitiveProps, 'asChild'> {
   class?: any
 }
 </script>
 
 <script setup lang="ts">
+import { Primitive } from 'radix-vue'
+
 const props = withDefaults(defineProps<SkeletonProps>(), { as: 'div' })
 </script>
 
 <template>
-  <component :is="as" :class="skeleton({ class: props.class })">
+  <Primitive :as="as" :class="skeleton({ class: props.class })">
     <slot />
-  </component>
+  </Primitive>
 </template>