@dimailn/vuetify 2.7.2-alpha31 → 2.7.2-alpha33

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

@@ -22,8 +22,8 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
       <span>
         Calories
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -38,8 +38,8 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
       <span>
         Fat (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -53,8 +53,8 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
       <span>
         Carbs (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -68,8 +68,8 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
       <span>
         Protein (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -83,8 +83,8 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
       <span>
         Iron (%)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -115,8 +115,8 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
       <span>
         Calories
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -131,8 +131,8 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
       <span>
         Fat (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -146,8 +146,8 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
       <span>
         Carbs (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -161,8 +161,8 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
       <span>
         Protein (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -176,8 +176,8 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
       <span>
         Iron (%)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -214,8 +214,8 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
       <span>
         Calories
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -233,8 +233,8 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
       <span>
         Fat (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -251,8 +251,8 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
       <span>
         Carbs (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -269,8 +269,8 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
       <span>
         Protein (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -287,8 +287,8 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
       <span>
         Iron (%)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -322,8 +322,8 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
       <span>
         Calories
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -338,8 +338,8 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
       <span>
         Fat (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -353,8 +353,8 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
       <span>
         Carbs (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -368,8 +368,8 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
       <span>
         Protein (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -383,8 +383,8 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
       <span>
         Iron (%)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -415,8 +415,8 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
       <span>
         Calories
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -431,8 +431,8 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
       <span>
         Fat (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -446,8 +446,8 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
       <span>
         Carbs (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -461,8 +461,8 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
       <span>
         Protein (g)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -476,8 +476,8 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
       <span>
         Iron (%)
       </span>
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+      <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+         aria-hidden="true"
          style="font-size: 18px;"
       >
       </i>
@@ -517,8 +517,8 @@ exports[`VDataTableHeader.ts mobile should render 1`] = `
                 </div>
                 <div class="v-input__append-inner">
                   <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon notranslate material-icons theme--light"
+                    <i class="v-icon notranslate theme--light material-icons"
+                       aria-hidden="true"
                     >
                     </i>
                   </div>
@@ -544,8 +544,8 @@ exports[`VDataTableHeader.ts mobile should render with data-table-select header
         <div class="v-data-table-header-mobile__select">
           <div class="v-simple-checkbox v-data-table__checkbox v-data-table__checkbox">
             <div class="v-input--selection-controls__input">
-              <i aria-hidden="true"
-                 class="v-icon notranslate material-icons theme--light"
+              <i class="v-icon notranslate theme--light material-icons"
+                 aria-hidden="true"
               >
               </i>
               <div class="v-input--selection-controls__ripple">
@@ -579,8 +579,8 @@ exports[`VDataTableHeader.ts mobile should render with data-table-select header
                 </div>
                 <div class="v-input__append-inner">
                   <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon notranslate material-icons theme--light"
+                    <i class="v-icon notranslate theme--light material-icons"
+                       aria-hidden="true"
                     >
                     </i>
                   </div>
@@ -624,8 +624,8 @@ exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = `
                     <span class="v-chip__content">
                       Iron (%)
                       <div class="v-chip__close sortable active desc">
-                        <i aria-hidden="true"
-                           class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+                        <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+                           aria-hidden="true"
                            style="font-size: 18px;"
                         >
                         </i>
@@ -641,8 +641,8 @@ exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = `
                 </div>
                 <div class="v-input__append-inner">
                   <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon notranslate material-icons theme--light"
+                    <i class="v-icon notranslate theme--light material-icons"
+                       aria-hidden="true"
                     >
                     </i>
                   </div>
@@ -693,8 +693,8 @@ exports[`VDataTableHeader.ts mobile should work with showGroupBy 1`] = `
                 </div>
                 <div class="v-input__append-inner">
                   <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon notranslate material-icons theme--light"
+                    <i class="v-icon notranslate theme--light material-icons"
+                       aria-hidden="true"
                     >
                     </i>
                   </div>
@@ -738,8 +738,8 @@ exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = `
                     <span class="v-chip__content">
                       Iron (%)
                       <div class="v-chip__close sortable active desc">
-                        <i aria-hidden="true"
-                           class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+                        <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+                           aria-hidden="true"
                            style="font-size: 18px;"
                         >
                         </i>
@@ -755,8 +755,8 @@ exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = `
                 </div>
                 <div class="v-input__append-inner">
                   <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon notranslate material-icons theme--light"
+                    <i class="v-icon notranslate theme--light material-icons"
+                       aria-hidden="true"
                     >
                     </i>
                   </div>
@@ -802,8 +802,8 @@ exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = `
                     <span class="v-chip__content">
                       Iron (%)
                       <div class="v-chip__close sortable active asc">
-                        <i aria-hidden="true"
-                           class="v-icon notranslate material-icons theme--light v-data-table-header__icon"
+                        <i class="v-icon notranslate theme--light material-icons v-data-table-header__icon"
+                           aria-hidden="true"
                            style="font-size: 18px;"
                         >
                         </i>
@@ -819,8 +819,8 @@ exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = `
                 </div>
                 <div class="v-input__append-inner">
                   <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon notranslate material-icons theme--light"
+                    <i class="v-icon notranslate theme--light material-icons"
+                       aria-hidden="true"
                     >
                     </i>
                   </div>

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

@@ -4,8 +4,8 @@ exports[`VDataTable/header.ts should generate select 1`] = `
 <div>
   <div class="v-simple-checkbox v-data-table__checkbox v-data-table__checkbox">
     <div class="v-input--selection-controls__input">
-      <i aria-hidden="true"
-         class="v-icon notranslate mdi mdi-checkbox-blank-outline theme--light"
+      <i class="v-icon notranslate theme--light mdi mdi-checkbox-blank-outline"
+         aria-hidden="true"
       >
       </i>
       <div class="v-input--selection-controls__ripple">
@@ -19,8 +19,8 @@ exports[`VDataTable/header.ts should generate select 2`] = `
 <div>
   <div class="v-simple-checkbox v-data-table__checkbox v-data-table__checkbox">
     <div class="v-input--selection-controls__input">
-      <i aria-hidden="true"
-         class="v-icon notranslate mdi mdi-checkbox-blank-outline theme--light"
+      <i class="v-icon notranslate theme--light mdi mdi-checkbox-blank-outline"
+         aria-hidden="true"
       >
       </i>
       <div class="v-input--selection-controls__ripple">
@@ -34,8 +34,8 @@ exports[`VDataTable/header.ts should generate select 3`] = `
 <div>
   <div class="v-simple-checkbox v-data-table__checkbox v-data-table__checkbox">
     <div class="v-input--selection-controls__input">
-      <i aria-hidden="true"
-         class="v-icon notranslate mdi mdi-checkbox-blank-outline theme--light"
+      <i class="v-icon notranslate theme--light mdi mdi-checkbox-blank-outline"
+         aria-hidden="true"
       >
       </i>
       <div class="v-input--selection-controls__ripple">
@@ -70,8 +70,8 @@ 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 mdi mdi-sort theme--light v-data-table-header__icon"
+<i class="v-icon notranslate theme--light mdi mdi-sort v-data-table-header__icon"
+   aria-hidden="true"
    style="font-size: 18px;"
 >
 </i>

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

@@ -1,7 +1,7 @@
 import Header from '../header'
 import {
   mount,
-  MountOptions,
+  MountingOptions,
   VueWrapper,
   enableAutoUnmount,
 } from '@vue/test-utils'
@@ -10,12 +10,12 @@ import { wrapInArray } from '../../../../util/helpers'
 
 describe('VDataTable/header.ts', () => {
   type Instance = InstanceType<typeof Header>
-  let mountFunction: (options?: MountOptions<Instance>) => VueWrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
 
   enableAutoUnmount(afterEach)
 
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(Header, {
         props: {
           headers: [],

package/src/components/VDatePicker/VDatePicker.ts

@@ -134,6 +134,13 @@ export default mixins(
     yearIcon: String,
   },
 
+  emits: [
+    'update:modelValue',
+    'change',
+    'update:active-picker',
+    'update:picker-date',
+  ],
+
   data () {
     const now = new Date()
     return {
@@ -272,7 +279,7 @@ export default mixins(
         this.tableDate = sanitizeDateString(this.lastValue, 'year')
       }
     },
-    value (newValue: DatePickerValue, oldValue: DatePickerValue) {
+    modelValue (newValue: DatePickerValue, oldValue: DatePickerValue) {
       this.checkMultipleProp()
       this.setInputDate()
 
@@ -315,6 +322,14 @@ export default mixins(
   },
 
   methods: {
+    save () {
+      // Метод для совместимости с Picker mixin
+      // В VDatePicker нет необходимости в отдельном сохранении
+    },
+    cancel () {
+      // Метод для совместимости с Picker mixin
+      // В VDatePicker нет необходимости в отдельной отмене
+    },
     emitInput (newInput: string) {
       if (this.range) {
         if (this.multipleValue.length !== 1) {
@@ -391,15 +406,16 @@ export default mixins(
       this.emitInput(this.inputDate)
     },
     genPickerTitle (): VNode {
+      const dateValue = this.modelValue ? (this.formatters.titleDate as (value: any) => string)(this.isMultiple ? this.multipleValue : this.modelValue) : ''
       return h(VDatePickerTitle, {
-        date: this.modelValue ? (this.formatters.titleDate as (value: any) => string)(this.isMultiple ? this.multipleValue : this.modelValue) : '',
+        date: dateValue,
         disabled: this.disabled,
         readonly: this.readonly,
         selectingYear: this.internalActivePicker === 'YEAR',
         year: this.formatters.year(this.multipleValue.length ? `${this.inputYear}` : this.tableDate),
         yearIcon: this.yearIcon,
-        modelValue: this.multipleValue[0],
-        onUpdateSelectingYear: (value: boolean) => this.internalActivePicker = value ? 'YEAR' : this.type.toUpperCase(),
+        modelValue: this.multipleValue.length ? this.multipleValue[0] : undefined,
+        'onUpdate:selecting-year': (value: boolean) => this.internalActivePicker = value ? 'YEAR' : this.type.toUpperCase(),
       })
     },
     genTableHeader (): VNode {
@@ -449,7 +465,7 @@ export default mixins(
         ref: 'table',
         'onUpdate:modelValue': this.dateClick,
         'onUpdate:table-date': (value: string) => this.tableDate = value,
-        ...createItemTypeListeners(this, ':date'),
+        ...createItemTypeListeners(this, 'Date'),
       })
     },
     genMonthTable (): VNode {
@@ -474,7 +490,7 @@ export default mixins(
         ref: 'table',
         'onUpdate:modelValue': this.monthClick,
         'onUpdate:table-date': (value: string) => this.tableDate = value,
-        ...createItemTypeListeners(this, ':month'),
+        ...createItemTypeListeners(this, 'Month'),
       })
     },
     genYears (): VNode {
@@ -486,7 +502,7 @@ export default mixins(
         max: this.maxYear,
         modelValue: this.tableYear,
         'onUpdate:modelValue': this.yearClick,
-        ...createItemTypeListeners(this, ':year'),
+        ...createItemTypeListeners(this, 'Year'),
       })
     },
     genPickerBody (): VNode {

package/src/components/VDatePicker/VDatePickerTitle.ts

@@ -52,6 +52,12 @@ export default mixins(
     },
   },
 
+  watch: {
+    modelValue (val: string, prev: string) {
+      this.isReversing = val < prev
+    },
+  },
+
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
@@ -63,12 +69,6 @@ export default mixins(
     })
   },
 
-  watch: {
-    modelValue (val: string, prev: string) {
-      this.isReversing = val < prev
-    },
-  },
-
   methods: {
     genYearIcon (): VNode {
       return h(VIcon, {
@@ -76,23 +76,35 @@ export default mixins(
       }, () => this.yearIcon)
     },
     getYearBtn (): VNode {
+      const yearText = h('span', {
+        key: this.year,
+      }, String(this.year))
+
+      const yearTransition = h(Transition, {
+        name: this.computedTransition,
+      }, {
+        default: () => [yearText],
+      })
+
       return this.genPickerButton('selectingYear', true, [
-        String(this.year),
+        yearTransition,
         this.yearIcon ? this.genYearIcon() : null,
       ], false, 'v-date-picker-title__year')
     },
     genTitleText (): VNode {
-      return h(Transition, {
-        name: this.computedTransition,
-      }, () => [
-        h('div', {
-          innerHTML: this.date || '&nbsp;',
-          key: this.modelValue,
-        }),
-      ])
+      return h('div', {
+        key: this.date,
+      }, this.date || '\u00A0')
     },
     genTitleDate (): VNode {
-      return this.genPickerButton('selectingYear', false, [this.genTitleText()], false, 'v-date-picker-title__date')
+      const titleText = this.genTitleText()
+      const transition = h(Transition, {
+        name: this.computedTransition,
+      }, {
+        default: () => [titleText],
+      })
+
+      return this.genPickerButton('selectingYear', false, [transition], false, 'v-date-picker-title__date')
     },
   },