diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.ts b/packages/vuetify/src/components/VDataIterator/VDataIterator.ts index e26f0415910e..b97f659fe6d3 100644 --- a/packages/vuetify/src/components/VDataIterator/VDataIterator.ts +++ b/packages/vuetify/src/components/VDataIterator/VDataIterator.ts @@ -32,6 +32,10 @@ export default Themeable.extend({ type: Array as PropType, default: () => [], }, + mobileBreakpoint: { + type: [Number, String], + default: 600, + }, singleExpand: Boolean, loading: [Boolean, String], noResultsText: { @@ -73,6 +77,13 @@ export default Themeable.extend({ selectableItems (): any[] { return this.internalCurrentItems.filter(item => this.isSelectable(item)) }, + isMobile (): boolean { + // Guard against SSR render + // https://github.com/vuetifyjs/vuetify/issues/7410 + if (this.$vuetify.breakpoint.width === 0) return false + + return this.$vuetify.breakpoint.width < parseInt(this.mobileBreakpoint, 10) + }, }, watch: { @@ -192,15 +203,14 @@ export default Themeable.extend({ this.$emit('item-expanded', { item, value }) }, createItemProps (item: any) { - const props = { + return { item, select: (v: boolean) => this.select(item, v), isSelected: this.isSelected(item), expand: (v: boolean) => this.expand(item, v), isExpanded: this.isExpanded(item), + isMobile: this.isMobile, } - - return props }, genEmptyWrapper (content: VNodeChildren) { return this.$createElement('div', content) diff --git a/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.ts b/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.ts index 9661472ed8b8..d11403fd6d21 100644 --- a/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.ts +++ b/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.ts @@ -6,6 +6,7 @@ import { Wrapper, } from '@vue/test-utils' import Vue from 'vue' +import { Breakpoint } from '../../../services/breakpoint' import { preset } from '../../../presets/default' Vue.prototype.$vuetify = { @@ -30,6 +31,7 @@ describe('VDataIterator.ts', () => { return mount(VDataIterator, { mocks: { $vuetify: { + breakpoint: new Breakpoint(preset), lang: new Lang(preset), theme: { dark: false, diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.ts b/packages/vuetify/src/components/VDataTable/VDataTable.ts index b2b0a2a45e54..d79a1da70373 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.ts +++ b/packages/vuetify/src/components/VDataTable/VDataTable.ts @@ -80,10 +80,6 @@ export default VDataIterator.extend({ showGroupBy: Boolean, // TODO: Fix // virtualRows: Boolean, - mobileBreakpoint: { - type: Number, - default: 600, - }, height: [Number, String], hideDefaultHeader: Boolean, caption: String, @@ -135,13 +131,6 @@ export default VDataIterator.extend({ colspan: this.headersLength || this.computedHeaders.length, } }, - isMobile (): boolean { - // Guard against SSR render - // https://github.com/vuetifyjs/vuetify/issues/7410 - if (this.$vuetify.breakpoint.width === 0) return false - - return this.$vuetify.breakpoint.width < this.mobileBreakpoint - }, columnSorters (): Record { return this.computedHeaders.reduce>((acc, header) => { if (header.sort) acc[header.value] = header.sort diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap index 47d12ae99088..9ba3e7481bf9 100644 --- a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap +++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap @@ -5375,19 +5375,19 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
- {"item":{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%"},"isSelected":false,"isExpanded":false,"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"}],"index":0} + {"item":{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%"},"isSelected":false,"isExpanded":false,"isMobile":false,"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"}],"index":0}
- {"item":{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%"},"isSelected":false,"isExpanded":false,"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"}],"index":1} + {"item":{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%"},"isSelected":false,"isExpanded":false,"isMobile":false,"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"}],"index":1}
- {"item":{"name":"Eclair","calories":262,"fat":16,"carbs":23,"protein":6,"iron":"7%"},"isSelected":false,"isExpanded":false,"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"}],"index":2} + {"item":{"name":"Eclair","calories":262,"fat":16,"carbs":23,"protein":6,"iron":"7%"},"isSelected":false,"isExpanded":false,"isMobile":false,"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"}],"index":2}
- {"item":{"name":"Cupcake","calories":305,"fat":3.7,"carbs":67,"protein":4.3,"iron":"8%"},"isSelected":false,"isExpanded":false,"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"}],"index":3} + {"item":{"name":"Cupcake","calories":305,"fat":3.7,"carbs":67,"protein":4.3,"iron":"8%"},"isSelected":false,"isExpanded":false,"isMobile":false,"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"}],"index":3}
- {"item":{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"},"isSelected":false,"isExpanded":false,"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"}],"index":4} + {"item":{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"},"isSelected":false,"isExpanded":false,"isMobile":false,"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"}],"index":4}