feat: Add click events for VListItem prepend/append icon/avatars

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

@@ -0,0 +1,17 @@
+{
+  "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))",
+    "click:append": "Emitted when appended icon or avatar is clicked.",
+    "click:prepend": "Emitted when prepended icon or avatar is clicked."
+  }
+}

packages/vuetify/src/components/VList/ListAvatar.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 ListAvatarProps<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 useListAvatar<T extends {}, K extends names = Listeners<T>> (props: T & ListAvatarProps<K>) {
+  const { t } = useLocale()
+
+  function ListAvatar ({ 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.list.${localeKey}`, props.title ?? '')
+      : undefined
+
+    return (
+      <VAvatar
+        image={ props[`${name}Avatar`] }
+        aria-label={ label }
+        onClick={ listener }
+        onKeydown={ onKeydown }
+      />
+    )
+  }
+
+  return { ListAvatar }
+}

packages/vuetify/src/components/VList/ListIcon.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 ListIconProps<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 useListIcon<T extends {}, K extends names = Listeners<T>> (props: T & ListIconProps<K>) {
+  const { t } = useLocale()
+
+  function ListIcon ({ 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.list.${localeKey}`, props.title ?? '')
+      : undefined
+
+    return (
+      <VIcon
+        icon={ props[`${name}Icon`] }
+        aria-label={ label }
+        onClick={ listener }
+        onKeydown={ onKeydown }
+      />
+    )
+  }
+
+  return { ListIcon }
+}

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

@@ -2,11 +2,11 @@
 import './VListItem.sass'
 
 // Components
+import { useListAvatar } from './ListAvatar'
+import { useListIcon } from './ListIcon'
 import { VListItemSubtitle } from './VListItemSubtitle'
 import { VListItemTitle } from './VListItemTitle'
-import { VAvatar } from '@/components/VAvatar'
 import { VDefaultsProvider } from '@/components/VDefaultsProvider'
-import { VIcon } from '@/components/VIcon'
 
 // Composables
 import { useList } from './list'
@@ -90,6 +90,9 @@ export const makeVListItemProps = propsFactory({
   onClick: EventProp<[MouseEvent | KeyboardEvent]>(),
   onClickOnce: EventProp<[MouseEvent]>(),
 
+  'onClick:prepend': EventProp<[MouseEvent]>(),
+  'onClick:append': EventProp<[MouseEvent]>(),
+
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -111,6 +114,8 @@ export const VListItem = genericComponent<VListItemSlots>()({
 
   emits: {
     click: (e: MouseEvent | KeyboardEvent) => true,
+    'click:prepend': (e: MouseEvent | KeyboardEvent) => true,
+    'click:append': (e: MouseEvent | KeyboardEvent) => true,
   },
 
   setup (props, { attrs, slots, emit }) {
@@ -172,6 +177,8 @@ export const VListItem = genericComponent<VListItemSlots>()({
     const { dimensionStyles } = useDimension(props)
     const { elevationClasses } = useElevation(props)
     const { roundedClasses } = useRounded(roundedProps)
+    const { ListAvatar } = useListAvatar(props)
+    const { ListIcon } = useListIcon(props)
     const lineClasses = computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined)
 
     const slotProps = computed(() => ({
@@ -272,18 +279,16 @@ export const VListItem = genericComponent<VListItemSlots>()({
               { !slots.prepend ? (
                 <>
                   { props.prependAvatar && (
-                    <VAvatar
+                    <ListAvatar
                       key="prepend-avatar"
-                      density={ props.density }
-                      image={ props.prependAvatar }
+                      name="prepend"
                     />
                   )}
 
                   { props.prependIcon && (
-                    <VIcon
+                    <ListIcon
                       key="prepend-icon"
-                      density={ props.density }
-                      icon={ props.prependIcon }
+                      name="prepend"
                     />
                   )}
                 </>
@@ -334,18 +339,16 @@ export const VListItem = genericComponent<VListItemSlots>()({
               { !slots.append ? (
                 <>
                   { props.appendIcon && (
-                    <VIcon
+                    <ListIcon
                       key="append-icon"
-                      density={ props.density }
-                      icon={ props.appendIcon }
+                      name="append"
                     />
                   )}
 
                   { props.appendAvatar && (
-                    <VAvatar
+                    <ListAvatar
                       key="append-avatar"
-                      density={ props.density }
-                      image={ props.appendAvatar }
+                      name="append"
                     />
                   )}
                 </>

packages/vuetify/src/locale/en.ts

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