feat(VCardItem): add prepend and append click handlers

packages/api-generator/src/locale/en/VCard.json

@@ -10,6 +10,8 @@
     "image": "The slot used for the card image. This is used with the [image](#props-image) prop."
   },
   "events": {
-    "click": "Emitted when component is clicked - Will trigger component to ripple when clicked unless the `.native` modifier is used."
+    "click": "Emitted when component is clicked - Will trigger component to ripple when clicked unless the `.native` modifier is used.",
+    "click:append": "Emitted when appended icon or avatar is clicked.",
+    "click:prepend": "Emitted when prepended icon or avatar is clicked."
   }
 }

packages/api-generator/src/locale/en/v-list-item.json

@@ -0,0 +1,15 @@
+{
+  "props": {
+    "active": "Controls the **active** state of the item. This is typically used to highlight the component",
+    "color": "Applies specified color to the control when in an **active** state or **input-value** is **true** - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)",
+    "contained": "Changes the component style by changing how color is applied to the background.",
+    "title": "Generates a `v-list-item-title` component with the supplied value",
+    "value": "The value used for selection.",
+    "nav": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-list-item.json))",
+    "lines": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-list-item.json))"
+  },
+  "events": {
+    "click": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-list-item.json))",
+    "clickOnce": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-list-item.json))"
+  }
+}

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

@@ -0,0 +1,58 @@
+// Components
+import { VAvatar } from '@/components/VAvatar'
+
+// Composables
+import { useLocale } from '@/composables/locale'
+
+// Utilities
+import { callEvent } from '@/util'
+
+// Types
+import type { EventProp } from '@/util'
+
+type names = 'prepend' | 'append'
+
+type CardAvatarProps<T extends names> = {
+  title: string | number | undefined
+} & {
+  [K in `${T}Avatar`]: string | undefined
+} & {
+  [K in `onClick:${T}`]: EventProp | undefined
+}
+
+type Listeners<T extends {}, U = keyof T> = U extends `onClick:${infer V extends names}` ? V : never
+
+export function useCardAvatar<T extends {}, K extends names = Listeners<T>> (props: T & CardAvatarProps<K>) {
+  const { t } = useLocale()
+
+  function CardAvatar ({ name }: { name: Extract<names, K> }) {
+    const localeKey = {
+      prepend: 'prependAction',
+      append: 'appendAction',
+    }[name]
+    const listener = props[`onClick:${name}`] as EventProp | undefined
+
+    function onKeydown (e: KeyboardEvent) {
+      if (e.key !== 'Enter' && e.key !== ' ') return
+
+      e.preventDefault()
+      e.stopPropagation()
+      callEvent(listener, new PointerEvent('click', e))
+    }
+
+    const label = listener && localeKey
+      ? t(`$vuetify.card.${localeKey}`, props.title ?? '')
+      : undefined
+
+    return (
+      <VAvatar
+        image={ props[`${name}Avatar`] }
+        aria-label={ label }
+        onClick={ listener }
+        onKeydown={ onKeydown }
+      />
+    )
+  }
+
+  return { CardAvatar }
+}

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

@@ -0,0 +1,59 @@
+// Components
+import { VIcon } from '@/components/VIcon'
+
+// Composables
+import { useLocale } from '@/composables/locale'
+
+// Utilities
+import { callEvent } from '@/util'
+
+// Types
+import type { IconValue } from '@/composables/icons'
+import type { EventProp } from '@/util'
+
+type names = 'prepend' | 'append'
+
+type CardIconProps<T extends names> = {
+  title: string | number | undefined
+} & {
+  [K in `${T}Icon`]: IconValue | undefined
+} & {
+  [K in `onClick:${T}`]: EventProp | undefined
+}
+
+type Listeners<T extends {}, U = keyof T> = U extends `onClick:${infer V extends names}` ? V : never
+
+export function useCardIcon<T extends {}, K extends names = Listeners<T>> (props: T & CardIconProps<K>) {
+  const { t } = useLocale()
+
+  function CardIcon ({ name }: { name: Extract<names, K> }) {
+    const localeKey = {
+      prepend: 'prependAction',
+      append: 'appendAction',
+    }[name]
+    const listener = props[`onClick:${name}`] as EventProp | undefined
+
+    function onKeydown (e: KeyboardEvent) {
+      if (e.key !== 'Enter' && e.key !== ' ') return
+
+      e.preventDefault()
+      e.stopPropagation()
+      callEvent(listener, new PointerEvent('click', e))
+    }
+
+    const label = listener && localeKey
+      ? t(`$vuetify.card.${localeKey}`, props.title ?? '')
+      : undefined
+
+    return (
+      <VIcon
+        icon={ props[`${name}Icon`] }
+        aria-label={ label }
+        onClick={ listener }
+        onKeydown={ onKeydown }
+      />
+    )
+  }
+
+  return { CardIcon }
+}

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

