feat(VSelect): Add list-header slot

[Haviles04]

Description

resolves #22400

Markup

<template>
  <v-app>
    <v-container>
      <v-select
        v-model="selectedItems"
        :items="items"
        :menu-props="{offset:[40,40]}"
        class="rounded-lg"
        item-title="value"
        multiple
      >

        <template #list-header>
          <div class="bg-blue pa-2 10">
            <span>{{ headerText }}</span>
          </div>
        </template>
      </v-select>
    </v-container>
  </v-app>
</template>

<script setup>

  import { computed, shallowRef } from 'vue'
  const selectedItems = shallowRef([])

  const headerText = computed(() => {
    return `${selectedItems.value.length} selected`
  })

  const items = Array.from({ length: 15 }, (_, i) => ({ id: i, value: i * 10 }))

</script>

[J-Sek]

<VSheet style="display: flex; flex-direction: column;"> around both list and header would help eliminate the shadow bleading up. It will require change to onBlur so we won't auto-close the menu when header contains focusable element.

[J-Sek]

Proper tab-focus navigation is challenging. I am trying to get slots working with interactive elements within.

Playground

<template>
  <v-app theme="dark">
    <v-container class="d-flex align-center ga-3" max-width="600">
      <v-btn text="btn before" />
      <v-select
        v-model="selectedItems"
        :items="items"
        class="rounded-lg"
        item-title="value"
        hide-details
        multiple
      >
        <template #list-header>
          <div class="pa-2 border-b">
            <v-text-field
              density="compact"
              prepend-inner-icon="mdi-magnify"
              hide-details
            />
          </div>
        </template>
        <template #list-footer>
          <div class="d-flex align-center px-4 border-t">
            <span>Show all items</span>
            <v-spacer />
            <v-switch color="purple" hide-details />
          </div>
        </template>
      </v-select>
      <v-btn text="btn after" />
    </v-container>
  </v-app>
</template>

<script setup>
  import { computed, shallowRef } from 'vue'
  const selectedItems = shallowRef([])
  const footerText = computed(() => `${selectedItems.value.length} selected`)
  const items = Array.from({ length: 15 }, (_, i) => ({ id: i, value: i * 10 }))
</script>

Try getting focus within, by opening with ↓, then Tab - focus skips to the v-switch in the footer. We can workaround it with a quick hack, but now any tab or shift+tab escapes the menu.

onFocus={ () => listRef.value?.focus('first') }
tabindex="0"