feat(VList): add prependSpacer prop

[yuwu9145]

Description

Markup:

<template>
  <v-card
    class="mx-auto"
    max-width="300"
  >
    <v-list :slim-width="100" slim>
      <v-list-subheader>Plain Variant</v-list-subheader>

      <v-list-item
        v-for="(item, i) in items"
        :key="i"
        :value="item"
        color="primary"
        variant="plain"
      >
        <template v-slot:prepend>
          <v-icon :icon="item.icon"></v-icon>
        </template>

        <v-list-item-title v-text="item.text"></v-list-item-title>
      </v-list-item>
    </v-list>

    <v-list>
      <v-list-subheader>Tonal Variant</v-list-subheader>

      <v-list-item
        v-for="(item, i) in items"
        :key="i"
        :value="item"
        color="primary"
        variant="tonal"
      >
        <template v-slot:prepend>
          <v-icon :icon="item.icon"></v-icon>
        </template>

        <v-list-item-title v-text="item.text"></v-list-item-title>
      </v-list-item>
    </v-list>
  </v-card>
</template>
<script>
  export default {
    data: () => ({
      items: [
        { text: 'Real-Time', icon: 'mdi-clock' },
        { text: 'Audience', icon: 'mdi-account' },
        { text: 'Conversions', icon: 'mdi-flag' },
      ],
    }),
  }
</script>

<template>
  <v-card class="mx-auto" width="300">
    <v-list v-model:opened="open">
      <v-list-item prepend-icon="mdi-home" title="Home"></v-list-item>

      <v-list-group prepend-icon="mdi-home" value="Users">
        <template v-slot:activator="{ props }">
          <v-list-item
            v-bind="props"
            prepend-icon="mdi-account-circle"
            title="Users"
          ></v-list-item>
        </template>

        <v-list-group value="Admin">
          <template v-slot:activator="{ props }">
            <v-list-item v-bind="props"
            title="Admin"></v-list-item>
          </template>

          <v-list-item
            v-for="([title, icon], i) in admins"
            :key="i"
            :prepend-icon="icon"
            :title="title"
            :value="title"
          ></v-list-item>
        </v-list-group>

        <v-list-group value="Actions">
          <template v-slot:activator="{ props }">
            <v-list-item v-bind="props" title="Actions"></v-list-item>
          </template>

          <v-list-item
            v-for="([title, icon], i) in cruds"
            :key="i"
            :prepend-icon="icon"
            :title="title"
            :value="title"
          ></v-list-item>
        </v-list-group>
      </v-list-group>
    </v-list>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      open: ['Users'],
      admins: [
        ['Management', 'mdi-account-multiple-outline'],
        ['Settings', 'mdi-cog-outline'],
      ],
      cruds: [
        ['Create', 'mdi-plus-outline'],
        ['Read', 'mdi-file-outline'],
        ['Update', 'mdi-update'],
        ['Delete', 'mdi-delete'],
      ],
    }),
  }
</script>

[johnleider]

Does it make it too complex to reduce the spacing between parent/child as well?

Playground used:

https://bin.vuetifyjs.com/?code=eJzVVU2L2zAQvedXDG4hCaybhV6KiQOlfyCUpZfSw6ys7IqVJSPJbkLIf69kJf6Ira53lz2sD_b4STN-M-8hrw3NC46GbmYA6yomqDIbARCOWqdRvo-xNDKqsRz38V-Wmcc0-np76zCXVedxpg0khaIFFVmsCyRUpdG3yG9otsS6vH-kmFG12XJkAn6hYijMejVYn11lMsv0DAFU8U7a-gsH3gBbgi3lYu2Juit5ooc0Yh2gQl5SC9l9LUokd5UKxXJUhxavPDG74nhe8Es7ltZlcPDp3HW7VpNmRApI3N1_8osLI1h1Sqza4bdgp93YMMOpbdbQvWVSV3Fhp0ozOLc4mNmDkmUxyhmJYRUa1_oRCiULnUCDbd07nBrxrnnZBK-z7-5zVVLDdocIar5ptEVFhWVZxfdMZGnUL_yyGXQoTBB9RPaQ8GHpQ-J35X_OABMtEBjAi20QMkLQCm8zw7vZYdI8ekQmmWLUFmFj_M8aYXP07fG8QSZbJDiUV9hkYJQB3DPKGHrBzlTOFMIH_Z0UyD_AQW8cz49y0PeF8LH7d29mvY-tNVGsqHfQfSGVgYzusOQGjnWJDA0msFhCuoGFh8DPN4HfDdUjODIJzH9S5PEdy-ncamG7tFCesZhwSZ7mcLoZZnwvM0YFuUpAQmQpzHjKDykqqjSTQvezdhwfOil_fHBauufJ9n3p9R8SKm8g

[yuwu9145]

Does it make it too complex to reduce the spacing between parent/child as well?

Setting sass variable$list-indent-size to 0 makes it look much better. But I need to do some more work to figure out any potential breaking changes if we do that

[yuwu9145]

FYI: I'm still trying to fix the indent issue.

It's a complicated one but I found the problem, it's the --prepend css modifier applied incorrectly in nested scenario. Trying to find a solution atm

[yuwu9145]

Did regression testing on docs (VTreeview & VList), all good. But there is one caveat:

Indent only works properly if prepend-icon is provided in v-list-group rather than in its activator v-list-item.

✅ Works

<v-list-group
  prepend-icon="mdi-home"
  value="Admin"
>
   <template v-slot:activator="{ props }">
       <v-list-item
           v-bind="props"
            title="Admin"
        ></v-list-item>
    </template>
</v-list-group>

❌ Doesn't work

<v-list-group
  value="Admin"
>
   <template v-slot:activator="{ props }">
       <v-list-item
           v-bind="props"
           prepend-icon="mdi-home"
           title="Admin"
        ></v-list-item>
    </template>
</v-list-group>

Making the latter sample work requires js logic (to somehow access activator slot), but I would rather keep everything in css unless the latter use case is desperately required

[johnleider]

Did regression testing on docs (VTreeview & VList), all good. But there is one caveat:

Indent only works properly if prepend-icon is provided in v-list-group rather than in its activator v-list-item.

✅ Works

<v-list-group
  prepend-icon="mdi-home"
  value="Admin"
>
   <template v-slot:activator="{ props }">
       <v-list-item
           v-bind="props"
            title="Admin"
        ></v-list-item>
    </template>
</v-list-group>

❌ Doesn't work

<v-list-group
  value="Admin"
>
   <template v-slot:activator="{ props }">
       <v-list-item
           v-bind="props"
           prepend-icon="mdi-home"
           title="Admin"
        ></v-list-item>
    </template>
</v-list-group>

Making the latter sample work requires js logic (to somehow access activator slot), but I would rather keep everything in css unless the latter use case is desperately required

Can we add a Alert in the docs about it?

[yuwu9145]

Can we add a Alert in the docs about it?

Done, this PR is ready

[J-Sek]

Is there any reason to skip VTreeview? The prop will be exposed there but won't have any effect.

... .v-list-item-action ~ .v-list-item__spacer
-  width: $list-item-slim-action-spacer-width
+  width: var(--v-list-slim-spacer-width, $list-item-slim-action-spacer-width)

(this change is probably required in 2 places within VListItem.sass)

Demo

BTW: idea for a rename slim-width » slim-spacer