refactor(VListItem): implement grid, normalize usage w/ v-card-item (#…

…15452)
vuetifyjs · Jul 27, 2022 · 8334f67 · 8334f67
1 parent 4f6c635
commit 8334f67
Show file tree

Hide file tree

Showing 25 changed files with 429 additions and 390 deletions.
diff --git a/packages/docs/src/examples/v-list/misc-action-and-item-groups.vue b/packages/docs/src/examples/v-list/misc-action-and-item-groups.vue
@@ -3,34 +3,33 @@
     class="mx-auto"
     max-width="400"
   >
-    <v-toolbar
-      color="purple"
-      dark
-    >
-      <v-app-bar-nav-icon variant="text"></v-app-bar-nav-icon>
+    <v-toolbar color="purple">
+      <v-btn icon="mdi-menu"></v-btn>
 
       <v-toolbar-title>Settings</v-toolbar-title>
 
       <v-spacer></v-spacer>
 
-      <v-btn variant="text" icon="mdi-magnify"></v-btn>
+      <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-list-item-header>
-          <v-list-item-title>Content filtering</v-list-item-title>
-          <v-list-item-subtitle>Set the content filtering level to restrict appts that can be downloaded</v-list-item-subtitle>
-        </v-list-item-header>
+        <v-list-item-title>Content filtering</v-list-item-title>
+
+        <v-list-item-subtitle>
+          Set the content filtering level to restrict appts that can be downloaded
+        </v-list-item-subtitle>
       </v-list-item>
 
       <v-list-item>
-        <v-list-item-header>
-          <v-list-item-title>Password</v-list-item-title>
-          <v-list-item-subtitle>Require password for purchase or use password to restrict purchase</v-list-item-subtitle>
-        </v-list-item-header>
+        <v-list-item-title>Password</v-list-item-title>
+
+        <v-list-item-subtitle>
+          Require password for purchase or use password to restrict purchase
+        </v-list-item-subtitle>
       </v-list-item>
     </v-list>
 
@@ -40,53 +39,47 @@
       <v-list-subheader>General</v-list-subheader>
 
       <v-list-item value="notifications">
-        <template v-slot:default="{ isActive }">
-          <v-list-item-avatar start>
-            <v-checkbox :model-value="isActive" hide-details></v-checkbox>
-          </v-list-item-avatar>
-
-          <v-list-item-header>
-            <v-list-item-title>Notifications</v-list-item-title>
-            <v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
-          </v-list-item-header>
+        <template v-slot:prepend="{ isActive }">
+
+          <v-list-item-action start>
+            <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
+          </v-list-item-action>
         </template>
+
+        <v-list-item-title>Notifications</v-list-item-title>
+
+        <v-list-item-subtitle>
+          Notify me about updates to apps or games that I downloaded
+        </v-list-item-subtitle>
       </v-list-item>
 
       <v-list-item value="sound">
-        <template v-slot:default="{ isActive }">
-          <v-list-item-avatar start>
-            <v-checkbox :model-value="isActive" hide-details></v-checkbox>
-          </v-list-item-avatar>
-
-          <v-list-item-header>
-            <v-list-item-title>Sound</v-list-item-title>
-            <v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
-          </v-list-item-header>
+        <template v-slot:prepend="{ isActive }">
+          <v-list-item-action start>
+            <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
+          </v-list-item-action>
         </template>
+
+        <v-list-item-title>Sound</v-list-item-title>
+
+        <v-list-item-subtitle>
+          Auto-update apps at any time. Data charges may apply
+        </v-list-item-subtitle>
       </v-list-item>
 
       <v-list-item value="widgets">
-        <template v-slot:default="{ isActive }">
-          <v-list-item-avatar start>
-            <v-checkbox :model-value="isActive" hide-details></v-checkbox>
-          </v-list-item-avatar>
-
-          <v-list-item-header>
-            <v-list-item-title>Auto-add widgets</v-list-item-title>
-            <v-list-item-subtitle>Automatically add home screen widgets when downloads complete</v-list-item-subtitle>
-          </v-list-item-header>
+        <template v-slot:prepend="{ isActive }">
+          <v-list-item-action start>
+            <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
+          </v-list-item-action>
         </template>