@@ -1,17 +1,17 @@
 // Components
+import { useCardAvatar } from './CardAvatar'
+import { useCardIcon } from './CardIcon'
 import { VCardSubtitle } from './VCardSubtitle'
 import { VCardTitle } from './VCardTitle'
-import { VAvatar } from '@/components/VAvatar'
 import { VDefaultsProvider } from '@/components/VDefaultsProvider'
-import { VIcon } from '@/components/VIcon'
 
 // Composables
 import { makeComponentProps } from '@/composables/component'
 import { makeDensityProps } from '@/composables/density'
 import { IconValue } from '@/composables/icons'
 
 // Utilities
-import { genericComponent, propsFactory, useRender } from '@/util'
+import { EventProp, genericComponent, propsFactory, useRender } from '@/util'
 
 export type VCardItemSlots = {
   default: never
@@ -29,6 +29,9 @@ export const makeCardItemProps = propsFactory({
   subtitle: [String, Number],
   title: [String, Number],
 
+  'onClick:append': EventProp<[MouseEvent]>(),
+  'onClick:prepend': EventProp<[MouseEvent]>(),
+
   ...makeComponentProps(),
   ...makeDensityProps(),
 }, 'VCardItem')
@@ -46,6 +49,8 @@ export const VCardItem = genericComponent<VCardItemSlots>()({
       const hasAppend = !!(hasAppendMedia || slots.append)
       const hasTitle = !!(props.title != null || slots.title)
       const hasSubtitle = !!(props.subtitle != null || slots.subtitle)
+      const { CardAvatar } = useCardAvatar(props)
+      const { CardIcon } = useCardIcon(props)
 
       return (
         <div
@@ -60,18 +65,16 @@ export const VCardItem = genericComponent<VCardItemSlots>()({
               { !slots.prepend ? (
                 <>
                   { props.prependAvatar && (
-                    <VAvatar
+                    <CardAvatar
                       key="prepend-avatar"
-                      density={ props.density }
-                      image={ props.prependAvatar }
+                      name="prepend"
                     />
                   )}
 
                   { props.prependIcon && (
-                    <VIcon
+                    <CardIcon
                       key="prepend-icon"
-                      density={ props.density }
-                      icon={ props.prependIcon }
+                      name="prepend"
                     />
                   )}
                 </>
@@ -116,18 +119,16 @@ export const VCardItem = genericComponent<VCardItemSlots>()({
               { !slots.append ? (
                 <>
                   { props.appendIcon && (
-                    <VIcon
+                    <CardIcon
                       key="append-icon"
-                      density={ props.density }
-                      icon={ props.appendIcon }
+                      name="append"
                     />
                   )}
 
                   { props.appendAvatar && (
-                    <VAvatar
+                    <CardAvatar
                       key="append-avatar"
-                      density={ props.density }
-                      image={ props.appendAvatar }
+                      name="append"
                     />
                   )}
                 </>

packages/vuetify/src/components/VList/VListItem.tsx

@@ -111,6 +111,8 @@
 
   emits: {
     click: (e: MouseEvent | KeyboardEvent) => true,
+    'click:prepend': (e: MouseEvent | KeyboardEvent) => true,
+    'click:append': (e: MouseEvent | KeyboardEvent) => true,
   },
 
   setup (props, { attrs, slots, emit }) {
@@ -201,6 +203,16 @@
       }
     }
 
+    function onPrependClick (e: MouseEvent) {
+      e.stopImmediatePropagation()
+      emit('click:prepend', e)
+    }
+
+    function onAppendClick (e: MouseEvent) {
+      e.stopImmediatePropagation()
+      emit('click:append', e)
+    }
+
     function onKeyDown (e: KeyboardEvent) {
       if (['INPUT', 'TEXTAREA'].includes((e.target as Element)?.tagName)) return
       if (e.key === 'Enter' || e.key === ' ') {
@@ -268,7 +280,7 @@
           { genOverlays(isClickable.value || isActive.value, 'v-list-item') }
 
           { hasPrepend && (
-            <div key="prepend" class="v-list-item__prepend">
+            <div key="prepend" class="v-list-item__prepend" onClick={ prependClick }>
               { !slots.prepend ? (
                 <>
                   { props.prependAvatar && (
@@ -330,7 +342,7 @@
           </div>
 
           { hasAppend && (
-            <div key="append" class="v-list-item__append">
+            <div key="append" class="v-list-item__append" onClick={ appendClick }>
               { !slots.append ? (
                 <>
                   { props.appendIcon && (

packages/vuetify/src/locale/en.ts

@@ -104,4 +104,8 @@ export default {
     loadMore: 'Load more',
     empty: 'No more',
   },
+  card: {
+    prependAction: '{0} prepended action',
+    appendAction: '{0} appended action',
+  },
 }