@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha32

package/src/components/VBanner/VBanner.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h, withDirectives, vShow } from 'vue'
 // Styles
 import './VBanner.sass'
 
@@ -17,8 +17,9 @@ import Toggleable from '../../mixins/toggleable'
 // Utilities
 import mixins from '../../util/mixins'
 import { convertToUnit, getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
-// Typeslint
+// Types
 import { VNode } from 'vue'
 
 /* @vue/component */
@@ -31,13 +32,15 @@ export default mixins(
 
   inheritAttrs: false,
 
+  emits: ['update:modelValue', 'click:icon'],
+
   props: {
     app: Boolean,
     icon: String,
     iconColor: String,
     singleLine: Boolean,
     sticky: Boolean,
-    value: {
+    modelValue: {
       type: Boolean,
       default: true,
     },
@@ -76,6 +79,18 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['input', 'update:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     /** @public */
     toggle () {
@@ -93,7 +108,7 @@ export default mixins(
         content = h(VIcon, {
           color: this.iconColor,
           size: 28
-        }, [this.icon])
+        }, () => [this.icon])
       } else {
         content = getSlot(this, 'icon')
       }
@@ -103,7 +118,7 @@ export default mixins(
         color: this.color,
         size: 40,
         onClick: this.iconClick,
-      }, [content])
+      }, () => [content])
     },
     genText () {
       return h('div', {
@@ -141,21 +156,19 @@ export default mixins(
 
   render (): VNode {
     const data = {
-      class: 'v-banner',
-      attrs: this.attrs$,
-      class: this.classes,
+      class: ['v-banner', this.classes],
+      ...this.$attrs,
       style: this.styles,
-      directives: [{
-        name: 'show',
-        value: this.isActive,
-      }],
     }
 
-    return h(VExpandTransition, [
-      h(
-        'div',
-        this.outlined ? data : this.setBackgroundColor(this.color, data),
-        [this.genWrapper()],
+    return h(VExpandTransition, {}, () => [
+      withDirectives(
+        h(
+          'div',
+          this.outlined ? data : this.setBackgroundColor(this.color, data),
+          [this.genWrapper()],
+        ),
+        [[vShow, this.isActive]],
       ),
     ])
   },

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

@@ -10,6 +10,7 @@ import {
   mount,
   Wrapper,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 // Types
 import { ExtractVue } from '../../../util/mixins'
@@ -22,16 +23,21 @@ describe('VBanner.ts', () => {
     mountFunction = (options = {}) => {
       return mount(VBanner, {
         ...options,
-        mocks: {
-          $vuetify: {
-            application: {
-              top: 0,
-              bar: 0,
-            },
-            breakpoint: {
-              mobile: true,
-              mobileBreakpoint: 1264,
-              width: 1000,
+        global: {
+          mocks: {
+            $vuetify: {
+              application: {
+                top: 0,
+                bar: 0,
+              },
+              breakpoint: {
+                mobile: true,
+                mobileBreakpoint: 1264,
+                width: 1000,
+              },
+              icons: {
+                component: null,
+              },
             },
           },
         },
@@ -67,7 +73,7 @@ describe('VBanner.ts', () => {
       slots: {
         default: 'Hello, World!',
       },
-      propsData: {
+      props: {
         icon: 'mdi-plus',
       },
     })
@@ -79,7 +85,7 @@ describe('VBanner.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: 'Hello, World!',
-        icon: { render: h => h('span', ['icon']) },
+        icon: () => h('span', ['icon']),
       },
     })
 
@@ -90,7 +96,7 @@ describe('VBanner.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: 'Hello, World!',
-        actions: { render: h => h('div', [h('button', ['OK']), h('button', ['Cancel'])]) },
+        actions: () => h('div', [h('button', ['OK']), h('button', ['Cancel'])]),
       },
     })
 
@@ -102,19 +108,16 @@ describe('VBanner.ts', () => {
       slots: {
         default: 'Hello, World!',
       },
-      propsData: {
+      props: {
         icon: 'mdi-plus',
       },
     })
 
-    const fn = jest.fn()
-    wrapper.vm.$on('click:icon', fn)
-
     const icon = wrapper.find('.v-banner__icon')
 
-    expect(fn).not.toHaveBeenCalled()
+    expect(wrapper.emitted('click:icon')).toBeFalsy()
     icon.trigger('click')
-    expect(fn).toHaveBeenCalled()
+    expect(wrapper.emitted('click:icon')).toBeTruthy()
   })
 
   it(`should not render icon container if icon property and slot aren't passed`, () => {
@@ -167,16 +170,10 @@ describe('VBanner.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: 'Hello, World!',
-      },
-      scopedSlots: {
-        actions (props) {
-          return h('div', {
-            on: {
-              click: props.dismiss,
-            },
-            class: 'test',
-          })
-        },
+        actions: ({ dismiss }) => h('div', {
+          onClick: dismiss,
+          class: 'test',
+        }),
       },
     })
 
@@ -191,9 +188,11 @@ describe('VBanner.ts', () => {
       slots: {
         default: 'Hello, World!',
       },
-      mocks: {
-        $vuetify: {
-          breakpoint: new Breakpoint(preset),
+      global: {
+        mocks: {
+          $vuetify: {
+            breakpoint: new Breakpoint(preset),
+          },
         },
       },
     })
@@ -201,16 +200,16 @@ describe('VBanner.ts', () => {
     expect(wrapper.classes('v-banner--is-mobile')).toBeTruthy()
   })
 
-  it('should apply sticky when using the app prop', () => {
+  it('should apply sticky when using the app prop', async () => {
     const wrapper = mountFunction({
-      propsData: { app: true },
+      props: { app: true },
     })
 
     expect(wrapper.vm.isSticky).toBe(true)
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       app: false,
       sticky: true,
     })
@@ -219,7 +218,7 @@ describe('VBanner.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ sticky: false })
+    await wrapper.setProps({ app: false, sticky: false })
 
     expect(wrapper.vm.isSticky).toBe(false)
 

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

@@ -114,7 +114,7 @@ exports[`VBanner.ts should render component with icon slot 1`] = `
 `;
 
 exports[`VBanner.ts should render sinle-line component with content 1`] = `
-<div class="v-banner v-sheet theme--light v-banner--is-mobile">
+<div class="v-banner v-sheet theme--light v-banner--is-mobile v-banner--single-line">
   <div class="v-banner__wrapper">
     <div class="v-banner__content">
       <div class="v-banner__text">

package/src/components/VBottomNavigation/VBottomNavigation.ts

@@ -23,11 +23,11 @@ import { VNode } from 'vue'
 export default mixins(
   Applicationable('bottom', [
     'height',
-    'inputValue',
+    'modelValue',
   ]),
   Colorable,
   Measurable,
-  ToggleableFactory('inputValue'),
+  ToggleableFactory(),
   Proxyable,
   Scrollable,
   Themeable
@@ -48,7 +48,7 @@ export default mixins(
     },
     hideOnScroll: Boolean,
     horizontal: Boolean,
-    inputValue: {
+    modelValue: {
       type: Boolean,
       default: true,
     },
@@ -60,9 +60,11 @@ export default mixins(
     },
   },
 
+  emits: ['update:modelValue', 'change'],
+
   data () {
     return {
-      isActive: this.inputValue,
+      isActive: this.modelValue,
     }
   },
 
@@ -72,7 +74,7 @@ export default mixins(
         Scrollable.computed.canScroll.call(this) &&
         (
           this.hideOnScroll ||
-          !this.inputValue
+          !this.modelValue
         )
       )
     },
@@ -98,6 +100,16 @@ export default mixins(
   },
 
   created () {
+    const breakingProps = [
+      ['inputValue', 'modelValue'],
+      ['onUpdate:input-value', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     /* istanbul ignore next */
     if (this.$attrs.hasOwnProperty('active')) {
       breaking('active.sync', 'value or v-model', this)
@@ -110,7 +122,7 @@ export default mixins(
         this.isActive = !this.isScrollingUp ||
           this.currentScroll > this.computedScrollThreshold
 
-        this.$emit('update:input-value', this.isActive)
+        this.$emit('update:modelValue', this.isActive)
       }
 
       if (this.currentThreshold < this.computedScrollThreshold) return
@@ -134,10 +146,10 @@ export default mixins(
       activeClass: this.activeClass,
       mandatory: Boolean(
         this.mandatory ||
-        this.value !== undefined
+        this.modelValue !== undefined
       ),
       tag: this.tag,
-      value: this.internalValue,
+      modelValue: this.internalValue,
       onChange: this.updateValue
     })
 

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

@@ -1,5 +1,5 @@
 // Libraries
-import Vue from 'vue'
+import { h } from 'vue'
 
 // Components
 import VBottomNavigation from '../VBottomNavigation'
@@ -8,8 +8,9 @@ import VBtn from '../../VBtn/VBtn'
 // Utilities
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 function createBtn (val = null) {
@@ -19,26 +20,31 @@ function createBtn (val = null) {
   }
   if (val) options.attrs = { value: val }
 
-  return Vue.component('test', {
-    render (h) {
+  return {
+    name: 'test',
+    render () {
       return h(VBtn, options)
     },
-  })
+  }
 }
 
 describe('VBottomNavigation.ts', () => {
   type Instance = InstanceType<typeof VBottomNavigation>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
-    mountFunction = (options: MountOptions<Instance> = {}) => {
+    mountFunction = (options: MountingOptions<Instance> = {}) => {
       return mount(VBottomNavigation, {
-        mocks: {
-          $vuetify: {
-            application: {
-              bottom: 0,
-              register: () => {},
-              unregister: () => {},
+        global: {
+          mocks: {
+            $vuetify: {
+              application: {
+                bottom: 0,
+                register: () => {},
+                unregister: () => {},
+              },
             },
           },
         },
@@ -49,7 +55,7 @@ describe('VBottomNavigation.ts', () => {
 
   it('should be visible with a true value', async () => {
     const wrapper = mountFunction({
-      propsData: { inputValue: true },
+      props: { modelValue: true },
       slots: {
         default: [VBtn, VBtn],
       },
@@ -60,15 +66,15 @@ describe('VBottomNavigation.ts', () => {
     expect(wrapper.vm.styles).toMatchSnapshot()
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ inputValue: false })
+    await wrapper.setProps({ modelValue: false })
 
     expect(wrapper.vm.styles).toMatchSnapshot()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should update application when height or inputValue changes', () => {
+  it('should update application when height or modelValue changes', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         app: true,
       },
       slots: {
@@ -76,25 +82,25 @@ describe('VBottomNavigation.ts', () => {
       },
     })
 
-    const spy = jest.spyOn(wrapper.vm, 'updateApplication')
+    const updateApplication = wrapper.vm.updateApplication
+    const spy = jest.fn(updateApplication)
+    wrapper.vm.updateApplication = spy
 
-    wrapper.setProps({ height: 80 })
+    await wrapper.setProps({ height: 80 })
 
     expect(spy).toHaveBeenCalled()
 
-    wrapper.setProps({ inputValue: false })
+    await wrapper.setProps({ modelValue: false })
 
     expect(spy).toHaveBeenCalledTimes(2)
   })
 
   it('should fire an event and activate/deactivate when reached threshold and using hideOnScroll', async () => {
-    const updateInputValue = jest.fn()
     const wrapper = mountFunction({
-      propsData: { hideOnScroll: true },
+      props: { hideOnScroll: true },
     })
-    wrapper.vm.$on('update:input-value', updateInputValue)
 
-    expect(updateInputValue).not.toHaveBeenCalled()
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
 
     // Scrolling down
     wrapper.vm.currentScroll = 1000
@@ -102,7 +108,8 @@ describe('VBottomNavigation.ts', () => {
     wrapper.vm.isScrollingUp = false
 
     wrapper.vm.thresholdMet()
-    expect(updateInputValue).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([true])
     expect(wrapper.vm.isActive).toBeTruthy()
 
     // Scrolling up
@@ -111,28 +118,27 @@ describe('VBottomNavigation.ts', () => {
     wrapper.vm.isScrollingUp = true
 
     wrapper.vm.thresholdMet()
-    expect(updateInputValue).toHaveBeenCalledTimes(2)
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(2)
+    expect(wrapper.emitted('update:modelValue')[1]).toEqual([false])
     expect(wrapper.vm.isActive).toBeFalsy()
   })
 
-  it('should fire change event when updated', () => {
-    const change = jest.fn()
+  it('should fire change event when updated', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         app: true,
       },
       slots: {
-        default: [VBtn, VBtn],
-      },
-      listeners: {
-        change,
+        default: () => [h(VBtn, { value: 1 }), h(VBtn, { value: 2 })],
       },
     })
 
-    expect(change).not.toHaveBeenCalled()
+    expect(wrapper.emitted('change')).toBeFalsy()
 
-    wrapper.find('button').trigger('click')
+    // Simulate clicking on a button by calling the updateValue method directly
+    wrapper.vm.updateValue(1)
 
-    expect(change).toHaveBeenCalled()
+    expect(wrapper.emitted('change')).toBeTruthy()
+    expect(wrapper.emitted('change')[0]).toEqual([1])
   })
 })

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

@@ -8,17 +8,17 @@ Object {
 `;
 
 exports[`VBottomNavigation.ts should be visible with a true value 2`] = `
-<div class="v-bottom-navigation v-item-group theme--light"
+<div class="v-item-group theme--light v-bottom-navigation"
      style="height: 56px; transform: none;"
 >
-  <button type="button"
-          class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+  <button class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+          type="button"
   >
     <span class="v-btn__content">
     </span>
   </button>
-  <button type="button"
-          class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+  <button class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+          type="button"
   >
     <span class="v-btn__content">
     </span>
@@ -34,17 +34,18 @@ Object {
 `;
 
 exports[`VBottomNavigation.ts should be visible with a true value 4`] = `
-<div class="v-bottom-navigation v-item-group theme--light"
+<div class="v-item-group theme--light v-bottom-navigation"
      style="height: 56px; transform: translateY(100%);"
+     directives="[object Object]"
 >
-  <button type="button"
-          class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+  <button class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+          type="button"
   >
     <span class="v-btn__content">
     </span>
   </button>
-  <button type="button"
-          class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+  <button class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+          type="button"
   >
     <span class="v-btn__content">
     </span>

package/src/components/VBreadcrumbs/VBreadcrumbs.ts

@@ -1,9 +1,8 @@
-import {h} from 'vue'
+import { h, VNode } from 'vue'
 // Styles
 import './VBreadcrumbs.sass'
 
 // Types
-import { VNode } from 'vue'
 import { PropValidator } from 'vue/types/options'
 
 // Components
@@ -46,7 +45,7 @@ export default mixins(
 
   methods: {
     genDivider () {
-      return h(VBreadcrumbsDivider, this.$slots.divider ? this.$slots.divider : this.divider)
+      return h(VBreadcrumbsDivider, {}, () => this.$slots.divider ? this.$slots.divider() : this.divider)
     },
     genItems () {
       const items = []
@@ -59,7 +58,12 @@ export default mixins(
         keys.push(item.text)
 
         if (hasSlot) items.push(this.$slots.item!({ item }))
-        else items.push(h(VBreadcrumbsItem, { key: keys.join('.'), ...item }, [item.text]))
+        else {
+          items.push(h(VBreadcrumbsItem, {
+            key: keys.join('.'),
+            ...item
+          }, () => [item.text]))
+        }
 
         if (i < this.items.length - 1) items.push(this.genDivider())
       }

package/src/components/VBreadcrumbs/VBreadcrumbsItem.ts

@@ -20,6 +20,10 @@ export default mixins(Routable).extend({
       type: [Boolean, Object],
       default: false,
     },
+    text: {
+      type: String,
+      default: '',
+    },
   },
 
   computed: {