Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
May 14, 2024

Conversation

ESP-Marc
Copy link
Contributor

@ESP-Marc ESP-Marc commented May 8, 2024

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>

@MajesticPotatoe MajesticPotatoe added T: bug Functionality that does not work as intended/expected C: VTreeview VTreeview labels May 8, 2024
@johnleider johnleider added this to the v3.6.x milestone May 14, 2024
@johnleider johnleider merged commit 49892e2 into vuetifyjs:master May 14, 2024
9 of 10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VTreeview VTreeview T: bug Functionality that does not work as intended/expected
Projects
None yet
3 participants