@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha32

package/src/components/VDataTable/VDataTableHeaderMobile.ts

@@ -1,5 +1,4 @@
-import {h} from 'vue'
-import { VNode, VNodeChildrenArrayContents } from 'vue'
+import { h, VNode, VNodeChildrenArrayContents } from 'vue'
 import mixins from '../../util/mixins'
 import VSelect from '../VSelect/VSelect'
 import VChip from '../VChip'
@@ -14,8 +13,11 @@ export default mixins(header).extend({
       type: String,
       default: '$vuetify.dataTable.sortBy',
     },
+    mobile: Boolean,
   },
 
+  emits: ['sort'],
+
   methods: {
     genSortChip (props: any) {
       const children: VNodeChildrenArrayContents = [props.item.text]
@@ -25,8 +27,8 @@ export default mixins(header).extend({
       const isDesc = this.options.sortDesc[sortIndex]
 
       children.push(h('div', {
-        class: 'v-chip__close',
         class: {
+          'v-chip__close': true,
           sortable: true,
           active: beingSorted,
           asc: beingSorted && !isDesc,
@@ -36,30 +38,23 @@ export default mixins(header).extend({
 
       return h(VChip, {
         class: 'sortable',
-        on: {
-          click: (e: MouseEvent) => {
-            e.stopPropagation()
-            this.$emit('sort', props.item.value)
-          },
+        onClick: (e: MouseEvent) => {
+          e.stopPropagation()
+          this.$emit('sort', props.item.value)
         },
       }, children)
     },
     genSortSelect (items: any[]) {
       return h(VSelect, {
-        props: {
-          label: this.$vuetify.lang.t(this.sortByText),
-          items,
-          hideDetails: true,
-          multiple: this.options.multiSort,
-          value: this.options.multiSort ? this.options.sortBy : this.options.sortBy[0],
-          menuProps: { closeOnContentClick: true },
-        },
-        on: {
-          change: (v: string | string[]) => this.$emit('sort', v),
-        },
-        scopedSlots: {
-          selection: props => this.genSortChip(props),
-        },
+        label: this.$vuetify.lang.t(this.sortByText),
+        items,
+        hideDetails: true,
+        multiple: this.options.multiSort,
+        modelValue: this.options.multiSort ? this.options.sortBy : this.options.sortBy[0],
+        menuProps: { closeOnContentClick: true },
+        'onUpdate:modelValue': (v: string | string[]) => this.$emit('sort', v),
+      }, {
+        selection: (props: any) => this.genSortChip(props),
       })
     },
   },
@@ -74,9 +69,7 @@ export default mixins(header).extend({
           'v-data-table-header-mobile__select',
           ...wrapInArray(header.class),
         ],
-        attrs: {
-          width: header.width,
-        },
+        width: header.width,
       }, [this.genSelectAll()]))
     }
 

package/src/components/VDataTable/VEditDialog.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Styles
 import './VEditDialog.sass'
 
@@ -37,9 +37,11 @@ export default mixins(Returnable, Themeable).extend({
     },
   },
 
+  emits: ['update:return-value', 'open', 'close', 'cancel', 'save'],
+
   data () {
     return {
-      isActive: false,
+      // isActive is provided by Returnable mixin
     }
   },
 
@@ -69,7 +71,7 @@ export default mixins(Returnable, Themeable).extend({
         color: 'primary',
         light: true,
         onClick: fn,
-      }, text)
+      }, () => text)
     },
     genActions (): VNode {
       return h('div', {
@@ -92,7 +94,7 @@ export default mixins(Returnable, Themeable).extend({
             this.$emit('save')
           }
         },
-        ref: 'content'
+        ref: 'content',
       }, getSlot(this, 'input'))
     },
   },
@@ -104,28 +106,28 @@ export default mixins(Returnable, Themeable).extend({
       transition: this.transition,
       origin: 'top right',
       right: true,
-      value: this.isActive,
+      modelValue: this.isActive,
       closeOnClick: !this.persistent,
       closeOnContentClick: false,
       eager: this.eager,
       light: this.light,
       dark: this.dark,
-      onInput: (val: boolean) => (this.isActive = val),
-      scopedSlots: {
-        activator: ({ on }) => {
-          return h('div', {
-            class: 'v-small-dialog__activator',
-            on,
-          }, [
-            h('span', {
-              class: 'v-small-dialog__activator__content',
-            }, getSlot(this)),
-          ])
-        },
+      'onUpdate:modelValue': (val: boolean) => (this.isActive = val),
+    }, {
+      activator: ({ on }: { on: any }) => {
+        return h('div', {
+          class: 'v-small-dialog__activator',
+          ...on,
+        }, [
+          h('span', {
+            class: 'v-small-dialog__activator__content',
+          }, getSlot(this)),
+        ])
       },
-    }, [
-      this.genContent(),
-      this.large ? this.genActions() : null,
-    ])
+      default: () => [
+        this.genContent(),
+        this.large ? this.genActions() : null,
+      ],
+    })
   },
 })

