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

Author: blalan05

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

@@ -103,6 +103,10 @@ export const VListItem = genericComponent<new () => {
 
   emits: {
     click: (e: MouseEvent | KeyboardEvent) => true,
+    'click:prependIcon': (e: MouseEvent | KeyboardEvent) => true,
+    'click:prependAvatar': (e: MouseEvent | KeyboardEvent) => true,
+    'click:appendIcon': (e: MouseEvent | KeyboardEvent) => true,
+    'click:appendAvatar': (e: MouseEvent | KeyboardEvent) => true,
   },
 
   setup (props, { attrs, slots, emit }) {
@@ -162,6 +166,27 @@ export const VListItem = genericComponent<new () => {
       props.value != null && select(!isSelected.value, e)
     }
 
+    function onPrependAvatarClick (e: MouseEvent) {
+      e.stopImmediatePropagation()
+      emit('click:prependAvatar', e)
+    }
+    
+    function onPrependIconClick (e: MouseEvent) {
+      e.stopImmediatePropagation()
+      emit('click:prependIcon', e)
+    }
+
+    function onAppendAvatarClick (e: MouseEvent) {
+      e.stopImmediatePropagation()
+      emit('click:appendAvatar', e)
+    }
+
+    function onAppendIconClick (e: MouseEvent) {
+      e.stopImmediatePropagation()
+      emit('click:appendIcon', e)
+    }
+
+
     function onKeyDown (e: KeyboardEvent) {
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault()
@@ -231,11 +256,11 @@ export const VListItem = genericComponent<new () => {
             >
               <div class="v-list-item__prepend">
                 { props.prependAvatar && (
-                  <VAvatar key="prepend-avatar" />
+                  <VAvatar key="prepend-avatar" onClick={ onPrependAvatarClick } />
                 ) }
 
                 { props.prependIcon && (
-                  <VIcon key="prepend-icon" />
+                  <VIcon key="prepend-icon" onClick={ onPrependIconClick } />
                 ) }
 
                 { slots.prepend?.(slotProps.value) }
@@ -280,11 +305,11 @@ export const VListItem = genericComponent<new () => {
                 { slots.append?.(slotProps.value) }
 
                 { props.appendIcon && (
-                  <VIcon key="append-icon" />
+                  <VIcon key="append-icon" onClick={ onAppendIconClick } />
                 ) }
 
                 { props.appendAvatar && (
-                  <VAvatar key="append-avatar" />
+                  <VAvatar key="append-avatar" onClick={ onAppendAvatarClick } />
                 ) }
               </div>
             </VDefaultsProvider>