docs(VList): streamline examples with selectable actions (#20373)

Co-authored-by: jsek <[email protected]>

packages/docs/src/examples/v-list/misc-actions.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-card class="mx-auto" max-width="400">
+    <v-toolbar color="purple">
+      <v-btn icon="mdi-menu"></v-btn>
+      <v-toolbar-title>Settings</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn icon="mdi-magnify"></v-btn>
+    </v-toolbar>
+
+    <v-list lines="three">
+      <v-list-subheader>User Controls</v-list-subheader>
+      <v-list-item
+        v-for="item in userControls"
+        :key="item.value"
+        :subtitle="item.subtitle"
+        :title="item.title"
+      ></v-list-item>
+    </v-list>
+
+    <v-divider></v-divider>
+
+    <v-list
+      v-model:selected="settingsSelection"
+      lines="three"
+      select-strategy="leaf"
+    >
+      <v-list-subheader>General</v-list-subheader>
+      <v-list-item
+        v-for="item in settingsItems"
+        :key="item.value"
+        :subtitle="item.subtitle"
+        :title="item.title"
+        :value="item.value"
+      >
+        <template v-slot:prepend="{ isSelected }">
+          <v-list-item-action start>
+            <v-checkbox-btn :model-value="isSelected"></v-checkbox-btn>
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script setup>
+  const userControls = [
+    { title: 'Content filtering', subtitle: 'Set the content filtering level to restrict appts that can be downloaded' },
+    { title: 'Password', subtitle: 'Require password for purchase or use password to restrict purchase' },
+  ]
+
+  const settingsItems = [
+    { value: 'notifications', title: 'Notifications', subtitle: 'Notify me about updates to apps or games that I downloaded' },
+    { value: 'sound', title: 'Sound', subtitle: 'Auto-update apps at any time. Data charges may apply' },
+    { value: 'widgets', title: 'Auto-add widgets', subtitle: 'Automatically add home screen widgets when downloads complete' },
+  ]
+
+  const settingsSelection = ref([])
+</script>

packages/docs/src/pages/en/components/lists.md

@@ -130,6 +130,6 @@ Lists can contain subheaders, dividers, and can contain 1 or more lines. The sub
 
 #### Action and item groups
 
-A **three-line** list with actions. Utilizing **v-list-group**, easily connect actions to your tiles.
+A **three-line** list with actions. Utilizing **selection-strategy**, easily connect actions to your tiles.
 
-<ExamplesExample file="v-list/misc-action-and-item-groups" />
+<ExamplesExample file="v-list/misc-actions" />