feat(VList): port to v3

packages/docs/src/data/nav-alpha.json

@@ -58,6 +58,7 @@
       "images",
       "item-groups",
       "lazy",
+      "lists",
       "overlays",
       "sheets",
       "theme-providers"

packages/vuetify/src/components/VAvatar/VAvatar.sass

@@ -12,7 +12,7 @@
   vertical-align: $avatar-vertical-align
 
   @include avatar-sizes($avatar-sizes)
-  @include density('v-avatar', ('height', 'width'), $avatar-density)
+  @include avatar-density(('height', 'width'), $avatar-density)
   @include rounded($avatar-border-radius)
 
   > *
@@ -21,3 +21,13 @@
 
   &--rounded
     +rounded($avatar-rounded-border-radius)
+
+// VList
+.v-avatar
+  .v-list-item-avatar &
+    overflow: visible
+    height: inherit
+    width: inherit
+
+    > *
+      width: auto

packages/vuetify/src/components/VAvatar/_mixins.scss

@@ -7,3 +7,20 @@
     }
   }
 }
+
+@mixin avatar-density ($properties, $densities) {
+  @each $density, $multiplier in $densities {
+    $value: calc(var(--v-avatar-height) + #{$multiplier * $spacer});
+
+    &.v-avatar--density-#{$density} {
+      @if type-of($properties) == "list" {
+        @each $property in $properties {
+          #{$property}: $value;
+        }
+      }
+      @else {
+        #{$properties}: $value;
+      }
+    }
+  }
+}

packages/vuetify/src/components/VBtn/VBtn.sass

@@ -25,7 +25,7 @@
 
   @at-root
     +button-sizes()
-    +density('v-btn', 'height', $button-density)
+    +button-density('height', $button-density)
 
   +states('.v-btn__overlay')
 
@@ -35,7 +35,7 @@
     padding: 0
 
     @at-root &
-      +density('v-btn', ('width', 'height'), $button-icon-density)
+      +button-density(('width', 'height'), $button-icon-density)
 
   &--border
     +border($button-border-color, $button-border-style, $button-border-width)
@@ -88,7 +88,7 @@
 
     @at-root
       @include button-sizes($button-stacked-sizes, true)
-      @include density('v-btn', 'height', $button-stacked-density)
+      @include button-density('height', $button-stacked-density)
 
 .v-btn__overlay
   background-color: currentColor

packages/vuetify/src/components/VBtn/_mixins.scss

@@ -18,3 +18,20 @@
     }
   }
 }
+
+@mixin button-density ($properties, $densities) {
+  @each $density, $multiplier in $densities {
+    $value: calc(var(--v-btn-height) + #{$multiplier * $spacer});
+
+    &.v-btn--density-#{$density} {
+      @if type-of($properties) == "list" {
+        @each $property in $properties {
+          #{$property}: $value;
+        }
+      }
+      @else {
+        #{$properties}: $value;
+      }
+    }
+  }
+}

packages/vuetify/src/components/VCard/_variables.scss

@@ -53,7 +53,7 @@ $card-title-header-padding: 0 !default;
 $card-title-hyphens: auto !default;
 $card-title-letter-spacing: map-deep-get($typography, 'h6', 'letter-spacing') !default;
 $card-title-line-height: map-deep-get($typography, 'h6', 'line-height') !default;
-$card-title-overflow-wrap: anywhere !default;
+$card-title-overflow-wrap: normal !default;
 $card-title-padding-top: 1rem !default;
 $card-title-padding: .5rem 1rem !default;
 $card-title-text-transform: none !default;
@@ -74,6 +74,8 @@ $card-title-densities: (
   'compact': $card-title-compact-line-height
 );
 