+
+        <v-list-item-title>Auto-add widgets</v-list-item-title>
+
+        <v-list-item-subtitle>
+          Automatically add home screen widgets when downloads complete
+        </v-list-item-subtitle>
       </v-list-item>
     </v-list>
   </v-card>
 </template>
-
-<script>
-  export default {
-    data () {
-      return {
-        settings: [],
-      }
-    },
-  }
-</script>
diff --git a/packages/docs/src/examples/v-list/prop-density.vue b/packages/docs/src/examples/v-list/prop-density.vue
@@ -5,15 +5,17 @@
   >
     <v-list density="compact">
       <v-list-subheader>REPORTS</v-list-subheader>
+
       <v-list-item
         v-for="(item, i) in items"
         :key="i"
         :value="item"
         active-color="primary"
       >
-        <v-list-item-avatar start>
+        <template v-slot:prepend>
           <v-icon :icon="item.icon"></v-icon>
-        </v-list-item-avatar>
+        </template>
+
         <v-list-item-title v-text="item.text"></v-list-item-title>
       </v-list-item>
     </v-list>

diff --git a/packages/docs/src/examples/v-list/prop-disabled.vue b/packages/docs/src/examples/v-list/prop-disabled.vue
@@ -5,13 +5,15 @@
   >
     <v-list disabled>
       <v-list-subheader>REPORTS</v-list-subheader>
+
       <v-list-item
         v-for="(item, i) in items"
         :key="i"
       >
-        <v-list-item-avatar start>
+        <template v-slot:prepend>
           <v-icon :icon="item.icon"></v-icon>
-        </v-list-item-avatar>
+        </template>
+
         <v-list-item-title v-text="item.text"></v-list-item-title>
       </v-list-item>
     </v-list>

diff --git a/packages/docs/src/examples/v-list/prop-nav.vue b/packages/docs/src/examples/v-list/prop-nav.vue
@@ -2,44 +2,50 @@
   <v-card
     class="mx-auto"
     width="256"
-    tile
   >
     <v-layout>
+      <v-system-bar></v-system-bar>
+
       <v-navigation-drawer permanent absolute>
-        <v-system-bar></v-system-bar>
         <v-list>
           <v-list-item
             prepend-avatar="https://cdn.vuetifyjs.com/images/john.png"
             title="John Leider"
             subtitle="john@vuetifyjs.com"
           >
             <template v-slot:append>
-              <v-list-item-avatar end>
-                <v-btn size="small" variant="text" icon="mdi-menu-down"></v-btn>
-              </v-list-item-avatar>
+              <v-btn
+                size="small"
+                variant="text"
+                icon="mdi-menu-down"
+              ></v-btn>
             </template>
           </v-list-item>
         </v-list>
+
         <v-divider></v-divider>
+
         <v-list
+          :lines="false"
+          density="compact"
           nav
-          dense
         >
           <v-list-item
             v-for="(item, i) in items"
             :key="i"
             :value="item"
             active-color="primary"
           >
-            <v-list-item-avatar>
+            <template v-slot:prepend>
               <v-icon :icon="item.icon"></v-icon>
-            </v-list-item-avatar>
+            </template>
 
             <v-list-item-title v-text="item.text"></v-list-item-title>
           </v-list-item>
         </v-list>
       </v-navigation-drawer>
-      <v-main style="height: 450px"></v-main>
+
+      <v-main style="height: 354px;"></v-main>
     </v-layout>
   </v-card>
 </template>

diff --git a/packages/docs/src/examples/v-list/prop-rounded.vue b/packages/docs/src/examples/v-list/prop-rounded.vue
@@ -1,20 +1,22 @@
 <template>
   <v-card
-    class="mx-auto"
+    class="mx-auto pa-2"
     max-width="300"
   >
     <v-list>
       <v-list-subheader>REPORTS</v-list-subheader>
+
       <v-list-item
         v-for="(item, i) in items"
         :key="i"
         :value="item"
         active-color="primary"
         rounded="xl"
       >