package/src/components/VDataTable/VSimpleTable.ts

@@ -1,10 +1,9 @@
-import {h} from 'vue'
+import { h, VNode } from 'vue'
 import './VSimpleTable.sass'
 
 import { convertToUnit, getSlot } from '../../util/helpers'
 import Themeable from '../../mixins/themeable'
 import mixins from '../../util/mixins'
-import { VNode } from 'vue'
 
 export default mixins(Themeable).extend({
   name: 'v-simple-table',
@@ -30,7 +29,7 @@ export default mixins(Themeable).extend({
 
   methods: {
     genWrapper () {
-      return this.$slots.wrapper || h('div', {
+      return getSlot(this, 'wrapper') || h('div', {
         class: 'v-data-table__wrapper',
         style: {
           height: convertToUnit(this.height),

package/src/components/VDataTable/VVirtualTable.ts

@@ -98,7 +98,7 @@ export default baseMixins.extend({
     this.$refs.table.addEventListener('scroll', this.scrollDebounce, { passive: true })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.$refs.table.removeEventListener('scroll', this.scrollDebounce)
   },
 
@@ -153,8 +153,7 @@ export default baseMixins.extend({
 
   render (): VNode {
     return h('div', {
-      class: 'v-data-table v-virtual-table',
-      class: this.classes,
+      class: ['v-data-table', 'v-virtual-table', this.classes],
     }, [
       getSlot(this, 'top'),
       this.genWrapper(),

package/src/components/VDataTable/__tests__/MobileRow.spec.ts

@@ -1,32 +1,30 @@
 import MobileRow from '../MobileRow'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
-import Vue from 'vue'
+import { h } from 'vue'
 
 describe('MobileRow', () => {
   type Instance = InstanceType<typeof MobileRow>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(MobileRow, options)
     }
   })
 
   it('should render without slots', () => {
     const wrapper = mountFunction({
-      context: {
-        props: {
-          headers: [
-            { text: 'Petrol', value: 'petrol' },
-            { text: 'Diesel', value: 'diesel' },
-          ],
-          item: {
-            petrol: 0.68,
-            diesel: 0.65,
-          },
+      props: {
+        headers: [
+          { text: 'Petrol', value: 'petrol' },
+          { text: 'Diesel', value: 'diesel' },
+        ],
+        item: {
+          petrol: 0.68,
+          diesel: 0.65,
         },
       },
     })
@@ -38,25 +36,23 @@ describe('MobileRow', () => {
 
   it('should render non-string values', () => {
     const wrapper = mountFunction({
-      context: {
-        props: {
-          headers: [
-            { value: 'string' },
-            { value: 'number' },
-            { value: 'array' },
-            { value: 'boolean' },
-            { value: 'object' },
-            { value: 'undefined' },
-            { value: 'null' },
-          ],
-          item: {
-            string: 'string',
-            number: 12.34,
-            array: [1, 2],
-            boolean: false,
-            object: { foo: 'bar' },
-            null: null,
-          },
+      props: {
+        headers: [
+          { value: 'string' },
+          { value: 'number' },
+          { value: 'array' },
+          { value: 'boolean' },
+          { value: 'object' },
+          { value: 'undefined' },
+          { value: 'null' },
+        ],
+        item: {
+          string: 'string',
+          number: 12.34,
+          array: [1, 2],
+          boolean: false,
+          object: { foo: 'bar' },
+          null: null,
         },
       },
     })
@@ -66,13 +62,11 @@ describe('MobileRow', () => {
 
   it('should render with regular slots', () => {
     const wrapper = mountFunction({
-      context: {
-        props: {
-          headers: [
-            { text: 'Petrol', value: 'petrol' },
-            { text: 'Diesel', value: 'diesel' },
-          ],
-        },
+      props: {
+        headers: [
+          { text: 'Petrol', value: 'petrol' },
+          { text: 'Diesel', value: 'diesel' },
+        ],
       },
       slots: {
         petrol: '<p class="test">$0.68</p>',
@@ -87,23 +81,20 @@ describe('MobileRow', () => {
   })
 
   it('should render with scoped slots', () => {
-    const vm = new Vue()
     const wrapper = mountFunction({
-      context: {
-        props: {
-          headers: [
-            { text: 'Petrol', value: 'petrol' },
-            { text: 'Diesel', value: 'diesel' },
-          ],
-          item: {
-            petrol: 0.68,
-            diesel: 0.65,
-          },
+      props: {
+        headers: [
+          { text: 'Petrol', value: 'petrol' },
+          { text: 'Diesel', value: 'diesel' },
+        ],
+        item: {
+          petrol: 0.68,
+          diesel: 0.65,
         },
       },
-      scopedSlots: {
-        petrol: props => vm.$createElement('p', { class: `test ${props.header.value}` }, [props.value]),
-        diesel: props => vm.$createElement('p', { class: `test ${props.header.value}` }, [props.value]),
+      slots: {
+        petrol: (props: any) => h('p', { class: `test ${props.header.value}` }, [props.value]),
+        diesel: (props: any) => h('p', { class: `test ${props.header.value}` }, [props.value]),
       },
     })
 
@@ -115,17 +106,15 @@ describe('MobileRow', () => {
 
   it('should render without header when hideDefaultHeader: true', () => {
     const wrapper = mountFunction({
-      context: {
-        props: {
-          headers: [
-            { text: 'Petrol', value: 'petrol' },
-            { text: 'Diesel', value: 'diesel' },
-          ],
-          hideDefaultHeader: true,
-          item: {
-            petrol: 0.68,
-            diesel: 0.65,
-          },
+      props: {
+        headers: [
+          { text: 'Petrol', value: 'petrol' },
+          { text: 'Diesel', value: 'diesel' },
+        ],
+        hideDefaultHeader: true,
+        item: {
+          petrol: 0.68,
+          diesel: 0.65,
         },
       },
     })

package/src/components/VDataTable/__tests__/Row.spec.ts

@@ -1,32 +1,32 @@
 import Row from '../Row'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
-import Vue from 'vue'
+import { h } from 'vue'
 
 describe('Table Row', () => {
-  type Instance = InstanceType<typeof Row>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<any>
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: any) => {
       return mount(Row, options)
     }
   })
 
+  enableAutoUnmount(afterEach)
+
   it('should render without slots', () => {
     const wrapper = mountFunction({
-      context: {
-        props: {
-          headers: [
-            { text: 'Petrol', value: 'petrol' },
-            { text: 'Diesel', value: 'diesel' },
-          ],
-          item: {
-            petrol: 0.68,
-            diesel: 0.65,
-          },
+      props: {
+        headers: [
+          { text: 'Petrol', value: 'petrol' },
+          { text: 'Diesel', value: 'diesel' },
+        ],
+        item: {
+          petrol: 0.68,
+          diesel: 0.65,
         },
       },
     })
@@ -38,25 +38,23 @@ describe('Table Row', () => {
 
   it('should render non-string values', () => {
     const wrapper = mountFunction({
-      context: {
-        props: {
-          headers: [
-            { value: 'string' },
-            { value: 'number' },
-            { value: 'array' },
-            { value: 'boolean' },
-            { value: 'object' },
-            { value: 'undefined' },
-            { value: 'null' },
-          ],
-          item: {
-            string: 'string',
-            number: 12.34,
-            array: [1, 2],
-            boolean: false,
-            object: { foo: 'bar' },
-            null: null,
-          },
+      props: {
+        headers: [
+          { text: 'String', value: 'string' },
+          { text: 'Number', value: 'number' },
+          { text: 'Array', value: 'array' },
+          { text: 'Boolean', value: 'boolean' },
+          { text: 'Object', value: 'object' },
+          { text: 'Undefined', value: 'undefined' },
+          { text: 'Null', value: 'null' },
+        ],
+        item: {
+          string: 'string',
+          number: 12.34,
+          array: [1, 2],
+          boolean: false,
+          object: { foo: 'bar' },
+          null: null,
         },
       },
     })
@@ -66,40 +64,36 @@ describe('Table Row', () => {
 
   it('should render with cellClass', () => {
     const wrapper = mountFunction({
-      context: {
-        props: {
-          headers: [
-            { text: 'Petrol', value: 'petrol', cellClass: 'a' },
-            { text: 'Diesel', value: 'diesel', cellClass: ['b', 'c'] },
-          ],
-          item: {
-            petrol: 0.68,
-            diesel: 0.65,
-          },
+      props: {
+        headers: [
+          { text: 'Petrol', value: 'petrol', cellClass: 'a' },
+          { text: 'Diesel', value: 'diesel', cellClass: ['b', 'c'] },
+        ],
+        item: {
+          petrol: 0.68,
+          diesel: 0.65,
         },
       },
     })
 
     const tds = wrapper.findAll('td')
-    expect(tds.at(0).classes()).toContain('a')
-    expect(tds.at(1).classes()).toContain('b')
-    expect(tds.at(1).classes()).toContain('c')
+    expect(tds[0].classes()).toContain('a')
+    expect(tds[1].classes()).toContain('b')
+    expect(tds[1].classes()).toContain('c')
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it.skip('should render with regular slots', () => {
+  it('should render with regular slots', () => {
     const wrapper = mountFunction({
-      context: {
-        props: {
-          headers: [
-            { text: 'Petrol', value: 'petrol' },
-            { text: 'Diesel', value: 'diesel' },
-          ],
-        },
+      props: {
+        headers: [
+          { text: 'Petrol', value: 'petrol' },
+          { text: 'Diesel', value: 'diesel' },
+        ],
       },
       slots: {
-        'column.petrol': '<p class="test">$0.68</p>',
-        'column.diesel': '<p class="test">$0.65</p>',
+        petrol: '<p class="test">$0.68</p>',
+        diesel: '<p class="test">$0.65</p>',
       },
     })
 
@@ -109,24 +103,21 @@ describe('Table Row', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it.skip('should render with scoped slots', () => {
-    const vm = new Vue()
+  it('should render with scoped slots', () => {
     const wrapper = mountFunction({
-      context: {
-        props: {
-          headers: [
-            { text: 'Petrol', value: 'petrol' },
-            { text: 'Diesel', value: 'diesel' },
-          ],
-          item: {
-            petrol: 0.68,
-            diesel: 0.65,
-          },
+      props: {
+        headers: [
+          { text: 'Petrol', value: 'petrol' },
+          { text: 'Diesel', value: 'diesel' },
+        ],
+        item: {
+          petrol: 0.68,
+          diesel: 0.65,
         },
       },
-      scopedSlots: {
-        'column.petrol': props => vm.$createElement('p', { class: `test ${props.header.value}` }, [props.value]),
-        'column.diesel': props => vm.$createElement('p', { class: `test ${props.header.value}` }, [props.value]),
+      slots: {
+        petrol: ({ header, value }: any) => h('p', { class: `test ${header.value}` }, [value]),
+        diesel: ({ header, value }: any) => h('p', { class: `test ${header.value}` }, [value]),
       },
     })
 

package/src/components/VDataTable/__tests__/RowGroup.spec.ts

@@ -1,15 +1,17 @@
 import RowGroup from '../RowGroup'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('Table RowGroup', () => {
-  type Instance = InstanceType<typeof RowGroup>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<any>
+
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: any) => {
       return mount(RowGroup, options)
     }
   })