+$card-subtitle-densities: ('default': 0, 'comfortable': -1, 'compact': -2);
+
 $card-subtitle-densities: () !default;
 $card-subtitle-densities: (
   null: $card-subtitle-line-height,

packages/vuetify/src/components/VList/VList.cy.spec.tsx

@@ -0,0 +1,54 @@
+/// <reference types="../../../types/cypress" />
+
+import { CenteredGrid } from '@/../cypress/templates'
+import { VList, VListItem } from '..'
+
+describe('VList', () => {
+  function mountFunction (content: JSX.Element) {
+    return cy.mount(() => content)
+  }
+
+  it('supports the density property', () => {
+    const densities = ['default', 'comfortable', 'compact'] as const
+    const ListItems = densities.map(density => (
+      <VList density={ density }>
+        <VListItem>
+          density { density }
+        </VListItem>
+      </VList>
+    ))
+    const wrapper = mountFunction((
+      <CenteredGrid width="200px">
+        <h2 class="mt-8">ListItems by Density</h2>
+
+        { ListItems }
+      </CenteredGrid>
+    ))
+
+    wrapper.get('.v-list--density-default').should('exist')
+    wrapper.get('.v-list--density-comfortable').should('exist')
+    wrapper.get('.v-list--density-compact').should('exist')
+  })
+
+  it('supports the lines property', () => {
+    const lines = ['one', 'two', 'three'] as const
+    const ListItems = lines.map(number => (
+      <VList lines={ number }>
+        <VListItem>
+          lines { number }
+        </VListItem>
+      </VList>
+    ))
+    const wrapper = mountFunction((
+      <CenteredGrid width="200px">
+        <h2 class="mt-8">ListItems by Density</h2>
+
+        { ListItems }
+      </CenteredGrid>
+    ))
+
+    wrapper.get('.v-list--one-line').should('exist')
+    wrapper.get('.v-list--two-line').should('exist')
+    wrapper.get('.v-list--three-line').should('exist')
+  })
+})

packages/vuetify/src/components/VList/VList.sass

@@ -1,98 +1,95 @@
-@import './_variables.scss'
-@import './_mixins.sass'
+// Imports
+@import './index'
 
-// Theme
 .v-list
-  &.primary,
-  &.secondary,
-  &.accent,
-  &.success,
-  &.error,
-  &.warning,
-  &.info
-    > .v-list-item
-      color: map-deep-get($material-dark, 'text', 'primary')
-
-+theme(v-list) using ($material)
-  background: map-get($material, 'cards')
-  color: map-deep-get($material, 'text','primary')
-
-  .v-list--disabled
-    color: map-deep-get($material, 'text', 'disabled')
-
-  .v-list-group--active:before,
-  .v-list-group--active:after
-    background: map-get($material, 'dividers')
-
-// Sheet
-+sheet(v-list, $list-elevation, $list-border-radius, $list-shaped-border-radius)
-
-// Block
-.v-list
-  display: block
+  background: $list-background
+  color: $list-color
+  overflow: auto
   padding: $list-padding
-  position: static
-  +elevationTransition()
-
-// Modifier
-.v-list--disabled
+  position: relative
+
+  @include border($list-border...)
+  @include elevation($list-elevation)
+  @include position($list-positions)
+  @include rounded($list-border-radius)
+
+  &--border
+    border-width: $list-border-thin-width
+
+  &--disabled
+    pointer-events: none
+    user-select: none
+
+    > [class*='v-list-']
+      opacity: $list-disabled-opacity
+
+  &--subheader
+    padding-top: $list-subheader-padding-top
+
+.v-list-img
+  border-radius: inherit
+  display: flex
+  height: 100%
+  left: 0
+  overflow: hidden
+  position: absolute
+  top: 0
+  width: 100%
+  z-index: -1
+
+.v-list-subheader
+  $root: &
+
+  align-items: center
+  background: inherit
+  display: flex
+  font-size: $list-subheader-font-size
+  font-weight: $list-subheader-font-weight
+  line-height: $list-subheader-line-height
+  padding-inline-end: $list-subheader-padding-end
+  padding-inline-start: $list-subheader-padding-start
+  min-height: $list-subheader-min-height
+  transition: $list-subheader-transition
+
+  &__text
+    opacity: $list-subheader-text-opacity
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+
+  @at-root
+    @include density('v-list', $list-density) using ($modifier)
+      #{$root}
+        min-height: $list-subheader-min-height + ($modifier * $list-subheader-min-height-multiplier)
+
+  &--inset
+    padding-inline-start: $list-subheader-inset-padding-start
+
+  .v-list--nav &
+    font-size: $list-nav-subheader-font-size
+
+  .v-list--subheader-sticky &
+    background: inherit
+    left: 0
+    position: sticky
+    top: 0
+    z-index: 1
+
+.v-list__overlay
+  background-color: currentColor
+  border-radius: inherit
+  bottom: 0
+  left: 0
+  opacity: 0
   pointer-events: none
+  position: absolute
+  right: 0
+  top: 0
+  transition: opacity 0.2s ease-in-out
 
-.v-list--flat
-  .v-list-item:before
-    display: none
-
-.v-list--dense
-  .v-subheader
-    font-size: $list-dense-subheader-font-size
-    height: $list-dense-subheader-height
-    padding: $list-dense-subheader-padding
-
-.v-list--nav,
-.v-list--rounded
-  .v-list-item:not(:last-child):not(:only-child)
-    margin-bottom: $list-nav-rounded-item-margin-bottom
-
-  &.v-list--dense .v-list-item,
-  .v-list-item--dense
-    &:not(:last-child):not(:only-child)
-      margin-bottom: $list-nav-rounded-dense-item-margin-bottom
-
-.v-list--nav
-  padding-left: $list-nav-padding-left
-  padding-right: $list-nav-padding-right
-
-  .v-list-item
-    padding: $list-nav-item-padding
-
-  .v-list-item,
-  .v-list-item:before
-    border-radius: $list-nav-border-radius
-
-.v-list.v-sheet--shaped
-  +list-shaped($list-item-min-height)
+// VNavigationDrawer
 
-  &.v-list--two-line
-    +list-shaped($list-item-two-line-min-height)
-
-  &.v-list--three-line
-    +list-shaped($list-item-three-line-min-height)
-
-  +ltr()
-    padding-right: $list-shaped-padding
-
-  +rtl()
-    padding-left: $list-shaped-padding
-
-.v-list--rounded
-  padding: 8px
-  +list-rounded($list-item-min-height)
-
-  &.v-list--two-line
-    +list-rounded($list-item-two-line-min-height)
-
-  &.v-list--three-line
-    +list-rounded($list-item-three-line-min-height)
-
-.v-list--subheader
-  padding-top: $list-subheader-padding-top
+.v-list
+  .v-navigation-drawer &
+    background: transparent
+    color: inherit