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

[blalan05]

markup

<template>
  <v-app>
    <div class="ma-4">
      <v-list>
        <v-list-item prependIcon="mdi-vuetify" @click:prepend="clickIcon(1)" @click="clickItem(1)" appendAvatar="https://cdn.vuetifyjs.com/images/lists/1.jpg" @click:append="clickAvatar(1)">List Item 1</v-list-item>
        <v-list-item prependIcon="mdi-vuetify" @click:prepend="clickIcon(2)" @click="clickItem(2)" appendAvatar="https://cdn.vuetifyjs.com/images/lists/2.jpg" @click:append="clickAvatar(2)">List Item 2</v-list-item>
        <v-list-item prependIcon="mdi-vuetify" @click:prepend="clickIcon(3)" @click="clickItem(3)" appendAvatar="https://cdn.vuetifyjs.com/images/lists/3.jpg" @click:append="clickAvatar(3)">List Item 3</v-list-item>
      </v-list>
    </div>
  </v-app>
</template>

<script>
  export default {
    data: () => ({}),
    methods: {
      clickAvatar: (msg) => { console.log(`Avatar Clicked: ${msg}`)},
      clickIcon: (msg) => { console.log(`Icon Clicked: ${msg}`)},
      clickItem: (msg) => { console.log(`Item Clicked: ${msg}`)},
    },
  }
</script>

[KaelWD]

I think the idea was that if you want to do anything more than the default you should use the slot instead.

[blalan05]

It does match VTextField, which as these handlers.

[johnleider]

I think this should probably add these events as props similar to our input components:

vuetify/packages/vuetify/src/components/VField/VField.tsx

Line 79 in 97b22d2

'onClick:prependInner': EventProp,

vuetify/packages/vuetify/src/components/VInput/VInput.tsx

Line 50 in 97b22d2

'onClick:prepend': EventProp,

[blalan05]

Updated to use props, and match VInputs use of InputIcon

[johnleider]

Ideally we should abstract this functionality into something reusable to avoid duplication.