fix(VList): stop controlling indentation with prependGap - #23161

<script setup lang="ts">
  import { computed, ref } from 'vue'

  const items = [
    {
      id: 1,
      title: 'Vuetify Human Resources',
      children: [
        {
          id: 2,
          title: 'Core team',
          children: [
            { id: 201, title: 'John', file: 'pdf' },
            { id: 202, title: 'Kael', file: 'png' },
            { id: 203, title: 'Nekosaur', file: 'js', disabled: true },
            { id: 204, title: 'Jacek', file: 'md' },
            { id: 205, title: 'Andrew', file: 'html' },
          ],
        },
        {
          id: 3,
          title: 'Administrators',
          children: [
            { id: 301, title: 'Mike', file: 'xls' },
            { id: 302, title: 'Hunt', file: 'json' },
          ],
        },
        { id: 4, title: 'Other contributors', file: 'txt' },
      ],
    },
  ]

  const files: Record<string, string> = {
    html: 'mdi-language-html5',
    js: 'mdi-nodejs',
    json: 'mdi-code-json',
    md: 'mdi-language-markdown',
    pdf: 'mdi-file-pdf-box',
    png: 'mdi-file-image',
    txt: 'mdi-file-document-outline',
    xls: 'mdi-file-excel-box',
  }

  const fluid = ref(false)
  const selectable = ref(false)

  const indentPx = ref<number | null>(8)
  const prependGapProp = ref<number | null>(null)

  const indentProp = computed(() => indentPx.value ?? undefined)

  const listOpened = ref(['users', 'admins'])
</script>

<template>
  <v-app theme="dark">
    <v-container>
      <h2 class="mb-4">VTreeview indent &amp; prepend-gap playground</h2>

      <v-card class="pa-4 mb-6" variant="outlined">
        <div class="text-subtitle-1 mb-3">Indent controls</div>
        <v-row dense>

          <v-col cols="12" md="3">
            <v-switch
              v-model="fluid"
              density="compact"
              label="fluid (zero level cell)"
              hide-details
            />
          </v-col>
          <v-col cols="12" md="3">
            <v-text-field
              v-model.number="indentPx"
              density="compact"
              label="indent prop on <v-treeview> and <v-list> (px, blank=unset)"
              type="number"
              clearable
              hide-details
            />
          </v-col>

        </v-row>

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

        <div class="text-subtitle-1 mb-3">Prepend / action controls</div>
        <v-row dense>
          <v-col cols="12" md="3">
            <v-switch
              v-model="selectable"
              density="compact"
              label="selectable (checkbox in prepend)"
              hide-details
            />
          </v-col>
          <v-col cols="12" md="6">
            <v-text-field
              v-model.number="prependGapProp"
              density="compact"
              label="prependGap prop on <v-treeview> and <v-list>"
              type="number"
              clearable
              hide-details
            />
          </v-col>
        </v-row>
      </v-card>

      <v-row dense>
        <v-col cols="12" md="6">
          <v-card class="pa-4 mb-4" variant="outlined">
            <div class="d-flex align-center mb-2">
              <div class="text-subtitle-1">Main treeview</div>
            </div>
            <v-treeview
              ref="treeviewRef"
              :activatable="true"
              :fluid="fluid"
              :hide-actions="false"
              :indent="indentProp"
              :indent-lines="true"
              :items="items"
              :open-all="true"
              :prepend-gap="prependGapProp ?? undefined"
              :selectable="selectable"
              item-value="id"
            >
              <template #prepend="{ item, isOpen }">
                <v-icon
                  v-if="!item.file"
                  :icon="isOpen ? 'mdi-folder-open' : 'mdi-folder'"
                />
                <v-icon v-else :icon="files[item.file]" />
              </template>
            </v-treeview>
          </v-card>
        </v-col>

        <v-col cols="12" md="6">
          <v-card class="pa-4 mb-4" variant="outlined">
            <div class="d-flex align-center mb-2">
              <div class="text-subtitle-1">VListGroup comparison (shared style + prependGap)</div>
            </div>
            <div class="text-caption mb-2">
              Same <code>treeStyle</code> + <code>prependGap</code> as treeview.
              Nested padding tracks <code>--prepend-width</code> /
              <code>--v-list-group-prepend</code>, independent from treeview indent-lines grid.
            </div>
            <v-list
              ref="vListRef"
              v-model:opened="listOpened"
              :indent="indentProp"
              :prepend-gap="prependGapProp ?? undefined"
              collapse-icon="mdi-menu-down"
              expand-icon="mdi-menu-right"
            >
              <v-list-item prepend-icon="mdi-home" title="Home (root, prepend)" value="home" />
              <v-list-group value="users">
                <template #activator="{ props }">
                  <v-list-item v-bind="props" prepend-icon="mdi-account-multiple" title="Users (group)" />
                </template>
                <v-list-item prepend-icon="mdi-account" title="John (level 2)" value="john" />
                <v-list-item prepend-icon="mdi-account" title="Kael (level 2)" value="kael" />
                <v-list-group value="admins" subgroup>
                  <template #activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-shield-account" title="Admins (subgroup)" />
                  </template>
                  <v-list-item prepend-icon="mdi-account-key" title="Mike (level 3)" value="mike" />
                  <v-list-item title="No prepend (level 3)" value="noprepend" />
                </v-list-group>
              </v-list-group>
              <v-list-item title="No prepend (root)" value="plain" />
            </v-list>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>