feat(VTreeview): port open-on-click prop to v3 & enhancement

[yuwu9145]

New props being ported from v2:

• open-on-click to allow explicitly defining group activator behaviour
• selected-color

fixes all broken examples on doc
fixes return-object doesn't work for "open", "select" and "activate"
fixes #20009
fixes #20095
fixes #19414
fixes #20106

Need extra eyes on testing. This PR aims to resolve all obvious known treeview issues, you can start testing from going through docs & checking playground. Feel free to report any weird behaviours/issues

Description

Markup:

<template>
  <h2>Activatable (independent)</h2>
  <v-treeview
    :items="items"
    item-title="title"
    item-value="id"
    activatable
    @update:activated="activateSelectCallback"
  />
  <h2>Activatable (independent) - Open-on-click</h2>
  <v-treeview
    :items="items"
    item-title="title"
    item-value="id"
    activatable
    open-on-click
    @update:activated="activateSelectCallback"
  />
  <h2>Activatable (single-independent)</h2>
  <v-treeview
    :items="items"
    active-strategy="single-independent"
    color="red"
    item-title="title"
    item-value="id"
    activatable
    @update:activated="activateSelectCallback"
  />
  <h2>Activatable (single-independent) - Open-on-click</h2>
  <v-treeview
    :items="items"
    active-strategy="single-independent"
    color="red"
    item-title="title"
    item-value="id"
    activatable
    open-on-click
    @update:activated="activateSelectCallback"
  />
  <h2>Activatable (single-leaf)</h2>
  <v-treeview
    :items="items"
    active-strategy="single-leaf"
    color="red"
    item-title="title"
    item-value="id"
    activatable
    @update:activated="activateSelectCallback"
  />
  <h2>Activatable (single-leaf) - Open-on-click</h2>
  <v-treeview
    :items="items"
    active-strategy="single-leaf"
    color="red"
    item-title="title"
    item-value="id"
    activatable
    open-on-click
    @update:activated="activateSelectCallback"
  />
  <h2>Activatable (leaf)</h2>
  <v-treeview
    :items="items"
    active-strategy="leaf"
    color="red"
    item-title="title"
    item-value="id"
    activatable
    @update:activated="activateSelectCallback"
  />
  <h2>Activatable (leaf) - Open-on-click</h2>
  <v-treeview
    :items="items"
    active-strategy="leaf"
    color="red"
    item-title="title"
    item-value="id"
    activatable
    open-on-click
    @update:activated="activateSelectCallback"
  />
  <h2>Selectable (single-leaf)</h2>
  <v-treeview
    :items="items"
    color="red"
    item-title="title"
    item-value="id"
    select-strategy="single-leaf"
    selectable
    @update:selected="activateSelectCallback"
  />
  <h2>Selectable (leaf)</h2>
  <v-treeview
    :items="items"
    color="red"
    item-title="title"
    item-value="id"
    select-strategy="leaf"
    selectable
    @update:selected="activateSelectCallback"
  />
  <h2>Selectable (independent)</h2>
  <v-treeview
    :items="items"
    color="red"
    item-title="title"
    item-value="id"
    select-strategy="independent"
    selectable
    @update:selected="activateSelectCallback"
  />
  <h2>Selectable (single-independent)</h2>
  <v-treeview
    :items="items"
    color="red"
    item-title="title"
    item-value="id"
    select-strategy="single-independent"
    selectable
    @update:selected="activateSelectCallback"
  />
  <h2>Selectable (classic)</h2>
  <v-treeview
    :items="items"
    color="red"
    item-title="title"
    item-value="id"
    select-strategy="classic"
    selectable
    selected-color="green"
    open-on-click
    @update:selected="activateSelectCallback"
  />
  <!-- <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>

[uccmen]

omg I need this PR merged by Monday 🥲😂🫡🙌🏽

[ConnorNoddin]

omg I need this PR merged by Monday 🥲😂🫡🙌🏽

Seconded

[johnleider]

Looking really good.

[kvngrnr]

Any update on when this will be merged/released?

[stephane303]

I did some tests, especially around selected, this seems to work but only if return-object is activated.
If return-object is not there :

• I get [ "Symbol(6)", "Symbol(9)" ] in the selection, and I guess the ids should be there.
• the behaviour is different than if return-object is activated

[yuwu9145]

I did some tests, especially around selected, this seems to work but only if return-object is activated. If return-object is not there :

• I get [ "Symbol(6)", "Symbol(9)" ] in the selection, and I guess the ids should be there.
• the behaviour is different than if return-object is activated

I can't replicate on dev branch, did you have item-value applied or can you provide a sample code?

[stephane303]

I did some tests, especially around selected, this seems to work but only if return-object is activated. If return-object is not there :

• I get [ "Symbol(6)", "Symbol(9)" ] in the selection, and I guess the ids should be there.
• the behaviour is different than if return-object is activated

I can't replicate on dev branch, did you have item-value applied or can you provide a sample code?

Yes I did the tests again today, can't see it either again, I am new in running vuetify locally, that was probably the reason why, sorry.

[yuwu9145]

I am new in running vuetify locally

I don't think dev branch is live anywhere so you were playing around live master branch which doesn't have changes in this PR yet.

https://vuetifyjs.com/en/getting-started/contributing/#local-development