refactor(Badge): Convert to Primitive

src/runtime/components/elements/Badge.vue

@@ -3,43 +3,33 @@
 import appConfig from '#build/app.config';
 
 import { useUI } from '#ui/composables/useUI';
-import type { BadgeColor, BadgeSize, Strategy } from '#ui/types';
+import type { BadgeProps, Strategy } from '#ui/types';
 import { badge } from '#ui/ui.config';
 import { mergeConfig } from '#ui/utils';
+import { Primitive } from 'radix-vue';
 import { twJoin, twMerge } from 'tailwind-merge';
-import { computed, defineOptions, toRef, type PropType } from 'vue';
+import { computed, toRef, withDefaults } from 'vue';
 
 const config = mergeConfig<typeof badge>(appConfig.ui?.badge?.strategy, appConfig.ui?.badge, badge);
 type UiConfig = Partial<typeof config> & { strategy?: Strategy };
 
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  dot: Boolean,
-  interactive: Boolean,
-  size: String as PropType<BadgeSize>,
-  color: String as PropType<BadgeColor>,
-  label: { type: [String, Number], default: null },
-  class: {
-    type: [String, Object, Array] as PropType<any>,
-    default: undefined,
-  },
-  ui: {
-    type: Object as PropType<UiConfig>,
-    default: () => ({}) as UiConfig,
-  },
+const props = withDefaults(defineProps<BadgeProps<UiConfig>>(), {
+  as: 'span',
+  class: undefined,
+  ui: () => ({}) as UiConfig,
 });
 
-const { ui, attrs } = useUI('badge', toRef(props, 'ui'), config);
+const { ui } = useUI('badge', toRef(props, 'ui'), config);
 
 // With config defaults
 const size = computed(() => props.size ?? ui.value.default.size);
 const color = computed(() => props.color ?? ui.value.default.color);
 </script>
 
 <template>
-  <span
-    v-bind="attrs"
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
     :data-interactive="interactive ? '' : undefined"
     :class="twMerge(twJoin(ui.base, ui.font, ui.size[size], ui.color[color]), props.class)"
   >
@@ -50,5 +40,5 @@ const color = computed(() => props.color ?? ui.value.default.color);
     <slot>
       {{ label }}
     </slot>
-  </span>
+  </Primitive>
 </template>

src/runtime/types/badge.d.ts

@@ -1,14 +1,18 @@
 import type { AppConfig } from 'nuxt/schema';
 import { badge } from '../ui.config';
 import type { ExtractDeepKey } from './utils';
+import type { PrimitiveProps } from 'radix-vue';
 
 export type BadgeSize = keyof typeof badge.size | ExtractDeepKey<AppConfig, ['ui', 'badge', 'size']>;
 
 export type BadgeColor = keyof typeof badge.color | ExtractDeepKey<AppConfig, ['ui', 'badge', 'color']>;
 
-export interface Badge {
+export interface BadgeProps<T = any> extends PrimitiveProps {
   dot?: boolean;
+  interactive?: boolean;
   label?: string;
   size?: BadgeSize;
   color?: BadgeColor;
+  class?: any;
+  ui?: T;
 }