feat(VTreeview): update component to v3

[nekosaur]

Description

Update v-treeview to v3

BREAKING CHANGES

• no longer supports "active" state. activatable, active, active-class, multiple-active props are gone
• color renamed to selected-color
• dense removed. use density
• filter prop removed. use props from filter composable
• hover renamed to hoverable
• load-children removed. use events like click:open to dynamically load children
• open-all renamed to open-on-mount. takes strings all and root instead of boolean
• selectable renamed to showSelect
• shaped removed

Motivation and Context

How Has This Been Tested?

Markup:

<template>
  <v-app full-height>
    <v-list :items="items" />

    <v-divider class="my-10" />

    <v-treeview :items="items" />

    <v-divider class="my-10" />
    compact

    <v-treeview :items="items" density="compact" @click:expand="foo" />

    <v-divider class="my-10" />

    comfortable

    <v-treeview :items="items" density="comfortable" />

    <v-divider class="my-10" />

    <v-treeview select-on-click>
      <v-treeview-group>
        <template #activator="{ props }">
          <v-treeview-item v-bind="props" title="Parent" />
        </template>
        <v-treeview-item title="Child #1" />
        <v-treeview-item title="Child #2" />
        <v-treeview-group>
          <template #activator="{ props }">
            <v-treeview-item v-bind="props" title="Child #3" />
          </template>
          <v-treeview-item title="Child #3-1" />
        </v-treeview-group>
      </v-treeview-group>
    </v-treeview>
  </v-app>
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup () {
      const items = ref([
        {
          value: 'parent',
          title: 'Parent',
          $children: [
            {
              value: 'child_1',
              title: 'Child #1',
            },
            {
              value: 'child_2',
              title: 'Child #2',
              prependIcon: 'mdi-home',
            },
            {
              value: 'child_3',
              title: 'Child #3',
              $children: [],
            },
          ],
        },
      ])

      const getItem = path => {
        let arr = items.value

        for (const p of path) {
          const item = arr.find(v => v.value === p)

          if (!item) throw new Error('foo')

          if (item.value === path[path.length - 1]) return item

          if (!item.$children) throw new Error('foo')

          arr = item.$children
        }
      }

      return {
        foo: ({ id, value, path }) => {
          const item = getItem(path)

          if (item.$children.length > 0) return

          item.loading = true

          setTimeout(() => {
            item.loading = false

            item.$children = [
              {
                value: 'child_3_1',
                title: 'Child #3-1',
              },
            ]
          }, 1000)
        },
        items,
      }
    },
  }
</script>

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• [ ] The PR title is no longer than 64 characters.
• [ ] The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• [ ] My code follows the code style of this project.
• [ ] I've added relevant changes to the documentation (applies to new features and breaking changes in core library)