feat(VDataTableHeaders): add mobile headers

[webdevnerdstuff]

Description

• Adding mobile.header slot
• Moving thead to VDataTableHeaders
• Moving thead slot to VDataTableHeaders
• Update logic for showing mobile sortby
• Update logic for showing moibile select all checkbox

related:
#19749
#19730

Markup:

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :mobile="true"
    item-value="name"
    items-per-page="5"
    page="1"
    theme="dark"
  />
<!-- <template #[`mobile.header`]="props">
  <v-checkbox
    v-model="props.allSelected"
    :indeterminate="props.someSelected && !props.allSelected"
    hide-details
    @update:model-value="props.selectAll"
  />
</template> -->
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const headers = ref([
    {
      title: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      key: 'name',
    },
    {
      title: 'Calories',
      key: 'calories',
      sortable: false,
    },
    {
      title: 'Fat (g)',
      key: 'fat',
      // sortable: false,
    },
  ] as const)
  const desserts = ref([
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6,
    },
    {
      name: 'Ice cream sandwich with some really long name',
      calories: 237,
      fat: 9,
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16,
    },
    {
      name: 'Cupcake',
      calories: 305,
      fat: 3.7,
    },
    {
      name: 'Gingerbread',
      calories: 356,
      fat: 16,
    },
    {
      name: 'Jelly bean',
      calories: 375,
      fat: 0,
    },
    {
      name: 'Lollipop',
      calories: 392,
      fat: 0.2,
    },
    {
      name: 'Honeycomb',
      calories: 408,
      fat: 3.2,
    },
    {
      name: 'Donut',
      calories: 452,
      fat: 25,
    },
    {
      name: 'KitKat',
      calories: 518,
      fat: 26,
    },
  ])
</script>