feat(VCard): allow semantic HTML tags for content parts (#21943)

Co-authored-by: Edgar Frias <[email protected]>

Author: edfrias

packages/vuetify/src/components/VCard/VCardActions.tsx

@@ -1,14 +1,20 @@
 // Composables
 import { makeComponentProps } from '@/composables/component'
 import { provideDefaults } from '@/composables/defaults'
+import { makeTagProps } from '@/composables/tag'
 
 // Utilities
-import { genericComponent, useRender } from '@/util'
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+export const makeVCardActionsProps = propsFactory({
+  ...makeComponentProps(),
+  ...makeTagProps(),
+}, 'VCardActions')
 
 export const VCardActions = genericComponent()({
   name: 'VCardActions',
 
-  props: makeComponentProps(),
+  props: makeVCardActionsProps(),
 
   setup (props, { slots }) {
     provideDefaults({
@@ -19,15 +25,14 @@ export const VCardActions = genericComponent()({
     })
 
     useRender(() => (
-      <div
+      <props.tag
         class={[
           'v-card-actions',
           props.class,
         ]}
         style={ props.style }
-      >
-        { slots.default?.() }
-      </div>
+        v-slots={ slots }
+      />
     ))
 
     return {}

packages/vuetify/src/components/VCard/VCardItem.tsx

@@ -9,6 +9,7 @@ import { VIcon } from '@/components/VIcon'
 import { makeComponentProps } from '@/composables/component'
 import { makeDensityProps } from '@/composables/density'
 import { IconValue } from '@/composables/icons'
+import { makeTagProps } from '@/composables/tag'
 
 // Utilities
 import { toDisplayString } from 'vue'
@@ -38,6 +39,7 @@ export const makeCardItemProps = propsFactory({
 
   ...makeComponentProps(),
   ...makeDensityProps(),
+  ...makeTagProps(),
 }, 'VCardItem')
 
 export const VCardItem = genericComponent<VCardItemSlots>()({
@@ -55,7 +57,7 @@ export const VCardItem = genericComponent<VCardItemSlots>()({
       const hasSubtitle = !!(props.subtitle != null || slots.subtitle)
 
       return (
-        <div
+        <props.tag
           class={[
             'v-card-item',
             props.class,
@@ -157,7 +159,7 @@ export const VCardItem = genericComponent<VCardItemSlots>()({
               )}
            </div>
           )}
-        </div>
+        </props.tag>
       )
     })