feat(VDataTable): isMobile prop in scoped slots

[jacekkarczmarczyk]

Description

Adds isMobile to slots

Motivation and Context

fixes #11330

How Has This Been Tested?

playground

Markup:

<template>
  <div id="app">
    <v-app id="inspire">
      <div>
        <v-select
          v-model="enabled"
          :items="slots"
          label="Slot"
          clearable
        ></v-select>
        <v-data-table
          :headers="headerArray"
          :items="itemsArray"
          :search="search"
          :hide-default-header="hideHeaders"
          :show-select="showSelect"
          hide-default-footer
          item-key="name"
          class="elevation-1"
        >
          <template
            v-if="isEnabled('top')"
            #top="{ isMobile }"
          >
            {{ isMobile ? 'mobile' : 'not mobile' }}
          </template>

          <template
            v-if="isEnabled('header')"
            #header="{ isMobile, props: { headers } }"
          >
            <thead>
              <tr>
                <th :colspan="headers.length">
                  This is a header
                  {{ isMobile ? 'mobile' : 'not mobile' }}
                </th>
              </tr>
            </thead>
          </template>

          <template
            v-if="isEnabled('item.data-table-select')"
            #item.data-table-select="{ isMobile, isSelected, select }"
          >
            <v-simple-checkbox
              color="green"
              :value="isSelected"
              @input="select($event)"
            ></v-simple-checkbox>
            {{ isMobile ? 'mobile' : 'not mobile' }}
          </template>

          <template
            v-if="isEnabled('item.<name>')"
            #item.name="{ item, isMobile }"
          >
            {{ isMobile ? 'mobile' : 'not mobile' }}
          </template>

          <template
            v-if="isEnabled('item')"
            #item.name="{ item, isMobile }"
          >
            <tr><td colspan="42">{{ isMobile ? 'mobile' : 'not mobile' }}</td></tr>
          </template>

          <template
            v-if="isEnabled('body.prepend')"
            #body.prepend="{ isMobile, headers }"
          >
            <tr>
              <td :colspan="headers.length">
                This is a prepended row
                {{ isMobile ? 'mobile' : 'not mobile' }}
              </td>
            </tr>
          </template>

          <template
            v-if="isEnabled('body')"
            #body="{ isMobile, items }"
          >
            <tbody>
              <tr
                v-for="item in items"
                :key="item.name"
              >
                <td>{{ item.name }}</td>
                <td>{{ isMobile ? 'mobile' : 'not mobile' }}</td>
                <td>CONTENT</td>
                <td>CONTENT</td>
                <td>CONTENT</td>
                <td>CONTENT</td>
              </tr>
            </tbody>
          </template>

          <template
            v-if="isEnabled('body.append')"
            #body.append="{ isMobile, headers }"
          >
            <tr>
              <td :colspan="headers.length">
                This is an appended row
                {{ isMobile ? 'mobile' : 'not mobile' }}
              </td>
            </tr>
          </template>
        </v-data-table>
      </div>
    </v-app>
  </div>
</template>

<script>
  const desserts = [
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: '1%',
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: '1%',
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: '7%',
    },
    {
      name: 'Cupcake',
      calories: 305,
      fat: 3.7,
      carbs: 67,
      protein: 4.3,
      iron: '8%',
    },
    {
      name: 'Gingerbread',
      calories: 356,
      fat: 16.0,
      carbs: 49,
      protein: 3.9,
      iron: '16%',
    },
    {
      name: 'Jelly bean',
      calories: 375,
      fat: 0.0,
      carbs: 94,
      protein: 0.0,
      iron: '0%',
    },
    {
      name: 'Lollipop',
      calories: 392,
      fat: 0.2,
      carbs: 98,
      protein: 0,
      iron: '2%',
    },
    {
      name: 'Honeycomb',
      calories: 408,
      fat: 3.2,
      carbs: 87,
      protein: 6.5,
      iron: '45%',
    },
    {
      name: 'Donut',
      calories: 452,
      fat: 25.0,
      carbs: 51,
      protein: 4.9,
      iron: '22%',
    },
    {
      name: 'KitKat',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7,
      iron: '6%',
    },
  ]

  export default {
    data () {
      return {
        enabled: null,
        itemsArray: desserts,
        search: null,
        slots: [
          'body',
          'body.append',
          'body.prepend',
          'header',
          'item',
          'item.data-table-select',
          'item.<name>',
          'top',
        ],
        headerArray: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
      }
    },

    computed: {
      showSelect () {
        return this.isEnabled('header.data-table-select') || this.isEnabled('item.data-table-select')
      },
      hideHeaders () {
        return !this.showSelect
      },
    },

    watch: {
      enabled (slot) {
        if (slot === 'no-data') {
          this.items = []
        } else if (slot === 'no-results') {
          this.search = '...'
        } else {
          this.search = null
          this.items = desserts
        }
      },
    },

    methods: {
      isEnabled (slot) {
        return this.enabled === slot
      },
    },
  }
</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)