feat(VTreeview): **dense** prop, css tweaks

[jacekkarczmarczyk]

Description

Makes the v-treeview layout more similar to v-list (spacing, height, text-truncating), adds dense prop

BREAKING: Must now use the dense prop to get previous styling

Must add BREAKING information when merged.

Motivation and Context

Fixes #7475 (at least some issues)

How Has This Been Tested?

visually

Markup:

<template>
<v-app>
  <v-container>
    <v-layout row>
      <v-checkbox v-model="selectable" label="selectable" hide-details />
      <v-checkbox v-model="$vuetify.rtl" label="rtl" hide-details />
    </v-layout>

    <v-divider class="my-3" />

    <v-treeview
      v-model="tree"
      :items="items"
      hoverable
      transition
      open-on-click
      :selectable="selectable"
    />

    <v-divider class="my-3" />

    <v-treeview
      v-model="tree"
      :items="items"
      dense
      hoverable
      open-on-click
      :selectable="selectable"
    />
  </v-container>
</v-app>
</template>

<script>
  export default {
    data: () => ({
      selectable: true,
      open: ['public'],
      files: {
        html: 'mdi-language-html5',
        js: 'mdi-nodejs',
        json: 'mdi-json',
        md: 'mdi-markdown',
        pdf: 'mdi-file-pdf',
        png: 'mdi-file-image',
        txt: 'mdi-file-document-outline',
        xls: 'mdi-file-excel',
      },
      tree: [],
      items: [
        {
          name: '.git',
        },
        {
          name: 'node_modules',
        },
        {
          name: 'public',
          children: [
            {
              name: 'static',
              children: [{
                name: 'logo.png',
                file: 'png',
              }],
            },
            {
              name: 'That is a really really really really really really really really really ' +
                'really really really really really really really really really really really ' +
                'really really really really really really really really really really long name',
              file: 'png',
            },
            {
              name: 'index.html',
              file: 'html',
            },
          ],
        },
        {
          name: '.gitignore',
          file: 'txt',
        },
        {
          name: 'babel.config.js',
          file: 'js',
        },
        {
          name: 'That is also a really really really really really really really really really ' +
                'really really really really really really really really really really really ' +
                'really really really really really really really really really really long name',
          file: 'json',
        },
        {
          name: 'README.md',
          file: 'md',
        },
      ],
    }),
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and breaking changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[codecov]

Codecov Report

Merging #7518 into next will increase coverage by 0.01%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             next    #7518      +/-   ##
==========================================
+ Coverage   87.14%   87.16%   +0.01%     
==========================================
  Files         325      325              
  Lines        8443     8443              
  Branches     2116     2116              
==========================================
+ Hits         7358     7359       +1     
+ Misses        995      994       -1     
  Partials       90       90

Impacted Files	Coverage Δ
...ages/vuetify/src/components/VTreeview/VTreeview.ts	98.19% <ø> (ø)	⬆️
packages/vuetify/src/components/VSelect/VSelect.ts	94.42% <0%> (+0.42%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6e15405...05ff630. Read the comment docs.

[codecov]

Codecov Report

Merging #7518 into next will increase coverage by 0.17%.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             next   #7518      +/-   ##
=========================================
+ Coverage   86.93%   87.1%   +0.17%     
=========================================
  Files         325     325              
  Lines        8536    8455      -81     
  Branches     2153    2120      -33     
=========================================
- Hits         7421    7365      -56     
+ Misses       1025    1000      -25     
  Partials       90      90

Impacted Files	Coverage Δ
...ages/vuetify/src/components/VTreeview/VTreeview.ts	98.19% <ø> (ø)	⬆️
...ages/vuetify/src/components/VSelect/VSelectList.ts	89.61% <0%> (-0.39%)	⬇️
...tify/src/components/VAutocomplete/VAutocomplete.ts	99.2% <0%> (-0.02%)	⬇️
packages/vuetify/src/components/VList/VList.ts	57.14% <0%> (ø)	⬆️
packages/vuetify/src/components/VList/VListItem.ts	100% <0%> (ø)	⬆️
packages/vuetify/src/mixins/routable/index.ts	97.61% <0%> (ø)	⬆️
packages/vuetify/src/components/VBtn/VBtn.ts	100% <0%> (ø)	⬆️
packages/vuetify/src/mixins/activatable/index.ts	100% <0%> (ø)	⬆️
packages/vuetify/src/components/VInput/VInput.ts	97.18% <0%> (ø)	⬆️
packages/vuetify/src/components/VSelect/VSelect.ts	93.99% <0%> (+0.95%)	⬆️
... and 4 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e9a816d...3e03434. Read the comment docs.