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): select & activate issues #19795

Merged
merged 26 commits into from
May 29, 2024
Merged

fix(VTreeview): select & activate issues #19795

merged 26 commits into from
May 29, 2024

Conversation

yuwu9145
Copy link
Member

@yuwu9145 yuwu9145 commented May 10, 2024

Properly hook nested composable into treeview

fixes #19441
fixes #19402
fixes #19400
fixes #19533
fixes #19471

vuetify-treeview-demo

Description

Markup:

<template>
  <h2>Activatable (independent)</h2>
  <v-treeview
    :items="items"
    active-strategy="independent"
    item-title="title"
    item-value="id"
    activatable
    @update:activated="activateSelectCallback"
  />
  <h2>Activatable (single-independent)</h2>
  <v-treeview
    :items="items"
    active-strategy="single-independent"
    item-title="title"
    item-value="id"
    activatable
    @update:activated="activateSelectCallback"
  />
  <h2>Activatable (single-leaf)</h2>
  <v-treeview
    :items="items"
    active-strategy="single-leaf"
    item-title="title"
    item-value="id"
    activatable
    @update:activated="activateSelectCallback"
  />
  <h2>Activatable (leaf)</h2>
  <v-treeview
    :items="items"
    active-strategy="leaf"
    item-title="title"
    item-value="id"
    activatable
    @update:activated="activateSelectCallback"
  />
  <h2>Activatable with open-on-click</h2>
  <!-- <v-treeview
    :items="items"
    activatable
    activate-strategy="independent"
    open-on-click
    @update:activated="activateSelectCallback"
  /> -->
  <h2>Selectable (single-leaf)</h2>
  <v-treeview
    :items="items"
    item-title="title"
    item-value="id"
    select-strategy="single-leaf"
    selectable
    @update:selected="activateSelectCallback"
  />
  <h2>Selectable (leaf)</h2>
  <v-treeview
    :items="items"
    item-title="title"
    item-value="id"
    select-strategy="leaf"
    selectable
    @update:selected="activateSelectCallback"
  />
  <h2>Selectable (independent)</h2>
  <v-treeview
    :items="items"
    item-title="title"
    item-value="id"
    select-strategy="independent"
    selectable
    @update:selected="activateSelectCallback"
  />
  <h2>Selectable (single-independent)</h2>
  <v-treeview
    :items="items"
    item-title="title"
    item-value="id"
    select-strategy="single-independent"
    selectable
    @update:selected="activateSelectCallback"
  />
  <h2>Selectable (classic)</h2>
  <v-treeview
    :items="items"
    item-title="title"
    item-value="id"
    select-strategy="classic"
    selectable
    @update:selected="activateSelectCallback"
  />
  <h2>No Activatable</h2>
  <!-- <v-treeview
    :items="items"
    @update:activated="activateSelectCallback"
  /> -->
</template>

<script setup>
  import { ref } from 'vue'

  function activateSelectCallback ( e ) {
    console.log('activateCallback', e)
  }
  const items = ref([
    {
      id: 1,
      title: 'Applications :',
      children: [
        { id: 2, title: 'Calendar : app' },
        { id: 3, title: 'Chrome : app' },
        { id: 4, title: 'Webstorm : app' },
      ],
    },
    {
      id: 5,
      title: 'Documents :',
      children: [
        {
          id: 6,
          title: 'vuetify :',
          children: [
            {
              id: 7,
              title: 'src :',
              children: [
                { id: 8, title: 'index : ts' },
                { id: 9, title: 'bootstrap : ts' },
              ],
            },
          ],
        },
        {
          id: 10,
          title: 'material2 :',
          children: [
            {
              id: 11,
              title: 'src :',
              children: [
                { id: 12, title: 'v-btn : ts' },
                { id: 13, title: 'v-card : ts' },
                { id: 14, title: 'v-window : ts' },
              ],
            },
          ],
        },
      ],
    },
    {
      id: 15,
      title: 'Downloads :',
      children: [
        { id: 16, title: 'October : pdf' },
        { id: 17, title: 'November : pdf' },
        { id: 18, title: 'Tutorial : html' },
      ],
    },
    {
      id: 19,
      title: 'Videos :',
      children: [
        {
          id: 20,
          title: 'Tutorials :',
          children: [
            { id: 21, title: 'Basic layouts : mp4' },
            { id: 22, title: 'Advanced techniques : mp4' },
            { id: 23, title: 'All about app : dir' },
          ],
        },
        { id: 24, title: 'Intro : mov' },
        { id: 25, title: 'Conference introduction : avi' },
      ],
    },
  ])
</script>

@yuwu9145 yuwu9145 marked this pull request as ready for review May 12, 2024 12:24
@yuwu9145 yuwu9145 changed the title feat(VList): allow group activator to be activated without open children feat(VTreeviewItem): allow group activator to be activated without open children May 12, 2024
@yuwu9145 yuwu9145 marked this pull request as draft May 12, 2024 23:58
@yuwu9145 yuwu9145 changed the title feat(VTreeviewItem): allow group activator to be activated without open children fix(VTreeview): select & activate issues May 17, 2024
@yuwu9145 yuwu9145 added T: bug Functionality that does not work as intended/expected and removed T: feature A new feature labels May 17, 2024
@yuwu9145 yuwu9145 marked this pull request as ready for review May 17, 2024 03:05
@KaelWD KaelWD added this to the v3.6.x milestone May 21, 2024
@yuwu9145
Copy link
Member Author

This PR is ready for a further check/review.

There is a known issue of return-object doesn't work, I found the solution but needs more time to verify/test, so it will be addressed in a separate later.

This PR's focus is only on select/activate

@johnleider
Copy link
Member

Looking good. The only thing I've come across is active applying when closing a parent.
tree

@yuwu9145
Copy link
Member Author

The only thing I've come across is active applying when closing a parent.

Fixed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment