refactor(elements): unify class prop type to HTMLAttributes['class'] (#66)

Author: broBinChen

packages/elements/src/artifact/ArtifactAction.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
 import type { LucideIcon } from 'lucide-vue-next'
+import type { HTMLAttributes } from 'vue'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@repo/shadcn-vue/components/ui/tooltip'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { computed } from 'vue'
 
 interface ArtifactActionProps {
-  class?: string
+  class?: HTMLAttributes['class']
   tooltip?: string
   label?: string
   variant?: ButtonVariants['variant']

packages/elements/src/artifact/ArtifactClose.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+import type { HTMLAttributes } from 'vue'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { X } from 'lucide-vue-next'
 import { computed } from 'vue'
 
 interface ArtifactCloseProps {
-  class?: string
+  class?: HTMLAttributes['class']
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
 }

packages/elements/src/image/Image.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { Experimental_GeneratedImage } from 'ai'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { computed, useAttrs } from 'vue'
 
 interface Props extends Experimental_GeneratedImage {
-  class?: string
+  class?: HTMLAttributes['class']
   alt?: string
 }
 

packages/elements/src/loader/Loader.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import LoaderIcon from './LoaderIcon.vue'
 
 interface Props {
   size?: number
-  class?: string
+  class?: HTMLAttributes['class']
 }
 
 const props = withDefaults(defineProps<Props>(), {

packages/elements/src/message/MessageAvatar.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/shadcn-vue/components/ui/avatar'
 import { computed, useAttrs } from 'vue'
 
 interface Props {
   src: string
   name?: string
-  class?: string
+  class?: HTMLAttributes['class']
 }
 
 const props = defineProps<Props>()

packages/elements/src/plan/PlanTrigger.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { CollapsibleTrigger } from '@repo/shadcn-vue/components/ui/collapsible'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { ChevronsUpDownIcon } from 'lucide-vue-next'
 
 const props = defineProps<{
-  class?: string
+  class?: HTMLAttributes['class']
 }>()
 </script>
 

packages/elements/src/prompt-input/PromptInputAttachment.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import type { AttachmentFile } from './types'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import {
@@ -13,7 +14,7 @@ import { usePromptInput } from './context'
 
 const props = defineProps<{
   file: AttachmentFile
-  class?: string
+  class?: HTMLAttributes['class']
 }>()
 
 const { removeFile } = usePromptInput()

packages/elements/src/shimmer/Shimmer.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { motion } from 'motion-v'
 import { computed, useSlots } from 'vue'
 
 export interface TextShimmerProps {
   as?: keyof HTMLElementTagNameMap
-  class?: string
+  class?: HTMLAttributes['class']
   duration?: number
   spread?: number
 }