@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

package/src/components/VRating/VRating.ts

@@ -1,4 +1,3 @@
-import {h, withDirectives} from 'vue'
 // Styles
 import './VRating.sass'
 
@@ -11,7 +10,6 @@ import Delayable from '../../mixins/delayable'
 import Sizeable from '../../mixins/sizeable'
 import Rippleable from '../../mixins/rippleable'
 import Themeable from '../../mixins/themeable'
-import Ripple from '../../directives/ripple'
 
 // Utilities
 import { createRange } from '../../util/helpers'
@@ -71,7 +69,7 @@ export default mixins(
     },
     readonly: Boolean,
     size: [Number, String],
-    modelValue: {
+    value: {
       type: Number,
       default: 0,
     },
@@ -81,23 +79,21 @@ export default mixins(
     },
   },
 
-  emits: ['update:modelValue'],
-
   data () {
     return {
       hoverIndex: -1,
-      internalValue: this.modelValue,
+      internalValue: this.value,
     }
   },
 
   computed: {
     directives (): VNodeDirective[] {
-      return [
-        [
-          Ripple,
-          { circle: true, isDirActive: !this.readonly && this.ripple }
-        ]
-      ]
+      if (this.readonly || !this.ripple) return []
+
+      return [{
+        name: 'ripple',
+        value: { circle: true },
+      } as VNodeDirective]
     },
     iconProps (): object {
       const {
@@ -109,7 +105,7 @@ export default mixins(
         size,
         xLarge,
         xSmall,
-      } = this
+      } = this.$props
 
       return {
         dark,
@@ -129,9 +125,9 @@ export default mixins(
 
   watch: {
     internalValue (val) {
-      val !== this.modelValue && this.$emit('update:modelValue', val)
+      val !== this.value && this.$emit('input', val)
     },
-    modelValue (val) {
+    value (val) {
       this.internalValue = val
     },
   },
@@ -153,7 +149,7 @@ export default mixins(
       const props: ItemSlotProps = {
         index: i,
         value: this.internalValue,
-        onClick: this.createClickFn(i),
+        click: this.createClickFn(i),
         isFilled: Math.floor(this.internalValue) > i,
         isHovered: Math.floor(this.hoverIndex) > i,
       }
@@ -211,39 +207,41 @@ export default mixins(
     genItem (i: number): VNode | VNodeChildren | string {
       const props = this.createProps(i)
 
-      if (this.$slots.item) return this.$slots.item(props)
+      if (this.$scopedSlots.item) return this.$scopedSlots.item(props)
 
       const listeners: Record<string, Function> = {
-        onClick: props.onClick,
+        click: props.click,
       }
 
       if (this.hover) {
-        listeners.onMouseenter = (e: MouseEvent) => this.onMouseEnter(e, i)
-        listeners.onMouseleave = this.onMouseLeave
+        listeners.mouseenter = (e: MouseEvent) => this.onMouseEnter(e, i)
+        listeners.mouseleave = this.onMouseLeave
 
         if (this.halfIncrements) {
-          listeners.onMousemove = (e: MouseEvent) => this.onMouseEnter(e, i)
+          listeners.mousemove = (e: MouseEvent) => this.onMouseEnter(e, i)
         }
       }
 
-      return withDirectives(h(VIcon, this.setTextColor(this.getColor(props), {
-        'aria-label': this.$vuetify.lang.t(this.iconLabel, i + 1, Number(this.length)),
-        ...this.iconProps,
-        ...listeners,
-      }), {default: () => [this.getIconName(props)]}), this.directives)
+      return this.$createElement(VIcon, this.setTextColor(this.getColor(props), {
+        attrs: {
+          'aria-label': this.$vuetify.lang.t(this.iconLabel, i + 1, Number(this.length)),
+        },
+        directives: this.directives,
+        props: this.iconProps,
+        on: listeners,
+      }), [this.getIconName(props)])
     },
   },
 
-  render (): VNode {
-    // const children = createRange(Number(this.length)).map(i => this.genItem(i))
+  render (h): VNode {
+    const children = createRange(Number(this.length)).map(i => this.genItem(i))
 
     return h('div', {
-      class: ['v-rating',
-        {
-          'v-rating--readonly': this.readonly,
-          'v-rating--dense': this.dense,
-        }
-      ]
-    }, {default: () => createRange(Number(this.length)).map(i => this.genItem(i)) })
+      staticClass: 'v-rating',
+      class: {
+        'v-rating--readonly': this.readonly,
+        'v-rating--dense': this.dense,
+      },
+    }, children)
   },
 })

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

@@ -1,82 +1,78 @@
 // Libraries
-import {h} from 'vue'
+import Vue from 'vue'
 
 // Components
 import VRating from '../VRating'
 
 // Utilities
 import {
-  mount
+  mount,
+  Wrapper,
+  MountOptions,
 } from '@vue/test-utils'
-import { mergeDeep } from '../../../util/helpers'
+import { ExtractVue } from '../../../util/mixins'
 
-
-const $vuetify = {
+Vue.prototype.$vuetify = {
   rtl: false,
-  icons: {
-    values: {
-    //   ratingEmpty: "mdi-star-outline",
-    //   ratingFull: 'mdi-star'
-    }
-  },
+  icons: {},
   lang: {
     t: str => str,
   },
 }
 
 describe('VRating.ts', () => {
-  // type Instance = ExtractVue<typeof VRating>
-  let mountFunction//: (options?: object) => Wrapper<Instance>
+  type Instance = ExtractVue<typeof VRating>
+  let mountFunction: (options?: object) => Wrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options: MountOptions<Instance>) => {
-      return mount(VRating, mergeDeep({
+      return mount(VRating, {
         // https://github.com/vuejs/vue-test-utils/issues/1130
-        global: {
-          config: {
-            globalProperties: {
-              $vuetify,
-              $createElement: h
-            }
-          }
+        sync: false,
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            lang: {
+              t: str => str,
+            },
+          },
         },
-      }, options))
+        ...options,
+      })
     }
   })
 
-  it('should not register directives if readonly or !ripple', async () => {
+  it('should not register directives if readonly or !ripple', () => {
     const wrapper = mountFunction({
-      props: {
+      propsData: {
         readonly: true,
       },
     })
 
-    expect(wrapper.vm.directives[0][1].isDirActive).toBe(false)
+    expect(wrapper.vm.directives).toHaveLength(0)
 
     wrapper.setProps({ readonly: false })
 
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.directives[0][1].isDirActive).toBe(true)
+    expect(wrapper.vm.directives).toHaveLength(1)
 
     wrapper.setProps({ ripple: false })
 
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.directives[0][1].isDirActive).toBe(false)
+    expect(wrapper.vm.directives).toHaveLength(0)
   })
 
   it('should respond to internal and prop value changes', async () => {
     const wrapper = mountFunction()
 
+    const input = jest.fn()
+    wrapper.vm.$on('input', input)
     expect(wrapper.vm.internalValue).toBe(0)
 
-    wrapper.setProps({ modelValue: 1 })
+    wrapper.setProps({ value: 1 })
     await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.internalValue).toBe(1)
 
-    expect(wrapper.emitted()).not.toHaveProperty('update:modelValue')
+    expect(input).not.toHaveBeenCalled()
 
     const icon = wrapper.findAll('.v-icon').at(1)
 
@@ -84,16 +80,17 @@ describe('VRating.ts', () => {
 
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
-    expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(2)
+    expect(input).toHaveBeenCalledWith(2)
   })
 
   it('should not null the rating if clicked on the current value unless clearable', async () => {
     const wrapper = mountFunction()
 
+    const input = jest.fn()
+    wrapper.vm.$on('input', input)
     expect(wrapper.vm.internalValue).toBe(0)
 
-    wrapper.setProps({ modelValue: 1, clearable: false })
+    wrapper.setProps({ value: 1, clearable: false })
     await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.internalValue).toBe(1)
@@ -108,8 +105,6 @@ describe('VRating.ts', () => {
 
     wrapper.setProps({ clearable: true })
 
-    await wrapper.vm.$nextTick()
-
     icon.trigger('click')
 
     await wrapper.vm.$nextTick()
@@ -119,36 +114,36 @@ describe('VRating.ts', () => {
 
   it('should not react to events when readonly', async () => {
     const wrapper = mountFunction({
-      props: {
+      propsData: {
         readonly: true,
       },
     })
 
+    const input = jest.fn()
+    wrapper.vm.$on('input', input)
+
     const icon = wrapper.find('.v-icon')
 
     icon.trigger('click')
 
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.emitted()).not.toHaveProperty('update:modelValue')
+    expect(input).not.toHaveBeenCalled()
 
     wrapper.setProps({ readonly: false })
 
-    await wrapper.vm.$nextTick()
-
     icon.trigger('click')
 
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
-    expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(1)
+    expect(input).toHaveBeenCalledWith(1)
   })
 
   it('should change hover index on mouse action', async () => {
     jest.useFakeTimers()
 
     const wrapper = mountFunction({
-      props: {
+      propsData: {
         hover: true,
       },
     })
@@ -172,7 +167,7 @@ describe('VRating.ts', () => {
     expect(wrapper.vm.hoverIndex).toBe(4)
   })
 
-  it('should check for half event', async () => {
+  it('should check for half event', () => {
     const wrapper = mountFunction()
 
     const event = new MouseEvent('hover')
@@ -180,8 +175,6 @@ describe('VRating.ts', () => {
 
     wrapper.setProps({ halfIncrements: true })
 
-    await wrapper.vm.$nextTick()
-
     expect(wrapper.vm.genHoverIndex({
       pageX: 0,
       target: {
@@ -197,18 +190,17 @@ describe('VRating.ts', () => {
     }, 1)).toBe(2)
   })
 
-  it('should check for half event in rtl', async () => {
+  it('should check for half event in rtl', () => {
     const wrapper = mountFunction({
-      props: { halfIncrements: true },
-      global: {
-        config: {
-          globalProperties: {
-            $vuetify: {
-              rtl: true,
-            }
-          }
-        }
-      }
+      propsData: { halfIncrements: true },
+      mocks: {
+        $vuetify: {
+          rtl: true,
+          lang: {
+            t: str => str,
+          },
+        },
+      },
     })
 
     const event = new MouseEvent('hover')
@@ -216,8 +208,6 @@ describe('VRating.ts', () => {
 
     wrapper.setProps({ halfIncrements: true })
 
-    await wrapper.vm.$nextTick()
-
     expect(wrapper.vm.genHoverIndex({
       pageX: 0,
       target: {
@@ -234,11 +224,16 @@ describe('VRating.ts', () => {
   })
 
   it('should render a scoped slot', () => {
-    const itemSlot = () => [h('span', 'foobar')]
+    const vm = new Vue()
+    const itemSlot = () => [vm.$createElement('span', 'foobar')]
 
-    const component = {
-      render: () => h(VRating, {}, {item: itemSlot})
-    }
+    const component = Vue.component('test', {
+      render: h => h(VRating, {
+        scopedSlots: {
+          item: itemSlot,
+        },
+      }),
+    })
 
     const wrapper = mount(component, {
       // https://github.com/vuejs/vue-test-utils/issues/1130
@@ -249,15 +244,14 @@ describe('VRating.ts', () => {
   })
 
   it('should bind mousemove listener', () => {
+    const onMouseEnter = jest.fn()
     const wrapper = mountFunction({
-      props: {
+      propsData: {
         halfIncrements: true,
         hover: true,
-      }
+      },
+      methods: { onMouseEnter },
     })
-    const onMouseEnter = jest.fn()
-
-    wrapper.vm.onMouseEnter = onMouseEnter
 
     const icon = wrapper.find('.v-icon')
 

package/src/components/VResponsive/VResponsive.ts

@@ -1,4 +1,3 @@
-import {h, mergeProps} from 'vue'
 import './VResponsive.sass'
 
 // Mixins
@@ -32,27 +31,28 @@ export default mixins(Measurable).extend({
     __cachedSizer (): VNode | [] {
       if (!this.aspectStyle) return []
 
-      return h('div', {
+      return this.$createElement('div', {
         style: this.aspectStyle,
-        class: 'v-responsive__sizer',
+        staticClass: 'v-responsive__sizer',
       })
     },
   },
 
   methods: {
     genContent (): VNode {
-      return h('div', {
-        class: ['v-responsive__content', this.contentClass],
+      return this.$createElement('div', {
+        staticClass: 'v-responsive__content',
+        class: this.contentClass,
       }, getSlot(this))
     },
   },
 
-  render (): VNode {
-    return h('div', mergeProps({
-      class: 'v-responsive',
+  render (h): VNode {
+    return h('div', {
+      staticClass: 'v-responsive',
       style: this.measurableStyles,
-    }, this.$attrs)
-    , [
+      on: this.$listeners,
+    }, [
       this.__cachedSizer,
       this.genContent(),
     ])