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 #prepend>
          <v-icon :icon="item.icon" />
        </template>

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

      <v-list-group>
        <template #activator="{ props: activatorProps }">
          <v-list-item prepend-icon="$vuetify" title="Parent" v-bind="activatorProps" />
        </template>

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

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

        <v-list-group>
          <template #activator="{ props: activatorProps }">
            <v-list-item prepend-icon="$vuetify" title="Parent" v-bind="activatorProps" />
          </template>

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

            <v-list-item-title v-text="item.text" />
          </v-list-item>
        </v-list-group>
      </v-list-group>
    </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 #prepend>
          <v-icon :icon="item.icon" />
        </template>

        <v-list-item-title v-text="item.text" />
      </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>

[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