Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(VDataTable): change data-table scoped slot props structure #7585

Merged
merged 8 commits into from
Jul 19, 2019

Conversation

nekosaur
Copy link
Member

@nekosaur nekosaur commented Jun 19, 2019

Description

previous structure of scoped slot props was geared towards ease of use internally when creating rows (expand.on.input, expand.props.value). However this made things unnecessarily verbose when end users wanted to use expand/select functionality in scoped slots.

Motivation and Context

ease of use for developers using scoped slots

How Has This Been Tested?

playground

Markup:

<template>
  <div>
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      item-key="name"
      show-select
      show-expand
      class="elevation-1"
    >
      <template v-slot:item.data-table-select="{ select, isSelected }">
        <v-simple-checkbox color="red" :value="isSelected" @input="select($event)"></v-simple-checkbox>
      </template>
      <template v-slot:item.data-table-expand="{ expand, isExpanded }">
        <v-simple-checkbox color="red" :value="isExpanded" @input="expand($event)"></v-simple-checkbox>
      </template>
      <template v-slot:expanded-item>
        hello
      </template>
    </v-data-table>
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      item-key="name"
      show-select
      show-expand
      class="elevation-1"
    >
      <template v-slot:expanded-item>
        hello
      </template>
    </v-data-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        selected: [],
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            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' },
        ],
        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%',
          },
        ],
      }
    },
  }
</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 feature but make 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 breaking 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)

@johnleider johnleider added this to the v2.0.0 milestone Jun 25, 2019
@johnleider johnleider added S: has merge conflicts The pending Pull Request has merge conflicts T: feature A new feature labels Jun 25, 2019
make it easier to use props in scoped slots
@johnleider johnleider added S: needs docs update The change requires an update to the documentation and removed S: has merge conflicts The pending Pull Request has merge conflicts labels Jun 25, 2019
Copy link
Member

@johnleider johnleider left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Docs are still showing the slot as missing information (after building api)
image

@codecov
Copy link

codecov bot commented Jun 25, 2019

Codecov Report

Merging #7585 into next will decrease coverage by 0.01%.
The diff coverage is 85.71%.

Impacted file tree graph

@@            Coverage Diff             @@
##             next    #7585      +/-   ##
==========================================
- Coverage   86.38%   86.36%   -0.02%     
==========================================
  Files         328      328              
  Lines        8796     8794       -2     
  Branches     2219     2219              
==========================================
- Hits         7598     7595       -3     
- Misses       1105     1106       +1     
  Partials       93       93
Impacted Files Coverage Δ
...tify/src/components/VDataIterator/VDataIterator.ts 88.77% <100%> (ø) ⬆️
...es/vuetify/src/components/VDataTable/VDataTable.ts 83.63% <80%> (-0.8%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9ed1223...5ede8c7. Read the comment docs.

@codecov
Copy link

codecov bot commented Jun 25, 2019

Codecov Report

Merging #7585 into next will decrease coverage by 0.01%.
The diff coverage is 88.88%.

Impacted file tree graph

@@            Coverage Diff             @@
##             next    #7585      +/-   ##
==========================================
- Coverage   85.68%   85.67%   -0.02%     
==========================================
  Files         333      333              
  Lines        9090     9088       -2     
  Branches     2412     2412              
==========================================
- Hits         7789     7786       -3     
- Misses       1206     1207       +1     
  Partials       95       95
Impacted Files Coverage Δ
...tify/src/components/VDataIterator/VDataIterator.ts 88.65% <100%> (ø) ⬆️
...es/vuetify/src/components/VDataTable/VDataTable.ts 84.24% <85.71%> (-0.19%) ⬇️
packages/vuetify/src/components/VSelect/VSelect.ts 93.77% <0%> (-0.37%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9071877...38cac03. Read the comment docs.

@nekosaur nekosaur requested a review from johnleider June 27, 2019 08:14
@jacekkarczmarczyk jacekkarczmarczyk added the S: has merge conflicts The pending Pull Request has merge conflicts label Jul 9, 2019
@johnleider johnleider removed the S: has merge conflicts The pending Pull Request has merge conflicts label Jul 16, 2019
@vercel vercel bot temporarily deployed to staging July 16, 2019 15:37 Inactive
@vercel vercel bot temporarily deployed to staging July 19, 2019 20:54 Inactive
@TravisBuddy
Copy link

TravisBuddy commented Jul 19, 2019

Hey @nekosaur,
Your changes look good to me!

View build log

TravisBuddy Request Identifier: 9fb90ca0-aa6e-11e9-91b1-f106ceecf692

@nekosaur nekosaur merged commit 878be3e into next Jul 19, 2019
@nekosaur nekosaur deleted the feat/data-table-slot-props branch July 19, 2019 21:58
@lock lock bot locked as resolved and limited conversation to collaborators Aug 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
S: needs docs update The change requires an update to the documentation T: feature A new feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants