@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha28

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

@@ -39,7 +39,7 @@ describe('VEditDialog.ts', () => {
 
   it('should render custom button texts', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         cancelText: `I don't want to modify that!`,
         saveText: 'Save it!',
       },
@@ -55,9 +55,9 @@ describe('VEditDialog.ts', () => {
     const close = jest.fn()
 
     const wrapper = mountFunction({
-      listeners: {
-        open,
-        close,
+      props: {
+        onOpen: open,
+        onClose: close,
       },
     })
 
@@ -78,13 +78,13 @@ describe('VEditDialog.ts', () => {
     const close = jest.fn()
 
     const wrapper = mountFunction({
-      listeners: {
-        open,
-        close,
+      props: {
+        onOpen: open,
+        onClose: close,
       },
     })
 
-    const menu = wrapper.find(VMenu)
+    const menu = wrapper.findComponent(VMenu)
 
     menu.vm.$emit('input', true)
     await wrapper.vm.$nextTick()
@@ -100,8 +100,8 @@ describe('VEditDialog.ts', () => {
 
     const parentWrapper = mount({
       template: `
-        <v-edit-dialog :return-value.sync="val">
-          <template v-slot:input>
+        <v-edit-dialog v-model:return-value="val">
+          <template #input>
             <input v-model="val" class="test"/>
           </template>
         </v-edit-dialog>
@@ -115,30 +115,34 @@ describe('VEditDialog.ts', () => {
       },
       data () {
         return {
-          val: '',
+          val: 'test',
         }
       },
     })
 
-    const wrapper = parentWrapper.find(VEditDialog)
+    const wrapper = parentWrapper.findComponent(VEditDialog)
     const field = parentWrapper.find('input.test')
     const input = wrapper.vm.$refs.content as HTMLElement
 
     // Make sure originalValue gets set
     wrapper.vm.isActive = true
     field.setValue('test')
+    // Update the parent component's val to match the input value
+    parentWrapper.vm.val = 'test'
     input.dispatchEvent(new KeyboardEvent('keydown', { keyCode: keyCodes.esc } as KeyboardEventInit))
     expect(wrapper.emitted('cancel')).toBeTruthy()
-    expect(wrapper.emitted('update:return-value')[0]).toEqual([''])
-    expect(wrapper.props('returnValue')).toBe('')
+    expect(wrapper.emitted('update:return-value')?.[0]).toEqual(['test'])
+    expect(wrapper.props('returnValue')).toBe('test')
 
     wrapper.vm.isActive = true
     field.setValue('test')
+    // Update the parent component's val to match the input value
+    parentWrapper.vm.val = 'test'
     input.dispatchEvent(new KeyboardEvent('keydown', { keyCode: keyCodes.enter } as KeyboardEventInit))
     expect(wrapper.emitted('save')).toBeTruthy()
     expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function))
     jest.advanceTimersByTime(0)
-    expect(wrapper.emitted('update:return-value')[1]).toEqual(['test'])
+    expect(wrapper.emitted('update:return-value')?.[1]).toEqual(['test'])
     expect(wrapper.props('returnValue')).toBe('test')
 
     jest.useRealTimers()
@@ -182,17 +186,17 @@ describe('VEditDialog.ts', () => {
     const saveEvent = jest.fn()
 
     const wrapper = mountFunction({
-      methods: {
-        save,
-      },
       render () {
         return this.genActions()
       },
-      listeners: {
-        save: saveEvent,
+      props: {
+        onSave: saveEvent,
       },
     })
 
+    // Mock the save method
+    wrapper.vm.save = save
+
     expect(wrapper.html()).toMatchSnapshot()
 
     const btn = wrapper.find('.v-btn:last-child')
@@ -204,8 +208,8 @@ describe('VEditDialog.ts', () => {
   it('should cancel', () => {
     const cancel = jest.fn()
     const wrapper = mountFunction({
-      listeners: {
-        cancel,
+      props: {
+        onCancel: cancel,
       },
       data: () => ({
         isActive: true,

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

@@ -1,26 +1,37 @@
 import VSimpleTable from '../VSimpleTable'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VSimpleTable.ts', () => {
   type Instance = InstanceType<typeof VSimpleTable>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VSimpleTable, options)
+    mountFunction = (options = {}) => {
+      return mount(VSimpleTable, {
+        global: {
+          config: {
+            warnHandler: () => {}, // Подавляем предупреждения Vue
+          },
+        },
+        ...options,
+      })
     }
   })
 
   it('should render', () => {
     const wrapper = mountFunction({
       slots: {
-        default: `
-          <tr><th>Foo</th><th>Bar</th></tr>
-          <tr><td>baz</td><td>qux</td></tr>
-        `,
+        default: () => [
+          h('tr', [h('th', 'Foo'), h('th', 'Bar')]),
+          h('tr', [h('td', 'baz'), h('td', 'qux')]),
+        ],
       },
     })
 
@@ -32,23 +43,43 @@ describe('VSimpleTable.ts', () => {
   it('should render with custom wrapper', () => {
     const wrapper = mountFunction({
       slots: {
-        wrapper: `
-          <table>
-            <tr><th>Foo</th><th>Bar</th></tr>
-            <tr><td>baz</td><td>qux</td></tr>
-          </table>
-        `,
+        default: () => [
+          h('tr', [h('th', 'Foo'), h('th', 'Bar')]),
+          h('tr', [h('td', 'baz'), h('td', 'qux')]),
+        ],
+        wrapper: () => h('div', {
+          class: 'custom-wrapper',
+          'data-test': 'custom-wrapper'
+        }, [
+          h('table', { class: 'custom-table' }, [
+            h('tr', [h('th', 'Custom Header 1'), h('th', 'Custom Header 2')]),
+            h('tr', [h('td', 'Custom Data 1'), h('td', 'Custom Data 2')]),
+          ])
+        ])
       },
     })
 
+
+    // Проверяем, что дефолтный wrapper не используется
+    expect(wrapper.findAll('.v-data-table__wrapper')).toHaveLength(0)
+
+    // Проверяем, что кастомный wrapper присутствует
+    expect(wrapper.findAll('[data-test="custom-wrapper"]')).toHaveLength(1)
+    expect(wrapper.findAll('.custom-wrapper')).toHaveLength(1)
+    expect(wrapper.findAll('.custom-table')).toHaveLength(1)
+
+    // Проверяем содержимое кастомного wrapper
+    expect(wrapper.find('.custom-wrapper').text()).toContain('Custom Header 1')
+    expect(wrapper.find('.custom-wrapper').text()).toContain('Custom Data 1')
+
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render with top & bottom slots', () => {
     const wrapper = mountFunction({
       slots: {
-        top: '<div class="top">Header</div>',
-        bottom: '<div class="bottom">Footer</div>',
+        top: () => h('div', { class: 'top' }, 'Header'),
+        bottom: () => h('div', { class: 'bottom' }, 'Footer'),
       },
     })
 
@@ -60,12 +91,12 @@ describe('VSimpleTable.ts', () => {
   it('should render with custom height', () => {
     const wrapper = mountFunction({
       slots: {
-        default: `
-          <tr><th>Foo</th><th>Bar</th></tr>
-          <tr><td>baz</td><td>qux</td></tr>
-        `,
+        default: () => [
+          h('tr', [h('th', 'Foo'), h('th', 'Bar')]),
+          h('tr', [h('td', 'baz'), h('td', 'qux')]),
+        ],
       },
-      propsData: {
+      props: {
         height: 1000,
       },
     })
@@ -73,29 +104,29 @@ describe('VSimpleTable.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should compute classes', () => {
+  it('should compute classes', async () => {
     const wrapper = mountFunction()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       dense: true,
     })
     expect(wrapper.vm.classes).toMatchObject({
       'v-data-table--dense': true,
     })
-    wrapper.setProps({
+    await wrapper.setProps({
       dark: true,
     })
     expect(wrapper.vm.classes).toMatchObject({
       'theme--dark': true,
       'theme--light': false,
     })
-    wrapper.setProps({
+    await wrapper.setProps({
       fixedHeader: true,
     })
     expect(wrapper.vm.classes).toMatchObject({
       'v-data-table--fixed-header': true,
     })
-    wrapper.setProps({
+    await wrapper.setProps({
       fixedHeader: false,
       height: 1000,
     })
@@ -107,8 +138,8 @@ describe('VSimpleTable.ts', () => {
   it('should compute classes with top & bottom slots', () => {
     const wrapper = mountFunction({
       slots: {
-        top: '<div class="top">Header</div>',
-        bottom: '<div class="bottom">Footer</div>',
+        top: () => h('div', { class: 'top' }, 'Header'),
+        bottom: () => h('div', { class: 'bottom' }, 'Footer'),
       },
     })
 

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

@@ -1,29 +1,27 @@
 import VVirtualTable from '../VVirtualTable'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
-import Vue from 'vue'
+import { h } from 'vue'
 
 describe('VVirtualTable.ts', () => {
   type Instance = InstanceType<typeof VVirtualTable>
-  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(VVirtualTable, options)
     }
   })
 
   it('should render', () => {
-    const vm = new Vue()
-
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['a', 'b', 'c'],
       },
-      scopedSlots: {
-        items: props => vm.$createElement('div', { class: 'test' }, [JSON.stringify(props)]),
+      slots: {
+        items: (props: any) => h('div', { class: 'test' }, [JSON.stringify(props)]),
       },
     })
 
@@ -32,19 +30,19 @@ describe('VVirtualTable.ts', () => {
 
   it('should re-render when items change', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['a', 'b', 'c'],
       },
-      scopedSlots: {
-        items (props) {
-          return h('div', props.items.map(i => h('div', [i])))
+      slots: {
+        items (props: any) {
+          return h('div', props.items.map((i: any) => h('div', [i])))
         },
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       items: ['d', 'e', 'f'],
     })
 

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

@@ -35,6 +35,36 @@ exports[`Table Row should render with cellClass 1`] = `
 </tr>
 `;
 
+exports[`Table Row should render with regular slots 1`] = `
+<tr>
+  <td class="text-start">
+    <p class="test">
+      $0.68
+    </p>
+  </td>
+  <td class="text-start">
+    <p class="test">
+      $0.65
+    </p>
+  </td>
+</tr>
+`;
+
+exports[`Table Row should render with scoped slots 1`] = `
+<tr>
+  <td class="text-start">
+    <p class="test petrol">
+      0.68
+    </p>
+  </td>
+  <td class="text-start">
+    <p class="test diesel">
+      0.65
+    </p>
+  </td>
+</tr>
+`;
+
 exports[`Table Row should render without slots 1`] = `
 <tr>
   <td class="text-start">

package/src/components/VDataTable/__tests__/__snapshots__/VEditDialog.spec.ts.snap

@@ -1,8 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VEditDialog.ts should render 1`] = `
-<div class="v-menu v-small-dialog theme--light">
-  <div class="v-small-dialog__activator">
+<div class="v-menu v-small-dialog theme--light"
+     value="false"
+>
+  <div class="v-small-dialog__activator"
+       keydown="function () { [native code] }"
+  >
     <span class="v-small-dialog__activator__content">
     </span>
   </div>
@@ -11,15 +15,15 @@ exports[`VEditDialog.ts should render 1`] = `
 
 exports[`VEditDialog.ts should render actions 1`] = `
 <div class="v-small-dialog__actions">
-  <button type="button"
-          class="v-btn v-btn--text theme--light v-size--default primary--text"
+  <button class="v-btn v-btn--text theme--light v-size--default primary--text"
+          type="button"
   >
     <span class="v-btn__content">
       Cancel
     </span>
   </button>
-  <button type="button"
-          class="v-btn v-btn--text theme--light v-size--default primary--text"
+  <button class="v-btn v-btn--text theme--light v-size--default primary--text"
+          type="button"
   >
     <span class="v-btn__content">
       Save
@@ -29,8 +33,8 @@ exports[`VEditDialog.ts should render actions 1`] = `
 `;
 
 exports[`VEditDialog.ts should render button 1`] = `
-<button type="button"
-        class="v-btn v-btn--text theme--light v-size--default primary--text"
+<button class="v-btn v-btn--text theme--light v-size--default primary--text"
+        type="button"
 >
   <span class="v-btn__content">
     test
@@ -39,8 +43,12 @@ exports[`VEditDialog.ts should render button 1`] = `
 `;
 
 exports[`VEditDialog.ts should render custom button texts 1`] = `
-<div class="v-menu v-small-dialog theme--light">
-  <div class="v-small-dialog__activator">
+<div class="v-menu v-small-dialog theme--light"
+     value="false"
+>
+  <div class="v-small-dialog__activator"
+       keydown="function () { [native code] }"
+  >
     <span class="v-small-dialog__activator__content">
     </span>
   </div>

package/src/components/VDataTable/mixins/__tests__/__snapshots__/header.spec.ts.snap

@@ -74,7 +74,7 @@ exports[`VDataTable/header.ts should generate select scoped slot 3`] = `
 
 exports[`VDataTable/header.ts should generate sort icon 1`] = `
 <i aria-hidden="true"
-   class="v-icon notranslate v-data-table-header__icon mdi mdi-sort theme--light"
+   class="v-icon notranslate mdi mdi-sort theme--light v-data-table-header__icon"
    style="font-size: 18px;"
 >
 </i>

package/src/components/VDataTable/mixins/header.ts

@@ -15,10 +15,6 @@ interface HeaderOptions {
 }
 
 export default mixins<HeaderOptions>().extend({
-  // https://github.com/vuejs/vue/issues/6872
-  directives: {
-    ripple,
-  },
 
   props: {
     headers: {

package/src/components/VDatePicker/VDatePicker.ts

@@ -388,11 +388,8 @@ export default mixins(
         selectingYear: this.internalActivePicker === 'YEAR',
         year: this.formatters.year(this.multipleValue.length ? `${this.inputYear}` : this.tableDate),
         yearIcon: this.yearIcon,
-        value: this.multipleValue[0],
-        slot: 'title',
-        on: {
-          'update:selecting-year': (value: boolean) => this.internalActivePicker = value ? 'YEAR' : this.type.toUpperCase(),
-        },
+        modelValue: this.multipleValue[0],
+        onUpdateSelectingYear: (value: boolean) => this.internalActivePicker = value ? 'YEAR' : this.type.toUpperCase(),
       })
     },
     genTableHeader (): VNode {
@@ -410,9 +407,9 @@ export default mixins(
         prevAriaLabel: this.internalActivePicker === 'DATE' ? this.prevMonthAriaLabel : this.prevYearAriaLabel,
         prevIcon: this.prevIcon,
         readonly: this.readonly,
-        value: this.internalActivePicker === 'DATE' ? `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}` : `${pad(this.tableYear, 4)}`,
+        modelValue: this.internalActivePicker === 'DATE' ? `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}` : `${pad(this.tableYear, 4)}`,
         onToggle: () => this.internalActivePicker = (this.internalActivePicker === 'DATE' ? 'MONTH' : 'YEAR'),
-        onInput: (value: string) => this.tableDate = value,
+        'onUpdate:modelValue': (value: string) => this.tableDate = value,
       })
     },
     genDateTable (): VNode {
@@ -437,12 +434,12 @@ export default mixins(
         showAdjacentMonths: this.showAdjacentMonths,
         showWeek: this.showWeek,
         tableDate: `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}`,
-        value: this.modelValue,
+        modelValue: this.modelValue,
         weekdayFormat: this.weekdayFormat,
         ref: 'table',
-        onInput: this.dateClick,
+        'onUpdate:modelValue': this.dateClick,
         'onUpdate:table-date': (value: string) => this.tableDate = value,
-        ...createItemTypeListeners(this, ':date')
+        ...createItemTypeListeners(this, ':date'),
       })
     },
     genMonthTable (): VNode {
@@ -462,12 +459,12 @@ export default mixins(
         range: this.range,
         readonly: this.readonly && this.type === 'month',
         scrollable: this.scrollable,
-        value: this.selectedMonths,
+        modelValue: this.selectedMonths,
         tableDate: `${pad(this.tableYear, 4)}`,
         ref: 'table',
-        onInput: this.monthClick,
+        'onUpdate:modelValue': this.monthClick,
         'onUpdate:table-date': (value: string) => this.tableDate = value,
-        ...createItemTypeListeners(this, ':month')
+        ...createItemTypeListeners(this, ':month'),
       })
     },
     genYears (): VNode {
@@ -477,11 +474,9 @@ export default mixins(
         locale: this.locale,
         min: this.minYear,
         max: this.maxYear,
-        value: this.tableYear,
-        on: {
-          input: this.yearClick,
-          ...createItemTypeListeners(this, ':year'),
-        },
+        modelValue: this.tableYear,
+        'onUpdate:modelValue': this.yearClick,
+        ...createItemTypeListeners(this, ':year'),
       })
     },
     genPickerBody (): VNode {