-        <v-list-item-avatar start>
+        <template v-slot:prepend>
           <v-icon :icon="item.icon"></v-icon>
-        </v-list-item-avatar>
+        </template>
+
         <v-list-item-title v-text="item.text"></v-list-item-title>
       </v-list-item>
     </v-list>
@@ -24,7 +26,6 @@
 <script>
   export default {
     data: () => ({
-      selectedItem: 1,
       items: [
         { text: 'Real-Time', icon: 'mdi-clock' },
         { text: 'Audience', icon: 'mdi-account' },

diff --git a/packages/docs/src/examples/v-list/prop-shaped.vue b/packages/docs/src/examples/v-list/prop-shaped.vue
@@ -1,20 +1,22 @@
 <template>
   <v-card
-    class="mx-auto"
+    class="mx-auto pa-2"
     max-width="300"
   >
-    <v-list shaped>
+    <v-list>
       <v-list-subheader>REPORTS</v-list-subheader>
+
       <v-list-item
         v-for="(item, i) in items"
         :key="i"
         :value="item"
         active-color="primary"
         rounded="shaped"
       >
-        <v-list-item-avatar start>
+        <template v-slot:prepend>
           <v-icon :icon="item.icon"></v-icon>
-        </v-list-item-avatar>
+        </template>
+
         <v-list-item-title v-text="item.text"></v-list-item-title>
       </v-list-item>
     </v-list>

diff --git a/packages/docs/src/examples/v-list/prop-sub-group.vue b/packages/docs/src/examples/v-list/prop-sub-group.vue
@@ -6,28 +6,38 @@
     <v-list v-model:opened="open">
       <v-list-item prepend-icon="mdi-home" title="Home"></v-list-item>
 
-      <v-list-group>
+      <v-list-group value="Users">
         <template v-slot:activator="{ props }">
-          <v-list-item v-bind="props" prepend-icon="mdi-account-circle" title="Users" value="Users"></v-list-item>
+          <v-list-item
+            v-bind="props"
+            prepend-icon="mdi-account-circle"
+            title="Users"
+          ></v-list-item>
         </template>
 
-        <v-list-group>
+        <v-list-group value="Admin">
           <template v-slot:activator="{ props }">
-            <v-list-item v-bind="props" title="Admin" value="Admin"></v-list-item>
+            <v-list-item
+              v-bind="props"
+              title="Admin"
+            ></v-list-item>
           </template>
 
           <v-list-item
             v-for="([title, icon], i) in admins"
             :key="i"
-            :value="title"
             :title="title"
             :prepend-icon="icon"
+            :value="title"
           ></v-list-item>
         </v-list-group>
 
-        <v-list-group>
+        <v-list-group value="Actions">
           <template v-slot:activator="{ props }">
-            <v-list-item v-bind="props" title="Actions" value="Users"></v-list-item>
+            <v-list-item
+              v-bind="props"
+              title="Actions"
+            ></v-list-item>
           </template>
 
           <v-list-item

diff --git a/packages/docs/src/examples/v-list/prop-three-line.vue b/packages/docs/src/examples/v-list/prop-three-line.vue
@@ -1,13 +1,10 @@
 <template>
   <v-card
-    max-width="450"
     class="mx-auto"
+    max-width="450"
   >
-    <v-toolbar
-      color="cyan"
-      dark
-    >
-      <v-app-bar-nav-icon variant="text"></v-app-bar-nav-icon>
+    <v-toolbar color="cyan-lighten-1">
+      <v-btn variant="text" icon="mdi-menu"></v-btn>
 
       <v-toolbar-title>Inbox</v-toolbar-title>
 
@@ -16,7 +13,11 @@
       <v-btn variant="text" icon="mdi-magnify"></v-btn>
     </v-toolbar>
 
-    <v-list lines="three" :items="items" item-props>
+    <v-list
+      :items="items"
+      item-props
+      lines="three"
+    >
       <template v-slot:subtitle="{ subtitle }">
         <div v-html="subtitle"></div>
       </template>