fix(VTreeview): Allow child load on many items and scoped loading state

[ESP-Marc]

Description

fixes #19579
resolves #19566
fixes #19390

Addresses the issue of only one tree item only ever being able to load any child data via the load-children callback prop, this change allows all tree items to each load their own children once.

The issue of all tree items showing a loading state when any one item is loading is resolved, now only the item that is loading its children will show a loading state.

Markup:

<script lang="ts" setup>

import {reactive, ref} from 'vue'

const selection = ref([])

function generateRandomBookName() {
  const adjectives = ['The Great', 'The Secret', 'Brave', 'Mysterious', 'Fantastic', 'Magical'];
  const nouns = ['Adventure', 'Journey', 'Quest', 'Discovery', 'Encounter', 'Escape'];
  const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
  const noun = nouns[Math.floor(Math.random() * nouns.length)];
  return `${adjective} ${noun}`;
}

function generateRandomMovieName() {
  const prefixes = ['The', 'A', 'An', 'My', 'Our', 'Their'];
  const suffixes = ['Movie', 'Film', 'Adventure', 'Story', 'Tale', 'Journey'];
  const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
  const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];
  return `${prefix} ${suffix}`;
}

// Generate the array of objects
const inventory: any[] = []

for (let i = 100; i <= 120; i++) {
  const book = {
    title: generateRandomBookName(),
    value: i,
    category: 1
  };
  inventory.push(book);
}

for (let i = 200; i <= 220; i++) {
  const movie = {
    title: generateRandomMovieName(),
    value: i,
    category: 2
  };
  inventory.push(movie);
}

const categories = reactive([
  {
    title: 'Books',
    value: 1,
    children: [],
  },
  {
    title: 'Movies',
    value: 2,
    children: []
  }
])

function onLoadChildren (item: any): Promise<any> {

  console.log('onLoadChildren', item)

  return new Promise((accept) => {

    setTimeout(() => {
      item.children = inventory.filter(match => match.category === item.value) ?? []
      accept(true)
    }, 1500)

  })

}

function onClickOpen (event: any) {
  console.log('onClickOpen', event)
}

function onClickSelect (event: any) {
  console.log('onClickSelect', event)
}

function onUpdateActivated (event: any) {
  console.log('onUpdateActivated', event)
}

function onUpdateActive (event: any) {
  console.log('onUpdateActive', event)
}

function onUpdateOpened (event: any) {
  console.log('onUpdateOpened', event)
}

function onUpdateOpen (event: any) {
  console.log('onUpdateOpen', event)
}

function onUpdateSelected (event: any) {
  console.log('onUpdateSelected', event)
}

</script>

<template>

  <v-app>

    <v-container>

      <v-card variant="outlined">

        <v-treeview v-model="selection" :items="categories" :load-children="onLoadChildren"
                    select-strategy="single-independent"
                    @click:open="onClickOpen" @click:select="onClickSelect"
                    @update:activated="onUpdateActivated" @update:active="onUpdateActive" @update:opened="onUpdateOpened" @update:open="onUpdateOpen" @update:selected="onUpdateSelected"/>

      </v-card>

    </v-container>

  </v-app>

</template>