chore: use type-based prop

src/runtime/components/Button.vue

@@ -1,14 +1,18 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 // import appConfig from '#build/app.config'
-import { getLinkProps, type LinkProps } from '#ui/components/Link.vue'
+import type { LinkProps } from '#ui/components/Link.vue'
 import theme from '#ui/theme/button'
 
 const appButton = tv(theme)
 // const appButton = tv({ extend: button, ...(appConfig.ui?.button || {}) })
 
-export interface ButtonProps extends VariantProps<typeof appButton>, LinkProps {
+type ButtonVariants = VariantProps<typeof appButton>
+
+export interface ButtonProps extends LinkProps {
   label?: string
+  color?: ButtonVariants['color']
+  size?: ButtonVariants['size']
   icon?: string
   leading?: boolean
   leadingIcon?: string
@@ -27,86 +31,19 @@ export interface ButtonProps extends VariantProps<typeof appButton>, LinkProps {
 </script>
 
 <script setup lang="ts">
-import { useSlots, computed, type PropType } from 'vue'
+import { useSlots, computed } from 'vue'
+import { useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
 import { linkProps } from './Link.vue'
 import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps({
+const props = defineProps<ButtonProps>()
-  ...linkProps,
-  label: {
-    type: String as PropType<ButtonProps['label']>,
-    default: undefined
-  },
-  color: {
-    type: String as PropType<ButtonProps['color']>,
-    default: undefined
-  },
-  size: {
-    type: String as PropType<ButtonProps['size']>,
-    default: undefined
-  },
-  icon: {
-    type: String as PropType<ButtonProps['icon']>,
-    default: undefined
-  },
-  leading: {
-    type: Boolean as PropType<ButtonProps['leading']>,
-    default: false
-  },
-  leadingIcon: {
-    type: String as PropType<ButtonProps['leadingIcon']>,
-    default: undefined
-  },
-  trailing: {
-    type: Boolean as PropType<ButtonProps['trailing']>,
-    default: false
-  },
-  trailingIcon: {
-    type: String as PropType<ButtonProps['trailingIcon']>,
-    default: undefined
-  },
-  loading: {
-    type: Boolean as PropType<ButtonProps['loading']>,
-    default: false
-  },
-  loadingIcon: {
-    type: String as PropType<ButtonProps['loadingIcon']>,
-    default: undefined
-  },
-  square: {
-    type: Boolean as PropType<ButtonProps['square']>,
-    default: false
-  },
-  block: {
-    type: Boolean as PropType<ButtonProps['block']>,
-    default: false
-  },
-  disabled: {
-    type: Boolean as PropType<ButtonProps['disabled']>,
-    default: false
-  },
-  padded: {
-    type: Boolean as PropType<ButtonProps['padded']>,
-    default: false
-  },
-  truncate: {
-    type: Boolean as PropType<ButtonProps['truncate']>,
-    default: false
-  },
-  class: {
-    type: String as PropType<ButtonProps['class']>,
-    default: undefined
-  },
-  ui: {
-    type: Object as PropType<ButtonProps['ui']>,
-    default: undefined
-  }
-})
 
 const slots = useSlots()
 const appConfig = useAppConfig()
+const forward = useForwardProps(reactivePick(props, Object.keys(linkProps)))
 
 // Computed
 
@@ -142,7 +79,7 @@ const trailingIconName = computed(() => {
 </script>
 
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: $props.class })" v-bind="{ ...getLinkProps($props), ...$attrs }">
+  <ULink :disabled="disabled || loading" :class="ui.base({ class: $props.class })" v-bind="{ ...forward, ...$attrs }">
     <slot name="leading" :disabled="disabled" :loading="loading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.icon()" aria-hidden="true" />
     </slot>

src/runtime/components/Icon.vue

@@ -1,12 +1,13 @@
-<template>
+<script lang="ts">
-  <Icon :name="name" />
+export interface IconProps {
-</template>
+  name: string
+}
+</script>
 
 <script setup lang="ts">
-defineProps({
+defineProps<IconProps>()
-  name: {
-    type: String,
-    required: true
-  }
-})
 </script>
+
+<template>
+  <Icon :name="name" />
+</template>

src/runtime/components/Link.vue

@@ -103,7 +103,7 @@ export const linkProps = {
   },
   disabled: {
     type: Boolean as PropType<LinkProps['disabled']>,
-    default: null
+    default: false
   },
   active: {
     type: Boolean as PropType<LinkProps['active']>,
@@ -125,27 +125,24 @@ export const linkProps = {
     type: String as PropType<LinkProps['inactiveClass']>,
     default: undefined
   }
-}
+} as const
-
-export const getLinkProps = (props: any) => {
-  const keys = Object.keys(linkProps)
-
-  return keys.reduce((acc, key) => {
-    if (props[key] !== undefined) {
-      acc[key] = props[key]
-    }
-    return acc
-  }, {} as Record<string, any>)
-}
 </script>
 
 <script setup lang="ts">
 import { isEqual } from 'ohash'
+import { useForwardProps } from 'radix-vue'
+import { reactiveOmit } from '@vueuse/core'
 import type { RouteLocation } from '#vue-router'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps(linkProps)
+const props = withDefaults(defineProps<LinkProps>(), {
+  as: 'button',
+  type: 'button',
+  inactiveClass: undefined
+})
+
+const forward = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'inactiveClass'))
 
 function resolveLinkClass (route: RouteLocation, currentRoute: RouteLocation, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
   if (props.exactQuery && !isEqual(route.query, currentRoute.query)) {
@@ -179,7 +176,7 @@ function resolveLinkClass (route: RouteLocation, currentRoute: RouteLocation, {
   >
     <slot v-bind="{ isActive: active }" />
   </component>
-  <NuxtLink v-else v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }" v-bind="$props" custom>
+  <NuxtLink v-else v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }" v-bind="forward" custom>
     <a
       v-bind="$attrs"
       :href="!disabled ? href : undefined"