@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha28

package/src/components/VCalendar/mixins/calendar-with-events.ts

@@ -2,7 +2,7 @@
 import './calendar-with-events.sass'
 
 // Types
-import { VNode, VNodeData, defineComponent } from 'vue'
+import { VNode, VNodeData, defineComponent, h, withDirectives } from 'vue'
 
 // Directives
 import ripple from '../../../directives/ripple'
@@ -75,11 +75,8 @@ const MINUTES_IN_DAY = 1440
 export default defineComponent({
   name: 'calendar-with-events',
 
-  extends: CalendarBase,
 
-  directives: {
-    ripple,
-  },
+  extends: CalendarBase,
 
   props: {
     ...props.events,
@@ -250,22 +247,18 @@ export default defineComponent({
       const scope = { eventParsed: event, day, start, end, timed: false }
 
       return this.genEvent(event, scope, false, {
-        class: 'v-event',
-        class: {
+        class: ['v-event', {
           'v-event-start': start,
           'v-event-end': end,
-        },
+        }],
         style: {
           height: `${eventHeight}px`,
           width: `${width}%`,
           'margin-bottom': `${eventMarginBottom}px`,
         },
-        attrs: {
-          'data-date': day.date,
-        },
+        'data-date': day.date,
         key: event.index,
         ref: 'events',
-        refInFor: true,
       })
     },
     genTimedEvent ({ event, left, width }: CalendarEventVisual, day: CalendarDayBodySlotScope): VNode | false {
@@ -336,20 +329,18 @@ export default defineComponent({
         eventSummary,
       }
 
-      return h('div',
+      return withDirectives(h('div',
         this.setTextColor(text,
           this.setBackgroundColor(background, {
-            on: this.getDefaultMouseEventHandlers(':event', nativeEvent => ({ ...scope, nativeEvent })),
-            directives: [{
-              name: 'ripple',
-              value: this.eventRipple ?? true,
-            }],
+            ...this.getDefaultMouseEventHandlers(':event', nativeEvent => ({ ...scope, nativeEvent })),
             ...data,
           })
         ), slot
           ? slot(scope)
           : [this.genName(eventSummary)]
-      )
+      ), [
+        [ripple, this.eventRipple ?? true],
+      ])
     },
     genName (eventSummary: () => string | VNode): VNode {
       return h('div', {
@@ -363,42 +354,32 @@ export default defineComponent({
         style: {
           height: `${height}px`,
         },
-        attrs: {
-          'data-date': day.date,
-        },
+        'data-date': day.date,
         ref: 'events',
-        refInFor: true,
       })
     },
     genMore (day: CalendarDaySlotScope): VNode {
       const eventHeight = this.eventHeight
       const eventMarginBottom = this.eventMarginBottom
 
-      return h('div', {
-        class: 'v-event-more pl-1',
-        class: {
+      return withDirectives(h('div', {
+        class: ['v-event-more pl-1', {
           'v-outside': day.outside,
-        },
-        attrs: {
-          'data-date': day.date,
-          'data-more': 1,
-        },
-        directives: [{
-          name: 'ripple',
-          value: this.eventRipple ?? true,
         }],
-        on: this.getDefaultMouseEventHandlers(':more', nativeEvent => {
+        'data-date': day.date,
+        'data-more': 1,
+        ...this.getDefaultMouseEventHandlers(':more', nativeEvent => {
           return { nativeEvent, ...day }
         }),
-
         style: {
           display: 'none',
           height: `${eventHeight}px`,
           'margin-bottom': `${eventMarginBottom}px`,
         },
         ref: 'events',
-        refInFor: true,
-      })
+      }), [
+        [ripple, this.eventRipple ?? true],
+      ])
     },
     getVisibleEvents (): CalendarEventParsed[] {
       const start = getDayIdentifier(this.days[0])

package/src/components/VCalendar/mixins/calendar-with-intervals.ts

@@ -1,3 +1,4 @@
+import { defineComponent } from 'vue'
 
 // Mixins
 import CalendarBase from './calendar-base'
@@ -15,7 +16,6 @@ import {
   MINUTES_IN_DAY,
 } from '../util/timestamp'
 import { CalendarTimestamp, CalendarFormatter, CalendarDayBodySlotScope } from 'vuetify/types'
-import { defineComponent } from 'vue'
 
 /* @vue/component */
 export default defineComponent({

package/src/components/VCalendar/mixins/times.ts

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import { defineComponent } from 'vue'
 
 import {
   validateTimestamp,

package/src/components/VCard/__tests__/VCard.spec.ts

@@ -1,21 +1,49 @@
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
 import VCard from '../VCard'
-import { ExtractVue } from '../../../util/mixins'
 
 describe('VCard.vue', () => {
-  type Instance = ExtractVue<typeof VCard>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VCard>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VCard, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      const defaultOptions = {
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              lang: {
+                t: (val: string) => val,
+              },
+              icons: {
+                component: 'mdi',
+              },
+            },
+            $activeClass: 'v-card--active',
+          },
+        },
+        slots: {},
+      }
+
+      // Объединяем опции правильно
+      const mergedOptions = {
+        ...defaultOptions,
         ...options,
-      })
+        slots: {
+          ...defaultOptions.slots,
+          ...options?.slots,
+        },
+        global: {
+          ...defaultOptions.global,
+          ...options?.global,
+        },
+      }
+
+      return mount(VCard, mergedOptions)
     }
   })
 
@@ -27,14 +55,9 @@ describe('VCard.vue', () => {
 
   it('should render loading card', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         loading: true,
       },
-      mocks: {
-        $vuetify: {
-          rtl: false,
-        },
-      },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -42,10 +65,8 @@ describe('VCard.vue', () => {
 
   it('should render card, which is link', () => {
     const wrapper = mountFunction({
-      // https://github.com/vuejs/vue-test-utils/issues/1130
-      sync: false,
-      listeners: {
-        click: () => {},
+      attrs: {
+        onClick: () => {},
       },
     })
 
@@ -54,7 +75,7 @@ describe('VCard.vue', () => {
 
   it('should render card with img', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         img: 'image.jpg',
       },
     })
@@ -64,7 +85,7 @@ describe('VCard.vue', () => {
 
   it('should render a flat card', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         flat: true,
       },
     })
@@ -74,7 +95,7 @@ describe('VCard.vue', () => {
 
   it('should render a raised card', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         raised: true,
       },
     })
@@ -85,9 +106,7 @@ describe('VCard.vue', () => {
   it('should render a card with custom height', async () => {
     const heightpx = '400px'
     const wrapper = mountFunction({
-      // https://github.com/vuejs/vue-test-utils/issues/1130
-      sync: false,
-      propsData: {
+      props: {
         height: heightpx,
       },
     })
@@ -95,10 +114,9 @@ describe('VCard.vue', () => {
     expect(wrapper.element.style.height).toBe(heightpx)
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       height: 401,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.element.style.height).toBe('401px')
   })
 })

package/src/components/VCard/__tests__/__snapshots__/VCard.spec.ts.snap

@@ -37,10 +37,10 @@ exports[`VCard.vue should render component and match snapshot 1`] = `
 exports[`VCard.vue should render loading card 1`] = `
 <div class="v-card v-card--loading v-sheet theme--light">
   <div class="v-card__progress">
-    <div role="progressbar"
+    <div class="v-progress-linear v-progress-linear--absolute v-progress-linear--visible theme--light"
+         role="progressbar"
          aria-valuemin="0"
          aria-valuemax="100"
-         class="v-progress-linear v-progress-linear--absolute v-progress-linear--visible theme--light"
          style="height: 4px;"
     >
       <div class="v-progress-linear__background primary"

package/src/components/VCarousel/VCarousel.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VCarousel.sass'
 
@@ -19,12 +18,19 @@ import { convertToUnit } from '../../util/helpers'
 import { breaking } from '../../util/console'
 
 // Types
-import { VNode, PropType, defineComponent } from 'vue'
+import { h, VNode, PropType, defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'v-carousel',
   extends: VWindow,
 
+  // pass down the parent's theme
+  provide (): object {
+    return {
+      parentTheme: this.theme,
+    }
+  },
+
   props: {
     continuous: {
       type: Boolean,
@@ -62,12 +68,10 @@ export default defineComponent({
     },
   },
 
-  // pass down the parent's theme
-  provide (): object {
-    return {
-      parentTheme: this.theme,
-    }
-  },
+  emits: [
+    'update:modelValue',
+    'change',
+  ],
 
   data () {
     return {
@@ -158,7 +162,7 @@ export default defineComponent({
       }
 
       return h(ButtonGroup, {
-        value: this.internalValue,
+        modelValue: this.internalValue,
         mandatory: this.mandatory,
         onChange: (val: unknown) => {
           this.internalValue = val

package/src/components/VCheckbox/VCheckbox.ts

@@ -8,6 +8,10 @@ import VInput from '../VInput'
 
 // Mixins
 import Selectable from '../../mixins/selectable'
+
+// Utilities
+import { breaking } from '../../util/console'
+
 import { defineComponent, h } from 'vue'
 
 /* @vue/component */
@@ -31,6 +35,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['click', 'focus', 'blur', 'update:indeterminate'],
+
   data () {
     return {
       inputIndeterminate: this.indeterminate,
@@ -81,6 +87,18 @@ export default defineComponent({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['inputValue', 'model-value'],
+      ['input-value', 'model-value'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     genCheckbox () {
       const { title, ...checkboxAttrs } = this.attrs$
@@ -90,7 +108,7 @@ export default defineComponent({
         h(VIcon, this.setTextColor(this.validationState, {
           dense: this.dense,
           dark: this.dark,
-          light: this.light
+          light: this.light,
         }), () => this.computedIcon),
         this.genInput('checkbox', {
           ...checkboxAttrs,

package/src/components/VCheckbox/VSimpleCheckbox.ts

@@ -17,9 +17,6 @@ import { wrapInArray } from '../../util/helpers'
 export default defineComponent({
   name: 'v-simple-checkbox',
 
-  directives: {
-    Ripple,
-  },
 
   props: {
     ...Colorable.props,