chore: restore example for advanced VList action use

[J-Sek]

Description

I wanted to start the conversation about missing v-list-item-action-text (not ported from v2).

• is it on anyone's plates?
• is it even necessary?

Example below is almost identical to the Action stack from the old v2 docs.

• I wish it would not require so many margin and text color tweaks
• I had to override line-clamp for subtitle, because it follows lines='...' prop – is it a bug or intended behavior?

Ideal markup (inside v-list-item)

<v-list-item-subtitle class="opacity-100">{{ item.headline }}</v-list-item-subtitle>
<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
<template v-slot:append="{ isSelected }">
  <v-list-item-action class="align-end">
    <small class='opacity-60'>{{ item.action }}</small>
    <v-spacer></v-spacer>
    <v-icon v-if="isSelected" color="yellow-darken-3">mdi-star</v-icon>
    <v-icon v-else class="opacity-30">mdi-star-outline</v-icon>
  </v-list-item-action>
</template>

Markup:

<template>
  <v-card class="mx-auto" max-width="500">
    <v-toolbar color="pink">
      <v-btn icon="mdi-menu"></v-btn>
      <v-toolbar-title>Inbox</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon="mdi-magnify"></v-btn>
      <v-btn icon="mdi-checkbox-marked-circle"></v-btn>
    </v-toolbar>

    <v-list
      v-model:selected="selected"
      lines="two"
      select-strategy="leaf"
    >
      <v-list-item
        v-for="item in items"
        :key="item.id"
        :title="item.title"
        :value="item.id"
        active-class="text-pink"
      >
        <v-list-item-subtitle class="mb-1 text-high-emphasis opacity-100">{{ item.headline }}</v-list-item-subtitle>
        <v-list-item-subtitle class="text-high-emphasis" style="line-clamp: 1">{{ item.subtitle }}</v-list-item-subtitle>
        <template v-slot:append="{ isSelected }">
          <v-list-item-action class="h-100 flex-column align-end">
            <small class='mt-n1 mb-4 text-high-emphasis opacity-60'>{{ item.action }}</small>
            <v-spacer></v-spacer>
            <v-icon v-if="isSelected" color="yellow-darken-3">mdi-star</v-icon>
            <v-icon v-else class="opacity-30">mdi-star-outline</v-icon>
          </v-list-item-action>
        </template>
      </v-list-item>
    </v-list>
  </v-card>
</template>

<script setup>
  import { ref } from 'vue'

  const items = [
    { id: 1, action: '15 min', headline: 'Brunch this weekend?', subtitle: `I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`, title: 'Ali Connors' },
    { id: 2, action: '2 hr', headline: 'Summer BBQ', subtitle: `Wish I could come, but I'm out of town this weekend.`, title: 'me, Scrott, Jennifer' },
    { id: 3, action: '6 hr', headline: 'Oui oui', subtitle: 'Do you have Paris recommendations? Have you ever been?', title: 'Sandra Adams' },
    { id: 4, action: '12 hr', headline: 'Birthday gift', subtitle: 'Have any ideas about what we should get Heidi for her birthday?', title: 'Trevor Hansen' },
    { id: 5, action: '18hr', headline: 'Recipe to try', subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.', title: 'Britta Holt' },
  ]

  const selected = ref([2])
</script>