feat(VSelect): cascading submenus

[J-Sek]

Description

• introduces cascade to instruct underlying VListItem and VList to put children in a submenu
• provide/inject to pass cascade flag and select(...) method
• fix anomalies on touch-based devices (menu autocloses unexpectedly)
• expose submenu-offset or submenu-props?

resolves #3049

Markup:

Playground

<template>
  <v-app theme="dark">
    <v-container class="text-center">
      <v-btn append-icon="mdi-chevron-down" color="primary">
        Open menu
        <v-menu
          :items="countries"
          :list-props="{ class: 'py-0', density: 'compact' }"
          activator="parent"
          offset="4"
          @click:item="logs += `\nClicked: ${$event}`"
        />
      </v-btn>
    </v-container>
    <v-container max-width="300">
      <v-select
        :items="items"
        label="nested select"
        variant="solo-filled"
        cascade
        clearable
        item-props
      />
    </v-container>
    <v-container>
      <pre>logs: {{ logs }}</pre>
    </v-container>
  </v-app>
</template>

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

  const logs = shallowRef('')

  const items = [
    {
      title: 'Title 1',
      prependIcon: 'mdi-cow',
      children: [
        { title: 'Title 1.1', subtitle: 'Subtitle 1.1', value: '1.1' },
      ],
    },
    {
      title: 'Title 2',
      prependIcon: 'mdi-corn',
      children: [
        { title: 'Title 2.1', subtitle: 'Subtitle 2.1', value: '2.1' },
        {
          title: 'Title 2.2',
          children: [
            { title: 'Title 2.2.1', subtitle: 'Subtitle 2.2.1', value: '2.2.1' },
            { title: 'Title 2.2.2', subtitle: 'Subtitle 2.2.2', value: '2.2.2' },
          ],
        },
      ],
    },
    { prependIcon: 'mdi-mushroom-outline', title: 'Title 3', subtitle: 'Subtitle 3', value: '3' },
  ]

  const countries = [
    {
      title: 'Australia',
      children: [
        {
          title: 'New South Wales',
          children: [
            { title: 'Sydney', value: 'A-SY' },
            { title: 'Newcastle', value: 'A-NE' },
            { title: 'Wollongong', value: 'A-WO' },
          ],
        },
        {
          title: 'Queensland',
          children: [
            { title: 'Brisbane', value: 'A-BR' },
            { title: 'Townsville', value: 'A-TO' },
          ],
        },
      ],
    },
    {
      title: 'Canada',
      children: [
        {
          title: 'Quebec',
          children: [
            { title: 'Montreal', value: 'C-MO' },
            { title: 'Quebec City', value: 'C-QU' },
          ],
        },
        {
          title: 'Ontario',
          children: [
            { title: 'Ottawa', value: 'C-OT' },
            { title: 'Toronto', value: 'C-TO' },
          ],
        },
      ],
    },
    {
      title: 'United States',
      children: [
        {
          title: 'California',
          children: [
            { title: 'Los Angeles', value: 'US-LA' },
            { title: 'San Diego', value: 'US-SD' },
            { title: 'San Francisco', value: 'US-SF' },
          ],
        },
        {
          title: 'Florida',
          children: [
            { title: 'Jacksonville', value: 'US-JA' },
            { title: 'Miami', value: 'US-MI' },
            { title: 'Tampa', value: 'US-TA' },
            { title: 'Orlando', value: 'US-OR' },
          ],
        },
        {
          title: 'Texas',
          children: [
            { title: 'Austin', value: 'US-AU' },
            { title: 'Dallas', value: 'US-DA' },
            { title: 'Houston', value: 'US-HO' },
          ],
        },
      ],
    },
  ]
</script>