chore: restore example for advanced VList action use

vuetifyjs · Oct 29, 2024 · 096b25e · 096b25e
1 parent 868b0ab
commit 096b25e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 124 deletions.
diff --git a/packages/docs/src/examples/v-list/misc-action-stack.vue b/packages/docs/src/examples/v-list/misc-action-stack.vue
@@ -1,73 +1,33 @@
 <template>
-  <v-card
-    class="mx-auto"
-    max-width="500"
-  >
-    <v-toolbar
-      color="pink"
-      dark
-    >
-      <v-app-bar-nav-icon></v-app-bar-nav-icon>
-
+  <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>
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
-
-      <v-btn icon>
-        <v-icon>mdi-checkbox-marked-circle</v-icon>
-      </v-btn>
+      <v-btn icon="mdi-magnify"></v-btn>
+      <v-btn icon="mdi-checkbox-marked-circle"></v-btn>
     </v-toolbar>
 
-    <v-list lines="two">
-      <v-list-item-group
-        v-model="selected"
-        active-class="pink--text"
-        multiple
+    <v-list v-model:selected="selected" select-strategy="leaf">
+      <v-list-item
+        v-for="item in items"
+        :key="item.id"
+        :value="item.id"
+        active-class="text-pink"
+        class="py-3"
       >
-        <template v-for="(item, index) in items" :key="item.title">
-          <v-list-item>
-            <template v-slot:default="{ active }">
-              <v-list-item-header>
-                <v-list-item-title v-text="item.title"></v-list-item-title>
-
-                <v-list-item-subtitle
-                  class="text--primary"
-                  v-text="item.headline"
-                ></v-list-item-subtitle>
-
-                <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
-              </v-list-item-header>
-
-              <v-list-item-action>
-                <v-list-item-action-text v-text="item.action"></v-list-item-action-text>
-
-                <v-icon
-                  v-if="!active"
-                  color="grey-lighten-1"
-                >
-                  mdi-star-outline
-                </v-icon>
-
-                <v-icon
-                  v-else
-                  color="yellow-darken-3"
-                >
-                  mdi-star
-                </v-icon>
-              </v-list-item-action>
-            </template>
-          </v-list-item>
-
-          <v-divider
-            v-if="index < items.length - 1"
-            :key="index"
-          ></v-divider>
+        <v-list-item-title>{{ item.title }}</v-list-item-title>
+        <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">{{ item.subtitle }}</v-list-item-subtitle>
+        <template v-slot:append="{ isSelected }">
+          <v-list-item-action class="flex-column align-end">
+            <small class="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-group>
+      </v-list-item>
     </v-list>
   </v-card>
 </template>
@@ -76,36 +36,11 @@
   import { ref } from 'vue'
 
   const items = [
-    {
-      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',
-    },
-    {
-      action: '2 hr',
-      headline: 'Summer BBQ',
-      subtitle: `Wish I could come, but I'm out of town this weekend.`,
-      title: 'me, Scrott, Jennifer',
-    },
-    {
-      action: '6 hr',
-      headline: 'Oui oui',
-      subtitle: 'Do you have Paris recommendations? Have you ever been?',
-      title: 'Sandra Adams',
-    },
-    {
-      action: '12 hr',
-      headline: 'Birthday gift',
-      subtitle: 'Have any ideas about what we should get Heidi for her birthday?',
-      title: 'Trevor Hansen',
-    },
-    {
-      action: '18hr',
-      headline: 'Recipe to try',
-      subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
-      title: 'Britta Holt',
-    },
+    { 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])
@@ -114,39 +49,14 @@
 <script>
   export default {
     data: () => ({
-      selected: [2],
       items: [
-        {
-          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',
-        },
-        {
-          action: '2 hr',
-          headline: 'Summer BBQ',
-          subtitle: `Wish I could come, but I'm out of town this weekend.`,
-          title: 'me, Scrott, Jennifer',
-        },
-        {
-          action: '6 hr',
-          headline: 'Oui oui',
-          subtitle: 'Do you have Paris recommendations? Have you ever been?',
-          title: 'Sandra Adams',
-        },
-        {
-          action: '12 hr',
-          headline: 'Birthday gift',
-          subtitle: 'Have any ideas about what we should get Heidi for her birthday?',
-          title: 'Trevor Hansen',
-        },
-        {
-          action: '18hr',
-          headline: 'Recipe to try',
-          subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
-          title: 'Britta Holt',
-        },
+        { 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' },
       ],
+      selected: [2],
     }),
   }
 </script>
diff --git a/packages/docs/src/pages/en/components/lists.md b/packages/docs/src/pages/en/components/lists.md
@@ -133,3 +133,9 @@ Lists can contain subheaders, dividers, and can contain 1 or more lines. The sub
 A **three-line** list with actions. Utilizing **selection-strategy**, easily connect actions to your tiles.
 
 <ExamplesExample file="v-list/misc-actions" />
+
+#### Action with text
+
+A list can contain additional meta information within an action.
+
+<ExamplesExample file="v-list/misc-action-stack" />