@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

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

@@ -13,7 +13,7 @@ import {
   mount,
   Wrapper,
 } from '@vue/test-utils'
-// import { compileToFunctions } from 'vue-template-compiler'
+import { compileToFunctions } from 'vue-template-compiler'
 
 describe('VBtn.ts', () => { // eslint-disable-line max-statements
   let mountFunction: (options?: object) => Wrapper<Vue>
@@ -21,14 +21,14 @@ describe('VBtn.ts', () => { // eslint-disable-line max-statements
   let localVue: typeof Vue
 
   beforeEach(() => {
-    // router = new Router()
-    // localVue = createLocalVue()
-    // localVue.use(Router)
+    router = new Router()
+    localVue = createLocalVue()
+    localVue.use(Router)
 
     mountFunction = (options = {}) => {
       return mount(VBtn, {
-        // localVue,
-        // router,
+        localVue,
+        router,
         ...options,
       })
     }
@@ -40,13 +40,13 @@ describe('VBtn.ts', () => { // eslint-disable-line max-statements
 
   it('should render component with color prop and match snapshot', () => {
     expect(mountFunction({
-      props: {
+      propsData: {
         color: 'green darken-1',
       },
     }).html()).toMatchSnapshot()
 
     expect(mountFunction({
-      props: {
+      propsData: {
         color: 'green darken-1',
         text: true,
       },
@@ -55,11 +55,11 @@ describe('VBtn.ts', () => { // eslint-disable-line max-statements
 
   it('should render component with loader slot and match snapshot', () => {
     const wrapper = mountFunction({
-      props: {
-        loading: true
+      propsData: {
+        loading: true,
       },
       slots: {
-      loader: [{template: '<span>loader</span>' }],
+        loader: [compileToFunctions('<span>loader</span>')],
       },
     })
 
@@ -68,7 +68,7 @@ describe('VBtn.ts', () => { // eslint-disable-line max-statements
 
   it('should render component with loader and match snapshot', () => {
     const wrapper = mount(VBtn, {
-      props: {
+      propsData: {
         loading: true,
       },
     })
@@ -76,211 +76,211 @@ describe('VBtn.ts', () => { // eslint-disable-line max-statements
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  // it('should render tile button and match snapshot', () => {
-  //   const wrapper = mount(VBtn, {
-  //     propsData: {
-  //       tile: true,
-  //     },
-  //   })
-
-  //   expect(wrapper.html()).toMatchSnapshot()
-  // })
-
-  // it('should render an <a> tag when using href prop', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       href: 'http://www.google.com',
-  //     },
-  //   })
-
-  //   expect(wrapper.html()).toMatchSnapshot()
-  // })
-
-  // it('should render specified tag when using tag prop', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       tag: 'a',
-  //     },
-  //   })
-
-  //   expect(wrapper.html()).toMatchSnapshot()
-  // })
-
-  // it('should register and unregister', () => {
-  //   const register = jest.fn()
-  //   const unregister = jest.fn()
-
-  //   const wrapper = mountFunction({
-  //     provide: {
-  //       btnToggle: {
-  //         register,
-  //         unregister,
-  //       },
-  //     },
-  //   })
-
-  //   expect(register).toHaveBeenCalled()
-  //   wrapper.destroy()
-  //   expect(unregister).toHaveBeenCalled()
-  // })
-
-  // it('should emit a click event', async () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       href: '#!',
-  //     },
-  //   })
-
-  //   const click = jest.fn()
-  //   wrapper.vm.$on('click', click)
-  //   wrapper.trigger('click')
-
-  //   wrapper.setProps({ href: undefined, to: '/foo' })
-  //   wrapper.trigger('click')
-
-  //   expect(click.mock.calls).toHaveLength(2)
-  // })
-
-  // it('should use custom active-class', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       inputValue: true,
-  //       activeClass: 'foo',
-  //     },
-  //   })
-
-  //   expect(wrapper.classes('foo')).toBe(true)
-  // })
-
-  // it('should have v-btn--plain class when plain prop is set to true', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       plain: true,
-  //     },
-  //   })
-
-  //   expect(wrapper.classes('v-btn--plain')).toBe(true)
-  // })
-
-  // it('should have the correct icon classes', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       icon: true,
-  //     },
-  //   })
-  //   expect(wrapper.classes('v-btn--icon')).toBe(true)
-
-  //   wrapper.setProps({ icon: false })
-
-  //   expect(wrapper.classes('v-btn--icon')).toBe(false)
-  // })
-
-  // it('should have the correct elevation', async () => { // eslint-disable-line max-statements
-  //   const wrapper = mountFunction()
-
-  //   wrapper.setProps({ disabled: true })
-  //   expect(wrapper.classes('elevation-2')).toBe(false)
-  //   expect(wrapper.classes('v-btn--disabled')).toBe(true)
-
-  //   wrapper.setProps({ disabled: false, elevation: 24 })
-  //   expect(wrapper.classes('elevation-24')).toBe(true)
-
-  //   wrapper.setProps({ elevation: 2 })
-  //   expect(wrapper.classes('elevation-2')).toBe(true)
-  // })
-
-  // it('should toggle on route change if provided a to prop', async () => {
-  //   const toggle = jest.fn()
-  //   const register = jest.fn()
-  //   const unregister = jest.fn()
-  //   const wrapper = mountFunction({
-  //     provide: {
-  //       btnToggle: {
-  //         activeClass: 'foobar',
-  //         register,
-  //         unregister,
-  //       },
-  //     },
-  //     methods: { toggle },
-  //     ref: 'link',
-  //   })
-
-  //   router.push('/foobar')
-
-  //   await wrapper.vm.$nextTick()
-  //   expect(toggle).not.toHaveBeenCalled()
-
-  //   wrapper.setProps({ to: 'fizzbuzz' })
-
-  //   router.push('/fizzbuzz')
-
-  //   await wrapper.vm.$nextTick()
-  //   expect(toggle).toHaveBeenCalled()
-  // })
-
-  // it('should call toggle when used in button group', () => {
-  //   const register = jest.fn()
-  //   const unregister = jest.fn()
-  //   const toggle = jest.fn()
-  //   const wrapper = mountFunction({
-  //     provide: {
-  //       btnToggle: { register, unregister },
-  //     },
-  //     methods: { toggle },
-  //   })
-
-  //   wrapper.trigger('click')
-  //   expect(toggle).toHaveBeenCalled()
-  // })
-
-  // it('should stringify non string|number values', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       value: 'foo',
-  //     },
-  //   })
-
-  //   expect(wrapper.attributes('value')).toBe('foo')
-
-  //   wrapper.setProps({ value: 2 })
-  //   expect(wrapper.attributes('value')).toBe('2')
-
-  //   wrapper.setProps({ value: { foo: 'bar' } })
-  //   expect(wrapper.attributes('value')).toBe('{"foo":"bar"}')
-  // })
-
-  // it('should not add color classes if disabled', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       color: 'primary darken-2',
-  //     },
-  //   })
-
-  //   expect(wrapper.html()).toMatchSnapshot()
-
-  //   wrapper.setProps({
-  //     disabled: true,
-  //   })
-  //   expect(wrapper.html()).toMatchSnapshot()
-  // })
-
-  // it('should retain focus when clicked', async () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       retainFocusOnClick: true,
-  //     },
-  //   })
-  //   const event = new MouseEvent('click', { detail: 1 })
-  //   const blur = jest.fn()
-
-  //   wrapper.element.blur = blur
-  //   wrapper.element.dispatchEvent(event)
-
-  //   expect(blur).not.toHaveBeenCalled()
-
-  //   wrapper.setProps({ retainFocusOnClick: false })
-  //   wrapper.element.dispatchEvent(event)
-
-  //   expect(blur).toHaveBeenCalled()
-  // })
+  it('should render tile button and match snapshot', () => {
+    const wrapper = mount(VBtn, {
+      propsData: {
+        tile: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render an <a> tag when using href prop', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        href: 'http://www.google.com',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render specified tag when using tag prop', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        tag: 'a',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should register and unregister', () => {
+    const register = jest.fn()
+    const unregister = jest.fn()
+
+    const wrapper = mountFunction({
+      provide: {
+        btnToggle: {
+          register,
+          unregister,
+        },
+      },
+    })
+
+    expect(register).toHaveBeenCalled()
+    wrapper.destroy()
+    expect(unregister).toHaveBeenCalled()
+  })
+
+  it('should emit a click event', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        href: '#!',
+      },
+    })
+
+    const click = jest.fn()
+    wrapper.vm.$on('click', click)
+    wrapper.trigger('click')
+
+    wrapper.setProps({ href: undefined, to: '/foo' })
+    wrapper.trigger('click')
+
+    expect(click.mock.calls).toHaveLength(2)
+  })
+
+  it('should use custom active-class', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        inputValue: true,
+        activeClass: 'foo',
+      },
+    })
+
+    expect(wrapper.classes('foo')).toBe(true)
+  })
+
+  it('should have v-btn--plain class when plain prop is set to true', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        plain: true,
+      },
+    })
+
+    expect(wrapper.classes('v-btn--plain')).toBe(true)
+  })
+
+  it('should have the correct icon classes', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        icon: true,
+      },
+    })
+    expect(wrapper.classes('v-btn--icon')).toBe(true)
+
+    wrapper.setProps({ icon: false })
+
+    expect(wrapper.classes('v-btn--icon')).toBe(false)
+  })
+
+  it('should have the correct elevation', async () => { // eslint-disable-line max-statements
+    const wrapper = mountFunction()
+
+    wrapper.setProps({ disabled: true })
+    expect(wrapper.classes('elevation-2')).toBe(false)
+    expect(wrapper.classes('v-btn--disabled')).toBe(true)
+
+    wrapper.setProps({ disabled: false, elevation: 24 })
+    expect(wrapper.classes('elevation-24')).toBe(true)
+
+    wrapper.setProps({ elevation: 2 })
+    expect(wrapper.classes('elevation-2')).toBe(true)
+  })
+
+  it('should toggle on route change if provided a to prop', async () => {
+    const toggle = jest.fn()
+    const register = jest.fn()
+    const unregister = jest.fn()
+    const wrapper = mountFunction({
+      provide: {
+        btnToggle: {
+          activeClass: 'foobar',
+          register,
+          unregister,
+        },
+      },
+      methods: { toggle },
+      ref: 'link',
+    })
+
+    router.push('/foobar')
+
+    await wrapper.vm.$nextTick()
+    expect(toggle).not.toHaveBeenCalled()
+
+    wrapper.setProps({ to: 'fizzbuzz' })
+
+    router.push('/fizzbuzz')
+
+    await wrapper.vm.$nextTick()
+    expect(toggle).toHaveBeenCalled()
+  })
+
+  it('should call toggle when used in button group', () => {
+    const register = jest.fn()
+    const unregister = jest.fn()
+    const toggle = jest.fn()
+    const wrapper = mountFunction({
+      provide: {
+        btnToggle: { register, unregister },
+      },
+      methods: { toggle },
+    })
+
+    wrapper.trigger('click')
+    expect(toggle).toHaveBeenCalled()
+  })
+
+  it('should stringify non string|number values', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: 'foo',
+      },
+    })
+
+    expect(wrapper.attributes('value')).toBe('foo')
+
+    wrapper.setProps({ value: 2 })
+    expect(wrapper.attributes('value')).toBe('2')
+
+    wrapper.setProps({ value: { foo: 'bar' } })
+    expect(wrapper.attributes('value')).toBe('{"foo":"bar"}')
+  })
+
+  it('should not add color classes if disabled', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        color: 'primary darken-2',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({
+      disabled: true,
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should retain focus when clicked', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        retainFocusOnClick: true,
+      },
+    })
+    const event = new MouseEvent('click', { detail: 1 })
+    const blur = jest.fn()
+
+    wrapper.element.blur = blur
+    wrapper.element.dispatchEvent(event)
+
+    expect(blur).not.toHaveBeenCalled()
+
+    wrapper.setProps({ retainFocusOnClick: false })
+    wrapper.element.dispatchEvent(event)
+
+    expect(blur).toHaveBeenCalled()
+  })
 })

package/src/components/VBtnToggle/VBtnToggle.ts

@@ -28,7 +28,7 @@ export default mixins(
   computed: {
     classes (): object {
       return {
-        ...ButtonGroup.computed.classes.call(this),
+        ...ButtonGroup.options.computed.classes.call(this),
         'v-btn-toggle': true,
         'v-btn-toggle--borderless': this.borderless,
         'v-btn-toggle--dense': this.dense,
@@ -44,7 +44,7 @@ export default mixins(
   methods: {
     genData () {
       const data = this.setTextColor(this.color, {
-        ...ButtonGroup.methods.genData.call(this),
+        ...ButtonGroup.options.methods.genData.call(this),
       })
 
       if (this.group) return data

package/src/components/VCalendar/VCalendar.ts

@@ -1,9 +1,8 @@
-import {h} from 'vue'
 // Styles
 // import '../../stylus/components/_calendar-daily.styl'
 
 // Types
-import { VNode, Component, defineComponent } from 'vue'
+import { VNode, Component } from 'vue'
 
 // Mixins
 import CalendarWithEvents from './mixins/calendar-with-events'
@@ -49,9 +48,8 @@ interface VCalendarRenderProps {
 }
 
 /* @vue/component */
-export default defineComponent({
+export default CalendarWithEvents.extend({
   name: 'v-calendar',
-  extends: CalendarWithEvents,
 
   props: {
     ...props.calendar,
@@ -347,33 +345,41 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const { start, end, maxDays, component, weekdays, categories } = this.renderProps
 
     return h(component, {
-      class: ['v-calendar', {
+      staticClass: 'v-calendar',
+      class: {
         'v-calendar-events': !this.noEvents,
-      }],
-      ...this.$props,
-      start: start.date,
-      end: end.date,
-      maxDays,
-      weekdays,
-      categories,
-      role: 'grid',
+      },
+      props: {
+        ...this.$props,
+        start: start.date,
+        end: end.date,
+        maxDays,
+        weekdays,
+        categories,
+      },
+      attrs: {
+        role: 'grid',
+      },
       directives: [{
         modifiers: { quiet: true },
         name: 'resize',
         value: this.updateEventVisibility,
       }],
-      ...this.$listeners,
-      'onClick:date': (day: CalendarTimestamp, e?: MouseEvent) => {
-        if (this.$listeners.input) {
-          this.$emit('input', day.date)
-        }
-        if (this.$listeners['click:date']) {
-          this.$emit('click:date', day, e)
-        }
+      on: {
+        ...this.$listeners,
+
+        'click:date': (day: CalendarTimestamp, e?: MouseEvent) => {
+          if (this.$listeners.input) {
+            this.$emit('input', day.date)
+          }
+          if (this.$listeners['click:date']) {
+            this.$emit('click:date', day, e)
+          }
+        },
       },
       scopedSlots: this.getScopedSlots(),
     })