feat(VTreeview): add footer slot

[J-Sek]

Description

resolves #22100

Markup:

<template>
  <v-app theme="dark">
    <v-container max-width="500">
      <v-treeview
        :items="items"
        density="compact"
        indent-lines
        item-props
        separate-roots
      >
        <template #header="{ props, item }">
          <v-treeview-item v-bind="props">
            <template #append>
              <small v-if="item.filesCount">{{ item.filesCount }} files</small>
            </template>
          </v-treeview-item>
        </template>
        <template #append="{ item }">
          <small>{{ item.size }} MB</small>
        </template>
        <template #footer="{ item }">
          <v-treeview-item v-if="item.totalSize" class="bg-primary" title="Total size:">
            <template #append>
              <strong>{{ item.totalSize }} MB</strong>
            </template>
          </v-treeview-item>
        </template>
      </v-treeview>
    </v-container>
  </v-app>
</template>

<script setup>
  function getFakeGroups (prefix) {
    return Array.from({ length: 3 }, (_, i) => {
      const filesCount = 5 + Math.floor(Math.random() * 5)
      const children = Array.from({ length: filesCount }, (_, j) => ({
        value: `${prefix}-${i}-${j}`,
        size: 2 + Math.floor(Math.random() * 5),
        title: `Example child item ${j + 1}`,
      }))
      const totalSize = children.reduce((sum, n) => sum + n.size, 0)
      return {
        value: `${prefix}-${i}`,
        title: `Example item ${i + 1}`,
        filesCount,
        totalSize,
        children,
      }
    })
  }
  const items = [
    { value: 'g1', title: 'Personal vault', children: getFakeGroups('g1') },
    { value: 'g2', title: 'Public', children: getFakeGroups('g2') },
    { value: 'g3', title: 'Shared', children: getFakeGroups('g3') },
  ]
</script>